wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

feat: refs #7909 add scroll

This commit is contained in:
Jorge Penadés 2024-08-29 16:02:39 +02:00
parent 8277b30033
commit 77cb0ed7a8
1 changed files with 274 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/common/VnLog.vue
View File

@ -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,6 +406,15 @@ watch(
" "
auto-load auto-load
/> />
<VnPaginate
:data-key="`${model}Log`"
:url="`${model}Logs`"
:filter="filter"
:skeleton="false"
auto-load
@on-fetch="setLogTree"
>
<template #body>
<div <div
class="column items-center logs origin-log q-mt-md" class="column items-center logs origin-log q-mt-md"
v-for="(originLog, originLogIndex) in logTree" v-for="(originLog, originLogIndex) in logTree"
@ -465,8 +462,10 @@ watch(
size="md" size="md"
class="model-name q-mr-xs text-white" class="model-name q-mr-xs text-white"
v-if=" v-if="
!(modelLog.changedModel && modelLog.changedModelId) && !(
modelLog.model modelLog.changedModel &&
modelLog.changedModelId
) && modelLog.model
" "
:style="{ :style="{
backgroundColor: useColor(modelLog.model), backgroundColor: useColor(modelLog.model),
@ -540,7 +539,9 @@ watch(
> >
{{ modelLog.modelI18n }} {{ modelLog.modelI18n }}
<span v-if="modelLog.id" <span v-if="modelLog.id"
>#{{ modelLog.id }}</span >#{{
modelLog.id
}}</span
> >
</div> </div>
<QCardSection <QCardSection
@ -555,12 +556,18 @@ watch(
> >
<span <span
class="json-field q-mr-xs text-grey" class="json-field q-mr-xs text-grey"
:title="value.name" :title="
value.name
"
> >
{{ value.nameI18n }}: {{
value.nameI18n
}}:
</span> </span>
<VnJsonValue <VnJsonValue
:value="value.val.val" :value="
value.val.val
"
/> />
</QItem> </QItem>
</QCardSection> </QCardSection>
@ -572,7 +579,11 @@ watch(
:class="actionsClass[log.action]" :class="actionsClass[log.action]"
:name="actionsIcon[log.action]" :name="actionsIcon[log.action]"
:title=" :title="
t(`actions.${actionsText[log.action]}`) t(
`actions.${
actionsText[log.action]
}`
)
" "
/> />
</div> </div>
@ -592,17 +603,27 @@ watch(
@click="log.expand = !log.expand" @click="log.expand = !log.expand"
/> />
<span v-if="log.props.length" class="attributes"> <span v-if="log.props.length" class="attributes">
<span v-if="!log.expand" class="q-pa-none text-grey"> <span
v-if="!log.expand"
class="q-pa-none text-grey"
>
<span <span
v-for="(prop, propIndex) in log.props" v-for="(prop, propIndex) in log.props"
:key="propIndex" :key="propIndex"
class="basic-json" class="basic-json"
> >
<span class="json-field" :title="prop.name"> <span
class="json-field"
:title="prop.name"
>
{{ prop.nameI18n }}: {{ prop.nameI18n }}:
</span> </span>
<VnJsonValue :value="prop.val.val" /> <VnJsonValue :value="prop.val.val" />
<span v-if="propIndex < log.props.length - 1" <span
v-if="
propIndex <
log.props.length - 1
"
>,&nbsp; >,&nbsp;
</span> </span>
</span> </span>
@ -612,28 +633,44 @@ watch(
class="expanded-json column q-pa-none" class="expanded-json column q-pa-none"
> >
<div <div
v-for="(prop, prop2Index) in log.props" v-for="(
prop, prop2Index
) in log.props"
:key="prop2Index" :key="prop2Index"
class="q-pa-none text-grey" class="q-pa-none text-grey"
> >
<span class="json-field" :title="prop.name"> <span
class="json-field"
:title="prop.name"
>
{{ prop.nameI18n }}: {{ prop.nameI18n }}:
</span> </span>
<VnJsonValue :value="prop.val.val" /> <VnJsonValue :value="prop.val.val" />
<span v-if="prop.val.id" class="id-value"> <span
v-if="prop.val.id"
class="id-value"
>
#{{ prop.val.id }} #{{ prop.val.id }}
</span> </span>
<span v-if="log.action == 'update'"> <span v-if="log.action == 'update'">
← ←
<VnJsonValue :value="prop.old.val" /> <VnJsonValue
<span v-if="prop.old.id" class="id-value"> :value="prop.old.val"
/>
<span
v-if="prop.old.id"
class="id-value"
>
#{{ prop.old.id }} #{{ prop.old.id }}
</span> </span>
</span> </span>
</div> </div>
</span> </span>
</span> </span>
<span v-if="!log.props.length" class="description"> <span
v-if="!log.props.length"
class="description"
>
{{ log.description }} {{ log.description }}
</span> </span>
</QCardSection> </QCardSection>
@ -643,6 +680,8 @@ watch(
</QList> </QList>
</div> </div>
</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
> >