Merge pull request '6475-descriptor_preview' (!109) from 6475-descriptor_preview into dev

Reviewed-on: verdnatura/salix-front#109 Reviewed-by: Alex Moreno <alexm@verdnatura.es>
2023-12-11 07:27:42 +00:00 · 2023-12-11 07:27:42 +00:00 · 5c84a68ca6
parent 09ff922c94 e7d22052a7
commit 5c84a68ca6
8 changed files with 85 additions and 55 deletions
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@ -1,6 +1,7 @@
 <script setup>
 import { onMounted, useSlots, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
@ -30,8 +31,12 @@ const $props = defineProps({
        type: String,
        default: '',
    },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
-
+const quasar = useQuasar();
 const slots = useSlots();
 const { t } = useI18n();
 const entity = computed(() => useArrayData($props.dataKey).store.data);
@ -57,27 +62,36 @@ async function getData() {
    emit('onFetch', data);
 }
 const emit = defineEmits(['onFetch']);
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: $props.summary,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>

 <template>
    <div class="descriptor">
        <template v-if="entity">
-            <div class="header bg-primary q-pa-sm">
-                <RouterLink :to="{ name: `${module}List` }">
+            <div class="header bg-primary q-pa-sm justify-between">
                <QBtn
+                    @click.stop="viewSummary(entity.id)"
                    round
                    flat
                    dense
                    size="md"
-                        icon="view_list"
+                    icon="preview"
                    color="white"
                    class="link"
+                    v-if="summary"
                >
                    <QTooltip>
-                            {{ t('components.cardDescriptor.mainList') }}
+                        {{ t('components.smartCard.openSummary') }}
                    </QTooltip>
                </QBtn>
-                </RouterLink>
                <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
                    <QBtn
                        round
@ -93,7 +107,6 @@ const emit = defineEmits(['onFetch']);
                        </QTooltip>
                    </QBtn>
                </RouterLink>
-
                <QBtn
                    v-if="slots.menu"
                    size="md"
@ -216,8 +229,6 @@ const emit = defineEmits(['onFetch']);
    width: 256px;
    .header {
        display: flex;
-        justify-content: space-between;
-        align-items: stretch;
    }
    .icons {
        margin: 0 10px;
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@ -7,6 +7,7 @@ import { useState } from 'src/composables/useState';

 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
@ -119,7 +120,7 @@ const setData = (entity) => {
                <template #value>
                    <span class="link">
                        {{ entity.worker.user.name }}
-                        <WorkerDescriptorProxy :id="entity.worker.userFk" />
+                        <WorkerDescriptorProxy :id="entity.worker.user.id" />
                    </span>
                </template>
            </VnLv>
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@ -5,12 +5,13 @@ import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
-import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import ClaimFilter from './ClaimFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
+import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';

 const stateStore = useStateStore();
 const router = useRouter();
@ -37,6 +38,15 @@ function viewSummary(id) {
        },
    });
 }
+
+function viewDescriptor(id) {
+    quasar.dialog({
+        component: CustomerDescriptorProxy,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>

 <template>
@ -86,14 +96,22 @@ function viewSummary(id) {
                    >
                        <template #list-items>
                            <VnLv label="ID" :value="row.id" />
-                            <VnLv
-                                :label="t('claim.list.customer')"
-                                :value="row.clientName"
-                            />
-                            <VnLv
-                                :label="t('claim.list.assignedTo')"
-                                :value="row.workerName"
-                            />
+                            <VnLv :label="t('claim.list.customer')" @click.stop>
+                                <template #value>
+                                    <span class="link">
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('claim.list.assignedTo')" @click.stop>
+                                <template #value>
+                                    <span class="link">
+                                        {{ row.workerName }}
+                                        <WorkerDescriptorProxy :id="row.workerFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
                            <VnLv
                                :label="t('claim.list.created')"
                                :value="toDate(row.created)"
@ -125,13 +143,6 @@ function viewSummary(id) {
                                    {{ t('components.smartCard.openSummary') }}
                                </QTooltip>
                            </QBtn>
-                            <QBtn flat icon="vn:client" @click.stop>
-                                <QTooltip>
-                                    {{ t('components.smartCard.viewDescription') }}
-                                </QTooltip>
-
-                                <CustomerDescriptorProxy :id="row.clientFk" />
-                            </QBtn>
                        </template>
                    </CardList>
                </template>
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@ -14,6 +14,10 @@ const $props = defineProps({
        required: false,
        default: null,
    },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });

 const route = useRoute();
@ -34,6 +38,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
        :title="data.title"
        :subtitle="data.subtitle"
        @on-fetch="setData"
+        :summary="$props.summary"
        data-key="customerData"
    >
        <template #body="{ entity }">
--- a/src/pages/Customer/Card/CustomerDescriptorProxy.vue
+++ b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
@ -1,5 +1,6 @@
 <script setup>
 import CustomerDescriptor from './CustomerDescriptor.vue';
+import CustomerSummaryDialog from './CustomerSummaryDialog.vue';

 const $props = defineProps({
    id: {
@ -8,8 +9,13 @@ const $props = defineProps({
    },
 });
 </script>
+
 <template>
    <QPopupProxy>
-        <CustomerDescriptor v-if="$props.id" :id="$props.id" />
+        <CustomerDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="CustomerSummaryDialog"
+        />
    </QPopupProxy>
 </template>
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@ -14,6 +14,10 @@ const $props = defineProps({
        required: false,
        default: null,
    },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });

 const route = useRoute();
@ -53,7 +57,7 @@ const sip = computed(() => worker.value?.sip && worker.value.sip.extension);

 function getWorkerAvatar() {
    const token = getToken();
-    return `/api/Images/user/160x160/${route.params.id}/download?access_token=${token}`;
+    return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
 }
 const data = ref(useCardDescription());
 const setData = (entity) => {
@ -69,6 +73,7 @@ const setData = (entity) => {
        :filter="filter"
        :title="data.title"
        :subtitle="data.subtitle"
+        :summary="$props.summary"
        @on-fetch="
            (data) => {
                worker = data;
--- a/src/pages/Worker/Card/WorkerDescriptorProxy.vue
+++ b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
@ -1,5 +1,6 @@
 <script setup>
 import WorkerDescriptor from './WorkerDescriptor.vue';
+import WorkerSummaryDialog from './WorkerSummaryDialog.vue';

 const $props = defineProps({
    id: {
@ -11,6 +12,10 @@ const $props = defineProps({

 <template>
    <QPopupProxy>
-        <WorkerDescriptor v-if="$props.id" :id="$props.id" />
+        <WorkerDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="WorkerSummaryDialog"
+        />
    </QPopupProxy>
 </template>
--- a/test/cypress/integration/ticketBoxing.spec.js
+++ b/test/cypress/integration/ticketBoxing.spec.js
@ -17,18 +17,4 @@ describe('TicketBoxing', () => {
        cy.get('div[class="q-item__label text-h6"]').eq(0).click();
        cy.get('.q-notification__message').should('have.text', 'No videos available');
    });
-
-    it('should show select time and video if have video list', () => {
-        cy.intercept(
-            {
-                method: 'GET',
-                url: '/api/Boxings/*',
-            },
-            ['2022-01-01T01-01-00.mp4', '2022-02-02T02-02-00.mp4', '2022-03-03T03-03-00.mp4']
-        ).as('getVideoList');
-        cy.get('.q-list').eq(3).find('.q-item').eq(2).click();
-
-        cy.get('.q-list').eq(3).find('.q-item').eq(0).find('.q-range');
-        cy.get('.q-list').eq(3).find('.q-item').eq(1).find('.q-select');
-    });
 });