feat: refs #6321 updates

src/pages/Item/components/ItemProposal.vue

@@ -1,15 +1,14 @@
 <script setup>
 import { ref, computed, onUnmounted } from 'vue';
-import axios from 'axios';
+// import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 import { toCurrency } from 'filters/index';
 import VnStockValueDisplay from 'src/components/ui/VnStockValueDisplay.vue';
-// import { useDialogPluginComponent } from 'quasar';
 import VnTable from 'src/components/VnTable/VnTable.vue';
-import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const MATCH_VALUES = [5, 6, 7, 8];
 const { t } = useI18n();
@@ -43,10 +42,10 @@ const proposalSelected = ref([]);
 const quantity = ref(-1);
 const defaultColumnAttrs = {
     align: 'center',
-    sortable: true,
+    sortable: false,
 };
-const ticket = computed(() => $props.sales[0]);
+const sale = computed(() => $props.sales[0]);
-const saleFk = computed(() => ticket.value.saleFk);
+const saleFk = computed(() => sale.value.saleFk);
 const statusConditionalValue = (row) => {
     const total = MATCH_VALUES.reduce((acc, i) => acc + row[`match${i}`], 0);
     return total;
@@ -62,26 +61,39 @@ const columns = computed(() => [
         label: t('proposal.available'),
         name: 'available',
         field: 'available',
-        type: 'number',
+        columnClass: 'shrink',
-    },
-    {
-        ...defaultColumnAttrs,
-        label: t('proposal.difference'),
-        name: 'difference',
         style: 'max-width: 75px',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
         },
-    {
-        ...defaultColumnAttrs,
-        label: t('proposal.compatibility'),
-        name: 'status',
-        field: statusConditionalValue,
-        sortable: true,
     },
+    // {
+    //     ...defaultColumnAttrs,
+    //     label: t('proposal.difference'),
+    //     name: 'difference',
+    //     style: 'max-width: 75px',
+    // },
+    // {
+    //     ...defaultColumnAttrs,
+    //     label: t('proposal.compatibility'),
+    //     name: 'status',
+    //     field: statusConditionalValue,
+    //     sortable: true,
+    // },
     {
         ...defaultColumnAttrs,
         label: t('proposal.counter'),
         name: 'counter',
         field: 'counter',
+        columnClass: 'shrink',
+        style: 'max-width: 75px',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
     },
 
     {
@@ -91,23 +103,30 @@ const columns = computed(() => [
         name: 'longName',
         field: 'longName',
         columnClass: 'expand',
-        columnFilter: { class: 'expand' },
     },
 
     {
         ...defaultColumnAttrs,
         label: t('proposal.price2'),
         name: 'price2',
-        class: 'shrink',
+        style: 'max-width: 75px',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
     },
     {
         ...defaultColumnAttrs,
         label: t('proposal.minQuantity'),
         name: 'minQuantity',
         field: 'minQuantity',
+        style: 'max-width: 75px',
+        columnFilter: {
             component: 'input',
             type: 'number',
-        class: 'shrink',
+            columnClass: 'shrink',
+        },
     },
     {
         ...defaultColumnAttrs,
@@ -126,13 +145,14 @@ async function confirm() {
         // };
         // const { data } = await axios.post('Sales/replaceItem', params);
         const params = [saleFk.value, proposalSelected.value[0].id, quantity.value];
-        const { data } = await axios.post('Applications/sale_replaceItem/execute-proc', {
+        // const { data } = await axios.post('Applications/sale_replaceItem/execute-proc', {
-            schema: 'vn',
+        //     schema: 'vn',
-            params,
+        //     params,
-        });
+        // });
         proposalTableRef.value.reload();
         emit('itemReplaced', {
             type: 'refresh',
+            quantity: quantity.value,
             itemProposal: proposalSelected.value[0],
             ...params,
         });
@@ -153,18 +173,23 @@ onUnmounted(() => {});
 function handleSelection(value, _) {
     quantity.value = value.available;
 }
-// const isSelectionAvailable = (data) => {
+const isSelectionAvailable = (itemProposal) => {
-//     if (!data?.row) return false;
+    const { price2 } = itemProposal;
-//     const { row } = data;
+    const salePrice = sale.value.price;
-//     return $props.replaceAction && row.available >= Math.abs($props.itemLack.lack);
+    // debugger;
-// };
+    const byPrice = (100 * price2) / salePrice > 30;
+    if (byPrice) {
+        return byPrice;
+    }
+    const byQuantity =
+        (100 * itemProposal.available) / Math.abs($props.itemLack.lack) < 30;
+    return byQuantity;
+    // return $props.replaceAction && row.available >= Math.abs($props.itemLack.lack);
+};
 // watch(proposalSelected, ({ available }) => (quantity.value = available));
 </script>
 <template>
     <div style="min-width: 65vw">
-        {{ sales }}
-        <br />
-        {{ itemLack }}
         <VnTable
             ref="proposalTableRef"
             data-key="ItemsGetSimilar"
@@ -197,16 +222,21 @@ function handleSelection(value, _) {
                         :loading="isLoading"
                         @click="confirm"
                         style="padding-block: 8px"
-                        :disable="proposalSelected.length < 1 || quantity === 0"
+                        :disable="
+                            proposalSelected.length < 1 ||
+                            quantity === 0 ||
+                            quantity > Math.abs(itemLack.lack)
+                        "
                     />
-                    <VnInputNumber
+                    <VnInput
-                        v-model.number="quantity"
+                        v-model="quantity"
                         v-if="proposalSelected.length > 0"
                         @update:model-value="(val) => (quantity = val)"
-                        type="number"
                         min="0"
+                        :max="Math.abs(itemLack.lack)"
                         :label="t('proposal.quantityToReplace')"
                         dense
+                        autofocus
                         class="q-ml-xs"
                     /></div
             ></template>
@@ -215,22 +245,32 @@ function handleSelection(value, _) {
                 <QCheckbox
                     class="q-ma-xs"
                     flat
+                    :disable="isSelectionAvailable(props.row)"
                     v-model="props.selected"
                     @update:model-value="(evt, _) => handleSelection(props.row, null)"
                 >
+                    <QTooltip>
+                        <span v-if="isSelectionAvailable(props.row)">{{
+                            t('proposal.available')
+                        }}</span>
+                        <span v-else>{{ t('proposal.available') }}</span>
+                    </QTooltip>
                 </QCheckbox>
             </template>
             <template #column-longName="{ row }">
-                <!-- <QTd align="left" class="text-primary"> -->
+                <QTd style="max-width: 800px">
                     <QTooltip>
                         {{ row.id }}
                     </QTooltip>
                     <!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
-                <span class="link">{{ row.longName }}</span>
+                    <span style="font-size: x-small">({{ row.id }})</span
+                    ><span class="link">{{ row.longName }}</span>
                     <ItemDescriptorProxy :id="row.id" />
+
                     <div style="display: flex; flex-direction: row">
                         <div style="display: flex; flex-direction: column">
-                        <span style="font-size: xx-small">{{ row.price2 }}</span>
+                            <!-- -->
+
                             <VnImg
                                 :id="row.id"
                                 spinner-color="primary"
@@ -239,15 +279,43 @@ function handleSelection(value, _) {
                                 width="50px"
                                 class="image remove-bg"
                             />
-                        <span style="font-size: xx-small">ID: {{ row.id }}</span>
+                            <!-- <span style="font-size: xx-small">ID:</span> -->
                         </div>
-                    <div style="display: flex; align-items: center">
+                        <div
-                        <FetchedTags :item="row" />
+                            style="
+                                display: flex;
+                                align-items: center;
+                                flex-direction: column;
+                                justify-content: center;
+                            "
+                        >
+                            <FetchedTags :item="row" class="q-mb-xs" />
+                            <div
+                                :style="{
+                                    background: gradientStyle(
+                                        statusConditionalValue(row)
+                                    ),
+                                }"
+                                class="compatibility"
+                            >
+                                <QTooltip>
+                                    {{ compatibilityItem(statusConditionalValue(row)) }}
+                                </QTooltip>
                             </div>
                         </div>
-                <!-- </QTd> -->
+                    </div>
+                </QTd>
             </template>
-            <template #column-status="{ row }">
+            <template #column-available="{ row }">
+                {{ row.available }}
+            </template>
+            <template #column-counter="{ row }">
+                {{ row.counter }}
+            </template>
+            <template #column-minQuantity="{ row }">
+                {{ row.minQuantity }}
+            </template>
+            <!-- <template #column-status="{ row }">
                 <div
                     :style="{ background: gradientStyle(statusConditionalValue(row)) }"
                     class="compatibility"
@@ -256,14 +324,21 @@ function handleSelection(value, _) {
                         {{ compatibilityItem(statusConditionalValue(row)) }}
                     </QTooltip>
                 </div>
-            </template>
+            </template> -->
             <template #column-price2="{ row }">
-                <QTooltip>
+                <div
-                    {{ toCurrency(row.price2) }}
+                    style="
-                </QTooltip>
+                        display: flex;
+                        align-items: center;
+                        flex-direction: column;
+                        justify-content: center;
+                    "
+                >
+                    <VnStockValueDisplay :value="sales[0].price - row.price2" />
                     <span :class="[conditionalValuePrice(row.price2)]">{{
                         toCurrency(row.price2)
                     }}</span>
+                </div>
             </template>
             <template #column-difference="{ row }">
                 <VnStockValueDisplay :value="sales[0].price - row.price2" />
@@ -273,7 +348,8 @@ function handleSelection(value, _) {
 </template>
 <style lang="scss">
 .compatibility {
-    height: 10px;
+    height: 1vh;
+    width: 100%;
 }
 
 .match {
@@ -292,3 +368,7 @@ function handleSelection(value, _) {
     font-size: 16px;
 }
 </style>
+
+<i18n>
+    en:
+</i18n>

src/pages/Item/components/ItemProposalProxy.vue

@@ -25,7 +25,7 @@ const $props = defineProps({
 </script>
 <template>
     <QPopupProxy>
-        <QCard class="q-pa-sm">
+        <QCard>
             <QCardSection class="row items-center q-pb-none">
                 <span class="text-h6 text-grey">{{ $t('Item proposal') }}</span>
                 <QSpace />

src/pages/Item/locale/en.yml

@@ -100,7 +100,7 @@ proposal:
     value8: value8
     available: Available
     minQuantity: minQuantity
-    price2: price2
+    price2: Price
     located: Located
     counter: Counter
     groupingPrice: Grouping Price

src/pages/Item/locale/es.yml

@@ -90,6 +90,9 @@ itemType:
         temperature: Temperatura
 itemProposal: Artículos similares
 proposal:
+    substitutionAvailable: Sustitución disponible
+    notSubstitutionAvailableByPrice: Sustitución no disponible, 30% de diferencia por precio o cantidad
+    compatibility: Compatibilidad
     title: Items de sustitución para los tickets seleccionados
     itemFk: Item
     longName: Nombre

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -30,7 +30,7 @@ const showProposalDialog = ref(false);
 const showChangeQuantityDialog = ref(false);
 const showFree = ref(true);
 const selectedRows = ref([]);
-
+const badgeLackRef = ref();
 const route = useRoute();
 const itemLack = ref(null);
 const originalRowDataCopy = ref(null);
@@ -76,8 +76,11 @@ defineExpose({ reload });
 //     return rows;
 // };
 
-const itemProposalEvt = ({ itemProposal }) => {
+const itemProposalEvt = (data) => {
+    const { itemProposal, quantity } = data;
     itemProposalSelected.value = itemProposal;
+    // badgeLackRef.value.reload();
+    itemLack.value.lack += +quantity;
     tableRef.value.reload();
     // replaceItem();
 };
@@ -134,8 +137,8 @@ const itemProposalSelected = ref(null);
             <QBtnGroup push style="column-gap: 1px">
                 <TicketMassiveUpdate
                     :disable="selectedRows.length < 2"
-                    label="negative.buttonsUpdate.state"
+                    :label="t('negative.buttonsUpdate.state')"
-                    tooltip="negative.detail.modal.changeState.title"
+                    :tooltip="t('negative.detail.modal.changeState.title')"
                 >
                     <ChangeStateDialog
                         ref="changeStateDialogRef"
@@ -143,10 +146,10 @@ const itemProposalSelected = ref(null);
                     ></ChangeStateDialog>
                 </TicketMassiveUpdate>
                 <TicketMassiveUpdate
-                    label="negative.buttonsUpdate.quantity"
+                    :label="t('negative.buttonsUpdate.quantity')"
+                    :tooltip="t('negative.detail.modal.changeQuantity.title')"
                     @click="showChangeQuantityDialog = true"
                     :disable="selectedRows.length < 2"
-                    tooltip="negative.detail.modal.changeQuantity.title"
                 >
                     <ChangeQuantityDialog
                         ref="changeQuantityDialogRef"
@@ -210,6 +213,7 @@ const itemProposalSelected = ref(null);
                             "
                         >
                             <QBadge
+                                ref="badgeLackRef"
                                 class="q-ml-xs"
                                 v-if="itemLack"
                                 text-color="white"

src/pages/Ticket/Negative/TicketLackTable.vue

@@ -177,7 +177,7 @@ const itemLackForm = ref();
 
 const reload = async (data) => {
     // window.location.reload();
-    console.err(data);
+    console.error(data);
 };
 defineExpose({ reload });
 const emit = defineEmits(['update:selection']);
@@ -187,7 +187,6 @@ watch(selectedRows, () => emit('update:selection', selectedRows));
 </script>
 
 <template>
-    {{ selectedRows }}
     <FetchData
         url="States/editableStates"
         @on-fetch="(data) => (editableStates = data)"

src/pages/Ticket/locale/en.yml

@@ -268,9 +268,9 @@ negative:
     totalNegative: 'Total negatives'
     days: Days
     buttonsUpdate:
-        itemProposal: artículo
+        itemProposal: Item
-        state: Estado
+        state: State
-        quantity: Cantidad
+        quantity: Quantity
     modalOrigin:
         title: 'Update negatives'
         question: 'Select a state to update'