to_inventory/front/pages/table/index.vue

<script setup lang="ts">
import { telegramLoginTemp } from 'vue3-telegram-login'

const config = useRuntimeConfig()
const items = ref()
const page = ref(1)
const pagination = ref({ total: 10, pageCount: 10 })
const user_id = ref()
const loading = ref(false)

if (process.env.NODE_ENV == 'development') {
    user_id.value = ''
}

const loadData = async () => {
    loading.value = true
    const items_data = await apiCall<ApiPaged<TgItem>>(`tgbot/?page=${page.value}&user_id=${user_id.value || ''}`)
    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
    loading.value = false
}
onMounted(loadData)
watch(page, loadData)
const columns = [
    {
        key: 'name',
        label: 'Название'
    },
    {
        class: 'tmc',
        key: 'tmc',
        label: 'ТМЦ'
    },
    {
        key: 'user_id',
        label: 'ID автора'
    }
]

const testCallback = (user: any) => {
    user_id.value = user.id
    loadData()
}

const deleteInv = async (id: string) => {
    const res = await apiCall<ApiPaged<TgItem>>(`tgbot/${id}/`, 'delete')
    loadData()
}
</script>
<template>
    <div class="col-span-12 page-header">
        <h1>Проведенные инвентаризации</h1>
    </div>
    <div class="col-span-12" v-if="user_id == undefined">
        <UCard>
            <template #header>
                Необходимо залогиниться
            </template>
            <telegramLoginTemp mode="callback" :telegram-login="config.public.tgbot" @callback="testCallback" />
        </UCard>
    </div>
    <div class="col-span-12" v-else>
        <UTable :rows="items" :columns="columns" :ui="{ td: { base: 'whitespace-normal max-w-sm align-top' } }"
            :loading="loading">
            <template #name-data="{ row }">
                <h3>
                    <NuxtLink :to="`table/${row.id}`">{{ row.name }}</NuxtLink>
                </h3>
                Создано: {{ new Date(row.created_at).toLocaleString('ru-RU') }}<br />
                Обновлено: {{ new Date(row.updated_at).toLocaleString('ru-RU') }}
            </template>
            <template #tmc-data="{ row }">
                <template v-if="row.uniq.length">
                    <div v-for="uniq_tmc in row.uniq" class="inv_element">
                        <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_inner">
                                    <span class="inv_inner_name">
                                        {{ el.field.name }}:
                                    </span>
                                    <span class="inv_inner_text" v-if="el.text">
                                        {{ el.text }}
                                    </span>
                                    <UBadge color="gray" v-else>no text</UBadge>
                                    <span class="inv_inner_image" v-if="el.file_id">
                                        <GetImage :file_id="el.file_id" :image_aws_url="el.image_aws_url" />
                                    </span>
                                    <UBadge color="gray" v-else>no img</UBadge>
                                </li>
                            </ul>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <UButton @click="deleteInv(row.id)" :disabled="loading">Удалить инвентаризацию</UButton>
                </template>
            </template>
            <template #user_id-data="{ row }">
                <GetAuthor :user_id="row.user_id" />
            </template>
        </UTable>
        <UPagination v-model="page" v-bind="pagination" />
    </div>
</template>

<style scoped lang="scss">
table {
    max-width: 100%;
}

.inv_element {
    counter-reset: inv;
}

.inv_item {
    @apply flex align-top gap-1;

    &::before {
        counter-increment: inv;
        content: counter(inv) "."
    }
}

.inv_inner {
    >* {
        @apply mr-2;
    }

    &_name {}

    &_text {
        @apply break-all;
    }

    &_image {}

    &__error {
        @apply text-red-400 dark:text-red-800;
    }
}

.inv_list {
    // @apply flex flex-col gap-2;
}

.inv_item {
    @apply mb-2;
}
</style>