{
+ selectedCategoryFk.value = getParamWhere(route, 'categoryFk');
+ selectedTypeFk.value = getParamWhere(route, 'typeFk');
+});
+
const resetCategory = (params, search) => {
selectedCategoryFk.value = null;
typeList.value = null;
params.categoryFk = null;
params.typeFk = null;
arrayData.store.userFilter = null;
- removeTagGroupParam(params, search);
+ removeTagGroupParam(search);
};
const selectCategory = (params, category, search) => {
if (params.categoryFk === category?.id) {
resetCategory(params, search);
- params.categoryFk = null;
- } else {
- selectedCategoryFk.value = category?.id;
- params.categoryFk = category?.id;
- params.typeFk = null;
- selectedTypeFk.value = null;
- loadTypes(category?.id);
+ return;
}
+ selectedCategoryFk.value = category?.id;
+ params.categoryFk = category?.id;
+ params.typeFk = null;
+ selectedTypeFk.value = null;
+ loadTypes(category?.id);
search();
};
@@ -115,13 +120,23 @@ const applyTags = (tagInfo, params, search) => {
search();
};
-const removeTagGroupParam = (params, search, valIndex = null) => {
- if (!valIndex) {
- params.tagGroups = null;
- search();
+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 = (search, valIndex) => {
+ if (!valIndex && valIndex !== 0) {
+ currentParams.value.tagGroups = null;
} else {
- params.tagGroups.splice(valIndex, 1);
- search();
+ currentParams.value.tagGroups.splice(valIndex, 1);
}
};
@@ -142,6 +157,12 @@ const getCategoryClass = (category, params) => {
}
};
+const clearFilter = (key) => {
+ if (key === 'categoryFk') {
+ resetCategory();
+ }
+};
+
function addOrder(value, field, params) {
let { orderBy } = params;
orderBy = JSON.parse(orderBy);
@@ -157,7 +178,7 @@ onMounted(() => {
-
+
{
:expr-builder="exprBuilder"
:custom-tags="['tagGroups', 'categoryFk']"
:redirect="false"
- search-url="params"
+ @remove="clearFilter"
+ v-model="currentParams"
>
@@ -188,7 +210,7 @@ onMounted(() => {
@remove="
customTag.label === 'categoryFk'
? resetCategory(params, searchFn)
- : removeTagGroupParam(params, searchFn, valIndex)
+ : removeTagGroupParam(searchFn, valIndex)
"
>
@@ -288,46 +310,39 @@ onMounted(() => {
-
-
-
+
-
+
-
+
diff --git a/src/pages/Zone/Card/ZoneCard.vue b/src/pages/Zone/Card/ZoneCard.vue
index 8ad25b80f..a470cd5bd 100644
--- a/src/pages/Zone/Card/ZoneCard.vue
+++ b/src/pages/Zone/Card/ZoneCard.vue
@@ -24,7 +24,6 @@ function notIsLocations(ifIsFalse, ifIsTrue) {
:descriptor="ZoneDescriptor"
:filter-panel="notIsLocations(ZoneFilterPanel, undefined)"
:search-data-key="notIsLocations('ZoneList', undefined)"
- :custom-url="`Zones/${route.params?.id}/getLeaves`"
:searchbar-props="{
url: notIsLocations('Zones', 'ZoneLocations'),
label: notIsLocations(t('list.searchZone'), t('list.searchLocation')),
diff --git a/src/pages/Zone/Card/ZoneLocationsTree.vue b/src/pages/Zone/Card/ZoneLocationsTree.vue
index b0a97b2f6..23a37ef7c 100644
--- a/src/pages/Zone/Card/ZoneLocationsTree.vue
+++ b/src/pages/Zone/Card/ZoneLocationsTree.vue
@@ -39,8 +39,7 @@ const url = computed(() => `Zones/${route.params.id}/getLeaves`);
const arrayData = useArrayData(datakey, {
url: url.value,
});
-const { store } = arrayData;
-const storeData = computed(() => store.data);
+const store = arrayData.store;
const defaultNode = {
id: null,
@@ -66,8 +65,20 @@ const onNodeExpanded = async (nodeKeysArray) => {
if (!nodeKeysSet.has(null)) return;
const wasExpanded = !previousExpandedNodes.value.has(lastNodeKey);
- if (wasExpanded) await fetchNodeLeaves(lastNodeKey);
- else {
+ if (wasExpanded && treeRef.value) {
+ const node = treeRef.value?.getNodeByKey(lastNodeKey);
+ const params = { parentId: node.id };
+ const response = await axios.get(`Zones/${route.params.id}/getLeaves`, {
+ params,
+ });
+ if (response.data) {
+ node.childs = response.data.map((n) => {
+ if (n.sons > 0) n.childs = [{}];
+ return n;
+ });
+ }
+ await fetchNodeLeaves(lastNodeKey, true);
+ } else {
const difference = new Set(
[...previousExpandedNodes.value].filter((x) => !nodeKeysSet.has(x))
);
@@ -83,41 +94,21 @@ const formatNodeSelected = (node) => {
if (node.selected === 1) node.selected = true;
else if (node.selected === 0) node.selected = false;
- if (node.childs && node.childs.length > 0) {
- expanded.value.push(node.id);
-
- node.childs.forEach((childNode) => {
- formatNodeSelected(childNode);
- });
- }
-
if (node.sons > 0 && !node.childs) node.childs = [{}];
};
const fetchNodeLeaves = async (nodeKey) => {
- try {
- const node = treeRef.value?.getNodeByKey(nodeKey);
- if (!node || node.sons === 0) return;
+ if (!treeRef.value) return;
+ const node = treeRef.value?.getNodeByKey(nodeKey);
+ if (node.selected === 1) node.selected = true;
+ else if (node.selected === 0) node.selected = false;
+ if (!node || node.sons === 0) return;
- const params = { parentId: node.id };
- const response = await axios.get(`Zones/${route.params.id}/getLeaves`, {
- params,
- });
- if (response.data) {
- node.childs = response.data.map((n) => {
- formatNodeSelected(n);
- return n;
- });
- }
-
- state.set('Tree', node);
- } catch (err) {
- console.error('Error fetching department leaves', err);
- throw new Error();
- }
+ state.set('Tree', node);
};
function getNodeIds(node) {
+ if (!node) return [];
let ids = [];
if (node.id) ids.push(node.id);
@@ -128,60 +119,46 @@ function getNodeIds(node) {
return ids;
}
-watch(storeData, async (val) => {
- // Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar
- if (!nodes.value[0]) nodes.value = [defaultNode];
- nodes.value[0].childs = [...val];
- const fetchedNodeKeys = val.flatMap(getNodeIds);
- state.set('Tree', [...fetchedNodeKeys]);
+watch(
+ () => store.data,
+ async (val) => {
+ if (!val) return;
+ // // Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar
+ if (!nodes.value[0]) nodes.value = [defaultNode];
+ nodes.value[0].childs = [...val];
+ const fetchedNodeKeys = val.flatMap(getNodeIds);
+ state.set('Tree', [...fetchedNodeKeys]);
- if (store.userParams?.search === '') {
- val.forEach((n) => {
- formatNodeSelected(n);
- });
- } else {
- for (let n of state.get('Tree')) await fetchNodeLeaves(n);
- expanded.value = [null, ...fetchedNodeKeys];
- }
- previousExpandedNodes.value = new Set(expanded.value);
-});
+ if (!store.userParams?.search) {
+ val.forEach((n) => {
+ formatNodeSelected(n);
+ });
+ store.data = null;
+ expanded.value = [null];
+ } else {
+ for (let n of state.get('Tree')) {
+ await fetchNodeLeaves(n);
+ }
+ expanded.value = [null, ...fetchedNodeKeys];
+ }
+ previousExpandedNodes.value = new Set(expanded.value);
+ },
+ { immediate: true }
+);
const reFetch = async () => {
const { data } = await arrayData.fetch({ append: false });
nodes.value = data;
+ expanded.value = [null];
};
onMounted(async () => {
- if (store.userParams?.search && !props.showSearchBar) {
- await reFetch();
- return;
- }
- const stateTree = state.get('Tree');
- const tree = stateTree ? [...state.get('Tree')] : [null];
- const lastStateTree = state.get('TreeState');
- if (tree) {
- for (let n of tree) {
- await fetchNodeLeaves(n);
- }
-
- if (lastStateTree) {
- tree.push(lastStateTree);
- await fetchNodeLeaves(lastStateTree);
- }
- }
-
- setTimeout(() => {
- if (lastStateTree) {
- document.getElementById(lastStateTree).scrollIntoView();
- }
- }, 1000);
-
- expanded.value.unshift(null);
- previousExpandedNodes.value = new Set(expanded.value);
+ if (store.userParams?.search) await arrayData.fetch({});
});
onUnmounted(() => {
state.set('Tree', undefined);
+ arrayData.destroy();
});