feat(VnLogFilter): refactor and work
This commit is contained in:
parent
7487a2706c
commit
c25fddd953
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 checkboxOptions = ref({
|
||||
insert: {
|
||||
const entities = ref();
|
||||
const filterPanelRef = ref({});
|
||||
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) => {
|
||||
if (param == 'originFk') return { originFk: value };
|
||||
};
|
||||
function exprBuilder(param, 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"
|
||||
:url="`${modelName}Logs/${id}/models`"
|
||||
v-if="modelParams.model && modelParams.originFk"
|
||||
:url="`${modelParams.model}Logs/${modelParams.originFk}/models`"
|
||||
:filter="{ order: ['changedModel'] }"
|
||||
@on-fetch="
|
||||
(data) =>
|
||||
(actions = data.map((item) => {
|
||||
const changedModel = item.changedModel;
|
||||
return {
|
||||
locale: useCapitalize(
|
||||
validations[changedModel]?.locale?.name ?? changedModel
|
||||
),
|
||||
value: changedModel,
|
||||
};
|
||||
}))
|
||||
"
|
||||
@on-fetch="(data) => setEntities(data)"
|
||||
auto-load
|
||||
/>
|
||||
{{ modelParams }}
|
||||
<VnFilterPanel
|
||||
ref="filterPanelRef"
|
||||
v-model="modelParams"
|
||||
:data-key="props.dataKey"
|
||||
data-key="vnLog"
|
||||
:search-button="true"
|
||||
:hidden-tags="disableModel && ['modelName', 'id']"
|
||||
search-url="table"
|
||||
:hidden-tags="disableModel && ['model', 'originFk']"
|
||||
: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">
|
||||
<QCheckbox
|
||||
size="sm"
|
||||
v-model="params.checkboxOption"
|
||||
:label="t(`actions.${checkboxOption.label}`)"
|
||||
filled
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
<QOptionGroup
|
||||
size="sm"
|
||||
v-model="modelParams.action"
|
||||
:options="checkboxOptions"
|
||||
color="primary"
|
||||
right-label
|
||||
filled
|
||||
dense
|
||||
type="checkbox"
|
||||
>
|
||||
<template #label="{ label }">
|
||||
{{ t(`actions.${label}`) }}
|
||||
</template>
|
||||
</QOptionGroup>
|
||||
<VnInputDate
|
||||
:label="t('globals.date')"
|
||||
@click="dateFromDialog = true"
|
||||
@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"
|
||||
v-model="modelParams.dateFrom"
|
||||
filled
|
||||
dense
|
||||
/>
|
||||
<VnInputDate :label="t('to')" v-model="modelParams.dateTo" filled dense />
|
||||
<div style="height: 80px"><!-- space to search button --></div>
|
||||
</div>
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
|
|
|
|||
Loading…
Reference in New Issue