diff --git a/src/pages/Parking/Card/ParkingBasicData.vue b/src/pages/Parking/Card/ParkingBasicData.vue index 8e3433a5b..fcc9dbd24 100644 --- a/src/pages/Parking/Card/ParkingBasicData.vue +++ b/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" diff --git a/src/pages/Parking/Card/ParkingCard.vue b/src/pages/Parking/Card/ParkingCard.vue index 5debd28b5..6985dc55d 100644 --- a/src/pages/Parking/Card/ParkingCard.vue +++ b/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> diff --git a/src/pages/Parking/Card/ParkingDescriptor.vue b/src/pages/Parking/Card/ParkingDescriptor.vue index d36ea16fc..0b7642c1c 100644 --- a/src/pages/Parking/Card/ParkingDescriptor.vue +++ b/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> diff --git a/src/pages/Parking/Card/ParkingFilter.js b/src/pages/Parking/Card/ParkingFilter.js new file mode 100644 index 000000000..fd1855c45 --- /dev/null +++ b/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'] } }], +}; diff --git a/src/pages/Parking/ParkingExprBuilder.js b/src/pages/Parking/ParkingExprBuilder.js new file mode 100644 index 000000000..16d2262c8 --- /dev/null +++ b/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 }] }; + } +}; diff --git a/src/pages/Parking/ParkingList.vue b/src/pages/Parking/ParkingList.vue index 109613383..12a93c97b 100644 --- a/src/pages/Parking/ParkingList.vue +++ b/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