Merge pull request '4720-descriptor' (#26) from 4720-descriptor into dev

Reviewed-on: verdnatura/salix-front#26

quasar.config.js

@@ -86,7 +86,6 @@ module.exports = configure(function (ctx) {
                 type: 'http',
             },
             port: 8080,
-            open: true, // opens browser window automatically
             proxy: {
                 '/api': {
                     target: 'http://0.0.0.0:3000',

src/components/Navbar.vue

@@ -17,7 +17,7 @@ function onToggleDrawer() {
 </script>
 
 <template>
-    <q-header class="bg-dark" color="white" elevated bordered>
+    <q-header class="bg-dark" color="white" elevated>
         <q-toolbar class="q-py-sm q-px-md">
             <q-btn flat @click="onToggleDrawer()" round dense icon="menu">
                 <q-tooltip bottom anchor="bottom right">

src/components/ui/CardDescriptor.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { useSlots } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+    module: {
+        type: String,
+        required: true,
+    },
+    data: {
+        type: Object,
+        required: true,
+    },
+    description: {
+        type: String,
+        required: true,
+    },
+});
+const slots = useSlots();
+const { t } = useI18n();
+</script>
+
+<template>
+    <div class="descriptor">
+        <div class="header bg-primary q-pa-sm">
+            <router-link :to="{ name: `${module}List` }">
+                <q-btn round flat dense size="md" icon="view_list" color="white">
+                    <q-tooltip>{{ t('components.cardDescriptor.mainList') }}</q-tooltip>
+                </q-btn>
+            </router-link>
+            <router-link :to="{ name: `${module}Summary`, params: { id: data.id } }">
+                <q-btn round flat dense size="md" icon="launch" color="white">
+                    <q-tooltip>{{ t('components.cardDescriptor.summary') }}</q-tooltip>
+                </q-btn>
+            </router-link>
+
+            <q-btn v-if="slots.menu" size="md" icon="more_vert" color="white" round flat dense>
+                <q-tooltip>{{ t('components.cardDescriptor.moreOptions') }}</q-tooltip>
+                <q-menu>
+                    <q-list>
+                        <slot name="menu" />
+                    </q-list>
+                </q-menu>
+            </q-btn>
+        </div>
+
+        <div v-if="$props.data" class="body q-py-sm">
+            <q-list>
+                <q-item-label header class="ellipsis text-h5" :lines="1">
+                    {{ $props.description }}
+                    <q-tooltip>{{ $props.description }}</q-tooltip>
+                </q-item-label>
+                <q-item dense>
+                    <q-item-label class="text-subtitle2" caption>#{{ data.id }}</q-item-label>
+                </q-item>
+            </q-list>
+            <slot name="body" />
+        </div>
+
+        <!-- Skeleton -->
+        <div id="descriptor-skeleton" v-if="!$props.data">
+            <div class="col q-pl-sm q-pa-sm">
+                <q-skeleton type="text" square height="45px" />
+                <q-skeleton type="text" square height="18px" />
+                <q-skeleton type="text" square height="18px" />
+                <q-skeleton type="text" square height="18px" />
+            </div>
+
+            <q-card-actions>
+                <q-skeleton size="40px" />
+                <q-skeleton size="40px" />
+                <q-skeleton size="40px" />
+                <q-skeleton size="40px" />
+                <q-skeleton size="40px" />
+            </q-card-actions>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+.body {
+    .q-card__actions {
+        justify-content: center;
+    }
+    .text-h5 {
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+}
+</style>
+
+<style lang="scss" scoped>
+.descriptor {
+    width: 256px;
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: stretch;
+    }
+
+    #descriptor-skeleton .q-card__actions {
+        justify-content: space-between;
+    }
+}
+</style>

src/composables/__tests__/useNavigation.spec.js

@@ -32,7 +32,8 @@ describe('useNavigation', () => {
             name: 'CustomerCreate',
             title: 'createCustomer',
             icon: 'vn:addperson',
-            stateName: 'CustomerCreate'
+            stateName: 'CustomerCreate',
+            roles: ['developer']
         }];
 
         const secondMenuItem = navigation.modules.value[1]

src/css/app.scss

@@ -1,2 +1,11 @@
 // app global css in SCSS form
 @import './icons.scss';
+
+.link {
+    color: $primary;
+    cursor: pointer
+}
+
+.link:hover {
+    color: $orange-4;
+}

src/i18n/en/index.js

@@ -257,12 +257,13 @@ export default {
         smartCard: {
             noData: 'No data to display',
             openCard: 'View card',
-            openSummary: 'Open summary'
+            openSummary: 'Open summary',
+            viewDescription: 'View description'
         },
-        card: {
+        cardDescriptor: {
             mainList: 'Main list',
             summary: 'Summary',
-            moreOptions: 'More options',
+            moreOptions: 'More options'
         }
     },
 };

src/i18n/es/index.js

@@ -256,9 +256,10 @@ export default {
         smartCard: {
             noData: 'Sin datos que mostrar',
             openCard: 'Ver ficha',
-            openSummary: 'Abrir detalles'
+            openSummary: 'Abrir detalles',
+            viewDescription: 'Ver descripción'
         },
-        card: {
+        cardDescriptor: {
             mainList: 'Listado principal',
             summary: 'Resumen',
             moreOptions: 'Más opciones',

src/pages/Claim/Card/ClaimCard.vue

@@ -1,151 +1,16 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import axios from 'axios';
 import { useState } from 'src/composables/useState';
-import { toDate } from 'src/filters';
+import ClaimDescriptor from './ClaimDescriptor.vue';
 
-const route = useRoute();
 const { t } = useI18n();
 const state = useState();
-
-onMounted(async () => {
-    await fetch();
-});
-const claim = ref({});
-
-async function fetch() {
-    const entityId = route.params.id;
-    const filter = {
-        include: [
-            { relation: 'client' },
-            { relation: 'claimState' },
-            {
-                relation: 'claimState',
-            },
-            {
-                relation: 'worker',
-                scope: {
-                    include: { relation: 'user' },
-                },
-            },
-        ],
-    };
-    const options = { params: { filter } };
-    const { data } = await axios.get(`Claims/${entityId}`, options);
-
-    if (data) claim.value = data;
-}
-
-function stateColor(code) {
-    if (code === 'pending') return 'green';
-    if (code === 'managed') return 'orange';
-    if (code === 'resolved') return 'red';
-}
 </script>
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
-        <q-scroll-area class="fit text-grey-8 descriptor">
-            <div class="header bg-primary q-pa-sm">
-                <router-link :to="{ path: '/claim/list' }">
-                    <q-btn round flat dense size="md" icon="view_list" color="white">
-                        <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
-                    </q-btn>
-                </router-link>
-                <router-link :to="{ name: 'ClaimSummary', params: { id: route.params.id } }">
-                    <q-btn round flat dense size="md" icon="launch" color="white">
-                        <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
-                    </q-btn>
-                </router-link>
-
-                <q-btn round flat dense size="md" icon="more_vert" color="white">
-                    <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
-                    <!-- <q-menu>
-                        <q-list>
-                            <q-item clickable v-ripple>Option 1</q-item>
-                            <q-item clickable v-ripple>Option 2</q-item>
-                        </q-list>
-                    </q-menu> -->
-                </q-btn>
-            </div>
-
-            <div v-if="claim.client" class="q-py-sm">
-                <q-list>
-                    <q-item-label header class="ellipsis text-h5" :lines="1">
-                        {{ claim.client.name }}
-                        <q-tooltip>{{ claim.client.name }}</q-tooltip>
-                    </q-item-label>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.card.claimId') }}</q-item-label>
-                            <q-item-label>#{{ claim.id }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
-                            <q-item-label>{{ toDate(claim.created) }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.card.assignedTo') }}</q-item-label>
-                            <q-item-label>{{ claim.worker.user.name }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
-                            <q-item-label>
-                                <q-chip :color="stateColor(claim.claimState.code)" dense>
-                                    {{ claim.claimState.description }}
-                                </q-chip>
-                            </q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.card.ticketId') }}</q-item-label>
-                            <q-item-label>{{ claim.ticketFk }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-                <q-card-actions>
-                    <q-btn
-                        size="md"
-                        icon="vn:client"
-                        color="primary"
-                        :to="{ name: 'CustomerCard', params: { id: claim.clientFk } }"
-                    >
-                        <q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
-                    </q-btn>
-                    <q-btn
-                        size="md"
-                        icon="vn:ticket"
-                        color="primary"
-                        :to="{ name: 'TicketCard', params: { id: claim.ticketFk } }"
-                    >
-                        <q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
-                    </q-btn>
-                </q-card-actions>
-            </div>
-            <!-- Skeleton -->
-            <div id="descriptor-skeleton" v-if="!claim.client">
-                <div class="col q-pl-sm q-pa-sm">
-                    <q-skeleton type="text" square height="45px" />
-                    <q-skeleton type="text" square height="18px" />
-                    <q-skeleton type="text" square height="18px" />
-                    <q-skeleton type="text" square height="18px" />
-                </div>
-
-                <q-card-actions>
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                </q-card-actions>
-            </div>
-
+        <q-scroll-area class="fit">
+            <claim-descriptor />
             <q-separator />
-
             <q-list>
                 <q-item :to="{ name: 'ClaimBasicData' }" clickable v-ripple>
                     <q-item-section avatar>

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { onMounted, computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toDate } from 'src/filters';
+import axios from 'axios';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+import TicketDescriptorPopover from 'src/pages/Ticket/Card/TicketDescriptorPopover.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+onMounted(async () => {
+    await fetch();
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const claim = ref();
+async function fetch() {
+    const filter = {
+        include: [
+            { relation: 'client' },
+            { relation: 'claimState' },
+            {
+                relation: 'claimState',
+            },
+            {
+                relation: 'worker',
+                scope: {
+                    include: { relation: 'user' },
+                },
+            },
+        ],
+    };
+    const options = { params: { filter } };
+    const { data } = await axios.get(`Claims/${entityId.value}`, options);
+
+    if (data) claim.value = data;
+}
+
+function stateColor(code) {
+    if (code === 'pending') return 'green';
+    if (code === 'managed') return 'orange';
+    if (code === 'resolved') return 'red';
+}
+</script>
+
+<template>
+    <card-descriptor v-if="claim" module="Claim" :data="claim" :description="claim.client.name">
+        <template #body>
+            <q-list>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
+                        <q-item-label>{{ toDate(claim.created) }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
+                        <q-item-label>
+                            <q-chip :color="stateColor(claim.claimState.code)" dense>
+                                {{ claim.claimState.description }}
+                            </q-chip>
+                        </q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('claim.card.ticketId') }}</q-item-label>
+                        <q-item-label class="link">
+                            {{ claim.ticketFk }}
+                            <q-popup-proxy>
+                                <ticket-descriptor-popover :id="claim.ticketFk" />
+                            </q-popup-proxy>
+                        </q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('claim.card.assignedTo') }}</q-item-label>
+                        <q-item-label>{{ claim.worker.user.name }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+            </q-list>
+
+            <q-card-actions>
+                <q-btn
+                    size="md"
+                    icon="vn:client"
+                    color="primary"
+                    :to="{ name: 'CustomerCard', params: { id: claim.clientFk } }"
+                >
+                    <q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
+                </q-btn>
+                <q-btn
+                    size="md"
+                    icon="vn:ticket"
+                    color="primary"
+                    :to="{ name: 'TicketCard', params: { id: claim.ticketFk } }"
+                >
+                    <q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
+                </q-btn>
+            </q-card-actions>
+        </template>
+    </card-descriptor>
+</template>

src/pages/Claim/Card/ClaimSummary.vue

@@ -12,13 +12,13 @@ const route = useRoute();
 const { t } = useI18n();
 
 const $props = defineProps({
-    claimId: {
+    id: {
         type: Number,
         default: 0,
     },
 });
 
-const entityId = computed(() => $props.claimId || route.params.id);
+const entityId = computed(() => $props.id || route.params.id);
 
 const claim = ref(null);
 const salesClaimed = ref(null);

src/pages/Claim/Card/ClaimSummaryDialog.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import ClaimSummary from './ClaimSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <claim-summary v-if="$props.id" :id="$props.id" />
+    </q-dialog>
+</template>

src/pages/Claim/ClaimList.vue

@@ -1,12 +1,14 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
 import Paginate from 'src/components/Paginate.vue';
 import { toDate } from 'src/filters/index';
-import ClaimSummary from './Card/ClaimSummary.vue';
+import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
+import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
 
 const router = useRouter();
+const quasar = useQuasar();
 const { t } = useI18n();
 
 const filter = {
@@ -36,15 +38,13 @@ function navigate(id) {
     router.push({ path: `/claim/${id}` });
 }
 
-const preview = ref({
-    shown: false,
-});
-
-function showPreview(id) {
-    preview.value.shown = true;
-    preview.value.data = {
-        claimId: id,
-    };
+function viewSummary(id) {
+    quasar.dialog({
+        component: ClaimSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
 }
 </script>
 
@@ -55,7 +55,12 @@ function showPreview(id) {
                 <q-card class="card" v-for="row of rows" :key="row.id">
                     <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
                         <q-item-section class="q-pa-md" @click="navigate(row.id)">
-                            <div class="text-h6">{{ row.name }}</div>
+                            <div class="text-h6 link">
+                                {{ row.client.name }}
+                                <q-popup-proxy>
+                                    <customer-descriptor-popover :customer="row.client" />
+                                </q-popup-proxy>
+                            </div>
                             <q-item-label caption>#{{ row.id }}</q-item-label>
                             <q-list>
                                 <q-item class="q-pa-none">
@@ -109,16 +114,19 @@ function showPreview(id) {
                             <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
                             </q-btn>
-                            <q-btn flat round color="grey-7" icon="preview" @click="showPreview(row.id)">
+                            <q-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
                             </q-btn>
+                            <q-btn flat round color="grey-7" icon="vn:client">
+                                <q-tooltip>{{ t('components.smartCard.viewDescription') }}</q-tooltip>
+                                <q-popup-proxy>
+                                    <customer-descriptor-popover :customer="row.client" />
+                                </q-popup-proxy>
+                            </q-btn>
                         </q-card-actions>
                     </q-item>
                 </q-card>
             </template>
         </paginate>
     </q-page>
-    <q-dialog v-model="preview.shown">
-        <claim-summary :claim-id="preview.data.claimId" />
-    </q-dialog>
 </template>

src/pages/Customer/Card/CustomerCard.vue

@@ -1,152 +1,16 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import axios from 'axios';
-
 import { useState } from 'src/composables/useState';
-import { toCurrency } from 'src/filters';
+import CustomerDescriptor from './CustomerDescriptor.vue';
 
-const route = useRoute();
 const state = useState();
 const { t } = useI18n();
-
-onMounted(async () => {
-    await fetch();
-});
-
-const customer = ref(null);
-
-async function fetch() {
-    const entityId = route.params.id;
-
-    const { data } = await axios.get(`Clients/${entityId}/getCard`);
-
-    if (data) customer.value = data;
-}
 </script>
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
-        <q-scroll-area class="fit text-grey-8 descriptor">
-            <div class="header bg-primary q-pa-sm">
-                <router-link :to="{ path: '/customer/list' }">
-                    <q-btn round flat dense size="md" icon="view_list" color="white">
-                        <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
-                    </q-btn>
-                </router-link>
-                <router-link :to="{ name: 'CustomerSummary', params: { id: route.params.id } }">
-                    <q-btn round flat dense size="md" icon="launch" color="white">
-                        <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
-                    </q-btn>
-                </router-link>
-
-                <q-btn round flat dense size="md" icon="more_vert" color="white">
-                    <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
-                    <!-- <q-menu>
-                        <q-list>
-                            <q-item clickable v-ripple>Option 1</q-item>
-                            <q-item clickable v-ripple>Option 2</q-item>
-                        </q-list>
-                    </q-menu> -->
-                </q-btn>
-            </div>
-
-            <div v-if="customer" class="q-py-sm">
-                <q-list>
-                    <q-item-label header class="ellipsis text-h5" :lines="1">
-                        {{ customer.name }}
-                        <q-tooltip>{{ customer.name }}</q-tooltip>
-                    </q-item-label>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.card.customerId') }}</q-item-label>
-                            <q-item-label>#{{ customer.id }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.card.salesPerson') }}</q-item-label>
-                            <q-item-label>{{ customer.salesPersonUser.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.card.credit') }}</q-item-label>
-                            <q-item-label>{{ toCurrency(customer.credit) }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.card.securedCredit') }}</q-item-label>
-                            <q-item-label>{{ toCurrency(customer.creditInsurance) }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.card.payMethod') }}</q-item-label>
-                            <q-item-label>{{ customer.payMethod.name }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
-                            <q-item-label>{{ toCurrency(customer.debt) }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-                <q-card-actions class="q-gutter-md">
-                    <q-icon v-if="customer.isActive == false" name="vn:disabled" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.isFreezed == true" name="vn:frozen" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.debt > customer.credit" name="vn:risk" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
-                    </q-icon>
-                </q-card-actions>
-                <!-- <q-card-actions>
-                    <q-btn size="md" icon="vn:ticket" color="primary">
-                        <q-tooltip>Ticket list</q-tooltip>
-                    </q-btn>
-
-                    <q-btn size="md" icon="vn:invoice-out" color="primary">
-                        <q-tooltip>Invoice Out list</q-tooltip>
-                    </q-btn>
-
-                    <q-btn size="md" icon="vn:basketadd" color="primary">
-                        <q-tooltip>Order list</q-tooltip>
-                    </q-btn>
-
-                    <q-btn size="md" icon="face" color="primary">
-                        <q-tooltip>View user</q-tooltip>
-                    </q-btn>
-
-                    <q-btn size="md" icon="expand_more" color="primary">
-                        <q-tooltip>More options</q-tooltip>
-                    </q-btn>
-                </q-card-actions> -->
-            </div>
-            <!-- Skeleton -->
-            <div id="descriptor-skeleton" v-if="!customer">
-                <div class="col q-pl-sm q-pa-sm">
-                    <q-skeleton type="text" square height="45px" />
-                    <q-skeleton type="text" square height="18px" />
-                    <q-skeleton type="text" square height="18px" />
-                    <q-skeleton type="text" square height="18px" />
-                </div>
-
-                <q-card-actions>
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                </q-card-actions>
-            </div>
-
+        <q-scroll-area class="fit">
+            <customer-descriptor />
             <q-separator />
-
             <q-list>
                 <q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
                     <q-item-section avatar>
@@ -179,26 +43,3 @@ async function fetch() {
         </q-page>
     </q-page-container>
 </template>
-
-<style lang="scss" scoped>
-.descriptor {
-    max-width: 256px;
-
-    h5 {
-        margin: 0 15px;
-    }
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .q-card__actions {
-        justify-content: center;
-    }
-
-    #descriptor-skeleton .q-card__actions {
-        justify-content: space-between;
-    }
-}
-</style>

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toCurrency } from 'src/filters';
+import axios from 'axios';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+onMounted(async () => {
+    await fetch();
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const customer = ref();
+async function fetch() {
+    const { data } = await axios.get(`Clients/${entityId.value}/getCard`);
+
+    if (data) customer.value = data;
+}
+</script>
+
+<template>
+    <card-descriptor v-if="customer" module="Customer" :data="customer" :description="customer.name">
+        <!-- <template #menu>
+            <q-item clickable v-ripple>Option 1</q-item>
+            <q-item clickable v-ripple>Option 2</q-item>
+        </template> -->
+        <template #body>
+            <q-list>
+                <q-item v-if="customer.salesPersonUser">
+                    <q-item-section>
+                        <q-item-label caption>{{ t('customer.card.salesPerson') }}</q-item-label>
+                        <q-item-label>{{ customer.salesPersonUser.name }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('customer.card.credit') }}</q-item-label>
+                        <q-item-label>{{ toCurrency(customer.credit) }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('customer.card.securedCredit') }}</q-item-label>
+                        <q-item-label>{{ toCurrency(customer.creditInsurance) }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section v-if="customer.payMethod">
+                        <q-item-label caption>{{ t('customer.card.payMethod') }}</q-item-label>
+                        <q-item-label>{{ customer.payMethod.name }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
+                        <q-item-label>{{ toCurrency(customer.debt) }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+            </q-list>
+            <q-card-actions class="q-gutter-md">
+                <q-icon v-if="customer.isActive == false" name="vn:disabled" size="xs" color="primary">
+                    <q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
+                </q-icon>
+                <q-icon v-if="customer.isFreezed == true" name="vn:frozen" size="xs" color="primary">
+                    <q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
+                </q-icon>
+                <q-icon v-if="customer.debt > customer.credit" name="vn:risk" size="xs" color="primary">
+                    <q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
+                </q-icon>
+                <q-icon v-if="customer.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
+                    <q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
+                </q-icon>
+                <q-icon v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary">
+                    <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
+                </q-icon>
+            </q-card-actions>
+            <!-- <q-card-actions>
+                    <q-btn size="md" icon="vn:ticket" color="primary">
+                        <q-tooltip>Ticket list</q-tooltip>
+                    </q-btn>
+
+                    <q-btn size="md" icon="vn:invoice-out" color="primary">
+                        <q-tooltip>Invoice Out list</q-tooltip>
+                    </q-btn>
+
+                    <q-btn size="md" icon="vn:basketadd" color="primary">
+                        <q-tooltip>Order list</q-tooltip>
+                    </q-btn>
+
+                    <q-btn size="md" icon="face" color="primary">
+                        <q-tooltip>View user</q-tooltip>
+                    </q-btn>
+
+                    <q-btn size="md" icon="expand_more" color="primary">
+                        <q-tooltip>More options</q-tooltip>
+                    </q-btn>
+                </q-card-actions> -->
+        </template>
+    </card-descriptor>
+</template>

src/pages/Customer/Card/CustomerDescriptorPopover.vue

@@ -0,0 +1,15 @@
+<script setup>
+import CustomerDescriptor from './CustomerDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+    <q-card>
+        <customer-descriptor v-if="$props.id" :id="$props.id" />
+    </q-card>
+</template>

src/pages/Customer/Card/CustomerSummary.vue

@@ -12,13 +12,13 @@ const route = useRoute();
 const { t } = useI18n();
 
 const $props = defineProps({
-    customerId: {
+    id: {
         type: Number,
         default: 0,
     },
 });
 
-const entityId = computed(() => $props.customerId || route.params.id);
+const entityId = computed(() => $props.id || route.params.id);
 
 const customer = ref(null);
 function fetch() {

src/pages/Customer/Card/CustomerSummaryDialog.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import CustomerSummary from './CustomerSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <customer-summary v-if="$props.id" :id="$props.id" />
+    </q-dialog>
+</template>

src/pages/Customer/CustomerList.vue

@@ -1,26 +1,25 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
 import Paginate from 'src/components/Paginate.vue';
-import CustomerSummary from './Card/CustomerSummary.vue';
+import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 
 const router = useRouter();
+const quasar = useQuasar();
 const { t } = useI18n();
 
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
 
-const preview = ref({
-    shown: false,
-});
-
-function showPreview(id) {
-    preview.value.shown = true;
-    preview.value.data = {
-        customerId: id,
-    };
+function viewSummary(id) {
+    quasar.dialog({
+        component: CustomerSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
 }
 </script>
 
@@ -73,7 +72,7 @@ function showPreview(id) {
                             <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
                             </q-btn>
-                            <q-btn flat round color="grey-7" icon="preview" @click="showPreview(row.id)">
+                            <q-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
                             </q-btn>
                             <!-- <q-btn flat round color="grey-7" icon="vn:ticket">
@@ -85,7 +84,4 @@ function showPreview(id) {
             </template>
         </paginate>
     </q-page>
-    <q-dialog v-model="preview.shown">
-        <customer-summary :customer-id="preview.data.customerId" />
-    </q-dialog>
 </template>

src/pages/Ticket/Card/TicketCard.vue

@@ -1,151 +1,16 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import axios from 'axios';
-
 import { useState } from 'src/composables/useState';
-import { toDate } from 'src/filters';
+import TicketDescriptor from './TicketDescriptor.vue';
 
-const route = useRoute();
 const state = useState();
 const { t } = useI18n();
-
-onMounted(async () => {
-    await fetch();
-});
-
-const ticket = ref(null);
-
-async function fetch() {
-    const entityId = route.params.id;
-
-    const { data } = await axios.get(`Tickets/${entityId}/summary`);
-
-    if (data) ticket.value = data;
-}
-
-function stateColor(state) {
-    if (state.code === 'OK') return 'text-green';
-    if (state.code === 'FREE') return 'text-blue-3';
-    if (state.alertLevel === 1) return 'text-primary';
-    if (state.alertLevel === 0) return 'text-red';
-}
 </script>
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
-        <q-scroll-area class="fit text-grey-8 descriptor">
-            <div class="header bg-primary q-pa-sm">
-                <router-link :to="{ path: '/ticket/list' }">
-                    <q-btn round flat dense size="md" icon="view_list" color="white">
-                        <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
-                    </q-btn>
-                </router-link>
-                <router-link :to="{ name: 'TicketSummary', params: { id: route.params.id } }">
-                    <q-btn round flat dense size="md" icon="launch" color="white">
-                        <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
-                    </q-btn>
-                </router-link>
-
-                <q-btn round flat dense size="md" icon="more_vert" color="white">
-                    <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
-                    <!-- <q-menu>
-                        <q-list>
-                            <q-item clickable v-ripple>Option 1</q-item>
-                            <q-item clickable v-ripple>Option 2</q-item>
-                        </q-list>
-                    </q-menu> -->
-                </q-btn>
-            </div>
-
-            <div v-if="ticket" class="q-py-sm">
-                <q-list>
-                    <q-item-label header class="ellipsis text-h5" :lines="1">
-                        {{ ticket.nickname }}
-                        <q-tooltip>{{ ticket.nickname }}</q-tooltip>
-                    </q-item-label>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.ticketId') }}</q-item-label>
-                            <q-item-label>#{{ ticket.id }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.state') }}</q-item-label>
-                            <q-item-label :class="stateColor(ticket.ticketState.state)">
-                                {{ ticket.ticketState.state.name }}
-                            </q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.customerId') }}</q-item-label>
-                            <q-item-label>{{ ticket.clientFk }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.salesPerson') }}</q-item-label>
-                            <q-item-label>{{ ticket.client.salesPersonUser.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.agency') }}</q-item-label>
-                            <q-item-label>{{ ticket.agencyMode.name }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.shipped') }}</q-item-label>
-                            <q-item-label>{{ toDate(ticket.shipped) }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.warehouse') }}</q-item-label>
-                            <q-item-label>{{ ticket.warehouse.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-                <!-- <q-card-actions class="q-gutter-md">
-                    <q-icon v-if="customer.isActive == false" name="vn:disabled" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.isFreezed == true" name="vn:frozen" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.debt > customer.credit" name="vn:risk" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
-                    </q-icon>
-                </q-card-actions> -->
-                <q-card-actions>
-                    <q-btn size="md" icon="vn:client" color="primary">
-                        <q-tooltip>{{ t('ticket.card.customerCard') }}</q-tooltip>
-                    </q-btn>
-                </q-card-actions>
-            </div>
-            <!-- Skeleton -->
-            <div id="descriptor-skeleton" v-if="!ticket">
-                <div class="col q-pl-sm q-pa-sm">
-                    <q-skeleton type="text" square height="45px" />
-                    <q-skeleton type="text" square height="18px" />
-                    <q-skeleton type="text" square height="18px" />
-                    <q-skeleton type="text" square height="18px" />
-                </div>
-
-                <q-card-actions>
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                </q-card-actions>
-            </div>
-
+        <q-scroll-area class="fit">
+            <ticket-descriptor />
             <q-separator />
-
             <q-list>
                 <q-item :to="{ name: 'TicketBoxing' }" clickable v-ripple>
                     <q-item-section avatar>

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { onMounted, computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toDate } from 'src/filters';
+import axios from 'axios';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+onMounted(async () => {
+    await fetch();
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const ticket = ref();
+async function fetch() {
+    const { data } = await axios.get(`Tickets/${entityId.value}/summary`);
+
+    if (data) ticket.value = data;
+}
+
+function stateColor(state) {
+    if (state.code === 'OK') return 'text-green';
+    if (state.code === 'FREE') return 'text-blue-3';
+    if (state.alertLevel === 1) return 'text-primary';
+    if (state.alertLevel === 0) return 'text-red';
+}
+</script>
+
+<template>
+    <card-descriptor v-if="ticket" module="Ticket" :data="ticket" :description="ticket.client.name">
+        <!-- <template #menu>
+            <q-item clickable v-ripple>Option 1</q-item>
+            <q-item clickable v-ripple>Option 2</q-item>
+        </template> -->
+        <template #body>
+            <q-list>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.ticketId') }}</q-item-label>
+                        <q-item-label>#{{ ticket.id }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.state') }}</q-item-label>
+                        <q-item-label :class="stateColor(ticket.ticketState.state)">
+                            {{ ticket.ticketState.state.name }}
+                        </q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.customerId') }}</q-item-label>
+                        <q-item-label class="link">
+                            {{ ticket.clientFk }}
+                            <q-popup-proxy>
+                                <customer-descriptor-popover :id="ticket.client.id" />
+                            </q-popup-proxy>
+                        </q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.salesPerson') }}</q-item-label>
+                        <q-item-label>{{ ticket.client.salesPersonUser.name }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.warehouse') }}</q-item-label>
+                        <q-item-label>{{ ticket.warehouse.name }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.shipped') }}</q-item-label>
+                        <q-item-label>{{ toDate(ticket.shipped) }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.agency') }}</q-item-label>
+                        <q-item-label>{{ ticket.agencyMode.name }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+            </q-list>
+
+            <q-card-actions>
+                <q-btn
+                    size="md"
+                    icon="vn:client"
+                    color="primary"
+                    :to="{ name: 'CustomerCard', params: { id: ticket.clientFk } }"
+                >
+                    <q-tooltip>{{ t('ticket.card.customerCard') }}</q-tooltip>
+                </q-btn>
+            </q-card-actions>
+        </template>
+    </card-descriptor>
+</template>

src/pages/Ticket/Card/TicketDescriptorPopover.vue

@@ -0,0 +1,15 @@
+<script setup>
+import TicketDescriptor from './TicketDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+    <q-card>
+        <ticket-descriptor v-if="$props.id" :id="$props.id" />
+    </q-card>
+</template>