From 83fb97ad9b779e34022ffde3fff17e279bf8c260 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 20 Jan 2025 09:51:59 +0100
Subject: [PATCH] feat: refs #8197 create advancedMenu and add in VnSection

---
 src/components/NavBar.vue                   |  1 +
 src/components/VnTable/VnTable.vue          |  6 ++-
 src/components/common/RightAdvancedMenu.vue | 53 +++++++++++++++++++++
 src/components/common/RightMenu.vue         |  2 +-
 src/components/common/VnSection.vue         | 13 ++---
 src/i18n/locale/en.yml                      |  3 +-
 src/i18n/locale/es.yml                      |  1 +
 src/stores/useStateStore.js                 |  7 +++
 8 files changed, 77 insertions(+), 9 deletions(-)
 create mode 100644 src/components/common/RightAdvancedMenu.vue

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index ef5bdc6ac83..040dde6282d 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -61,6 +61,7 @@ onMounted(() => stateStore.setMounted());
             />
             <QSpace />
             <div id="searchbar" class="searchbar"></div>
+            <div id="searchbar-after"></div>
             <QSpace />
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="actions-prepend"></div>
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 07992f616a2..a71498206b8 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -314,7 +314,11 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
         show-if-above
     >
         <QScrollArea class="fit">
-            <VnTableFilter :data-key="$attrs['data-key']" :columns="columns" :redirect="redirect" />
+            <VnTableFilter
+                :data-key="$attrs['data-key']"
+                :columns="columns"
+                :redirect="redirect"
+            />
         </QScrollArea>
     </QDrawer>
     <CrudModel
diff --git a/src/components/common/RightAdvancedMenu.vue b/src/components/common/RightAdvancedMenu.vue
new file mode 100644
index 00000000000..f5797a16438
--- /dev/null
+++ b/src/components/common/RightAdvancedMenu.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import { useHasContent } from 'src/composables/useHasContent';
+import { watch } from 'vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+const hasContent = useHasContent('#advanced-menu');
+
+const $props = defineProps({
+    isMainSection: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+watch(
+    () => $props.isMainSection,
+    (val) => {
+        if (stateStore) stateStore.rightAdvancedDrawer = val;
+    },
+    { immediate: true }
+);
+</script>
+<template>
+    <Teleport to="#searchbar-after" v-if="stateStore.isHeaderMounted()">
+        <QBtn
+            v-if="hasContent || $slots['advanced-menu']"
+            flat
+            @click="stateStore.toggleRightAdvancedDrawer()"
+            round
+            dense
+            icon="tune"
+        >
+            <QTooltip bottom anchor="bottom right">
+                {{ t('globals.advancedMenu') }}
+            </QTooltip>
+        </QBtn>
+    </Teleport>
+    <QDrawer
+        v-model="stateStore.rightAdvancedDrawer"
+        side="right"
+        :width="256"
+        :overlay="!isMainSection"
+        v-bind="$attrs"
+    >
+        <QScrollArea class="fit">
+            <div id="advanced-menu"></div>
+            <slot v-if="!hasContent" name="advanced-menu" />
+        </QScrollArea>
+    </QDrawer>
+</template>
diff --git a/src/components/common/RightMenu.vue b/src/components/common/RightMenu.vue
index 9512d32d419..1eded089e21 100644
--- a/src/components/common/RightMenu.vue
+++ b/src/components/common/RightMenu.vue
@@ -17,7 +17,7 @@ onMounted(() => {
 });
 </script>
 <template>
-    <Teleport to="#actions-append" v-if="stateStore.isHeaderMounted()">
+    <Teleport to="#actions-prepend" v-if="stateStore.isHeaderMounted()">
         <div class="row q-gutter-x-sm">
             <QBtn
                 v-if="hasContent || $slots['right-panel']"
diff --git a/src/components/common/VnSection.vue b/src/components/common/VnSection.vue
index 510865530ed..3281b998b73 100644
--- a/src/components/common/VnSection.vue
+++ b/src/components/common/VnSection.vue
@@ -1,8 +1,8 @@
 <script setup>
-import RightMenu from './RightMenu.vue';
+import RightAdvancedMenu from './RightAdvancedMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnTableFilter from '../VnTable/VnTableFilter.vue';
-import { onBeforeMount, computed, ref } from 'vue';
+import { onBeforeMount, computed } from 'vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useRoute } from 'vue-router';
 import { useHasContent } from 'src/composables/useHasContent';
@@ -57,6 +57,7 @@ const isMainSection = computed(() => {
     return isSame;
 });
 const searchbarId = 'section-searchbar';
+const advancedMenuSlot = 'advanced-menu';
 const hasContent = useHasContent(`#${searchbarId}`);
 
 onBeforeMount(() => {
@@ -80,9 +81,9 @@ onBeforeMount(() => {
         />
         <div :id="searchbarId"></div>
     </slot>
-    <RightMenu>
-        <template #right-panel v-if="$slots['rightMenu'] || rightFilter">
-            <slot name="rightMenu">
+    <RightAdvancedMenu :is-main-section="isMainSection">
+        <template #advanced-menu v-if="$slots[advancedMenuSlot] || rightFilter">
+            <slot :name="advancedMenuSlot">
                 <VnTableFilter
                     v-if="rightFilter && columns"
                     :data-key="dataKey"
@@ -91,7 +92,7 @@ onBeforeMount(() => {
                 />
             </slot>
         </template>
-    </RightMenu>
+    </RightAdvancedMenu>
     <slot name="body" v-if="isMainSection" />
     <RouterView v-else />
 </template>
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index e1ec621755e..862336a03ad 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -7,7 +7,8 @@ globals:
     entity: Entity
     user: User
     details: Details
-    collapseMenu: Collapse left menu
+    collapseMenu: Collapse lateral menu
+    advancedMenu: Advanced menu
     backToDashboard: Return to dashboard
     notifications: Notifications
     userPanel: User panel
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 4b4f6f552d6..3dfec7dd66e 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -8,6 +8,7 @@ globals:
     user: Usuario
     details: Detalles
     collapseMenu: Contraer menú lateral
+    advancedMenu: Menú avanzado
     backToDashboard: Volver al tablón
     notifications: Notificaciones
     userPanel: Panel de usuario
diff --git a/src/stores/useStateStore.js b/src/stores/useStateStore.js
index 686e76c77b3..e48b6727921 100644
--- a/src/stores/useStateStore.js
+++ b/src/stores/useStateStore.js
@@ -5,6 +5,7 @@ export const useStateStore = defineStore('stateStore', () => {
     const isMounted = ref(false);
     const leftDrawer = ref(false);
     const rightDrawer = ref(false);
+    const rightAdvancedDrawer = ref(false);
     const subToolbar = ref(false);
 
     function toggleLeftDrawer() {
@@ -15,6 +16,10 @@ export const useStateStore = defineStore('stateStore', () => {
         rightDrawer.value = !rightDrawer.value;
     }
 
+    function toggleRightAdvancedDrawer() {
+        rightAdvancedDrawer.value = !rightAdvancedDrawer.value;
+    }
+
     function rightDrawerChangeValue(value) {
         rightDrawer.value = value;
     }
@@ -46,10 +51,12 @@ export const useStateStore = defineStore('stateStore', () => {
     return {
         leftDrawer,
         rightDrawer,
+        rightAdvancedDrawer,
         setMounted,
         isHeaderMounted,
         toggleLeftDrawer,
         toggleRightDrawer,
+        toggleRightAdvancedDrawer,
         isLeftDrawerShown,
         isRightDrawerShown,
         isSubToolbarShown,