WIP

src/i18n/locale/en.yml

@@ -1128,6 +1128,11 @@ item:
     fixedPrice:
         itemId: Item ID
         groupingPrice: Grouping price
+        packingPrice: Packing price
+        minPrice: Min price
+        started: Started
+        ended: Ended
+        warehouse: Warehouse
 components:
     topbar: {}
     userPanel:

src/i18n/locale/es.yml

@@ -1125,6 +1125,11 @@ item:
     fixedPrice:
         itemId: ID Artículo
         groupingPrice: Precio grouping
+        packingPrice: Precio packing
+        minPrice: Precio min
+        started: Inicio
+        ended: Fin
+        warehouse: Almacén
 components:
     topbar: {}
     userPanel:

src/pages/Item/ItemFixedPrice.vue

@@ -5,11 +5,11 @@ import { useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
-import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDateFormat } from 'src/filters/date.js';
@@ -18,6 +18,7 @@ import { dashIfEmpty } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useState } from 'src/composables/useState';
 import { toCurrency } from 'filters/index';
+import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
 const router = useRouter();
@@ -27,10 +28,12 @@ const stateStore = useStateStore();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 const state = useState();
+const { notify } = useNotify();
 
 const paginateRef = ref(null);
 const user = state.getUser();
 const fixedPrices = ref([]);
+const fixedPricesOriginalData = ref([]);
 const warehousesOptions = ref([]);
 const itemsWithNameOptions = ref([]);
 
@@ -77,37 +80,18 @@ const applyColumnFilter = async (col) => {
     }
 };
 
-const getInputEvents = (col) => {
-    return col.columnFilter.type === 'select'
-        ? { 'update:modelValue': () => applyColumnFilter(col) }
-        : {
-              'keyup.enter': () => applyColumnFilter(col),
-          };
-};
-
-const upsertPrice = (price, resetMinPrice) => {
-    // if (resetMinPrice) delete price['minPrice'];
-    // const requiredFields = ['itemFk', 'started', 'ended', 'rate2', 'rate3'];
-    // for (const field of requiredFields) if (price[field] == undefined) return;
-    // const query = 'FixedPrices/upsertFixedPrice';
-    // this.$http.patch(query, price).then((res) => {
-    //     this.vnApp.showSuccess(this.$t('Data saved!'));
-    //     Object.assign(price, res.data);
-    // });
-};
-
 const columns = computed(() => [
     {
         label: t('item.fixedPrice.itemId'),
         name: 'itemId',
-        // field: 'id',
+        field: 'itemFk',
         align: 'left',
         sortable: true,
         // columnFilter: {
         //     component: VnInput,
         //     type: 'text',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         dense: true,
         //     },
@@ -123,7 +107,7 @@ const columns = computed(() => [
         //     component: VnInput,
         //     type: 'text',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         dense: true,
         //     },
@@ -139,7 +123,7 @@ const columns = computed(() => [
         //     component: VnInput,
         //     type: 'text',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         dense: true,
         //     },
@@ -147,16 +131,16 @@ const columns = computed(() => [
         format: (val) => toCurrency(val),
     },
     {
-        label: t('item.list.packing'),
+        label: t('item.fixedPrice.packingPrice'),
-        field: 'packing',
+        field: 'rate3',
-        name: 'packing',
+        name: 'packingPrice',
         align: 'left',
         sortable: true,
         // columnFilter: {
         //     component: VnInput,
         //     type: 'text',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         dense: true,
         //     },
@@ -165,41 +149,41 @@ const columns = computed(() => [
     },
 
     {
-        label: t('item.list.stems'),
+        label: t('item.fixedPrice.minPrice'),
-        field: 'stems',
+        field: 'minPrice',
-        name: 'stems',
+        name: 'minPrice',
         align: 'left',
         sortable: true,
         // columnFilter: {
         //     component: VnInput,
         //     type: 'text',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         dense: true,
         //     },
         // },
     },
     {
-        label: t('item.list.size'),
+        label: t('item.fixedPrice.started'),
-        field: 'size',
+        field: 'started',
-        name: 'size',
+        name: 'started',
         align: 'left',
         sortable: true,
         // columnFilter: {
         //     component: VnInput,
         //     type: 'text',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         dense: true,
         //     },
         // },
     },
     {
-        label: t('item.list.typeName'),
+        label: t('item.fixedPrice.ended'),
-        field: 'typeName',
+        field: 'ended',
-        name: 'typeName',
+        name: 'ended',
         align: 'left',
         sortable: true,
         // columnFilter: {
@@ -207,7 +191,7 @@ const columns = computed(() => [
         //     filterParamKey: 'typeFk',
         //     type: 'select',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         options: itemTypesOptions.value,
         //         'option-value': 'id',
@@ -218,16 +202,16 @@ const columns = computed(() => [
     },
 
     {
-        label: t('item.list.category'),
+        label: t('item.fixedPrice.warehouse'),
-        field: 'category',
+        field: 'warehouse',
-        name: 'category',
+        name: 'warehouse',
         align: 'left',
         sortable: true,
         // columnFilter: {
         //     component: VnSelectFilter,
         //     type: 'select',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         options: itemCategoriesOptions.value,
         //         'option-value': 'name',
@@ -236,141 +220,14 @@ const columns = computed(() => [
         //     },
         // },
     },
-
-    {
-        label: t('item.list.intrastat'),
-        field: 'intrastat',
-        name: 'intrastat',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         options: intrastatOptions.value,
-        //         'option-value': 'description',
-        //         'option-label': 'description',
-        //         dense: true,
-        //     },
-        // },
-    },
-    {
-        label: t('item.list.origin'),
-        field: 'origin',
-        name: 'origin',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         options: originsOptions.value,
-        //         'option-value': 'code',
-        //         'option-label': 'code',
-        //         dense: true,
-        //     },
-        // },
-    },
-    {
-        label: t('item.list.userName'),
-        field: 'userName',
-        name: 'userName',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     filterParamKey: 'buyerFk',
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         options: buyersOptions.value,
-        //         'option-value': 'id',
-        //         'option-label': 'nickname',
-        //         dense: true,
-        //     },
-        // },
-    },
-    {
-        label: t('item.list.weightByPiece'),
-        field: 'weightByPiece',
-        name: 'weightByPiece',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
-        format: (val) => dashIfEmpty(val),
-    },
-    {
-        label: t('item.list.stemMultiplier'),
-        field: 'stemMultiplier',
-        name: 'stemMultiplier',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
-        format: (val) => dashIfEmpty(val),
-    },
-    {
-        label: t('item.list.isActive'),
-        field: 'isActive',
-        name: 'isActive',
-        align: 'left',
-        sortable: true,
-        // columnFilter: null,
-    },
-    {
-        label: t('item.list.producer'),
-        field: 'producer',
-        name: 'producer',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
-        format: (val) => dashIfEmpty(val),
-    },
-    {
-        label: t('item.list.landed'),
-        field: 'landed',
-        name: 'landed',
-        align: 'left',
-        sortable: true,
-        format: (val) => dashIfEmpty(toDateFormat(val)),
-        // columnFilter: null,
-    },
-    {
-        label: '',
-        name: 'actions',
-        align: 'left',
-        // columnFilter: null,
-    },
 ]);
 
+const onFixedPricesFetched = (data) => {
+    fixedPrices.value = data;
+    // 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
+    fixedPricesOriginalData.value = JSON.parse(JSON.stringify(data));
+};
+
 const redirectToItemCreate = () => {
     router.push({ name: 'ItemCreate' });
 };
@@ -389,6 +246,43 @@ const cloneItem = async (itemFk) => {
     // }
 };
 
+const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
+    return inputType === 'text'
+        ? {
+              'keyup.enter': () => upsertPrice(props, resetMinPrice),
+              blur: () => upsertPrice(props, resetMinPrice),
+          }
+        : { 'update:modelValue': () => upsertPrice(props, resetMinPrice) };
+};
+const getColumnInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+
+const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice) => {
+    console.log('row', row);
+    console.log('col', col);
+    console.log('rowIndex', rowIndex);
+    console.log('field', col.field);
+    console.log('originalData: ', fixedPricesOriginalData.value[rowIndex][col.field]);
+    console.log('actual value: ', row[col.field]);
+    if (fixedPricesOriginalData.value[rowIndex][col.field] == row[col.field]) return;
+
+    try {
+        if (resetMinPrice) row.hasMinPrice = 0;
+        const requiredFields = ['itemFk', 'started', 'ended', 'rate2', 'rate3'];
+        for (const field of requiredFields) if (!row[field]) return;
+        const { data } = await axios.patch('FixedPrices/upsertFixedPrice', row);
+        row = data;
+        fixedPricesOriginalData.value[rowIndex][col.field] = row[col.field];
+    } catch (err) {
+        console.error('Error upserting price', err);
+    }
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
@@ -402,7 +296,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         :filter="{ order: ['itemFk'] }"
         :params="{ warehouseFk: user.warehouseFk }"
         auto-load
-        @on-fetch="(data) => (fixedPrices = data)"
+        @on-fetch="(data) => onFixedPricesFetched(data)"
     />
     <FetchData
         url="Warehouses"
@@ -424,7 +318,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
             :no-data-label="t('globals.noResults')"
-            @row-click="(_, row) => redirectToItemSummary(row.id)"
         >
             <!-- <template #top-row="{ cols }">
                         <QTr>
@@ -445,15 +338,15 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         </QTr>
                     </template> -->
 
-            <template #body-cell-itemId="{ row }">
+            <template #body-cell-itemId="props">
                 <QTd>
                     <VnSelectFilter
                         :options="itemsWithNameOptions"
                         hide-selected
                         option-label="id"
                         option-value="id"
-                        v-model="row.itemFk"
+                        v-model="props.row.itemFk"
-                        @update:model-value="upsertPrice(row, true)"
+                        v-on="getRowUpdateInputEvents(props, true, 'select')"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -472,6 +365,74 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     <fetched-tags :item="row" :max-length="6" />
                 </QTd>
             </template>
+            <template #body-cell-groupingPrice="props">
+                <QTd class="col">
+                    <VnInput
+                        v-model.number="props.row.rate2"
+                        v-on="getRowUpdateInputEvents(props)"
+                    >
+                        <template #append>€</template>
+                    </VnInput>
+                </QTd>
+            </template>
+            <template #body-cell-packingPrice="props">
+                <QTd class="col">
+                    <VnInput
+                        v-model.number="props.row.rate3"
+                        v-on="getRowUpdateInputEvents(props)"
+                    >
+                        <template #append>€</template>
+                    </VnInput>
+                </QTd>
+            </template>
+            <template #body-cell-minPrice="props">
+                <QTd class="col">
+                    <div class="row">
+                        <QCheckbox
+                            class="col"
+                            v-model="props.row.hasMinPrice"
+                            :false-value="0"
+                            :true-value="1"
+                            v-on="getRowUpdateInputEvents(props)"
+                        />
+                        <VnInput
+                            class="col"
+                            :disable="!props.row.hasMinPrice"
+                            v-model.number="props.row.minPrice"
+                            v-on="getRowUpdateInputEvents(props)"
+                            type="number"
+                        />
+                    </div>
+                </QTd>
+            </template>
+            <template #body-cell-started="props">
+                <QTd class="col" style="min-width: 150px">
+                    <VnInputDate
+                        v-model="props.row.started"
+                        v-on="getRowUpdateInputEvents(props)"
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-ended="props">
+                <QTd class="col" style="min-width: 150px">
+                    <VnInputDate
+                        v-model="props.row.ended"
+                        v-on="getRowUpdateInputEvents(props)"
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-warehouse="props">
+                <QTd class="col">
+                    <VnSelectFilter
+                        :options="warehousesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="props.row.warehouseFk"
+                        v-on="getRowUpdateInputEvents(props)"
+                    />
+                </QTd>
+            </template>
         </QTable>
         <QPageSticky :offset="[20, 20]">
             <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />