From 95712728d6082f9c5180af558f508aa70bfe46d3 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 10 Jan 2025 10:00:42 +0100
Subject: [PATCH] feat: refs #8225 added moreOptions and use it in customer and
 ticket summary

---
 src/components/ui/CardDescriptor.vue        | 31 +++++++--------------
 src/components/ui/CardSummary.vue           | 24 +++++++++-------
 src/components/ui/VnMoreOptions.vue         | 20 +++++++++++++
 src/pages/Customer/Card/CustomerSummary.vue |  9 ++++--
 src/pages/Ticket/Card/TicketSummary.vue     | 18 ++++--------
 5 files changed, 55 insertions(+), 47 deletions(-)
 create mode 100644 src/components/ui/VnMoreOptions.vue

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index f4c0091d2..4a79e562a 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -6,6 +6,7 @@ import { useArrayData } from 'composables/useArrayData';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useState } from 'src/composables/useState';
 import { useRoute } from 'vue-router';
+import VnMoreOptions from './VnMoreOptions.vue';
 
 const $props = defineProps({
     url: {
@@ -159,25 +160,11 @@ const toModule = computed(() =>
                         </QTooltip>
                     </QBtn>
                 </RouterLink>
-                <QBtn
-                    v-if="$slots.menu"
-                    color="white"
-                    dense
-                    flat
-                    icon="more_vert"
-                    round
-                    size="md"
-                    data-cy="descriptor-more-opts"
-                >
-                    <QTooltip>
-                        {{ t('components.cardDescriptor.moreOptions') }}
-                    </QTooltip>
-                    <QMenu :ref="menuRef">
-                        <QList>
-                            <slot name="menu" :entity="entity" :menu-ref="menuRef" />
-                        </QList>
-                    </QMenu>
-                </QBtn>
+                <VnMoreOptions v-if="$slots.menu">
+                    <template #menu>
+                        <slot name="menu" :entity="entity" :menu-ref="menuRef" />
+                    </template>
+                </VnMoreOptions>
             </div>
             <slot name="before" />
             <div class="body q-py-sm">
@@ -222,8 +209,8 @@ const toModule = computed(() =>
     />
 </template>
 
-<style lang="scss" scoped>
-:deep(.body) {
+<style lang="scss">
+.body {
     background-color: var(--vn-section-color);
     .text-h5 {
         font-size: 20px;
@@ -262,7 +249,9 @@ const toModule = computed(() =>
         }
     }
 }
+</style>
 
+<style lang="scss" scoped>
 .title {
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index 8395dfd73..4773253a7 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -1,10 +1,11 @@
 <script setup>
-import { ref, computed, watch, onBeforeMount, onMounted } from 'vue';
+import { ref, computed, watch, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
 import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { isDialogOpened } from 'src/filters';
-import { useStateStore } from 'src/stores/useStateStore';
+import VnMoreOptions from './VnMoreOptions.vue';
 
 const props = defineProps({
     url: {
@@ -40,7 +41,6 @@ const { store } = arrayData;
 const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
-const stateStore = useStateStore();
 defineExpose({
     entity,
     fetch,
@@ -52,9 +52,6 @@ onBeforeMount(async () => {
     watch(props, async () => await fetch());
 });
 
-onMounted(() => {
-    stateStore.rightDrawerChangeValue(false);
-});
 async function fetch() {
     store.url = props.url;
     store.filter = props.filter ?? {};
@@ -64,6 +61,7 @@ async function fetch() {
     isLoading.value = false;
 }
 </script>
+
 <template>
     <div class="summary container">
         <QCard class="cardSummary">
@@ -84,11 +82,16 @@ async function fetch() {
                         <span v-else></span>
                     </slot>
                     <slot name="header" :entity="entity" dense>
-                        {{ entity.id + ' - ' + entity.name }}
-                    </slot>
-                    <slot name="header-right" :entity="entity">
-                        <span></span>
+                        <VnLv :label="`${entity.id} -`" :value="entity.name" />
                     </slot>
+                    <span class="row no-wrap">
+                        <slot name="header-right" :entity="entity" />
+                        <VnMoreOptions v-if="$slots.menu && isDialogOpened()">
+                            <template #menu>
+                                <slot name="menu" :entity="entity" />
+                            </template>
+                        </VnMoreOptions>
+                    </span>
                 </div>
                 <div class="summaryBody row q-mb-md">
                     <slot name="body" :entity="entity" />
@@ -97,6 +100,7 @@ async function fetch() {
         </QCard>
     </div>
 </template>
+
 <style lang="scss">
 .summary.container {
     display: flex;
diff --git a/src/components/ui/VnMoreOptions.vue b/src/components/ui/VnMoreOptions.vue
new file mode 100644
index 000000000..75f7c35d6
--- /dev/null
+++ b/src/components/ui/VnMoreOptions.vue
@@ -0,0 +1,20 @@
+<template>
+    <QBtn
+        color="white"
+        dense
+        flat
+        icon="more_vert"
+        round
+        size="md"
+        data-cy="descriptor-more-opts"
+    >
+        <QTooltip>
+            {{ $t('components.cardDescriptor.moreOptions') }}
+        </QTooltip>
+        <QMenu ref="menuRef">
+            <QList>
+                <slot name="menu" />
+            </QList>
+        </QMenu>
+    </QBtn>
+</template>
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 6650ea395..d2eb125d7 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -12,6 +12,7 @@ import VnLinkMail from 'src/components/ui/VnLinkMail.vue';
 import CustomerSummaryTable from 'src/pages/Customer/components/CustomerSummaryTable.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
+import CustomerDescriptorMenu from './CustomerDescriptorMenu.vue';
 const route = useRoute();
 const { t } = useI18n();
 const grafanaUrl = 'https://grafana.verdnatura.es';
@@ -70,6 +71,9 @@ const sumRisk = ({ clientRisks }) => {
         data-key="CustomerSummary"
         module-name="Customer"
     >
+        <template #menu="{ entity }">
+            <CustomerDescriptorMenu :customer="entity" />
+        </template>
         <template #body="{ entity }">
             <QCard class="vn-one">
                 <VnTitle
@@ -94,14 +98,13 @@ const sumRisk = ({ clientRisks }) => {
                             :phone-number="entity.mobile"
                             :channel="entity.country?.saySimpleCountry?.channel"
                             class="q-ml-xs"
-                            :country="entity.country?.code"
                         />
                     </template>
                 </VnLv>
                 <VnLv :value="entity.email" copy
                     ><template #label>
                         {{ t('globals.params.email') }}
-                        <VnLinkMail :email="entity.email"></VnLinkMail> </template
+                        <VnLinkMail email="entity.email"></VnLinkMail> </template
                 ></VnLv>
                 <VnLv
                     :label="t('customer.summary.salesPerson')"
@@ -173,7 +176,7 @@ const sumRisk = ({ clientRisks }) => {
                         :label="t('customer.summary.notifyByEmail')"
                         :value="entity.isToBeMailed"
                     />
-                    <VnLv :label="t('globals.isVies')" :value="entity.isVies" />
+                    <VnLv :label="t('customer.summary.vies')" :value="entity.isVies" />
                 </VnRow>
             </QCard>
             <QCard class="vn-one">
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 2f5f69e1c..2c6e34864 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -96,7 +96,6 @@ function toTicketUrl(section) {
         ref="summaryRef"
         :url="`Tickets/${entityId}/summary`"
         data-key="TicketSummary"
-        data-cy="ticketSummary"
     >
         <template #header-left>
             <VnToSummary
@@ -114,7 +113,7 @@ function toTicketUrl(section) {
                 {{ entity.nickname }}
             </div>
         </template>
-        <template #header-right="{ entity }">
+        <template #header-right>
             <div>
                 <QBtnDropdown
                     ref="stateBtnDropdownRef"
@@ -133,18 +132,11 @@ function toTicketUrl(section) {
                         @update:model-value="changeState"
                     />
                 </QBtnDropdown>
-                <QBtn color="white" dense flat icon="more_vert" round size="md">
-                    <QTooltip>
-                        {{ t('components.cardDescriptor.moreOptions') }}
-                    </QTooltip>
-                    <QMenu>
-                        <QList>
-                            <TicketDescriptorMenu :ticket="entity" />
-                        </QList>
-                    </QMenu>
-                </QBtn>
             </div>
         </template>
+        <template #menu="{ entity }">
+            <TicketDescriptorMenu :ticket="entity" />
+        </template>
         <template #body="{ entity }">
             <QCard class="vn-one">
                 <VnTitle
@@ -258,7 +250,7 @@ function toTicketUrl(section) {
             <QCard class="vn-one" v-if="entity.notes.length">
                 <VnTitle
                     :url="toTicketUrl('observation')"
-                    :text="t('globals.pageTitles.notes')"
+                    :text="t('ticket.pageTitles.notes')"
                 />
                 <QVirtualScroll
                     :items="entity.notes"