From 2dd3e0992801f50958b19ab74b31090fab9bc9a8 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 10 Oct 2024 08:26:16 +0200
Subject: [PATCH] refactor: requested changes

---
 src/components/ui/VnToSummary.vue           | 33 +++++++++++++
 src/components/ui/VnUsesMana.vue            | 55 +++++++++++++++++++++
 src/pages/Entry/Card/EntrySummary.vue       | 13 +++--
 src/pages/ItemType/Card/ItemTypeSummary.vue |  6 +++
 src/pages/Ticket/Card/TicketEditMana.vue    | 18 +------
 src/pages/Ticket/Card/TicketSale.vue        | 17 +------
 src/pages/Ticket/Card/TicketSummary.vue     | 21 +++-----
 7 files changed, 111 insertions(+), 52 deletions(-)
 create mode 100644 src/components/ui/VnToSummary.vue
 create mode 100644 src/components/ui/VnUsesMana.vue

diff --git a/src/components/ui/VnToSummary.vue b/src/components/ui/VnToSummary.vue
new file mode 100644
index 0000000000..1c7d6cf013
--- /dev/null
+++ b/src/components/ui/VnToSummary.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { defineProps } from 'vue';
+
+const props = defineProps({
+    routeName: {
+        type: String,
+        required: true,
+    },
+    entityId: {
+        type: [String, Number],
+        required: true,
+    },
+    url: {
+        type: String,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const id = props.entityId;
+</script>
+
+<template>
+    <router-link
+        v-if="route?.name !== routeName"
+        :to="{ name: routeName, params: { id: id } }"
+        class="header link"
+        :href="url"
+    >
+        <QIcon name="open_in_new" color="white" size="sm" />
+    </router-link>
+</template>
diff --git a/src/components/ui/VnUsesMana.vue b/src/components/ui/VnUsesMana.vue
new file mode 100644
index 0000000000..891de5f630
--- /dev/null
+++ b/src/components/ui/VnUsesMana.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { defineProps, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const props = defineProps({
+    usesMana: {
+        type: Boolean,
+        required: true,
+    },
+    manaCode: {
+        type: String,
+        required: true,
+    },
+    manaVal: {
+        type: String,
+        default: 'mana',
+    },
+    manaLabel: {
+        type: String,
+        default: 'Promotion mana',
+    },
+    manaClaimVal: {
+        type: String,
+        default: 'manaClaim',
+    },
+    claimLabel: {
+        type: String,
+        default: 'Claim mana',
+    },
+});
+
+const manaCode = ref(props.manaCode);
+</script>
+
+<template>
+    <div class="column q-gutter-y-sm q-mt-sm">
+        <QRadio
+            v-model="manaCode"
+            dense
+            :val="manaVal"
+            :label="t(manaLabel)"
+            :dark="true"
+            class="q-mb-sm"
+        />
+        <QRadio
+            v-model="manaCode"
+            dense
+            :val="manaClaimVal"
+            :label="t(claimLabel)"
+            :dark="true"
+            class="q-mb-sm"
+        />
+    </div>
+</template>
diff --git a/src/pages/Entry/Card/EntrySummary.vue b/src/pages/Entry/Card/EntrySummary.vue
index 58a5c2e1bc..c2f1e6b57d 100644
--- a/src/pages/Entry/Card/EntrySummary.vue
+++ b/src/pages/Entry/Card/EntrySummary.vue
@@ -11,6 +11,7 @@ import { toDate, toCurrency } from 'src/filters';
 import { getUrl } from 'src/composables/getUrl';
 import axios from 'axios';
 import FetchedTags from 'src/components/ui/FetchedTags.vue';
+import VnToSummary from 'src/components/ui/VnToSummary.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -163,14 +164,12 @@ const fetchEntryBuys = async () => {
         data-key="EntrySummary"
     >
         <template #header-left>
-            <router-link
+            <VnToSummary
                 v-if="route?.name !== 'EntrySummary'"
-                :to="{ name: 'EntrySummary', params: { id: entityId } }"
-                class="header link"
-                :href="entryUrl"
-            >
-                <QIcon name="open_in_new" color="white" size="sm" />
-            </router-link>
+                :route-name="'EntrySummary'"
+                :entity-id="entityId"
+                :url="entryUrl"
+            />
         </template>
         <template #header>
             <span>{{ entry.id }} - {{ entry.supplier.nickname }}</span>
diff --git a/src/pages/ItemType/Card/ItemTypeSummary.vue b/src/pages/ItemType/Card/ItemTypeSummary.vue
index 62d1c74ab2..c51d59e137 100644
--- a/src/pages/ItemType/Card/ItemTypeSummary.vue
+++ b/src/pages/ItemType/Card/ItemTypeSummary.vue
@@ -6,6 +6,7 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
 
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnToSummary from 'src/components/ui/VnToSummary.vue';
 
 onUpdated(() => summaryRef.value.fetch());
 
@@ -55,6 +56,11 @@ async function setItemTypeData(data) {
             >
                 <QIcon name="open_in_new" color="white" size="sm" />
             </router-link>
+            <VnToSummary
+                v-if="route?.name !== 'ItemTypeSummary'"
+                :route-name="'ItemTypeSummary'"
+                :entity-id="entityId"
+            />
         </template>
         <template #header>
             <span>
diff --git a/src/pages/Ticket/Card/TicketEditMana.vue b/src/pages/Ticket/Card/TicketEditMana.vue
index c7ff724e48..3d5b04a412 100644
--- a/src/pages/Ticket/Card/TicketEditMana.vue
+++ b/src/pages/Ticket/Card/TicketEditMana.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-
 import { toCurrency } from 'src/filters';
+import VnUsesMana from 'components/ui/VnUsesMana.vue';
 
 const $props = defineProps({
     mana: {
@@ -57,21 +57,7 @@ const cancel = () => {
                 </div>
             </div>
             <div v-if="usesMana" class="column q-gutter-y-sm q-mt-sm">
-                <QRadio
-                    v-model="manaCode"
-                    dense
-                    val="mana"
-                    :label="t('Promotion mana')"
-                    :dark="true"
-                />
-                <QRadio
-                    v-model="manaCode"
-                    dense
-                    val="manaClaim"
-                    :label="t('Claim mana')"
-                    :dark="true"
-                    class="q-mb-sm"
-                />
+                <VnUsesMana :mana-code="manaCode" />
             </div>
             <div class="row">
                 <QBtn
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 3a42fda0c4..1586f63ffa 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -22,6 +22,7 @@ import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnUsesMana from 'src/components/ui/VnUsesMana.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -771,21 +772,7 @@ watch(
                         type="number"
                     />
                     <div v-if="usesMana" class="column q-gutter-y-sm q-mt-sm">
-                        <QRadio
-                            v-model="edit.manaCode"
-                            dense
-                            val="mana"
-                            :label="t('Promotion mana')"
-                            :dark="true"
-                        />
-                        <QRadio
-                            v-model="edit.manaCode"
-                            dense
-                            val="manaClaim"
-                            :label="t('Claim mana')"
-                            :dark="true"
-                            class="q-mb-sm"
-                        />
+                        <VnUsesMana :mana-code="manaCode" />
                     </div>
                 </TicketEditManaProxy>
             </template>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index b2de953056..4ed59d70a5 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -20,6 +20,7 @@ import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import TicketDescriptorMenu from './TicketDescriptorMenu.vue';
+import VnToSummary from 'src/components/ui/VnToSummary.vue';
 
 const route = useRoute();
 const { notify } = useNotify();
@@ -105,14 +106,12 @@ function isOnTicketCard() {
         data-key="TicketSummary"
     >
         <template #header-left>
-            <router-link
+            <VnToSummary
                 v-if="route?.name !== 'TicketSummary'"
-                :to="{ name: 'TicketSummary', params: { id: entityId } }"
-                class="header link"
-                :href="entryUrl"
-            >
-                <QIcon name="open_in_new" color="white" size="sm" />
-            </router-link>
+                :route-name="'TicketSummary'"
+                :entity-id="entityId"
+                :url="ticketUrl"
+            />
         </template>
         <template #header="{ entity }">
             <div>
@@ -150,13 +149,7 @@ function isOnTicketCard() {
                     color="white"
                 >
                     <QMenu>
-                        <QList>
-                            <QItem>
-                                <QItemSection>
-                                    <TicketDescriptorMenu :ticket="entityId" />
-                                </QItemSection>
-                            </QItem>
-                        </QList>
+                        <TicketDescriptorMenu :ticket="entityId" />
                     </QMenu>
                 </QBtn>
             </div>