Feature/admin users clouds and projects (#604)

* update @bimdata/typescript-fetch-api-client version

* add project/space role distinction (spaceAdmin, projectAdmin, spaceUser, projectUser)

* fix invitations & cloud admin

* add computed for roleClass

* add comment for redirect_uri & delete unused code

Author: LrxGaelle

package-lock.json

@@ -16,7 +16,7 @@
     "@bimdata/bcf-components": "6.7.5",
     "@bimdata/components": "1.9.2",
     "@bimdata/design-system": "2.3.0",
-    "@bimdata/typescript-fetch-api-client": "10.30.4",
+    "@bimdata/typescript-fetch-api-client": "10.31.0",
     "@bimdata/viewer": "2.15.0-beta.5",
     "@paddle/paddle-js": "^1.5.1",
     "async": "^3.2.6",

package.json

@@ -36,8 +36,9 @@
     <div class="list-container">
       <transition-group name="list">
         <template v-for="user in displayedUsers">
+          <!-- Render only pending invitations (those with redirect_uri because only not-yet-accepted invitations have this field) -->
           <InvitationCard
-            v-if="user.from === 'invitation'"
+            v-if="user.redirect_uri"
             :key="`invitation-${user.id}`"
             :space="space"
             :invitation="user"
@@ -114,20 +115,11 @@ export default {
     );
 
     const list = computed(() => {
-      props.invitations.forEach((invitation) => {
-        invitation.from = "invitation";
-      });
       if (currentTab.value === "admins") {
-        admins.value.forEach((invitation) => {
-          invitation.from = "user";
-        });
         return props.invitations
           .filter((invitation) => invitation.role === 100)
           .concat(admins.value);
       } else {
-        users.value.forEach((invitation) => {
-          invitation.from = "user";
-        });
         return props.invitations.filter((invitation) => invitation.role === 50).concat(users.value);
       }
     });

src/components/specific/users/space-users-manager/SpaceUsersManager.vue

@@ -33,11 +33,9 @@
               <BIMDataTextbox
                 width="auto"
                 maxWidth="220px"
-                :text="
-                  fullName(user) + (isSelf(user) ? ` (${$t('UserCard.self')})` : '')
-                "
+                :text="fullName(user) + (isSelf(user) ? ` (${$t('UserCard.self')})` : '')"
               />
-              <UserRoleBadge :role="role" />
+              <UserRoleBadge :role="role" :isSpaceRole="user.in_all_projects" />
             </div>
             <div class="user-card__content__info__email">
               {{ user.email }}
@@ -72,47 +70,35 @@ export default {
     UserRoleBadge,
     UserCardActionMenu,
     UserCardDeleteGuard,
-    UserCardUpdateForm
+    UserCardUpdateForm,
   },
   props: {
     user: {
       type: Object,
-      required: true
+      required: true,
     },
     space: {
       type: Object,
-      default: null
+      default: null,
     },
     project: {
       type: Object,
-      default: null
-    }
+      default: null,
+    },
   },
   setup(props) {
     const { isSelf, isSpaceAdmin, isProjectAdmin } = useUser();
 
     const showActionMenu = computed(
-      () =>
-        !isSelf(props.user) &&
-        (isSpaceAdmin(props.space) || isProjectAdmin(props.project))
-    );
-    const role = computed(() =>
-      props.project ? props.user.role : props.user.cloud_role
+      () => !isSelf(props.user) && (isSpaceAdmin(props.space) || isProjectAdmin(props.project))
     );
+    const role = computed(() => (props.project ? props.user.role : props.user.cloud_role));
 
     const loading = ref(false);
     provide("loading", loading);
 
-    const {
-      isOpen: showUpdateForm,
-      open: openUpdateForm,
-      close: closeUpdateForm
-    } = useToggle();
-    const {
-      isOpen: showDeleteGuard,
-      open: openDeleteGuard,
-      close: closeDeleteGuard
-    } = useToggle();
+    const { isOpen: showUpdateForm, open: openUpdateForm, close: closeUpdateForm } = useToggle();
+    const { isOpen: showDeleteGuard, open: openDeleteGuard, close: closeDeleteGuard } = useToggle();
 
     const resetCard = () => {
       loading.value = false;
@@ -134,9 +120,9 @@ export default {
       isSelf,
       openDeleteGuard,
       openUpdateForm,
-      resetCard
+      resetCard,
     };
-  }
+  },
 };
 </script>
 

src/components/specific/users/user-card/UserCard.vue

@@ -4,12 +4,16 @@
   font-size: 12px;
   font-weight: normal;
 
-  &--admin {
+  &--space-admin {
     background-color: var(--color-primary);
     color: var(--color-white);
   }
 
-  &--user {
+  &--space-user {
+    background-color: #a375ff;
+    color: var(--color-white);
+  }
+  &--project-user {
     background-color: var(--color-success);
     color: var(--color-white);
   }

src/components/specific/users/user-role-badge/UserRoleBadge.scss

@@ -1,6 +1,17 @@
 <template>
-  <span class="user-role-badge" :class="`user-role-badge--${roleName}`">
-    {{ $t(`UserRoleBadge.${roleName}`) }}
+  <span class="user-role-badge" :class="`user-role-badge--${roleClass}`">
+    <template v-if="roleName === 'guest'">
+      {{ $t("UserRoleBadge.guest") }}
+    </template>
+    <template v-if="role === 100">
+      {{ $t(`UserRoleBadge.spaceAdmin`) }}
+    </template>
+    <template v-if="isSpaceRole && roleName === 'spaceUser'">
+      {{ $t(`UserRoleBadge.spaceUser`) }}
+    </template>
+    <template v-if="!isSpaceRole && roleName === 'projectUser'">
+      {{ $t(`UserRoleBadge.projectUser`) }}
+    </template>
   </span>
 </template>
 
@@ -13,28 +24,35 @@ export default {
   props: {
     role: {
       type: Number,
-      required: true
-    }
+      required: true,
+    },
+    isSpaceRole: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     const roleName = computed(() => {
       switch (props.role) {
         case SPACE_ROLE.ADMIN:
-        case PROJECT_ROLE.ADMIN:
-          return "admin";
+          return "spaceAdmin";
         case SPACE_ROLE.USER:
-        case PROJECT_ROLE.USER:
-          return "user";
+          return props.isSpaceRole ? "spaceUser" : "projectUser";
         case PROJECT_ROLE.GUEST:
         default:
           return "guest";
       }
     });
 
+    const roleClass = computed(() => {
+      return roleName.value.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    });
+
     return {
-      roleName
+      roleName,
+      roleClass,
     };
-  }
+  },
 };
 </script>
 

src/components/specific/users/user-role-badge/UserRoleBadge.vue

@@ -421,8 +421,9 @@
     }
   },
   "UserRoleBadge": {
-    "admin": "Admin",
-    "user": "Utilisateur",
+    "spaceAdmin": "Admin espace",
+    "spaceUser": "Utilisateur espace",
+    "projectUser": "Utilisateur projet",
     "guest": "Invité"
   },
   "UsersManagerOnboarding": {