feat: refs #6683 add PropertySummary component for detailed property overview
This commit is contained in:
parent
5847734ef7
commit
c6b9b3646f
|
|
@ -0,0 +1,302 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, ref, computed } from 'vue';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { dashIfEmpty, toDate, toCurrency } from 'src/filters';
|
||||||
|
import CardSummary from 'components/ui/CardSummary.vue';
|
||||||
|
import VnLv from 'src/components/ui/VnLv.vue';
|
||||||
|
import { getUrl } from 'src/composables/getUrl';
|
||||||
|
import useNotify from 'src/composables/useNotify.js';
|
||||||
|
import { useArrayData } from 'composables/useArrayData';
|
||||||
|
import VnTitle from 'src/components/common/VnTitle.vue';
|
||||||
|
import VnToSummary from 'src/components/ui/VnToSummary.vue';
|
||||||
|
import FetchData from 'src/components/FetchData.vue';
|
||||||
|
import PropertyNotes from './PropertyNotes.vue';
|
||||||
|
import VnAvatar from 'src/components/ui/VnAvatar.vue';
|
||||||
|
import VnUserLink from 'src/components/ui/VnUserLink.vue';
|
||||||
|
import VnCheckbox from 'src/components/common/VnCheckbox.vue';
|
||||||
|
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const { notify } = useNotify();
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
id: {
|
||||||
|
type: Number,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const dmsColumns = ref([
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
label: t('globals.id'),
|
||||||
|
name: 'id',
|
||||||
|
field: ({ id }) => id,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
label: t('globals.type'),
|
||||||
|
name: 'type',
|
||||||
|
field: ({ type }) => type?.name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
label: t('globals.order'),
|
||||||
|
name: 'order',
|
||||||
|
field: ({ hardCopyNumber }) => dashIfEmpty(hardCopyNumber),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
label: t('globals.reference'),
|
||||||
|
name: 'reference',
|
||||||
|
field: ({ reference }) => dashIfEmpty(reference),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
label: t('globals.description'),
|
||||||
|
name: 'description',
|
||||||
|
field: ({ description }) => dashIfEmpty(description),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
label: t('globals.original'),
|
||||||
|
name: 'hasFile',
|
||||||
|
toolTip: t('The documentation is available in paper form'),
|
||||||
|
component: 'checkbox',
|
||||||
|
field: ({ hasFile }) => hasFile,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
label: t('globals.worker'),
|
||||||
|
name: 'worker',
|
||||||
|
field: ({ worker }) => worker?.name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
label: t('globals.created'),
|
||||||
|
name: 'created',
|
||||||
|
field: ({ created }) => toDate(created),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const entityId = computed(() => $props.id || route.params.id);
|
||||||
|
|
||||||
|
const summary = ref();
|
||||||
|
const property = computed(() => summary.value?.entity);
|
||||||
|
const propertyUrl = ref();
|
||||||
|
const propertyDms = ref(null);
|
||||||
|
|
||||||
|
const descriptorData = useArrayData('Property');
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
propertyUrl.value = (await getUrl('property/')) + entityId.value + '/';
|
||||||
|
});
|
||||||
|
|
||||||
|
function toPropertyUrl(section) {
|
||||||
|
return '#/property/' + entityId.value + '/' + section;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
const filter = { fields: ['code', 'name', 'id', 'alertLevel'] };
|
||||||
|
const params = { filter: JSON.stringify(filter) };
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
ref="propertyDms"
|
||||||
|
:url="`Properties/${entityId}/dms`"
|
||||||
|
@on-fetch="
|
||||||
|
(data) => {
|
||||||
|
propertyDms.value = data;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<CardSummary
|
||||||
|
ref="summary"
|
||||||
|
:url="`Properties/${entityId}/summary`"
|
||||||
|
data-key="PropertySummary"
|
||||||
|
v-bind="$attrs.width"
|
||||||
|
>
|
||||||
|
<template #header-left>
|
||||||
|
<VnToSummary
|
||||||
|
v-if="route?.name !== 'PropertySummary'"
|
||||||
|
:route-name="'PropertySummary'"
|
||||||
|
:entity-id="entityId"
|
||||||
|
:url="PropertyUrl"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #header="{ entity }">
|
||||||
|
<div>Property #{{ entity.id }} - {{ entity.name }}</div>
|
||||||
|
</template>
|
||||||
|
<template #menu="{ entity }">
|
||||||
|
<!-- <PropertyDescriptorMenu :ticket="entity" /> -->
|
||||||
|
</template>
|
||||||
|
<template #body="{ entity }">
|
||||||
|
<QCard class="vn-one">
|
||||||
|
<VnTitle
|
||||||
|
:url="toPropertyUrl('basic-data')"
|
||||||
|
:text="t('globals.summary.basicData')"
|
||||||
|
/>
|
||||||
|
<div class="vn-card-group">
|
||||||
|
<div class="vn-card-content">
|
||||||
|
<VnLv
|
||||||
|
:label="t('property.owner')"
|
||||||
|
:value="dashIfEmpty(entity.company.code)"
|
||||||
|
/>
|
||||||
|
<VnLv :label="t('property.map')" :value="dashIfEmpty(entity.url)">
|
||||||
|
<template #value>
|
||||||
|
<a
|
||||||
|
v-if="entity?.url"
|
||||||
|
:href="`${entity?.url}`"
|
||||||
|
target="_blank"
|
||||||
|
class="grafana"
|
||||||
|
>
|
||||||
|
{{ t('property.goToMap') }}
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
</VnLv>
|
||||||
|
<VnLv
|
||||||
|
:label="t('property.value')"
|
||||||
|
:value="toCurrency(entity.value)"
|
||||||
|
/>
|
||||||
|
<VnLv
|
||||||
|
:label="t('property.protocol')"
|
||||||
|
:value="dashIfEmpty(entity.protocol)"
|
||||||
|
/>
|
||||||
|
<VnLv
|
||||||
|
:label="t('property.purchased')"
|
||||||
|
:value="toDate(entity.purchased)"
|
||||||
|
/>
|
||||||
|
<VnLv
|
||||||
|
:label="t('property.booked')"
|
||||||
|
:value="toDate(entity.booked)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</QCard>
|
||||||
|
<QCard class="vn-one">
|
||||||
|
<VnTitle
|
||||||
|
:url="toPropertyUrl('basic-data')"
|
||||||
|
:text="t('globals.summary.basicData')"
|
||||||
|
/>
|
||||||
|
<div class="vn-card-content">
|
||||||
|
<VnLv
|
||||||
|
:label="t('property.cadaster')"
|
||||||
|
:value="dashIfEmpty(entity.cadaster)"
|
||||||
|
/>
|
||||||
|
<VnLv
|
||||||
|
:label="t('property.smallHolding')"
|
||||||
|
:value="dashIfEmpty(entity.smallHolding)"
|
||||||
|
/>
|
||||||
|
<VnLv :label="t('property.area')" :value="dashIfEmpty(entity.area)" />
|
||||||
|
<VnLv
|
||||||
|
:label="t('property.allocation')"
|
||||||
|
:value="dashIfEmpty(entity.allocation)"
|
||||||
|
/>
|
||||||
|
<VnLv
|
||||||
|
:label="t('property.town')"
|
||||||
|
:value="dashIfEmpty(entity.town.name)"
|
||||||
|
/>
|
||||||
|
<VnLv :label="t('property.m2')" :value="dashIfEmpty(entity.m2)" />
|
||||||
|
</div>
|
||||||
|
</QCard>
|
||||||
|
<QCard class="vn-one">
|
||||||
|
<VnTitle
|
||||||
|
:url="toPropertyUrl('basic-data')"
|
||||||
|
:text="t('globals.summary.basicData')"
|
||||||
|
/>
|
||||||
|
<div class="vn-card-content">
|
||||||
|
<VnLv
|
||||||
|
:label="t('property.registry')"
|
||||||
|
:value="dashIfEmpty(entity.registry)"
|
||||||
|
/>
|
||||||
|
<VnLv :label="t('property.tome')" :value="dashIfEmpty(entity.tome)" />
|
||||||
|
<VnLv :label="t('property.book')" :value="dashIfEmpty(entity.book)" />
|
||||||
|
<VnLv :label="t('property.page')" :value="dashIfEmpty(entity.page)" />
|
||||||
|
<VnLv :label="t('property.farm')" :value="dashIfEmpty(entity.farm)" />
|
||||||
|
<VnLv
|
||||||
|
:label="t('property.registration')"
|
||||||
|
:value="dashIfEmpty(entity.registration)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</QCard>
|
||||||
|
<QCard v-if="entity?.propertyDms.length > 0" class="vn-max">
|
||||||
|
<VnTitle :url="toPropertyUrl('dms')" :text="t('globals.pageTitles.dms')" />
|
||||||
|
<QTable :columns="dmsColumns" :rows="entity?.propertyDms" flat>
|
||||||
|
<template #header="props">
|
||||||
|
<QTr :props="props">
|
||||||
|
<QTh auto-width class="text-left">{{ t('globals.id') }}</QTh>
|
||||||
|
<QTh auto-width class="text-left">{{ t('globals.type') }}</QTh>
|
||||||
|
<QTh auto-width class="text-left">{{ t('globals.order') }}</QTh>
|
||||||
|
<QTh auto-width class="text-left">{{ t('globals.reference') }}</QTh>
|
||||||
|
<QTh auto-width class="text-left">{{ t('globals.description') }}</QTh>
|
||||||
|
<QTh auto-width class="text-center">{{ t('globals.original') }}</QTh>
|
||||||
|
<QTh auto-width class="text-left">{{ t('globals.worker') }}</QTh>
|
||||||
|
<QTh auto-width class="text-center">{{ t('globals.created') }}</QTh>
|
||||||
|
</QTr>
|
||||||
|
</template>
|
||||||
|
<template #body="props">
|
||||||
|
<QTr :props="props">
|
||||||
|
<QTd class="text-left">{{ props.row.dms.id }}</QTd>
|
||||||
|
<QTd class="text-left">{{ props.row.dms.dmsType.name }}</QTd>
|
||||||
|
<QTd class="text-left">{{ props.row.dms.hardCopyNumber }}</QTd>
|
||||||
|
<QTd class="text-left">{{ props.row.dms.reference }}</QTd>
|
||||||
|
<QTd class="text-left">{{ props.row.dms.description }}</QTd>
|
||||||
|
<QTd class="text-center"><VnCheckbox :disable="true" v-model="props.row.dms.hasFile"/></QTd>
|
||||||
|
<QTd class="text-left"><span class="link" @click.stop>{{ props.row.dms.worker.firstName }}<WorkerDescriptorProxy :id="props.row.dms.worker.id" /></span></QTd>
|
||||||
|
<QTd class="text-center">{{ toDate(props.row.dms.created) }}</QTd>
|
||||||
|
</QTr>
|
||||||
|
</template>
|
||||||
|
</QTable>
|
||||||
|
</QCard>
|
||||||
|
<QCard v-if="entity?.notes.length > 0" class="vn-max">
|
||||||
|
<VnTitle :url="toPropertyUrl('notes')" :text="t('globals.notes')" />
|
||||||
|
<QCardSection
|
||||||
|
v-if="entity?.notes"
|
||||||
|
v-for="note in entity?.notes"
|
||||||
|
horizontal
|
||||||
|
class="q-pb-sm"
|
||||||
|
>
|
||||||
|
<VnAvatar
|
||||||
|
:descriptor="false"
|
||||||
|
:worker-id="note.workerFk"
|
||||||
|
size="md"
|
||||||
|
:title="note.worker?.user.nickname"
|
||||||
|
class="q-pr-xs"
|
||||||
|
/>
|
||||||
|
<VnUserLink
|
||||||
|
:name="`${note.worker.user.name}`"
|
||||||
|
:worker-id="note.worker.id"
|
||||||
|
/>
|
||||||
|
<span class="q-pr-xs">{{ ':' }}</span>
|
||||||
|
<span class="no-margin">
|
||||||
|
{{ note.text }}
|
||||||
|
</span>
|
||||||
|
</QCardSection>
|
||||||
|
</QCard>
|
||||||
|
</template>
|
||||||
|
</CardSummary>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.q-card.q-card--dark.q-dark.vn-one {
|
||||||
|
& > .bodyCard {
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table {
|
||||||
|
tr,
|
||||||
|
th,
|
||||||
|
.q-td {
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grafana {
|
||||||
|
color: $primary-light;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue