refactor(VnLog): refs #8449 clear filters when has userParams

src/components/common/VnLog.vue

@@ -15,6 +15,7 @@ import VnUserLink from '../ui/VnUserLink.vue';
 import VnPaginate from '../ui/VnPaginate.vue';
 import VnLogFilter from 'src/components/common/VnLogFilter.vue';
 import RightMenu from './RightMenu.vue';
+import { useFilterParams } from 'src/composables/useFilterParams';
 
 const stateStore = useStateStore();
 const validationsStore = useValidator();
@@ -71,8 +72,8 @@ const filter = {
 };
 
 const paginate = ref();
-const searchInput = ref();
-const selectedFilters = ref({});
+const dataKey = computed(() => `${props.model}Log`);
+const userParams = ref(useFilterParams(dataKey.value).params);
 
 let validations = models;
 let pointRecord = ref(null);
@@ -102,8 +103,6 @@ const validDate = new RegExp(
         /T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/.source,
 );
 
-const dataKey = computed(() => `${props.model}Log`);
-
 function castJsonValue(value) {
     return typeof value === 'string' && validDate.test(value) ? new Date(value) : value;
 }
@@ -216,29 +215,14 @@ async function setLogTree(data) {
 function filterByRecord(modelLog) {
     byRecord.value = true;
     const { id, model } = modelLog;
-
-    searchInput.value = id;
-    selectedFilters.value.changedModelId = id;
-    selectedFilters.value.changedModel = model;
-    applyFilter();
+    applyFilter({ changedModelId: id, changedModel: model });
 }
 
-async function applyFilter() {
-    filter.where = { and: [] };
-    if (
-        !selectedFilters.value.changedModel ||
-        (!selectedFilters.value.changedModelValue &&
-            !selectedFilters.value.changedModelId)
-    )
-        byRecord.value = false;
-
-    if (!byRecord.value) filter.where.and.push({ originFk: route.params.id });
-
-    if (Object.keys(selectedFilters.value).length) {
-        filter.where.and.push(selectedFilters.value);
-    }
-
-    paginate.value.fetch({ filter });
+async function applyFilter(params = {}) {
+    paginate.value.arrayData.applyFilter({
+        filter: {},
+        params: { originFk: route.params.id, ...params },
+    });
 }
 
 function exprBuilder(param, value) {
@@ -272,9 +256,7 @@ function exprBuilder(param, value) {
 }
 
 async function clearFilter() {
-    selectedFilters.value = {};
     byRecord.value = false;
-    searchInput.value = undefined;
     await applyFilter();
 }
 
@@ -600,7 +582,7 @@ watch(
     </RightMenu>
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <QBtn
-            v-if="Object.values(selectedFilters).some((filter) => filter !== undefined)"
+            v-if="Object.keys(userParams).some((filter) => filter !== 'originFk')"
             color="primary"
             icon="filter_alt_off"
             size="md"

src/components/ui/VnFilterPanel.vue

@@ -219,15 +219,10 @@ const getLocale = (label) => {
         </QTooltip>
     </QBtn>
     <QForm @submit="search" id="filterPanelForm" @keyup.enter="search()">
-        <QList dense>
+        <QList dense v-if="showTagChips">
             <QItem class="q-mt-xs">
                 <QItemSection top>
-                    <QItemLabel
-                        header
-                        lines="1"
-                        class="text-uppercase q-py-xs q-px-none"
-                        v-if="showTagChips"
-                    >
+                    <QItemLabel header lines="1" class="text-uppercase q-py-xs q-px-none">
                         {{ t('Applied filters') }}
                     </QItemLabel>
                 </QItemSection>
@@ -246,7 +241,7 @@ const getLocale = (label) => {
                     </QBtn>
                 </QItemSection>
             </QItem>
-            <QItem class="q-mb-sm" v-if="showTagChips">
+            <QItem class="q-mb-sm">
                 <div
                     v-if="tagsList.length === 0"
                     class="text-grey font-xs text-center full-width"

src/components/ui/VnPaginate.vue

@@ -215,6 +215,7 @@ defineExpose({
     paginate,
     userParams: arrayData.store.userParams,
     currentFilter: arrayData.store.currentFilter,
+    arrayData,
 });
 </script>