feat: refs #6919 sync zone

src/pages/Zone/Card/ZoneBasicData.vue

@@ -29,7 +29,7 @@ const agencyOptions = ref([]);
         url="AgencyModes/isActive"
     />
 
-    <FormModel :url="`Zones/${route.params.id}`" auto-load model="zone">
+    <FormModel auto-load model="Zone">
         <template #form="{ data, validate }">
             <VnRow>
                 <VnInput :label="t('Name')" clearable v-model="data.name" />

src/pages/Zone/Card/ZoneCard.vue

@@ -1,13 +1,12 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { computed } from 'vue';
 
 import VnCard from 'components/common/VnCard.vue';
 import ZoneDescriptor from './ZoneDescriptor.vue';
 import ZoneFilterPanel from '../ZoneFilterPanel.vue';
+import filter from './ZoneFilter.js';
 
-const { t } = useI18n();
 const route = useRoute();
 const routeName = computed(() => route.name);
 
@@ -19,16 +18,17 @@ function notIsLocations(ifIsFalse, ifIsTrue) {
 
 <template>
     <VnCard
-        data-key="zone"
+        data-key="Zone"
         :url="notIsLocations('Zones', undefined)"
         :descriptor="ZoneDescriptor"
+        :filter="filter"
         :filter-panel="notIsLocations(ZoneFilterPanel, undefined)"
         :search-data-key="notIsLocations('ZoneList', undefined)"
         :custom-url="`Zones/${route.params?.id}/getLeaves`"
         :searchbar-props="{
             url: notIsLocations('Zones', 'ZoneLocations'),
-            label: notIsLocations(t('list.searchZone'), t('list.searchLocation')),
-            info: t('list.searchInfo'),
+            label: notIsLocations($t('list.searchZone'), $t('list.searchLocation')),
+            info: $t('list.searchInfo'),
             whereFilter: notIsLocations((value) => {
                 return /^\d+$/.test(value)
                     ? { id: value }

src/pages/Zone/Card/ZoneDescriptor.vue

@@ -1,15 +1,14 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { toTimeFormat } from 'src/filters/date';
 import { toCurrency } from 'filters/index';
 
-import useCardDescription from 'src/composables/useCardDescription';
 import ZoneDescriptorMenuItems from './ZoneDescriptorMenuItems.vue';
+import filter from './ZoneFilter.js';
 
 const $props = defineProps({
     id: {
@@ -20,53 +19,27 @@ const $props = defineProps({
 });
 
 const route = useRoute();
-const { t } = useI18n();
-
-const filter = {
-    include: [
-        {
-            relation: 'agencyMode',
-            scope: {
-                fields: ['name', 'id'],
-            },
-        },
-    ],
-};
-
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-
-const data = ref(useCardDescription());
-const setData = (entity) => {
-    data.value = useCardDescription(entity.ref, entity.id);
-};
 </script>
 
 <template>
     <CardDescriptor
         module="Zone"
         :url="`Zones/${entityId}`"
-        :title="data.title"
-        :subtitle="data.subtitle"
         :filter="filter"
-        @on-fetch="setData"
-        data-key="zoneData"
+        data-key="Zone"
     >
         <template #menu="{ entity }">
             <ZoneDescriptorMenuItems :zone="entity" />
         </template>
         <template #body="{ entity }">
-            <VnLv :label="t('list.agency')" :value="entity.agencyMode.name" />
-            <VnLv :label="t('zone.closing')" :value="toTimeFormat(entity.hour)" />
-            <VnLv :label="t('zone.travelingDays')" :value="entity.travelingDays" />
-            <VnLv :label="t('list.price')" :value="toCurrency(entity.price)" />
-            <VnLv :label="t('zone.bonus')" :value="toCurrency(entity.bonus)" />
+            <VnLv :label="$t('list.agency')" :value="entity.agencyMode?.name" />
+            <VnLv :label="$t('zone.closing')" :value="toTimeFormat(entity.hour)" />
+            <VnLv :label="$t('zone.travelingDays')" :value="entity.travelingDays" />
+            <VnLv :label="$t('list.price')" :value="toCurrency(entity.price)" />
+            <VnLv :label="$t('zone.bonus')" :value="toCurrency(entity.bonus)" />
         </template>
     </CardDescriptor>
 </template>
-
-<i18n>
-es:
-    Go to module index: Ir al índice del módulo
-</i18n>

src/pages/Zone/Card/ZoneFilter.js

@@ -0,0 +1,10 @@
+export default {
+    include: [
+        {
+            relation: 'agencyMode',
+            scope: {
+                fields: ['name', 'id'],
+            },
+        },
+    ],
+};

src/pages/Zone/Card/ZoneSummary.vue

@@ -11,6 +11,7 @@ import { getUrl } from 'src/composables/getUrl';
 import { toCurrency } from 'filters/index';
 import { toTimeFormat } from 'src/filters/date';
 import axios from 'axios';
+import filter from './ZoneFilter.js';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -25,19 +26,6 @@ const $props = defineProps({
 const entityId = computed(() => $props.id || route.params.id);
 const zoneUrl = ref();
 
-const filter = computed(() => {
-    const filter = {
-        include: {
-            relation: 'agencyMode',
-            fields: ['name'],
-        },
-        where: {
-            id: entityId,
-        },
-    };
-    return filter;
-});
-
 const columns = computed(() => [
     {
         label: t('list.name'),
@@ -71,9 +59,9 @@ onMounted(async () => {
 
 <template>
     <CardSummary
-        data-key="ZoneSummary"
+        data-key="Zone"
         ref="summary"
-        url="Zones/findOne"
+        :url="`Zones/${entityId}`"
         :filter="filter"
     >
         <template #header="{ entity }">