feat: Add Space Template Main Extension to open navigation drawer onc…

…e template created - MEED-7671 - Meeds-io/MIPs#165 (#242) This change will allow to open Space Template Layout Navigation Drawer once the Space template is created.
Meeds-io · Oct 31, 2024 · 124a9b0 · 124a9b0
1 parent 849b95a
commit 124a9b0
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 11 deletions.
diff --git a/layout-webapp/src/main/resources/locale/portlet/SiteNavigation_en.properties b/layout-webapp/src/main/resources/locale/portlet/SiteNavigation_en.properties
@@ -19,6 +19,7 @@ siteNavigation.label.groupSuggester.noData=No data
 siteNavigation.label.view.everyone=Everyone
 siteNavigation.label.view.designedGroup=Group members
 siteNavigation.label.btn.save=Save
+siteNavigation.label.btn.close=Close
 siteNavigation.label.btn.next=Next
 siteNavigation.label.btn.cancel=Cancel
 siteNavigation.label.moveUp=Move up

diff --git a/...bapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationDrawer.vue b/...bapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationDrawer.vue
@@ -19,7 +19,8 @@
 <template>
   <exo-drawer
     id="siteNavigationDrawer"
-    ref="siteNavigationDrawer"
+    ref="drawer"
+    v-model="drawer"
     :right="!$vuetify.rtl"
     eager
     allow-expand
@@ -28,7 +29,16 @@
       <span>{{ $t('siteNavigation.drawer.title') }}</span>
     </template>
     <template slot="content">
-      <div :class="$refs.siteNavigationDrawer?.expand ? 'singlePageApplication' : ' ' ">
+      <div :class="$refs.drawer?.expand ? 'singlePageApplication' : ' ' ">
+        <v-alert
+          v-if="information"
+          class="mx-4 mt-4 mb-0"
+          type="info"
+          outlined>
+          <div class="text-color">
+            <span v-sanitized-html="$t(information)"></span>
+          </div>
+        </v-alert>
         <v-toolbar
           color="white"
           flat
@@ -38,18 +48,18 @@
             class="font-weight-bold text-truncate">
             {{ label }}
           </span>
-          <v-spacer v-if="!$refs.siteNavigationDrawer?.expand" />
+          <v-spacer v-if="!$refs.drawer?.expand" />
           <v-btn
             v-if="isMetaSite"
             @click="createNode"
             class="btn btn-primary ms-2">
             {{ $t('siteNavigation.label.btn.createNode') }}
           </v-btn>
-          <v-spacer v-if="$refs.siteNavigationDrawer?.expand" />
+          <v-spacer v-if="$refs.drawer?.expand" />
           <select
             id="siteNavigationDrawerFilterSelect"
             v-model="filter"
-            v-if="$refs.siteNavigationDrawer?.expand"
+            v-if="$refs.drawer?.expand"
             class="ignore-vuetify-classes width-auto pa-0 me-5 mb-0">
             <option
               v-for="item in navigationsFilter"
@@ -61,11 +71,20 @@
         </v-toolbar>
         <site-navigation-nodes-list
           :navigation-nodes="navigationNodesToDisplay"
-          :expanded="$refs.siteNavigationDrawer && $refs.siteNavigationDrawer?.expand"
+          :expanded="$refs.drawer?.expand"
           :loading="loading"
           :hide-children="hideChildren" />
       </div>
     </template>
+    <template v-if="displayCloseFooter" #footer>
+      <div class="d-flex justify-end">
+        <v-btn
+          class="btn"
+          @click="drawer = false">
+          {{ $t('siteNavigation.label.btn.close') }}
+        </v-btn>
+      </div>
+    </template>
   </exo-drawer>
 </template>
 <script>
@@ -74,10 +93,12 @@ export default {
     return {
       navigationNodes: [],
       navigationNodesToDisplay: [],
-      siteName: null,
+      displayCloseFooter: false,
+      drawer: false,
       siteType: null,
       siteId: null,
       siteLabel: null,
+      information: null,
       includeGlobal: false,
       loading: false,
       filter: 'ALL',
@@ -127,9 +148,11 @@ export default {
       this.siteType = event?.siteType || eXo.env.portal.siteKeyType;
       this.siteLabel = event?.siteLabel;
       this.siteId = event?.siteId || eXo.env.portal.siteId;
+      this.information = event?.information;
       this.includeGlobal = event?.includeGlobal || false;
+      this.displayCloseFooter = event?.displayCloseFooter || false;
       this.getNavigationNodes();
-      this.$refs.siteNavigationDrawer.open();
+      this.$refs.drawer.open();
       this.$nextTick().then(() =>  this.$root.$emit('site-navigation-drawer-opened'));
     },
     close() {
@@ -140,7 +163,7 @@ export default {
       this.navigationNodes = [];
       this.navigationNodesToDisplay = [];
       this.$root.$emit('site-navigation-hide-nodes-tree');
-      this.$refs.siteNavigationDrawer.close();
+      this.$refs.drawer.close();
     },
     getNavigationNodes() {
       this.loading = true;

diff --git a/...webapp/src/main/webapp/vue-app/site-navigation/components/SpaceTemplateCreateListener.vue b/...webapp/src/main/webapp/vue-app/site-navigation/components/SpaceTemplateCreateListener.vue
@@ -0,0 +1,50 @@
+<!--
+
+  This file is part of the Meeds project (https://meeds.io/).
+
+  Copyright (C) 2020 - 2024 Meeds Association [email protected]
+
+  This program is free software; you can redistribute it and/or
+  modify it under the terms of the GNU Lesser General Public
+  License as published by the Free Software Foundation; either
+  version 3 of the License, or (at your option) any later version.
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+  Lesser General Public License for more details.
+
+  You should have received a copy of the GNU Lesser General Public License
+  along with this program; if not, write to the Free Software Foundation,
+  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+-->
+<script>
+export default {
+  created() {
+    this.$root.$on('space-templates-created', this.openSiteNavigationDrawer);
+  },
+  beforeDestroy() {
+    this.$root.$off('space-templates-created', this.openSiteNavigationDrawer);
+  },
+  methods: {
+    async openSiteNavigationDrawer(spaceTemplate) {
+      try {
+        const site = await this.$siteService.getSite('group_template', spaceTemplate?.layout, {
+          expandNavigations: false,
+        });
+        document.dispatchEvent(new CustomEvent('open-site-navigation-drawer',{detail: {
+          siteName: site.name,
+          siteType: site.siteType,
+          siteId: site.siteId,
+          siteLabel: spaceTemplate?.name,
+          information: 'spaceTemplate.label.editNavigation.information',
+          displayCloseFooter: true,
+          includeGlobal: false,
+        }}));
+      } finally {
+        this.$emit('loading', false);
+      }
+    },
+  },
+};
+</script>
diff --git a/...c/main/webapp/vue-app/site-navigation/components/SpaceTemplateEditLayoutSpaceMenuItem.vue b/...c/main/webapp/vue-app/site-navigation/components/SpaceTemplateEditLayoutSpaceMenuItem.vue
@@ -19,7 +19,10 @@
 
 -->
 <template>
-  <v-tooltip v-if="spaceTemplate.layout" :disabled="!spaceTemplate.system" bottom>
+  <v-tooltip
+    v-if="spaceTemplate.layout"
+    :disabled="!spaceTemplate.system"
+    bottom>
     <template #activator="{ on, attrs }">
       <div
         v-on="on"
@@ -34,7 +37,7 @@
             fa-columns
           </v-icon>
           <v-list-item-title class="ps-2">
-            <span :class="spaceTemplate.system && 'disabled--text'">{{ $t('spaceTemplate.label.editLayout') }}</span>
+            <span :class="spaceTemplate.system && 'disabled--text'">{{ $t('spaceTemplate.label.editNavigation') }}</span>
           </v-list-item-title>
         </v-list-item>
       </div>

diff --git a/layout-webapp/src/main/webapp/vue-app/site-navigation/initComponents.js b/layout-webapp/src/main/webapp/vue-app/site-navigation/initComponents.js
@@ -21,12 +21,14 @@ import SiteNavigation from './components/SiteNavigation.vue';
 import SiteNavigationButton from './components/SiteNavigationButton.vue';
 import SiteNavigationDrawersActions from './components/SiteNavigationDrawersActions.vue';
 import SpaceTemplateEditLayoutSpaceMenuItem from './components/SpaceTemplateEditLayoutSpaceMenuItem.vue';
+import SpaceTemplateCreateListener from './components/SpaceTemplateCreateListener.vue';
 
 const components = {
   'site-navigation': SiteNavigation,
   'site-navigation-button': SiteNavigationButton,
   'site-navigation-drawers-actions': SiteNavigationDrawersActions,
   'site-navigation-space-template-manage-layout': SpaceTemplateEditLayoutSpaceMenuItem,
+  'site-navigation-space-template-create-listener': SpaceTemplateCreateListener,
 };
 
 for (const key in components) {

diff --git a/layout-webapp/src/main/webapp/vue-app/site-navigation/main.js b/layout-webapp/src/main/webapp/vue-app/site-navigation/main.js
@@ -55,6 +55,12 @@ extensionRegistry.registerExtension('space-templates', 'space-templates-item-act
   componentName: 'site-navigation-space-template-manage-layout',
 });
 
+extensionRegistry.registerExtension('space-templates', 'space-templates-main', {
+  rank: 10,
+  name: 'manage-layout',
+  componentName: 'site-navigation-space-template-create-listener',
+});
+
 const appId = 'siteNavigation';
 
 //getting language of the PLF