feat: Vndescriptor

2024-07-02 20:28:13 +02:00 · 2024-07-02 20:28:13 +02:00 · 32fe76aaab
parent c3d97231d2
commit 32fe76aaab
4 changed files with 144 additions and 99 deletions
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@ -8,6 +8,8 @@ import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnComponent from 'components/common/VnComponent.vue';
+import VnDescriptor from 'components/VnTable/VnDescriptor.vue';
+import { QBtn } from 'quasar';

 const model = defineModel(undefined, { required: true });
 const $props = defineProps({
@ -102,6 +104,17 @@ const defaultComponents = {
    icon: {
        component: markRaw(QIcon),
    },
+    descriptor: {
+        component: markRaw(VnDescriptor),
+        attrs: {
+            class: 'link',
+            flat: true,
+            dense: true,
+        },
+        forceAttrs: {
+            row: $props.row,
+        },
+    },
 };

 const value = computed(() => {
--- a/src/components/VnTable/VnDescriptor.vue
+++ b/src/components/VnTable/VnDescriptor.vue
@ -0,0 +1,49 @@
+<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>
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@ -59,6 +59,10 @@ const $props = defineProps({
        type: Boolean,
        default: false,
    },
+    hasSubtoolbar: {
+        type: Boolean,
+        default: true,
+    },
 });
 const { t } = useI18n();
 const stateStore = useStateStore();
@ -175,11 +179,14 @@ function columnName(col) {
 }

 function getColAlign(col) {
-    return 'text-' + (col.align ?? 'left')
+    return 'text-' + (col.align ?? 'left');
 }
+
+const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
 defineExpose({
    reload,
    redirect: redirectFn,
+    selected,
 });
 </script>
 <template>
@ -225,11 +232,18 @@ defineExpose({
            :search-url="searchUrl"
            :disable-infinite-scroll="mode == TABLE_MODE"
            @save-changes="reload"
-            :has-subtoolbar="isEditable"
+            :has-subtoolbar="$attrs['hasSubtoolbar'] ?? isEditable"
        >
+            <template
+                v-for="(_, slotName) in $slots"
+                #[slotName]="slotData"
+                :key="slotName"
+            >
+                <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+            </template>
            <template #body="{ rows }">
                <QTable
-                    v-bind="$attrs['QTable']"
+                    v-bind="$attrs['q-table']"
                    class="vnTable"
                    :columns="splittedColumns.columns"
                    :rows="rows"
@ -246,6 +260,7 @@ defineExpose({
                            CrudModelRef.vnPaginateRef.paginate()
                    "
                    @row-click="(_, row) => rowClickFunction(row)"
+                    @update:selected="$emit('update:selected', $event)"
                >
                    <template #top-left>
                        <slot name="top-left"></slot>
@ -477,6 +492,7 @@ defineExpose({
                        default="input"
                        v-model="data[column.name]"
                        :show-label="true"
+                        component-prop="columnCreate"
                    />
                    <slot name="more-create-dialog" :data="data" />
                </div>
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@ -2,14 +2,15 @@
 import { computed, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import TicketLackFilter from 'pages/Ticket/Negative/TicketLackFilter.vue';
-import TicketLackDetail from 'pages/Ticket/Negative/TicketLackDetail.vue';
+// import VnPaginate from 'components/ui/VnPaginate.vue';
+// import TicketLackFilter from 'pages/Ticket/Negative/TicketLackFilter.vue';
+// import TicketLackDetail from 'pages/Ticket/Negative/TicketLackDetail.vue';
 // import FetchData from 'components/FetchData.vue';
+import VnTable from 'components/VnTable/VnTable.vue';

 import NegativeOriginDialog from 'pages/Ticket/Negative/components/NegativeOriginDialog.vue';
-import TotalNegativeOriginDialog from 'pages/Ticket/Negative/components/TotalNegativeOriginDialog.vue';
-import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+// import TotalNegativeOriginDialog from 'pages/Ticket/Negative/components/TotalNegativeOriginDialog.vue';
+// import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { onBeforeMount } from 'vue';
 import { dashIfEmpty, toDate, toHour } from 'src/filters';
@ -17,6 +18,11 @@ import { useRouter } from 'vue-router';
 // import { useUserConfig } from 'src/composables/useUserConfig';
 import { useState } from 'src/composables/useState';
 import { useRole } from 'src/composables/useRole';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+// import TicketLackDetail from './TicketLackDetail.vue';
+// import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+// const { viewSummary } = useSummaryDialog();

 // const DEFAULT_WAREHOUSE = 'Algemesi';
 const router = useRouter();
@ -25,7 +31,7 @@ const stateStore = useStateStore();
 const { t } = useI18n();
 const selectedRows = ref([]);
 const showNegativeOriginDialog = ref(false);
-const showTotalNegativeOriginDialog = ref(false);
+// const showTotalNegativeOriginDialog = ref(false);
 // const showFilterPanel = ref(false);
 const currentRow = ref(null);
 // const state = useState();
@ -34,11 +40,10 @@ const negativeParams = reactive({
    days: useRole().likeAny('buyer') ? 2 : 0,
    warehouseFk: useState().getUser().value.warehouseFk,
 });
-const viewSummary = (row) => {
-    const id = row.itemFk;
+const redirectToCreateView = ({ itemFk }) => {
    // stateStore.rightDrawer = false;
    // currentRow.value = row;
-    router.push({ name: 'NegativeDetail', params: { id } });
+    router.push({ name: 'NegativeDetail', params: { id: itemFk } });
 };
 const originDialogRef = ref();
 // const totalNegativeDialogRef = ref();
@ -47,15 +52,18 @@ const columns = computed(() => [
        name: 'date',
        label: t('negative.date'),
        field: 'timed',
-        format: (val) => toDate(val),
+        format: ({ timed }) => toDate(timed),
        sortable: true,
+        cardVisible: true,
+        isId: true,
    },
    {
        name: 'timed',
        label: t('negative.timed'),
        field: 'timed',
-        format: (val) => toHour(val),
+        format: ({ timed }) => toHour(timed),
        sortable: true,
+        cardVisible: true,
    },
    {
        name: 'itemFk',
@ -67,9 +75,20 @@ const columns = computed(() => [
        name: 'longName',
        label: t('negative.longName'),
        field: ({ longName }) => longName,
-        align: 'center',
+        columnField: {
+            component: 'descriptor',
+            attrs: {
+                label: ({ longName }) => longName,
+                proxy: {
+                    key: 'itemFk',
+                    component: ItemDescriptorProxy,
+                },
+            },
+        },
+
        sortable: true,
        headerStyle: 'width: 350px',
+        cardVisible: true,
    },
    {
        name: 'producer',
@ -83,34 +102,44 @@ const columns = computed(() => [
        label: t('negative.colour'),
        field: ({ inkFk }) => inkFk,
        sortable: true,
+        cardVisible: true,
    },
    {
        name: 'size',
        label: t('negative.size'),
        field: ({ size }) => size,
        sortable: true,
+        cardVisible: true,
    },
    {
        name: 'category',
        label: t('negative.origen'),
        field: ({ category }) => dashIfEmpty(category),
        sortable: true,
+        cardVisible: true,
    },
    {
        name: 'lack',
        label: t('negative.lack'),
        field: ({ lack }) => lack,
-        align: 'center',
+
        sortable: true,
        headerStyle: 'padding-left: 33px',
+        cardVisible: true,
    },
    {
-        name: 'icons',
-        align: 'center',
-        field: (row) => row,
+        align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Client ticket list'),
+                icon: 'preview',
+                action: redirectToCreateView,
+            },
+        ],
    },
 ]);
-const vnPaginateRef = ref();
+const tableRef = ref();
 // const ticketDetailRef = ref();

 onBeforeMount(() => {
@ -119,7 +148,7 @@ onBeforeMount(() => {

 // const handleWarehouses = async (data) => {
 //     negativeParams.warehouse = data.find((w) => w.name === DEFAULT_WAREHOUSE).id;
-//     await vnPaginateRef.value.fetch();
+//     await tableRef.value.fetch();
 //     showFilterPanel.value = true;
 // };
 </script>
@ -167,88 +196,26 @@ onBeforeMount(() => {
            </template>
        </VnSubToolbar>
        <div class="list">
-            <VnPaginate
-                ref="vnPaginateRef"
+            <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="true"
+                :is-editable="false"
+                :use-model="true"
+                :row-click="redirectToCreateView"
+                v-model:selected="selectedRows"
+                :q-table="{
+                    'row-key': 'itemFk',
+                    selection: 'multiple',
+                }"
            >
-                <template #body="{ rows }">
-                    <QTable
-                        :columns="columns"
-                        :rows="rows"
-                        :dense="$q.screen.lt.md"
-                        flat
-                        row-key="itemFk"
-                        selection="multiple"
-                        v-model:selected="selectedRows"
-                        :grid="$q.screen.lt.md"
-                        auto-load
-                        :rows-per-page-options="[0]"
-                        hide-pagination
-                        :pagination="{ rowsPerPage: null }"
-                        :no-data-label="t('globals.noResults')"
-                    >
-                        <template #top>
-                            <div style="width: 100%; display: table">
-                                <div style="float: right; color: lightgray">
-                                    {{ `${rows.length} ${t('globals.results')}` }}
-                                </div>
-                            </div>
-                        </template>
-
-                        <template #body-cell-hasCmrDms="{ value }">
-                            <QTd align="center">
-                                <QBadge
-                                    :id="value ? 'true' : 'false'"
-                                    :label="
-                                        value ? t('negative.true') : t('negative.false')
-                                    "
-                                />
-                            </QTd>
-                        </template>
-
-                        <template #body-cell-longName="{ row, value }">
-                            <QTd align="right" class="text-primary">
-                                <QBtn flat color="blue" dense>{{ value }}</QBtn>
-                                <ItemDescriptorProxy :id="row.itemFk" />
-                            </QTd>
-                        </template>
-
-                        <template #body-cell-producer="{ value }">
-                            <QTd align="right">
-                                <QBtn
-                                    v-if="value !== '-'"
-                                    flat
-                                    class="text-primary"
-                                    color="blue"
-                                    dense
-                                    >{{ value }}</QBtn
-                                >
-                                <span v-else>{{ value }}</span>
-                            </QTd>
-                        </template>
-
-                        <template #body-cell-icons="{ value }">
-                            <QTd align="center">
-                                <QIcon
-                                    @click="viewSummary(value)"
-                                    class="q-ml-md"
-                                    color="primary"
-                                    name="search"
-                                    size="sm"
-                                >
-                                    <QTooltip>
-                                        {{ t('globals.preview') }}
-                                    </QTooltip>
-                                </QIcon>
-                            </QTd>
-                        </template>
-                    </QTable>
-                </template>
-            </VnPaginate>
+            </VnTable>
        </div>
        <!-- <div v-if="currentRow" class="list">
            <TicketLackDetail
@ -270,11 +237,11 @@ onBeforeMount(() => {
            :selected-rows="selectedRows"
        >
        </NegativeOriginDialog>
-        <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <!-- <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
            <QScrollArea class="fit text-grey-8">
                <TicketLackFilter data-key="NegativeList" />
            </QScrollArea>
-        </QDrawer>
+        </QDrawer> -->
    </QPage>
 </template>