external el

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>

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>