feat: refs #5186 use arrayData in descriptor
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Jorge Penadés 2024-03-21 16:38:49 +01:00
parent 4f242b0840
commit f86c331afa
5 changed files with 43 additions and 46 deletions

View File

@ -11,25 +11,30 @@ const props = defineProps({
}, },
}); });
const item = computed(() => { const itemComputed = computed(() => {
const item = JSON.parse(JSON.stringify(props.item)); const item = JSON.parse(JSON.stringify(props.item));
const [, , section] = item.title.split('.'); const [, , section] = item.title.split('.');
if (!te(item.title)) item.title = t(`globals.pageTitles.${section}`); if (!te(item.title)) item.title = t(`globals.pageTitles.${section}`);
return item; return item;
}); // eslint-disable-line vue/no-dupe-keys });
</script> </script>
<template> <template>
<QItem active-class="text-primary" :to="{ name: item.name }" clickable v-ripple> <QItem
<QItemSection avatar v-if="item.icon"> active-class="text-primary"
<QIcon :name="item.icon" /> :to="{ name: itemComputed.name }"
clickable
v-ripple
>
<QItemSection avatar v-if="itemComputed.icon">
<QIcon :name="itemComputed.icon" />
</QItemSection> </QItemSection>
<QItemSection avatar v-if="!item.icon"> <QItemSection avatar v-if="!itemComputed.icon">
<QIcon name="disabled_by_default" /> <QIcon name="disabled_by_default" />
</QItemSection> </QItemSection>
<QItemSection>{{ t(item.title) }}</QItemSection> <QItemSection>{{ t(itemComputed.title) }}</QItemSection>
<QItemSection side> <QItemSection side>
<slot name="side" :item="item" /> <slot name="side" :item="itemComputed" />
</QItemSection> </QItemSection>
</QItem> </QItem>
</template> </template>

View File

@ -34,6 +34,7 @@ function getBreadcrumb(param) {
icon: param.meta.icon, icon: param.meta.icon,
path: param.path, path: param.path,
root: root.value, root: root.value,
locale: t(`globals.pageTitles.${param.meta.title}`),
}; };
if (screen.gt.sm) { if (screen.gt.sm) {
@ -42,9 +43,7 @@ function getBreadcrumb(param) {
} }
const moduleLocale = `${breadcrumb.root}.pageTitles.${breadcrumb.title}`; const moduleLocale = `${breadcrumb.root}.pageTitles.${breadcrumb.title}`;
breadcrumb.locale = te(moduleLocale) if (te(moduleLocale)) breadcrumb.locale = t(moduleLocale);
? t(moduleLocale)
: t(`globals.pageTitles.${breadcrumb.title}`);
return breadcrumb; return breadcrumb;
} }

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { onMounted, useSlots, watch, computed, ref } from 'vue'; import { onBeforeMount, useSlots, watch, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue'; import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
@ -41,21 +41,24 @@ const state = useState();
const slots = useSlots(); const slots = useSlots();
const { t } = useI18n(); const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
const entity = computed(() => useArrayData($props.dataKey).store.data); const { store } = useArrayData($props.dataKey);
const entity = computed(() => store.data);
const isLoading = ref(false); const isLoading = ref(false);
defineExpose({ defineExpose({
getData, getData,
}); });
onMounted(async () => { onBeforeMount(async () => {
await getData(); if ($props.url) {
watch( await getData();
() => $props.url, watch(
async (newUrl, lastUrl) => { () => $props.url,
if (newUrl == lastUrl) return; async (newUrl, lastUrl) => {
await getData(); if (newUrl == lastUrl) return;
} await getData();
); }
);
}
}); });
async function getData() { async function getData() {

View File

@ -8,26 +8,28 @@ import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import ParkingDescriptor from 'pages/Parking/Card/ParkingDescriptor.vue'; import ParkingDescriptor from 'pages/Parking/Card/ParkingDescriptor.vue';
const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute();
const stateStore = useStateStore();
const filter = { const filter = {
fields: ['sectorFk', 'code', 'pickingOrder'], fields: ['id', 'sectorFk', 'code', 'pickingOrder'],
include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }], include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
}; };
const route = useRoute();
const arrayData = useArrayData('Parking', { const arrayData = useArrayData('Parking', {
url: `Parkings/${route.params.id}`, url: `Parkings/${route.params.id}`,
filter, filter,
}); });
const { store } = arrayData;
onMounted(async () => await arrayData.fetch({ append: false })); onMounted(async () => await arrayData.fetch({ append: false }));
watch( watch(
() => route.params.id, () => route.params.id,
async (newId) => { async (newId) => {
if (newId) { if (newId) {
arrayData.store.url = `Parkings/${newId}`; store.url = `Parkings/${newId}`;
store.filter = filter;
await arrayData.fetch({ append: false }); await arrayData.fetch({ append: false });
} }
} }

View File

@ -1,12 +1,11 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useArrayData } from 'src/composables/useArrayData';
import CardDescriptor from 'components/ui/CardDescriptor.vue'; import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'components/ui/VnLv.vue'; import VnLv from 'components/ui/VnLv.vue';
import useCardDescription from 'composables/useCardDescription';
const props = defineProps({ defineProps({
id: { id: {
type: Number, type: Number,
required: false, required: false,
@ -14,28 +13,17 @@ const props = defineProps({
}, },
}); });
const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const { store } = useArrayData('Parking');
const entityId = computed(() => props.id || route.params.id); const card = computed(() => store.data);
const filter = {
fields: ['id', 'sectorFk', 'code', 'pickingOrder'],
include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
};
const header = ref(useCardDescription());
const setHeader = (entity) => (header.value = useCardDescription(entity.code, entity.id));
</script> </script>
<template> <template>
<CardDescriptor <CardDescriptor
module="Parking" module="Parking"
:url="`Parkings/${entityId}`" data-key="Parking"
:filter="filter" :title="card?.code"
:title="header.title" :subtitle="card?.id"
:subtitle="header.subtitle"
data-key="ParkingData"
@on-fetch="setHeader"
> >
<template #body="{ entity: parking }"> <template #body="{ entity: parking }">
<VnLv :label="t('globals.code')" :value="parking.code" /> <VnLv :label="t('globals.code')" :value="parking.code" />