feat: refs #6919 sync parking

src/pages/Parking/Card/ParkingBasicData.vue

@@ -1,23 +1,13 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
-const { t } = useI18n();
-const route = useRoute();
-const parkingId = computed(() => route.params?.id || null);
 const sectors = ref([]);
 const sectorFilter = { fields: ['id', 'description'] };
-
-const filter = {
-    fields: ['sectorFk', 'code', 'pickingOrder', 'row', 'column'],
-    include: [{ relation: 'sector', scope: sectorFilter }],
-};
 </script>
 <template>
     <FetchData
@@ -27,22 +17,25 @@ const filter = {
         @on-fetch="(data) => (sectors = data)"
         auto-load
     />
-    <FormModel :url="`Parkings/${parkingId}`" model="parking" :filter="filter" auto-load>
+    <FormModel model="Parking" auto-load>
         <template #form="{ data }">
             <VnRow>
-                <VnInput v-model="data.code" :label="t('globals.code')" />
-                <VnInput v-model="data.pickingOrder" :label="t('parking.pickingOrder')" />
+                <VnInput v-model="data.code" :label="$t('globals.code')" />
+                <VnInput
+                    v-model="data.pickingOrder"
+                    :label="$t('parking.pickingOrder')"
+                />
             </VnRow>
             <VnRow>
-                <VnInput v-model="data.row" :label="t('parking.row')" />
-                <VnInput v-model="data.column" :label="t('parking.column')" />
+                <VnInput v-model="data.row" :label="$t('parking.row')" />
+                <VnInput v-model="data.column" :label="$t('parking.column')" />
             </VnRow>
             <VnRow>
                 <VnSelect
                     v-model="data.sectorFk"
                     option-value="id"
                     option-label="description"
-                    :label="t('parking.sector')"
+                    :label="$t('parking.sector')"
                     :options="sectors"
                     use-input
                     input-debounce="0"

src/pages/Parking/Card/ParkingCard.vue

@@ -2,18 +2,22 @@
 import VnCard from 'components/common/VnCard.vue';
 import ParkingDescriptor from 'pages/Parking/Card/ParkingDescriptor.vue';
 import ParkingFilter from 'pages/Parking/ParkingFilter.vue';
+import filter from './ParkingFilter.js';
+import exprBuilder from '../ParkingExprBuilder.js';
 </script>
 <template>
     <VnCard
         data-key="Parking"
         url="Parkings"
         :descriptor="ParkingDescriptor"
+        :filter="filter"
         :filter-panel="ParkingFilter"
         search-data-key="ParkingList"
         :searchbar-props="{
             url: 'Parkings',
             label: 'parking.searchBar.label',
             info: 'parking.searchBar.info',
+            exprBuilder,
         }"
     />
 </template>

src/pages/Parking/Card/ParkingDescriptor.vue

@@ -1,10 +1,9 @@
 <script setup>
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'components/ui/VnLv.vue';
-
+import filter from './ParkingFilter.js';
 const props = defineProps({
     id: {
         type: Number,
@@ -13,14 +12,8 @@ const props = defineProps({
     },
 });
 
-const { t } = useI18n();
 const route = useRoute();
 const entityId = computed(() => props.id || route.params.id);
-
-const filter = {
-    fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
-    include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
-};
 </script>
 <template>
     <CardDescriptor
@@ -32,9 +25,9 @@ const filter = {
         :to-module="{ name: 'ParkingList' }"
     >
         <template #body="{ entity }">
-            <VnLv :label="t('globals.code')" :value="entity.code" />
-            <VnLv :label="t('parking.pickingOrder')" :value="entity.pickingOrder" />
-            <VnLv :label="t('parking.sector')" :value="entity.sector?.description" />
+            <VnLv :label="$t('globals.code')" :value="entity.code" />
+            <VnLv :label="$t('parking.pickingOrder')" :value="entity.pickingOrder" />
+            <VnLv :label="$t('parking.sector')" :value="entity.sector?.description" />
         </template>
     </CardDescriptor>
 </template>

src/pages/Parking/Card/ParkingFilter.js

@@ -0,0 +1,4 @@
+export default {
+    fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
+    include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
+};

src/pages/Parking/ParkingExprBuilder.js

@@ -0,0 +1,10 @@
+export default (param, value) => {
+    switch (param) {
+        case 'code':
+            return { [param]: { like: `%${value}%` } };
+        case 'sectorFk':
+            return { [param]: value };
+        case 'search':
+            return { or: [{ code: { like: `%${value}%` } }, { id: value }] };
+    }
+};

src/pages/Parking/ParkingList.vue

@@ -11,6 +11,7 @@ import VnLv from 'components/ui/VnLv.vue';
 import ParkingFilter from './ParkingFilter.vue';
 import ParkingSummary from './Card/ParkingSummary.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import exprBuilder from './ParkingExprBuilder.js';
 
 const stateStore = useStateStore();
 const { push } = useRouter();
@@ -23,19 +24,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder'],
 };
-
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'code':
-            return { [param]: { like: `%${value}%` } };
-        case 'sectorFk':
-            return { [param]: value };
-        case 'search':
-            return { or: [{ code: { like: `%${value}%` } }, { id: value }] };
-    }
-}
 </script>
-
 <template>
     <template>
         <VnSearchbar