forked from verdnatura/salix-front
feat: AccountDescriptor & AccountDescriptorMenu
This commit is contained in:
parent
c64a403ee2
commit
0397f9ee68
|
|
@ -9,7 +9,8 @@ import VnLv from 'src/components/ui/VnLv.vue';
|
|||
import useCardDescription from 'src/composables/useCardDescription';
|
||||
import VnUserLink from 'src/components/ui/VnUserLink.vue';
|
||||
import { getUrl } from 'src/composables/getUrl';
|
||||
|
||||
import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
|
|
@ -22,14 +23,22 @@ const route = useRoute();
|
|||
const state = useState();
|
||||
const { t } = useI18n();
|
||||
const salixUrl = ref();
|
||||
const { getTokenMultimedia } = useSession();
|
||||
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'] } },
|
||||
};
|
||||
function getAccountAvatar() {
|
||||
const token = getTokenMultimedia();
|
||||
return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -40,96 +49,57 @@ const filter = {
|
|||
module="Account"
|
||||
@on-fetch="setData"
|
||||
data-key="accountData"
|
||||
: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="{ entity }">
|
||||
{{ entity }}
|
||||
<AccountDescriptorMenu :account="entity" />
|
||||
</template>
|
||||
<template #before>
|
||||
<QImg :src="getAccountAvatar()" 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>
|
||||
</QImg>
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<VnLv v-if="entity.accountState" :label="t('account.card.state')">
|
||||
<template #value>
|
||||
<QBadge
|
||||
:color="stateColor(entity.accountState.code)"
|
||||
text-color="black"
|
||||
dense
|
||||
>
|
||||
{{ entity.accountState.description }}
|
||||
</QBadge>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('account.card.created')" :value="toDate(entity.created)" />
|
||||
<VnLv :label="t('account.card.commercial')">
|
||||
<template #value>
|
||||
<VnUserLink
|
||||
:name="entity.client?.salesPersonUser?.name"
|
||||
:worker-id="entity.client?.salesPersonFk"
|
||||
/>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
v-if="entity.worker"
|
||||
:label="t('account.card.attendedBy')"
|
||||
:value="entity.worker.user.name"
|
||||
>
|
||||
<template #value>
|
||||
<VnUserLink
|
||||
:name="entity.worker.user.nickname"
|
||||
:worker-id="entity.worker.id"
|
||||
/>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('account.card.zone')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.ticket?.zone?.name }}
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
:label="t('account.card.province')"
|
||||
:value="entity.ticket?.address?.province?.name"
|
||||
/>
|
||||
<VnLv :label="t('account.card.ticketId')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.ticketFk }}
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
:label="t('accountRate')"
|
||||
:value="toPercentage(entity.client?.accountsRatio?.accountingRate)"
|
||||
/>
|
||||
<VnLv :label="t('account.card.nickname')" :value="entity.nickname" />
|
||||
<VnLv :label="t('account.card.role')" :value="entity.role.name" />
|
||||
</template>
|
||||
<template #actions="{ entity }">
|
||||
<QCardActions>
|
||||
<QBtn
|
||||
round
|
||||
flat
|
||||
size="md"
|
||||
icon="vn:client"
|
||||
color="primary"
|
||||
:to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
|
||||
>
|
||||
<QTooltip>{{ t('account.card.customerSummary') }}</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
size="md"
|
||||
icon="vn:ticket"
|
||||
color="primary"
|
||||
:to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
|
||||
>
|
||||
<QTooltip>{{ t('account.card.accountedTicket') }}</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
size="md"
|
||||
icon="assignment"
|
||||
color="primary"
|
||||
:href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
|
||||
>
|
||||
<QTooltip>{{ t('account.card.saleTracking') }}</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
size="md"
|
||||
icon="visibility"
|
||||
color="primary"
|
||||
class="fill-icon"
|
||||
icon="contact_mail"
|
||||
:href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
|
||||
>
|
||||
<QTooltip>{{ t('account.card.ticketTracking') }}</QTooltip>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,25 @@ const { openReport } = usePrintService();
|
|||
|
||||
const account = ref($props.account);
|
||||
|
||||
function openPickupOrder() {
|
||||
function setPassword() {
|
||||
const id = account.value.id;
|
||||
openReport(`Accounts/${id}/account-pickup-pdf`, {
|
||||
recipientId: account.value.clientFk,
|
||||
});
|
||||
}
|
||||
function disableAccount() {
|
||||
const id = account.value.id;
|
||||
openReport(`Accounts/${id}/account-pickup-pdf`, {
|
||||
recipientId: account.value.clientFk,
|
||||
});
|
||||
}
|
||||
function disableUser() {
|
||||
const id = account.value.id;
|
||||
openReport(`Accounts/${id}/account-pickup-pdf`, {
|
||||
recipientId: account.value.clientFk,
|
||||
});
|
||||
}
|
||||
function sync() {
|
||||
const id = account.value.id;
|
||||
openReport(`Accounts/${id}/account-pickup-pdf`, {
|
||||
recipientId: account.value.clientFk,
|
||||
|
|
@ -26,37 +44,25 @@ function openPickupOrder() {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<QItem v-ripple clickable>
|
||||
<QItemSection avatar>
|
||||
<QIcon name="summarize" />
|
||||
</QItemSection>
|
||||
<QItemSection>{{ t('pickupOrder') }}</QItemSection>
|
||||
<QItemSection side>
|
||||
<QIcon name="keyboard_arrow_right" />
|
||||
</QItemSection>
|
||||
<QMenu anchor="top end" self="top start" auto-close>
|
||||
<QList>
|
||||
<QItem @click="openPickupOrder" v-ripple clickable>
|
||||
<QItemSection avatar>
|
||||
<QIcon name="picture_as_pdf" />
|
||||
</QItemSection>
|
||||
<QItemSection>{{ t('openPickupOrder') }}</QItemSection>
|
||||
</QItem>
|
||||
<QItem @click="confirmPickupOrder" v-ripple clickable>
|
||||
<QItemSection avatar>
|
||||
<QIcon name="send" />
|
||||
</QItemSection>
|
||||
<QItemSection>{{ t('sendPickupOrder') }}</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</QMenu>
|
||||
<QItem v-ripple clickable @click="setPassword(entity)">
|
||||
<QItemSection>{{ t('account.card.actions.setPassword') }}</QItemSection>
|
||||
</QItem>
|
||||
<QItem v-ripple clickable @click="disableAccount(entity)">
|
||||
<QItemSection>{{ t('account.card.actions.disableAccount') }}</QItemSection>
|
||||
</QItem>
|
||||
<QItem v-ripple clickable @click="disableUser(entity)">
|
||||
<QItemSection>{{ t('account.card.actions.disableUser') }}</QItemSection>
|
||||
</QItem>
|
||||
<QItem v-ripple clickable @click="sync(entity)">
|
||||
<QItemSection>{{ t('account.card.actions.sync') }}</QItemSection>
|
||||
</QItem>
|
||||
|
||||
<QSeparator />
|
||||
<QItem @click="confirmRemove()" v-ripple clickable>
|
||||
<QItemSection avatar>
|
||||
<QIcon name="delete" />
|
||||
</QItemSection>
|
||||
<QItemSection>{{ t('deleteAccount') }}</QItemSection>
|
||||
<QItemSection>{{ t('account.card.actions.delete') }}</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue