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/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()); 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); -});