fix: refs #8197 use rightMenu

src/pages/Claim/Card/ClaimAction.vue

@@ -4,7 +4,6 @@ import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
-import { useStateStore } from 'src/stores/useStateStore';
 import { toDate, toPercentage, toCurrency } from 'filters/index';
 import { tMobile } from 'src/composables/tMobile';
 import CrudModel from 'src/components/CrudModel.vue';
@@ -13,11 +12,11 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import { useArrayData } from 'composables/useArrayData';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
-const stateStore = computed(() => useStateStore());
 const claim = ref(null);
 const claimRef = ref();
 const claimId = route.params.id;
@@ -201,7 +200,8 @@ async function post(query, params) {
         auto-load
         @on-fetch="(data) => (destinationTypes = data)"
     />
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted() && claim">
+    <RightMenu v-if="claim">
+        <template #right-panel>
             <QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
                 {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
             </QCard>
@@ -238,7 +238,10 @@ async function post(query, params) {
             <QCard class="q-mb-md q-pa-sm no-box-shadow" style="position: static">
                 <QInput
                     :disable="
-                    !(claim.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2)
+                        !(
+                            claim.responsibility >=
+                            Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2
+                        )
                     "
                     :label="t('confirmGreuges')"
                     class="q-field__native text-grey-2"
@@ -251,8 +254,8 @@ async function post(query, params) {
                     v-model="multiplicatorValue"
                 />
             </QCard>
-    </Teleport>
+        </template>
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
+    </RightMenu>
     <CrudModel
         v-if="claim"
         data-key="ClaimEnds"

src/pages/Claim/ClaimList.vue

@@ -134,7 +134,7 @@ const STATE_COLOR = {
             order: ['cs.priority ASC', 'created ASC'],
         }"
     >
-        <template #rightMenu>
+        <template #advanced-menu>
             <ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
         </template>
         <template #body>

src/pages/Order/Card/OrderCatalog.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute, useRouter } from 'vue-router';
-import { onMounted, ref, computed, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';

src/pages/Order/Card/OrderLines.vue

@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
-import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 import { confirm } from 'src/pages/Order/composables/confirmOrder';
 import { toCurrency, toDate } from 'src/filters';
@@ -16,9 +15,9 @@ import VnImg from 'src/components/ui/VnImg.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import FetchedTags from 'src/components/ui/FetchedTags.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const router = useRouter();
-const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -265,7 +264,8 @@ watch(
         @on-fetch="(data) => (orderSummary.vat = data)"
         auto-load
     />
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
+        <template #right-panel>
             <QCard
                 class="order-lines-summary q-pa-lg"
                 v-if="orderSummary.vat && orderSummary.total"
@@ -278,10 +278,13 @@ watch(
                     :value="toCurrency(orderSummary.total - orderSummary.vat)"
                 />
                 <VnLv :label="t('VAT') + ': '" :value="toCurrency(orderSummary?.vat)" />
-            <VnLv :label="t('total') + ': '" :value="toCurrency(orderSummary?.total)" />
+                <VnLv
+                    :label="t('total') + ': '"
+                    :value="toCurrency(orderSummary?.total)"
+                />
             </QCard>
-    </Teleport>
+        </template>
-
+    </RightMenu>
     <VnTable
         ref="tableLinesRef"
         data-key="OrderLines"

src/pages/Order/OrderList.vue

@@ -190,7 +190,7 @@ const getDateColor = (date) => {
             order: ['landed DESC', 'clientFk ASC', 'id DESC'],
         }"
     >
-        <template #rightMenu>
+        <template #advanced-menu>
             <OrderFilter data-key="OrderList" />
         </template>
         <template #body>

src/pages/Ticket/Card/TicketBoxing.vue

@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { date, useQuasar } from 'quasar';
-import { useStateStore } from 'src/stores/useStateStore';
+import RightMenu from 'src/components/common/RightMenu.vue';
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -9,9 +9,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 const { t } = useI18n();
 const quasar = useQuasar();
-const stateStore = useStateStore();
 onMounted(async () => {
-    stateStore.rightDrawer = true;
     await fetch();
 });
 
@@ -86,7 +84,8 @@ async function getVideoList(expeditionId, timed) {
 </script>
 
 <template>
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
+        <template #right-panel>
             <QList bordered separator style="max-width: 318px">
                 <QItem v-if="lastExpedition && videoList.length">
                     <QItemSection>
@@ -139,7 +138,9 @@ async function getVideoList(expeditionId, timed) {
                     <QItemSection>
                         <QItemLabel caption>{{ t('globals.created') }}</QItemLabel>
                         <QItemLabel>
-                        {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
+                            {{
+                                date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss')
+                            }}
                         </QItemLabel>
                         <QItemLabel caption>{{ t('globals.item') }}</QItemLabel>
                         <QItemLabel>{{ expedition.packagingItemFk }}</QItemLabel>
@@ -148,7 +149,8 @@ async function getVideoList(expeditionId, timed) {
                     </QItemSection>
                 </QItem>
             </QList>
-    </Teleport>
+        </template>
+    </RightMenu>
     <QCard>
         <QCarousel animated v-model="slide" height="max-content">
             <QCarouselSlide

src/pages/Ticket/Card/TicketComponents.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, watch, nextTick } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -9,15 +9,14 @@ import FetchData from 'components/FetchData.vue';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 
-import { useStateStore } from 'stores/useStateStore';
 import { dashIfEmpty } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import { toCurrency } from 'filters/index';
 import axios from 'axios';
 import VnTable from 'src/components/VnTable/VnTable.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const route = useRoute();
-const stateStore = useStateStore();
 const { t } = useI18n();
 const salesRef = ref(null);
 const arrayData = useArrayData('ticketData');
@@ -164,10 +163,6 @@ const getTicketVolume = async () => {
     const { data } = await axios.get(`Tickets/${ticketData.value.id}/getVolume`);
     ticketVolume.value = data[0].volume;
 };
-
-onMounted(() => {
-    stateStore.rightDrawer = true;
-});
 </script>
 
 <template>
@@ -178,8 +173,14 @@ onMounted(() => {
         @on-fetch="(data) => (components = data)"
         auto-load
     />
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
-        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
+        <template #right-panel>
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
                         {{ t('basicData.total') }}
@@ -198,7 +199,12 @@ onMounted(() => {
                     <span>{{ toCurrency(getTotal) }}</span>
                 </QCardSection>
             </QCard>
-        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
                         {{ t('ticketComponents.components') }}
@@ -217,14 +223,21 @@ onMounted(() => {
                     }}</span>
                 </QCardSection>
             </QCard>
-        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
                         {{ t('ticketComponents.zoneBreakdown') }}
                     </span>
                 </QCardSection>
                 <QCardSection horizontal>
-                <span class="q-mr-xs color-vn-label"> {{ t('basicData.price') }}: </span>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('basicData.price') }}:
+                    </span>
                     <span>{{ toCurrency(ticketData?.zonePrice, 'EUR', 2) }}</span>
                 </QCardSection>
                 <QCardSection horizontal>
@@ -234,14 +247,18 @@ onMounted(() => {
                     <span>{{ toCurrency(ticketData?.zoneBonus, 'EUR', 2) }}</span>
                 </QCardSection>
                 <QCardSection horizontal>
-                <span class="q-mr-xs color-vn-label"> {{ t('ticketList.zone') }}: </span>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('ticketList.zone') }}:
+                    </span>
                     <span class="link">
                         {{ dashIfEmpty(ticketData?.zone?.name) }}
                         <ZoneDescriptorProxy :id="ticketData?.zone?.id" />
                     </span>
                 </QCardSection>
                 <QCardSection v-if="ticketData?.zone?.isVolumetric" horizontal>
-                <span class="q-mr-xs color-vn-label"> {{ t('volume.volume') }}: </span>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('volume.volume') }}:
+                    </span>
                     <span>{{ ticketVolume }}</span>
                 </QCardSection>
                 <QCardSection horizontal>
@@ -251,7 +268,12 @@ onMounted(() => {
                     <span>{{ dashIfEmpty(ticketData?.packages) }}</span>
                 </QCardSection>
             </QCard>
-        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
                         {{ t('ticketComponents.theoricalCost') }}
@@ -264,7 +286,8 @@ onMounted(() => {
                     <span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
                 </QCardSection>
             </QCard>
-    </Teleport>
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
         data-key="TicketComponents"

src/pages/Ticket/TicketList.vue

@@ -465,7 +465,7 @@ function setReference(data) {
             exprBuilder,
         }"
     >
-        <template #rightMenu>
+        <template #advanced-menu>
             <TicketFilter data-key="TicketList" />
         </template>
         <template #body>

src/pages/Worker/Card/WorkerCalendar.vue

@@ -1,18 +1,16 @@
 <script setup>
 import { nextTick, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import WorkerCalendarFilter from 'pages/Worker/Card/WorkerCalendarFilter.vue';
 import FetchData from 'components/FetchData.vue';
 import WorkerCalendarItem from 'pages/Worker/Card/WorkerCalendarItem.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
-import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 
-import { useRouter } from 'vue-router';
 const router = useRouter();
-const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
 const workerIsFreelance = ref();
@@ -171,7 +169,8 @@ watch([year, businessFk], () => refreshData());
         ref="WorkerFreelanceRef"
         auto-load
     />
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
+        <template #right-panel>
             <WorkerCalendarFilter
                 ref="workerCalendarFilterRef"
                 v-model:business-fk="businessFk"
@@ -180,7 +179,8 @@ watch([year, businessFk], () => refreshData());
                 :contract-holidays="contractHolidays"
                 :year-holidays="yearHolidays"
             />
-    </Teleport>
+        </template>
+    </RightMenu>
     <QPage class="column items-center">
         <QCard v-if="workerIsFreelance">
             <QCardSection class="text-center">

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -10,6 +10,7 @@ import WorkerTimeForm from 'pages/Worker/Card/WorkerTimeForm.vue';
 import WorkerTimeReasonForm from 'pages/Worker/Card/WorkerTimeReasonForm.vue';
 import WorkerDateLabel from './WorkerDateLabel.vue';
 import WorkerTimeControlCalendar from 'pages/Worker/Card/WorkerTimeControlCalendar.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
@@ -482,7 +483,8 @@ onMounted(async () => {
             </QBtnGroup>
         </div>
     </Teleport>
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
+        <template #right-panel>
             <div class="q-pa-md q-mb-md" style="border: 2px solid #222">
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
@@ -508,7 +510,8 @@ onMounted(async () => {
                 @click-date="onInputChange"
                 @on-moved="getMailStates"
             />
-    </Teleport>
+        </template>
+    </RightMenu>
     <QPage class="column items-center">
         <QTable :columns="columns" :rows="['']" hide-bottom class="full-width">
             <template #header="props">

src/pages/Worker/WorkerList.vue

@@ -195,7 +195,7 @@ async function autofillBic(worker) {
             order: ['id DESC'],
         }"
     >
-        <template #rightMenu>
+        <template #advanced-menu>
             <WorkerFilter data-key="WorkerList" />
         </template>
         <template #body>

src/router/modules/ticket.js

@@ -168,7 +168,7 @@ const ticketCard = {
             name: 'TicketBoxing',
             meta: {
                 title: 'boxing',
-                icon: 'science',
+                icon: 'view_in_ar',
             },
             component: () => import('src/pages/Ticket/Card/TicketBoxing.vue'),
         },