feat(VnLogFilter): refactor and work

src/components/common/VnLog.vue

@@ -14,6 +14,7 @@ import VnJsonValue from '../common/VnJsonValue.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
 import VnLogFilter from './VnLogFilter.vue';
 import VnTable from '../VnTable/VnTable.vue';
+import RightMenu from './RightMenu.vue';
 
 const stateStore = useStateStore();
 const validationsStore = useValidator();
@@ -43,7 +44,11 @@ const paginate = ref({});
 const searchInput = ref();
 const modelName = computed(() => params.value.model || props.model);
 const selectedFilters = ref({});
-const params = ref({ originFk: paginate.value?.params?.originFk ?? route.params.id });
+const params = ref({
+    originFk: paginate.value?.params?.originFk ?? route.params.id,
+    model: props.model,
+    action: [],
+});
 let validations = models;
 let pointRecord = ref(null);
 let byRecord = ref(false);
@@ -144,7 +149,6 @@ function parseProps(propNames, locale, vals, olds) {
 }
 
 function getLogTree(data) {
-    console.log('data: ', data);
     if (!data) return;
 
     const logs = [];
@@ -238,14 +242,12 @@ function filterByRecord(modelLog) {
         :url="`${modelName}Logs`"
         :skeleton="false"
         :user-filter="filter"
-        :auto-load="!!modelName || route.query.table"
         @on-fetch="setLogTree"
         :columns="[]"
         :right-search="false"
-        search-url="table"
+        :search-url="false"
     >
         <template #body>
-            {{ paginate.params }}
             <div
                 class="column items-center logs origin-log q-mt-md"
                 v-for="(originLog, originLogIndex) in logTree"

src/components/common/VnLogFilter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from './VnInput.vue';
@@ -8,6 +8,8 @@ import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import FetchData from '../FetchData.vue';
 import VnInputDate from './VnInputDate.vue';
+import { useCapitalize } from 'src/composables/useCapitalize';
+import validations from 'src/boot/validations';
 
 const { t } = useI18n();
 const validationsStore = useValidator();
@@ -30,59 +32,77 @@ const userTypes = [
     { label: 'User', value: { neq: null } },
     { label: 'System', value: null },
 ];
-const actions = ref();
+const entities = ref();
-const checkboxOptions = ref({
+const filterPanelRef = ref({});
-    insert: {
+const checkboxOptions = [
+    {
         label: 'Creates',
-        selected: false,
+        value: ['insert'],
     },
-    update: {
+    {
         label: 'Edits',
-        selected: false,
+        value: ['update'],
     },
-    delete: {
+    {
         label: 'Deletes',
-        selected: false,
+        value: ['delete'],
     },
-    select: {
+    {
         label: 'Accesses',
-        selected: false,
+        value: ['select'],
     },
+];
+
+onMounted(() => {
+    if (modelParams.value.model) filterPanelRef.value.search();
 });
 
-const exprBuilder = (param, value) => {
+function exprBuilder(param, value) {
-    if (param == 'originFk') return { originFk: value };
+    switch (param) {
+        case 'action':
+            if (value.length == 0) return;
+            return { [param]: { inq: value.flat() } };
+        case 'dateFrom':
+            return { creationDate: { gte: value } };
+        case 'dateTo':
+            return { creationDate: { lte: value } };
+        case 'changedModelValue':
+            return { [param]: { like: `%${value}%` } };
+        default:
+            return { [param]: value };
+    }
+}
+
+function setEntities(data) {
+    entities.value = data.map((item) => {
+        const changedModel = item.changedModel;
+        return {
+            locale: useCapitalize(
+                validations?.[changedModel]?.locale?.name ?? changedModel
+            ),
+            value: changedModel,
         };
+    });
+}
 </script>
 
 <template>
     <FetchData
-        v-if="modelName && id"
+        v-if="modelParams.model && modelParams.originFk"
-        :url="`${modelName}Logs/${id}/models`"
+        :url="`${modelParams.model}Logs/${modelParams.originFk}/models`"
         :filter="{ order: ['changedModel'] }"
-        @on-fetch="
+        @on-fetch="(data) => setEntities(data)"
-            (data) =>
-                (actions = data.map((item) => {
-                    const changedModel = item.changedModel;
-                    return {
-                        locale: useCapitalize(
-                            validations[changedModel]?.locale?.name ?? changedModel
-                        ),
-                        value: changedModel,
-                    };
-                }))
-        "
         auto-load
     />
-    {{ modelParams }}
     <VnFilterPanel
+        ref="filterPanelRef"
         v-model="modelParams"
-        :data-key="props.dataKey"
+        data-key="vnLog"
         :search-button="true"
-        :hidden-tags="disableModel && ['modelName', 'id']"
+        :hidden-tags="disableModel && ['model', 'originFk']"
-        search-url="table"
         :redirect="false"
         :expr-builder="exprBuilder"
+        :search-url="false"
     >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -90,7 +110,7 @@ const exprBuilder = (param, value) => {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params }">
+        <template #body>
             <div class="q-gutter-y-sm q-px-sm">
                 <QCard class="q-pa-xs q-mb-lg q-gutter-y-xs" flat bordered>
                     <VnSelect
@@ -100,14 +120,14 @@ const exprBuilder = (param, value) => {
                                 ?.filter((key) => key.endsWith('Log'))
                                 ?.map((key) => key.slice(0, -3))
                         "
-                        v-model="params.model"
+                        v-model="modelParams.model"
                         :disable="props.disableModel"
                         filled
                         dense
                     />
                     <VnInput
                         :label="$t('globals.id')"
-                        v-model="params.originFk"
+                        v-model="modelParams.originFk"
                         :disable="props.disableModel"
                         filled
                         dense
@@ -115,7 +135,7 @@ const exprBuilder = (param, value) => {
                 </QCard>
                 <VnInput
                     :label="t('globals.search')"
-                    v-model="params.searchInput"
+                    v-model="modelParams.changedModelValue"
                     filled
                     dense
                 >
@@ -127,17 +147,17 @@ const exprBuilder = (param, value) => {
                 </VnInput>
                 <VnSelect
                     :label="t('globals.entity')"
-                    v-model="params.changedModel"
+                    v-model="modelParams.changedModel"
                     option-label="locale"
                     option-value="value"
-                    :options="actions"
+                    :options="entities"
                     hide-selected
                     filled
                     dense
                 />
                 <QOptionGroup
                     size="sm"
-                    v-model="params.userRadio"
+                    v-model="modelParams.userFk"
                     :options="userTypes"
                     color="primary"
                     right-label
@@ -148,13 +168,14 @@ const exprBuilder = (param, value) => {
                         {{ t(`Users.${label}`) }}
                     </template>
                 </QOptionGroup>
-                <QItemSection v-if="params.userRadio !== null">
+                <QItemSection v-if="modelParams.userFk !== null">
                     <VnSelect
+                        :disable="!modelParams.model || !modelParams.originFk"
                         :label="t('globals.user')"
-                        v-model="params.userSelect"
+                        v-model="modelParams.userFk"
                         option-label="name"
                         option-value="id"
-                        :url="`${params.modelName}Logs/${params.id}/editors`"
+                        :url="`${modelParams.model}Logs/${modelParams.originFk}/editors`"
                         :fields="['id', 'nickname', 'name', 'image']"
                         sort-by="nickname"
                         hide-selected
@@ -176,7 +197,7 @@ const exprBuilder = (param, value) => {
                 </QItemSection>
                 <VnInput
                     :label="t('globals.changes')"
-                    v-model="params.changeInput"
+                    v-model="modelParams.changedModelValue"
                     filled
                     dense
                 >
@@ -188,31 +209,28 @@ const exprBuilder = (param, value) => {
                         </QIcon>
                     </template>
                 </VnInput>
-                <div v-for="(checkboxOption, index) in checkboxOptions" :key="index">
+                <QOptionGroup
-                    <QCheckbox
                     size="sm"
-                        v-model="params.checkboxOption"
+                    v-model="modelParams.action"
-                        :label="t(`actions.${checkboxOption.label}`)"
+                    :options="checkboxOptions"
+                    color="primary"
+                    right-label
                     filled
                     dense
-                    />
+                    type="checkbox"
-                </div>
+                >
+                    <template #label="{ label }">
+                        {{ t(`actions.${label}`) }}
+                    </template>
+                </QOptionGroup>
                 <VnInputDate
                     :label="t('globals.date')"
-                    @click="dateFromDialog = true"
+                    v-model="modelParams.dateFrom"
-                    @focus="(evt) => evt.target.blur()"
-                    v-model="params.dateFrom"
-                    filled
-                    dense
-                />
-                <VnInputDate
-                    :label="t('to')"
-                    @click="dateToDialog = true"
-                    @focus="(evt) => evt.target.blur()"
-                    v-model="params.dateTo"
                     filled
                     dense
                 />
+                <VnInputDate :label="t('to')" v-model="modelParams.dateTo" filled dense />
+                <div style="height: 80px"><!-- space to search button --></div>
             </div>
         </template>
     </VnFilterPanel>