From 6f7b83d593e0238ea7f1bf0f1f204d1358b6e45b Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 22 Nov 2024 15:30:43 +0100
Subject: [PATCH] feat(client and ticket): add moreOptions in summary

---
 src/components/ui/CardDescriptor.vue        | 25 +++++----------------
 src/components/ui/CardSummary.vue           | 12 +++++++---
 src/components/ui/VnMoreOptions.vue         | 20 +++++++++++++++++
 src/pages/Customer/Card/CustomerSummary.vue |  9 +++++---
 src/pages/Ticket/Card/TicketSummary.vue     | 15 ++++---------
 5 files changed, 45 insertions(+), 36 deletions(-)
 create mode 100644 src/components/ui/VnMoreOptions.vue

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 83af77442..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">
diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index cf8859a35..4773253a7 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -5,6 +5,7 @@ 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 VnMoreOptions from './VnMoreOptions.vue';
 
 const props = defineProps({
     url: {
@@ -83,9 +84,14 @@ async function fetch() {
                     <slot name="header" :entity="entity" dense>
                         <VnLv :label="`${entity.id} -`" :value="entity.name" />
                     </slot>
-                    <slot name="header-right" :entity="entity">
-                        <span></span>
-                    </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" />
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 95a162670..d2eb125d7 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -1,18 +1,18 @@
 <script setup>
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 import { toCurrency, toPercentage, toDate, dashOrCurrency } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
-import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 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';
@@ -71,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
@@ -320,7 +323,7 @@ const sumRisk = ({ clientRisks }) => {
                     :value="entity.recommendedCredit"
                 />
             </QCard>
-            <QCard class="vn-one">
+            <QCard class="vn-max">
                 <VnTitle :text="t('Latest tickets')" />
                 <CustomerSummaryTable />
             </QCard>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 9aa591766..2c6e34864 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -113,7 +113,7 @@ function toTicketUrl(section) {
                 {{ entity.nickname }}
             </div>
         </template>
-        <template #header-right="{ entity }">
+        <template #header-right>
             <div>
                 <QBtnDropdown
                     ref="stateBtnDropdownRef"
@@ -132,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