From 642b8ca73d8f3be1f908be309f6c18f1715fcd24 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 31 May 2024 09:05:23 +0300
Subject: [PATCH] external el

---
 front/components/element.vue                  | 34 +++++++++++++++++++
 .../p_[org_id]/i_[inv_id]/index.vue           |  6 +++-
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 front/components/element.vue

diff --git a/front/components/element.vue b/front/components/element.vue
new file mode 100644
index 0000000..da4f90e
--- /dev/null
+++ b/front/components/element.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { apiBase } from '~/helpers';
+import type { ApiTypeExternal } from '~/helpers';
+
+type ExternalNameType = { [s: string]: string; }
+
+const props = defineProps(['id'])
+const id = props.id
+const external_elements = useState<ExternalNameType>('external_elements', () => { return {} })
+const name = ref()
+
+const loadOneElement = async (id: string) => {
+    external_elements.value[id] = 'loading'
+    const data = await $fetch<ApiTypeExternal>(`${apiBase}/element/external/id/${id}`)
+    external_elements.value[id] = data.Description
+    name.value = external_elements.value[id]
+}
+
+if (external_elements.value[id]) {
+    name.value = external_elements.value[id]
+} else {
+    await loadOneElement(id)
+}
+watch(external_elements, () => {
+    if (name.value !== external_elements.value[id]) {
+        name.value = external_elements.value[id]
+    }
+}, { deep: true })
+</script>
+<template>
+    <Suspense>
+        {{ name }}
+    </Suspense>
+</template>
\ No newline at end of file
diff --git a/front/pages/organization/p_[org_id]/i_[inv_id]/index.vue b/front/pages/organization/p_[org_id]/i_[inv_id]/index.vue
index cece1c6..c26496b 100644
--- a/front/pages/organization/p_[org_id]/i_[inv_id]/index.vue
+++ b/front/pages/organization/p_[org_id]/i_[inv_id]/index.vue
@@ -33,6 +33,10 @@ onMounted(async () => {
     </UCard>
     <div class="mb-4">
         <UTable :rows="elements?.results"
-            :columns="makeColumns(['id', 'external_id', 'element_id', 'photo', 'additional_text'])" />
+            :columns="makeColumns(['id', 'external_id', 'element_id', 'photo', 'additional_text'])">
+            <template #external_id-data="{ row }">
+                <Element :id="row.external_id" />
+            </template>
+        </UTable>
     </div>
 </template>
\ No newline at end of file