feat: Review Site Form UX - MEED-8094 - Meeds-io/MIPs#173

layout-webapp/src/main/resources/locale/portlet/SiteManagement_en.properties

@@ -8,10 +8,13 @@ siteManagement.label.confirm=Confirm
 siteManagement.label.confirmDelete=Delete site
 siteManagement.label.confirmDelete.message=Are you sure you want to delete "{0}" site?
 siteManagement.drawer.properties.title=Site properties
+siteManagement.drawer.addSite.title=Add Site
 siteManagement.label.properties=Properties
 siteManagement.label.siteName.title=Site name
 siteManagement.label.siteLabel.title=Site label
+siteManagement.label.siteLabel.placeholder=Give a name to your site
 siteManagement.label.siteDescription.title=Site description
+siteManagement.label.siteDescription.placeholder=Describe purpose to inform users via the sidebar
 siteManagement.label.editLayout=Layout
 siteManagement.label.manageAccess=Permissions
 siteManagement.label.managePermissions=Manage permissions
@@ -33,6 +36,7 @@ siteManagement.label.btn.save=Save
 siteManagement.label.btn.cancel=Cancel
 siteManagement.label.btn.next=Next
 siteManagement.label.btn.add=Add
+siteManagement.label.btn.previous=Previous
 siteManagement.label.createSite.error=Error while creating site
 siteManagement.label.createSite.success=Site created successfully
 siteManagement.label.siteTemplate.drawer.title=Select site template
@@ -49,3 +53,21 @@ sites.label.siteNavigation=Site navigation
 sites.filter.placeholder=Filter by name, description
 sites.label.system.noDelete=This default site cannot be deleted
 sites.menu.open=Open
+sites.urlSlug.label=URL Slug
+sites.urlSlug.caption=This can't be updated once created
+sites.urlSlug.placeholder=add your URN
+sites.urlSlug.alreadyExists=Already exists
+sites.urlSlug.badFormat=Only alphanumeric characters, '-' or '_' are accepted
+sites.stepper.properties=Properties
+sites.stepper.permissions=Permissions
+sites.stepper.start=Start
+sites.selectTemplate=Select a template
+sites.permissionSuggester.placeholder=Enter group name
+sites.permissionSuggester.noData=No data
+sites.permission.administrators=Administrators
+sites.permission.users=Users
+sites.permission.guests=Guests
+sites.permission.groupMembers=Group Members
+sites.permission.everyone=Any
+
+

layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageAccessPermission.vue

@@ -55,7 +55,6 @@
     </template>
   </div>
 </template>
-
 <script>
 export default {
   props: {

layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManagePermissionsDrawer.vue

@@ -20,15 +20,16 @@
   <exo-drawer
     ref="managePermissionsDrawer"
     id="managePermissionsDrawer"
+    v-model="drawer"
     :right="!$vuetify.rtl"
     :allow-expand="isSite"
     :go-back-button="goBackButton"
     eager
     @closed="close">
-    <template slot="title">
+    <template #title>
       {{ drawerTitle }}
     </template>
-    <template slot="content">
+    <template v-if="drawer" #content>
       <v-card class="mx-4 my-4 px-2 py-2 elevation-0">
         <manage-edit-permission
           :permission="editPermission"
@@ -63,6 +64,7 @@ export default {
 
   data() {
     return {
+      drawer: false,
       loading: false,
       navigationNode: null,
       editPermission: {
@@ -211,7 +213,7 @@ export default {
       return this.$siteLayoutService.updateSitePermissions(this.site.siteType, this.site.name, this.editPermissionChanged && siteEditPermission || null, this.accessPermissionChanged && siteAccessPermissions || null)
         .then(() => {
           this.$root.$emit('alert-message', this.$t('siteManagement.label.updatePermission.success'), 'success');
-          this.$root.$emit('refresh-sites');
+          this.$root.$emit('site-updated');
           this.close();
         }).catch((e) => {
           const message = e.message ==='401' &&  this.$t('siteManagement.label.updatePermission.unauthorized') || this.$t('siteManagement.label.updatePermission.error');

layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/SiteAccessPermissions.vue

@@ -0,0 +1,225 @@
+<!--
+
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2020 - 2025 Meeds Association contact@meeds.io
+
+ 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.
+
+-->
+<template>
+  <div class="d-flex flex-column">
+    <div class="font-weight-bold mb-2">
+      {{ $t('siteManagement.label.whoCanView') }}
+    </div>
+    <v-checkbox
+      v-model="isAdministrationPermissions"
+      on-icon="fa-check-square"
+      off-icon="far fa-square"
+      class="mt-0 ms-n1"
+      disabled>
+      <template #label>
+        <div class="text-body">
+          {{ $t('sites.permission.administrators') }}
+        </div>
+      </template>
+    </v-checkbox>
+    <v-checkbox
+      v-model="isUserPermissions"
+      :disabled="isAnyPermissions"
+      on-icon="fa-check-square"
+      off-icon="far fa-square"
+      class="mt-0 ms-n1">
+      <template #label>
+        <div class="text-body">
+          {{ $t('sites.permission.users') }}
+        </div>
+      </template>
+    </v-checkbox>
+    <v-checkbox
+      v-model="isGuestPermissions"
+      :disabled="isAnyPermissions"
+      on-icon="fa-check-square"
+      off-icon="far fa-square"
+      class="mt-0 ms-n1">
+      <template #label>
+        <div class="text-body">
+          {{ $t('sites.permission.guests') }}
+        </div>
+      </template>
+    </v-checkbox>
+    <v-checkbox
+      v-model="isAnyPermissions"
+      on-icon="fa-check-square"
+      off-icon="far fa-square"
+      class="mt-0 ms-n1">
+      <template #label>
+        <div class="text-body">
+          {{ $t('sites.permission.everyone') }}
+        </div>
+      </template>
+    </v-checkbox>
+    <v-checkbox
+      v-model="isCustomPermissions"
+      :disabled="isAnyPermissions"
+      on-icon="fa-check-square"
+      off-icon="far fa-square"
+      class="mt-0 ms-n1"
+      @click="specificGroupEntries = null">
+      <template #label>
+        <div class="text-body">
+          {{ $t('sites.permission.groupMembers') }}
+        </div>
+      </template>
+    </v-checkbox>
+    <exo-identity-suggester
+      v-if="isCustomPermissions"
+      ref="targetPermissions"
+      v-model="specificGroupEntries"
+      :labels="suggesterLabels"
+      :search-options="{filterType: 'all'}"
+      name="specificGroupPermissions"
+      class="mb-n3"
+      include-spaces
+      include-groups
+      all-groups-for-admin
+      multiple
+      required />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: null,
+    },
+  },
+  data: () => ({
+    administratorsPermission: '/platform/administrators',
+    usersPermission: '/platform/users',
+    externalsPermission: '/platform/externals',
+    everyonePermission: 'Everyone',
+    isAdministrationPermissions: true,
+    isUserPermissions: false,
+    isGuestPermissions: false,
+    isAnyPermissions: false,
+    isCustomPermissions: false,
+    specificGroupEntries: null,
+  }),
+  computed: {
+    isSpecificGroup() {
+      return !!this.specificGroupEntries?.length;
+    },
+    permissions() {
+      const permissions = [];
+      if (this.isAnyPermissions) {
+        permissions.push(this.everyonePermission);
+      } else {
+        if (this.isUserPermissions) {
+          permissions.push(`*:${this.usersPermission}`);
+        }
+        if (this.isGuestPermissions) {
+          permissions.push(`*:${this.guestsPermission}`);
+        }
+        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}`);
+        }
+      }
+      return permissions;
+    },
+    suggesterLabels() {
+      return {
+        placeholder: this.$t('sites.permissionSuggester.placeholder'),
+        noDataLabel: this.$t('sites.permissionSuggester.noData')
+      };
+    },
+  },
+  watch: {
+    permissions() {
+      this.$emit('input', this.permissions);
+    },
+    isAnyPermissions() {
+      if (this.isAnyPermissions) {
+        this.isAdministrationPermissions = true;
+        this.isUserPermissions = true;
+        this.isGuestPermissions = true;
+        this.isCustomPermissions = false;
+      }
+    },
+  },
+  created() {
+    const permissions = this.value?.slice?.();
+    this.isAnyPermissions = permissions?.find?.(p => p === this.everyonePermission) && true || false;
+    this.isUserPermissions = permissions?.find?.(p => p === this.usersPermission) && true || false;
+    this.isGuestPermissions = permissions?.find?.(p => p === this.externalsPermission) && true || false;
+    this.specificGroupEntries = [];
+
+    const specificGroupEntries = permissions?.filter?.(p => {
+      const g = p.includes(':') ? p.split(':')[1] : p;
+      return g !== this.administratorsPermission
+        && g !== this.usersPermission
+        && g !== this.externalsPermission
+        && g !== this.everyonePermission;
+    }) || null;
+    this.isCustomPermissions = !!specificGroupEntries?.length;
+    if (specificGroupEntries?.length) {
+      specificGroupEntries.forEach(this.retrieveObject);
+    }
+  },
+  methods: {
+    async retrieveObject(groupId) {
+      groupId = groupId.includes(':') ? groupId.split(':')[1] : groupId;
+      if (groupId.indexOf('/spaces/') === 0) {
+        const space = await this.$spaceService.getSpaceByGroupId(groupId);
+        if (space) {
+          this.specificGroupEntries.push({
+            id: `space:${space.prettyName}`,
+            remoteId: space.prettyName,
+            spaceId: space.id,
+            groupId: space.groupId,
+            providerId: 'space',
+            displayName: space.displayName,
+            profile: {
+              fullName: space.displayName,
+              originalName: space.shortName,
+              avatarUrl: space.avatarUrl ? space.avatarUrl : `/portal/rest/v1/social/spaces/${space.prettyName}/avatar`,
+            },
+          });
+        }
+      } else {
+        const group = await this.$identityService.getIdentityByProviderIdAndRemoteId('group', groupId);
+        if (group) {
+          this.specificGroupEntries.push({
+            id: `group:${group.remoteId}`,
+            remoteId: group.remoteId,
+            spaceId: groupId,
+            groupId: groupId,
+            providerId: 'group',
+            displayName: group.profile?.fullname,
+            profile: {
+              fullName: group.profile?.fullname,
+              originalName: group.profile?.fullname,
+            },
+          });
+        }
+      }
+    },
+  },
+};
+</script>