feat: refs #8197 create advancedMenu and add in VnSection

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>

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

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>

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']"

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>
+    <RightAdvancedMenu :is-main-section="isMainSection">
-        <template #right-panel v-if="$slots['rightMenu'] || rightFilter">
+        <template #advanced-menu v-if="$slots[advancedMenuSlot] || rightFilter">
-            <slot name="rightMenu">
+            <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>

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

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

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,