feat: refs #6480 setArrayData

src/components/common/VnCard.vue

@@ -1,26 +1,52 @@
 <script setup>
+import { computed, onBeforeMount } 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 LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import LeftMenu from 'components/LeftMenu.vue';
 
-defineProps({
+const props = defineProps({
+    dataKey: { type: String, default: null },
+    baseUrl: { type: String, default: null },
+    model: { type: String, default: null },
+    filter: { type: Object, default: null },
     descriptor: { type: Object, required: true },
-    searchbarProps: { type: Object, required: true },
+    searchbarDataKey: { type: String, required: true },
+    searchbarUrl: { type: String, required: true },
+    searchbarLabel: { type: String, required: true },
+    searchbarInfo: { type: String, required: true },
 });
 
 const { t } = useI18n();
 const stateStore = useStateStore();
+const route = useRoute();
+const url = computed(() => `${props.baseUrl}/${route.params.id}`);
+let arrayData;
+
+if (props.dataKey) {
+    arrayData = useArrayData(props.dataKey, { url, filter: props.filter });
+
+    onBeforeMount(async () => await arrayData.fetch({ append: false }));
+
+    onBeforeRouteUpdate(async (to, from) => {
+        if (!to.params.id !== from.params.id) {
+            arrayData.store.url = url;
+            await arrayData.fetch({ append: false });
+        }
+    });
+}
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
         <VnSearchbar
-            :data-key="searchbarProps.dataKey"
-            :url="searchbarProps.url"
-            :label="t(searchbarProps.label)"
-            :info="t(searchbarProps.info)"
+            :data-key="props.searchbarDataKey"
+            :url="props.searchbarUrl"
+            :label="t(`${props.model}.searchbar.${props.searchbarLabel}`)"
+            :info="t(props.searchbarInfo)"
         />
     </Teleport>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -1,16 +1,6 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import { useArrayData } from 'src/composables/useArrayData';
-import { onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
 import VnCard from 'components/common/VnCard.vue';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
-const route = useRoute();
+import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
 
 const filter = {
     include: [
@@ -19,51 +9,27 @@ const filter = {
             scope: {
                 include: {
                     relation: 'contacts',
-                    scope: {
-                        where: {
-                            email: { neq: null },
-                        },
-                    },
+                    scope: { where: { email: { neq: null } } },
                 },
             },
         },
-        {
-            relation: 'invoiceInDueDay',
-        },
-        {
-            relation: 'company',
-        },
-        {
-            relation: 'currency',
-        },
+        { relation: 'invoiceInDueDay' },
+        { 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) => {
-        if (newId) {
-            arrayData.store.url = `InvoiceIns/${newId}`;
-            await arrayData.fetch({ append: false });
-        }
-    }
-);
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="InvoiceInList"
-            url="InvoiceIns/filter"
-            :label="t('Search invoice')"
-            :info="t('You can search by invoice reference')"
-        />
-    </Teleport>
-    <VnCard :descriptor="InvoiceInDescriptor" />
+    <VnCard
+        data-key="InvoiceIn"
+        base-url="InvoiceIns"
+        :filter="filter"
+        :descriptor="InvoiceInDescriptor"
+        searchbar-data-key="InvoiceInList"
+        searchbar-url="InvoiceIns/filter"
+        searchbar-label="Search invoice"
+        searchbar-info="You can search by invoice reference"
+    />
 </template>
 <i18n>
     es:

src/pages/InvoiceOut/Card/InvoiceOutCard.vue

@@ -1,20 +1,18 @@
 <script setup>
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
 import VnCard from 'components/common/VnCard.vue';
-
-const searchbar = {
-    dataKey: 'InvoiceOutList',
-    url: 'InvoiceOuts/filter',
-    label: 'Search invoice',
-    info: 'You can search by invoice reference',
-};
 </script>
 <template>
-    <VnCard :descriptor="InvoiceOutDescriptor" :searchbar-props="searchbar" />
+    <VnCard
+        :descriptor="InvoiceOutDescriptor"
+        searchbar-data-key="InvoiceOutList"
+        searchbar-url="InvoiceOuts/filter"
+        searchbar-label="Search invoice"
+        searchbar-info="You can search by invoice reference"
+    />
 </template>
-
 <i18n>
     es:
         Search invoice: Buscar factura emitida
         You can search by invoice reference: Puedes buscar por referencia de la factura
-    </i18n>
+</i18n>