feat: Enhance Layout Permissions Input - MEED-9311 - Meeds-io/meeds#3424 (#444)

boubaker · web-flow · commit e5663b8bbc4b · 2025-06-16T08:05:22.000Z
This change will allow roles selection in addition to a group or space
when editing a site or page permissions (access or edit).
diff --git a/layout-webapp/src/main/resources/locale/portlet/SiteNavigation_en.properties b/layout-webapp/src/main/resources/locale/portlet/SiteNavigation_en.properties
@@ -128,6 +128,11 @@ sites.permission.administrators=Administrators
 sites.permission.users=Users
 sites.permission.guests=Guests
 sites.permission.groupMembers=Group Members
+sites.permission.in=In
+sites.permission.redactors=Redactors
+sites.permission.publishers=Publishers
+sites.permission.managers=Managers
 sites.permission.everyone=Any
 sites.saveAsSiteTemplate=Save as template
 spaceTemplate.label.restoreDefaultPages=Restore Default Pages
+siteNavigation.label.deleteCustomGroup=Delete custom group
diff --git a/layout-webapp/src/main/webapp/vue-app/common-sites/components/manage-permissions/AccessPermissions.vue b/layout-webapp/src/main/webapp/vue-app/common-sites/components/manage-permissions/AccessPermissions.vue
@@ -89,16 +89,64 @@
     <exo-identity-suggester
       v-if="isCustomPermissions"
       ref="targetPermissions"
-      v-model="specificGroupEntries"
+      v-model="specificGroup"
       :labels="suggesterLabels"
       :search-options="{filterType: 'all'}"
       name="specificGroupPermissions"
       class="mb-n3"
       include-spaces
       include-groups
-      all-groups-for-admin
-      multiple
-      required />
+      all-groups-for-admin />
+    <div v-if="specificGroupEntries?.length" class="mt-4">
+      <v-list-item
+        v-for="g in specificGroupEntries"
+        :key="g.id"
+        class="pa-1 pb-1"
+        dense>
+        <v-list-item-action class="pa-0 ma-0">
+          <select
+            v-model="g.role"
+            aria-label="hidden"
+            class="ignore-vuetify-classes width-auto pa-0 ma-0"
+            @change="updateIndex++"
+            @blur="updateIndex++">
+            <option
+              v-for="role in roles"
+              :key="role.value"
+              :value="role.value">
+              {{ role.text }}
+            </option>
+          </select>
+        </v-list-item-action>
+        <v-list-item-content class="d-flex align-center pa-0">
+          <v-list-item-title class="d-flex align-center text-truncate">
+            <div class="px-2">
+              {{ $t('sites.permission.in') }}
+            </div>
+            <template v-if="g.providerId === 'group'">
+              <v-icon size="28" class="me-2">
+                fa-users
+              </v-icon>
+              <span class="text-truncate">
+                {{ g.displayName }}
+              </span>
+            </template>
+            <space-avatar
+              v-else
+              :space-id="g.spaceId"
+              class="text-truncate" />
+          </v-list-item-title>
+        </v-list-item-content>
+        <v-list-item-action class="pa-0 my-auto">
+          <v-btn
+            :title="$t('siteNavigation.label.deleteCustomGroup')"
+            icon
+            @click.stop.prevent="deleteSpecificGroup(g)">
+            <v-icon color="error" small>fa-trash</v-icon>
+          </v-btn>
+        </v-list-item-action>
+      </v-list-item>
+    </div>
   </div>
 </template>
 <script>
@@ -124,8 +172,26 @@ export default {
     isAnyPermissions: false,
     isCustomPermissions: false,
     specificGroupEntries: null,
+    specificGroup: null,
+    defaultRole: '*',
+    updateIndex: 1,
   }),
   computed: {
+    roles() {
+      return [{
+        value: '*',
+        text: this.$t('sites.permission.everyone'),
+      }, {
+        value: 'redactor',
+        text: this.$t('sites.permission.redactors'),
+      }, {
+        value: 'publisher',
+        text: this.$t('sites.permission.publishers'),
+      }, {
+        value: 'manager',
+        text: this.$t('sites.permission.managers'),
+      }];
+    },
     isSpecificGroup() {
       return !!this.specificGroupEntries?.length;
     },
@@ -140,12 +206,14 @@ export default {
         if (this.isGuestPermissions) {
           permissions.push(`*:${this.externalsPermission}`);
         }
-        if (this.specificGroupEntries?.length) {
-          const specificGroupEntries = this.specificGroupEntries?.map?.(g => g.groupId)?.filter?.(g => g) || [];
-          permissions.push(...specificGroupEntries.map(g => `*:${g}`));
-        }
-        if (!permissions.length) {
-          permissions.push(`*:${this.administratorsPermission}`);
+        if (this.updateIndex > 0) {
+          if (this.specificGroupEntries?.length) {
+            const specificGroupEntries = this.specificGroupEntries?.filter?.(g => g.groupId) || [];
+            permissions.push(...specificGroupEntries.map(g => `${g.role || this.defaultRole}:${g.groupId}`));
+          }
+          if (!permissions.length) {
+            permissions.push(`*:${this.administratorsPermission}`);
+          }
         }
       }
       return permissions;
@@ -161,6 +229,19 @@ export default {
     permissions() {
       this.$emit('input', this.permissions);
     },
+    async specificGroup() {
+      if (this.specificGroup) {
+        if (!this.specificGroupEntries) {
+          this.specificGroupEntries = [];
+        }
+        this.specificGroupEntries.push({
+          ...this.specificGroup,
+          role: this.defaultRole,
+        });
+        await this.$nextTick();
+        this.specificGroup = null;
+      }
+    },
     isAnyPermissions() {
       if (this.isAnyPermissions) {
         this.isAdministrationPermissions = true;
@@ -186,12 +267,19 @@ export default {
     }) || null;
     this.isCustomPermissions = !!specificGroupEntries?.length;
     if (specificGroupEntries?.length) {
-      specificGroupEntries.forEach(this.retrieveObject);
+      specificGroupEntries.forEach(id => this.retrieveObject(id, '*')); // * specifically to not have to migrate data
     }
   },
   methods: {
-    async retrieveObject(groupId) {
+    deleteSpecificGroup(group) {
+      const index = this.specificGroupEntries.findIndex(g => group.id === g.id);
+      if (index >= 0) {
+        this.specificGroupEntries.splice(index, 1);
+      }
+    },
+    async retrieveObject(groupId, defaultRole) {
       try {
+        const role = groupId.includes(':') ? groupId.split(':')[0] : defaultRole || this.defaultRole;
         groupId = groupId.includes(':') ? groupId.split(':')[1] : groupId;
         if (groupId.indexOf('/spaces/') === 0) {
           const space = await this.$spaceService.getSpaceByGroupId(groupId);
@@ -203,6 +291,7 @@ export default {
               groupId: space.groupId,
               providerId: 'space',
               displayName: space.displayName,
+              role,
               profile: {
                 fullName: space.displayName,
                 originalName: space.shortName,
@@ -220,6 +309,7 @@ export default {
               groupId: groupId,
               providerId: 'group',
               displayName: group.profile?.fullname,
+              role,
               profile: {
                 fullName: group.profile?.fullname,
                 originalName: group.profile?.fullname,
diff --git a/layout-webapp/src/main/webapp/vue-app/common-sites/components/manage-permissions/EditPermission.vue b/layout-webapp/src/main/webapp/vue-app/common-sites/components/manage-permissions/EditPermission.vue
@@ -46,18 +46,64 @@
         </template>
       </v-radio>
     </v-radio-group>
-    <exo-identity-suggester
-      v-if="!isAdministrationPermissions"
-      ref="targetPermissions"
-      v-model="specificGroupEntry"
-      :labels="suggesterLabels"
-      :search-options="{filterType: 'all'}"
-      name="specificGroupPermission"
-      class="mb-n3 mt-n3"
-      include-spaces
-      include-groups
-      all-groups-for-admin
-      required />
+    <template v-if="!isAdministrationPermissions">
+      <exo-identity-suggester
+        v-if="!specificGroupEntry"
+        ref="targetPermissions"
+        v-model="specificGroup"
+        :labels="suggesterLabels"
+        :search-options="{filterType: 'all'}"
+        name="specificGroupPermission"
+        class="mb-n3 mt-n3"
+        include-spaces
+        include-groups
+        all-groups-for-admin />
+      <v-list-item
+        v-else
+        class="pa-1 pb-1"
+        dense>
+        <v-list-item-action class="pa-0 ma-0">
+          <select
+            v-model="specificGroupEntry.role"
+            aria-label="hidden"
+            class="ignore-vuetify-classes width-auto pa-0 ma-0">
+            <option
+              v-for="role in roles"
+              :key="role.value"
+              :value="role.value">
+              {{ role.text }}
+            </option>
+          </select>
+        </v-list-item-action>
+        <v-list-item-content class="d-flex align-center pa-0">
+          <v-list-item-title class="d-flex align-center text-truncate">
+            <div class="px-2">
+              {{ $t('sites.permission.in') }}
+            </div>
+            <template v-if="specificGroupEntry.providerId === 'group'">
+              <v-icon size="28" class="me-2">
+                fa-users
+              </v-icon>
+              <span class="text-truncate">
+                {{ specificGroupEntry.displayName }}
+              </span>
+            </template>
+            <space-avatar
+              v-else
+              :space-id="specificGroupEntry.spaceId"
+              class="text-truncate" />
+          </v-list-item-title>
+        </v-list-item-content>
+        <v-list-item-action class="pa-0 my-auto">
+          <v-btn
+            :title="$t('siteNavigation.label.deleteCustomGroup')"
+            icon
+            @click.stop.prevent="deleteSpecificGroup">
+            <v-icon color="error" small>fa-trash</v-icon>
+          </v-btn>
+        </v-list-item-action>
+      </v-list-item>
+    </template>
   </div>
 </template>
 <script>
@@ -76,14 +122,31 @@ export default {
     administratorsPermission: '/platform/administrators',
     isAdministrationPermissions: true,
     specificGroupEntry: null,
+    specificGroup: null,
+    defaultRole: 'manager',
   }),
   computed: {
+    roles() {
+      return [{
+        value: '*',
+        text: this.$t('sites.permission.everyone'),
+      }, {
+        value: 'redactor',
+        text: this.$t('sites.permission.redactors'),
+      }, {
+        value: 'publisher',
+        text: this.$t('sites.permission.publishers'),
+      }, {
+        value: 'manager',
+        text: this.$t('sites.permission.managers'),
+      }];
+    },
     isSpecificGroup() {
       return this.specificGroupEntry;
     },
     permission() {
       if (!this.isAdministrationPermissions && this.specificGroupEntry?.groupId) {
-        return `*:${this.specificGroupEntry.groupId}`;
+        return `${this.specificGroupEntry.role || this.defaultRole}:${this.specificGroupEntry.groupId}`;
       } else {
         return `*:${this.administratorsPermission}`;
       }
@@ -99,6 +162,16 @@ export default {
     permission() {
       this.$emit('input', this.permission);
     },
+    async specificGroup() {
+      if (this.specificGroup) {
+        this.specificGroupEntry = {
+          ...this.specificGroup,
+          role: this.defaultRole,
+        };
+        await this.$nextTick();
+        this.specificGroup = null;
+      }
+    },
     isAdministrationPermissions() {
       if (this.isAdministrationPermissions) {
         this.specificGroupEntry = null;
@@ -111,14 +184,18 @@ export default {
     if (this.isAdministrationPermissions) {
       this.specificGroupEntry = null;
     } else if (permission) {
-      await this.retrieveObject(permission);
+      await this.retrieveObject(this.value, '*');
     } else {
       this.isAdministrationPermissions = true;
       this.specificGroupEntry = null;
     }
   },
   methods: {
-    async retrieveObject(groupId) {
+    deleteSpecificGroup() {
+      this.specificGroupEntry = null;
+    },
+    async retrieveObject(groupId, defaultRole) {
+      const role = groupId.includes(':') ? groupId.split(':')[0] : defaultRole || this.defaultRole;
       groupId = groupId.includes(':') ? groupId.split(':')[1] : groupId;
       if (groupId.indexOf('/spaces/') === 0) {
         const space = await this.$spaceService.getSpaceByGroupId(groupId);
@@ -130,6 +207,7 @@ export default {
             groupId: space.groupId,
             providerId: 'space',
             displayName: space.displayName,
+            role,
             profile: {
               fullName: space.displayName,
               originalName: space.shortName,
@@ -147,6 +225,7 @@ export default {
             groupId: groupId,
             providerId: 'group',
             displayName: group.profile?.fullname,
+            role,
             profile: {
               fullName: group.profile?.fullname,
               originalName: group.profile?.fullname,
diff --git a/layout-webapp/src/main/webapp/vue-app/common-sites/components/manage-permissions/ManagePermissionsDrawer.vue b/layout-webapp/src/main/webapp/vue-app/common-sites/components/manage-permissions/ManagePermissionsDrawer.vue
@@ -32,10 +32,10 @@
     </template>
     <template v-if="drawer" #content>
       <v-card class="mx-4 my-4 px-2 py-2 elevation-0">
-        <site-edit-permission
+        <manage-permissions-edit
           v-model="editPermission"
           :is-site="isSite" />
-        <site-access-permissions
+        <manage-permissions-access
           v-model="accessPermissions"
           class="mt-4"
           :is-site="isSite" />
diff --git a/layout-webapp/src/main/webapp/vue-app/common-sites/components/site-navigation/SiteNavigationDrawer.vue b/layout-webapp/src/main/webapp/vue-app/common-sites/components/site-navigation/SiteNavigationDrawer.vue
@@ -72,19 +72,21 @@
             class="btn btn-primary ms-2">
             {{ $t('siteNavigation.label.btn.createNode') }}
           </v-btn>
-          <v-spacer v-if="$refs.drawer?.expand" />
-          <select
-            id="siteNavigationDrawerFilterSelect"
-            v-model="filter"
-            v-if="$refs.drawer?.expand"
-            class="ignore-vuetify-classes width-auto pa-0 me-5 mb-0">
-            <option
-              v-for="item in navigationsFilter"
-              :key="item.value"
-              :value="item.value">
-              {{ item.text }}
-            </option>
-          </select>
+          <template v-if="$refs.drawer?.expand">
+            <v-spacer />
+            <select
+              id="siteNavigationDrawerFilterSelect"
+              v-model="filter"
+              aria-label="hidden"
+              class="ignore-vuetify-classes width-auto pa-0 me-5 mb-0">
+              <option
+                v-for="item in navigationsFilter"
+                :key="item.value"
+                :value="item.value">
+                {{ item.text }}
+              </option>
+            </select>
+          </template>
         </v-toolbar>
         <site-navigation-nodes-list
           :navigation-nodes="navigationNodesToDisplay"
diff --git a/layout-webapp/src/main/webapp/vue-app/common-sites/initComponents.js b/layout-webapp/src/main/webapp/vue-app/common-sites/initComponents.js
diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/drawer/SiteFormDrawer.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/drawer/SiteFormDrawer.vue
