WIP

src/css/app.scss

@@ -110,6 +110,11 @@ select:-webkit-autofill {
     font-variation-settings: 'FILL' 1;
 }
 
+.fill-icon-on-hover:hover {
+    font-variation-settings: 'FILL' 1;
+    cursor: pointer;
+}
+
 .vn-table-separation-row {
     height: 16px !important;
     background-color: var(--vn-section-color) !important;

src/i18n/locale/en.yml

@@ -1129,6 +1129,7 @@ item:
         itemId: Item ID
         groupingPrice: Grouping price
         packingPrice: Packing price
+        hasMinPrice: Has min price
         minPrice: Min price
         started: Started
         ended: Ended

src/i18n/locale/es.yml

@@ -1126,6 +1126,7 @@ item:
         itemId: ID Artículo
         groupingPrice: Precio grouping
         packingPrice: Precio packing
+        hasMinPrice: Tiene precio mínimo
         minPrice: Precio min
         started: Inicio
         ended: Fin

src/pages/Item/ItemFixedPrice.vue

@@ -10,10 +10,9 @@ 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 EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
 
 import { useStateStore } from 'stores/useStateStore';
-import { toDateFormat } from 'src/filters/date.js';
-import { useSession } from 'composables/useSession';
 import { dashIfEmpty } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useState } from 'src/composables/useState';
@@ -22,63 +21,64 @@ import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
 const router = useRouter();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 const state = useState();
 const { notify } = useNotify();
 
-const paginateRef = ref(null);
+const fixedPricesFetchRef = ref(null);
+// const paginateRef = ref(null);
+const editTableCellDialogRef = ref(null);
 const user = state.getUser();
 const fixedPrices = ref([]);
 const fixedPricesOriginalData = ref([]);
 const warehousesOptions = ref([]);
 const itemsWithNameOptions = ref([]);
+const rowsSelected = ref([]);
 
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'category':
-            return { 'ic.name': value };
-        case 'buyerFk':
-            return { 'it.workerFk': value };
-        case 'grouping':
-            return { 'b.grouping': value };
-        case 'packing':
-            return { 'b.packing': value };
-        case 'origin':
-            return { 'ori.code': value };
-        case 'typeFk':
-            return { 'i.typeFk': value };
-        case 'intrastat':
-            return { 'intr.description': value };
-        case 'name':
-            return { 'i.name': { like: `%${value}%` } };
-        case 'producer':
-            return { 'pr.name': { like: `%${value}%` } };
-        case 'id':
-        case 'size':
-        case 'subname':
-        case 'isActive':
-        case 'weightByPiece':
-        case 'stemMultiplier':
-        case 'stems':
-            return { [`i.${param}`]: value };
-    }
-};
+// const exprBuilder = (param, value) => {
+//     switch (param) {
+//         case 'category':
+//             return { 'ic.name': value };
+//         case 'buyerFk':
+//             return { 'it.workerFk': value };
+//         case 'grouping':
+//             return { 'b.grouping': value };
+//         case 'packing':
+//             return { 'b.packing': value };
+//         case 'origin':
+//             return { 'ori.code': value };
+//         case 'typeFk':
+//             return { 'i.typeFk': value };
+//         case 'intrastat':
+//             return { 'intr.description': value };
+//         case 'name':
+//             return { 'i.name': { like: `%${value}%` } };
+//         case 'producer':
+//             return { 'pr.name': { like: `%${value}%` } };
+//         case 'id':
+//         case 'size':
+//         case 'subname':
+//         case 'isActive':
+//         case 'weightByPiece':
+//         case 'stemMultiplier':
+//         case 'stems':
+//             return { [`i.${param}`]: value };
+//     }
+// };
 
-const params = reactive({});
+// const params = reactive({});
 
-const applyColumnFilter = async (col) => {
-    try {
-        const paramKey = col.columnFilter?.filterParamKey || col.field;
-        params[paramKey] = col.columnFilter.filterValue;
-        await paginateRef.value.addFilter(null, params);
-    } catch (err) {
-        console.error('Error applying column filter', err);
-    }
-};
+// const applyColumnFilter = async (col) => {
+//     try {
+//         const paramKey = col.columnFilter?.filterParamKey || col.field;
+//         params[paramKey] = col.columnFilter.filterValue;
+//         await paginateRef.value.addFilter(null, params);
+//     } catch (err) {
+//         console.error('Error applying column filter', err);
+//     }
+// };
 
 const columns = computed(() => [
     {
@@ -222,30 +222,22 @@ const columns = computed(() => [
     },
 ]);
 
+const editTableFieldsOptions = [
+    { field: 'rate2', label: t('item.fixedPrice.groupingPrice') },
+    { field: 'rate3', label: t('item.fixedPrice.packingPrice') },
+    { field: 'hasMinPrice', label: t('item.fixedPrice.hasMinPrice') },
+    { field: 'minPrice', label: t('item.fixedPrice.minPrice') },
+    { field: 'started', label: t('item.fixedPrice.started') },
+    { field: 'ended', label: t('item.fixedPrice.ended') },
+    { field: 'warehouseFk', label: t('item.fixedPrice.warehouse') },
+];
+
 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' });
-};
-
-const redirectToItemSummary = (id) => {
-    router.push({ name: 'ItemSummary', params: { id } });
-};
-
-const cloneItem = async (itemFk) => {
-    // try {
-    //     const { data } = await axios.post(`Items/${itemFk}/clone`);
-    //     if (!data) return;
-    //     router.push({ name: 'ItemTags', params: { id: data.id } });
-    // } catch (err) {
-    //     console.error('Error cloning item', err);
-    // }
-};
-
 const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
     return inputType === 'text'
         ? {
@@ -254,27 +246,27 @@ const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
           }
         : { 'update:modelValue': () => upsertPrice(props, resetMinPrice) };
 };
-const getColumnInputEvents = (col) => {
-    return col.columnFilter.type === 'select'
-        ? { 'update:modelValue': () => applyColumnFilter(col) }
-        : {
-              'keyup.enter': () => applyColumnFilter(col),
-          };
-};
+
+// 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;
+    // Si la row no tiene id significa que fue agregada con addRow y no se ha guardado en la base de datos
+    const isNew = !row.id;
+    // Si isNew es falso no se checkea si el valor es igual a la original
+    if (!isNew)
+        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];
@@ -283,6 +275,43 @@ const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice) => {
     }
 };
 
+const addRow = () => {
+    if (!fixedPrices.value || fixedPrices.value.length === 0) {
+        fixedPrices.value = [];
+
+        const today = Date.vnNew();
+
+        const millisecsInDay = 86400000;
+        const daysInWeek = 7;
+        const nextWeek = new Date(today.getTime() + daysInWeek * millisecsInDay);
+
+        fixedPricesOriginalData.value.push({
+            started: today,
+            ended: nextWeek,
+        });
+        fixedPrices.value.push({
+            started: today,
+            ended: nextWeek,
+        });
+        return;
+    }
+
+    const lastIndex = fixedPrices.value.length - 1;
+    const lastItemCopy = JSON.parse(JSON.stringify(fixedPrices.value[lastIndex]));
+    const { id, ...restOfData } = lastItemCopy;
+    fixedPricesOriginalData.value.push(restOfData);
+    fixedPrices.value.push(restOfData);
+};
+
+const openEditTableCellDialog = () => {
+    editTableCellDialogRef.value.show();
+};
+
+const onEditCellDataSaved = async () => {
+    rowsSelected.value = [];
+    await fixedPricesFetchRef.value.fetch();
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
@@ -292,6 +321,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 
 <template>
     <FetchData
+        ref="fixedPricesFetchRef"
         url="FixedPrices/filter"
         :filter="{ order: ['itemFk'] }"
         :params="{ warehouseFk: user.warehouseFk }"
@@ -315,6 +345,8 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             :rows="fixedPrices"
             :columns="columns"
             row-key="id"
+            selection="multiple"
+            v-model:selected="rowsSelected"
             :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
             :no-data-label="t('globals.noResults')"
@@ -433,21 +465,41 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     />
                 </QTd>
             </template>
+            <template #bottom-row>
+                <QTd align="center">
+                    <QIcon
+                        @click.stop="addRow()"
+                        class="fill-icon-on-hover"
+                        color="primary"
+                        name="add_circle"
+                        size="sm"
+                    >
+                        <QTooltip>
+                            {{ t('Add fixed price') }}
+                        </QTooltip>
+                    </QIcon>
+                </QTd>
+            </template>
         </QTable>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
-            <QTooltip class="text-no-wrap">
-                {{ t('New item') }}
+        <QPageSticky v-if="rowsSelected.length > 0" :offset="[20, 20]">
+            <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
+            <QTooltip>
+                {{ t('Edit fixed price(s)') }}
             </QTooltip>
         </QPageSticky>
+        <QDialog ref="editTableCellDialogRef">
+            <EditTableCellValueForm
+                edit-url="FixedPrices/editFixedPrice"
+                :rows="rowsSelected"
+                :fields-options="editTableFieldsOptions"
+                @on-data-saved="onEditCellDataSaved()"
+            />
+        </QDialog>
     </QPage>
 </template>
 
 <i18n>
 es:
-    New item: Nuevo artículo
-    All it's properties will be copied: Todas sus propiedades serán copiadas
-    Do you want to clone this item?: ¿Desea clonar este artículo?
-    Clone: Clonar
-    Preview: Vista previa
+    Add fixed price: Añadir precio fijado
+    Edit fixed price(s): Editar precio(s) fijado(s)
 </i18n>