Merge branch 'branch-PR-2' of https://gitea.verdnatura.es/hyervoni/salix-front-mindshore into branch-PR-2

src/components/ui/VnFilterPanel.vue

@@ -41,7 +41,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['refresh', 'clear', 'search', 'init']);
+const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
 
 const arrayData = useArrayData(props.dataKey, {
     exprBuilder: props.exprBuilder,
@@ -116,6 +116,7 @@ const tags = computed(() => {
 async function remove(key) {
     userParams.value[key] = null;
     await search();
+    emit('remove', key)
 }
 
 function formatValue(value) {

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -21,16 +21,27 @@ const selectedCategoryFk = ref(null);
 const typeList = ref(null);
 const selectedTypeFk = ref(null);
 
-const selectCategory = (params, category) => {
-    if (params.categoryFk === category?.id) {
+const resetCategory = () => {
     selectedCategoryFk.value = null;
-        params.categoryFk = null;
     typeList.value = null;
+};
+
+const clearFilter = (key) => {
+    if (key === 'categoryFk') {
+        resetCategory();
+    }
+};
+
+const selectCategory = (params, category, search) => {
+    if (params.categoryFk === category?.id) {
+        resetCategory();
+        params.categoryFk = null;
     } else {
         selectedCategoryFk.value = category?.id;
         params.categoryFk = category?.id;
         loadTypes(category?.id);
     }
+    search();
 };
 
 const loadTypes = async (categoryFk) => {
@@ -65,6 +76,8 @@ function exprBuilder(param, value) {
         case 'categoryFk':
         case 'typeFk':
             return { [param]: value };
+        case 'search':
+            return { 'i.name': { like: `%${value}%` } };
     }
 }
 
@@ -88,10 +101,10 @@ const getCategoryClass = (category, params) => {
     <FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
     <VnFilterPanel
         :data-key="props.dataKey"
-        :search-button="true"
         :hidden-tags="['orderFk', 'orderBy']"
         :expr-builder="exprBuilder"
         @init="onFilterInit"
+        @remove="clearFilter"
     >
         <template #tags="{ tag, formatFn }">
             <strong v-if="tag.label === 'categoryFk'">
@@ -105,7 +118,7 @@ const getCategoryClass = (category, params) => {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params }">
+        <template #body="{ params, searchFn }">
             <QList dense>
                 <QItem class="category-filter q-mt-md">
                     <div
@@ -116,7 +129,7 @@ const getCategoryClass = (category, params) => {
                         <QIcon
                             :name="category.icon"
                             class="category-icon"
-                            @click="selectCategory(params, category)"
+                            @click="selectCategory(params, category, searchFn)"
                         >
                             <QTooltip>
                                 {{ t(category.name) }}
@@ -138,7 +151,12 @@ const getCategoryClass = (category, params) => {
                             emit-value
                             use-input
                             :disable="!selectedCategoryFk"
-                            @update:model-value="(value) => (selectedTypeFk = value)"
+                            @update:model-value="
+                                (value) => {
+                                    selectedTypeFk = value;
+                                    searchFn();
+                                }
+                            "
                         >
                             <template #option="{ itemProps, opt }">
                                 <QItem v-bind="itemProps">

src/pages/Order/OrderCatalog.vue

@@ -20,12 +20,6 @@ const catalogParams = {
     orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
 };
 
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'search':
-            return { 'i.name': { like: `%${value}%` } };
-    }
-}
 </script>
 
 <template>
@@ -35,8 +29,8 @@ function exprBuilder(param, value) {
             url="Orders/CatalogFilter"
             :limit="50"
             :user-params="catalogParams"
-            :expr-builder="exprBuilder"
             :static-params="['orderFk', 'orderBy']"
+            :redirect="false"
         />
     </Teleport>
     <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">