salix-front/src/pages/Department/Card/DepartmentSummary.vue

103 lines
3.7 KiB
Vue

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardSummary from 'components/ui/CardSummary.vue';
import { getUrl } from 'src/composables/getUrl';
import VnLv from 'src/components/ui/VnLv.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
const route = useRoute();
const { t } = useI18n();
const $props = defineProps({
id: {
type: Number,
default: 0,
},
});
const entityId = computed(() => $props.id || route.params.id);
const departmentUrl = ref();
onMounted(async () => {
departmentUrl.value = (await getUrl('')) + `departments/${entityId.value}/`;
});
</script>
<template>
<CardSummary
data-key="DepartmentSummary"
ref="summary"
:url="`Departments/${entityId}`"
class="full-width"
style="max-width: 900px"
module-name="Department"
>
<template #header="{ entity }">
<div>{{ entity.name }}</div>
</template>
<template #body="{ entity: department }">
<QCard class="column">
<VnTitle
:url="`#/department/department/${entityId}/basic-data`"
:text="t('Basic data')"
/>
<div class="full-width row wrap justify-between content-between">
<div class="column" style="min-width: 50%">
<VnLv :label="t('globals.name')" :value="department.name" dash />
<VnLv :label="t('globals.code')" :value="department.code" dash />
<VnLv
:label="t('department.chat')"
:value="department.chatName"
dash
/>
<VnLv
:label="t('department.bossDepartment')"
:value="department.worker?.user?.name"
dash
/>
<VnLv
:label="t('globals.email')"
:value="department.notificationEmail"
dash
/>
<VnLv
:label="t('department.selfConsumptionCustomer')"
:value="department.client?.name"
dash
/>
</div>
<div class="column" style="min-width: 50%">
<VnLv
:label="t('department.telework')"
:value="department.isTeleworking"
dash
/>
<VnLv
:label="t('department.notifyOnErrors')"
:value="Boolean(department.hasToMistake)"
dash
/>
<VnLv
:label="t('department.worksInProduction')"
:value="department.isProduction"
dash
/>
<VnLv
:label="t('department.hasToRefill')"
:value="department.hasToRefill"
dash
/>
<VnLv
:label="t('department.hasToSendMail')"
:value="department.hasToSendMail"
dash
/>
</div>
</div>
</QCard>
</template>
</CardSummary>
</template>