group data in front

front/assets/main.scss

@@ -55,3 +55,7 @@
 
     }
 }
+
+th.tmc {
+    @apply min-w-[800px];
+}

front/pages/table/index.vue

@@ -5,7 +5,13 @@ const pagination = ref({ total: 10, pageCount: 10 })
 
 const loadData = async () => {
     const items_data = await apiCall<ApiPaged<TgItem>>(`tgbot/?page=${page.value}`)
-    items.value = items_data.results
+    const res = items_data.results
+    res.map(item => {
+        const uniq = [...new Set(item.tmc.map(el => el.tmc.id))]
+        const uniq_tmc = uniq.map(id => item.tmc.filter(el => el.tmc.id == id))
+        item.uniq = uniq_tmc
+    })
+    items.value = res
     pagination.value.total = items_data.count
     pagination.value.pageCount = items_data.per_page
 }
@@ -17,7 +23,7 @@ const columns = [
         label: 'Название'
     },
     {
-
+        class: 'tmc',
         key: 'tmc',
         label: 'ТМЦ'
     },
@@ -39,23 +45,25 @@ const columns = [
                 Обновлено: {{ new Date(row.updated_at).toLocaleString('ru-RU') }}
             </template>
             <template #tmc-data="{ row }">
-                <div class="inv_item" v-for="item in row.tmc">
+                <div v-for="uniq_tmc in row.uniq" class="inv_element">
-                    <strong>{{ item.tmc.name }}</strong>
+                    <h3>{{ uniq_tmc[0].tmc.name }}</h3>
+                    <div class="inv_item" v-for="item in uniq_tmc">
                         <ul class="inv_list">
-                        <li v-for="el in item.field" class="inv_item">
+                            <li v-for="el in item.field" class="inv_inner">
-                            <span class="inv_item_name">
+                                <span class="inv_inner_name">
                                     {{ el.field.name }}:
                                 </span>
-                            <span :class="['inv_item_text', { 'inv_item__error': !el.text }]">
+                                <span :class="['inv_inner_text', { 'inv_inner__error': !el.text }]">
                                     {{ el.text || 'Нет расшифровки' }}
                                 </span>
-                            <span :class="['inv_item_image', { 'inv_item__error': !el.file_id }]">
+                                <span :class="['inv_inner_image', { 'inv_inner__error': !el.file_id }]">
                                     <GetImage :file_id="el.file_id" v-if="el.file_id" />
                                     <span v-else>Нет изображения</span>
                                 </span>
                             </li>
                         </ul>
                     </div>
+                </div>
             </template>
             <template #user_id-data="{ row }">
                 <GetAuthor :user_id="row.user_id" />
@@ -69,20 +77,29 @@ const columns = [
 table {
     max-width: 100%;
 }
-.inv_item {
+
-    @apply mb-2;
+.inv_element {
-}
+    counter-reset: inv;
-.inv_list {
-    // @apply flex flex-col gap-2;
 }
+
 .inv_item {
-    @apply break-all;
+    @apply flex align-top gap-1;
+
+    &::before {
+        counter-increment: inv;
+        content: counter(inv) "."
+    }
+}
+.inv_inner {
     >* {
         @apply mr-2;
     }
+
     &_name {}
 
-    &_text {}
+    &_text {
+        @apply break-all;
+    }
 
     &_image {}
 
@@ -90,4 +107,12 @@ table {
         @apply text-red-400 dark:text-red-800;
     }
 }
+
+.inv_list {
+    // @apply flex flex-col gap-2;
+}
+
+.inv_item {
+    @apply mb-2;
+}
 </style>

front/types/index.d.ts

@@ -40,6 +40,7 @@ declare global {
         created_at: string
         updated_at: string
         tmc: number[]
+        uniq?: any[]
     }
 
     type ApiPaged<T> = {