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

#7793 - sortByWeight #763

Open
jsegarra wants to merge 7 commits from 7793_sortByWeight into dev
pull from: 7793_sortByWeight
merge into: verdnatura:dev
Conversation 1 Commits 7 Files Changed 1 +22 -31
1 changed files with 22 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fb340d1f27 - Show all commits

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

@ -104,6 +104,7 @@ const noOneOpt = ref({
[optionValue.value]: false, [optionValue.value]: false,
[optionLabel.value]: noOneText, [optionLabel.value]: noOneText,
}); });
const sort = computed(() => [...($props.sortBy ?? []), `${$props.optionLabel} DESC`]);
const value = computed({ const value = computed({
get() { get() {
@ -137,9 +138,8 @@ function findKeyInOptions() {
if (!$props.options) return; if (!$props.options) return;
return filter($props.modelValue, $props.options)?.length; return filter($props.modelValue, $props.options)?.length;
} }
function sortOptions(data) {
function setOptions(data) { return data.sort((a, b) => {
alexm commented 2024-10-16 07:35:29 +00:00
Outdated
Review
Copy Link

Para esto no seria mejor ya pedir los datos ordenadors por optionLabel?

Para esto no seria mejor ya pedir los datos ordenadors por optionLabel?
jsegarra commented 2024-10-16 12:14:16 +00:00
Outdated
Review
Copy Link

De esta manera nos aseguramos que se ordenan por optionLabel, porque que pasa con esos VnSelect que no tienen definidos los sortBy? Tendríamos que ir uno a uno indicándoles la ordenación.
De esta manera nos aseguramos que, definido o no, se ordenan por label.
También nos aseguramos de aplicar el criterio de ordenar según la posición del texto buscado dentro del valor

De esta manera nos aseguramos que se ordenan por optionLabel, porque que pasa con esos VnSelect que no tienen definidos los sortBy? Tendríamos que ir uno a uno indicándoles la ordenación. De esta manera nos aseguramos que, definido o no, se ordenan por label. También nos aseguramos de aplicar el criterio de ordenar según la posición del texto buscado dentro del valor
data = data.sort((a, b) => {
const search = lastVal.value?.toString()?.toLowerCase(); const search = lastVal.value?.toString()?.toLowerCase();
const aValue = String(a[$props.optionLabel]).toLowerCase(); const aValue = String(a[$props.optionLabel]).toLowerCase();
const bValue = String(b[$props.optionLabel]).toLowerCase(); const bValue = String(b[$props.optionLabel]).toLowerCase();
@ -156,6 +156,9 @@ function setOptions(data) {
return aValue.localeCompare(bValue); return aValue.localeCompare(bValue);
}); });
}
function setOptions(data) {
if (lastVal.value) data = sortOptions(data);
myOptions.value = JSON.parse(JSON.stringify(data)); myOptions.value = JSON.parse(JSON.stringify(data));
myOptionsOriginal.value = JSON.parse(JSON.stringify(data)); myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
} }
@ -165,26 +168,28 @@ function filter(val, options) {
if (!search) return options; if (!search) return options;
return options.filter((row) => { return sortOptions(
if ($props.filterOptions.length) { options.filter((row) => {
return $props.filterOptions.some((prop) => { if ($props.filterOptions.length) {
const propValue = String(row[prop]).toLowerCase(); return $props.filterOptions.some((prop) => {
return propValue.includes(search); const propValue = String(row[prop]).toLowerCase();
}); return propValue.includes(search);
} });
}
if (!row) return; if (!row) return;
const id = row[$props.optionValue]; const id = row[$props.optionValue];
const optionLabel = String(row[$props.optionLabel]).toLowerCase(); const optionLabel = String(row[$props.optionLabel]).toLowerCase();
return id == search || optionLabel.includes(search); return id == search || optionLabel.includes(search);
}); })
);
} }
async function fetchFilter(val) { async function fetchFilter(val) {
if (!$props.url || !dataRef.value) return; if (!$props.url || !dataRef.value) return;
const { fields, include, sortBy, limit } = $props; const { fields, include, limit } = $props;
const key = const key =
optionFilterValue.value ?? optionFilterValue.value ??
(new RegExp(/\d/g).test(val) (new RegExp(/\d/g).test(val)
@ -203,24 +208,10 @@ async function fetchFilter(val) {
$props.exprBuilder && Object.assign(where, $props.exprBuilder(key, val)); $props.exprBuilder && Object.assign(where, $props.exprBuilder(key, val));
const fetchOptions = { where, include, limit }; const fetchOptions = { where, include, limit };
if (fields) fetchOptions.fields = fields; if (fields) fetchOptions.fields = fields;
if (sortBy) {
fetchOptions.order = [
getOrderCaseString(key, val),
typeof sortBy === 'string' ? sortBy : [...sortBy],
];
}
return dataRef.value.fetch(fetchOptions); return dataRef.value.fetch(fetchOptions);
} }
function getOrderCaseString(prop, value) {
return `CASE
WHEN ${prop} LIKE '${value}%' THEN 1
WHEN ${prop} LIKE '%${value}%' THEN 2
ELSE 3
END, ${prop} DESC`;
}
async function filterHandler(val, update) { async function filterHandler(val, update) {
if (!val && lastVal.value === val) { if (!val && lastVal.value === val) {
alexm commented 2024-10-16 07:35:48 +00:00
Outdated
Review
Copy Link

Esto funciona asi tal cual?

Esto funciona asi tal cual?
jsegarra commented 2024-10-16 12:11:55 +00:00
Outdated
Review
Copy Link

No, esto se elimina en favor del método sort
Grcias

No, esto se elimina en favor del método sort Grcias
lastVal.value = val; lastVal.value = val;
@ -266,7 +257,7 @@ const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
@on-fetch="(data) => setOptions(data)" @on-fetch="(data) => setOptions(data)"
:where="where || { [optionValue]: value }" :where="where || { [optionValue]: value }"
:limit="limit" :limit="limit"
:sort-by="sortBy" :sort-by="sort"
:fields="fields" :fields="fields"
:params="params" :params="params"
/> />