feat(VnLogFilter): refs #8449 add userType and creationDates

src/components/VnTable/VnTableFilter.vue

@@ -59,7 +59,7 @@ function columnName(col) {
                         v-if="col?.columnFilter !== false && col?.name !== 'tableActions'"
                         v-model="orders[col.orderBy ?? col.name]"
                         :name="col.orderBy ?? col.name"
-                        :data-key="$attrs['data-key']"
+                        :data-key="$attrs['dataKey']"
                         :search-url="searchUrl"
                         :vertical="true"
                     />

src/components/common/VnLog.vue

@@ -281,9 +281,13 @@ function exprBuilder(param, value) {
             if (value?.length) return { [param]: { inq: value } };
             break;
         case 'from':
-            return { creationDate: { gt: value } };
+            return { creationDate: { gte: value } };
         case 'to':
-            return { creationDate: { lt: value } };
+            return { creationDate: { lte: value } };
+        case 'userType':
+            if (value === 'User') return { userFk: { neq: null } };
+            if (value === 'System') return { userFk: null };
+            break;
         default:
             return { [param]: value };
     }

src/components/common/VnLogFilter.vue

@@ -25,29 +25,30 @@ const { models } = validationsStore;
 const entities = ref([]);
 const editors = ref([]);
 const userParams = ref(useFilterParams($props.dataKey).params);
+let validations = models;
+const userTypes = [
+    { value: 'All', label: t(`Users.All`) },
+    { value: 'User', label: t(`Users.User`) },
+    { value: 'System', label: t(`Users.System`) },
+];
 const checkboxOptions = ref([
     { name: 'insert', label: 'Creates', selected: false },
     { name: 'update', label: 'Edits', selected: false },
     { name: 'delete', label: 'Deletes', selected: false },
     { name: 'select', label: 'Accesses', selected: false },
 ]);
-const creationDate = ref({
-    from: null,
-    to: null,
-});
-let validations = models;
-
 const columns = computed(() => [
     {
         name: 'search',
         label: t('globals.search'),
     },
     { name: 'changedModel' },
+    { name: 'userType' },
     { name: 'userFk' },
     { name: 'change' },
     { name: 'action' },
-    { name: 'from' },
-    { name: 'to' },
+    { name: 'from', orderBy: 'created' },
+    { name: 'to', orderBy: 'created' },
 ]);
 
 const userParamsWatcher = watch(
@@ -62,13 +63,6 @@ const userParamsWatcher = watch(
     },
 );
 
-function calculateDate() {
-    const { from } = creationDate.value;
-    const to = creationDate.value.to ?? Date.vnNew();
-    if (from) return { between: [from, to] };
-    if (creationDate.value.to) return { lte: to };
-}
-
 function getActions() {
     const actions = checkboxOptions.value
         .filter((option) => option.selected)
@@ -111,12 +105,40 @@ function getActions() {
         :exprBuilder
         search-url="logs"
     >
+        <template #filter-changedModel="{ params, columnName, searchFn }">
+            <VnSelect
+                :label="t('globals.entity')"
+                v-model="params[columnName]"
+                option-label="locale"
+                option-value="value"
+                :options="entities"
+                @update:model-value="() => searchFn()"
+                dense
+                filled
+            />
+        </template>
+        <template #filter-userType="{ params, columnName, searchFn }">
+            <QOptionGroup
+                class="text-left"
+                size="sm"
+                v-model="params[columnName]"
+                :options="userTypes"
+                color="primary"
+                @update:model-value="
+                    () => {
+                        params.userFk = null;
+                        searchFn();
+                    }
+                "
+            />
+        </template>
         <template #filter-userFk="{ params, columnName, searchFn }">
             <VnSelect
                 :label="t('globals.user')"
                 v-model="params[columnName]"
                 :options="editors"
                 @update:modelValue="() => searchFn()"
+                :disable="params.userType === 'System'"
                 dense
                 filled
             >
@@ -133,18 +155,6 @@ function getActions() {
                 </template>
             </VnSelect>
         </template>
-        <template #filter-changedModel="{ params, columnName, searchFn }">
-            <VnSelect
-                :label="t('globals.entity')"
-                v-model="params[columnName]"
-                option-label="locale"
-                option-value="value"
-                :options="entities"
-                @update:model-value="() => searchFn()"
-                dense
-                filled
-            />
-        </template>
         <template #filter-change="{ params, columnName, searchFn }">
             <VnInput
                 :label="t('globals.changes')"
@@ -171,28 +181,6 @@ function getActions() {
                 />
             </div>
         </template>
-        <!-- <template #filter-from="{ columnName, searchFn }">
-            <VnInputDate
-                :label="t('globals.from')"
-                v-model="creationDate[columnName]"
-                dense
-                filled
-                @update:modelValue="
-                    () => searchFn(undefined, 'creationDate', calculateDate())
-                "
-            />
-        </template>
-        <template #filter-to="{ columnName, searchFn }">
-            <VnInputDate
-                :label="t('globals.to')"
-                v-model="creationDate[columnName]"
-                dense
-                filled
-                @update:modelValue="
-                    () => searchFn(undefined, 'creationDate', calculateDate())
-                "
-            />
-        </template> -->
         <template #filter-from="{ params, columnName, searchFn }">
             <VnInputDate
                 :label="t('globals.from')"

src/composables/useArrayData.js

@@ -189,7 +189,7 @@ export function useArrayData(key, userOptions) {
 
         store.order = order;
         resetPagination();
-        fetch({});
+        await fetch({});
         index++;
 
         return { index, order };