From a77bf93e0d952cefbcd62ed87b12caf3899631a1 Mon Sep 17 00:00:00 2001 From: alexm Date: Fri, 12 Jul 2024 11:19:37 +0200 Subject: [PATCH 1/5] feat: create VnSelectCache and add in VnColumn --- src/components/VnTable/VnColumn.vue | 24 ++++++++---- src/components/common/VnSelect.vue | 49 +++++++++++++++---------- src/components/common/VnSelectCache.vue | 30 +++++++++++++++ 3 files changed, 77 insertions(+), 26 deletions(-) create mode 100644 src/components/common/VnSelectCache.vue diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue index aeccdb2d6..35309d586 100644 --- a/src/components/VnTable/VnColumn.vue +++ b/src/components/VnTable/VnColumn.vue @@ -5,6 +5,7 @@ import { dashIfEmpty } from 'src/filters'; /* basic input */ import VnSelect from 'components/common/VnSelect.vue'; +import VnSelectCache from 'components/common/VnSelectCache.vue'; import VnInput from 'components/common/VnInput.vue'; import VnInputDate from 'components/common/VnInputDate.vue'; import VnComponent from 'components/common/VnComponent.vue'; @@ -41,6 +42,17 @@ const $props = defineProps({ }, }); +const defaultSelect = { + attrs: { + row: $props.row, + disable: !$props.isEditable, + class: 'fit', + }, + forceAttrs: { + label: $props.showLabel && $props.column.label, + }, +}; + const defaultComponents = { input: { component: markRaw(VnInput), @@ -94,14 +106,12 @@ const defaultComponents = { }, }, select: { + component: markRaw(VnSelectCache), + ...defaultSelect, + }, + rawSelect: { component: markRaw(VnSelect), - attrs: { - disable: !$props.isEditable, - class: 'fit', - }, - forceAttrs: { - label: $props.showLabel && $props.column.label, - }, + ...defaultSelect, }, icon: { component: markRaw(QIcon), diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue index 3e5cd4216..e3bda6c8e 100644 --- a/src/components/common/VnSelect.vue +++ b/src/components/common/VnSelect.vue @@ -75,6 +75,7 @@ const myOptions = ref([]); const myOptionsOriginal = ref([]); const vnSelectRef = ref(); const dataRef = ref(); +const lastVal = ref(); const value = computed({ get() { @@ -85,14 +86,31 @@ const value = computed({ }, }); +watch(options, (newValue) => { + setOptions(newValue); +}); + +watch(modelValue, (newValue) => { + if (!myOptions.value.some((option) => option[optionValue.value] == newValue)) + fetchFilter(newValue); +}); + +onMounted(() => { + setOptions(options.value); + if ($props.url && $props.modelValue && !findKeyInOptions()) + fetchFilter($props.modelValue); + if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300); +}); + +function findKeyInOptions() { + if (!$props.options) return; + return filter($props.modelValue, $props.options)?.length; +} + function setOptions(data) { myOptions.value = JSON.parse(JSON.stringify(data)); myOptionsOriginal.value = JSON.parse(JSON.stringify(data)); } -onMounted(() => { - setOptions(options.value); - if ($props.url && $props.modelValue) fetchFilter($props.modelValue); -}); function filter(val, options) { const search = val.toString().toLowerCase(); @@ -125,15 +143,21 @@ async function fetchFilter(val) { const defaultWhere = $props.useLike ? { [key]: { like: `%${val}%` } } : { [key]: val }; - const where = { ...defaultWhere, ...$props.where }; + const where = { ...(val ? defaultWhere : {}), ...$props.where }; const fetchOptions = { where, order: sortBy, limit }; if (fields) fetchOptions.fields = fields; return dataRef.value.fetch(fetchOptions); } async function filterHandler(val, update) { - if (!$props.defaultFilter) return update(); + if (!val && lastVal.value === val) { + lastVal.value = val; + return update(); + } + lastVal.value = val; let newOptions; + + if (!$props.defaultFilter) return update(); if ($props.url) { newOptions = await fetchFilter(val); } else newOptions = filter(val, myOptionsOriginal.value); @@ -149,19 +173,6 @@ async function filterHandler(val, update) { } ); } - -watch(options, (newValue) => { - setOptions(newValue); -}); - -watch(modelValue, (newValue) => { - if (!myOptions.value.some((option) => option[optionValue.value] == newValue)) - fetchFilter(newValue); -}); - -onMounted(async () => { - if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300); -}); +
+ + {{ item.minQuantity }} +

@@ -133,6 +137,11 @@ const dialog = ref(null); } } +.min-quantity { + text-align: right; + color: $negative !important; +} + .footer { .price { overflow: hidden; From bfab1ec3146a24cb28d4d7546fe8a330b210faa5 Mon Sep 17 00:00:00 2001 From: alexm Date: Fri, 12 Jul 2024 14:13:35 +0200 Subject: [PATCH 3/5] useAttrs --- src/components/common/VnSelectCache.vue | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/common/VnSelectCache.vue b/src/components/common/VnSelectCache.vue index d03d0d280..51873ef6e 100644 --- a/src/components/common/VnSelectCache.vue +++ b/src/components/common/VnSelectCache.vue @@ -1,7 +1,6 @@ From b3d14ebeeedaea9e48350e865f2e96dd34138950 Mon Sep 17 00:00:00 2001 From: alexm Date: Mon, 15 Jul 2024 07:11:02 +0200 Subject: [PATCH 4/5] fix: order left panel --- src/stores/useNavigationStore.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js index 51f266800..961e80377 100644 --- a/src/stores/useNavigationStore.js +++ b/src/stores/useNavigationStore.js @@ -21,9 +21,9 @@ export const useNavigationStore = defineStore('navigationStore', () => { 'route', 'ticket', 'worker', + 'account', 'wagon', 'zone', - 'account', ]; const pinnedModules = ref([]); const role = useRole(); From dbba7589ef8eba00bf45a9ae2b51ef13f4ba0702 Mon Sep 17 00:00:00 2001 From: alexm Date: Mon, 15 Jul 2024 08:32:53 +0200 Subject: [PATCH 5/5] fix: VnBreadcrumbs return if not has matched --- src/components/common/VnBreadcrumbs.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/VnBreadcrumbs.vue b/src/components/common/VnBreadcrumbs.vue index 337507233..02226e497 100644 --- a/src/components/common/VnBreadcrumbs.vue +++ b/src/components/common/VnBreadcrumbs.vue @@ -18,7 +18,7 @@ watchEffect(() => { (matched) => Object.keys(matched.meta).length ); breadcrumbs.value.length = 0; - + if (!matched.value[0]) return; if (matched.value[0].name != 'Dashboard') { root.value = useCamelCase(matched.value[0].path.substring(1).toLowerCase());