From 9bb298bbebf6dfe3c099a284e2866f0d8d8c82cb Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 6 Sep 2024 13:14:46 +0200
Subject: [PATCH] feat: handle create row

---
 src/components/CrudModel.vue                 |   4 +-
 src/components/VnTable/VnTable.vue           |   6 ++
 src/i18n/locale/en.yml                       |   2 +
 src/i18n/locale/es.yml                       |   2 +
 src/pages/Item/ItemFixedPrice.vue            | 107 +++++++++++--------
 src/pages/Item/ItemFixedPriceFilter.vue      |  10 +-
 src/pages/Order/Card/OrderDescriptorMenu.vue |   4 +-
 7 files changed, 84 insertions(+), 51 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 33c831e3f..0386e037b 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -189,11 +189,11 @@ async function saveChanges(data) {
     });
 }
 
-async function insert() {
+async function insert(pushData = $props.dataRequired) {
     const $index = formData.value.length
         ? formData.value[formData.value.length - 1].$index + 1
         : 0;
-    formData.value.push(Object.assign({ $index }, $props.dataRequired));
+    formData.value.push(Object.assign({ $index }, pushData));
     hasChanges.value = true;
 }
 
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 2f173cd85..20482c494 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -89,6 +89,10 @@ const $props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    crudModel: {
+        type: Object,
+        default: () => ({}),
+    },
     tableHeight: {
         type: String,
         default: '90vh',
@@ -369,6 +373,7 @@ function handleOnDataSaved(_, res) {
             <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>
         <template #body="{ rows }">
+            {{ rows }}
             <QTable
                 v-bind="table"
                 class="vnTable"
@@ -384,6 +389,7 @@ function handleOnDataSaved(_, res) {
                 @virtual-scroll="
                     (event) =>
                         event.index > rows.length - 2 &&
+                        ($props.crudModel?.paginate ?? true) &&
                         CrudModelRef.vnPaginateRef.paginate()
                 "
                 @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 0b0737332..ec2627e61 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -40,6 +40,8 @@ globals:
     noChanges: No changes to save
     changesToSave: You have changes pending to save
     confirmRemove: You are about to delete this row. Are you sure?
+    rowWillBeRemoved: This row will be removed
+    sureToContinue: Are you sure you want to continue?
     rowAdded: Row added
     rowRemoved: Row removed
     pleaseWait: Please wait...
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 819510cf6..5eb703021 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -39,6 +39,8 @@ globals:
     noChanges: Sin cambios que guardar
     changesToSave: Tienes cambios pendientes de guardar
     confirmRemove: Vas a eliminar este registro. ¿Continuar?
+    rowWillBeRemoved: Esta linea se eliminará
+    sureToContinue: ¿Seguro que quieres continuar?
     rowAdded: Fila añadida
     rowRemoved: Fila eliminada
     pleaseWait: Por favor espera...
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 537b9fe57..2085e7665 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -55,14 +55,12 @@ const exprBuilder = (param, value) => {
 
 const params = reactive({});
 const defaultColumnAttrs = {
-    align: 'left',
-    sortable: true,
+    align: 'right',
+    sortable: false,
 };
 
 const columns = computed(() => [
     {
-        sortable: true,
-        align: 'left',
         label: t('item.fixedPrice.itemId'),
         name: 'itemId',
         ...defaultColumnAttrs,
@@ -72,6 +70,7 @@ const columns = computed(() => [
             component: 'input',
             type: 'number',
         },
+        columnClass: 'shrink',
     },
     {
         label: t('globals.name'),
@@ -98,8 +97,8 @@ const columns = computed(() => [
 
     {
         label: t('item.fixedPrice.minPrice'),
-        class: 'expand',
         field: 'minPrice',
+        columnClass: 'shrink',
         name: 'minPrice',
         ...defaultColumnAttrs,
         cardVisible: true,
@@ -116,17 +115,23 @@ const columns = computed(() => [
         format: ({ started }) => toDate(started),
         cardVisible: true,
         ...defaultColumnAttrs,
-        component: 'date',
-        columnClass: 'shrink',
+        columnField: {
+            component: 'date',
+            class: 'shrink',
+        },
+        columnClass: 'expand',
     },
     {
         label: t('item.fixedPrice.ended'),
         field: 'ended',
         name: 'ended',
         ...defaultColumnAttrs,
-        columnClass: 'shrink',
         cardVisible: true,
-        component: 'date',
+        columnField: {
+            component: 'date',
+            class: 'shrink',
+        },
+        columnClass: 'expand',
         format: (row) => toDate(row.ended),
     },
 
@@ -135,7 +140,14 @@ const columns = computed(() => [
         field: 'warehouseFk',
         name: 'warehouseFk',
         ...defaultColumnAttrs,
-        component: 'select',
+        columnClass: 'shrink',
+        columnFilter: {
+            component: 'select',
+        },
+        columnField: {
+            component: 'select',
+            class: 'expand',
+        },
         attrs: {
             options: warehousesOptions,
         },
@@ -230,8 +242,8 @@ function checkLastVisibleRow() {
 
     if (lastVisibleRow) {
         console.log('Última fila visible:', lastVisibleRow);
-        return lastVisibleRow;
     }
+    return lastVisibleRow;
 }
 const addRow = (original = null) => {
     // const original = checkLastVisibleRow();
@@ -262,33 +274,34 @@ const addRow = (original = null) => {
 
         // lastItem.value = {
         copy = {
+            id: 0,
             started: today,
             ended: nextWeek,
             hasMinPrice: 0,
+            $index: 0,
         };
 
         // return;
-    }
-
-    copy = {
-        $index: original.$index - 1,
-        itemFk: original.itemFk,
-        name: original.name,
-        subName: original.subName,
-        value5: original.value5,
-        value6: original.value6,
-        value7: original.value7,
-        value8: original.value8,
-        value9: original.value9,
-        value10: original.value10,
-        warehouseFk: original.warehouseFk,
-        rate2: original.rate2,
-        rate3: original.rate3,
-        hasMinPrice: original.hasMinPrice,
-        minPrice: original.minPrice,
-        started: Date.vnNew(),
-        ended: Date.vnNew(),
-    };
+    } else
+        copy = {
+            $index: original.$index - 1,
+            itemFk: original.itemFk,
+            name: original.name,
+            subName: original.subName,
+            value5: original.value5,
+            value6: original.value6,
+            value7: original.value7,
+            value8: original.value8,
+            value9: original.value9,
+            value10: original.value10,
+            warehouseFk: original.warehouseFk,
+            rate2: original.rate2,
+            rate3: original.rate3,
+            hasMinPrice: original.hasMinPrice,
+            minPrice: original.minPrice,
+            started: Date.vnNew(),
+            ended: Date.vnNew(),
+        };
     // lastItem.value = lastItemCopy;
     // tableRef.value.create.onDataSaved(lastItem);
     // nextTick(() => {
@@ -330,13 +343,14 @@ const removeFuturePrice = async () => {
 const quasar = useQuasar();
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import FetchData from 'src/components/FetchData.vue';
+import CrudModel from 'src/components/CrudModel.vue';
 
 function confirmRemove(item) {
     quasar.dialog({
         component: VnConfirm,
         componentProps: {
-            title: t('This row will be removed'),
-            message: t('Do you want to remove?'),
+            title: t('globals.rowWillBeRemoved'),
+            message: t('globals.confirmDeletion'),
             promise: async () => removePrice(item.id),
         },
     });
@@ -345,8 +359,8 @@ function confirmRemoveFuturePrice(item) {
     quasar.dialog({
         component: VnConfirm,
         componentProps: {
-            title: t('This row will be removed'),
-            message: t('Do you want to remove?'),
+            title: t('globals.rowWillBeRemoved'),
+            message: t('globals.confirmDeletion'),
             promise: async () => removeFuturePrice(item.id),
         },
     });
@@ -369,9 +383,14 @@ onMounted(async () => {
 function handleOnDataSave({ CrudModelRef }) {
     const { original, copy } = addRow(CrudModelRef.formData[checkLastVisibleRow()]);
     // CrudModelRef.formData.unshift(roww);
-    CrudModelRef.formData.splice(original.$index, 0, copy);
+    if (original) {
+        CrudModelRef.formData.splice(original?.$index ?? 0, 0, copy);
+    } else {
+        CrudModelRef.insert(copy);
+        // CrudModelRef.reload();
+    }
     nextTick(() => {
-        highlightNewRow(original);
+        highlightNewRow(original ?? { $index: 0 });
     });
 }
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -436,6 +455,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 'row-key': 'id',
                 selection: 'multiple',
             }"
+            :crud-model="{
+                paginate: false,
+            }"
             v-model:selected="rowsSelected"
             :row-click="saveOnRowChange"
             :create-as-dialog="false"
@@ -511,7 +533,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </template>
             <template #column-minPrice="props">
                 <QTd class="col">
-                    <div class="row" style="width: 130px">
+                    <div class="row" style="width: 115px">
                         <QCheckbox
                             :model-value="props.row.hasMinPrice"
                             @update:model-value="updateMinPrice($event, props)"
@@ -567,8 +589,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QTd>
             </template>
             <template #column-warehouseFk="props">
-                <QTd class="col" style="max-width: 180px">
+                <QTd class="col">
                     <VnSelect
+                        style="max-width: 150px"
                         :options="warehousesOptions"
                         hide-selected
                         option-label="name"
@@ -615,13 +638,14 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 .q-table th,
 .q-table td {
     padding-inline: 5px !important;
+    // text-align: -webkit-right;
 }
 .q-table tbody td {
     max-width: none;
 
     .q-td.col {
         & .vnInputDate {
-            min-width: 130px;
+            min-width: 90px;
         }
         & div.row {
             & .q-checkbox {
@@ -656,7 +680,6 @@ tbody tr.highlight .q-td {
 es:
     Add fixed price: Añadir precio fijado
     Edit fixed price(s): Editar precio(s) fijado(s)
-    This row will be removed: Esta linea se eliminará
     Are you sure you want to continue?: ¿Seguro que quieres continuar?
     Delete: Eliminar
 </i18n>
diff --git a/src/pages/Item/ItemFixedPriceFilter.vue b/src/pages/Item/ItemFixedPriceFilter.vue
index 9b3c7f052..f2e83ba3a 100644
--- a/src/pages/Item/ItemFixedPriceFilter.vue
+++ b/src/pages/Item/ItemFixedPriceFilter.vue
@@ -14,10 +14,6 @@ defineProps({
         type: String,
         required: true,
     },
-    warehousesOptions: {
-        type: Array,
-        default: () => [],
-    },
 });
 import { useRoute } from 'vue-router';
 const route = useRoute();
@@ -39,6 +35,12 @@ const pushParam = (param) => ({
 </script>
 
 <template>
+    <FetchData
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+    />
     <FetchData
         url="TicketRequests/getItemTypeWorker"
         limit="30"
diff --git a/src/pages/Order/Card/OrderDescriptorMenu.vue b/src/pages/Order/Card/OrderDescriptorMenu.vue
index 2e36aa3c5..2695da4e5 100644
--- a/src/pages/Order/Card/OrderDescriptorMenu.vue
+++ b/src/pages/Order/Card/OrderDescriptorMenu.vue
@@ -23,7 +23,7 @@ function confirmRemove() {
         .dialog({
             component: VnConfirm,
             componentProps: {
-                title: t('confirmDeletion'),
+                title: t('globals.confirmDeletion'),
                 message: t('confirmDeletionMessage'),
                 promise: remove,
             },
@@ -52,12 +52,10 @@ async function remove() {
 <i18n>
 en:
     deleteOrder: Delete order
-    confirmDeletion: Confirm deletion
     confirmDeletionMessage: Are you sure you want to delete this order?
 
 es:
     deleteOrder: Eliminar pedido
-    confirmDeletion: Confirmar eliminación
     confirmDeletionMessage: Seguro que quieres eliminar este pedido?
 
 </i18n>