verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 81 Releases Wiki Activity

perf: vue-recomendations
gitea/salix-front/pipeline/pr-dev There was a failure building this commit Details

This commit is contained in:
Javier Segarra 2024-07-12 12:55:20 +02:00
parent cdee2155b2
commit b00f955913
1 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/common/VnSelect.vue
View File

@ -1,10 +1,10 @@
<script setup> <script setup>
import { ref, toRefs, computed, watch, onMounted } from 'vue'; import { ref, toRefs, computed, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const emit = defineEmits(['update:modelValue', 'update:options']);
import { useArrayData } from 'src/composables/useArrayData'; import { useArrayData } from 'src/composables/useArrayData';
import { useAttrs } from 'vue'; import { useAttrs } from 'vue';
const emit = defineEmits(['update:modelValue', 'update:options']);
const $props = defineProps({ const $props = defineProps({
modelValue: { modelValue: {
type: [String, Number, Object], type: [String, Number, Object],
@ -110,27 +110,35 @@ const arrayDataOptions = {
}; };
const filterValue = ref(null); const filterValue = ref(null);
const arrayData = useArrayData(arrayDataKey, arrayDataOptions); const arrayData = useArrayData(arrayDataKey, arrayDataOptions);
let isFiltered = false;
onMounted(async () => { onMounted(async () => {
if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300); if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
setOptions(options.value); setOptions(options.value);
if (!$props.options) fetchFilter($props.modelValue); if (!$props.options) fetchFilter($props.modelValue);
await initSelect();
});
async function initSelect() {
if (useURL.value) { if (useURL.value) {
arrayData.store.userFilter = $props.where; arrayData.store.userFilter = $props.where;
arrayData.store.filter.where = $props.where; arrayData.store.filter.where = $props.where;
const { data } = await arrayData.fetch({ append: true, updateRouter: false }); const { data } = await arrayData.fetch({ append: true, updateRouter: false });
setOptions(data); setOptions(data);
} }
} });
watch(filterValue, (newVal, oldVal) => {
const _isFiltered = oldVal?.length < newVal?.length;
if (!_isFiltered && isFiltered) {
arrayData.store.hasMoreData = true;
arrayData.store.userFilter = $props.where;
arrayData.store.filter.where = $props.where;
arrayData.store.data = myOptions.value;
}
isFiltered = _isFiltered;
});
watch(modelValue, (newValue) => { watch(modelValue, (newValue) => {
if (useURL.value) return; if (useURL.value) return;
if (!myOptions.value.some((option) => option[optionValue.value] == newValue)) if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
fetchFilter(newValue); fetchFilter(newValue);
}); });
function setOptions(data, append = true) { function setOptions(data, append = true) {
myOptions.value = JSON.parse(JSON.stringify(data)); myOptions.value = JSON.parse(JSON.stringify(data));
if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data)); if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
@ -162,26 +170,15 @@ async function fetchFilter(val) {
? optionFilter.value ?? optionValue.value ? optionFilter.value ?? optionValue.value
: optionValue.value; : optionValue.value;
const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where }; const defaultWhere = $props.useLike
? { [key]: { like: `%${val}%` } }
: { [key]: val };
const where = { ...defaultWhere, ...$props.where };
const fetchOptions = { where, fields, order: sortBy, limit }; const fetchOptions = { where, fields, order: sortBy, limit };
arrayData.store.userFilter = fetchOptions; arrayData.store.userFilter = fetchOptions;
return arrayData.fetch({ append: false, updateRouter: false }); return arrayData.fetch({ append: false, updateRouter: false });
} }
let isFiltered = false;
watch(filterValue, (newVal, oldVal) => {
// if (vnSelectRef.value.modelValue) {
// isFiltered = true;
// return;
// }
const _isFiltered = oldVal?.length < newVal?.length;
if (!_isFiltered && isFiltered) {
arrayData.store.hasMoreData = true;
arrayData.store.userFilter = $props.where;
arrayData.store.filter.where = $props.where;
arrayData.store.data = myOptions.value;
}
isFiltered = _isFiltered;
});
async function filterHandler(val, update) { async function filterHandler(val, update) {
if (!$props.defaultFilter) return update(); if (!$props.defaultFilter) return update();
let newOptions = []; let newOptions = [];
@ -213,8 +210,7 @@ async function filterHandler(val, update) {
); );
} }
async function onScroll(scrollEv) { async function onScroll({ to, direction, from, index }) {
const { to, direction, from, index } = scrollEv;
const lastIndex = myOptions.value.length - 1; const lastIndex = myOptions.value.length - 1;
if (from === 0 && index === 0) return; if (from === 0 && index === 0) return;