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

hotFix(orderCatalogFilter): fix searchByTag #961

Merged
alexm merged 8 commits from hotFix_orderCatalogFilter_values into master 2024-11-21 09:09:52 +00:00
Conversation 1 Commits 8 Files Changed 4 +116 -181
1 changed files with 116 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c2db7be8cd - Show all commits

297
src/pages/Order/Card/OrderCatalogFilter.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { computed, ref } from 'vue';
import { computed, ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import axios from 'axios';
@ -9,10 +9,9 @@ import VnSelect from 'components/common/VnSelect.vue';
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
import VnInput from 'src/components/common/VnInput.vue';
import getParamWhere from 'src/filters/getParamWhere';
// import CatalogFilterValueDialog from 'src/pages/Order/Card/CatalogFilterValueDialog.vue';
import { useArrayData } from 'composables/useArrayData';
const { t } = useI18n();
const route = useRoute();
const props = defineProps({
dataKey: {
type: String,
@ -27,13 +26,19 @@ const props = defineProps({
required: true,
},
});
const { t } = useI18n();
const route = useRoute();
const arrayData = useArrayData(props.dataKey);
const currentParams = ref({});
const categoryList = ref(null);
const selectedCategoryFk = ref(getParamWhere(route, 'categoryFk'));
const selectedCategoryFk = ref(null);
const typeList = ref([]);
const selectedTypeFk = ref(null);
const selectedTag = ref(null);
const tagValues = ref([{}]);
const tagOptions = ref([]);
const searchByTag = ref(null);
const vnFilterPanelRef = ref();
const orderByList = ref([
{ id: 'relevancy DESC, name', name: t('params.relevancy'), priority: 999 },
@ -48,32 +53,24 @@ const orderWayList = ref([
const orderBySelected = ref('relevancy DESC, name');
const orderWaySelected = ref('ASC');
const createValue = (val, done) => {
if (val.length > 2) {
if (!tagOptions.value.includes(val)) {
done(tagOptions.value, 'add-unique');
}
tagValues.value.push({ value: val });
}
};
const resetCategory = () => {
const resetCategory = (params, search) => {
alexm marked this conversation as resolved Outdated
jsegarra commented 2024-11-20 12:56:27 +00:00
Outdated
Review
Copy Link

Propuesta, ponerlo a continuación de quien la llama

Propuesta, ponerlo a continuación de quien la llama
jsegarra commented 2024-11-20 21:56:13 +00:00
Outdated
Review
Copy Link

fallo mio

fallo mio
selectedCategoryFk.value = null;
typeList.value = null;
};
const clearFilter = (key) => {
if (key === 'categoryFk') {
resetCategory();
}
params.categoryFk = null;
alexm marked this conversation as resolved Outdated
jsegarra commented 2024-11-20 12:57:14 +00:00
Outdated
Review
Copy Link

Veo que hay un par de sitios que hace params.category = null;
Propuesta: moverlo a una function resetParams, pej

Veo que hay un par de sitios que hace params.category = null; Propuesta: moverlo a una function resetParams, pej
jsegarra commented 2024-11-20 21:56:05 +00:00
Outdated
Review
Copy Link

Si wbuezas lo dejó asi

Si wbuezas lo dejó asi
params.typeFk = null;
arrayData.store.userFilter = null;
removeTagGroupParam(params, search);
};
const selectCategory = (params, category, search) => {
if (params.categoryFk === category?.id) {
resetCategory();
resetCategory(params, search);
params.categoryFk = null;
} else {
selectedCategoryFk.value = category?.id;
params.categoryFk = category?.id;
params.typeFk = null;
selectedTypeFk.value = null;
loadTypes(category?.id);
}
search();
@ -86,19 +83,12 @@ const loadTypes = async (categoryFk = selectedCategoryFk.value) => {
typeList.value = data;
};
const selectedCategory = computed(() =>
(categoryList.value || []).find(
const selectedCategory = computed(() => {
return (categoryList.value || []).find(
(category) => category?.id === selectedCategoryFk.value
)
);
function filterFn(val, update) {
update(() => {
const needle = val.toLowerCase();
tagOptions.value = props.tagValue.filter(
(v) => v.toLowerCase().indexOf(needle) > -1
);
});
}
);
});
const selectedType = computed(() => {
return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
});
@ -114,37 +104,38 @@ function exprBuilder(param, value) {
}
}
const applyTagFilter = (params, search) => {
if (!tagValues.value?.length) {
const applyTags = (tagInfo, params, search) => {
if (!tagInfo || !tagInfo.values.length) {
params.tagGroups = null;
search();
return;
}
if (!params.tagGroups) {
params.tagGroups = [];
}
params.tagGroups.push(
JSON.stringify({
values: tagValues.value.filter((obj) => Object.keys(obj).length > 0),
tagSelection: {
...selectedTag.value,
orgShowField: selectedTag?.value?.name,
},
tagFk: selectedTag?.value?.tagFk,
})
);
if (!params.tagGroups) params.tagGroups = [];
params.tagGroups.push(tagInfo);
search();
selectedTag.value = null;
tagValues.value = [{}];
};
const removeTagChip = (selection, params, search) => {
if (params.tagGroups) {
params.tagGroups = (params.tagGroups || []).filter(
(value) => value !== selection
);
async function onSearchByTag(value) {
if (!value.target.value) return;
if (!currentParams.value?.tagGroups) {
currentParams.value.tagGroups = [];
}
currentParams.value.tagGroups.push({
values: [{ value: value.target.value }],
});
searchByTag.value = null;
}
const removeTagGroupParam = (params, search, valIndex = null) => {
if (!valIndex) {
alexm marked this conversation as resolved Outdated
jsegarra commented 2024-11-20 12:57:59 +00:00
Outdated
Review
Copy Link

No importa la condición, siempre hará search
Sacarla del if...else

No importa la condición, siempre hará search Sacarla del if...else
jsegarra commented 2024-11-20 21:57:18 +00:00
Outdated
Review
Copy Link

vaya, ni lo vi

vaya, ni lo vi
params.tagGroups = null;
search();
} else {
params.tagGroups.splice(valIndex, 1);
search();
}
search();
};
const setCategoryList = (data) => {
@ -171,26 +162,27 @@ function addOrder(value, field, params) {
params.orderBy = JSON.stringify(orderBy);
vnFilterPanelRef.value.search();
}
onMounted(() => {
selectedCategoryFk.value = getParamWhere(route, 'categoryFk');
selectedTypeFk.value = getParamWhere(route, 'typeFk');
});
</script>
<template>
alexm marked this conversation as resolved Outdated
jsegarra commented 2024-11-20 12:58:47 +00:00
Outdated
Review
Copy Link

En el OrderCatalog, hemos puesto los metodos de OnMounted, etc...arriba, aqui no?

En el OrderCatalog, hemos puesto los metodos de OnMounted, etc...arriba, aqui no?
jsegarra commented 2024-11-20 21:57:42 +00:00
Outdated
Review
Copy Link

se pasó

se pasó
<FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
<FetchData url="ItemCategories" auto-load @on-fetch="setCategoryList" />
<VnFilterPanel
ref="vnFilterPanelRef"
:data-key="props.dataKey"
:hidden-tags="['orderFk', 'orderBy']"
:un-removable-params="['orderFk', 'orderBy']"
:expr-builder="exprBuilder"
:custom-tags="['tagGroups']"
@remove="clearFilter"
:custom-tags="['tagGroups', 'categoryFk']"
:redirect="false"
search-url="params"
v-model="currentParams"
>
<template #tags="{ tag, formatFn }">
<strong v-if="tag.label === 'categoryFk'">
{{ t(selectedCategory?.name || '') }}
</strong>
<strong v-else-if="tag.label === 'typeFk'">
<strong v-if="tag.label === 'typeFk'">
{{ t(selectedType?.name || '') }}
</strong>
<div v-else class="q-gutter-x-xs">
@ -199,25 +191,37 @@ function addOrder(value, field, params) {
</div>
</template>
<template #customTags="{ tags: customTags, params, searchFn }">
<template v-for="tag in customTags" :key="tag.label">
<template v-if="tag.label === 'tagGroups'">
<VnFilterPanelChip
v-for="chip in tag.value"
:key="chip"
removable
@remove="removeTagChip(chip, params, searchFn)"
>
<strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
<span>{{
(JSON.parse(chip).values || [])
.map((item) => item.value)
.join(' | ')
}}</span>
</VnFilterPanelChip>
</template>
<template v-for="customTag in customTags" :key="customTag.label">
<VnFilterPanelChip
v-for="(tag, valIndex) in Array.isArray(customTag.value)
? customTag.value
: 1"
:key="valIndex"
removable
@remove="
customTag.label === 'categoryFk'
? resetCategory(params, searchFn)
: removeTagGroupParam(params, searchFn, valIndex)
"
>
<strong v-if="customTag.label === 'categoryFk'">
{{ t(selectedCategory?.name || '') }}
</strong>
<strong v-if="tag?.tagSelection?.name" class="q-mr-xs">
{{ tag.tagSelection.name }}:
</strong>
<span>
{{
(tag?.values || [])
.map((item) => `"${item.value}"`)
.join(', ')
}}
</span>
</VnFilterPanelChip>
</template>
</template>
<template #body="{ params, searchFn }">
{{ params }}
<QItem class="category-filter q-mt-md">
<div
v-for="category in categoryList"
@ -298,91 +302,39 @@ function addOrder(value, field, params) {
</QItemSection>
</QItem>
<QSeparator />
<QItem class="q-mt-md">
<QItemSection>
<VnSelect
:label="t('params.tag')"
v-model="selectedTag"
:options="props.tags || []"
option-value="id"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
/>
</QItemSection>
</QItem>
<QItem
v-for="(value, index) in tagValues"
:key="value"
class="q-mt-md filter-value"
>
<FetchData
v-if="selectedTag"
:url="`Tags/${selectedTag}/filterValue`"
limit="30"
auto-load
@on-fetch="(data) => (tagOptions = data)"
/>
<VnSelect
v-if="!selectedTag"
:label="t('params.value')"
v-model="value.value"
:options="tagOptions || []"
option-value="value"
option-label="value"
dense
outlined
rounded
emit-value
use-input
class="filter-input"
@new-value="createValue"
@filter="filterFn"
@update:model-value="applyTagFilter(params, searchFn)"
/>
<VnSelect
v-else-if="selectedTag === 1"
:label="t('params.value')"
v-model="value.value"
:options="tagOptions || []"
option-value="value"
option-label="value"
dense
outlined
rounded
emit-value
use-input
class="filter-input"
@new-value="createValue"
@update:model-value="applyTagFilter(params, searchFn)"
/>
<QItem class="q-mt-lg q-pa-none">
<VnInput
v-else
:label="t('params.value')"
v-model="value.value"
:label="t('components.itemsFilterPanel.value')"
dense
outlined
rounded
class="filter-input"
@keyup.enter="applyTagFilter(params, searchFn)"
/>
<QIcon
name="delete"
class="filter-icon"
@click="(tagValues || []).splice(index, 1)"
/>
</QItem>
<QItem class="q-mt-lg">
<QBtn
icon="add_circle"
shortcut="+"
flat
class="filter-icon"
@click="tagValues.push({})"
/>
:is-clearable="false"
v-model="searchByTag"
@keyup.enter="(val) => onSearchByTag(val, params)"
>
<template #prepend>
<QIcon name="search" />
</template>
<template #append>
<QBtn
icon="add_circle"
shortcut="+"
flat
color="primary"
size="md"
dense
/>
<QPopupProxy>
<!-- <CatalogFilterValueDialog
style="display: inline-block"
:tags="tags"
@apply-tags="
($event) => applyTags($event, params, searchFn)
"
/> -->
</QPopupProxy>
</template>
</VnInput>
</QItem>
<QSeparator />
</template>
@ -417,23 +369,6 @@ function addOrder(value, field, params) {
cursor: pointer;
}
}
.filter-icon {
font-size: 24px;
color: $primary;
padding: 0 4px;
cursor: pointer;
}
.filter-input {
flex-shrink: 1;
min-width: 0;
}
.filter-value {
display: flex;
align-items: center;
}
</style>
<i18n>