Merge branch 'dev' into 8862-testIsolationFalse

src/components/CrudModel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { computed, ref, useAttrs, watch } from 'vue';
+import { computed, ref, useAttrs, watch, nextTick } from 'vue';
 import { useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -42,7 +42,15 @@ const $props = defineProps({
     },
     dataRequired: {
         type: Object,
-        default: () => {},
+        default: () => ({}),
+    },
+    dataDefault: {
+        type: Object,
+        default: () => ({}),
+    },
+    insertOnLoad: {
+        type: Boolean,
+        default: false,
     },
     defaultSave: {
         type: Boolean,
@@ -87,6 +95,7 @@ const formData = ref();
 const saveButtonRef = ref(null);
 const watchChanges = ref();
 const formUrl = computed(() => $props.url);
+const rowsContainer = ref(null);
 
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
 
@@ -122,9 +131,11 @@ async function fetch(data) {
     const rows = keyData ? data[keyData] : data;
     resetData(rows);
     emit('onFetch', rows);
+    $props.insertOnLoad && await insert();
     return rows;
 }
 
+
 function resetData(data) {
     if (!data) return;
     if (data && Array.isArray(data)) {
@@ -135,9 +146,16 @@ function resetData(data) {
     formData.value = JSON.parse(JSON.stringify(data));
 
     if (watchChanges.value) watchChanges.value(); //destroy watcher
-    watchChanges.value = watch(formData, () => (hasChanges.value = true), { deep: true });
+    watchChanges.value = watch(formData, (nVal) => {
-}
+        hasChanges.value = false;
+        const filteredNewData = nVal.filter(row => !isRowEmpty(row) || row[$props.primaryKey]);
+        const filteredOriginal = originalData.value.filter(row => row[$props.primaryKey]);
 
+        const changes = getDifferences(filteredOriginal, filteredNewData);
+        hasChanges.value = !isEmpty(changes);
+
+    }, { deep: true });
+}
 async function reset() {
     await fetch(originalData.value);
     hasChanges.value = false;
@@ -165,7 +183,9 @@ async function onSubmit() {
         });
     }
     isLoading.value = true;
+    
     await saveChanges($props.saveFn ? formData.value : null);
+    
 }
 
 async function onSubmitAndGo() {
@@ -174,6 +194,10 @@ async function onSubmitAndGo() {
 }
 
 async function saveChanges(data) {
+    formData.value = formData.value.filter(row => 
+    row[$props.primaryKey] || !isRowEmpty(row)
+    );
+    
     if ($props.saveFn) {
         $props.saveFn(data, getChanges);
         isLoading.value = false;
@@ -203,14 +227,32 @@ async function saveChanges(data) {
     });
 }
 
-async function insert(pushData = $props.dataRequired) {
+async function insert(pushData = { ...$props.dataRequired, ...$props.dataDefault }) {
-    const $index = formData.value.length
+    formData.value = formData.value.filter(row => !isRowEmpty(row));
-        ? formData.value[formData.value.length - 1].$index + 1
+
-        : 0;
+    const lastRow = formData.value.at(-1);
-    formData.value.push(Object.assign({ $index }, pushData));
+    const isLastRowEmpty = lastRow ? isRowEmpty(lastRow) : false;
-    hasChanges.value = true;
+    
+    if (formData.value.length && isLastRowEmpty) return;
+    const $index = formData.value.length ? formData.value.at(-1).$index + 1 : 0;
+    
+    const nRow = Object.assign({ $index }, pushData);
+    formData.value.push(nRow);
+    
+    const hasChange = Object.keys(nRow).some(key => !isChange(nRow, key));
+    if (hasChange) hasChanges.value = true;
 }
 
+function isRowEmpty(row) {
+    return Object.keys(row).every(key => isChange(row, key));
+}
+
+
+function isChange(row,key){
+    return !row[key] || key == '$index' || Object.hasOwn($props.dataRequired || {}, key);
+}
+
+
 async function remove(data) {
     if (!data.length)
         return quasar.notify({
@@ -227,10 +269,8 @@ async function remove(data) {
         newData = newData.filter(
             (form) => !preRemove.some((index) => index == form.$index),
         );
-        const changes = getChanges();
+        formData.value = newData;
-        if (!changes.creates?.length && !changes.updates?.length)
+        hasChanges.value = JSON.stringify(removeIndexField(formData.value)) !== JSON.stringify(removeIndexField(originalData.value));
-            hasChanges.value = false;
-        fetch(newData);
     }
     if (ids.length) {
         quasar
@@ -248,9 +288,8 @@ async function remove(data) {
                 newData = newData.filter((form) => !ids.some((id) => id == form[pk]));
                 fetch(newData);
             });
-    } else {
-        reset();
     }
+
     emit('update:selected', []);
 }
 
@@ -261,7 +300,7 @@ function getChanges() {
     const pk = $props.primaryKey;
     for (const [i, row] of formData.value.entries()) {
         if (!row[pk]) {
-            creates.push(row);
+            creates.push(Object.assign(row, { ...$props.dataRequired }));
         } else if (originalData.value[i]) {
             const data = getDifferences(originalData.value[i], row);
             if (!isEmpty(data)) {
@@ -287,6 +326,33 @@ function isEmpty(obj) {
     return !Object.keys(obj).length;
 }
 
+function removeIndexField(data) {
+    if (Array.isArray(data)) {
+        return data.map(({ $index, ...rest }) => rest);
+    } else if (typeof data === 'object' && data !== null) {
+        const { $index, ...rest } = data;
+        return rest;
+    }
+}
+
+async function handleTab(event) {
+    event.preventDefault();
+    const { shiftKey, target } = event;
+    const focusableSelector = `tbody tr td:not(:first-child) :is(a, button, input, textarea, select, details):not([disabled])`;
+    const focusableElements = rowsContainer.value?.querySelectorAll(focusableSelector);
+    const currentIndex = Array.prototype.indexOf.call(focusableElements, target);
+    const index = shiftKey ? currentIndex - 1 : currentIndex + 1;
+    const isLast = target === focusableElements[focusableElements.length - 1];
+    const isFirst = currentIndex === 0;
+
+    if ((shiftKey && !isFirst) || (!shiftKey && !isLast))
+        focusableElements[index]?.focus();
+    else if (isLast) {
+        await insert();
+        await nextTick();
+    }
+}
+
 async function reload(params) {
     const data = await vnPaginateRef.value.fetch(params);
     fetch(data);
@@ -312,12 +378,14 @@ watch(formUrl, async () => {
         v-bind="$attrs"
     >
         <template #body v-if="formData">
-            <slot
+            <div ref="rowsContainer" @keydown.tab="handleTab">
-                name="body"
+                <slot
-                :rows="formData"
+                    name="body"
-                :validate="validate"
+                    :rows="formData"
-                :filter="filter"
+                    :validate="validate"
-            ></slot>
+                    :filter="filter"
+                ></slot>
+            </div>
         </template>
     </VnPaginate>
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown() && hasSubToolbar">

src/components/__tests__/CrudModel.spec.js

@@ -193,11 +193,11 @@ describe('CrudModel', () => {
         });
 
         it('should set originalData and formatData with data and generate watchChanges', async () => {
-            data = {
+            data = [{
                 name: 'Tony',
                 lastName: 'Stark',
                 age: 42,
-            };
+            }];
 
             vm.resetData(data);
 

src/components/ui/VnNotes.vue

@@ -35,6 +35,7 @@ const $props = defineProps({
     selectType: { type: Boolean, default: false },
     justInput: { type: Boolean, default: false },
     goTo: { type: String, default: '' },
+    useUserRelation: { type: Boolean, default: true },
 });
 
 const { t } = useI18n();
@@ -54,6 +55,26 @@ const defaultObservationType = computed(
 let savedNote = false;
 let originalText;
 
+onBeforeRouteLeave((to, from, next) => {
+    if (
+        (newNote.text && !$props.justInput) ||
+        (newNote.text !== originalText && $props.justInput)
+    )
+        quasar.dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('globals.unsavedPopup.title'),
+                message: t('globals.unsavedPopup.subtitle'),
+                promise: () => next(),
+            },
+        });
+    else next();
+});
+
+onMounted(() => {
+    nextTick(() => (componentIsRendered.value = true));
+});
+
 function handleClick(e) {
     if (e.shiftKey && e.key === 'Enter') return;
     if ($props.justInput) confirmAndUpdate();
@@ -108,22 +129,6 @@ async function update() {
     );
 }
 
-onBeforeRouteLeave((to, from, next) => {
-    if (
-        (newNote.text && !$props.justInput) ||
-        (newNote.text !== originalText && $props.justInput)
-    )
-        quasar.dialog({
-            component: VnConfirm,
-            componentProps: {
-                title: t('globals.unsavedPopup.title'),
-                message: t('globals.unsavedPopup.subtitle'),
-                promise: () => next(),
-            },
-        });
-    else next();
-});
-
 function fetchData([data]) {
     newNote.text = data?.notes;
     originalText = data?.notes;
@@ -137,16 +142,38 @@ const handleObservationTypes = (data) => {
     }
 };
 
-onMounted(() => {
-    nextTick(() => (componentIsRendered.value = true));
-});
-
 async function saveAndGo() {
     savedNote = false;
     await insert();
-    await savedNote;
     router.push({ path: $props.goTo });
 }
+
+function getUserFilter() {
+    const newUserFilter = $props.userFilter ?? {};
+    const userInclude = {
+        relation: 'user',
+        scope: {
+            fields: ['id', 'nickname', 'name'],
+        },
+    };
+    if (newUserFilter.include) {
+        if (Array.isArray(newUserFilter.include)) {
+            newUserFilter.include.push(userInclude);
+        } else {
+            newUserFilter.include = [userInclude, newUserFilter.include];
+        }
+    } else {
+        newUserFilter.include = userInclude;
+    }
+
+    if ($props.useUserRelation) {
+        return {
+            ...newUserFilter,
+            ...$props.userFilter,
+        };
+    }
+    return $props.filter;
+}
 </script>
 <template>
     <Teleport
@@ -242,7 +269,7 @@ async function saveAndGo() {
         :url="$props.url"
         order="created DESC"
         :limit="0"
-        :user-filter="userFilter"
+        :user-filter="getUserFilter()"
         :filter="filter"
         auto-load
         ref="vnPaginateRef"
@@ -261,15 +288,15 @@ async function saveAndGo() {
                     <QCardSection horizontal>
                         <VnAvatar
                             :descriptor="false"
-                            :worker-id="note.workerFk"
+                            :worker-id="note.user?.id"
                             size="md"
-                            :title="note.worker?.user.nickname"
+                            :title="note.user?.nickname"
                         />
                         <div class="full-width row justify-between q-pa-xs">
                             <div>
                                 <VnUserLink
-                                    :name="`${note.worker.user.name}`"
+                                    :name="`${note.user?.name}`"
-                                    :worker-id="note.worker.id"
+                                    :worker-id="note.user?.id"
                                 />
                                 <QBadge
                                     class="q-ml-xs"

src/pages/Claim/Card/ClaimDevelopment.vue

@@ -138,6 +138,7 @@ const columns = computed(() => [
         :filter="developmentsFilter"
         ref="claimDevelopmentForm"
         :data-required="{ claimFk: route.params.id }"
+        :insert-on-load="true"
         v-model:selected="selected"
         @save-changes="$router.push(`/claim/${route.params.id}/action`)"
         :default-save="false"

src/pages/Claim/Card/ClaimNotes.vue

@@ -1,12 +1,9 @@
 <script setup>
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useState } from 'src/composables/useState';
 import VnNotes from 'src/components/ui/VnNotes.vue';
 
 const route = useRoute();
-const state = useState();
-const user = state.getUser();
 
 const $props = defineProps({
     id: { type: [Number, String], default: null },
@@ -15,25 +12,14 @@ const $props = defineProps({
 const claimId = computed(() => $props.id || route.params.id);
 
 const claimFilter = {
-    fields: ['id', 'created', 'workerFk', 'text'],
+    fields: ['id', 'created', 'userFk', 'text'],
     include: {
-        relation: 'worker',
+        relation: 'user',
         scope: {
-            fields: ['id', 'firstName', 'lastName'],
+            fields: ['id', 'nickname', 'name'],
-            include: {
-                relation: 'user',
-                scope: {
-                    fields: ['id', 'nickname', 'name'],
-                },
-            },
         },
     },
 };
-
-const body = {
-    claimFk: claimId.value,
-    workerFk: user.value.id,
-};
 </script>
 
 <template>
@@ -43,7 +29,9 @@ const body = {
         :add-note="$props.addNote"
         :user-filter="claimFilter"
         :filter="{ where: { claimFk: claimId } }"
-        :body="body"
+        :body="{
+            claimFk: claimId,
+        }"
         v-bind="$attrs"
         style="overflow-y: auto"
     />

src/pages/Customer/Card/CustomerNotes.vue

@@ -1,12 +1,15 @@
 <script setup>
 import VnNotes from 'src/components/ui/VnNotes.vue';
+import { useState } from 'src/composables/useState';
+const state = useState();
+const user = state.getUser();
 </script>
 <template>
     <VnNotes
         url="clientObservations"
         :add-note="true"
         :filter="{ where: { clientFk: $route.params.id } }"
-        :body="{ clientFk: $route.params.id }"
+        :body="{ clientFk: $route.params.id, userFk: user.id }"
         style="overflow-y: auto"
         :select-type="true"
         required

src/pages/Customer/Defaulter/CustomerDefaulter.vue

@@ -76,7 +76,7 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'workerFk',
+        name: 'userFk',
         label: t('Author'),
         tooltip: t('Worker who made the last observation'),
         columnFilter: {
@@ -155,7 +155,7 @@ function exprBuilder(param, value) {
             return { [`c.${param}`]: value };
         case 'payMethod':
             return { [`c.payMethodFk`]: value };
-        case 'workerFk':
+        case 'userFk':
             return { [`co.${param}`]: value };
         case 'departmentFk':
             return { [`c.${param}`]: value };
@@ -229,10 +229,10 @@ function exprBuilder(param, value) {
                 <DepartmentDescriptorProxy :id="row.departmentFk" />
             </span>
         </template>
-        <template #column-workerFk="{ row }">
+        <template #column-userFk="{ row }">
             <span class="link" @click.stop>
                 {{ row.workerName }}
-                <WorkerDescriptorProxy :id="row.workerFk" />
+                <WorkerDescriptorProxy :id="row.userFk" />
             </span>
         </template>
     </VnTable>

src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue

@@ -90,6 +90,7 @@ const columns = computed(() => [
             auto-load
             :data-required="{ invoiceInFk: invoiceInId }"
             :filter="filter"
+            :insert-on-load="true"
             v-model:selected="rowsSelected"
             @on-fetch="(data) => (invoceInIntrastat = data)"
         >

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -187,6 +187,7 @@ function setCursor(ref) {
         url="InvoiceInTaxes"
         :filter="filter"
         :data-required="{ invoiceInFk: $route.params.id }"
+        :insert-on-load="true"
         auto-load
         v-model:selected="rowsSelected"
         :go-to="`/invoice-in/${$route.params.id}/due-day`"

src/pages/Item/Card/ItemBarcode.vue

@@ -51,6 +51,7 @@ const submit = async (rows) => {
             <CrudModel
                 :data-required="{ itemFk: route.params.id }"
                 :default-remove="false"
+                :insert-on-load="true"
                 :filter="{
                     fields: ['id', 'itemFk', 'code'],
                     where: { itemFk: route.params.id },

src/pages/Item/Card/ItemTags.vue

@@ -76,15 +76,22 @@ const insertTag = (rows) => {
                 model="ItemTags"
                 url="ItemTags"
                 :data-required="{
-                    $index: undefined,
                     itemFk: route.params.id,
-                    priority: undefined,
                     tag: {
-                        isFree: undefined,
+                        isFree: true,
+                        value: undefined,
+                        name: undefined,
+                    },
+                    
+                }"
+                :data-default="{
+                    tag: {
+                        isFree: true,
                         value: undefined,
                         name: undefined,
                     },
                     tagFk: undefined,
+                    priority: undefined,
                 }"
                 :default-remove="false"
                 :user-filter="{

src/pages/Route/Vehicle/Card/VehicleNotes.vue

@@ -18,7 +18,7 @@ const noteFilter = computed(() => {
 
 const body = {
     vehicleFk: vehicleId.value,
-    workerFk: user.value.id,
+    userFk: user.value.id,
 };
 </script>
 

src/pages/Ticket/Card/TicketPackage.vue

@@ -24,10 +24,10 @@ const crudModelFilter = reactive({
     where: { ticketFk: route.params.id },
 });
 
-const crudModelRequiredData = computed(() => ({
+const crudModelDefaultData = computed(() => ({
+    created: Date.vnNew(),
     packagingFk: null,
     quantity: 0,
-    created: Date.vnNew(),
     ticketFk: route.params.id,
 }));
 
@@ -63,7 +63,7 @@ watch(
                 url="TicketPackagings"
                 model="TicketPackagings"
                 :filter="crudModelFilter"
-                :data-required="crudModelRequiredData"
+                :data-default="crudModelDefaultData"
                 :default-remove="false"
                 auto-load
             >

src/pages/Ticket/Card/TicketSale.vue

@@ -719,6 +719,7 @@ watch(
         :create-as-dialog="false"
         :crud-model="{
             disableInfiniteScroll: true,
+            insertOnLoad: false,
         }"
         :default-remove="false"
         :default-reset="false"

src/pages/Ticket/Negative/TicketLackList.vue

@@ -181,6 +181,7 @@ const setUserParams = (params) => {
         :create="false"
         :crud-model="{
             disableInfiniteScroll: true,
+            insertOnLoad: false,
         }"
         :table="{
             'row-key': 'itemFk',

src/pages/Worker/Card/WorkerBalance.vue

@@ -99,6 +99,10 @@ const columns = computed(() => [
                 workerFk: entityId,
             },
         }"
+        :crud-model="{
+            insertOnLoad: false,
+        }"
+
         order="paymentDate DESC"
         :columns="columns"
         auto-load

src/pages/Worker/Card/WorkerFormation.vue

@@ -128,6 +128,9 @@ const columns = computed(() => [
                 workerFk: entityId,
             },
         }"
+        :crud-model="{
+            insertOnLoad: false,
+        }"
         order="id DESC"
         :columns="columns"
         auto-load

src/pages/Worker/Card/WorkerMedical.vue

@@ -109,6 +109,9 @@ const columns = [
                 workerFk: entityId,
             },
         }"
+        :crud-model="{
+            insertOnLoad: false,
+        }"
         order="date DESC"
         :columns="columns"
         auto-load

src/pages/Worker/Card/WorkerNotes.vue

@@ -1,28 +1,26 @@
 <script setup>
 import { useRoute } from 'vue-router';
-
+import { useState } from 'src/composables/useState';
 import VnNotes from 'src/components/ui/VnNotes.vue';
 
 const route = useRoute();
+const state = useState();
+const user = state.getUser();
 
 const userFilter = {
     order: 'created DESC',
-
     include: {
-        relation: 'worker',
+        relation: 'user',
         scope: {
-            fields: ['id', 'firstName', 'lastName'],
+            fields: ['id', 'nickname', 'name'],
-            include: {
-                relation: 'user',
-                scope: {
-                    fields: ['id', 'nickname', 'name'],
-                },
-            },
         },
     },
 };
 
-const body = { workerFk: route.params.id };
+const body = {
+    workerFk: route.params.id,
+    userFk: user.value.id,
+};
 </script>
 
 <template>

src/pages/Worker/Card/WorkerPda.vue

@@ -170,6 +170,9 @@ function isSigned(row) {
             'row-key': 'deviceProductionFk',
             selection: 'multiple',
         }"
+        :crud-model="{
+            insertOnLoad: false,
+        }"
         :table-filter="{ hiddenTags: ['userFk'] }"
     >
         <template #moreBeforeActions>