columns at front

back/inventory/serializers.py

@@ -22,7 +22,14 @@ class InventorySerializer(serializers.ModelSerializer):
 
     class Meta:
         model = InventoryItem
-        fields = ["id", "partner", "partner_name", "name", "total_elements"]
+        fields = [
+            "id",
+            "name",
+            "created_at",
+            "total_elements",
+            "partner",
+            "partner_name",
+        ]
 
     def get_total_elements(self, instance):
         return Element.objects.filter(inventory=instance).count()

front/helpers.ts

@@ -19,3 +19,12 @@ export type ApiTypeExternal = {
     Description: string;
     Ref_Key: string;
 }
+
+export const makeColumns = (cols: string[]) => {
+    return cols.map(el => {
+        return {
+            key: el,
+            label: el.toUpperCase()
+        }
+    })
+}

front/pages/organization/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { apiBase } from '~/helpers';
+import { apiBase, makeColumns } from '~/helpers';
 import type { ApiTypeList } from '~/helpers';
 
 const headers = new Headers();
@@ -12,9 +12,9 @@ const { data } = await useFetch<ApiTypeList>(`${apiBase}/partner/`, { headers })
         <UButton icon="i-heroicons-plus" to="/organization/new">Новая инвентаризация</UButton>
     </div>
     <div class="mb-4">
-        <UTable :rows="data?.results">
-            <template #external_id-data="{ row }">
-                <NuxtLink :to="`/organization/p_${row.id}`">{{ row.external_id }}</NuxtLink>
+        <UTable :rows="data?.results":columns="makeColumns(['id', 'external_id', 'name', 'total_inventory'])">
+            <template #name-data="{ row }">
+                <NuxtLink :to="`/organization/p_${row.id}`">{{ row.name }}</NuxtLink>
             </template>
         </UTable>
     </div>

front/pages/organization/p_[org_id]/i_[inv_id]/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { apiBase } from '~/helpers';
+import { apiBase, makeColumns } from '~/helpers';
 import type { ApiTypeList } from '~/helpers';
 
 const headers = new Headers();
@@ -15,6 +15,7 @@ const { data } = await useFetch<ApiTypeList>(`${apiBase}/element?inventory_id=${
             Добавить элемент</UButton>
     </div>
     <div class="mb-4">
-        <UTable :rows="data?.results" />
+        <UTable :rows="data?.results"
+            :columns="makeColumns(['id', 'external_id', 'element_id', 'photo', 'additional_text'])" />
     </div>
 </template>

front/pages/organization/p_[org_id]/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { apiBase } from '~/helpers';
+import { apiBase, makeColumns } from '~/helpers';
 import type { ApiTypeList } from '~/helpers';
 
 const headers = new Headers();
@@ -10,11 +10,14 @@ const route = useRoute()
 const { data } = await useFetch<ApiTypeList>(`${apiBase}/inventory?partner_id=${route.params.org_id}`, { headers })
 </script>
 <template>
-    <UTable :rows="data?.results">
-        <template #id-data="{ row }">
+    <UTable :rows="data?.results" :columns="makeColumns(['id', 'name', 'created_at', 'total_elements',])">
+        <template #name-data="{ row }">
             <NuxtLink :to="`/organization/p_${route.params.org_id}/i_${row.id}`">
-                {{ row.id }}
+                {{ row.name }}
             </NuxtLink>
         </template>
+        <template #created_at-data="{ row }">
+            {{ new Date(row.created_at).toLocaleString() }}
+        </template>
     </UTable>
 </template>