refs #6321 feat: updates dialog

src/pages/Ticket/Negative/TicketDescriptor.vue

@@ -1,150 +1,361 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { toDate, toPercentage } from 'filters/index';
-
+import { useRoute, useRouter } from 'vue-router';
-import CrudModel from 'src/components/CrudModel.vue';
-import FetchData from 'src/components/FetchData.vue';
-import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { QBtn, QCheckbox, QSelect } from 'quasar';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+
+import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'src/filters';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+import { useDialogPluginComponent } from 'quasar';
 const { t } = useI18n();
 const URL_KEY = 'Tickets/ItemLack';
+const editableStates = ref([]);
 
+const rowsSelected = ref([]);
+const entryBuysPaginateRef = ref(null);
+const packagingsOptions = ref(null);
+const originalRowDataCopy = ref(null);
 const $props = defineProps({
     id: {
         type: Number,
         required: true,
     },
 });
+const copyOriginalRowsData = (rows) => {
+    // el objetivo de esto es guardar los valores iniciales de todas las rows para evitar guardar cambios si la data no cambió al disparar los eventos
+    originalRowDataCopy.value = JSON.parse(JSON.stringify(rows));
+};
 
+const getInputEvents = (colField, props) => ({
+    'update:modelValue': () => saveChange(colField, props),
+    'keyup.enter': () => saveChange(colField, props),
+    blur: () => saveChange(colField, props),
+});
+const saveChange = async (field, { rowIndex, row }) => {
+    try {
+        switch (field) {
+            case 'split':
+                //         Dim vSaleCount As Long
+                // Dim stateCode As String
+
+                // vSaleCount = db.getValueV("select count(s.id) from vn.ticket t LEFT JOIN vn.sale s ON s.ticketFk = t.id WHERE t.id= #", Me.Id_Ticket)
+
+                // If vSaleCount = 1 Then
+                //     MsgBox ("El siguiente ticket no se ha hecho split, porque tienen solo una linea")
+                //     Exit Sub
+                // End If
+
+                // db.execV "CALL vn.ticket_clone(#, @vNewTicket)", Me.Id_Ticket
+
+                // Dim vNewTicketFk As Long
+                // vNewTicketFk = db.getValue("SELECT @vNewTicket")
+
+                // If vNewTicketFk = 0 Then Exit Sub
+
+                // db.execV "UPDATE vn.sale SET isPicked = (id = #) WHERE ticketFk = #", Me.Id_Movimiento, Me.Id_Ticket
+
+                // Call tour(Me.Id_Ticket, vNewTicketFk)
+
+                // Call ticketChangeState(vNewTicketFk, , , "FIXING")
+
+                // Buscador_Ticket (vNewTicketFk)
+                // Call Form_Requery
+                break;
+            case 'stateId':
+                // Call ticketChangeState(ticketFk, stateFk)
+                break;
+
+            case 'quantity':
+                //             Private Function updateQuantity(newQuantity As Integer, saleFk As Long)
+                //     Dim vSalesPerson As Long
+                //     Dim vOldQuantity As Integer
+                //     Dim vTicketFk As Long
+                //     Dim vItemId As Long
+
+                //     vItemId = DFirst("id_Article", "tblRadar_Negativos_Detalle", "id_Movimiento = " & Me.Id_Movimiento)
+
+                //     vOldQuantity = db.getValueV("SELECT quantity FROM vn.sale WHERE id = #", saleFk)
+                //     vTicketFk = db.getValueV("SELECT ticketFk FROM vn.sale WHERE id = #", saleFk)
+                //     vSalesPerson = Nz(db.getValueV("SELECT vn.client_getSalesPersonByTicket(#)", vTicketFk), 0)
+
+                //     db.execV "UPDATE vn.sale SET quantity = #, originalQuantity = # WHERE id = #", newQuantity, newQuantity, saleFk
+
+                //     app.sendChatCheckingPresence vSalesPerson, "He modificado de " & vOldQuantity & " a " & newQuantity & " " & articod(vItemId) & " del ticket [#" & vTicketFk & "](" & salix.uri & "/#!/ticket/" & vTicketFk & "/sale)"
+
+                // End Function
+                break;
+
+            default:
+                console.error(field, { rowIndex, row });
+                break;
+        }
+        // if (originalRowDataCopy.value[rowIndex][field] == row[field]) return;
+        // await axios.patch(`Buys/${row.id}`, row);
+        // originalRowDataCopy.value[rowIndex][field] = row[field];
+    } catch (err) {
+        console.error('Error saving changes', err);
+    }
+};
 const entityId = computed(() => $props.id);
+function isComponentVn(col) {
+    // return (
+    //     !tableColumnComponents?.value[col.name]?.component?.__name?.startsWith('Vn') ??
+    //     true
+    // );
+    return tableColumnComponents?.value[col.name]?.component === 'span' ?? false;
+}
+const tableColumnComponents = computed(() => ({
+    itemFk: {
+        component: QBtn,
+        props: { color: 'blue', flat: true },
+        event: () => ({}),
+    },
+    ticketFk: {
+        component: QBtn,
+        props: { color: 'blue', flat: true },
+        event: () => ({}),
+    },
+    code: {
+        component: 'span',
+        props: {},
+        event: () => ({}),
+    },
+    nickname: {
+        component: 'span',
+        props: {},
+        event: () => ({}),
+    },
+    name: {
+        component: 'span',
+        props: {},
+        event: () => ({}),
+    },
+    quantity: {
+        component: VnInput,
+        props: {
+            type: 'number',
+            min: 0,
+            class: 'input-number',
+        },
+        event: getInputEvents,
+    },
+    alertLevel: {
+        component: VnInput,
+        props: {
+            type: 'number',
+            min: 0,
+            class: 'input-number',
+        },
+        event: getInputEvents,
+    },
+    state: {
+        component: VnSelectFilter,
+        props: {
+            'option-value': 'id',
+            'option-label': 'name',
+            'emit-value': false,
+            'map-options': false,
+            'use-input': false,
+            'hide-selected': false,
+            options: editableStates.value,
+        },
+        event: getInputEvents,
+    },
+
+    alertLevelCode: {
+        component: 'span',
+        props: {},
+        event: () => ({}),
+    },
+
+    peticionCompra: {
+        component: QCheckbox,
+        props: {},
+        event: getInputEvents,
+    },
+    isRookie: {
+        component: QCheckbox,
+        props: {},
+        event: getInputEvents,
+    },
+    actions: {
+        component: QBtn,
+        props: {},
+        event: getInputEvents,
+    },
+}));
 
 const columns = computed(() => [
     {
-        name: 'Id',
+        name: 'ticketFk',
-        label: t('Id item'),
+        label: t('ticket.negative.detail.ticketFk'),
-        field: (row) => row.itemFk,
+        field: 'ticketFk',
-    },
-    {
-        name: 'ticket',
-        label: t('Ticket'),
-        field: (row) => row.ticketFk,
-        align: 'center',
-    },
-    {
-        name: 'destination',
-        label: t('Destination'),
-        field: (row) => row.claimDestinationFk,
         align: 'left',
     },
     {
-        name: 'Landed',
+        name: 'itemFk',
-        label: t('Landed'),
+        label: t('ticket.negative.detail.itemFk'),
-        field: (row) => toDate(row.landed),
+        field: 'itemFk',
+        align: 'left',
+    },
+    {
+        name: 'code',
+        label: t('ticket.negative.detail.Code'),
+        field: 'code',
+        align: 'left',
+    },
+    {
+        name: 'nickname',
+        label: t('ticket.negative.detail.Nickname'),
+        field: 'nickname',
+        align: 'left',
+    },
+    {
+        name: 'name',
+        label: t('ticket.negative.detail.name'),
+        field: 'name',
+        align: 'left',
+    },
+    {
+        name: 'state',
+        label: t('ticket.negative.detail.state'),
+        field: 'stateId',
+        align: 'left',
     },
     {
         name: 'quantity',
-        label: t('Quantity'),
+        label: t('ticket.negative.detail.quantity'),
-        field: (row) => row.quantity,
+        field: 'quantity',
-    },
-    {
-        name: 'concept',
-        label: t('Description'),
-        field: (row) => row.concept,
         align: 'left',
     },
     {
-        name: 'price',
+        name: 'alertLevelCode',
-        label: t('Price'),
+        label: t('ticket.negative.detail.alertLevelCode'),
-        field: (row) => row.price,
+        field: 'alertLevelCode',
-        format: (value) => value,
-        align: 'center',
-    },
-    {
-        name: 'discount',
-        label: t('Discount'),
-        field: (row) => row.discount,
-        format: (value) => toPercentage(value / 100),
         align: 'left',
     },
     {
-        name: 'total',
+        name: 'isRookie',
-        label: t('Total'),
+        label: t('ticket.negative.detail.isRookie'),
-        field: (row) => row.total,
+        field: 'isRookie',
-        format: (value) => value,
         align: 'center',
     },
     {
-        name: 'delete',
+        name: 'turno',
+        label: t('ticket.negative.detail.turno'),
+        field: 'turno',
+        align: 'center',
+    },
+    {
+        name: 'peticionCompra',
+        label: t('ticket.negative.detail.peticionCompra'),
+        field: 'peticionCompra',
+        align: 'center',
+    },
+    {
+        name: 'actions',
+        label: t('claim.summary.actions'),
+        align: 'center',
     },
 ]);
 
 defineEmits([...useDialogPluginComponent.emits]);
 
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
+
+async function changeState(value) {
+    /* if (!ticket.value.id) return;
+
+    const formData = {
+        ticketFk: ticket.value.id,
+        code: value,
+    };
+
+    await axios.post(`TicketTrackings/changeState`, formData);*/
+}
 </script>
 
 <template>
-    <CrudModel
+    <FetchData
-        v-if="$props.id"
+        url="States/editableStates"
+        @on-fetch="(data) => (editableStates = data)"
+        auto-load
+    />
+    <VnPaginate
         :data-key="URL_KEY"
         :url="`${URL_KEY}/${entityId}/detail`"
         ref="itemLackForm"
-        v-model:selected="selectedRows"
+        @on-fetch="copyOriginalRowsData($event)"
-        :default-remove="true"
-        :default-save="false"
-        :default-reset="false"
-        @on-fetch="setData"
         auto-load
     >
-        <template #body>
+        <template #body="{ rows }">
             <QTable
-                :columns="columns"
                 :rows="rows"
-                :dense="$q.screen.lt.md"
+                :columns="columns"
                 row-key="id"
                 selection="multiple"
-                v-model:selected="selectedRows"
+                v-model:selected="rowsSelected"
                 :grid="$q.screen.lt.md"
-                :pagination="{ rowsPerPage: 0 }"
+                hide-bottom
-                :hide-bottom="true"
             >
-                <template #body-cell-ticket="{ value }">
+                <template #body="props">
-                    <QTd align="center">
+                    <QTr>
-                        <span class="link">
-                            {{ value }}
-                            <TicketDescriptorProxy :id="value" />
-                        </span>
-                    </QTd>
-                </template>
-                <template #body-cell-destination="{ row }">
                         <QTd>
-                        <VnSelectFilter
+                            <QCheckbox v-model="props.selected" />
-                            v-model="row.claimDestinationFk"
-                            :options="destinationTypes"
-                            option-label="description"
-                            option-value="id"
-                            :autofocus="true"
-                            dense
-                            input-debounce="0"
-                            hide-selected
-                            @update:model-value="(value) => updateDestination(value, row)"
-                        />
                         </QTd>
+                        <QTd v-for="col in props.cols" :key="col.name">
+                            <template v-if="col.name == 'actions'">
+                                <QBtn icon="close" flat round dense v-close-popup />
+                            </template>
+                            <template
+                                v-if="
+                                    col.name !== 'actions' &&
+                                    tableColumnComponents[col.name]?.component
+                                "
+                            >
+                                <component
+                                    :is="tableColumnComponents[col.name].component"
+                                    v-bind="tableColumnComponents[col.name].props"
+                                    v-model="props.row[col.field]"
+                                    v-on="
+                                        tableColumnComponents[col.name].event(
+                                            col.field,
+                                            props
+                                        )
+                                    "
+                                >
+                                    <template v-if="isComponentVn(col)">{{
+                                        col.value
+                                    }}</template>
+                                    <template v-if="col.name === 'ticketFk'"
+                                        >{{ col.value }}
+                                        <ItemDescriptorProxy :id="props.row.id"
+                                    /></template>
+                                    <template v-if="col.name === 'itemFk'"
+                                        >{{ col.value }}
+                                        <ItemDescriptorProxy :id="props.row.id"
+                                    /></template>
+                                </component>
                             </template>
-                <template #body-cell-price="{ value }">
-                    <QTd align="center">
-                        {{ toCurrency(value) }}
                         </QTd>
+                    </QTr>
                 </template>
-                <template #body-cell-total="{ value }">
-                    <QTd align="center">
-                        {{ toCurrency(value) }}
-                    </QTd>
-                </template>
-                <!-- View for grid mode -->
             </QTable>
         </template>
-    </CrudModel>
+    </VnPaginate>
 </template>
 
 <style lang="scss">