131 lines
4.1 KiB
Vue
131 lines
4.1 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
|
import VnLv from 'src/components/ui/VnLv.vue';
|
|
import useCardDescription from 'src/composables/useCardDescription';
|
|
import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
|
|
import FetchData from 'src/components/FetchData.vue';
|
|
import VnImg from 'src/components/ui/VnImg.vue';
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
const entityId = computed(() => {
|
|
return $props.id || route.params.id;
|
|
});
|
|
const data = ref(useCardDescription());
|
|
const setData = (entity) => (data.value = useCardDescription(entity.nickname, entity.id));
|
|
|
|
const filter = {
|
|
where: { id: entityId },
|
|
fields: ['id', 'nickname', 'name', 'role'],
|
|
include: { relation: 'role', scope: { fields: ['id', 'name'] } },
|
|
};
|
|
const hasAccount = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData
|
|
:url="`Accounts/${entityId}/exists`"
|
|
auto-load
|
|
@on-fetch="(data) => (hasAccount = data.exists)"
|
|
/>
|
|
<CardDescriptor
|
|
ref="descriptor"
|
|
:url="`VnUsers/preview`"
|
|
:filter="filter"
|
|
module="Account"
|
|
@on-fetch="setData"
|
|
data-key="AccountId"
|
|
:title="data.title"
|
|
:subtitle="data.subtitle"
|
|
>
|
|
<template #header-extra-action>
|
|
<QBtn
|
|
round
|
|
flat
|
|
size="md"
|
|
color="white"
|
|
icon="face"
|
|
:to="{ name: 'AccountList' }"
|
|
>
|
|
<QTooltip>
|
|
{{ t('Go to module index') }}
|
|
</QTooltip>
|
|
</QBtn>
|
|
</template>
|
|
<template #menu>
|
|
<AccountDescriptorMenu :has-account="hasAccount" />
|
|
</template>
|
|
<template #before>
|
|
<!-- falla id :id="entityId.value" collection="user" size="160x160" -->
|
|
<VnImg :id="entityId" collection="user" size="160x160" class="photo">
|
|
<template #error>
|
|
<div
|
|
class="absolute-full picture text-center q-pa-md flex flex-center"
|
|
>
|
|
<div>
|
|
<div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
|
|
<QIcon name="vn:claims" />
|
|
</div>
|
|
<div class="text-grey-5" style="opacity: 0.4">
|
|
{{ t('account.imageNotFound') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</VnImg>
|
|
</template>
|
|
<template #body="{ entity }">
|
|
<VnLv :label="t('account.card.nickname')" :value="entity.nickname" />
|
|
<VnLv :label="t('account.card.role')" :value="entity.role.name" />
|
|
</template>
|
|
<template #actions="{ entity }">
|
|
<QCardActions class="q-gutter-x-md">
|
|
<QIcon
|
|
v-if="!entity.active"
|
|
color="primary"
|
|
name="vn:disabled"
|
|
flat
|
|
round
|
|
size="sm"
|
|
class="fill-icon"
|
|
>
|
|
<QTooltip>{{ t('account.card.deactivated') }}</QTooltip>
|
|
</QIcon>
|
|
<QIcon
|
|
color="primary"
|
|
name="contact_mail"
|
|
v-if="entity.hasAccount"
|
|
flat
|
|
round
|
|
size="sm"
|
|
class="fill-icon"
|
|
>
|
|
<QTooltip>{{ t('account.card.enabled') }}</QTooltip>
|
|
</QIcon>
|
|
</QCardActions>
|
|
</template>
|
|
</CardDescriptor>
|
|
</template>
|
|
<style scoped>
|
|
.q-item__label {
|
|
margin-top: 0;
|
|
}
|
|
</style>
|
|
<i18n>
|
|
en:
|
|
accountRate: Claming rate
|
|
es:
|
|
accountRate: Ratio de reclamación
|
|
</i18n>
|