Merge pull request '#6480 improve Card' (!271) from 6480-improveCard into dev

Reviewed-on: verdnatura/salix-front#271
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/FormModel.vue

@@ -102,7 +102,7 @@ onMounted(async () => {
 });
 
 onBeforeRouteLeave((to, from, next) => {
-    if (hasChanges.value)
+    if (hasChanges.value && $props.observeFormChanges)
         quasar.dialog({
             component: VnConfirm,
             componentProps: {

src/components/common/VnCard.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { onBeforeMount, computed } from 'vue';
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import useCardSize from 'src/composables/useCardSize';
+import VnSubToolbar from '../ui/VnSubToolbar.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import LeftMenu from 'components/LeftMenu.vue';
+
+const props = defineProps({
+    dataKey: { type: String, required: true },
+    baseUrl: { type: String, default: undefined },
+    customUrl: { type: String, default: undefined },
+    filter: { type: Object, default: () => {} },
+    descriptor: { type: Object, required: true },
+    searchbarDataKey: { type: String, default: undefined },
+    searchbarUrl: { type: String, default: undefined },
+    searchbarLabel: { type: String, default: '' },
+    searchbarInfo: { type: String, default: '' },
+});
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+const route = useRoute();
+const url = computed(() => {
+    if (props.baseUrl) return `${props.baseUrl}/${route.params.id}`;
+    return props.customUrl;
+});
+
+const arrayData = useArrayData(props.dataKey, {
+    url: url.value,
+    filter: props.filter,
+});
+
+onBeforeMount(async () => {
+    if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
+    await arrayData.fetch({ append: false });
+});
+
+if (props.baseUrl) {
+    onBeforeRouteUpdate(async (to, from) => {
+        if (to.params.id !== from.params.id) {
+            arrayData.store.url = `${props.baseUrl}/${route.params.id}`;
+            await arrayData.fetch({ append: false });
+        }
+    });
+}
+</script>
+<template>
+    <Teleport
+        to="#searchbar"
+        v-if="stateStore.isHeaderMounted() && props.searchbarDataKey"
+    >
+        <VnSearchbar
+            :data-key="props.searchbarDataKey"
+            :url="props.searchbarUrl"
+            :label="t(props.searchbarLabel)"
+            :info="t(props.searchbarInfo)"
+        />
+    </Teleport>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <component :is="descriptor" />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <VnSubToolbar />
+            <div :class="[useCardSize(), $attrs.class]">
+                <RouterView />
+            </div>
+        </QPage>
+    </QPageContainer>
+</template>

src/components/ui/CardDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, useSlots, watch, computed, ref } from 'vue';
+import { onBeforeMount, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
@@ -38,7 +38,6 @@ const $props = defineProps({
 });
 
 const state = useState();
-const slots = useSlots();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const arrayData = useArrayData($props.dataKey || $props.module, {
@@ -47,7 +46,7 @@ const arrayData = useArrayData($props.dataKey || $props.module, {
     skip: 0,
 });
 const { store } = arrayData;
-const entity = computed(() =>Array.isArray( store.data) ? store.data[0] : store.data);
+const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
 defineExpose({
@@ -55,14 +54,12 @@ defineExpose({
 });
 onBeforeMount(async () => {
     await getData();
-    watch(
+    watch($props, async () => await getData());
-        () => $props.url,
-        async () => await getData()
-    );
 });
 
 async function getData() {
     store.url = $props.url;
+    store.filter = $props.filter ?? {};
     isLoading.value = true;
     try {
         const { data } = await arrayData.fetch({ append: false, updateRouter: false });
@@ -117,7 +114,7 @@ const emit = defineEmits(['onFetch']);
                     icon="more_vert"
                     round
                     size="md"
-                    :class="{ invisible: !slots.menu }"
+                    :class="{ invisible: !$slots.menu }"
                 >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}

src/components/ui/CardSummary.vue

@@ -15,7 +15,7 @@ const props = defineProps({
         default: null,
     },
     entityId: {
-        type: Number,
+        type: [Number, String],
         default: null,
     },
     dataKey: {
@@ -32,7 +32,7 @@ const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
     skip: 0,
 });
 const { store } = arrayData;
-const entity = computed(() => Array.isArray(store.data) ? store.data[0] : store.data);
+const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
 defineExpose({
@@ -48,9 +48,10 @@ onBeforeMount(async () => {
 
 async function fetch() {
     store.url = props.url;
+    store.filter = props.filter ?? {};
     isLoading.value = true;
     const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-    emit('onFetch', data);
+    emit('onFetch', Array.isArray(data) ? data[0] : data);
     isLoading.value = false;
 }
 </script>

src/components/ui/VnSearchbar.vue

@@ -131,13 +131,6 @@ async function search() {
                 />
             </template>
             <template #append>
-                <QIcon
-                    v-if="searchText !== ''"
-                    name="close"
-                    @click="searchText = ''"
-                    class="cursor-pointer"
-                />
-
                 <QIcon
                     v-if="props.info && $q.screen.gt.xs"
                     name="info"

src/components/ui/VnSubToolbar.vue

@@ -1,11 +1,27 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-
 const stateStore = useStateStore();
+const actions = ref(null);
+const data = ref(null);
+const opts = { subtree: true, childList: true, attributes: true };
+const hasContent = ref(false);
 
 onMounted(() => {
     stateStore.toggleSubToolbar();
+    actions.value = document.querySelector('#st-actions');
+    data.value = document.querySelector('#st-data');
+
+    if (!actions.value && !data.value) return;
+
+    // Check if there's content to display
+    const observer = new MutationObserver(
+        () =>
+            (hasContent.value =
+                actions.value.childNodes.length + data.value.childNodes.length)
+    );
+    if (actions.value) observer.observe(actions.value, opts);
+    if (data.value) observer.observe(data.value, opts);
 });
 
 onUnmounted(() => {
@@ -14,7 +30,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="bg-vn-section-color justify-end sticky">
+    <QToolbar
+        class="justify-end sticky"
+        v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
+    >
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>

src/css/app.scss

@@ -169,3 +169,18 @@ input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     -moz-appearance: none;
 }
+
+// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
+.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
+    background-color: $primary !important;
+    color: white !important;
+}
+
+.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
+    background-color: $primary !important;
+    color: white !important;
+}
+
+.q-scrollarea__content {
+    max-width: 100%;
+}

src/pages/Claim/Card/ClaimCard.vue

@@ -1,46 +1,15 @@
 <script setup>
-import LeftMenu from 'components/LeftMenu.vue';
+import VnCard from 'components/common/VnCard.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
-import { useI18n } from 'vue-i18n';
 import ClaimDescriptor from './ClaimDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+    <VnCard
-        <VnSearchbar
+        data-key="Claim"
-            data-key="ClaimList"
+        base-url="Claims"
-            url="Claims/filter"
+        :descriptor="ClaimDescriptor"
-            :label="t('Search claim')"
+        searchbar-data-key="ClaimList"
-            :info="t('You can search by claim id or customer name')"
+        searchbar-url="Claims/filter"
-        />
+        searchbar-label="Search claim"
-    </Teleport>
+        searchbar-info="You can search by claim id or customer name"
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+    />
-        <QScrollArea class="fit">
-            <ClaimDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>
-
-<i18n>
-es:
-    Search claim: Buscar reclamación
-    You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
-    Details: Detalles
-    Notes: Notas
-    Action: Acción
-</i18n>

src/pages/Claim/locale/es.yml

@@ -0,0 +1,2 @@
+Search claim: Buscar reclamación
+You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente

src/pages/Customer/Card/CustomerCard.vue

@@ -1,43 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import VnCard from 'components/common/VnCard.vue';
-import { useStateStore } from 'stores/useStateStore';
 import CustomerDescriptor from './CustomerDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+    <VnCard
-        <VnSearchbar
+        data-key="Client"
-            data-key="CustomerList"
+        base-url="Clients"
-            url="Clients/filter"
+        :descriptor="CustomerDescriptor"
-            :label="t('Search customer')"
+        searchbar-data-key="CustomerList"
-            :info="t('You can search by customer id or name')"
+        searchbar-url="Clients/filter"
-        />
+        searchbar-label="Search customer"
-    </Teleport>
+        searchbar-info="You can search by customer id or name"
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+    />
-        <QScrollArea class="fit">
-            <CustomerDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>
-
-<i18n>
-es:
-    Search customer: Buscar cliente
-    You can search by customer id or name: Puedes buscar por id o nombre del cliente
-</i18n>

src/pages/Customer/locale/es.yml

@@ -1,3 +1,5 @@
+Search customer: Buscar cliente
+You can search by customer id or name: Puedes buscar por id o nombre del cliente
 customerFilter:
     filter:
         name: Nombre

src/pages/Department/Card/DepartmentCard.vue

@@ -1,26 +1,13 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import DepartmentDescriptor from 'pages/Department/Card/DepartmentDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+    <VnCard
-        <QScrollArea class="fit">
+        class="q-pa-md column items-center"
-            <DepartmentDescriptor />
+        v-bind="{ ...$attrs }"
-            <QSeparator />
+        data-key="Department"
-            <LeftMenu source="card" />
+        base-url="Departments"
-        </QScrollArea>
+        :descriptor="DepartmentDescriptor"
-    </QDrawer>
+    />
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div class="q-pa-md column items-center">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>

src/pages/Department/Card/DepartmentSummary.vue

@@ -27,6 +27,7 @@ onMounted(async () => {
 
 <template>
     <CardSummary
+        data-key="DepartmentSummary"
         ref="summary"
         :url="`Departments/${entityId}`"
         class="full-width"

src/pages/Entry/Card/EntryCard.vue

@@ -1,48 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import VnCard from 'components/common/VnCard.vue';
-
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import EntryDescriptor from './EntryDescriptor.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-import useCardSize from 'src/composables/useCardSize';
-
-const { t } = useI18n();
-const stateStore = useStateStore();
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
+    <VnCard
-        <Teleport to="#searchbar">
+        data-key="Entry"
-            <VnSearchbar
+        base-url="Entries"
-                data-key="EntryList"
+        :descriptor="EntryDescriptor"
-                url="Entries/filter"
+        searchbar-data-key="EntryList"
-                :label="t('Search entries')"
+        searchbar-url="Entries/filter"
-                :info="t('You can search by entry reference')"
+        searchbar-label="Search entries"
-            />
+        searchbar-info="You can search by entry reference"
-        </Teleport>
+    />
-    </template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <EntryDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>
-
-<i18n>
-es:
-    Search entries: Buscar entradas
-    You can search by entry reference: Puedes buscar por referencia de la entrada
-</i18n>

src/pages/Entry/locale/es.yml

@@ -1,3 +1,5 @@
+Search entries: Buscar entradas
+You can search by entry reference: Puedes buscar por referencia de la entrada
 entryList:
     list:
         inventoryEntry: Es inventario

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -1,18 +1,6 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import VnCard from 'components/common/VnCard.vue';
-import { useStateStore } from 'stores/useStateStore';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import { useArrayData } from 'src/composables/useArrayData';
-import { onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
-const route = useRoute();
 
 const filter = {
     include: [
@@ -21,69 +9,25 @@ const filter = {
             scope: {
                 include: {
                     relation: 'contacts',
-                    scope: {
+                    scope: { where: { email: { neq: null } } },
-                        where: {
-                            email: { neq: null },
-                        },
-                    },
                 },
             },
         },
-        {
+        { relation: 'invoiceInDueDay' },
-            relation: 'invoiceInDueDay',
+        { relation: 'company' },
-        },
+        { relation: 'currency' },
-        {
-            relation: 'company',
-        },
-        {
-            relation: 'currency',
-        },
     ],
 };
-const arrayData = useArrayData('InvoiceIn', {
-    url: `InvoiceIns/${route.params.id}`,
-    filter,
-});
-
-onMounted(async () => await arrayData.fetch({ append: false }));
-watch(
-    () => route.params.id,
-    async (newId, oldId) => {
-        if (newId) {
-            arrayData.store.url = `InvoiceIns/${newId}`;
-            await arrayData.fetch({ append: false });
-        }
-    }
-);
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+    <VnCard
-        <VnSearchbar
+        data-key="InvoiceIn"
-            data-key="InvoiceInList"
+        base-url="InvoiceIns"
-            url="InvoiceIns/filter"
+        :filter="filter"
-            :label="t('Search invoice')"
+        :descriptor="InvoiceInDescriptor"
-            :info="t('You can search by invoice reference')"
+        searchbar-data-key="InvoiceInList"
-        />
+        searchbar-url="InvoiceIns/filter"
-    </Teleport>
+        searchbar-label="Search invoice"
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        searchbar-info="You can search by invoice reference"
-        <QScrollArea class="fit">
+    />
-            <InvoiceInDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>
-
-<i18n>
-    es:
-        Search invoice: Buscar factura recibida
-        You can search by invoice reference: Puedes buscar por referencia de la factura
-    </i18n>

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -7,7 +7,6 @@ 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 { useCapitalize } from 'src/composables/useCapitalize';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
@@ -70,19 +69,15 @@ const suppliersRef = ref();
                 </QItemSection>
             </QItem>
             <QItem>
-                    <QItemSection>
+                <QItemSection>
-                        <VnInputDate
+                    <VnInputDate :label="t('From')" v-model="params.from" is-outlined />
-                            :label="t('From')"
+                </QItemSection>
-                            v-model="params.from"
+            </QItem>
-                            is-outlined
+            <QItem>
-                        />
+                <QItemSection>
-                    </QItemSection>
+                    <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                </QItem>
+                </QItemSection>
-                <QItem>
+            </QItem>
-                    <QItemSection>
-                        <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                    </QItemSection>
-                </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -114,33 +109,33 @@ const suppliersRef = ref();
             </QItem>
             <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
-                <QItemSection>
+                    <QItemSection>
-                    <VnInput
+                        <VnInput
-                        :label="t('params.fi')"
+                            :label="t('params.fi')"
-                        v-model="params.fi"
+                            v-model="params.fi"
-                        is-outlined
+                            is-outlined
-                        lazy-rules
+                            lazy-rules
-                    >
+                        >
-                        <template #prepend>
+                            <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
+                                <QIcon name="badge" size="sm"></QIcon>
-                        </template>
+                            </template>
-                    </VnInput>
+                        </VnInput>
-                </QItemSection>
+                    </QItemSection>
-            </QItem>
+                </QItem>
-            <QItem>
+                <QItem>
-                <QItemSection>
+                    <QItemSection>
-                    <VnInput
+                        <VnInput
-                        :label="t('params.serialNumber')"
+                            :label="t('params.serialNumber')"
-                        v-model="params.serialNumber"
+                            v-model="params.serialNumber"
-                        is-outlined
+                            is-outlined
-                        lazy-rules
+                            lazy-rules
-                    >
+                        >
-                        <template #prepend>
+                            <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
+                                <QIcon name="badge" size="sm"></QIcon>
-                        </template>
+                            </template>
-                    </VnInput>
+                        </VnInput>
-                </QItemSection>
+                    </QItemSection>
-            </QItem>
+                </QItem>
                 <QItem>
                     <QItemSection>
                         <VnInput

src/pages/InvoiceIn/locale/es.yml

@@ -0,0 +1,2 @@
+Search invoice: Buscar factura recibida
+You can search by invoice reference: Puedes buscar por referencia de la factura

src/pages/InvoiceOut/Card/InvoiceOutCard.vue

@@ -1,43 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
+import VnCard from 'components/common/VnCard.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+    <VnCard
-        <VnSearchbar
+        data-key="InvoiceOut"
-            data-key="InvoiceOutList"
+        base-url="InvoiceOuts"
-            url="InvoiceOuts/filter"
+        :descriptor="InvoiceOutDescriptor"
-            :label="t('Search invoice')"
+        searchbar-data-key="InvoiceOutList"
-            :info="t('You can search by invoice reference')"
+        searchbar-url="InvoiceOuts/filter"
-        />
+        searchbar-label="Search invoice"
-    </Teleport>
+        searchbar-info="You can search by invoice reference"
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+    />
-        <QScrollArea class="fit">
-            <InvoiceOutDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>
-
-<i18n>
-    es:
-        Search invoice: Buscar factura emitida
-        You can search by invoice reference: Puedes buscar por referencia de la factura
-    </i18n>

src/pages/InvoiceOut/locale/es.yml

@@ -0,0 +1,2 @@
+Search invoice: Buscar factura emitida
+You can search by invoice reference: Puedes buscar por referencia de la factura

src/pages/Item/Card/ItemCard.vue

@@ -1,28 +1,7 @@
 <script setup>
-import LeftMenu from 'components/LeftMenu.vue';
+import VnCard from 'components/common/VnCard.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import ItemDescriptor from './ItemDescriptor.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+    <VnCard data-key="Item" base-url="Items" :descriptor="ItemDescriptor" />
-        <QScrollArea class="fit">
-            <ItemDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>

src/pages/Order/Card/OrderCard.vue

@@ -1,23 +1,7 @@
 <script setup>
-import LeftMenu from 'components/LeftMenu.vue';
+import VnCard from 'components/common/VnCard.vue';
-import { useStateStore } from 'stores/useStateStore';
 import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+    <VnCard data-key="Order" base-url="Orders" :descriptor="OrderDescriptor" />
-        <QScrollArea class="fit">
-            <OrderDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <RouterView></RouterView>
-        </QPage>
-    </QPageContainer>
 </template>

src/pages/Parking/Card/ParkingBasicData.vue

@@ -4,7 +4,6 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'src/components/FetchData.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
@@ -28,7 +27,6 @@ const filter = {
         @on-fetch="(data) => (sectors = data)"
         auto-load
     />
-    <VnSubToolbar />
     <FormModel :url="`Parkings/${parkingId}`" model="parking" :filter="filter" auto-load>
         <template #form="{ data }">
             <VnRow>

src/pages/Parking/Card/ParkingCard.vue

@@ -1,57 +1,21 @@
 <script setup>
-import { onMounted, watch } from 'vue';
+import VnCard from 'components/common/VnCard.vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import { useArrayData } from 'src/composables/useArrayData';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import ParkingDescriptor from 'pages/Parking/Card/ParkingDescriptor.vue';
 
-const { t } = useI18n();
-const route = useRoute();
-const stateStore = useStateStore();
-
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
     include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
 };
-
-const arrayData = useArrayData('Parking', {
-    url: `Parkings/${route.params.id}`,
-    filter,
-});
-const { store } = arrayData;
-onMounted(async () => await arrayData.fetch({ append: false }));
-watch(
-    () => route.params.id,
-    async (newId) => {
-        if (newId) {
-            store.url = `Parkings/${newId}`;
-            store.filter = filter;
-            await arrayData.fetch({ append: false });
-        }
-    }
-);
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+    <VnCard
-        <VnSearchbar
+        data-key="Parking"
-            :info="t('parking.searchBar.info')"
+        base-url="Parkings"
-            :label="t('parking.searchBar.label')"
+        :filter="filter"
-            data-key="Parking"
+        :descriptor="ParkingDescriptor"
-        />
+        searchbar-data-key="ParkingList"
-    </Teleport>
+        searchbar-url="Parkings"
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        searchbar-label="parking.searchBar.label"
-        <QScrollArea class="fit">
+        searchbar-info="parking.searchBar.info"
-            <ParkingDescriptor />
+    />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <RouterView></RouterView>
-        </QPage>
-    </QPageContainer>
 </template>

src/pages/Parking/Card/ParkingSummary.vue

@@ -11,9 +11,9 @@ const $props = defineProps({
         default: 0,
     },
 });
-const { params } = useRoute();
+const router = useRoute();
 const { t } = useI18n();
-const entityId = computed(() => $props.id || params.id);
+const entityId = computed(() => $props.id || router.params.id);
 
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],

src/pages/Route/Card/RouteCard.vue

@@ -1,22 +1,7 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
-import LeftMenu from 'components/LeftMenu.vue';
 import RouteDescriptor from 'pages/Route/Card/RouteDescriptor.vue';
-// import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+    <VnCard data-key="Route" base-url="Routes" :descriptor="RouteDescriptor" />
-        <QScrollArea class="fit">
-            <RouteDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <RouterView></RouterView>
-        </QPage>
-    </QPageContainer>
 </template>

src/pages/Shelving/Card/ShelvingCard.vue

@@ -1,21 +1,7 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
-import LeftMenu from 'components/LeftMenu.vue';
 import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+    <VnCard data-key="Shelving" base-url="Shelvings" :descriptor="ShelvingDescriptor" />
-        <QScrollArea class="fit">
-            <ShelvingDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <RouterView></RouterView>
-        </QPage>
-    </QPageContainer>
 </template>

src/pages/Supplier/Card/SupplierCard.vue

@@ -1,73 +1,14 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import VnCard from 'components/common/VnCard.vue';
-import { useStateStore } from 'stores/useStateStore';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import LeftMenu from 'components/LeftMenu.vue';
 import SupplierDescriptor from './SupplierDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
+    <VnCard
-        <Teleport to="#searchbar">
+        data-key="Supplier"
-            <VnSearchbar
+        base-url="Suppliers"
-                data-key="SuppliersList"
+        :descriptor="SupplierDescriptor"
-                url="Suppliers/filter"
+        searchbar-data-key="SupplierList"
-                :limit="20"
+        searchbar-url="Suppliers/filter"
-                :label="t('Search suppliers')"
+        searchbar-label="Search suppliers"
-            />
+    />
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <SupplierDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>
-
-<style lang="scss">
-.q-scrollarea__content {
-    max-width: 100%;
-}
-</style>
-
-<style lang="scss" scoped>
-.descriptor {
-    max-width: 256px;
-
-    h5 {
-        margin: 0 15px;
-    }
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .q-card__actions {
-        justify-content: center;
-    }
-
-    #descriptor-skeleton .q-card__actions {
-        justify-content: space-between;
-    }
-}
-</style>
-
-<i18n>
-    es:
-        Search suppliers: Buscar proveedores
-</i18n>

src/pages/Supplier/locale/es.yml

@@ -0,0 +1 @@
+Search suppliers: Buscar proveedores

src/pages/Ticket/Card/TicketCard.vue

@@ -1,73 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import VnCard from 'components/common/VnCard.vue';
-import { useStateStore } from 'stores/useStateStore';
 import TicketDescriptor from './TicketDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+    <VnCard
-        <VnSearchbar
+        data-key="Ticket"
-            data-key="TicketList"
+        base-url="Tickets"
-            url="Tickets/filter"
+        :descriptor="TicketDescriptor"
-            :label="t('Search ticket')"
+        searchbar-data-key="TicketList"
-            :info="t('You can search by ticket id or alias')"
+        searchbar-url="Tickets/filter"
-        />
+        searchbar-label="Search ticket"
-    </Teleport>
+        searchbar-info="You can search by ticket id or alias"
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+    />
-        <QScrollArea class="fit">
-            <TicketDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>
-
-<style lang="scss">
-.q-scrollarea__content {
-    max-width: 100%;
-}
-</style>
-
-<style lang="scss" scoped>
-.descriptor {
-    max-width: 256px;
-
-    h5 {
-        margin: 0 15px;
-    }
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .q-card__actions {
-        justify-content: center;
-    }
-
-    #descriptor-skeleton .q-card__actions {
-        justify-content: space-between;
-    }
-}
-</style>
-
-<i18n>
-es:
-    Search ticket: Buscar ticket
-    You can search by ticket id or alias: Puedes buscar por id o alias del ticket
-</i18n>

src/pages/Ticket/Card/TicketSummary.vue

@@ -91,8 +91,8 @@ async function changeState(value) {
     >
         <template #header="{ entity }">
             <div>
-                Ticket #{{ entity.id }} - {{ entity.client.name }} ({{
+                Ticket #{{ entity.id }} - {{ entity.client?.name }} ({{
-                    entity.client.id
+                    entity.client?.id
                 }}) -
                 {{ entity.nickname }}
             </div>

src/pages/Ticket/locale/es.yml

@@ -0,0 +1,2 @@
+Search ticket: Buscar ticket
+You can search by ticket id or alias: Puedes buscar por id o alias del ticket

src/pages/Travel/Card/TravelCard.vue

@@ -1,55 +1,7 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import TravelDescriptor from './TravelDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+    <VnCard data-key="Travel" base-url="Travels" :descriptor="TravelDescriptor" />
-        <QScrollArea class="fit">
-            <TravelDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>
-
-<style lang="scss">
-.q-scrollarea__content {
-    max-width: 100%;
-}
-</style>
-
-<style lang="scss" scoped>
-.descriptor {
-    max-width: 256px;
-
-    h5 {
-        margin: 0 15px;
-    }
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .q-card__actions {
-        justify-content: center;
-    }
-
-    #descriptor-skeleton .q-card__actions {
-        justify-content: space-between;
-    }
-}
-</style>

src/pages/Wagon/Card/WagonCard.vue

@@ -1,32 +1,6 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import VnCard from 'components/common/VnCard.vue';
-import { useStateStore } from 'stores/useStateStore';
-import { useRoute } from 'vue-router';
-import LeftMenu from 'components/LeftMenu.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const route = useRoute();
-const { t } = useI18n();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+    <VnCard data-key="Wagon" base-url="Wagons" />
-        <QScrollArea class="fit">
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>
-
-<i18n>
-es:
-    Search customer: Buscar cliente
-    You can search by customer id or name: Puedes buscar por id o nombre del cliente
-</i18n>

src/pages/Worker/Card/WorkerCard.vue

@@ -1,44 +1,18 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import VnCard from 'components/common/VnCard.vue';
-import { useStateStore } from 'stores/useStateStore';
 import WorkerDescriptor from './WorkerDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
 
-const stateStore = useStateStore();
+const filter = { where: {} };
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+    <VnCard
-        <VnSearchbar
+        data-key="Worker"
-            data-key="WorkerList"
+        custom-url="Workers/Summary"
-            url="Workers/filter"
+        :descriptor="WorkerDescriptor"
-            :label="t('Search worker')"
+        :filter="filter"
-            :info="t('You can search by worker id or name')"
+        searchbar-data-key="WorkerList"
-        />
+        searchbar-url="Workers/filter"
-    </Teleport>
+        searchbar-label="Search worker"
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        searchbar-info="You can search by worker id or name"
-        <QScrollArea class="fit">
+    />
-            <WorkerDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>
-
-<i18n>
-es:
-    Search worker: Buscar trabajador
-    You can search by worker id or name: Puedes buscar por id o nombre del trabajador
-</i18n>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -31,7 +31,9 @@ const entityId = computed(() => {
 });
 
 const worker = ref();
-const filter = { where: { id: entityId } };
+const filter = computed(() => {
+    return { where: { id: entityId.value } };
+});
 
 const sip = ref(null);
 

src/pages/Worker/Card/WorkerSummary.vue

@@ -10,7 +10,7 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
-const { params } = useRoute();
+const route = useRoute();
 const { t } = useI18n();
 
 const $props = defineProps({
@@ -20,18 +20,25 @@ const $props = defineProps({
     },
 });
 
-const entityId = computed(() => $props.id || params.id);
+const entityId = computed(() => $props.id || route.params.id);
 const workerUrl = ref();
 
 onMounted(async () => {
     workerUrl.value = (await getUrl('')) + `worker/${entityId.value}/`;
 });
 
-const filter = { where: { id: entityId.value } };
+const filter = computed(() => {
+    return { where: { id: entityId.value } };
+});
 </script>
 
 <template>
-    <CardSummary ref="summary" :url="`Workers/summary`" :filter="filter">
+    <CardSummary
+        data-key="workerData"
+        ref="summary"
+        :url="`Workers/summary`"
+        :filter="filter"
+    >
         <template #header="{ entity }">
             <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
         </template>
@@ -41,7 +48,7 @@ const filter = { where: { id: entityId.value } };
                     :url="workerUrl + `basic-data`"
                     :text="t('worker.summary.basicData')"
                 />
-                <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
+                <VnLv :label="t('worker.card.name')" :value="worker.user?.nickname" />
                 <VnLv
                     :label="t('worker.list.department')"
                     :value="worker.department?.department?.name"

src/pages/Worker/locale/es.yml

@@ -0,0 +1,2 @@
+Search worker: Buscar trabajador
+You can search by worker id or name: Puedes buscar por id o nombre del trabajador