src/components/VnTable/VnColumn.vue

@@ -11,8 +11,7 @@ import VnInputNumber from 'components/common/VnInputNumber.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
 import VnComponent from 'components/common/VnComponent.vue';
-import VnDescriptor from 'components/VnTable/VnDescriptor.vue';
-import { QBtn } from 'quasar';
+
 import VnUserLink from 'components/ui/VnUserLink.vue';
 
 const model = defineModel(undefined, { required: true });
@@ -130,17 +129,7 @@ const defaultComponents = {
     icon: {
         component: markRaw(QIcon),
     },
-    descriptor: {
-        component: markRaw(VnDescriptor),
-        attrs: {
-            class: 'link',
-            flat: true,
-            dense: true,
-        },
-        forceAttrs: {
-            row: $props.row,
-        },
-    },
+
     userLink: {
         component: markRaw(VnUserLink),
     },

src/components/VnTable/VnDescriptor.vue

@@ -1,49 +0,0 @@
-<script setup>
-import { useQuasar } from 'quasar';
-const quasar = useQuasar();
-import VnComponent from 'components/common/VnComponent.vue';
-import { onMounted, ref } from 'vue';
-import ItemDescriptor from 'src/pages/Item/Card/ItemDescriptor.vue';
-
-const $props = defineProps({
-    label: {
-        type: Function,
-        required: true,
-    },
-    row: {
-        type: Object,
-        default: null,
-    },
-    proxy: {
-        type: Object,
-        default: null,
-    },
-});
-const btnRow = ref(null);
-const popupVisible = ref(true);
-const handleClick = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    console.log(event);
-    popupVisible.value = true;
-    // quasar.dialog({
-    //     component: $props.proxy.component,
-    //     componentProps: {
-    //         id: $props.row[$props.proxy.key],
-
-    //     },
-    // });
-};
-onMounted(() => {
-    // btnRow.value = btnRow.value.$el;
-});
-</script>
-<template>
-    <QBtn class="link" flat dense ref="btnRow" @click="handleClick"
-        >{{ $props.label($props.row) }}
-    </QBtn>
-    <!-- <VnComponent :id="row.itemFk" /> -->
-
-    <QPopupProxy :target="btnRow"> <ItemDescriptor :id="1" /></QPopupProxy>
-</template>
-<style lang="scss"></style>

src/components/VnTable/VnTable.vue

@@ -314,7 +314,11 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
         show-if-above
     >
         <QScrollArea class="fit">
-            <VnTableFilter :data-key="$attrs['data-key']" :columns="columns" :redirect="redirect" />
+            <VnTableFilter
+                :data-key="$attrs['data-key']"
+                :columns="columns"
+                :redirect="redirect"
+            />
         </QScrollArea>
     </QDrawer>
     <CrudModel

src/components/ui/CatalogItem.vue

@@ -41,7 +41,7 @@ const card = toRef(props, 'item');
                 </div>
             </div>
             <div class="content">
-                <span class="link">
+                <span class="link" @click.stop>
                     {{ card.name }}
                     <ItemDescriptorProxy :id="card.id" />
                 </span>

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -101,6 +101,12 @@ const itemProposalSelected = ref(null);
 //             itemProposalSelected.value.available;
 //     }
 // };
+function onBuysFetched(data) {
+    Object.assign(item.value, data[0]);
+}
+function onTicketLackFetched(data) {
+    itemLack.value = data[0];
+}
 </script>
 
 <template>
@@ -119,17 +125,13 @@ const itemProposalSelected = ref(null);
         :url="`Buys/latestBuysFilter`"
         :fields="['longName']"
         :filter="{ where: { 'i.id': '2' } }"
-        @on-fetch="(data) => Object.assign(item.value, data[0])"
+        @on-fetch="onBuysFetched"
         auto-load
     />
     <FetchData
         :url="`Tickets/itemLack`"
         :params="{ itemFk: entityId }"
-        @on-fetch="
-            (data) => {
-                itemLack = data[0];
-            }
-        "
+        @on-fetch="onTicketLackFetched"
         auto-load
     />
     <VnSubToolbar>
@@ -232,7 +234,7 @@ const itemProposalSelected = ref(null);
                             {{ item.longName }}
                             <ItemDescriptorProxy :id="entityId" />
                         </QBtn>
-                        <FetchedTags class="q-ml-md" :item="item" />
+                        <FetchedTags class="q-ml-md" :item="item" :columns="3" />
                     </div>
                 </template>
             </VnPaginate>

src/pages/Ticket/Negative/TicketLackFilter.vue

@@ -13,10 +13,17 @@ const props = defineProps({
         required: true,
     },
 });
+// const arrayData = useArrayData(props.dataKey);
+// const warehouse = ref(null);
+// onMounted(async () => {
+//     warehouse.value = arrayData.store?.userParams?.warehouse;
+// });
 
 const to = Date.vnNew();
 to.setDate(to.getDate() + 1);
 
+const warehouses = ref();
+const categoriesOptions = ref([]);
 const itemTypesRef = ref(null);
 const itemTypesOptions = ref([]);
 
@@ -26,9 +33,27 @@ const itemTypesFilter = {
     order: 'name ASC',
     where: {},
 };
+const onCategoryChange = async (categoryFk, search) => {
+    if (!categoryFk) {
+        itemTypesFilter.where.categoryFk = null;
+        delete itemTypesFilter.where.categoryFk;
+    } else {
+        itemTypesFilter.where.categoryFk = categoryFk;
+    }
+    search();
+    await itemTypesRef.value.fetch();
+};
 </script>
 
 <template>
+    <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
+    <FetchData
+        url="ItemCategories"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (categoriesOptions = data)"
+        auto-load
+    />
+
     <FetchData
         ref="itemTypesRef"
         url="ItemTypes"
@@ -85,6 +110,25 @@ const itemTypesFilter = {
                             dense
                             is-outlined
                         />
+                    </QItemSection> </QItem
+                ><QItem>
+                    <QItemSection v-if="categoriesOptions">
+                        <VnSelect
+                            :label="t('negative.categoryFk')"
+                            v-model="params.categoryFk"
+                            @update:model-value="
+                                ($event) => onCategoryChange($event, searchFn)
+                            "
+                            :options="categoriesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        /> </QItemSection
+                    ><QItemSection v-else>
+                        <QSkeleton class="full-width" type="QSelect" />
                     </QItemSection>
                 </QItem>
                 <QItem>

src/pages/Ticket/Negative/TicketLackList.vue

@@ -11,6 +11,7 @@ import { useRole } from 'src/composables/useRole';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 const router = useRouter();
 import TicketLackFilter from './TicketLackFilter.vue';
+import { markRaw } from 'vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -67,16 +68,7 @@ const columns = computed(() => [
         align: 'left',
         label: t('negative.longName'),
         field: ({ longName }) => longName,
-        columnField: {
-            component: 'descriptor',
-            attrs: {
-                label: ({ longName }) => longName,
-                proxy: {
-                    key: 'itemFk',
-                    component: ItemDescriptorProxy,
-                },
-            },
-        },
+
         sortable: true,
         headerStyle: 'width: 350px',
         cardVisible: true,
@@ -153,61 +145,73 @@ onBeforeMount(() => {
 </script>
 
 <template>
-    <QPage class="column items-center">
-        <VnSubToolbar class="bg-vn-dark justify-end">
-            <template #st-actions>
-                <QBtn
-                    color="primary"
-                    :disable="!selectedRows?.length"
-                    @click="showNegativeOriginDialog = true"
-                    :label="t('negative.negativeAction')"
-                >
-                    <QPopupProxy ref="popupProxyRef" style="max-width: none">
-                        <QCard>
-                            <NegativeOriginDialog
-                                ref="originDialogRef"
-                                :selected-rows="selectedRows"
-                            /> </QCard
-                    ></QPopupProxy>
-                    <QTooltip>{{ t('negative.negativeAction') }}</QTooltip>
-                </QBtn>
-            </template>
-        </VnSubToolbar>
-        <RightMenu>
-            <template #right-panel>
-                <TicketLackFilter data-key="NegativeList" />
-            </template>
-        </RightMenu>
-        <VnTable
-            ref="tableRef"
-            data-key="NegativeList"
-            :url="`Tickets/itemLack`"
-            :order="['itemFk DESC, date DESC, timed DESC']"
-            :user-params="negativeParams"
-            auto-load
-            :columns="columns"
-            default-mode="table"
-            :right-search="false"
-            :is-editable="false"
-            :use-model="true"
-            :row-click="redirectToCreateView"
-            v-model:selected="selectedRows"
-            :create="false"
-            :table="{
-                'row-key': 'itemFk',
-                selection: 'multiple',
-            }"
-        >
-            <template #column-itemFk="{ row }">
-                {{ row.itemFk }}
+    <VnSubToolbar class="bg-vn-dark justify-end">
+        <template #st-actions>
+            <QBtn
+                color="primary"
+                :disable="!selectedRows?.length"
+                @click="showNegativeOriginDialog = true"
+                :label="t('negative.negativeAction')"
+            >
+                <QPopupProxy ref="popupProxyRef" style="max-width: none">
+                    <QCard>
+                        <NegativeOriginDialog
+                            ref="originDialogRef"
+                            :selected-rows="selectedRows"
+                        /> </QCard
+                ></QPopupProxy>
+                <QTooltip>{{ t('negative.negativeAction') }}</QTooltip>
+            </QBtn>
+        </template>
+    </VnSubToolbar>
+    <RightMenu>
+        <template #right-panel>
+            <TicketLackFilter data-key="NegativeList" />
+        </template>
+    </RightMenu>
+    <VnTable
+        ref="tableRef"
+        data-key="NegativeList"
+        :url="`Tickets/itemLack`"
+        :order="['itemFk DESC, date DESC, timed DESC']"
+        :user-params="negativeParams"
+        auto-load
+        :columns="columns"
+        default-mode="table"
+        :right-search="false"
+        :is-editable="false"
+        :use-model="true"
+        :map-key="false"
+        :row-click="redirectToCreateView"
+        v-model:selected="selectedRows"
+        :create="false"
+        :crud-model="{
+            disableInfiniteScroll: true,
+        }"
+        :table="{
+            'row-key': 'itemFk',
+            selection: 'multiple',
+        }"
+    >
+        <template #column-longName="{ row }">
+            <span class="link" @click.stop>
+                {{ row.longName }}
+                <ItemDescriptorProxy :id="row.itemFk" />
+            </span>
+        </template>
+        <template #column-itemFk="{ row }">
+            <div
+                style="display: flex; justify-content: space-around; align-items: center"
+            >
+                <span class="link" @click.stop>{{ row.itemFk }}</span>
                 <VnImg
                     style="width: 50px; height: 50px; float: inline-end"
                     :id="row.itemFk"
                     class="rounded"
                 ></VnImg>
-            </template>
-        </VnTable>
-    </QPage>
+            </div>
+        </template>
+    </VnTable>
 </template>
 
 <style lang="scss" scoped>

src/pages/Ticket/Negative/TicketLackTable.vue

@@ -184,6 +184,12 @@ const emit = defineEmits(['update:selection']);
 
 const tableRef = ref(null);
 watch(selectedRows, () => emit('update:selection', selectedRows));
+function onBuysFetched(data) {
+    Object.assign(item.value, data[0]);
+}
+function onTicketLackFetched(data) {
+    itemLack.value = data[0];
+}
 </script>
 
 <template>
@@ -202,22 +208,19 @@ watch(selectedRows, () => emit('update:selection', selectedRows));
         :url="`Buys/latestBuysFilter`"
         :fields="['longName']"
         :filter="{ where: { 'i.id': '2' } }"
-        @on-fetch="(data) => Object.assign(item.value, data[0])"
+        @on-fetch="onBuysFetched"
         auto-load
     />
     <FetchData
         :url="`Tickets/itemLack`"
         :params="{ itemFk: entityId }"
-        @on-fetch="
-            (data) => {
-                itemLack = data[0];
-            }
-        "
+        @on-fetch="onTicketLackFetched"
         auto-load
     />
     <VnTable
         ref="tableRef"
         :data-key="URL_KEY"
+        :map-key="false"
         :url="`${URL_KEY}/${entityId}`"
         :columns="columns"
         :without-header="true"