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 VnSelect from './VnSelect.vue';
|
||||
import VnUserLink from '../ui/VnUserLink.vue';
|
||||
import VnPaginate from '../ui/VnPaginate.vue';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const validationsStore = useValidator();
|
||||
|
|
@ -68,7 +69,6 @@ const filter = {
|
|||
],
|
||||
};
|
||||
|
||||
const workers = ref();
|
||||
const actions = ref();
|
||||
const changeInput = ref();
|
||||
const searchInput = ref();
|
||||
|
|
@ -235,9 +235,9 @@ async function openPointRecord(id, modelLog) {
|
|||
const locale = validations[modelLog.model]?.locale || {};
|
||||
pointRecord.value = parseProps(propNames, locale, data);
|
||||
}
|
||||
async function setLogTree() {
|
||||
async function setLogTree(data) {
|
||||
filter.where = { and: [{ originFk: route.params.id }] };
|
||||
const { data } = await getLogs(filter);
|
||||
// const { data } = await getLogs(filter);
|
||||
logTree.value = getLogTree(data);
|
||||
}
|
||||
|
||||
|
|
@ -377,8 +377,6 @@ async function clearFilter() {
|
|||
await applyFilter();
|
||||
}
|
||||
|
||||
setLogTree();
|
||||
|
||||
onUnmounted(() => {
|
||||
stateStore.rightDrawer = false;
|
||||
});
|
||||
|
|
@ -391,16 +389,6 @@ watch(
|
|||
);
|
||||
</script>
|
||||
<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
|
||||
:url="`${props.model}Logs/${route.params.id}/models`"
|
||||
:filter="{ order: ['changedModel'] }"
|
||||
|
|
@ -418,231 +406,282 @@ watch(
|
|||
"
|
||||
auto-load
|
||||
/>
|
||||
<div
|
||||
class="column items-center logs origin-log q-mt-md"
|
||||
v-for="(originLog, originLogIndex) in logTree"
|
||||
:key="originLogIndex"
|
||||
<VnPaginate
|
||||
:data-key="`${model}Log`"
|
||||
:url="`${model}Logs`"
|
||||
:filter="filter"
|
||||
:skeleton="false"
|
||||
auto-load
|
||||
@on-fetch="setLogTree"
|
||||
>
|
||||
<QItem class="origin-info items-center q-my-md" v-if="logTree.length > 1">
|
||||
<h6 class="origin-id text-grey">
|
||||
{{ useCapitalize(validations[props.model].locale.name) }}
|
||||
#{{ originLog.originFk }}
|
||||
</h6>
|
||||
<div class="line bg-grey"></div>
|
||||
</QItem>
|
||||
<div
|
||||
class="user-log q-mb-sm"
|
||||
v-for="(userLog, userIndex) in originLog.logs"
|
||||
:key="userIndex"
|
||||
>
|
||||
<div class="timeline">
|
||||
<div class="user-avatar">
|
||||
<VnUserLink :worker-id="userLog?.user?.id">
|
||||
<template #link>
|
||||
<VnAvatar
|
||||
: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"
|
||||
<template #body>
|
||||
<div
|
||||
class="column items-center logs origin-log q-mt-md"
|
||||
v-for="(originLog, originLogIndex) in logTree"
|
||||
:key="originLogIndex"
|
||||
>
|
||||
<QItem class="origin-info items-center q-my-md" v-if="logTree.length > 1">
|
||||
<h6 class="origin-id text-grey">
|
||||
{{ useCapitalize(validations[props.model].locale.name) }}
|
||||
#{{ originLog.originFk }}
|
||||
</h6>
|
||||
<div class="line bg-grey"></div>
|
||||
</QItem>
|
||||
<div
|
||||
class="user-log q-mb-sm"
|
||||
v-for="(userLog, userIndex) in originLog.logs"
|
||||
:key="userIndex"
|
||||
>
|
||||
<QItemSection>
|
||||
<QItemLabel class="model-info q-mb-xs" v-if="!byRecord">
|
||||
<QChip
|
||||
dense
|
||||
size="md"
|
||||
class="model-name q-mr-xs text-white"
|
||||
v-if="
|
||||
!(modelLog.changedModel && modelLog.changedModelId) &&
|
||||
modelLog.model
|
||||
"
|
||||
:style="{
|
||||
backgroundColor: useColor(modelLog.model),
|
||||
}"
|
||||
:title="`${modelLog.model} #${modelLog.id}`"
|
||||
>
|
||||
{{ t(modelLog.modelI18n) }}
|
||||
</QChip>
|
||||
|
||||
<span
|
||||
class="model-id q-mr-xs"
|
||||
v-if="modelLog.summaryId"
|
||||
v-text="`#${modelLog.summaryId}`"
|
||||
/>
|
||||
<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"
|
||||
<div class="timeline">
|
||||
<div class="user-avatar">
|
||||
<VnUserLink :worker-id="userLog?.user?.id">
|
||||
<template #link>
|
||||
<VnAvatar
|
||||
: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"
|
||||
>
|
||||
<QCardSection class="change-info q-pa-none">
|
||||
<QItem
|
||||
class="q-px-sm q-py-xs justify-between items-center"
|
||||
>
|
||||
<div
|
||||
class="date text-grey text-caption q-mr-sm"
|
||||
:title="
|
||||
date.formatDate(
|
||||
log.creationDate,
|
||||
'DD/MM/YYYY hh:mm:ss'
|
||||
) ?? `date:'dd/MM/yyyy HH:mm:ss'`
|
||||
<QItemSection>
|
||||
<QItemLabel class="model-info q-mb-xs" v-if="!byRecord">
|
||||
<QChip
|
||||
dense
|
||||
size="md"
|
||||
class="model-name q-mr-xs text-white"
|
||||
v-if="
|
||||
!(
|
||||
modelLog.changedModel &&
|
||||
modelLog.changedModelId
|
||||
) && modelLog.model
|
||||
"
|
||||
:style="{
|
||||
backgroundColor: useColor(modelLog.model),
|
||||
}"
|
||||
:title="`${modelLog.model} #${modelLog.id}`"
|
||||
>
|
||||
{{ toRelativeDate(log.creationDate) }}
|
||||
</div>
|
||||
<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>
|
||||
{{ t(modelLog.modelI18n) }}
|
||||
</QChip>
|
||||
|
||||
<span
|
||||
v-if="log.expand"
|
||||
class="expanded-json column q-pa-none"
|
||||
>
|
||||
<div
|
||||
v-for="(prop, prop2Index) in log.props"
|
||||
:key="prop2Index"
|
||||
class="q-pa-none text-grey"
|
||||
class="model-id q-mr-xs"
|
||||
v-if="modelLog.summaryId"
|
||||
v-text="`#${modelLog.summaryId}`"
|
||||
/>
|
||||
<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">
|
||||
<QItem
|
||||
class="q-px-sm q-py-xs justify-between items-center"
|
||||
>
|
||||
<span 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 }}
|
||||
<div
|
||||
class="date text-grey text-caption q-mr-sm"
|
||||
:title="
|
||||
date.formatDate(
|
||||
log.creationDate,
|
||||
'DD/MM/YYYY hh:mm:ss'
|
||||
) ?? `date:'dd/MM/yyyy HH:mm:ss'`
|
||||
"
|
||||
>
|
||||
{{ toRelativeDate(log.creationDate) }}
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
<span v-if="!log.props.length" class="description">
|
||||
{{ log.description }}
|
||||
</span>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
v-if="log.expand"
|
||||
class="expanded-json column q-pa-none"
|
||||
>
|
||||
<div
|
||||
v-for="(
|
||||
prop, prop2Index
|
||||
) in log.props"
|
||||
:key="prop2Index"
|
||||
class="q-pa-none text-grey"
|
||||
>
|
||||
<span
|
||||
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()">
|
||||
<QList dense>
|
||||
<QSeparator />
|
||||
|
|
@ -691,17 +730,16 @@ watch(
|
|||
</QOptionGroup>
|
||||
</QItem>
|
||||
<QItem class="q-mt-sm">
|
||||
<QItemSection v-if="!workers">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="workers && userRadio !== null">
|
||||
<QItemSection v-if="userRadio !== null">
|
||||
<VnSelect
|
||||
class="full-width"
|
||||
:label="t('globals.user')"
|
||||
v-model="userSelect"
|
||||
option-label="name"
|
||||
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')"
|
||||
hide-selected
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in New Issue