feat: Allow to filter by Space template in Spaces Administration - ME…

…ED-7731 - Meeds-io/MIPs#160 (#4165)
Meeds-io · Nov 6, 2024 · f94d564 · f94d564
1 parent 98df393
commit f94d564
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 10 deletions.
diff --git a/webapp/src/main/resources/locale/portlet/social/SpacesAdministrationPortlet_en.properties b/webapp/src/main/resources/locale/portlet/social/SpacesAdministrationPortlet_en.properties
@@ -123,3 +123,4 @@ social.spaces.administration.manageSpaces.noTemplate=No template
 social.spaces.administration.manageSpaces.admins.drawerTitle=Admins of {0}
 social.spaces.administration.manageSpaces.bindingStatus.tooltip={0} sync members
 social.spaces.administration.manageSpaces.noBindingStatus.tooltip=No group sync
+social.spaces.administration.manageSpaces.spaceTemplates.all=All
diff --git a/webapp/src/main/webapp/vue-apps/spaces-administration/components/SpacesAdministration.vue b/webapp/src/main/webapp/vue-apps/spaces-administration/components/SpacesAdministration.vue
@@ -23,14 +23,16 @@
   <v-app>
     <v-main class="application-body">
       <spaces-administration-toolbar
-        compact-display
+        :selected-template-id="selectedTemplateId"
         @keyword-changed="keyword = $event"
+        @template-changed="selectedTemplateId = $event"
         @loading="loadingSpaces = loadingSpaces || $event" />
       <spaces-administration-list
         ref="spacesList"
         :keyword="keyword"
         :loading-spaces="loadingSpaces"
         :spaces-size="spacesSize"
+        :selected-template-id="selectedTemplateId"
         class="px-3"
         @loading-spaces="loadingSpaces = $event"
         @loaded="spacesLoaded" />
@@ -45,6 +47,7 @@ export default {
     spacesSize: 0,
     loadingSpaces: false,
     initialized: false,
+    selectedTemplateId: '0',
   }),
   methods: {
     spacesLoaded(spacesSize) {

diff --git a/...c/main/webapp/vue-apps/spaces-administration/components/main/SpacesAdministrationList.vue b/...c/main/webapp/vue-apps/spaces-administration/components/main/SpacesAdministrationList.vue
@@ -104,6 +104,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    selectedTemplateId: {
+      type: String,
+      default: () => '0',
+    },
   },
   data: () => ({
     actionExtensions: [],
@@ -233,6 +237,13 @@ export default {
         this.searchSpaces();
       }
     },
+    selectedTemplateId() {
+      if (this.initialized) {
+        this.offset = 0;
+        this.spaces = [];
+        this.searchSpaces();
+      }
+    },
   }, 
   created() {
     this.searchSpaces();
@@ -251,7 +262,7 @@ export default {
     },
     searchSpaces() {
       this.$emit('loading-spaces', true);
-      return this.$spaceService.getSpaces(this.keyword, this.offset, this.pageSize, this.filter, this.expand)
+      return this.$spaceService.getSpaces(this.keyword, this.offset, this.pageSize, this.filter, this.expand, this.selectedTemplateId && Number(this.selectedTemplateId))
         .then(data => {
           if (this.offset) {
             this.spaces.push(...data.spaces);

diff --git a/...ain/webapp/vue-apps/spaces-administration/components/main/SpacesAdministrationToolbar.vue b/...ain/webapp/vue-apps/spaces-administration/components/main/SpacesAdministrationToolbar.vue
@@ -8,6 +8,7 @@
  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
@@ -26,28 +27,48 @@
       placeholder: $t('spacesList.label.filterSpaces'),
       tooltip: $t('spacesList.label.filterSpaces')
     }"
-    :compact="compactDisplay || $root.isMobile"
+    :right-select-box="{
+      hide: $root.isMobile,
+      selected: selectedTemplateId,
+      items: spaceTemplateItems,
+    }"
+    :filters-count="filtersCount"
+    compact
     class="px-1"
     no-text-truncate
     @filter-text-input-end-typing="$emit('keyword-changed', $event)"
-    @filter-button-click="$root.$emit('spaces-list-filter-open', filter)"
+    @filter-select-change="$emit('template-changed', $event)"
     @loading="$emit('loading', $event)" />
 </template>
 <script>
 export default {
   props: {
-    filter: {
+    selectedTemplateId: {
       type: String,
-      default: null,
-    },
-    compactDisplay: {
-      type: Boolean,
-      default: false
+      default: () => '0',
     },
   },
   data: () => ({
     loading: 0,
   }),
+  computed: {
+    filtersCount() {
+      return this.selectedTemplateId === '0' ? 0 : 1;
+    },
+    spaceTemplateItems() {
+      const spaceTemplateItems = [{
+        text: this.$t('social.spaces.administration.manageSpaces.spaceTemplates.all'),
+        value: '0',
+      }];
+      if (this.$root.spaceTemplates?.length) {
+        spaceTemplateItems.push(...this.$root.spaceTemplates.map(t => ({
+          text: t.name,
+          value: t.id,
+        })));
+      }
+      return spaceTemplateItems;
+    },
+  },
   created() {
     this.$root.$on('spaces-list-refresh', this.refresh);
     this.$root.$on('space-list-pending-updated', this.refresh);

diff --git a/webapp/src/main/webapp/vue-apps/spaces-administration/main.js b/webapp/src/main/webapp/vue-apps/spaces-administration/main.js
@@ -41,6 +41,11 @@ export function init() {
         spaceTemplates: null,
         collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
       },
+      computed: {
+        isMobile() {
+          return this.$vuetify.breakpoint.mobile;
+        },
+      },
       created() {
         this.refreshSpaceTemplates();
       },