feat: AccountDescriptor & AccountDescriptorMenu

src/pages/Account/Card/AccountDescriptor.vue

@@ -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')">
+            <VnLv :label="t('account.card.nickname')" :value="entity.nickname" />
-                <template #value>
+            <VnLv :label="t('account.card.role')" :value="entity.role.name" />
-                    <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)"
-            />
         </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>

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -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>
+    <QItem v-ripple clickable @click="setPassword(entity)">
-        <QItemSection avatar>
+        <QItemSection>{{ t('account.card.actions.setPassword') }}</QItemSection>
-            <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>
+    <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>