From 09889368842cc8a1e14a90feec68a677471c8a1f Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 30 Apr 2024 14:51:49 +0200
Subject: [PATCH] feat: frmItemProposal show

---
 src/pages/Item/Card/ItemBotanical.vue         |   4 +-
 .../{Card => components}/CreateGenusForm.vue  |   0
 .../{Card => components}/CreateSpecieForm.vue |   0
 src/pages/Item/components/ItemProposal.vue    | 157 ++++++++++++++++++
 .../Ticket/Negative/TicketLackDetail.vue      |   4 +
 src/pages/Ticket/Negative/TicketLackList.vue  |  39 +++--
 6 files changed, 188 insertions(+), 16 deletions(-)
 rename src/pages/Item/{Card => components}/CreateGenusForm.vue (100%)
 rename src/pages/Item/{Card => components}/CreateSpecieForm.vue (100%)
 create mode 100644 src/pages/Item/components/ItemProposal.vue

diff --git a/src/pages/Item/Card/ItemBotanical.vue b/src/pages/Item/Card/ItemBotanical.vue
index 15492de9f..717fe2251 100644
--- a/src/pages/Item/Card/ItemBotanical.vue
+++ b/src/pages/Item/Card/ItemBotanical.vue
@@ -7,8 +7,8 @@ import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
-import CreateGenusForm from './CreateGenusForm.vue';
-import CreateSpecieForm from './CreateSpecieForm.vue';
+import CreateGenusForm from '../components/CreateGenusForm.vue';
+import CreateSpecieForm from '../components/CreateSpecieForm.vue';
 
 const route = useRoute();
 const { t } = useI18n();
diff --git a/src/pages/Item/Card/CreateGenusForm.vue b/src/pages/Item/components/CreateGenusForm.vue
similarity index 100%
rename from src/pages/Item/Card/CreateGenusForm.vue
rename to src/pages/Item/components/CreateGenusForm.vue
diff --git a/src/pages/Item/Card/CreateSpecieForm.vue b/src/pages/Item/components/CreateSpecieForm.vue
similarity index 100%
rename from src/pages/Item/Card/CreateSpecieForm.vue
rename to src/pages/Item/components/CreateSpecieForm.vue
diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
new file mode 100644
index 000000000..5e7b4aa93
--- /dev/null
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -0,0 +1,157 @@
+<script setup>
+import FetchData from 'components/FetchData.vue';
+
+import { ref, reactive, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useDialogPluginComponent } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+import { useArrayData } from 'composables/useArrayData';
+const { t } = useI18n();
+
+const params = reactive({});
+const $props = defineProps({
+    item: {
+        type: Object,
+        default: () => {},
+    },
+});
+const itemsProposal = ref([]);
+const showProposalDialog = ref(false);
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+watch($props.item, (newX, oldX) => {
+    showProposalDialog.value = !newX;
+});
+const exprBuilder = (param, value) => {
+    switch (param) {
+        default:
+            return {};
+    }
+};
+const arrayData = useArrayData('ItemProposal', {
+    url: 'Items/getSimilar',
+    userParams: params,
+    order: ['itemFk'],
+    exprBuilder: exprBuilder,
+});
+const store = arrayData.store;
+const defaultColumnAttrs = {
+    align: 'left',
+    sortable: true,
+};
+const getColumnInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        params[paramKey] = col.columnFilter.filterValue;
+        await arrayData.addFilter({ params });
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+const defaultColumnFilter = {
+    component: VnInput,
+    type: 'text',
+    filterValue: null,
+    event: getColumnInputEvents,
+    attrs: {
+        dense: true,
+    },
+};
+
+const columns = computed(() => [
+    {
+        label: t('item.fixedPrice.itemId'),
+        name: 'itemId',
+        field: 'itemFk',
+        ...defaultColumnAttrs,
+        columnFilter: {
+            ...defaultColumnFilter,
+        },
+    },
+]);
+
+// const editTableFieldsOptions = [
+//     {
+//         field: 'rate2',
+//         label: t('item.fixedPrice.groupingPrice'),
+//         component: 'input',
+//         attrs: {
+//             type: 'number',
+//         },
+//     },
+// ];
+</script>
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showProposalDialog">
+        <QCard class="q-pa-sm">
+            <QCardSection class="row items-center q-pb-none">
+                {{ $props.item }}
+                <span class="text-h6 text-grey">{{
+                    t('negative.modalOrigin.title')
+                }}</span>
+                <QSpace />
+                <QBtn icon="close" flat round dense v-close-popup />
+            </QCardSection>
+            <QCardSection class="row items-center justify-center column items-stretch">
+                <span>{{ t('negative.modalOrigin.question') }}</span>
+                <FetchData
+                    url="Items/getSimilar"
+                    :filter="{
+                        where: {
+                            itemFk: $props.item.itemFk,
+                            warehouseFk: $props.item.warehouseFk,
+                        },
+                    }"
+                    auto-load
+                    @on-fetch="(data) => (itemsProposal = data)"
+                />
+                <QTable
+                    :rows="itemsProposal"
+                    :columns="columns"
+                    row-key="id"
+                    selection="multiple"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width q-mt-md"
+                    :no-data-label="t('globals.noResults')"
+                >
+                    <template #top-row="{ cols }">
+                        <QTr>
+                            <QTd />
+                            <QTd
+                                v-for="(col, index) in cols"
+                                :key="index"
+                                style="max-width: 100px"
+                            >
+                                <component
+                                    :is="col.columnFilter.component"
+                                    v-if="col.columnFilter"
+                                    v-model="col.columnFilter.filterValue"
+                                    v-bind="col.columnFilter.attrs"
+                                    v-on="col.columnFilter.event(col)"
+                                    dense
+                                />
+                            </QTd>
+                        </QTr>
+                    </template>
+
+                    <template #body-cell-itemId="props">
+                        <QTd class="col">{{ props }}</QTd>
+                    </template>
+                </QTable></QCardSection
+            >
+        </QCard>
+    </QDialog>
+</template>
+<style lang="scss" scoped></style>
+
+<i18n>
+        es:
+            xx: xx
+    </i18n>
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index a9d768183..91f3a18a0 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -207,6 +207,7 @@ const columns = computed(() => [
         sortable: true,
     },
 ]);
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
 
 const emit = defineEmits([...useDialogPluginComponent.emits, 'selection']);
 function rowsHasSelected(selection) {
@@ -266,6 +267,9 @@ function freeFirst({ alertLevel: a }, { alertLevel: b }) {
         @on-fetch="(data) => (editableStates = data)"
         auto-load
     />
+
+    <!-- <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list"> -->
     <VnPaginate
         :data-key="URL_KEY"
         :url="`${URL_KEY}/${entityId}/detail`"
diff --git a/src/pages/Ticket/Negative/TicketLackList.vue b/src/pages/Ticket/Negative/TicketLackList.vue
index aa89b71f3..06f19d7a0 100644
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@@ -5,7 +5,8 @@ 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 TicketLackDialogProxy from 'src/pages/Ticket/Negative/TicketLackDialogProxy.vue';
+import ItemProposal from 'src/pages/Item/components/ItemProposal.vue';
+
 import NegativeOriginDialog from 'pages/Ticket/Negative/NegativeOriginDialog.vue';
 import TotalNegativeOriginDialog from 'pages/Ticket/Negative/TotalNegativeOriginDialog.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@@ -15,20 +16,18 @@ import { useDialogPluginComponent } from 'quasar';
 const stateStore = useStateStore();
 const { t } = useI18n();
 const selectedRows = ref([]);
-const showTicketDialog = ref(false);
 const showNegativeOriginDialog = ref(false);
 const showTotalNegativeOriginDialog = ref(false);
+const showProposalDialog = ref(false);
 const currentRow = ref(null);
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
-import { useRoute, useRouter } from 'vue-router';
 
-const route = useRoute();
-const router = useRouter();
-const viewSummary = async (row) => {
+const viewSummary = (row) => {
     currentRow.value = row;
 };
 const originDialogRef = ref();
 const totalNegativeDialogRef = ref();
+const proposalDialogRef = ref();
 const columns = computed(() => [
     {
         name: 'minTimed',
@@ -109,10 +108,10 @@ const columns = computed(() => [
             </div>
         </Teleport>
     </template>
+
     <QPage class="column items-center">
         <VnSubToolbar class="bg-vn-dark justify-end">
             <template #st-actions>
-                <!-- <div class="flex items-center q-ml-lg" style="column-gap: 1px"> -->
                 <QBtnGroup v-if="currentRow" push style="column-gap: 1px"
                     ><QBtn
                         :label="t('globals.cancel')"
@@ -141,7 +140,19 @@ const columns = computed(() => [
                         <QTooltip>{{ t('negative.totalNegative') }}</QTooltip>
                     </QBtn>
                 </QBtnGroup>
-                <!-- </div> -->
+            </template>
+            <template #st-data>
+                <QBtnGroup v-if="currentRow" push style="column-gap: 1px">
+                    <QBtn
+                        color="primary"
+                        @click="showProposalDialog = true"
+                        icon="vn:splitline"
+                    >
+                        <QTooltip bottom anchor="bottom right">
+                            {{ t('Item proposal') }}
+                        </QTooltip>
+                    </QBtn></QBtnGroup
+                >
             </template>
         </VnSubToolbar>
         <div v-show="!currentRow" class="list">
@@ -221,12 +232,12 @@ const columns = computed(() => [
         <div v-if="currentRow" class="list">
             <TicketLackDetail :id="currentRow?.itemFk"></TicketLackDetail>
         </div>
-        <!--
-        <TicketLackDialogProxy
-            ref="dialogRef"
-            v-model="showTicketDialog"
-            :ticket="currentRow"
-        ></TicketLackDialogProxy> -->
+        <ItemProposal
+            ref="proposalDialogRef"
+            @hide="onDialogHide"
+            v-model="showProposalDialog"
+            :item="currentRow"
+        ></ItemProposal>
         <TotalNegativeOriginDialog
             ref="totalNegativeDialogRef"
             v-model="showTotalNegativeOriginDialog"