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

fix: order catalog fixes

This commit is contained in:
William Buezas 2024-10-27 15:27:53 -03:00
parent 211da859bd
commit c93f152060
2 changed files with 94 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/Order/Card/OrderCatalog.vue
View File

@ -1,7 +1,7 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import { useRoute, useRouter } from 'vue-router';
import { onBeforeMount, onMounted, onUnmounted, ref, computed } from 'vue';
import { onBeforeMount, onMounted, onUnmounted, ref, computed, watch } from 'vue';
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'components/ui/VnPaginate.vue';
@ -9,11 +9,15 @@ import CatalogItem from 'components/ui/CatalogItem.vue';
import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import getParamWhere from 'src/filters/getParamWhere';
import { useArrayData } from 'composables/useArrayData';
const route = useRoute();
const router = useRouter();
const stateStore = useStateStore();
const { t } = useI18n();
const arrayData = useArrayData('OrderCatalogList');
const store = arrayData.store;
const showFilter = ref(null);
const tags = ref([]);
let catalogParams = {
@ -37,6 +41,8 @@ onBeforeMount(() => {
...catalogParams,
...formattedWhereParams,
};
} else {
showFilter.value = true;
}
});
@ -44,6 +50,7 @@ onMounted(() => {
stateStore.rightDrawer = true;
checkOrderConfirmation();
});
onUnmounted(() => (stateStore.rightDrawer = false));
async function checkOrderConfirmation() {
@ -54,6 +61,7 @@ async function checkOrderConfirmation() {
}
function extractTags(items) {
if (!items || !items.length) return;
const resultTags = [];
(items || []).forEach((item) => {
(item.tags || []).forEach((tag) => {
@ -82,6 +90,14 @@ function extractValueTags(items) {
tagValue.value = resultValueTags;
}
const autoLoad = computed(() => !!catalogParams.categoryFk);
watch(
() => store.data,
(val) => {
extractTags(val);
},
{ immediate: true }
);
</script>
<template>
@ -95,7 +111,7 @@ const autoLoad = computed(() => !!catalogParams.categoryFk);
:info="t('You can search items by name or id')"
/>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<QScrollArea v-if="showFilter" class="fit text-grey-8">
<OrderCatalogFilter
data-key="OrderCatalogList"
:tag-value="tagValue"
@ -111,7 +127,7 @@ const autoLoad = computed(() => !!catalogParams.categoryFk);
url="Orders/CatalogFilter"
:limit="50"
:user-params="catalogParams"
@on-fetch="extractTags"
@on-fetch="showFilter = true"
:update-router="false"
:auto-load="autoLoad"
>

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

@ -26,11 +26,8 @@ const props = defineProps({
type: Array,
required: true,
},
initialCatalogParams: {
type: Object,
default: () => ({}),
},
});
const categoryList = ref(null);
const selectedCategoryFk = ref(null);
const typeList = ref([]);
@ -52,14 +49,6 @@ 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 = () => {
selectedCategoryFk.value = null;
typeList.value = null;
@ -97,14 +86,7 @@ const selectedCategory = computed(() => {
(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);
});
@ -120,36 +102,36 @@ function exprBuilder(param, value) {
}
}
const applyTagFilter = (params, search) => {
const applyTags = (params, search) => {
if (!tagValues.value?.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),
const tagGroups = {
values: [...tagValues.value],
tagFk: selectedTag?.value?.id,
tagSelection: {
...selectedTag.value,
orgShowField: selectedTag?.value?.name,
name: selectedTag?.value?.name,
},
tagFk: selectedTag?.value?.tagFk,
})
);
};
params.tagGroups = tagGroups;
search();
selectedTag.value = null;
tagValues.value = [{}];
};
const removeTagChip = (selection, params, search) => {
if (params.tagGroups) {
params.tagGroups = (params.tagGroups || []).filter(
(value) => value !== selection
);
const removeTagGroupParam = (params, search, valIndex = null) => {
if (!params.tagGroups) return;
if (!valIndex) {
params.tagGroups = null;
tagValues.value = [{}];
} else {
(tagValues.value || []).splice(valIndex, 1);
params.tagGroups.values.splice(valIndex, 1);
}
search();
};
@ -178,9 +160,37 @@ function addOrder(value, field, params) {
vnFilterPanelRef.value.search();
}
const getSelectedTagValues = async (tag) => {
try {
if (!tag?.id) return;
const filter = {
fields: ['value'],
order: 'value ASC',
limit: 30,
};
const url = `Tags/${tag?.id}/filterValue`;
console.log('url', url);
const params = { filter: JSON.stringify(filter) };
const { data } = await axios.get(url, {
params,
});
tagOptions.value = data;
} catch (err) {
console.error('Error getting selected tag values');
}
};
onMounted(() => {
selectedCategoryFk.value = getParamWhere(route, 'categoryFk');
selectedTypeFk.value = getParamWhere(route, 'typeFk');
if (route.query.params && JSON.parse(route.query.params).tagGroups) {
const tagGroups = JSON.parse(route.query.params).tagGroups;
tagValues.value = [...tagGroups.values];
selectedTag.value = (props.tags || []).find(
(tag) => tag.name === tagGroups.tagSelection.name
);
}
});
</script>
@ -212,19 +222,19 @@ onMounted(() => {
<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)"
@remove="removeTagGroupParam(params, searchFn)"
>
<pre>{{ chip }}</pre>
<strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
<span>{{
(JSON.parse(chip).values || [])
.map((item) => item.value)
.join(' | ')
}}</span>
<strong class="q-mr-xs">
{{ tag.value?.tagSelection?.name }}:
</strong>
<span>
{{
(tag.value?.values || [])
.map((item) => `"${item.value}"`)
.join(', ')
}}
</span>
</VnFilterPanelChip>
</template>
</template>
@ -323,6 +333,7 @@ onMounted(() => {
rounded
:emit-value="false"
use-input
@update:model-value="($event) => getSelectedTagValues($event)"
/>
</QItemSection>
</QItem>
@ -331,16 +342,9 @@ onMounted(() => {
: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-if="!selectedTag?.isFree && tagOptions"
:label="t('components.itemsFilterPanel.value')"
v-model="value.value"
:options="tagOptions || []"
option-value="value"
@ -350,41 +354,23 @@ onMounted(() => {
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)"
:disable="!value"
:is-clearable="false"
@update:model-value="applyTags(params, searchFn)"
/>
<VnInput
v-else
:label="t('params.value')"
v-model="value.value"
dense
outlined
rounded
class="filter-input"
@keyup.enter="applyTagFilter(params, searchFn)"
:label="t('components.itemsFilterPanel.value')"
:disable="!value"
is-outlined
:is-clearable="false"
@keyup.enter="applyTags(params, searchFn)"
/>
<QIcon
name="delete"
class="filter-icon"
@click="(tagValues || []).splice(index, 1)"
@click="removeTagGroupParam(params, searchFn, index)"
/>
</QItem>
<QItem class="q-mt-lg">
@ -393,11 +379,11 @@ onMounted(() => {
shortcut="+"
flat
class="filter-icon"
size="md"
@click="tagValues.push({})"
/>
</QItem>
<QSeparator />
<pre>{{ params }}</pre>
</template>
</VnFilterPanel>
</template>