From f8026dd3f6f0eabdb9e93e5e54acd46c1b0df8e8 Mon Sep 17 00:00:00 2001 From: alexm Date: Thu, 18 Jul 2024 13:54:22 +0200 Subject: [PATCH] feat: improve VnSelectCache add find by Object --- src/components/VnTable/VnFilter.vue | 23 +++++++++++++---------- src/components/common/VnSelect.vue | 3 ++- src/components/common/VnSelectCache.vue | 21 +++++++++++++++++---- src/pages/Route/Cmr/CmrList.vue | 5 +---- src/pages/Route/RouteList.vue | 22 ++++++++++++++++------ 5 files changed, 49 insertions(+), 25 deletions(-) diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue index 15e1cc947..285e2338e 100644 --- a/src/components/VnTable/VnFilter.vue +++ b/src/components/VnTable/VnFilter.vue @@ -48,6 +48,17 @@ const forceAttrs = { label: $props.showTitle ? '' : $props.column.label, }; +const selectComponent = { + component: markRaw(VnSelect), + event: updateEvent, + attrs: { + class: 'q-px-sm q-pb-xs q-pt-none fit', + dense: true, + filled: !$props.showTitle, + }, + forceAttrs, +}; + const components = { input: { component: markRaw(VnInput), @@ -97,16 +108,8 @@ const components = { }, forceAttrs, }, - select: { - component: markRaw(VnSelect), - event: updateEvent, - attrs: { - class: 'q-px-sm q-pb-xs q-pt-none fit', - dense: true, - filled: !$props.showTitle, - }, - forceAttrs, - }, + select: selectComponent, + rawSelect: selectComponent, }; async function addFilter(value) { diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue index e3bda6c8e..3cba466a3 100644 --- a/src/components/common/VnSelect.vue +++ b/src/components/common/VnSelect.vue @@ -125,7 +125,8 @@ function filter(val, options) { }); } - const id = row.id; + if (!row) return; + const id = row[$props.optionValue]; const optionLabel = String(row[$props.optionLabel]).toLowerCase(); return id == search || optionLabel.includes(search); diff --git a/src/components/common/VnSelectCache.vue b/src/components/common/VnSelectCache.vue index 51873ef6e..a9acd7b9f 100644 --- a/src/components/common/VnSelectCache.vue +++ b/src/components/common/VnSelectCache.vue @@ -8,18 +8,31 @@ const $props = defineProps({ default: null, }, find: { - type: String, + type: [String, Object], default: null, }, }); const options = ref([]); + onBeforeMount(async () => { - const { url } = useAttrs(); + const { url, optionValue, optionLabel } = useAttrs(); const findBy = $props.find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1); - if (findBy) options.value = [$props.row[findBy]]; + if (!findBy || !$props.row) return; + // is object + if (typeof findBy == 'object') { + const { value, label } = findBy; + if (!$props.row[value] || !$props.row[label]) return; + return (options.value = [ + { + [optionValue ?? 'id']: $props.row[value], + [optionLabel ?? 'name']: $props.row[label], + }, + ]); + } + // is string + if ($props.row[findBy]) options.value = [$props.row[findBy]]; }); - diff --git a/src/pages/Route/Cmr/CmrList.vue b/src/pages/Route/Cmr/CmrList.vue index 6dfd3a1e5..0cc0adcf3 100644 --- a/src/pages/Route/Cmr/CmrList.vue +++ b/src/pages/Route/Cmr/CmrList.vue @@ -72,10 +72,7 @@ const columns = computed(() => [ label: t('globals.warehouse'), component: 'select', attrs: { - url: 'warehouses', - fields: ['id', 'name'], - optionLabel: 'name', - optionValue: 'id', + options: warehouses.value, }, }, { diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue index 55bcdabb0..0f7c06de9 100644 --- a/src/pages/Route/RouteList.vue +++ b/src/pages/Route/RouteList.vue @@ -57,9 +57,13 @@ const columns = computed(() => [ component: 'select', attrs: { url: 'Workers/activeWithInheritedRole', - fields: ['id', 'nickname'], - optionValue: 'id', - optionLabel: 'nickname', + fields: ['id', 'name'], + useLike: false, + optionFilter: 'firstName', + find: { + value: 'workerFk', + label: 'workerUserName', + }, }, useLike: false, cardVisible: true, @@ -76,8 +80,10 @@ const columns = computed(() => [ attrs: { url: 'agencyModes', fields: ['id', 'name'], - optionLabel: 'name', - optionValue: 'id', + find: { + value: 'agencyModeFk', + label: 'agencyName', + }, }, }, { @@ -91,7 +97,10 @@ const columns = computed(() => [ url: 'vehicles', fields: ['id', 'numberPlate'], optionLabel: 'numberPlate', - optionValue: 'id', + find: { + value: 'vehicleFk', + label: 'vehiclePlateNumber', + }, }, }, { @@ -248,6 +257,7 @@ const openTicketsDialog = (id) => { :is-editable="true" :filter="routeFilter" redirect="route" + :row-click="false" :create="{ urlCreate: 'Routes', title: t('Create route'),