CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [2420.01]
 
+### Added
+
+-   (Item) => Se añade la opción de añadir un comentario del motivo de hacer una foto
+
 ## [2418.01]
 
 ## [2416.01] - 2024-04-18

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.24.1",
+    "version": "24.26.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
@@ -56,4 +56,4 @@
         "vite": "^5.1.4",
         "vitest": "^0.31.1"
     }
-}
+}

src/components/CrudModel.vue

@@ -1,6 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useValidator } from 'src/composables/useValidator';
@@ -10,6 +11,7 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
 import SkeletonTable from 'components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
 
+const { push } = useRouter();
 const quasar = useQuasar();
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -60,6 +62,11 @@ const $props = defineProps({
         type: Function,
         default: null,
     },
+    goTo: {
+        type: String,
+        default: '',
+        description: 'It is used for redirect on click "save and continue"',
+    },
 });
 
 const isLoading = ref(false);
@@ -128,6 +135,11 @@ async function onSubmit() {
     await saveChanges($props.saveFn ? formData.value : null);
 }
 
+async function onSumbitAndGo() {
+    await onSubmit();
+    push({ path: $props.goTo });
+}
+
 async function saveChanges(data) {
     if ($props.saveFn) {
         $props.saveFn(data, getChanges);
@@ -310,7 +322,40 @@ watch(formUrl, async () => {
                 :title="t('globals.reset')"
                 v-if="$props.defaultReset"
             />
+            <QBtnDropdown
+                v-if="$props.goTo && $props.defaultSave"
+                @click="onSumbitAndGo"
+                :label="tMobile('globals.saveAndContinue')"
+                :title="t('globals.saveAndContinue')"
+                :disable="!hasChanges"
+                color="primary"
+                icon="save"
+                split
+            >
+                <QList>
+                    <QItem
+                        color="primary"
+                        clickable
+                        v-close-popup
+                        @click="onSubmit"
+                        :title="t('globals.save')"
+                    >
+                        <QItemSection>
+                            <QItemLabel>
+                                <QIcon
+                                    name="save"
+                                    color="white"
+                                    class="q-mr-sm"
+                                    size="sm"
+                                />
+                                {{ t('globals.save').toUpperCase() }}
+                            </QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                </QList>
+            </QBtnDropdown>
             <QBtn
+                v-else-if="!$props.goTo && $props.defaultSave"
                 :label="tMobile('globals.save')"
                 ref="saveButtonRef"
                 color="primary"
@@ -318,7 +363,6 @@ watch(formUrl, async () => {
                 @click="onSubmit"
                 :disable="!hasChanges"
                 :title="t('globals.save')"
-                v-if="$props.defaultSave"
             />
             <slot name="moreAfterActions" />
         </QBtnGroup>

src/components/FetchData.vue

@@ -24,7 +24,7 @@ const $props = defineProps({
         default: '',
     },
     limit: {
-        type: String,
+        type: [String, Number],
         default: '',
     },
     params: {

src/components/FormModel.vue

@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
-import { onBeforeRouteLeave } from 'vue-router';
+import { onBeforeRouteLeave, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
@@ -11,7 +11,9 @@ import useNotify from 'src/composables/useNotify.js';
 import SkeletonForm from 'components/ui/SkeletonForm.vue';
 import VnConfirm from './ui/VnConfirm.vue';
 import { tMobile } from 'src/composables/tMobile';
+import { useArrayData } from 'src/composables/useArrayData';
 
+const { push } = useRouter();
 const quasar = useQuasar();
 const state = useState();
 const stateStore = useStateStore();
@@ -74,55 +76,17 @@ const $props = defineProps({
         type: Function,
         default: null,
     },
+    goTo: {
+        type: String,
+        default: '',
+        description: 'It is used for redirect on click "save and continue"',
+    },
 });
 
 const emit = defineEmits(['onFetch', 'onDataSaved']);
 
 const componentIsRendered = ref(false);
-
+const arrayData = useArrayData($props.model);
-onMounted(async () => {
-    originalData.value = $props.formInitialData;
-    nextTick(() => {
-        componentIsRendered.value = true;
-    });
-
-    // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
-    state.set($props.model, $props.formInitialData);
-    if ($props.autoLoad && !$props.formInitialData) {
-        await fetch();
-    }
-
-    // Si así se desea disparamos el watcher del form después de 100ms, asi darle tiempo de que se haya cargado la data inicial
-    // para evitar que detecte cambios cuando es data inicial default
-    if ($props.observeFormChanges) {
-        setTimeout(() => {
-            startFormWatcher();
-        }, 100);
-    }
-});
-
-onBeforeRouteLeave((to, from, next) => {
-    if (hasChanges.value && $props.observeFormChanges)
-        quasar.dialog({
-            component: VnConfirm,
-            componentProps: {
-                title: t('Unsaved changes will be lost'),
-                message: t('Are you sure exit without saving?'),
-                promise: () => next(),
-            },
-        });
-    else next();
-});
-
-onUnmounted(() => {
-    // Restauramos los datos originales en el store si se realizaron cambios en el formulario pero no se guardaron, evitando modificaciones erróneas.
-    if (hasChanges.value) {
-        state.set($props.model, originalData.value);
-        return;
-    }
-    if ($props.clearStoreOnUnmount) state.unset($props.model);
-});
-
 const isLoading = ref(false);
 // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
 const isResetting = ref(false);
@@ -143,29 +107,72 @@ const defaultButtons = computed(() => ({
     },
     ...$props.defaultButtons,
 }));
-const startFormWatcher = () => {
+
+onMounted(async () => {
+    originalData.value = JSON.parse(JSON.stringify($props.formInitialData ?? {}));
+
+    nextTick(() => (componentIsRendered.value = true));
+
+    // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
+    state.set($props.model, $props.formInitialData);
+
+    if ($props.autoLoad && !$props.formInitialData && $props.url) await fetch();
+    else if (arrayData.store.data) updateAndEmit(arrayData.store.data, 'onFetch');
+
+    if ($props.observeFormChanges) {
+        watch(
+            () => formData.value,
+            (newVal, oldVal) => {
+                if (!oldVal) return;
+                hasChanges.value =
+                    !isResetting.value &&
+                    JSON.stringify(newVal) !== JSON.stringify(originalData.value);
+                isResetting.value = false;
+            },
+            { deep: true }
+        );
+    }
+});
+
+if (!$props.url)
     watch(
-        () => formData.value,
+        () => arrayData.store.data,
-        (val) => {
+        (val) => updateAndEmit(val, 'onFetch')
-            hasChanges.value = !isResetting.value && val;
-            isResetting.value = false;
-        },
-        { deep: true }
     );
-};
+
+watch(formUrl, async () => {
+    originalData.value = null;
+    reset();
+    await fetch();
+});
+
+onBeforeRouteLeave((to, from, next) => {
+    if (hasChanges.value && $props.observeFormChanges)
+        quasar.dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('Unsaved changes will be lost'),
+                message: t('Are you sure exit without saving?'),
+                promise: () => next(),
+            },
+        });
+    else next();
+});
+
+onUnmounted(() => {
+    // Restauramos los datos originales en el store si se realizaron cambios en el formulario pero no se guardaron, evitando modificaciones erróneas.
+    if (hasChanges.value) return state.set($props.model, originalData.value);
+    if ($props.clearStoreOnUnmount) state.unset($props.model);
+});
 
 async function fetch() {
     try {
         let { data } = await axios.get($props.url, {
             params: { filter: JSON.stringify($props.filter) },
         });
-
         if (Array.isArray(data)) data = data[0] ?? {};
 
-        state.set($props.model, data);
+        updateAndEmit(data, 'onFetch');
-        originalData.value = data && JSON.parse(JSON.stringify(data));
-
-        emit('onFetch', state.get($props.model));
     } catch (error) {
         state.set($props.model, {});
         originalData.value = {};
@@ -173,38 +180,39 @@ async function fetch() {
 }
 
 async function save() {
-    if ($props.observeFormChanges && !hasChanges.value) {
+    if ($props.observeFormChanges && !hasChanges.value)
-        notify('globals.noChanges', 'negative');
+        return notify('globals.noChanges', 'negative');
-        return;
-    }
-    isLoading.value = true;
 
+    isLoading.value = true;
     try {
         const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
+        const method = $props.urlCreate ? 'post' : 'patch';
+        const url =
+            $props.urlCreate || $props.urlUpdate || $props.url || arrayData.store.url;
         let response;
+
         if ($props.saveFn) response = await $props.saveFn(body);
-        else
+        else response = await axios[method](url, body);
-            response = await axios[$props.urlCreate ? 'post' : 'patch'](
+
-                $props.urlCreate || $props.urlUpdate || $props.url,
-                body
-            );
         if ($props.urlCreate) notify('globals.dataCreated', 'positive');
 
-        emit('onDataSaved', formData.value, response?.data);
-        originalData.value = JSON.parse(JSON.stringify(formData.value));
         hasChanges.value = false;
+        isLoading.value = false;
+
+        updateAndEmit(response?.data, 'onDataSaved');
     } catch (err) {
         console.error(err);
         notify('errors.writeRequest', 'negative');
     }
-    isLoading.value = false;
+}
+
+async function saveAndGo() {
+    await save();
+    push({ path: $props.goTo });
 }
 
 function reset() {
-    state.set($props.model, originalData.value);
+    updateAndEmit(originalData.value, 'onFetch');
-    originalData.value = JSON.parse(JSON.stringify(originalData.value));
-
-    emit('onFetch', state.get($props.model));
     if ($props.observeFormChanges) {
         hasChanges.value = false;
         isResetting.value = true;
@@ -226,11 +234,13 @@ function filter(value, update, filterOptions) {
     );
 }
 
-watch(formUrl, async () => {
+function updateAndEmit(val, evt) {
-    originalData.value = null;
+    state.set($props.model, val);
-    reset();
+    originalData.value = val && JSON.parse(JSON.stringify(val));
-    fetch();
+    if (!$props.url) arrayData.store.data = val;
-});
+
+    emit(evt, state.get($props.model));
+}
 
 defineExpose({
     save,
@@ -274,10 +284,42 @@ defineExpose({
                     :disable="!hasChanges"
                     :title="t(defaultButtons.reset.label)"
                 />
+                <QBtnDropdown
+                    v-if="$props.goTo"
+                    @click="saveAndGo"
+                    :label="tMobile('globals.saveAndContinue')"
+                    :title="t('globals.saveAndContinue')"
+                    :disable="!hasChanges"
+                    color="primary"
+                    icon="save"
+                    split
+                >
+                    <QList>
+                        <QItem
+                            clickable
+                            v-close-popup
+                            @click="save"
+                            :title="t('globals.save')"
+                        >
+                            <QItemSection>
+                                <QItemLabel>
+                                    <QIcon
+                                        name="save"
+                                        color="white"
+                                        class="q-mr-sm"
+                                        size="sm"
+                                    />
+                                    {{ t('globals.save').toUpperCase() }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QList>
+                </QBtnDropdown>
                 <QBtn
-                    :label="tMobile(defaultButtons.save.label)"
+                    v-else
-                    :color="defaultButtons.save.color"
+                    :label="tMobile('globals.save')"
-                    :icon="defaultButtons.save.icon"
+                    color="primary"
+                    icon="save"
                     @click="save"
                     :disable="!hasChanges"
                     :title="t(defaultButtons.save.label)"

src/components/common/VnCard.vue

@@ -21,7 +21,7 @@ const props = defineProps({
     searchbarLabel: { type: String, default: '' },
     searchbarInfo: { type: String, default: '' },
     searchCustomRouteRedirect: { type: String, default: undefined },
-    searchRedirect: { type: Boolean, default: false },
+    searchRedirect: { type: Boolean, default: true },
 });
 
 const stateStore = useStateStore();
@@ -44,7 +44,7 @@ onBeforeMount(async () => {
 if (props.baseUrl) {
     onBeforeRouteUpdate(async (to, from) => {
         if (to.params.id !== from.params.id) {
-            arrayData.store.url = `${props.baseUrl}/${route.params.id}`;
+            arrayData.store.url = `${props.baseUrl}/${to.params.id}`;
             await arrayData.fetch({ append: false });
         }
     });

src/components/common/VnDms.vue

@@ -78,6 +78,7 @@ async function save() {
     const body = mapperDms(dms.value);
     const response = await axios.post(getUrl(), body[0], body[1]);
     emit('onDataSaved', body[1].params, response);
+    return response;
 }
 
 function defaultData() {

src/components/common/VnLog.vue

@@ -626,21 +626,6 @@ onUnmounted(() => {
             </QList>
         </div>
     </div>
-    <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
-        <div class="row q-gutter-x-sm">
-            <QBtn
-                flat
-                @click.stop="stateStore.toggleRightDrawer()"
-                round
-                dense
-                icon="menu"
-            >
-                <QTooltip bottom anchor="bottom right">
-                    {{ t('globals.collapseMenu') }}
-                </QTooltip>
-            </QBtn>
-        </div>
-    </Teleport>
     <QDrawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300">
         <QScrollArea class="fit text-grey-8">
             <QList dense>

src/components/common/VnTitle.vue

@@ -1,16 +1,16 @@
 <script setup>
-const $props = defineProps({
+defineProps({
     url: { type: String, default: null },
     text: { type: String, default: null },
     icon: { type: String, default: 'open_in_new' },
 });
 </script>
 <template>
-    <div class="titleBox">
+    <div :class="$q.screen.gt.md ? 'q-pb-lg' : 'q-pb-md'">
         <div class="header-link">
-            <a :href="$props.url" :class="$props.url ? 'link' : 'color-vn-text'">
+            <a :href="url" :class="url ? 'link' : 'color-vn-text'">
-                {{ $props.text }}
+                {{ text }}
-                <QIcon v-if="url" :name="$props.icon" />
+                <QIcon v-if="url" :name="icon" />
             </a>
         </div>
     </div>
@@ -19,7 +19,4 @@ const $props = defineProps({
 a {
     font-size: large;
 }
-.titleBox {
-    padding-bottom: 2%;
-}
 </style>

src/components/ui/CardDescriptor.vue

@@ -5,6 +5,7 @@ import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useState } from 'src/composables/useState';
+import { useRoute } from 'vue-router';
 
 const $props = defineProps({
     url: {
@@ -15,21 +16,21 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
-    module: {
-        type: String,
-        required: true,
-    },
     title: {
         type: String,
         default: '',
     },
     subtitle: {
         type: Number,
-        default: 0,
+        default: null,
     },
     dataKey: {
         type: String,
-        default: '',
+        default: null,
+    },
+    module: {
+        type: String,
+        default: null,
     },
     summary: {
         type: Object,
@@ -40,21 +41,27 @@ const $props = defineProps({
 const state = useState();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
-const arrayData = useArrayData($props.dataKey || $props.module, {
+let arrayData;
-    url: $props.url,
+let store;
-    filter: $props.filter,
+let entity;
-    skip: 0,
-});
-const { store } = arrayData;
-const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
-defineExpose({
+defineExpose({ getData });
-    getData,
+
-});
 onBeforeMount(async () => {
-    await getData();
+    arrayData = useArrayData($props.dataKey, {
-    watch($props, async () => await getData());
+        url: $props.url,
+        filter: $props.filter,
+        skip: 0,
+    });
+    store = arrayData.store;
+    entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
+    // It enables to load data only once if the module is the same as the dataKey
+    if ($props.dataKey !== useRoute().meta.moduleName) await getData();
+    watch(
+        () => [$props.url, $props.filter],
+        async () => await getData()
+    );
 });
 
 async function getData() {
@@ -132,7 +139,7 @@ const emit = defineEmits(['onFetch']);
                     <QItemLabel header class="ellipsis text-h5" :lines="1">
                         <div class="title">
                             <span v-if="$props.title" :title="$props.title">
-                                {{ $props.title }}
+                                {{ entity[title] ?? $props.title }}
                             </span>
                             <slot v-else name="description" :entity="entity">
                                 <span :title="entity.name">

src/css/fonts/icon.svg

@@ -51,7 +51,7 @@
 <glyph unicode="&#xe92a;" glyph-name="agency" d="M789.333 264.533c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4 102.4 46.933 102.4 102.4c0 59.733-46.933 102.4-102.4 102.4zM789.333 110.933c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2 51.2-21.333 51.2-51.2c0-25.6-25.6-51.2-51.2-51.2zM251.733 264.533c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4c55.467 0 102.4 46.933 102.4 102.4 0 59.733-46.933 102.4-102.4 102.4zM251.733 110.933c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2c29.867 0 51.2-21.333 51.2-51.2 0-25.6-25.6-51.2-51.2-51.2zM1006.933 537.6l-196.267 192c-12.8 12.8-29.867 17.067-46.933 17.067h-98.133v38.4c0 25.6-21.333 51.2-51.2 51.2h-563.2c-29.867 0-51.2-21.333-51.2-51.2v-554.667c0-29.867 25.6-51.2 51.2-51.2h68.267c8.533 64 64 115.2 132.267 115.2 64 0 123.733-51.2 132.267-115.2h268.8c8.533 64 64 115.2 132.267 115.2s128-51.2 136.533-115.2h51.2c29.867 0 51.2 25.6 51.2 51.2v260.267c0 17.067-8.533 34.133-17.067 46.933zM725.333 682.667c0 4.267 4.267 8.533 8.533 8.533h34.133c0 0 4.267 0 4.267-4.267l153.6-145.067c4.267 0 0-12.8-4.267-12.8h-187.733c-8.533 0-8.533 4.267-8.533 8.533v145.067z" />
 <glyph unicode="&#xe92b;" glyph-name="credit" d="M921.6 849.067h-819.2c-55.467 0-102.4-42.667-102.4-98.133v-601.6c0-55.467 46.933-102.4 102.4-102.4h819.2c55.467 0 102.4 42.667 102.4 102.4v601.6c0 55.467-46.933 98.133-102.4 98.133zM921.6 145.067h-819.2v302.933h819.2v-302.933zM921.6 648.533h-819.2v102.4h819.2v-102.4z" />
 <glyph unicode="&#xe92c;" glyph-name="albaran" d="M878.933 857.6h-217.6c-25.6 59.733-81.067 102.4-149.333 102.4s-123.733-42.667-145.067-102.4h-221.867c-55.467 0-102.4-46.933-102.4-102.4v-716.8c0-55.467 46.933-102.4 102.4-102.4h729.6c55.467 0 102.4 46.933 102.4 102.4v716.8c4.267 55.467-42.667 102.4-98.133 102.4zM512 857.6c29.867 0 51.2-21.333 51.2-51.2s-21.333-51.2-51.2-51.2c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2zM614.4 140.8h-362.667v102.4h366.933v-102.4zM772.267 345.6h-520.533v102.4h520.533v-102.4zM772.267 550.4h-520.533v102.4h520.533v-102.4z" />
-<glyph unicode="&#xe92d;" glyph-name="deaulter" d="M677.973-64c-30.72 35.84-61.867 70.827-91.307 107.52-40.96 51.2-80.64 103.253-121.173 154.88-16.64 21.333-21.76 20.48-30.72-4.693-13.227-36.693-25.6-73.387-40.107-109.653-5.12-12.8-13.227-26.88-24.32-34.56-51.627-34.987-104.107-69.12-157.867-100.693-10.667-6.4-30.72-5.547-41.813 0.853-8.107 4.693-12.373 23.893-11.093 35.84 0.853 8.96 11.093 19.627 19.627 25.6 39.253 26.453 78.933 51.627 119.040 76.8 18.347 11.52 30.293 26.027 35.84 47.787 12.373 48.213 27.307 95.573 39.253 143.36 8.533 33.707 26.88 58.88 56.32 77.227 40.533 25.173 80.64 52.053 120.747 78.507 6.4 4.267 10.24 11.52 15.36 17.493-7.253 2.56-14.933 7.253-22.187 6.827-75.52-6.4-151.467-13.227-226.987-20.48-2.133 0-4.693-0.853-6.827-0.853-22.613-1.707-39.253 10.24-40.96 29.867s12.373 33.707 35.413 35.84c45.227 4.267 90.88 8.96 136.107 12.8 65.707 5.547 131.84 10.667 197.547 15.36 26.027 1.707 53.76-21.76 67.413-55.467 9.813-23.893 5.12-46.080-18.347-65.28-49.92-40.107-100.693-78.933-151.040-118.187-23.040-17.92-23.893-23.467-6.4-46.507 58.453-78.080 116.48-156.587 174.933-234.667 27.307-36.693 25.173-50.773-12.373-75.52-5.12 0-9.813 0-14.080 0zM791.893 649.813c-43.093 1.28-76.373-31.573-77.227-75.52-0.853-44.373 29.44-76.8 72.107-77.653 45.227-1.28 77.653 29.44 78.080 73.813 0.427 45.227-29.44 78.080-72.96 79.36zM671.147 737.707c0-72.107-34.133-136.107-87.467-176.64l-235.52-21.76c-72.107 36.693-122.027 111.787-122.027 198.4 0 122.88 99.84 222.293 222.72 222.293 122.453 0 222.293-99.413 222.293-222.293zM592.213 680.533l-50.347 18.347c-2.133-8.533-5.12-16.213-9.813-22.613-5.12-6.4-10.24-11.947-16.213-17.067-5.973-4.267-12.373-8.107-19.2-11.093s-13.653-4.693-20.053-5.547c-17.92-2.987-33.707-0.427-48.64 6.827s-26.88 18.347-36.693 32.853l76.373 12.373 7.253 32.427-97.28-15.787c-1.28 5.547-2.987 11.093-3.84 16.64l-0.853 4.267 99.413 16.213 7.253 32.427-106.667-17.493c0.853 9.387 2.987 17.493 6.4 26.027 3.84 8.533 8.107 16.213 14.080 23.040 5.547 6.827 12.8 12.373 21.333 17.067s17.92 8.107 28.587 9.813c6.827 1.28 13.227 1.707 20.907 1.28s14.507-1.707 21.333-3.84c6.827-2.133 13.653-5.973 20.053-10.24 5.973-4.693 11.947-11.093 17.493-18.773l38.827 37.973c-13.227 17.92-30.293 31.147-52.053 39.253-21.76 8.533-46.080 10.667-73.387 6.4-19.627-2.987-36.267-9.387-51.2-17.92-14.507-8.533-26.88-19.2-37.547-32-10.667-12.373-18.773-26.027-23.893-40.96-5.547-14.507-8.96-29.867-9.813-45.653l-21.76-3.84-7.253-32.427 29.013 4.693 0.427-2.987c1.28-6.827 2.56-12.8 4.267-18.347l-23.467-3.84-8.107-32.427 43.52 7.253c6.827-13.653 15.787-26.027 26.027-36.693 10.24-11.52 22.187-20.48 35.413-27.733 13.227-7.68 27.307-12.8 42.667-15.787s31.573-3.413 47.36-0.853c12.373 2.133 24.32 5.12 35.84 10.667s22.613 11.52 32.853 19.2c10.24 8.107 18.347 16.64 26.027 26.453 6.827 9.387 12.373 20.48 15.36 32.427z" />
+<glyph unicode="&#xe92d;" glyph-name="defaulter" d="M677.973-64c-30.72 35.84-61.867 70.827-91.307 107.52-40.96 51.2-80.64 103.253-121.173 154.88-16.64 21.333-21.76 20.48-30.72-4.693-13.227-36.693-25.6-73.387-40.107-109.653-5.12-12.8-13.227-26.88-24.32-34.56-51.627-34.987-104.107-69.12-157.867-100.693-10.667-6.4-30.72-5.547-41.813 0.853-8.107 4.693-12.373 23.893-11.093 35.84 0.853 8.96 11.093 19.627 19.627 25.6 39.253 26.453 78.933 51.627 119.040 76.8 18.347 11.52 30.293 26.027 35.84 47.787 12.373 48.213 27.307 95.573 39.253 143.36 8.533 33.707 26.88 58.88 56.32 77.227 40.533 25.173 80.64 52.053 120.747 78.507 6.4 4.267 10.24 11.52 15.36 17.493-7.253 2.56-14.933 7.253-22.187 6.827-75.52-6.4-151.467-13.227-226.987-20.48-2.133 0-4.693-0.853-6.827-0.853-22.613-1.707-39.253 10.24-40.96 29.867s12.373 33.707 35.413 35.84c45.227 4.267 90.88 8.96 136.107 12.8 65.707 5.547 131.84 10.667 197.547 15.36 26.027 1.707 53.76-21.76 67.413-55.467 9.813-23.893 5.12-46.080-18.347-65.28-49.92-40.107-100.693-78.933-151.040-118.187-23.040-17.92-23.893-23.467-6.4-46.507 58.453-78.080 116.48-156.587 174.933-234.667 27.307-36.693 25.173-50.773-12.373-75.52-5.12 0-9.813 0-14.080 0zM791.893 649.813c-43.093 1.28-76.373-31.573-77.227-75.52-0.853-44.373 29.44-76.8 72.107-77.653 45.227-1.28 77.653 29.44 78.080 73.813 0.427 45.227-29.44 78.080-72.96 79.36zM671.147 737.707c0-72.107-34.133-136.107-87.467-176.64l-235.52-21.76c-72.107 36.693-122.027 111.787-122.027 198.4 0 122.88 99.84 222.293 222.72 222.293 122.453 0 222.293-99.413 222.293-222.293zM592.213 680.533l-50.347 18.347c-2.133-8.533-5.12-16.213-9.813-22.613-5.12-6.4-10.24-11.947-16.213-17.067-5.973-4.267-12.373-8.107-19.2-11.093s-13.653-4.693-20.053-5.547c-17.92-2.987-33.707-0.427-48.64 6.827s-26.88 18.347-36.693 32.853l76.373 12.373 7.253 32.427-97.28-15.787c-1.28 5.547-2.987 11.093-3.84 16.64l-0.853 4.267 99.413 16.213 7.253 32.427-106.667-17.493c0.853 9.387 2.987 17.493 6.4 26.027 3.84 8.533 8.107 16.213 14.080 23.040 5.547 6.827 12.8 12.373 21.333 17.067s17.92 8.107 28.587 9.813c6.827 1.28 13.227 1.707 20.907 1.28s14.507-1.707 21.333-3.84c6.827-2.133 13.653-5.973 20.053-10.24 5.973-4.693 11.947-11.093 17.493-18.773l38.827 37.973c-13.227 17.92-30.293 31.147-52.053 39.253-21.76 8.533-46.080 10.667-73.387 6.4-19.627-2.987-36.267-9.387-51.2-17.92-14.507-8.533-26.88-19.2-37.547-32-10.667-12.373-18.773-26.027-23.893-40.96-5.547-14.507-8.96-29.867-9.813-45.653l-21.76-3.84-7.253-32.427 29.013 4.693 0.427-2.987c1.28-6.827 2.56-12.8 4.267-18.347l-23.467-3.84-8.107-32.427 43.52 7.253c6.827-13.653 15.787-26.027 26.027-36.693 10.24-11.52 22.187-20.48 35.413-27.733 13.227-7.68 27.307-12.8 42.667-15.787s31.573-3.413 47.36-0.853c12.373 2.133 24.32 5.12 35.84 10.667s22.613 11.52 32.853 19.2c10.24 8.107 18.347 16.64 26.027 26.453 6.827 9.387 12.373 20.48 15.36 32.427z" />
 <glyph unicode="&#xe92e;" glyph-name="deletedTicket" d="M160.672 85.696h693.248v639.776c0 0-2.016 234.528-349.696 234.528s-343.552-234.528-343.552-234.528v-639.776zM291.328 652.704h170.976v152.256h102.336v-152.256h171.008v-102.336h-171.008v-356.96h-102.336v356.96h-170.976v102.336zM64 61.056v-123.456h899.008v123.456h-899.008z" />
 <glyph unicode="&#xe92f;" glyph-name="deleteline" d="M354.133 192l-98.133 98.133 157.867 153.6-157.867 157.867 98.133 102.4 157.867-157.867 157.867 153.6 98.133-98.133-157.867-157.867 157.867-153.6-98.133-98.133-157.867 157.867-157.867-157.867zM780.8 507.733l-64-64 59.733-55.467h247.467v119.467h-243.2zM307.2 443.733l-64 64h-243.2v-119.467h251.733l55.467 55.467z" />
 <glyph unicode="&#xe930;" glyph-name="delivery" d="M789.333 264.533c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4 102.4 46.933 102.4 102.4c0 59.733-46.933 102.4-102.4 102.4zM789.333 110.933c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2 51.2-21.333 51.2-51.2c0-25.6-25.6-51.2-51.2-51.2zM251.733 264.533c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4c55.467 0 102.4 46.933 102.4 102.4 0 59.733-46.933 102.4-102.4 102.4zM251.733 110.933c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2c29.867 0 51.2-21.333 51.2-51.2 0-25.6-25.6-51.2-51.2-51.2zM1006.933 537.6l-196.267 192c-12.8 12.8-29.867 17.067-46.933 17.067h-98.133v38.4c0 25.6-21.333 51.2-51.2 51.2h-563.2c-29.867 0-51.2-21.333-51.2-51.2v-554.667c0-29.867 25.6-51.2 51.2-51.2h68.267c8.533 64 64 115.2 132.267 115.2 64 0 123.733-51.2 132.267-115.2h268.8c8.533 64 64 115.2 132.267 115.2s128-51.2 136.533-115.2h51.2c29.867 0 51.2 25.6 51.2 51.2v260.267c0 17.067-8.533 34.133-17.067 46.933zM725.333 682.667c0 4.267 4.267 8.533 8.533 8.533h34.133c0 0 4.267 0 4.267-4.267l153.6-145.067c4.267 0 0-12.8-4.267-12.8h-187.733c-8.533 0-8.533 4.267-8.533 8.533v145.067zM311.467 597.333c0 46.933 29.867 85.333 59.733 93.867 4.267 0 4.267 0 8.533 0l98.133 12.8v-51.2c0-46.933-29.867-85.333-59.733-93.867-4.267 0-4.267 0-8.533 0l-98.133-17.067v55.467zM311.467 516.267l46.933 8.533c17.067 4.267 29.867-17.067 29.867-38.4l4.267-29.867-51.2-4.267c-17.067-4.267-29.867 12.8-29.867 38.4v25.6zM149.333 597.333v51.2l85.333 12.8c34.133 4.267 55.467-25.6 55.467-72.533v-51.2l-85.333-12.8c-34.133 0-59.733 29.867-55.467 72.533zM285.867 512v-38.4c0-34.133-21.333-64-42.667-68.267h-4.267l-72.533-8.533v38.4c0 34.133 21.333 64 42.667 68.267h4.267l72.533 8.533z" />

src/css/icons.scss

@@ -1,435 +1,436 @@
 @font-face {
-  font-family: 'icon';
+    font-family: 'icon';
-  src:  url('fonts/icon.eot?1om04h');
+    src: url('fonts/icon.eot?1om04h');
-  src:  url('fonts/icon.eot?1om04h#iefix') format('embedded-opentype'),
+    src: url('fonts/icon.eot?1om04h#iefix') format('embedded-opentype'),
-    url('fonts/icon.ttf?1om04h') format('truetype'),
+        url('fonts/icon.ttf?1om04h') format('truetype'),
-    url('fonts/icon.woff?1om04h') format('woff'),
+        url('fonts/icon.woff?1om04h') format('woff'),
-    url('fonts/icon.svg?1om04h#icon') format('svg');
+        url('fonts/icon.svg?1om04h#icon') format('svg');
-  font-weight: normal;
+    font-weight: normal;
-  font-style: normal;
+    font-style: normal;
-  font-display: block;
+    font-display: block;
 }
 
-[class^="icon-"], [class*=" icon-"] {
+[class^='icon-'],
-  /* use !important to prevent issues with browser extensions that change fonts */
+[class*=' icon-'] {
-  font-family: 'icon' !important;
+    /* use !important to prevent issues with browser extensions that change fonts */
-  speak: never;
+    font-family: 'icon' !important;
-  font-style: normal;
+    speak: never;
-  font-weight: normal;
+    font-style: normal;
-  font-variant: normal;
+    font-weight: normal;
-  text-transform: none;
+    font-variant: normal;
-  line-height: 1;
+    text-transform: none;
+    line-height: 1;
 
-  /* Better Font Rendering =========== */
+    /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .icon-100:before {
-  content: "\e901";
+    content: '\e901';
 }
 .icon-Client_unpaid:before {
-  content: "\e98c";
+    content: '\e98c';
 }
 .icon-History:before {
-  content: "\e902";
+    content: '\e902';
 }
 .icon-Person:before {
-  content: "\e903";
+    content: '\e903';
 }
 .icon-accessory:before {
-  content: "\e904";
+    content: '\e904';
 }
 .icon-account:before {
-  content: "\e905";
+    content: '\e905';
 }
 .icon-actions:before {
-  content: "\e907";
+    content: '\e907';
 }
 .icon-addperson:before {
-  content: "\e908";
+    content: '\e908';
 }
 .icon-agency:before {
-  content: "\e92a";
+    content: '\e92a';
 }
 .icon-agency-term:before {
-  content: "\e909";
+    content: '\e909';
 }
 .icon-albaran:before {
-  content: "\e92c";
+    content: '\e92c';
 }
 .icon-anonymous:before {
-  content: "\e90b";
+    content: '\e90b';
 }
 .icon-apps:before {
-  content: "\e90c";
+    content: '\e90c';
 }
 .icon-artificial:before {
-  content: "\e90d";
+    content: '\e90d';
 }
 .icon-attach:before {
-  content: "\e90e";
+    content: '\e90e';
 }
 .icon-barcode:before {
-  content: "\e90f";
+    content: '\e90f';
 }
 .icon-basket:before {
-  content: "\e910";
+    content: '\e910';
 }
 .icon-basketadd:before {
-  content: "\e911";
+    content: '\e911';
 }
 .icon-bin:before {
-  content: "\e913";
+    content: '\e913';
 }
 .icon-botanical:before {
-  content: "\e914";
+    content: '\e914';
 }
 .icon-bucket:before {
-  content: "\e915";
+    content: '\e915';
 }
 .icon-buscaman:before {
-  content: "\e916";
+    content: '\e916';
 }
 .icon-buyrequest:before {
-  content: "\e917";
+    content: '\e917';
 }
 .icon-calc_volum .path1:before {
-  content: "\e918";
+    content: '\e918';
-  color: rgb(0, 0, 0);
+    color: rgb(0, 0, 0);
 }
 .icon-calc_volum .path2:before {
-  content: "\e919";
+    content: '\e919';
-  margin-left: -1em;
+    margin-left: -1em;
-  color: rgb(0, 0, 0);
+    color: rgb(0, 0, 0);
 }
 .icon-calc_volum .path3:before {
-  content: "\e91c";
+    content: '\e91c';
-  margin-left: -1em;
+    margin-left: -1em;
-  color: rgb(0, 0, 0);
+    color: rgb(0, 0, 0);
 }
 .icon-calc_volum .path4:before {
-  content: "\e91d";
+    content: '\e91d';
-  margin-left: -1em;
+    margin-left: -1em;
-  color: rgb(0, 0, 0);
+    color: rgb(0, 0, 0);
 }
 .icon-calc_volum .path5:before {
-  content: "\e91e";
+    content: '\e91e';
-  margin-left: -1em;
+    margin-left: -1em;
-  color: rgb(0, 0, 0);
+    color: rgb(0, 0, 0);
 }
 .icon-calc_volum .path6:before {
-  content: "\e91f";
+    content: '\e91f';
-  margin-left: -1em;
+    margin-left: -1em;
-  color: rgb(255, 255, 255);
+    color: rgb(255, 255, 255);
 }
 .icon-calendar:before {
-  content: "\e920";
+    content: '\e920';
 }
 .icon-catalog:before {
-  content: "\e921";
+    content: '\e921';
 }
 .icon-claims:before {
-  content: "\e922";
+    content: '\e922';
 }
 .icon-client:before {
-  content: "\e923";
+    content: '\e923';
 }
 .icon-clone:before {
-  content: "\e924";
+    content: '\e924';
 }
 .icon-columnadd:before {
-  content: "\e925";
+    content: '\e925';
 }
 .icon-columndelete:before {
-  content: "\e926";
+    content: '\e926';
 }
 .icon-components:before {
-  content: "\e927";
+    content: '\e927';
 }
 .icon-consignatarios:before {
-  content: "\e928";
+    content: '\e928';
 }
 .icon-control:before {
-  content: "\e929";
+    content: '\e929';
 }
 .icon-credit:before {
-  content: "\e92b";
+    content: '\e92b';
 }
-.icon-deaulter:before {
+.icon-defaulter:before {
-  content: "\e92d";
+    content: '\e92d';
 }
 .icon-deletedTicket:before {
-  content: "\e92e";
+    content: '\e92e';
 }
 .icon-deleteline:before {
-  content: "\e92f";
+    content: '\e92f';
 }
 .icon-delivery:before {
-  content: "\e930";
+    content: '\e930';
 }
 .icon-deliveryprices:before {
-  content: "\e932";
+    content: '\e932';
 }
 .icon-details:before {
-  content: "\e933";
+    content: '\e933';
 }
 .icon-dfiscales:before {
-  content: "\e934";
+    content: '\e934';
 }
 .icon-disabled:before {
-  content: "\e935";
+    content: '\e935';
 }
 .icon-doc:before {
-  content: "\e936";
+    content: '\e936';
 }
 .icon-entry:before {
-  content: "\e937";
+    content: '\e937';
 }
 .icon-exit:before {
-  content: "\e938";
+    content: '\e938';
 }
 .icon-eye:before {
-  content: "\e939";
+    content: '\e939';
 }
 .icon-fixedPrice:before {
-  content: "\e93a";
+    content: '\e93a';
 }
 .icon-flower:before {
-  content: "\e93b";
+    content: '\e93b';
 }
 .icon-frozen:before {
-  content: "\e93c";
+    content: '\e93c';
 }
 .icon-fruit:before {
-  content: "\e93d";
+    content: '\e93d';
 }
 .icon-funeral:before {
-  content: "\e93e";
+    content: '\e93e';
 }
 .icon-grafana:before {
-  content: "\e906";
+    content: '\e906';
 }
 .icon-greenery:before {
-  content: "\e93f";
+    content: '\e93f';
 }
 .icon-greuge:before {
-  content: "\e940";
+    content: '\e940';
 }
 .icon-grid:before {
-  content: "\e941";
+    content: '\e941';
 }
 .icon-handmade:before {
-  content: "\e942";
+    content: '\e942';
 }
 .icon-handmadeArtificial:before {
-  content: "\e943";
+    content: '\e943';
 }
 .icon-headercol:before {
-  content: "\e945";
+    content: '\e945';
 }
 .icon-info:before {
-  content: "\e946";
+    content: '\e946';
 }
 .icon-inventory:before {
-  content: "\e947";
+    content: '\e947';
 }
 .icon-invoice:before {
-  content: "\e968";
+    content: '\e968';
-  color: #5f5f5f;
+    color: #5f5f5f;
 }
 .icon-invoice-in:before {
-  content: "\e949";
+    content: '\e949';
 }
 .icon-invoice-in-create:before {
-  content: "\e94a";
+    content: '\e94a';
 }
 .icon-invoice-out:before {
-  content: "\e94b";
+    content: '\e94b';
 }
 .icon-isTooLittle:before {
-  content: "\e94c";
+    content: '\e94c';
 }
 .icon-item:before {
-  content: "\e94d";
+    content: '\e94d';
 }
 .icon-languaje:before {
-  content: "\e970";
+    content: '\e970';
 }
 .icon-lines:before {
-  content: "\e94e";
+    content: '\e94e';
 }
 .icon-linesprepaired:before {
-  content: "\e94f";
+    content: '\e94f';
 }
 .icon-link-to-corrected:before {
-  content: "\e931";
+    content: '\e931';
 }
 .icon-link-to-correcting:before {
-  content: "\e944";
+    content: '\e944';
 }
 .icon-logout:before {
-  content: "\e973";
+    content: '\e973';
 }
 .icon-mana:before {
-  content: "\e950";
+    content: '\e950';
 }
 .icon-mandatory:before {
-  content: "\e951";
+    content: '\e951';
 }
 .icon-net:before {
-  content: "\e952";
+    content: '\e952';
 }
 .icon-newalbaran:before {
-  content: "\e954";
+    content: '\e954';
 }
 .icon-niche:before {
-  content: "\e955";
+    content: '\e955';
 }
 .icon-no036:before {
-  content: "\e956";
+    content: '\e956';
 }
 .icon-noPayMethod:before {
-  content: "\e958";
+    content: '\e958';
 }
 .icon-notes:before {
-  content: "\e959";
+    content: '\e959';
 }
 .icon-noweb:before {
-  content: "\e95a";
+    content: '\e95a';
 }
 .icon-onlinepayment:before {
-  content: "\e95b";
+    content: '\e95b';
 }
 .icon-package:before {
-  content: "\e95c";
+    content: '\e95c';
 }
 .icon-payment:before {
-  content: "\e95d";
+    content: '\e95d';
 }
 .icon-pbx:before {
-  content: "\e95e";
+    content: '\e95e';
 }
 .icon-pets:before {
-  content: "\e95f";
+    content: '\e95f';
 }
 .icon-photo:before {
-  content: "\e960";
+    content: '\e960';
 }
 .icon-plant:before {
-  content: "\e961";
+    content: '\e961';
 }
 .icon-polizon:before {
-  content: "\e962";
+    content: '\e962';
 }
 .icon-preserved:before {
-  content: "\e963";
+    content: '\e963';
 }
 .icon-recovery:before {
-  content: "\e964";
+    content: '\e964';
 }
 .icon-regentry:before {
-  content: "\e965";
+    content: '\e965';
 }
 .icon-reserva:before {
-  content: "\e966";
+    content: '\e966';
 }
 .icon-revision:before {
-  content: "\e967";
+    content: '\e967';
 }
 .icon-risk:before {
-  content: "\e969";
+    content: '\e969';
 }
 .icon-saysimple:before {
-  content: "\e912";
+    content: '\e912';
 }
 .icon-services:before {
-  content: "\e96a";
+    content: '\e96a';
 }
 .icon-settings:before {
-  content: "\e96b";
+    content: '\e96b';
 }
 .icon-shipment:before {
-  content: "\e96c";
+    content: '\e96c';
 }
 .icon-sign:before {
-  content: "\e90a";
+    content: '\e90a';
 }
 .icon-sms:before {
-  content: "\e96e";
+    content: '\e96e';
 }
 .icon-solclaim:before {
-  content: "\e96f";
+    content: '\e96f';
 }
 .icon-solunion:before {
-  content: "\e971";
+    content: '\e971';
 }
 .icon-splitline:before {
-  content: "\e972";
+    content: '\e972';
 }
 .icon-splur:before {
-  content: "\e974";
+    content: '\e974';
 }
 .icon-stowaway:before {
-  content: "\e975";
+    content: '\e975';
 }
 .icon-supplier:before {
-  content: "\e976";
+    content: '\e976';
 }
 .icon-supplierfalse:before {
-  content: "\e977";
+    content: '\e977';
 }
 .icon-tags:before {
-  content: "\e979";
+    content: '\e979';
 }
 .icon-tax:before {
-  content: "\e97a";
+    content: '\e97a';
 }
 .icon-thermometer:before {
-  content: "\e97b";
+    content: '\e97b';
 }
 .icon-ticket:before {
-  content: "\e97c";
+    content: '\e97c';
 }
 .icon-ticketAdd:before {
-  content: "\e97e";
+    content: '\e97e';
 }
 .icon-traceability:before {
-  content: "\e97f";
+    content: '\e97f';
 }
 .icon-transaction:before {
-  content: "\e91b";
+    content: '\e91b';
 }
 .icon-treatments:before {
-  content: "\e980";
+    content: '\e980';
 }
 .icon-trolley:before {
-  content: "\e900";
+    content: '\e900';
 }
 .icon-troncales:before {
-  content: "\e982";
+    content: '\e982';
 }
 .icon-unavailable:before {
-  content: "\e983";
+    content: '\e983';
 }
 .icon-visible_columns_Icono:before {
-  content: "\e984";
+    content: '\e984';
 }
 .icon-volume:before {
-  content: "\e985";
+    content: '\e985';
 }
 .icon-wand:before {
-  content: "\e986";
+    content: '\e986';
 }
 .icon-web:before {
-  content: "\e987";
+    content: '\e987';
 }
 .icon-wiki:before {
-  content: "\e989";
+    content: '\e989';
 }
 .icon-worker:before {
-  content: "\e98a";
+    content: '\e98a';
 }
 .icon-zone:before {
-  content: "\e98b";
+    content: '\e98b';
 }

src/i18n/locale/en.yml

@@ -24,6 +24,7 @@ globals:
     create: Create
     edit: Edit
     save: Save
+    saveAndContinue: Save and continue
     remove: Remove
     reset: Reset
     close: Close
@@ -106,6 +107,7 @@ globals:
     now: Now
     name: Name
     new: New
+    comment: Comment
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred

src/i18n/locale/es.yml

@@ -24,6 +24,7 @@ globals:
     create: Crear
     edit: Modificar
     save: Guardar
+    saveAndContinue: Guardar y continuar
     remove: Eliminar
     reset: Restaurar
     close: Cerrar
@@ -106,6 +107,7 @@ globals:
     now: Ahora
     name: Nombre
     new: Nuevo
+    comment: Comentario
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -9,18 +9,21 @@ import { downloadFile } from 'src/composables/downloadFile';
 import FormModel from 'components/FormModel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'src/components/FetchData.vue';
-import VnRow from 'src/components/ui/VnRow.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const quasar = useQuasar();
-const route = useRoute();
 const { t } = useI18n();
 
 const dms = ref({});
+const route = useRoute();
 const editDownloadDisabled = ref(false);
-const arrayData = useArrayData('InvoiceIn');
+const invoiceIn = computed(() => useArrayData(route.meta.moduleName).store.data);
-const invoiceIn = computed(() => arrayData.store.data);
 const userConfig = ref(null);
+const invoiceId = computed(() => +route.params.id);
 
+const expenses = ref([]);
 const currencies = ref([]);
 const currenciesRef = ref();
 const companies = ref([]);
@@ -31,14 +34,11 @@ const warehouses = ref([]);
 const warehousesRef = ref();
 const allowTypesRef = ref();
 const allowedContentTypes = ref([]);
+const sageWithholdings = ref([]);
 const inputFileRef = ref();
 const editDmsRef = ref();
 const createDmsRef = ref();
 
-const requiredFieldRule = (val) => val || t('globals.requiredField');
-const dateMask = '####-##-##';
-const fillMask = '_';
-
 async function checkFileExists(dmsId) {
     if (!dmsId) return;
     try {
@@ -173,11 +173,17 @@ async function upsert() {
         @on-fetch="(data) => (userConfig = data)"
         auto-load
     />
+    <FetchData url="Expenses" auto-load @on-fetch="(data) => (expenses = data)" />
+    <FetchData
+        url="SageWithholdings"
+        auto-load
+        @on-fetch="(data) => (sageWithholdings = data)"
+    />
     <FormModel
-        v-if="invoiceIn"
+        model="InvoiceIn"
-        :url="`InvoiceIns/${route.params.id}`"
+        :go-to="`/invoice-in/${invoiceId}/vat`"
-        model="invoiceIn"
+        auto-load
-        :auto-load="true"
+        :url-update="`InvoiceIns/${invoiceId}/updateInvoiceIn`"
     >
         <template #form="{ data }">
             <VnRow>
@@ -201,7 +207,7 @@ async function upsert() {
                         </QItem>
                     </template>
                 </VnSelect>
-                <QInput
+                <VnInput
                     clearable
                     clear-icon="close"
                     :label="t('Supplier ref')"
@@ -209,69 +215,29 @@ async function upsert() {
                 />
             </VnRow>
             <VnRow>
-                <QInput
+                <VnInputDate :label="t('Expedition date')" v-model="data.issued" />
-                    :label="t('Expedition date')"
+                <VnInputDate
-                    v-model="data.issued"
-                    :mask="dateMask"
-                >
-                    <template #append>
-                        <QIcon name="event" class="cursor-pointer" :fill-mask="fillMask">
-                            <QPopupProxy
-                                cover
-                                transition-show="scale"
-                                transition-hide="scale"
-                            >
-                                <QDate v-model="data.issued">
-                                    <div class="row items-center justify-end">
-                                        <QBtn
-                                            v-close-popup
-                                            label="Close"
-                                            color="primary"
-                                            flat
-                                        />
-                                    </div>
-                                </QDate>
-                            </QPopupProxy>
-                        </QIcon>
-                    </template>
-                </QInput>
-                <QInput
                     :label="t('Operation date')"
                     v-model="data.operated"
-                    :mask="dateMask"
-                    :fill-mask="fillMask"
                     autofocus
-                >
+                />
-                    <template #append>
-                        <QIcon name="event" class="cursor-pointer">
-                            <QPopupProxy
-                                cover
-                                transition-show="scale"
-                                transition-hide="scale"
-                            >
-                                <QDate v-model="data.operated" :mask="dateMask">
-                                    <div class="row items-center justify-end">
-                                        <QBtn
-                                            v-close-popup
-                                            label="Close"
-                                            color="primary"
-                                            flat
-                                        />
-                                    </div>
-                                </QDate>
-                            </QPopupProxy>
-                        </QIcon>
-                    </template>
-                </QInput>
             </VnRow>
             <VnRow>
-                <QInput
+                <VnSelect
                     :label="t('Undeductible VAT')"
                     v-model="data.deductibleExpenseFk"
-                    clearable
+                    :options="expenses"
-                    clear-icon="close"
+                    option-value="id"
-                />
+                    option-label="id"
-                <QInput
+                    :filter-options="['id', 'name']"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            {{ `${scope.opt.id}: ${scope.opt.name}` }}
+                        </QItem>
+                    </template>
+                </VnSelect>
+                <VnInput
                     :label="t('Document')"
                     v-model="data.dmsFk"
                     clearable
@@ -316,67 +282,11 @@ async function upsert() {
                             <QTooltip>{{ t('Create document') }}</QTooltip>
                         </QBtn>
                     </template>
-                </QInput>
+                </VnInput>
             </VnRow>
             <VnRow>
-                <QInput
+                <VnInputDate :label="t('Entry date')" v-model="data.bookEntried" />
-                    :label="t('Entry date')"
+                <VnInputDate :label="t('Accounted date')" v-model="data.booked" />
-                    v-model="data.bookEntried"
-                    clearable
-                    clear-icon="close"
-                    :mask="dateMask"
-                    :fill-mask="fillMask"
-                >
-                    <template #append>
-                        <QIcon name="event" class="cursor-pointer">
-                            <QPopupProxy
-                                cover
-                                transition-show="scale"
-                                transition-hide="scale"
-                            >
-                                <QDate v-model="data.bookEntried" :mask="dateMask">
-                                    <div class="row items-center justify-end">
-                                        <QBtn
-                                            v-close-popup
-                                            label="Close"
-                                            color="primary"
-                                            flat
-                                        />
-                                    </div>
-                                </QDate>
-                            </QPopupProxy>
-                        </QIcon>
-                    </template>
-                </QInput>
-                <QInput
-                    :label="t('Accounted date')"
-                    v-model="data.booked"
-                    clearable
-                    clear-icon="close"
-                    :mask="dateMask"
-                    :fill-mask="fillMask"
-                >
-                    <template #append>
-                        <QIcon name="event" class="cursor-pointer">
-                            <QPopupProxy
-                                cover
-                                transition-show="scale"
-                                transition-hide="scale"
-                            >
-                                <QDate v-model="data.booked" :mask="maskDate">
-                                    <div class="row items-center justify-end">
-                                        <QBtn
-                                            v-close-popup
-                                            label="Close"
-                                            color="primary"
-                                            flat
-                                        />
-                                    </div>
-                                </QDate>
-                            </QPopupProxy>
-                        </QIcon>
-                    </template>
-                </QInput>
             </VnRow>
             <VnRow>
                 <VnSelect
@@ -386,6 +296,7 @@ async function upsert() {
                     option-value="id"
                     option-label="code"
                 />
+
                 <VnSelect
                     v-if="companiesRef"
                     :label="t('Company')"
@@ -395,7 +306,15 @@ async function upsert() {
                     option-label="code"
                 />
             </VnRow>
-            <QCheckbox :label="t('invoiceIn.summary.booked')" v-model="data.isBooked" />
+            <VnRow>
+                <VnSelect
+                    :label="t('invoiceIn.summary.sage')"
+                    v-model="data.withholdingSageFk"
+                    :options="sageWithholdings"
+                    option-value="id"
+                    option-label="withholding"
+                />
+            </VnRow>
         </template>
     </FormModel>
     <QDialog ref="editDmsRef">
@@ -411,7 +330,7 @@ async function upsert() {
             </QCardSection>
             <QCardSection class="q-py-none">
                 <QItem>
-                    <QInput
+                    <VnInput
                         class="full-width q-pa-xs"
                         :label="t('Reference')"
                         v-model="dms.reference"
@@ -420,45 +339,45 @@ async function upsert() {
                     />
                     <VnSelect
                         class="full-width q-pa-xs"
-                        :label="`${t('Company')}*`"
+                        :label="t('Company')"
                         v-model="dms.companyId"
                         :options="companies"
                         option-value="id"
                         option-label="code"
-                        :rules="[requiredFieldRule]"
+                        :required="true"
                     />
                 </QItem>
                 <QItem>
                     <VnSelect
                         class="full-width q-pa-xs"
-                        :label="`${t('Warehouse')}*`"
+                        :label="t('Warehouse')"
                         v-model="dms.warehouseId"
                         :options="warehouses"
                         option-value="id"
                         option-label="name"
-                        :rules="[requiredFieldRule]"
+                        :required="true"
                     />
                     <VnSelect
                         class="full-width q-pa-xs"
-                        :label="`${t('Type')}*`"
+                        :label="t('Type')"
                         v-model="dms.dmsTypeId"
                         :options="dmsTypes"
                         option-value="id"
                         option-label="name"
-                        :rules="[requiredFieldRule]"
+                        :required="true"
                     />
                 </QItem>
                 <QItem>
-                    <QInput
+                    <VnInput
-                        class="full-width q-pa-xs"
+                        :label="t('Description')"
+                        v-model="dms.description"
+                        :required="true"
                         type="textarea"
+                        class="full-width q-pa-xs"
                         size="lg"
                         autogrow
-                        :label="`${t('Description')}*`"
-                        v-model="dms.description"
                         clearable
                         clear-icon="close"
-                        :rules="[(val) => val.length || t('Required field')]"
                     />
                 </QItem>
                 <QItem>
@@ -522,7 +441,7 @@ async function upsert() {
             </QCardSection>
             <QCardSection class="q-pb-none">
                 <QItem>
-                    <QInput
+                    <VnInput
                         class="full-width q-pa-xs"
                         :label="t('Reference')"
                         v-model="dms.reference"
@@ -534,7 +453,7 @@ async function upsert() {
                         :options="companies"
                         option-value="id"
                         option-label="code"
-                        :rules="[requiredFieldRule]"
+                        :required="true"
                     />
                 </QItem>
                 <QItem>
@@ -545,7 +464,7 @@ async function upsert() {
                         :options="warehouses"
                         option-value="id"
                         option-label="name"
-                        :rules="[requiredFieldRule]"
+                        :required="true"
                     />
                     <VnSelect
                         class="full-width q-pa-xs"
@@ -554,11 +473,11 @@ async function upsert() {
                         :options="dmsTypes"
                         option-value="id"
                         option-label="name"
-                        :rules="[requiredFieldRule]"
+                        :required="true"
                     />
                 </QItem>
                 <QItem>
-                    <QInput
+                    <VnInput
                         class="full-width q-pa-xs"
                         type="textarea"
                         size="lg"

src/pages/InvoiceIn/Card/InvoiceInCorrective.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useCapitalize } from 'src/composables/useCapitalize';
@@ -8,12 +8,11 @@ import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
-const router = useRouter();
+const { push, currentRoute } = useRouter();
-const route = useRoute();
 const { t } = useI18n();
 
-const invoiceId = route.params.id;
+const invoiceId = +currentRoute.value.params.id;
-const arrayData = useArrayData('InvoiceIn');
+const arrayData = useArrayData(currentRoute.value.meta.moduleName);
 const invoiceIn = computed(() => arrayData.store.data);
 const invoiceInCorrectionRef = ref();
 const filter = {
@@ -74,7 +73,7 @@ const rowsSelected = ref([]);
 
 const requiredFieldRule = (val) => val || t('globals.requiredField');
 
-const onSave = (data) => data.deletes && router.push(`/invoice-in/${invoiceId}/summary`);
+const onSave = (data) => data.deletes && push(`/invoice-in/${invoiceId}/summary`);
 </script>
 <template>
     <FetchData

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -1,12 +1,11 @@
 <script setup>
-import { ref, reactive, computed, onBeforeMount, watch } from 'vue';
+import { ref, reactive, computed, onBeforeMount } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
 import { toCurrency, toDate } from 'src/filters';
 import { useRole } from 'src/composables/useRole';
-import useCardDescription from 'src/composables/useCardDescription';
 import { downloadFile } from 'src/composables/downloadFile';
 import { useArrayData } from 'src/composables/useArrayData';
 import { usePrintService } from 'composables/usePrintService';
@@ -17,27 +16,23 @@ import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import { useCapitalize } from 'src/composables/useCapitalize';
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
+import InvoiceInToBook from '../InvoiceInToBook.vue';
 
-const $props = defineProps({
+const $props = defineProps({ id: { type: Number, default: null } });
-    id: {
+
-        type: Number,
+const { push, currentRoute } = useRouter();
-        required: false,
-        default: null,
-    },
-});
 
-const route = useRoute();
-const router = useRouter();
 const quasar = useQuasar();
 const { hasAny } = useRole();
 const { t } = useI18n();
 const { openReport, sendEmail } = usePrintService();
-const arrayData = useArrayData('InvoiceIn');
+const { store } = useArrayData(currentRoute.value.meta.moduleName);
 
-const invoiceIn = computed(() => arrayData.store.data);
+const invoiceIn = computed(() => store.data);
 const cardDescriptorRef = ref();
 const correctionDialogRef = ref();
-const entityId = computed(() => $props.id || +route.params.id);
+const entityId = computed(() => $props.id || +currentRoute.value.params.id);
 const totalAmount = ref();
 const currentAction = ref();
 const config = ref();
@@ -45,28 +40,21 @@ const cplusRectificationTypes = ref([]);
 const siiTypeInvoiceOuts = ref([]);
 const invoiceCorrectionTypes = ref([]);
 const actions = {
-    book: {
+    unbook: {
-        title: 'Are you sure you want to book this invoice?',
+        title: t('assertAction', { action: t('unbook') }),
-        cb: checkToBook,
+        action: toUnbook,
-        action: toBook,
     },
     delete: {
-        title: 'Are you sure you want to delete this invoice?',
+        title: t('assertAction', { action: t('delete') }),
         action: deleteInvoice,
     },
     clone: {
-        title: 'Are you sure you want to clone this invoice?',
+        title: t('assertAction', { action: t('clone') }),
         action: cloneInvoice,
     },
-    showPdf: {
+    showPdf: { cb: showPdfInvoice },
-        cb: showPdfInvoice,
+    sendPdf: { cb: sendPdfInvoiceConfirmation },
-    },
+    correct: { cb: () => correctionDialogRef.value.show() },
-    sendPdf: {
-        cb: sendPdfInvoiceConfirmation,
-    },
-    correct: {
-        cb: () => correctionDialogRef.value.show(),
-    },
 };
 const filter = {
     include: [
@@ -94,11 +82,7 @@ const filter = {
         },
     ],
 };
-const data = ref(useCardDescription());
+const invoiceInCorrection = reactive({ correcting: [], corrected: null });
-const invoiceInCorrection = reactive({
-    correcting: [],
-    corrected: null,
-});
 const routes = reactive({
     getSupplier: (id) => {
         return { name: 'SupplierCard', params: { id } };
@@ -139,16 +123,17 @@ const correctionFormData = reactive({
 });
 const isNotFilled = computed(() => Object.values(correctionFormData).includes(null));
 
-onBeforeMount(async () => await setInvoiceCorrection(entityId.value));
+onBeforeMount(async () => {
+    await setInvoiceCorrection(entityId.value);
+    const { data } = await axios.get(`InvoiceIns/${entityId.value}/getTotals`);
+    totalAmount.value = data.totalDueDay;
+});
 
-watch(
+onBeforeRouteLeave(async (to, from) => {
-    () => route.params.id,
+    invoiceInCorrection.correcting.length = 0;
-    async (newId) => {
+    invoiceInCorrection.corrected = null;
-        invoiceInCorrection.correcting.length = 0;
+    if (to.params.id !== from.params.id) await setInvoiceCorrection(entityId.value);
-        invoiceInCorrection.corrected = null;
+});
-        if (newId) await setInvoiceCorrection(entityId.value);
-    }
-);
 
 async function setInvoiceCorrection(id) {
     const [{ data: correctingData }, { data: correctedData }] = await Promise.all([
@@ -179,17 +164,6 @@ async function setInvoiceCorrection(id) {
     );
 }
 
-async function setData(entity) {
-    data.value = useCardDescription(entity.supplierRef, entity.id);
-    const { totalDueDay } = await getTotals();
-    totalAmount.value = totalDueDay;
-}
-
-async function getTotals() {
-    const { data } = await axios.get(`InvoiceIns/${entityId.value}/getTotals`);
-    return data;
-}
-
 function openDialog() {
     quasar.dialog({
         component: VnConfirm,
@@ -200,38 +174,17 @@ function openDialog() {
     });
 }
 
-async function checkToBook() {
+async function toUnbook() {
-    let directBooking = true;
+    const { data } = await axios.post(`InvoiceIns/${entityId.value}/toUnbook`);
+    const { isLinked, bookEntry, accountingEntries } = data;
 
-    const totals = await getTotals();
+    const type = isLinked ? 'warning' : 'positive';
-    const taxableBaseNotEqualDueDay = totals.totalDueDay != totals.totalTaxableBase;
+    const message = isLinked
-    const vatNotEqualDueDay = totals.totalDueDay != totals.totalVat;
+        ? t('isLinked', { bookEntry, accountingEntries })
+        : t('isNotLinked', { bookEntry });
 
-    if (taxableBaseNotEqualDueDay && vatNotEqualDueDay) directBooking = false;
+    quasar.notify({ type, message });
-
+    if (!isLinked) store.data.isBooked = false;
-    const { data: dueDaysCount } = await axios.get('InvoiceInDueDays/count', {
-        where: {
-            invoiceInFk: entityId.value,
-            dueDated: { gte: Date.vnNew() },
-        },
-    });
-
-    if (dueDaysCount) directBooking = false;
-
-    if (!directBooking) openDialog();
-    else toBook();
-}
-
-async function toBook() {
-    await axios.post(`InvoiceIns/${entityId.value}/toBook`);
-
-    quasar.notify({
-        type: 'positive',
-        message: t('globals.dataSaved'),
-    });
-
-    await cardDescriptorRef.value.getData();
-    setTimeout(() => location.reload(), 500);
 }
 
 async function deleteInvoice() {
@@ -240,7 +193,7 @@ async function deleteInvoice() {
         type: 'positive',
         message: t('Invoice deleted'),
     });
-    router.push({ path: '/invoice-in' });
+    push({ path: '/invoice-in' });
 }
 
 async function cloneInvoice() {
@@ -249,11 +202,9 @@ async function cloneInvoice() {
         type: 'positive',
         message: t('Invoice cloned'),
     });
-    router.push({ path: `/invoice-in/${data.id}/summary` });
+    push({ path: `/invoice-in/${data.id}/summary` });
 }
 
-const requiredFieldRule = (val) => val || t('globals.requiredField');
-
 const isAdministrative = () => hasAny(['administrative']);
 
 const isAgricultural = () =>
@@ -299,10 +250,9 @@ const createInvoiceInCorrection = async () => {
         'InvoiceIns/corrective',
         Object.assign(correctionFormData, { id: entityId.value })
     );
-    router.push({ path: `/invoice-in/${correctingId}/summary` });
+    push({ path: `/invoice-in/${correctingId}/summary` });
 };
 </script>
-
 <template>
     <FetchData
         url="InvoiceInConfigs"
@@ -329,21 +279,33 @@ const createInvoiceInCorrection = async () => {
     <CardDescriptor
         ref="cardDescriptorRef"
         module="InvoiceIn"
+        data-key="InvoiceIn"
         :url="`InvoiceIns/${entityId}`"
         :filter="filter"
-        :title="data.title"
+        title="supplierRef"
-        :subtitle="data.subtitle"
-        @on-fetch="setData"
-        data-key="invoiceInData"
     >
         <template #menu="{ entity }">
+            <InvoiceInToBook>
+                <template #content="{ book }">
+                    <QItem
+                        v-if="!entity?.isBooked && isAdministrative()"
+                        v-ripple
+                        clickable
+                        @click="book(entityId)"
+                    >
+                        <QItemSection>{{ t('To book') }}</QItemSection>
+                    </QItem>
+                </template>
+            </InvoiceInToBook>
             <QItem
-                v-if="!entity.isBooked && isAdministrative()"
+                v-if="entity?.isBooked && isAdministrative()"
                 v-ripple
                 clickable
-                @click="triggerMenu('book')"
+                @click="triggerMenu('unbook')"
             >
-                <QItemSection>{{ t('To book') }}</QItemSection>
+                <QItemSection>
+                    {{ t('To unbook') }}
+                </QItemSection>
             </QItem>
             <QItem
                 v-if="isAdministrative()"
@@ -395,25 +357,24 @@ const createInvoiceInCorrection = async () => {
             >
                 <QItemSection>{{ t('components.smartCard.downloadFile') }}</QItemSection>
             </QItem>
-            <QItem
-                v-if="entity.dmsFk"
-                v-ripple
-                clickable
-                @click="downloadFile(entity.dmsFk)"
-            >
-                <QItemSection>{{ t('components.smartCard.downloadFile') }}</QItemSection>
-            </QItem>
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('invoiceIn.card.issued')" :value="toDate(entity.issued)" />
             <VnLv :label="t('invoiceIn.summary.booked')" :value="toDate(entity.booked)" />
-            <VnLv :label="t('invoiceIn.card.amount')" :value="toCurrency(totalAmount)" />
             <VnLv
-                :label="t('invoiceIn.summary.supplier')"
+                :label="t('invoiceIn.card.amount')"
-                :value="entity.supplier?.nickname"
+                :value="toCurrency(totalAmount, entity.currency?.code)"
             />
+            <VnLv :label="t('invoiceIn.summary.supplier')">
+                <template #value>
+                    <span class="link">
+                        {{ entity?.supplier?.nickname }}
+                        <SupplierDescriptorProxy :id="entity?.supplierFk" />
+                    </span>
+                </template>
+            </VnLv>
         </template>
-        <template #actions="{ entity }">
+        <template #action="{ entity }">
             <QCardActions>
                 <QBtn
                     size="md"
@@ -486,7 +447,7 @@ const createInvoiceInCorrection = async () => {
                             :options="siiTypeInvoiceOuts"
                             option-value="id"
                             option-label="code"
-                            :rules="[requiredFieldRule]"
+                            :required="true"
                         />
                     </QItemSection>
                     <QItemSection>
@@ -496,7 +457,7 @@ const createInvoiceInCorrection = async () => {
                             :options="cplusRectificationTypes"
                             option-value="id"
                             option-label="description"
-                            :rules="[requiredFieldRule]"
+                            :required="true"
                         />
                         <VnSelect
                             :label="`${useCapitalize(t('globals.reason'))}*`"
@@ -504,7 +465,7 @@ const createInvoiceInCorrection = async () => {
                             :options="invoiceCorrectionTypes"
                             option-value="id"
                             option-label="description"
-                            :rules="[requiredFieldRule]"
+                            :required="true"
                         />
                     </QItemSection>
                 </QItem>
@@ -544,11 +505,18 @@ const createInvoiceInCorrection = async () => {
 }
 </style>
 <i18n>
+en:
+    isNotLinked: The entry {bookEntry} has been deleted with {accountingEntries} entries
+    isLinked: The entry {bookEntry} has been linked to Sage. Please contact administration for further information
+    assertAction: Are you sure you want to {action} this invoice?
 es:
+    book: asentar
+    unbook: desasentar
+    delete: eliminar
+    clone: clonar
     To book: Contabilizar
-    Are you sure you want to book this invoice?: Estas seguro de querer asentar esta factura?
+    To unbook: Descontabilizar
     Delete invoice: Eliminar factura
-    Are you sure you want to delete this invoice?:  Estas seguro de querer eliminar esta factura?
     Invoice deleted: Factura eliminada
     Clone invoice: Clonar factura
     Invoice cloned: Factura clonada
@@ -560,4 +528,7 @@ es:
     Rectificative invoice: Factura rectificativa
     Original invoice: Factura origen
     Entry: entrada
+    isNotLinked: Se ha eliminado el asiento nº {bookEntry} con {accountingEntries} apuntes
+    isLinked: El asiento {bookEntry} fue enlazado a Sage, por favor contacta con administración
+    assertAction: Estas seguro de querer {action} esta factura?
 </i18n>

src/pages/InvoiceIn/Card/InvoiceInDueDay.vue

@@ -9,24 +9,21 @@ import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
+import { toCurrency } from 'src/filters';
 
 const route = useRoute();
 const { t } = useI18n();
-const arrayData = useArrayData('InvoiceIn');
+const arrayData = useArrayData(route.meta.moduleName);
 const invoiceIn = computed(() => arrayData.store.data);
 
 const rowsSelected = ref([]);
 const banks = ref([]);
 const invoiceInFormRef = ref();
-const invoiceId = route.params.id;
+const invoiceId = +route.params.id;
 
 const placeholder = 'yyyy/mm/dd';
 
-const filter = {
+const filter = { where: { invoiceInFk: invoiceId } };
-    where: {
-        invoiceInFk: invoiceId,
-    },
-};
 
 const columns = computed(() => [
     {
@@ -73,6 +70,7 @@ async function insert() {
     await axios.post('/InvoiceInDueDays/new', { id: +invoiceId });
     await invoiceInFormRef.value.reload();
 }
+const getTotalAmount = (rows) => rows.reduce((acc, { amount }) => acc + +amount, 0);
 </script>
 <template>
     <FetchData
@@ -184,6 +182,19 @@ async function insert() {
                         />
                     </QTd>
                 </template>
+                <template #bottom-row>
+                    <QTr class="bg">
+                        <QTd />
+                        <QTd />
+                        <QTd />
+                        <QTd>
+                            {{
+                                toCurrency(getTotalAmount(rows), invoiceIn.currency.code)
+                            }}
+                        </QTd>
+                        <QTd />
+                    </QTr>
+                </template>
                 <template #item="props">
                     <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
                         <QCard>
@@ -294,7 +305,11 @@ async function insert() {
         <QBtn color="primary" icon="add" size="lg" round @click="insert" />
     </QPageSticky>
 </template>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.bg {
+    background-color: var(--vn-light-gray);
+}
+</style>
 <i18n>
     es:
         Date: Fecha

src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue

@@ -6,26 +6,21 @@ import { toCurrency } from 'src/filters';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const { t } = useI18n();
-const route = useRoute();
 
+const route = useRoute();
+const currency = computed(
+    () => useArrayData(route.meta.moduleName).store.data?.currency?.code
+);
 const invoceInIntrastat = ref([]);
-const amountTotal = computed(() => getTotal('amount'));
-const netTotal = computed(() => getTotal('net'));
-const stemsTotal = computed(() => getTotal('stems'));
 const rowsSelected = ref([]);
 const countries = ref([]);
 const intrastats = ref([]);
 const invoiceInFormRef = ref();
-
+const invoiceInId = computed(() => +route.params.id);
-const filter = {
+const filter = { where: { invoiceInFk: invoiceInId.value } };
-    where: {
-        invoiceInFk: route.params.id,
-    },
-};
-
 const columns = computed(() => [
     {
         name: 'code',
@@ -77,13 +72,8 @@ const columns = computed(() => [
     },
 ]);
 
-function getTotal(type) {
+const getTotal = (data, key) =>
-    if (!invoceInIntrastat.value.length) return 0.0;
+    data.reduce((acc, cur) => acc + +String(cur[key]).replace(',', '.'), 0);
-    return invoceInIntrastat.value.reduce(
-        (total, intrastat) => total + intrastat[type],
-        0.0
-    );
-}
 </script>
 <template>
     <FetchData
@@ -99,30 +89,12 @@ function getTotal(type) {
         @on-fetch="(data) => (intrastats = data)"
     />
     <div class="invoiceIn-intrastat">
-        <QCard v-if="invoceInIntrastat.length" class="full-width q-mb-md q-pa-sm">
-            <QItem class="justify-end">
-                <div>
-                    <QItemLabel>
-                        <VnLv
-                            :label="t('Total amount')"
-                            :value="toCurrency(amountTotal)"
-                        />
-                    </QItemLabel>
-                    <QItemLabel>
-                        <VnLv :label="t('Total net')" :value="netTotal" />
-                    </QItemLabel>
-                    <QItemLabel>
-                        <VnLv :label="t('Total stems')" :value="stemsTotal" />
-                    </QItemLabel>
-                </div>
-            </QItem>
-        </QCard>
         <CrudModel
             ref="invoiceInFormRef"
             data-key="InvoiceInIntrastats"
             url="InvoiceInIntrastats"
-            auto-load
+            :auto-load="!currency"
-            :data-required="{ invoiceInFk: route.params.id }"
+            :data-required="{ invoiceInFk: invoiceInId }"
             :filter="filter"
             v-model:selected="rowsSelected"
             @on-fetch="(data) => (invoceInIntrastat = data)"
@@ -172,6 +144,22 @@ function getTotal(type) {
                             />
                         </QTd>
                     </template>
+                    <template #bottom-row>
+                        <QTr class="bg">
+                            <QTd />
+                            <QTd />
+                            <QTd>
+                                {{ toCurrency(getTotal(rows, 'amount'), currency) }}
+                            </QTd>
+                            <QTd>
+                                {{ getTotal(rows, 'net') }}
+                            </QTd>
+                            <QTd>
+                                {{ getTotal(rows, 'stems') }}
+                            </QTd>
+                            <QTd />
+                        </QTr>
+                    </template>
                     <template #item="props">
                         <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
                             <QCard>

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -3,32 +3,24 @@ import { onMounted, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency, toDate } from 'src/filters';
+import { useArrayData } from 'src/composables/useArrayData';
 import { getUrl } from 'src/composables/getUrl';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
+import InvoiceIntoBook from '../InvoiceInToBook.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
-onMounted(async () => {
+const props = defineProps({ id: { type: [Number, String], default: 0 } });
-    salixUrl.value = await getUrl('');
-    invoiceInUrl.value = salixUrl.value + `invoiceIn/${entityId.value}/`;
-});
-
-const route = useRoute();
 const { t } = useI18n();
+const route = useRoute();
 
-const $props = defineProps({
+const entityId = computed(() => props.id || +route.params.id);
-    id: {
+const invoiceIn = computed(() => useArrayData(route.meta.moduleName).store.data);
-        type: Number,
+const currency = computed(() => invoiceIn.value?.currency?.code);
-        default: 0,
-    },
-});
-
-const entityId = computed(() => $props.id || route.params.id);
-
-const salixUrl = ref();
 const invoiceInUrl = ref();
 const amountsNotMatch = ref(null);
-const intrastatTotals = ref({});
+const intrastatTotals = ref({ amount: 0, net: 0, stems: 0 });
 
 const vatColumns = ref([
     {
@@ -42,14 +34,16 @@ const vatColumns = ref([
         name: 'landed',
         label: 'invoiceIn.summary.taxableBase',
         field: (row) => row.taxableBase,
-        format: (value) => toCurrency(value),
+        format: (value) => toCurrency(value, currency.value),
         sortable: true,
         align: 'left',
     },
     {
         name: 'vat',
         label: 'invoiceIn.summary.sageVat',
-        field: (row) => row.taxTypeSage?.vat,
+        field: (row) => {
+            if (row.taxTypeSage) return `#${row.taxTypeSage.id} : ${row.taxTypeSage.vat}`;
+        },
         format: (value) => value,
         sortable: true,
         align: 'left',
@@ -57,7 +51,10 @@ const vatColumns = ref([
     {
         name: 'transaction',
         label: 'invoiceIn.summary.sageTransaction',
-        field: (row) => row.transactionTypeSage?.transaction,
+        field: (row) => {
+            if (row.transactionTypeSage)
+                return `#${row.transactionTypeSage.id} : ${row.transactionTypeSage?.transaction}`;
+        },
         format: (value) => value,
         sortable: true,
         align: 'left',
@@ -66,9 +63,9 @@ const vatColumns = ref([
         name: 'rate',
         label: 'invoiceIn.summary.rate',
         field: (row) => taxRate(row.taxableBase, row.taxTypeSage?.rate),
-        format: (value) => toCurrency(value),
+        format: (value) => toCurrency(value, currency.value),
         sortable: true,
-        align: 'left',
+        align: 'center',
     },
     {
         name: 'currency',
@@ -99,7 +96,7 @@ const dueDayColumns = ref([
         name: 'amount',
         label: 'invoiceIn.summary.amount',
         field: (row) => row.amount,
-        format: (value) => toCurrency(value),
+        format: (value) => toCurrency(value, currency.value),
         sortable: true,
         align: 'left',
     },
@@ -122,13 +119,15 @@ const intrastatColumns = ref([
         },
         sortable: true,
         align: 'left',
+        style: 'width: 10px',
     },
     {
         name: 'amount',
         label: 'invoiceIn.summary.amount',
-        field: (row) => toCurrency(row.amount),
+        field: (row) => toCurrency(row.amount, currency.value),
         sortable: true,
         align: 'left',
+        style: 'width: 10px',
     },
     {
         name: 'net',
@@ -155,58 +154,55 @@ const intrastatColumns = ref([
     },
 ]);
 
-function getAmountNotMatch(totals) {
+onMounted(async () => {
-    return (
+    invoiceInUrl.value = `${await getUrl('')}invoiceIn/${entityId.value}/`;
+});
+
+const init = (data) => {
+    if (!data) return;
+
+    const { totals, invoiceInIntrastat } = data;
+    amountsNotMatch.value =
         totals.totalDueDay != totals.totalTaxableBase &&
-        totals.totalDueDay != totals.totalVat
+        totals.totalDueDay != totals.totalVat;
-    );
-}
 
-function getIntrastatTotals(intrastat) {
+    invoiceInIntrastat.forEach((val) => {
-    const totals = {
+        intrastatTotals.value.amount += val.amount;
-        amount: intrastat.reduce((acc, cur) => acc + cur.amount, 0),
+        intrastatTotals.value.net += val.net;
-        net: intrastat.reduce((acc, cur) => acc + cur.net, 0),
+        intrastatTotals.value.stems += val.stems;
-        stems: intrastat.reduce((acc, cur) => acc + cur.stems, 0),
+    });
-    };
+};
 
-    return totals;
+const taxRate = (taxableBase = 0, rate = 0) => (rate / 100) * taxableBase;
-}
 
-function getTaxTotal(tax) {
+const getTotalTax = (tax) =>
-    return tax.reduce(
+    tax.reduce((acc, cur) => acc + taxRate(cur.taxableBase, cur.taxTypeSage?.rate), 0);
-        (acc, cur) => acc + taxRate(cur.taxableBase, cur.taxTypeSage?.rate),
-        0
-    );
-}
 
-function setData(entity) {
+const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
-    if (!entity) return false;
-
-    amountsNotMatch.value = getAmountNotMatch(entity.totals);
-
-    if (entity.invoiceInIntrastat.length)
-        intrastatTotals.value = { ...getIntrastatTotals(entity.invoiceInIntrastat) };
-}
-
-function taxRate(taxableBase = 0, rate = 0) {
-    return (rate / 100) * taxableBase;
-}
-
-function getLink(param) {
-    return `#/invoice-in/${entityId.value}/${param}`;
-}
 </script>
 
 <template>
     <CardSummary
         data-key="InvoiceInSummary"
         :url="`InvoiceIns/${entityId}/summary`"
-        @on-fetch="(data) => setData(data)"
+        @on-fetch="(data) => init(data)"
     >
-        <template #header="{ entity: invoiceIn }">
+        <template #header="{ entity }">
-            <div>{{ invoiceIn.id }} - {{ invoiceIn.supplier?.name }}</div>
+            <div>{{ entity.id }} - {{ entity.supplier?.name }}</div>
         </template>
-        <template #body="{ entity: invoiceIn }">
+        <template #header-right v-if="!invoiceIn?.isBooked">
+            <InvoiceIntoBook>
+                <template #content="{ book }">
+                    <QBtn
+                        :label="t('To book')"
+                        color="orange-11"
+                        text-color="black"
+                        @click="book(entityId)"
+                    />
+                </template>
+            </InvoiceIntoBook>
+        </template>
+        <template #body="{ entity }">
             <!--Basic Data-->
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
@@ -217,19 +213,26 @@ function getLink(param) {
                 </QCardSection>
                 <VnLv
                     :label="t('invoiceIn.summary.supplier')"
-                    :value="invoiceIn.supplier?.name"
+                    :value="entity.supplier?.name"
-                />
+                >
+                    <template #value>
+                        <span class="link">
+                            {{ entity.supplier?.name }}
+                            <SupplierDescriptorProxy :id="entity.supplierFk" />
+                        </span>
+                    </template>
+                </VnLv>
                 <VnLv
                     :label="t('invoiceIn.summary.supplierRef')"
-                    :value="invoiceIn.supplierRef"
+                    :value="entity.supplierRef"
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.currency')"
-                    :value="invoiceIn.currency?.code"
+                    :value="entity.currency?.code"
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.docNumber')"
-                    :value="`${invoiceIn.serial}/${invoiceIn.serialNumber}`"
+                    :value="`${entity.serial}/${entity.serialNumber}`"
                 />
             </QCard>
             <QCard class="vn-one">
@@ -242,19 +245,19 @@ function getLink(param) {
                 <VnLv
                     :ellipsis-value="false"
                     :label="t('invoiceIn.summary.issued')"
-                    :value="toDate(invoiceIn.issued)"
+                    :value="toDate(entity.issued)"
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.operated')"
-                    :value="toDate(invoiceIn.operated)"
+                    :value="toDate(entity.operated)"
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.bookEntried')"
-                    :value="toDate(invoiceIn.bookEntried)"
+                    :value="toDate(entity.bookEntried)"
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.bookedDate')"
-                    :value="toDate(invoiceIn.booked)"
+                    :value="toDate(entity.booked)"
                 />
             </QCard>
             <QCard class="vn-one">
@@ -266,20 +269,19 @@ function getLink(param) {
                 </QCardSection>
                 <VnLv
                     :label="t('invoiceIn.summary.sage')"
-                    :value="invoiceIn.sageWithholding?.withholding"
+                    :value="entity.sageWithholding?.withholding"
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.vat')"
-                    :value="invoiceIn.expenseDeductible?.name"
+                    :value="entity.expenseDeductible?.name"
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.company')"
-                    :value="invoiceIn.company?.code"
+                    :value="entity.company?.code"
                 />
-                <QCheckbox
+                <VnLv
                     :label="t('invoiceIn.summary.booked')"
-                    v-model="invoiceIn.isBooked"
+                    :value="invoiceIn?.isBooked"
-                    :disable="true"
                 />
             </QCard>
             <QCard class="vn-one">
@@ -290,58 +292,62 @@ function getLink(param) {
                     />
                 </QCardSection>
                 <QCardSection class="q-pa-none">
-                    <div class="bordered q-px-sm q-mx-auto">
+                    <VnLv
-                        <VnLv
+                        :label="t('invoiceIn.summary.taxableBase')"
-                            :label="t('invoiceIn.summary.taxableBase')"
+                        :value="toCurrency(entity.totals.totalTaxableBase, currency)"
-                            :value="toCurrency(invoiceIn.totals.totalTaxableBase)"
+                    />
-                        />
+                    <VnLv
-                        <VnLv
+                        label="Total"
-                            label="Total"
+                        :value="toCurrency(entity.totals.totalVat, currency)"
-                            :value="toCurrency(invoiceIn.totals.totalVat)"
+                    />
-                        />
+                    <VnLv :label="t('invoiceIn.summary.dueTotal')">
-                        <VnLv :label="t('invoiceIn.summary.dueTotal')">
+                        <template #value>
-                            <template #value>
+                            <QChip
-                                <QChip
+                                dense
-                                    dense
+                                class="q-pa-xs"
-                                    class="q-pa-xs"
+                                :color="amountsNotMatch ? 'negative' : 'transparent'"
-                                    :color="amountsNotMatch ? 'negative' : 'transparent'"
+                                :title="
-                                    :title="
+                                    amountsNotMatch
-                                        amountsNotMatch
+                                        ? t('invoiceIn.summary.noMatch')
-                                            ? t('invoiceIn.summary.noMatch')
+                                        : t('invoiceIn.summary.dueTotal')
-                                            : t('invoiceIn.summary.dueTotal')
+                                "
-                                    "
+                            >
-                                >
+                                {{ toCurrency(entity.totals.totalDueDay, currency) }}
-                                    {{ toCurrency(invoiceIn.totals.totalDueDay) }}
+                            </QChip>
-                                </QChip>
+                        </template>
-                            </template>
+                    </VnLv>
-                        </VnLv>
-                    </div>
                 </QCardSection>
             </QCard>
             <!--Vat-->
-            <QCard v-if="invoiceIn.invoiceInTax.length">
+            <QCard v-if="entity.invoiceInTax.length" class="vat">
                 <VnTitle :url="getLink('vat')" :text="t('invoiceIn.card.vat')" />
                 <QTable
                     :columns="vatColumns"
-                    :rows="invoiceIn.invoiceInTax"
+                    :rows="entity.invoiceInTax"
                     flat
                     hide-pagination
                 >
-                    <template #header="props">
+                    <template #header="vatProps">
-                        <QTr :props="props" class="bg">
+                        <QTr :props="vatProps" class="bg">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                            <QTh
+                                v-for="col in vatProps.cols"
+                                :key="col.name"
+                                :props="vatProps"
+                            >
                                 {{ t(col.label) }}
                             </QTh>
                         </QTr>
                     </template>
                     <template #bottom-row>
                         <QTr class="bg">
-                            <QTd></QTd>
-                            <QTd>{{ toCurrency(invoiceIn.totals.totalTaxableBase) }}</QTd>
-                            <QTd></QTd>
                             <QTd></QTd>
                             <QTd>{{
-                                toCurrency(getTaxTotal(invoiceIn.invoiceInTax))
+                                toCurrency(entity.totals.totalTaxableBase, currency)
+                            }}</QTd>
+                            <QTd></QTd>
+                            <QTd></QTd>
+                            <QTd class="text-center">{{
+                                toCurrency(getTotalTax(entity.invoiceInTax, currency))
                             }}</QTd>
                             <QTd></QTd>
                         </QTr>
@@ -349,17 +355,17 @@ function getLink(param) {
                 </QTable>
             </QCard>
             <!--Due Day-->
-            <QCard v-if="invoiceIn.invoiceInDueDay.length">
+            <QCard v-if="entity.invoiceInDueDay.length" class="due-day">
                 <VnTitle :url="getLink('due-day')" :text="t('invoiceIn.card.dueDay')" />
-                <QTable
+                <QTable :columns="dueDayColumns" :rows="entity.invoiceInDueDay" flat>
-                    class="full-width"
+                    <template #header="dueDayProps">
-                    :columns="dueDayColumns"
+                        <QTr :props="dueDayProps" class="bg">
-                    :rows="invoiceIn.invoiceInDueDay"
+                            <QTh
-                    flat
+                                table-header-style="max-width:50%"
-                >
+                                v-for="col in dueDayProps.cols"
-                    <template #header="props">
+                                :key="col.name"
-                        <QTr :props="props" class="bg">
+                                :props="dueDayProps"
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                            >
                                 {{ t(col.label) }}
                             </QTh>
                         </QTr>
@@ -368,26 +374,32 @@ function getLink(param) {
                         <QTr class="bg">
                             <QTd></QTd>
                             <QTd></QTd>
-                            <QTd>{{ toCurrency(invoiceIn.totals.totalDueDay) }}</QTd>
+                            <QTd>
+                                {{ toCurrency(entity.totals.totalDueDay, currency) }}
+                            </QTd>
                             <QTd></QTd>
                         </QTr>
                     </template>
                 </QTable>
             </QCard>
             <!--Intrastat-->
-            <QCard v-if="invoiceIn.invoiceInIntrastat.length">
+            <QCard v-if="entity.invoiceInIntrastat.length">
                 <VnTitle
                     :url="getLink('intrastat')"
                     :text="t('invoiceIn.card.intrastat')"
                 />
                 <QTable
                     :columns="intrastatColumns"
-                    :rows="invoiceIn.invoiceInIntrastat"
+                    :rows="entity.invoiceInIntrastat"
                     flat
                 >
-                    <template #header="props">
+                    <template #header="intrastatProps">
-                        <QTr :props="props" class="bg">
+                        <QTr :props="intrastatProps" class="bg">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                            <QTh
+                                v-for="col in intrastatProps.cols"
+                                :key="col.name"
+                                :props="intrastatProps"
+                            >
                                 {{ t(col.label) }}
                             </QTh>
                         </QTr>
@@ -395,7 +407,7 @@ function getLink(param) {
                     <template #bottom-row>
                         <QTr class="bg">
                             <QTd></QTd>
-                            <QTd>{{ toCurrency(intrastatTotals.amount) }}</QTd>
+                            <QTd>{{ toCurrency(intrastatTotals.amount, currency) }}</QTd>
                             <QTd>{{ intrastatTotals.net }}</QTd>
                             <QTd>{{ intrastatTotals.stems }}</QTd>
                             <QTd></QTd>
@@ -410,13 +422,28 @@ function getLink(param) {
 .bg {
     background-color: var(--vn-accent-color);
 }
-.bordered {
+@media (min-width: $breakpoint-md) {
-    border: 1px solid var(--vn-text-color);
+    .summaryBody {
-    max-width: 18em;
+        .vat {
+            flex: 65%;
+        }
+
+        .due-day {
+            flex: 30%;
+        }
+        .vat,
+        .due-day {
+            .q-table th {
+                padding-right: 0;
+            }
+        }
+    }
 }
 </style>
 <i18n>
     es:
         Search invoice: Buscar factura recibida
         You can search by invoice reference: Puedes buscar por referencia de la factura
+        Totals: Totales
+        To book: Contabilizar
 </i18n>

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -11,13 +11,14 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import CrudModel from 'src/components/CrudModel.vue';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 
-const route = useRoute();
+const router = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
 
-const arrayData = useArrayData('InvoiceIn');
+const arrayData = useArrayData(router.meta.moduleName);
 const invoiceIn = computed(() => arrayData.store.data);
-
+const invoiceId = +router.params.id;
+const currency = computed(() => invoiceIn.value?.currency?.code);
 const expenses = ref([]);
 const sageTaxTypes = ref([]);
 const sageTransactionTypes = ref([]);
@@ -55,7 +56,7 @@ const columns = computed(() => [
     {
         name: 'taxablebase',
         label: t('Taxable base'),
-        field: (row) => toCurrency(row.taxableBase),
+        field: (row) => toCurrency(row.taxableBase, currency.value),
         model: 'taxableBase',
         sortable: true,
         tabIndex: 2,
@@ -68,7 +69,7 @@ const columns = computed(() => [
         options: sageTaxTypes.value,
         model: 'taxTypeSageFk',
         optionValue: 'id',
-        optionLabel: 'vat',
+        optionLabel: 'id',
         sortable: true,
         tabindex: 3,
         align: 'left',
@@ -80,7 +81,7 @@ const columns = computed(() => [
         options: sageTransactionTypes.value,
         model: 'transactionTypeSageFk',
         optionValue: 'id',
-        optionLabel: 'transaction',
+        optionLabel: 'id',
         sortable: true,
         tabIndex: 4,
         align: 'left',
@@ -90,7 +91,7 @@ const columns = computed(() => [
         label: t('Rate'),
         sortable: true,
         tabIndex: 5,
-        field: (row) => toCurrency(taxRate(row, row.taxTypeSageFk)),
+        field: (row) => toCurrency(taxRate(row, row.taxTypeSageFk), currency.value),
         align: 'left',
     },
     {
@@ -114,7 +115,7 @@ const filter = {
         'transactionTypeSageFk',
     ],
     where: {
-        invoiceInFk: route.params.id,
+        invoiceInFk: invoiceId,
     },
 };
 
@@ -161,6 +162,9 @@ async function addExpense() {
         });
     }
 }
+const getTotalTaxableBase = (rows) =>
+    rows.reduce((acc, { taxableBase }) => acc + +taxableBase, 0);
+const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0);
 </script>
 <template>
     <FetchData
@@ -181,9 +185,10 @@ async function addExpense() {
         data-key="InvoiceInTaxes"
         url="InvoiceInTaxes"
         :filter="filter"
-        :data-required="{ invoiceInFk: route.params.id }"
+        :data-required="{ invoiceInFk: invoiceId }"
         auto-load
         v-model:selected="rowsSelected"
+        :go-to="`/invoice-in/${invoiceId}/due-day`"
     >
         <template #body="{ rows }">
             <QTable
@@ -191,7 +196,7 @@ async function addExpense() {
                 selection="multiple"
                 :columns="columns"
                 :rows="rows"
-                row-key="$index"                
+                row-key="$index"
                 :grid="$q.screen.lt.sm"
             >
                 <template #body-cell-expense="{ row, col }">
@@ -303,6 +308,19 @@ async function addExpense() {
                         />
                     </QTd>
                 </template>
+                <template #bottom-row>
+                    <QTr class="bg">
+                        <QTd />
+                        <QTd />
+                        <QTd>
+                            {{ toCurrency(getTotalTaxableBase(rows), currency) }}
+                        </QTd>
+                        <QTd />
+                        <QTd />
+                        <QTd> {{ toCurrency(getTotalRate(rows), currency) }}</QTd>
+                        <QTd />
+                    </QTr>
+                </template>
                 <template #item="props">
                     <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
                         <QCard bordered flat class="q-my-xs">
@@ -391,7 +409,7 @@ async function addExpense() {
                                     </VnSelect>
                                 </QItem>
                                 <QItem>
-                                    {{ toCurrency(taxRate(props.row)) }}
+                                    {{ toCurrency(taxRate(props.row), currency) }}
                                 </QItem>
                                 <QItem>
                                     <QInput
@@ -458,6 +476,10 @@ async function addExpense() {
     </QPageSticky>
 </template>
 <style lang="scss" scoped>
+.bg {
+    background-color: var(--vn-light-gray);
+}
+
 @media (max-width: $breakpoint-xs) {
     .q-dialog {
         .q-card {

src/pages/InvoiceIn/InvoiceInCreate.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import { useStateStore } from 'stores/useStateStore';
+import { useState } from 'src/composables/useState';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const state = useState();
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const user = state.getUser();
+const newInvoiceIn = reactive({
+    supplierFk: +route.query?.supplierFk || null,
+    supplierRef: null,
+    companyFk: user.value.companyFk || null,
+    issued: Date.vnNew(),
+});
+const suppliersOptions = ref([]);
+const companiesOptions = ref([]);
+
+const redirectToInvoiceInBasicData = ({ id }) => {
+    router.push({ name: 'InvoiceInBasicData', params: { id } });
+};
+</script>
+
+<template>
+    <FetchData
+        url="Suppliers"
+        :filter="{ fields: ['id', 'nickname'] }"
+        order="nickname"
+        @on-fetch="(data) => (suppliersOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="companiesRef"
+        url="Companies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                custom-route-redirect-name="InvoiceInSummary"
+                data-key="InvoiceInSummary"
+            />
+        </Teleport>
+    </template>
+    <QPage>
+        <VnSubToolbar />
+        <FormModel
+            url-create="InvoiceIns"
+            model="InvoiceIn"
+            :form-initial-data="newInvoiceIn"
+            @on-data-saved="redirectToInvoiceInBasicData"
+        >
+            <template #form="{ data, validate }">
+                <VnRow>
+                    <VnSelect
+                        :label="t('Supplier')"
+                        v-model="data.supplierFk"
+                        :options="suppliersOptions"
+                        option-value="id"
+                        option-label="nickname"
+                        hide-selected
+                        :required="true"
+                        :rules="validate('entry.supplierFk')"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        #{{ scope.opt?.id }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                    <VnInput
+                        :label="t('invoiceIn.summary.supplierRef')"
+                        v-model="data.supplierRef"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnSelect
+                        :label="t('Company')"
+                        v-model="data.companyFk"
+                        :options="companiesOptions"
+                        option-value="id"
+                        option-label="code"
+                        map-options
+                        hide-selected
+                        :required="true"
+                        :rules="validate('invoiceIn.companyFk')"
+                    />
+                    <VnInputDate
+                        :label="t('invoiceIn.summary.issued')"
+                        v-model="data.issued"
+                    />
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
+
+<i18n>
+    es:
+        Supplier: Proveedor
+        Travel: Envío
+        Company: Empresa
+</i18n>

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -4,33 +4,17 @@ import { useI18n } from 'vue-i18n';
 
 import VnSelect from 'components/common/VnSelect.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
-const props = defineProps({
+defineProps({ dataKey: { type: String, required: true } });
-    dataKey: {
-        type: String,
-        required: true,
-    },
-});
 const suppliers = ref([]);
-const suppliersRef = ref();
 </script>
 
 <template>
-    <FetchData
+    <VnFilterPanel :data-key="dataKey" :search-button="true">
-        ref="suppliersRef"
-        url="Suppliers"
-        :filter="{ fields: ['id', 'nickname'] }"
-        order="nickname"
-        limit="30"
-        @on-fetch="(data) => (suppliers = data)"
-        auto-load
-    />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
@@ -38,22 +22,6 @@ const suppliersRef = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QItem>
-                <QItemSection>
-                    <VnSelect
-                        :label="t('params.supplierFk')"
-                        v-model="params.supplierFk"
-                        :options="suppliers"
-                        option-value="id"
-                        option-label="nickname"
-                        @input-value="suppliersRef.fetch()"
-                        dense
-                        outlined
-                        rounded
-                    >
-                    </VnSelect>
-                </QItemSection>
-            </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -68,21 +36,11 @@ const suppliersRef = ref();
                     </VnInput>
                 </QItemSection>
             </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate :label="t('From')" v-model="params.from" is-outlined />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                </QItemSection>
-            </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput
-                        :label="t('params.serial')"
+                        :label="t('params.fi')"
-                        v-model="params.serial"
+                        v-model="params.fi"
                         is-outlined
                         lazy-rules
                     >
@@ -92,11 +50,61 @@ const suppliersRef = ref();
                     </VnInput>
                 </QItemSection>
             </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        v-model="params.supplierFk"
+                        url="Suppliers"
+                        :fields="['id', 'nickname']"
+                        :label="t('params.supplierFk')"
+                        option-value="id"
+                        option-label="nickname"
+                        :options="suppliers"
+                        dense
+                        outlined
+                        rounded
+                    >
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.account')"
+                        v-model="params.account"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="person" size="sm" />
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
             <QItem>
                 <QItemSection>
                     <VnCurrency v-model="params.amount" is-outlined />
                 </QItemSection>
             </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate :label="t('From')" v-model="params.from" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('Issued')"
+                        v-model="params.issued"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
             <QItem class="q-mb-md">
                 <QItemSection>
                     <QCheckbox
@@ -111,8 +119,8 @@ const suppliersRef = ref();
                 <QItem>
                     <QItemSection>
                         <VnInput
-                            :label="t('params.fi')"
+                            :label="t('params.serialNumber')"
-                            v-model="params.fi"
+                            v-model="params.serialNumber"
                             is-outlined
                             lazy-rules
                         >
@@ -125,8 +133,8 @@ const suppliersRef = ref();
                 <QItem>
                     <QItemSection>
                         <VnInput
-                            :label="t('params.serialNumber')"
+                            :label="t('params.serial')"
-                            v-model="params.serialNumber"
+                            v-model="params.serial"
                             is-outlined
                             lazy-rules
                         >
@@ -150,29 +158,6 @@ const suppliersRef = ref();
                         </VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('params.account')"
-                            v-model="params.account"
-                            is-outlined
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="person" size="sm" />
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            :label="t('Issued')"
-                            v-model="params.issued"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
             </QExpansionItem>
         </template>
     </VnFilterPanel>

src/pages/InvoiceIn/InvoiceInList.vue

@@ -13,6 +13,7 @@ import InvoiceInFilter from './InvoiceInFilter.vue';
 import { getUrl } from 'src/composables/getUrl';
 import InvoiceInSummary from './Card/InvoiceInSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -85,7 +86,15 @@ function navigate(id) {
                             <VnLv
                                 :label="t('invoiceIn.list.supplier')"
                                 :value="row.supplierName"
-                            />
+                                @click.stop
+                            >
+                                <template #value>
+                                    <span class="link">
+                                        {{ row.supplierName }}
+                                        <SupplierDescriptorProxy :id="row.supplierFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
                             <VnLv
                                 :label="t('invoiceIn.list.serialNumber')"
                                 :value="row.serialNumber"
@@ -137,13 +146,7 @@ function navigate(id) {
         </div>
     </QPage>
     <QPageSticky position="bottom-right" :offset="[20, 20]">
-        <QBtn
+        <QBtn color="primary" icon="add" size="lg" round :href="`/#/invoice-in/create`" />
-            color="primary"
-            icon="add"
-            size="lg"
-            round
-            :href="`${url}invoice-in/create`"
-        />
     </QPageSticky>
 </template>
 

src/pages/InvoiceIn/InvoiceInToBook.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+const { notify, dialog } = useQuasar();
+const { t } = useI18n();
+
+defineExpose({ checkToBook });
+
+const { store } = useArrayData(useRoute().meta.moduleName);
+
+async function checkToBook(id) {
+    let directBooking = true;
+
+    const { data: totals } = await axios.get(`InvoiceIns/${id}/getTotals`);
+    const taxableBaseNotEqualDueDay = totals.totalDueDay != totals.totalTaxableBase;
+    const vatNotEqualDueDay = totals.totalDueDay != totals.totalVat;
+
+    if (taxableBaseNotEqualDueDay && vatNotEqualDueDay) directBooking = false;
+
+    const { data: dueDaysCount } = await axios.get('InvoiceInDueDays/count', {
+        where: {
+            invoiceInFk: id,
+            dueDated: { gte: Date.vnNew() },
+        },
+    });
+
+    if (dueDaysCount) directBooking = false;
+
+    if (directBooking) return toBook(id);
+
+    dialog({
+        component: VnConfirm,
+        componentProps: { title: t('Are you sure you want to book this invoice?') },
+    }).onOk(async () => await toBook(id));
+}
+
+async function toBook(id) {
+    let type = 'positive';
+    let message = t('globals.dataSaved');
+
+    try {
+        await axios.post(`InvoiceIns/${id}/toBook`);
+        store.data.isBooked = true;
+    } catch (e) {
+        type = 'negative';
+        message = t('It was not able to book the invoice');
+    } finally {
+        notify({ type, message });
+    }
+}
+</script>
+<template>
+    <slot name="content" :book="checkToBook" />
+</template>
+<i18n>
+es:
+    Are you sure you want to book this invoice?: ¿Estás seguro de querer asentar esta factura?
+    It was not able to book the invoice: No se pudo contabilizar la factura
+</i18n>

src/pages/Item/Card/ItemBasicData.vue

@@ -220,13 +220,20 @@ const onIntrastatCreated = (response, formData) => {
                     </QIcon>
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
-                <QInput
+                <VnInput
                     :label="t('basicData.description')"
                     type="textarea"
                     v-model="data.description"
                     fill-input
                 />
+                <VnInput
+                    v-show="data.isPhotoRequested"
+                    type="textarea"
+                    :label="t('globals.comment')"
+                    v-model="data.photoMotivation"
+                    fill-input
+                />
             </VnRow>
         </template>
     </FormModel>

src/pages/Supplier/Card/SupplierDescriptor.vue

@@ -183,7 +183,7 @@ const getEntryQueryParams = (supplier) => {
                     <QTooltip>{{ t('Go to client') }}</QTooltip>
                 </QBtn>
                 <QBtn
-                    :href="`${url}invoice-in/create?supplierFk=${entity.id}`"
+                    :href="`#/invoice-in/create?supplierFk=${entity.id}`"
                     size="md"
                     icon="vn:invoice-in-create"
                     color="primary"

src/pages/Worker/Card/WorkerLocker.vue

@@ -27,7 +27,7 @@ const save = async (data) => {
     const lockerId = data.id ?? originaLockerId.value;
     const workerFk = lockerId == originaLockerId.value ? null : entityId.value;
 
-    await axios.patch(`Lockers/${lockerId}`, { workerFk });
+    return axios.patch(`Lockers/${lockerId}`, { workerFk });
 };
 
 const init = async (data) => {

src/router/modules/invoiceIn.js

@@ -37,6 +37,15 @@ export default {
                     },
                     component: () => import('src/pages/InvoiceIn/InvoiceInList.vue'),
                 },
+                {
+                    path: 'create',
+                    name: 'InvoiceInCreare',
+                    meta: {
+                        title: 'invoiceInCreate',
+                        icon: 'create',
+                    },
+                    component: () => import('src/pages/InvoiceIn/InvoiceInCreate.vue'),
+                },
             ],
         },
         {

test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js

@@ -2,8 +2,7 @@
 describe('InvoiceInBasicData', () => {
     const formInputs = '.q-form > .q-card input';
     const firstFormSelect = '.q-card > .vn-row:nth-child(1) > .q-select';
-    const appendBtns = '.q-form label button';
+    const documentBtns = '.q-form .q-field button';
-    const dialogAppendBtns = '.q-dialog label button';
     const dialogInputs = '.q-dialog input';
     const dialogActionBtns = '.q-card__actions button';
 
@@ -15,8 +14,7 @@ describe('InvoiceInBasicData', () => {
     it('should edit the provideer and supplier ref', () => {
         cy.selectOption(firstFormSelect, 'Bros');
         cy.get('[title="Reset"]').click();
-        cy.get(appendBtns).eq(0).click();
+        cy.get(formInputs).eq(1).type('{selectall}4739');
-        cy.get(formInputs).eq(1).type(4739);
         cy.saveCard();
 
         cy.get(`${firstFormSelect} input`).invoke('val').should('eq', 'Plants nick');
@@ -27,22 +25,20 @@ describe('InvoiceInBasicData', () => {
         const firtsInput = 'Ticket:65';
         const secondInput = "I don't know what posting here!";
 
-        cy.get(appendBtns).eq(3).click();
+        cy.get(documentBtns).eq(1).click();
-        cy.get(dialogAppendBtns).eq(0).click();
+        cy.get(dialogInputs).eq(0).type(`{selectall}${firtsInput}`);
-        cy.get(dialogInputs).eq(0).type(firtsInput);
+        cy.get('textarea').type(`{selectall}${secondInput}`);
-        cy.get(dialogAppendBtns).eq(1).click();
-        cy.get('textarea').type(secondInput);
         cy.get(dialogActionBtns).eq(1).click();
 
-        cy.get(appendBtns).eq(3).click();
+        cy.get(documentBtns).eq(1).click();
-
         cy.get(dialogInputs).eq(0).invoke('val').should('eq', firtsInput);
         cy.get('textarea').invoke('val').should('eq', secondInput);
     });
 
     it('should throw an error creating a new dms if a file is not attached', () => {
-        cy.get(appendBtns).eq(2).click();
+        cy.get(formInputs).eq(5).click();
-        cy.get(appendBtns).eq(1).click();
+        cy.get(formInputs).eq(5).type('{selectall}{backspace}');
+        cy.get(documentBtns).eq(0).click();
         cy.get(dialogActionBtns).eq(1).click();
         cy.get('.q-notification__message').should(
             'have.text',

test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js

@@ -0,0 +1,24 @@
+describe('InvoiceInDescriptor', () => {
+    const dialogBtns = '.q-card__actions button';
+    const firstDescritorOpt = '.q-menu > .q-list > :nth-child(1) > .q-item__section';
+    const isBookedField =
+        '.q-card:nth-child(3) .vn-label-value:nth-child(5) > .value > span';
+
+    it('should booking and unbooking the invoice properly', () => {
+        cy.login('developer');
+        cy.visit(`/#/invoice-in/1/summary?limit=10`);
+
+        cy.openLeftMenu();
+        cy.openActionsDescriptor();
+        cy.get(firstDescritorOpt).click();
+        cy.get(dialogBtns).eq(1).click();
+        cy.get('.fullscreen').first().click();
+        cy.get(isBookedField).should('have.attr', 'title', 'true');
+
+        cy.openLeftMenu();
+        cy.openActionsDescriptor();
+        cy.get(firstDescritorOpt).click();
+        cy.get(dialogBtns).eq(1).click();
+        cy.get(isBookedField).should('have.attr', 'title', 'false');
+    });
+});

test/cypress/integration/invoiceIn/invoiceInVat.spec.js

@@ -18,7 +18,7 @@ describe('InvoiceInVat', () => {
         cy.saveCard();
         cy.visit(`/#/invoice-in/1/vat`);
 
-        cy.getValue(firstLineVat).should('equal', 'H.P. IVA 21% CEE');
+        cy.getValue(firstLineVat).should('equal', '8');
     });
 
     it('should add a new row', () => {

test/cypress/integration/vnLog.spec.js

@@ -9,15 +9,15 @@ describe('VnLog', () => {
         cy.visit(`/#/claim/${1}/log`);
         cy.openRightMenu();
     });
-
+    // Se tiene que cambiar el Accept-Language a 'en', ya hay una tarea para eso #7189.
-    it('should filter by insert actions', () => {
+    xit('should filter by insert actions', () => {
         cy.checkOption(':nth-child(7) > .q-checkbox');
         cy.get('.q-page').click();
         cy.validateContent(chips[0], 'Document');
         cy.validateContent(chips[1], 'Beginning');
     });
 
-    it('should filter by entity', () => {
+    xit('should filter by entity', () => {
         cy.selectOption('.q-drawer--right .q-item > .q-select', 'Claim');
         cy.get('.q-page').click();
         cy.validateContent(chips[0], 'Claim');

test/cypress/integration/worker/workerLocker.spec.js

@@ -1,4 +1,4 @@
-describe('WorkerList', () => {
+describe('WorkerLocker', () => {
     const workerId = 1109;
     const lockerCode = '2F';
     const input = '.q-card input';

test/cypress/support/commands.js

@@ -92,8 +92,13 @@ Cypress.Commands.add('checkOption', (selector) => {
 
 // Global buttons
 Cypress.Commands.add('saveCard', () => {
+    const dropdownArrow = '.q-btn-dropdown__arrow-container > .q-btn__content > .q-icon';
+    cy.get('#st-actions').then(($el) => {
+        if ($el.find(dropdownArrow).length) cy.get(dropdownArrow).click();
+    });
     cy.get('[title="Save"]').click();
 });
+
 Cypress.Commands.add('resetCard', () => {
     cy.get('[title="Reset"]').click();
 });

test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js

@@ -1,34 +0,0 @@
-import { vi, describe, expect, it, beforeAll } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
-import InvoiceInBasicData from 'src/pages/InvoiceIn/Card/InvoiceInBasicData.vue';
-
-describe('InvoiceInBasicData', () => {
-    let vm;
-
-    beforeAll(() => {
-        vm = createWrapper(InvoiceInBasicData, {
-            global: {
-                stubs: [],
-                mocks: {
-                    fetch: vi.fn(),
-                },
-            },
-        }).vm;
-    });
-
-    describe('upsert()', () => {
-        it('should throw an error when data is empty', async () => {
-            vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
-            vi.spyOn(vm.quasar, 'notify');
-
-            await vm.upsert();
-
-            expect(vm.quasar.notify).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    message: `The company can't be empty`,
-                    type: 'negative',
-                })
-            );
-        });
-    });
-});

test/vitest/__tests__/pages/InvoiceIn/InvoiceInIntrastat.spec.js

@@ -19,13 +19,13 @@ describe('InvoiceInIntrastat', () => {
 
     describe('getTotal()', () => {
         it('should correctly handle the sum', () => {
-            vm.invoceInIntrastat = [
+            const invoceInIntrastat = [
                 { amount: 10, stems: 162 },
                 { amount: 20, stems: 21 },
             ];
 
-            const totalAmount = vm.getTotal('amount');
+            const totalAmount = vm.getTotal(invoceInIntrastat, 'amount');
-            const totalStems = vm.getTotal('stems');
+            const totalStems = vm.getTotal(invoceInIntrastat, 'stems');
 
             expect(totalAmount).toBe(10 + 20);
             expect(totalStems).toBe(162 + 21);

test/vitest/__tests__/pages/InvoiceIn/InvoiceInVat.spec.js

@@ -1,5 +1,5 @@
 import { vi, describe, expect, it, beforeAll } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import { createWrapper } from 'app/test/vitest/helper';
 import InvoiceInVat from 'src/pages/InvoiceIn/Card/InvoiceInVat.vue';
 
 describe('InvoiceInVat', () => {
@@ -16,41 +16,6 @@ describe('InvoiceInVat', () => {
         }).vm;
     });
 
-    describe('addExpense()', () => {
-        beforeAll(() => {
-            vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
-            vi.spyOn(axios, 'get').mockResolvedValue({ data: [] });
-            vi.spyOn(vm.quasar, 'notify');
-        });
-
-        it('should throw an error when the code property is undefined', async () => {
-            await vm.addExpense();
-
-            expect(vm.quasar.notify).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    message: `The code can't be empty`,
-                    type: 'negative',
-                })
-            );
-        });
-
-        it('should correctly handle expense addition', async () => {
-            vm.newExpense = {
-                code: 123,
-                isWithheld: false,
-                description: 'Descripción del gasto',
-            };
-
-            await vm.addExpense();
-            expect(vm.quasar.notify).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    message: 'Data saved',
-                    type: 'positive',
-                })
-            );
-        });
-    });
-
     describe('taxRate()', () => {
         it('should correctly compute the tax rate', () => {
             const invoiceInTax = { taxableBase: 100, taxTypeSageFk: 1 };

test/vitest/helper.js

@@ -24,6 +24,7 @@ vi.mock('vue-router', () => ({
                 params: {
                     id: 1,
                 },
+                meta: { moduleName: 'mockName' },
             },
         },
     }),
@@ -31,6 +32,7 @@ vi.mock('vue-router', () => ({
         matched: [],
         query: {},
         params: {},
+        meta: { moduleName: 'mockName' },
     }),
 }));