From 424a25ed15490f337579748b708fd051d8f6e0bd Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 18 Jul 2024 14:26:20 +0300
Subject: [PATCH] front part

---
 front/components/getImage.vue | 22 ++++++++++++++++++++++
 front/pages/table/index.vue   |  1 +
 2 files changed, 23 insertions(+)
 create mode 100644 front/components/getImage.vue

diff --git a/front/components/getImage.vue b/front/components/getImage.vue
new file mode 100644
index 0000000..f10cf41
--- /dev/null
+++ b/front/components/getImage.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = defineProps(['file_id'])
+
+import { apiBase } from '~/helpers';
+const headers = new Headers();
+headers.append("Content-Type", "application/json");
+
+const file_url_data = await $fetch(`${apiBase}/tgbot/items/get_image/${props.file_id}/`, { headers })
+const file_url = file_url_data[0]
+const isOpen = ref(false)
+const openImage = () => {
+    isOpen.value = !isOpen.value
+}
+</script>
+<template>
+    <a href="#">
+        <Icon name="i-mdi-image" @click="openImage" />
+    </a>
+    <UModal v-model="isOpen">
+        <img :src="file_url" />
+    </UModal>
+</template>
\ No newline at end of file
diff --git a/front/pages/table/index.vue b/front/pages/table/index.vue
index 7888882..a466d3d 100644
--- a/front/pages/table/index.vue
+++ b/front/pages/table/index.vue
@@ -41,6 +41,7 @@ const columns = [
                 <ul>
                     <li v-for="el in item.field">
                         {{ el.field.name }}
+                        <GetImage :file_id="el.id" />
                     </li>
                 </ul>
             </template>