feat: Add Shortcut to create Space from sidebar - MEED-7805 - Meeds-i…

…o/MIPs#159 (#4210)

Add button from Spaces List drawer to access Space Form Drawer.

webapp/src/main/resources/locale/portal/HamburgerMenu_en.properties

@@ -39,3 +39,5 @@ menu.spaces.noUnreadSpaces=No unread activities here
 menu.spaces.noFavoriteSpaces1=You haven't marked any space as a favorite
 menu.spaces.noFavoriteSpaces2=Go to the {0}Spaces{1} page to do so
 menu.spaces.openSidebarTooltip=Open Sites page links
+menu.spaces.addNewSpaceTooltip=Filter by space
+menu.spaces.filterBySpaceTooltip=Filter by space

webapp/src/main/webapp/WEB-INF/gatein-resources.xml

@@ -1119,6 +1119,9 @@
       <depends>
         <module>extensionRegistry</module>
       </depends>
+      <depends>
+        <module>spaceForm</module>
+      </depends>
     </module>
   </portlet>
 
@@ -1589,6 +1592,9 @@
       <depends>
         <module>extensionRegistry</module>
       </depends>
+      <depends>
+        <module>spaceForm</module>
+      </depends>
     </module>
   </portlet>
 
@@ -2009,6 +2015,9 @@
       <depends>
         <module>extensionRegistry</module>
       </depends>
+      <depends>
+        <module>spaceForm</module>
+      </depends>
     </module>
   </portlet>
 
@@ -2192,6 +2201,32 @@
     </depends>
   </module>
 
+  <module>
+    <name>spaceForm</name>
+    <script>
+      <minify>false</minify>
+      <path>/js/spaceForm.bundle.js</path>
+    </script>
+    <depends>
+      <module>commonVueComponents</module>
+    </depends>
+    <depends>
+      <module>vue</module>
+    </depends>
+    <depends>
+      <module>vuetify</module>
+    </depends>
+    <depends>
+      <module>eXoVueI18n</module>
+    </depends>
+    <depends>
+      <module>extensionRegistry</module>
+    </depends>
+    <depends>
+      <module>imageCropper</module>
+    </depends>
+  </module>
+
   <module>
     <name>peopleListComponents</name>
     <script>

webapp/src/main/webapp/vue-apps/hamburger-menu/components/space/SpacesHamburgerNavigation.vue

@@ -42,8 +42,17 @@
               required
               autofocus />
           </v-list-item-content>
-          <v-list-item-action v-if="selectedFilterIndex !== 2" class="ms-auto my-auto">
+          <v-list-item-action v-if="selectedFilterIndex !== 2" class="d-flex flex-row ms-auto my-auto">
             <v-btn
+              v-show="!showFilter"
+              :title="$t('menu.spaces.addNewSpaceTooltip')"
+              class="me-2"
+              icon
+              @click="addNewSpace">
+              <v-icon size="20">fa-plus</v-icon>
+            </v-btn>
+            <v-btn
+              :title="$t('menu.spaces.filterBySpaceTooltip')"
               icon
               @click="showFilter = !showFilter">
               <v-icon size="20">{{ showFilter && 'fa-times' || 'fa-filter' }}</v-icon>
@@ -170,6 +179,9 @@ export default {
       this.showFilter = true;
       this.leftNavigationActionEvent('filterBySpaces');
     },
+    addNewSpace() {
+      window.require(['SHARED/spaceForm'], drawer => drawer.open(this.$root.openedSpaceTemplateId));
+    },
   }
 };
 </script>

webapp/src/main/webapp/vue-apps/space-form/components/SpaceFormDrawer.vue

@@ -146,6 +146,9 @@
             </v-stepper-step>
             <v-stepper-content :step="invitationStep" class="pa-0 ma-0 no-border">
               <space-form-invitation
+                :class="{
+                  'mt-n3' : singleStep && !$root.isExternalFeatureEnabled,
+                }"
                 @invited-members="space.invitedMembers = $event"
                 @invited-email="space.externalInvitedUsers = $event" />
             </v-stepper-content>
@@ -349,6 +352,7 @@ export default {
     }
   },
   created() {
+    window.spaceFormAdded = true;
     const search = window.location.search && window.location.search.substring(1);
     if (search) {
       const parameters = JSON.parse(
@@ -364,11 +368,18 @@ export default {
         });
       }
     }
-  },
-  mounted() {
+
     this.$root.$on('addNewSpace', this.open);
+    document.addEventListener('addNewSpace', this.openByEvent);
+  },
+  beforeDestroy() {
+    this.$root.$off('addNewSpace', this.open);
+    document.removeEventListener('addNewSpace', this.openByEvent);
   },
   methods: {
+    openByEvent(e) {
+      this.open(e?.detail);
+    },
     async open(templateId) {
       this.templateId = templateId && Number(templateId);
       this.noGoBack = !!templateId;

webapp/src/main/webapp/vue-apps/space-form/components/SpaceFormInviteUsersDrawer.vue

@@ -32,6 +32,7 @@
     <template v-if="drawer" #content>
       <space-form-invite-users-input
         :value="invitedMembers"
+        class="pa-5"
         @input="invitedMembers = $event" />
     </template>
     <template #footer>

webapp/src/main/webapp/vue-apps/space-form/components/SpaceFormInviteUsersInput.vue

@@ -30,7 +30,7 @@
       :items="users"
       name="inviteMembers"
       type-of-relations="user_to_invite"
-      class="ma-4"
+      class="mb-4"
       include-users
       include-spaces />
     <v-list

webapp/src/main/webapp/vue-apps/space-form/main.js

@@ -0,0 +1,67 @@
+/*
+ * 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.
+ */
+import './initComponents.js';
+import './services.js';
+
+// get overridden components if exists
+if (extensionRegistry) {
+  const components = extensionRegistry.loadComponents('SpaceTemplatesManagement');
+  if (components && components.length > 0) {
+    components.forEach(cmp => {
+      Vue.component(cmp.componentName, cmp.componentOptions);
+    });
+  }
+}
+
+const appId = 'spaceFormDrawer';
+const lang = eXo?.env.portal.language || 'en';
+const url = `/social/i18n/locale.portlet.social.SpacesListApplication?lang=${lang}`;
+
+export function open(templateId, isExternalFeatureEnabled) {
+  if (window.spaceFormAdded) {
+    document.dispatchEvent(new CustomEvent('addNewSpace', {detail: templateId}));
+  } else {
+    const spaceFormElement = document.createElement('div');
+    spaceFormElement.setAttribute('id', appId);
+    document.querySelector('#vuetify-apps').append(spaceFormElement);
+    return exoi18n.loadLanguageAsync(lang, url)
+      .then(i18n =>
+        Vue.createApp({
+          data: {
+            isExternalFeatureEnabled,
+            collator: new Intl.Collator(eXo.env.portal.language, {
+              numeric: true,
+              sensitivity: 'base'
+            }),
+          },
+          computed: {
+            isMobile() {
+              return this.$vuetify.breakpoint.mobile;
+            },
+          },
+          mounted() {
+            this.$root.$emit('addNewSpace', templateId);
+          },
+          template: '<space-form-drawer />',
+          vuetify: Vue.prototype.vuetifyOptions,
+          i18n,
+        }, spaceFormElement, 'Space Form')
+      );
+  }
+}

webapp/src/main/webapp/vue-apps/space-form/services.js

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+import * as spaceTemplateService from '../space-templates-management/js/SpaceTemplateService.js';
+
+if (!Vue.prototype.$spaceTemplateService) {
+  window.Object.defineProperty(Vue.prototype, '$spaceTemplateService', {
+    value: spaceTemplateService,
+  });
+}

webapp/src/main/webapp/vue-apps/space-templates-management/main.js

@@ -17,7 +17,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import '../space-form/initComponents.js';
 import './initComponents.js';
 import './extensions.js';
 import './services.js';

webapp/src/main/webapp/vue-apps/spaces-administration/main.js

@@ -17,7 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import '../space-form/initComponents.js';
 import './initComponents.js';
 import './extensions.js';
 import './services.js';

webapp/src/main/webapp/vue-apps/spaces-list/initComponents.js

@@ -16,8 +16,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import '../space-form/initComponents.js';
-
 import SpacesList from './components/SpacesList.vue';
 import SpacesToolbar from './components/SpacesToolbar.vue';
 import SpacesCardList from './components/SpacesCardList.vue';

webapp/webpack.common.js

@@ -61,6 +61,7 @@ let config = {
     spaceMembers: './src/main/webapp/vue-apps/space-members/main.js',
     spaceSettings: './src/main/webapp/vue-apps/space-settings/main.js',
     spaceInvitation: './src/main/webapp/vue-apps/space-invitation/main.js',
+    spaceForm: './src/main/webapp/vue-apps/space-form/main.js',
     idmUsersManagement: './src/main/webapp/vue-apps/idm-users-management/main.js',
     idmGroupsManagement: './src/main/webapp/vue-apps/idm-groups-management/main.js',
     idmMembershipTypesManagement: './src/main/webapp/vue-apps/idm-membership-types-management/main.js',