fix: refs #6891 reactivity & show filter panel

src/pages/Parking/Card/ParkingCard.vue

@@ -1,6 +1,7 @@
 <script setup>
 import VnCard from 'components/common/VnCard.vue';
 import ParkingDescriptor from 'pages/Parking/Card/ParkingDescriptor.vue';
+import ParkingFilter from 'pages/Parking/ParkingFilter.vue';
 
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
@@ -13,6 +14,7 @@ const filter = {
         base-url="Parkings"
         :filter="filter"
         :descriptor="ParkingDescriptor"
+        :filter-panel="ParkingFilter"
         searchbar-data-key="ParkingList"
         searchbar-url="Parkings"
         searchbar-label="parking.searchBar.label"

src/pages/Parking/Card/ParkingDescriptor.vue

@@ -15,10 +15,10 @@ const props = defineProps({
 });
 
 const { t } = useI18n();
-const { params } = useRoute();
+const route = useRoute();
-const entityId = computed(() => props.id || params.id);
+const entityId = computed(() => props.id || route.params.id);
 const { store } = useArrayData('Parking');
-const card = computed(() => store.data);
+const parking = computed(() => store.data);
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
     include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
@@ -29,11 +29,12 @@ const filter = {
         module="Parking"
         data-key="Parking"
         :url="`Parkings/${entityId}`"
-        :title="card?.code"
+        :title="parking?.code"
-        :subtitle="card?.id"
+        :subtitle="parking?.id"
         :filter="filter"
+        @on-fetch="(data) => (parking = data)"
     >
-        <template #body="{ entity: parking }">
+        <template #body>
             <VnLv :label="t('globals.code')" :value="parking.code" />
             <VnLv :label="t('parking.pickingOrder')" :value="parking.pickingOrder" />
             <VnLv :label="t('parking.sector')" :value="parking.sector?.description" />

src/pages/Parking/Card/ParkingSummary.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'components/ui/VnLv.vue';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const $props = defineProps({
     id: {
@@ -14,7 +15,9 @@ const $props = defineProps({
 const router = useRoute();
 const { t } = useI18n();
 const entityId = computed(() => $props.id || router.params.id);
+const { store } = useArrayData('Parking');
 
+const parking = ref(store.data);
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
     include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
@@ -23,9 +26,13 @@ const filter = {
 
 <template>
     <div class="q-pa-md">
-        <CardSummary :url="`Parkings/${entityId}`" :filter="filter">
+        <CardSummary
-            <template #header="{ entity: parking }">{{ parking.code }}</template>
+            :url="`Parkings/${entityId}`"
-            <template #body="{ entity: parking }">
+            :filter="filter"
+            @on-fetch="(data) => (parking = data)"
+        >
+            <template #header>{{ parking.code }}</template>
+            <template #body>
                 <QCard class="vn-one">
                     <QCardSection class="q-pa-none">
                         <a