forked from verdnatura/salix-front
feat: refs #7909 add scroll
This commit is contained in:
parent
8277b30033
commit
77cb0ed7a8
|
|
@ -14,6 +14,7 @@ import VnJsonValue from '../common/VnJsonValue.vue';
|
||||||
import FetchData from '../FetchData.vue';
|
import FetchData from '../FetchData.vue';
|
||||||
import VnSelect from './VnSelect.vue';
|
import VnSelect from './VnSelect.vue';
|
||||||
import VnUserLink from '../ui/VnUserLink.vue';
|
import VnUserLink from '../ui/VnUserLink.vue';
|
||||||
|
import VnPaginate from '../ui/VnPaginate.vue';
|
||||||
|
|
||||||
const stateStore = useStateStore();
|
const stateStore = useStateStore();
|
||||||
const validationsStore = useValidator();
|
const validationsStore = useValidator();
|
||||||
|
|
@ -68,7 +69,6 @@ const filter = {
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
const workers = ref();
|
|
||||||
const actions = ref();
|
const actions = ref();
|
||||||
const changeInput = ref();
|
const changeInput = ref();
|
||||||
const searchInput = ref();
|
const searchInput = ref();
|
||||||
|
|
@ -235,9 +235,9 @@ async function openPointRecord(id, modelLog) {
|
||||||
const locale = validations[modelLog.model]?.locale || {};
|
const locale = validations[modelLog.model]?.locale || {};
|
||||||
pointRecord.value = parseProps(propNames, locale, data);
|
pointRecord.value = parseProps(propNames, locale, data);
|
||||||
}
|
}
|
||||||
async function setLogTree() {
|
async function setLogTree(data) {
|
||||||
filter.where = { and: [{ originFk: route.params.id }] };
|
filter.where = { and: [{ originFk: route.params.id }] };
|
||||||
const { data } = await getLogs(filter);
|
// const { data } = await getLogs(filter);
|
||||||
logTree.value = getLogTree(data);
|
logTree.value = getLogTree(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -377,8 +377,6 @@ async function clearFilter() {
|
||||||
await applyFilter();
|
await applyFilter();
|
||||||
}
|
}
|
||||||
|
|
||||||
setLogTree();
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
stateStore.rightDrawer = false;
|
stateStore.rightDrawer = false;
|
||||||
});
|
});
|
||||||
|
|
@ -391,16 +389,6 @@ watch(
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<FetchData
|
|
||||||
:url="`${props.model}Logs/${route.params.id}/editors`"
|
|
||||||
:filter="{
|
|
||||||
fields: ['id', 'nickname', 'name', 'image'],
|
|
||||||
order: 'nickname',
|
|
||||||
limit: 30,
|
|
||||||
}"
|
|
||||||
@on-fetch="(data) => (workers = data)"
|
|
||||||
auto-load
|
|
||||||
/>
|
|
||||||
<FetchData
|
<FetchData
|
||||||
:url="`${props.model}Logs/${route.params.id}/models`"
|
:url="`${props.model}Logs/${route.params.id}/models`"
|
||||||
:filter="{ order: ['changedModel'] }"
|
:filter="{ order: ['changedModel'] }"
|
||||||
|
|
@ -418,231 +406,282 @@ watch(
|
||||||
"
|
"
|
||||||
auto-load
|
auto-load
|
||||||
/>
|
/>
|
||||||
<div
|
<VnPaginate
|
||||||
class="column items-center logs origin-log q-mt-md"
|
:data-key="`${model}Log`"
|
||||||
v-for="(originLog, originLogIndex) in logTree"
|
:url="`${model}Logs`"
|
||||||
:key="originLogIndex"
|
:filter="filter"
|
||||||
|
:skeleton="false"
|
||||||
|
auto-load
|
||||||
|
@on-fetch="setLogTree"
|
||||||
>
|
>
|
||||||
<QItem class="origin-info items-center q-my-md" v-if="logTree.length > 1">
|
<template #body>
|
||||||
<h6 class="origin-id text-grey">
|
<div
|
||||||
{{ useCapitalize(validations[props.model].locale.name) }}
|
class="column items-center logs origin-log q-mt-md"
|
||||||
#{{ originLog.originFk }}
|
v-for="(originLog, originLogIndex) in logTree"
|
||||||
</h6>
|
:key="originLogIndex"
|
||||||
<div class="line bg-grey"></div>
|
>
|
||||||
</QItem>
|
<QItem class="origin-info items-center q-my-md" v-if="logTree.length > 1">
|
||||||
<div
|
<h6 class="origin-id text-grey">
|
||||||
class="user-log q-mb-sm"
|
{{ useCapitalize(validations[props.model].locale.name) }}
|
||||||
v-for="(userLog, userIndex) in originLog.logs"
|
#{{ originLog.originFk }}
|
||||||
:key="userIndex"
|
</h6>
|
||||||
>
|
<div class="line bg-grey"></div>
|
||||||
<div class="timeline">
|
</QItem>
|
||||||
<div class="user-avatar">
|
<div
|
||||||
<VnUserLink :worker-id="userLog?.user?.id">
|
class="user-log q-mb-sm"
|
||||||
<template #link>
|
v-for="(userLog, userIndex) in originLog.logs"
|
||||||
<VnAvatar
|
:key="userIndex"
|
||||||
:class="{ 'cursor-pointer': userLog?.user?.id }"
|
|
||||||
:worker-id="userLog?.user?.id"
|
|
||||||
:title="userLog?.user?.nickname"
|
|
||||||
:show-letter="!userLog?.user"
|
|
||||||
size="lg"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</VnUserLink>
|
|
||||||
</div>
|
|
||||||
<div class="arrow bg-panel" v-if="byRecord"></div>
|
|
||||||
<div class="line"></div>
|
|
||||||
</div>
|
|
||||||
<QList class="user-changes" v-if="userLog">
|
|
||||||
<QItem
|
|
||||||
class="model-log column q-px-none q-py-xs"
|
|
||||||
v-for="(modelLog, modelLogIndex) in userLog.logs"
|
|
||||||
:key="modelLogIndex"
|
|
||||||
>
|
>
|
||||||
<QItemSection>
|
<div class="timeline">
|
||||||
<QItemLabel class="model-info q-mb-xs" v-if="!byRecord">
|
<div class="user-avatar">
|
||||||
<QChip
|
<VnUserLink :worker-id="userLog?.user?.id">
|
||||||
dense
|
<template #link>
|
||||||
size="md"
|
<VnAvatar
|
||||||
class="model-name q-mr-xs text-white"
|
:class="{ 'cursor-pointer': userLog?.user?.id }"
|
||||||
v-if="
|
:worker-id="userLog?.user?.id"
|
||||||
!(modelLog.changedModel && modelLog.changedModelId) &&
|
:title="userLog?.user?.nickname"
|
||||||
modelLog.model
|
:show-letter="!userLog?.user"
|
||||||
"
|
size="lg"
|
||||||
:style="{
|
/>
|
||||||
backgroundColor: useColor(modelLog.model),
|
</template>
|
||||||
}"
|
</VnUserLink>
|
||||||
:title="`${modelLog.model} #${modelLog.id}`"
|
</div>
|
||||||
>
|
<div class="arrow bg-panel" v-if="byRecord"></div>
|
||||||
{{ t(modelLog.modelI18n) }}
|
<div class="line"></div>
|
||||||
</QChip>
|
</div>
|
||||||
|
<QList class="user-changes" v-if="userLog">
|
||||||
<span
|
<QItem
|
||||||
class="model-id q-mr-xs"
|
class="model-log column q-px-none q-py-xs"
|
||||||
v-if="modelLog.summaryId"
|
v-for="(modelLog, modelLogIndex) in userLog.logs"
|
||||||
v-text="`#${modelLog.summaryId}`"
|
:key="modelLogIndex"
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="model-value"
|
|
||||||
:title="modelLog.showValue"
|
|
||||||
v-text="modelLog.showValue"
|
|
||||||
/>
|
|
||||||
<QBtn
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
color="grey"
|
|
||||||
class="q-mr-xs q-ml-auto"
|
|
||||||
size="sm"
|
|
||||||
icon="filter_alt"
|
|
||||||
:title="t('recordChanges')"
|
|
||||||
@click.stop="filterByRecord(modelLog)"
|
|
||||||
/>
|
|
||||||
</QItemLabel>
|
|
||||||
</QItemSection>
|
|
||||||
<QItemSection>
|
|
||||||
<QCard
|
|
||||||
class="changes-log q-py-none q-mb-xs"
|
|
||||||
v-for="(log, logIndex) in modelLog.logs"
|
|
||||||
:key="logIndex"
|
|
||||||
>
|
>
|
||||||
<QCardSection class="change-info q-pa-none">
|
<QItemSection>
|
||||||
<QItem
|
<QItemLabel class="model-info q-mb-xs" v-if="!byRecord">
|
||||||
class="q-px-sm q-py-xs justify-between items-center"
|
<QChip
|
||||||
>
|
dense
|
||||||
<div
|
size="md"
|
||||||
class="date text-grey text-caption q-mr-sm"
|
class="model-name q-mr-xs text-white"
|
||||||
:title="
|
v-if="
|
||||||
date.formatDate(
|
!(
|
||||||
log.creationDate,
|
modelLog.changedModel &&
|
||||||
'DD/MM/YYYY hh:mm:ss'
|
modelLog.changedModelId
|
||||||
) ?? `date:'dd/MM/yyyy HH:mm:ss'`
|
) && modelLog.model
|
||||||
"
|
"
|
||||||
|
:style="{
|
||||||
|
backgroundColor: useColor(modelLog.model),
|
||||||
|
}"
|
||||||
|
:title="`${modelLog.model} #${modelLog.id}`"
|
||||||
>
|
>
|
||||||
{{ toRelativeDate(log.creationDate) }}
|
{{ t(modelLog.modelI18n) }}
|
||||||
</div>
|
</QChip>
|
||||||
<div>
|
|
||||||
<QBtn
|
|
||||||
color="grey"
|
|
||||||
class="pit"
|
|
||||||
icon="preview"
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
:title="t('pointRecord')"
|
|
||||||
padding="none"
|
|
||||||
v-if="log.action != 'insert'"
|
|
||||||
@click.stop="
|
|
||||||
openPointRecord(log.id, modelLog)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<QPopupProxy>
|
|
||||||
<QCard v-if="pointRecord">
|
|
||||||
<div
|
|
||||||
class="header q-px-sm q-py-xs q-ma-none text-white text-bold bg-primary"
|
|
||||||
>
|
|
||||||
{{ modelLog.modelI18n }}
|
|
||||||
<span v-if="modelLog.id"
|
|
||||||
>#{{ modelLog.id }}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<QCardSection
|
|
||||||
class="change-detail q-pa-sm"
|
|
||||||
>
|
|
||||||
<QItem
|
|
||||||
v-for="(
|
|
||||||
value, index
|
|
||||||
) in pointRecord"
|
|
||||||
:key="index"
|
|
||||||
class="q-pa-none"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="json-field q-mr-xs text-grey"
|
|
||||||
:title="value.name"
|
|
||||||
>
|
|
||||||
{{ value.nameI18n }}:
|
|
||||||
</span>
|
|
||||||
<VnJsonValue
|
|
||||||
:value="value.val.val"
|
|
||||||
/>
|
|
||||||
</QItem>
|
|
||||||
</QCardSection>
|
|
||||||
</QCard>
|
|
||||||
</QPopupProxy>
|
|
||||||
</QBtn>
|
|
||||||
<QIcon
|
|
||||||
class="action q-ml-xs"
|
|
||||||
:class="actionsClass[log.action]"
|
|
||||||
:name="actionsIcon[log.action]"
|
|
||||||
:title="
|
|
||||||
t(`actions.${actionsText[log.action]}`)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</QItem>
|
|
||||||
</QCardSection>
|
|
||||||
<QCardSection
|
|
||||||
class="change-detail q-px-sm q-py-xs"
|
|
||||||
:class="{ expanded: log.expand }"
|
|
||||||
v-if="log.props.length || log.description"
|
|
||||||
>
|
|
||||||
<QIcon
|
|
||||||
class="cursor-pointer q-mr-md"
|
|
||||||
color="grey"
|
|
||||||
name="expand_more"
|
|
||||||
:title="t('globals.details')"
|
|
||||||
size="sm"
|
|
||||||
@click="log.expand = !log.expand"
|
|
||||||
/>
|
|
||||||
<span v-if="log.props.length" class="attributes">
|
|
||||||
<span v-if="!log.expand" class="q-pa-none text-grey">
|
|
||||||
<span
|
|
||||||
v-for="(prop, propIndex) in log.props"
|
|
||||||
:key="propIndex"
|
|
||||||
class="basic-json"
|
|
||||||
>
|
|
||||||
<span class="json-field" :title="prop.name">
|
|
||||||
{{ prop.nameI18n }}:
|
|
||||||
</span>
|
|
||||||
<VnJsonValue :value="prop.val.val" />
|
|
||||||
<span v-if="propIndex < log.props.length - 1"
|
|
||||||
>,
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span
|
<span
|
||||||
v-if="log.expand"
|
class="model-id q-mr-xs"
|
||||||
class="expanded-json column q-pa-none"
|
v-if="modelLog.summaryId"
|
||||||
>
|
v-text="`#${modelLog.summaryId}`"
|
||||||
<div
|
/>
|
||||||
v-for="(prop, prop2Index) in log.props"
|
<span
|
||||||
:key="prop2Index"
|
class="model-value"
|
||||||
class="q-pa-none text-grey"
|
:title="modelLog.showValue"
|
||||||
|
v-text="modelLog.showValue"
|
||||||
|
/>
|
||||||
|
<QBtn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="grey"
|
||||||
|
class="q-mr-xs q-ml-auto"
|
||||||
|
size="sm"
|
||||||
|
icon="filter_alt"
|
||||||
|
:title="t('recordChanges')"
|
||||||
|
@click.stop="filterByRecord(modelLog)"
|
||||||
|
/>
|
||||||
|
</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
<QItemSection>
|
||||||
|
<QCard
|
||||||
|
class="changes-log q-py-none q-mb-xs"
|
||||||
|
v-for="(log, logIndex) in modelLog.logs"
|
||||||
|
:key="logIndex"
|
||||||
|
>
|
||||||
|
<QCardSection class="change-info q-pa-none">
|
||||||
|
<QItem
|
||||||
|
class="q-px-sm q-py-xs justify-between items-center"
|
||||||
>
|
>
|
||||||
<span class="json-field" :title="prop.name">
|
<div
|
||||||
{{ prop.nameI18n }}:
|
class="date text-grey text-caption q-mr-sm"
|
||||||
</span>
|
:title="
|
||||||
<VnJsonValue :value="prop.val.val" />
|
date.formatDate(
|
||||||
<span v-if="prop.val.id" class="id-value">
|
log.creationDate,
|
||||||
#{{ prop.val.id }}
|
'DD/MM/YYYY hh:mm:ss'
|
||||||
</span>
|
) ?? `date:'dd/MM/yyyy HH:mm:ss'`
|
||||||
<span v-if="log.action == 'update'">
|
"
|
||||||
←
|
>
|
||||||
<VnJsonValue :value="prop.old.val" />
|
{{ toRelativeDate(log.creationDate) }}
|
||||||
<span v-if="prop.old.id" class="id-value">
|
</div>
|
||||||
#{{ prop.old.id }}
|
<div>
|
||||||
|
<QBtn
|
||||||
|
color="grey"
|
||||||
|
class="pit"
|
||||||
|
icon="preview"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
:title="t('pointRecord')"
|
||||||
|
padding="none"
|
||||||
|
v-if="log.action != 'insert'"
|
||||||
|
@click.stop="
|
||||||
|
openPointRecord(log.id, modelLog)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<QPopupProxy>
|
||||||
|
<QCard v-if="pointRecord">
|
||||||
|
<div
|
||||||
|
class="header q-px-sm q-py-xs q-ma-none text-white text-bold bg-primary"
|
||||||
|
>
|
||||||
|
{{ modelLog.modelI18n }}
|
||||||
|
<span v-if="modelLog.id"
|
||||||
|
>#{{
|
||||||
|
modelLog.id
|
||||||
|
}}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<QCardSection
|
||||||
|
class="change-detail q-pa-sm"
|
||||||
|
>
|
||||||
|
<QItem
|
||||||
|
v-for="(
|
||||||
|
value, index
|
||||||
|
) in pointRecord"
|
||||||
|
:key="index"
|
||||||
|
class="q-pa-none"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="json-field q-mr-xs text-grey"
|
||||||
|
:title="
|
||||||
|
value.name
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
value.nameI18n
|
||||||
|
}}:
|
||||||
|
</span>
|
||||||
|
<VnJsonValue
|
||||||
|
:value="
|
||||||
|
value.val.val
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</QItem>
|
||||||
|
</QCardSection>
|
||||||
|
</QCard>
|
||||||
|
</QPopupProxy>
|
||||||
|
</QBtn>
|
||||||
|
<QIcon
|
||||||
|
class="action q-ml-xs"
|
||||||
|
:class="actionsClass[log.action]"
|
||||||
|
:name="actionsIcon[log.action]"
|
||||||
|
:title="
|
||||||
|
t(
|
||||||
|
`actions.${
|
||||||
|
actionsText[log.action]
|
||||||
|
}`
|
||||||
|
)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</QItem>
|
||||||
|
</QCardSection>
|
||||||
|
<QCardSection
|
||||||
|
class="change-detail q-px-sm q-py-xs"
|
||||||
|
:class="{ expanded: log.expand }"
|
||||||
|
v-if="log.props.length || log.description"
|
||||||
|
>
|
||||||
|
<QIcon
|
||||||
|
class="cursor-pointer q-mr-md"
|
||||||
|
color="grey"
|
||||||
|
name="expand_more"
|
||||||
|
:title="t('globals.details')"
|
||||||
|
size="sm"
|
||||||
|
@click="log.expand = !log.expand"
|
||||||
|
/>
|
||||||
|
<span v-if="log.props.length" class="attributes">
|
||||||
|
<span
|
||||||
|
v-if="!log.expand"
|
||||||
|
class="q-pa-none text-grey"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-for="(prop, propIndex) in log.props"
|
||||||
|
:key="propIndex"
|
||||||
|
class="basic-json"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="json-field"
|
||||||
|
:title="prop.name"
|
||||||
|
>
|
||||||
|
{{ prop.nameI18n }}:
|
||||||
|
</span>
|
||||||
|
<VnJsonValue :value="prop.val.val" />
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
propIndex <
|
||||||
|
log.props.length - 1
|
||||||
|
"
|
||||||
|
>,
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
<span
|
||||||
</span>
|
v-if="log.expand"
|
||||||
</span>
|
class="expanded-json column q-pa-none"
|
||||||
<span v-if="!log.props.length" class="description">
|
>
|
||||||
{{ log.description }}
|
<div
|
||||||
</span>
|
v-for="(
|
||||||
</QCardSection>
|
prop, prop2Index
|
||||||
</QCard>
|
) in log.props"
|
||||||
</QItemSection>
|
:key="prop2Index"
|
||||||
</QItem>
|
class="q-pa-none text-grey"
|
||||||
</QList>
|
>
|
||||||
</div>
|
<span
|
||||||
</div>
|
class="json-field"
|
||||||
|
:title="prop.name"
|
||||||
|
>
|
||||||
|
{{ prop.nameI18n }}:
|
||||||
|
</span>
|
||||||
|
<VnJsonValue :value="prop.val.val" />
|
||||||
|
<span
|
||||||
|
v-if="prop.val.id"
|
||||||
|
class="id-value"
|
||||||
|
>
|
||||||
|
#{{ prop.val.id }}
|
||||||
|
</span>
|
||||||
|
<span v-if="log.action == 'update'">
|
||||||
|
←
|
||||||
|
<VnJsonValue
|
||||||
|
:value="prop.old.val"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
v-if="prop.old.id"
|
||||||
|
class="id-value"
|
||||||
|
>
|
||||||
|
#{{ prop.old.id }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="!log.props.length"
|
||||||
|
class="description"
|
||||||
|
>
|
||||||
|
{{ log.description }}
|
||||||
|
</span>
|
||||||
|
</QCardSection>
|
||||||
|
</QCard>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</QList>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</VnPaginate>
|
||||||
<Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
|
<Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
|
||||||
<QList dense>
|
<QList dense>
|
||||||
<QSeparator />
|
<QSeparator />
|
||||||
|
|
@ -691,17 +730,16 @@ watch(
|
||||||
</QOptionGroup>
|
</QOptionGroup>
|
||||||
</QItem>
|
</QItem>
|
||||||
<QItem class="q-mt-sm">
|
<QItem class="q-mt-sm">
|
||||||
<QItemSection v-if="!workers">
|
<QItemSection v-if="userRadio !== null">
|
||||||
<QSkeleton type="QInput" class="full-width" />
|
|
||||||
</QItemSection>
|
|
||||||
<QItemSection v-if="workers && userRadio !== null">
|
|
||||||
<VnSelect
|
<VnSelect
|
||||||
class="full-width"
|
class="full-width"
|
||||||
:label="t('globals.user')"
|
:label="t('globals.user')"
|
||||||
v-model="userSelect"
|
v-model="userSelect"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
option-value="id"
|
option-value="id"
|
||||||
:options="workers"
|
:url="`${model}Logs/${$route.params.id}/editors`"
|
||||||
|
:fields="['id', 'nickname', 'name', 'image']"
|
||||||
|
sort-by="nickname"
|
||||||
@update:model-value="selectFilter('userSelect')"
|
@update:model-value="selectFilter('userSelect')"
|
||||||
hide-selected
|
hide-selected
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue