[MS] Added texts & props to get details info

Scille · Dec 15, 2023 · 9b392f0 · 9b392f0
1 parent ae14741
commit 9b392f0
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 26 deletions.
diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json
@@ -781,7 +781,20 @@
             "create": "Invite"
         },
         "UserDetailsModal": {
-            "title": "User details"
+            "title": "User details",
+            "subtitles": {
+                "name": "Name",
+                "joined": "Joined",
+                "commonWorkspaces": "Common workspaces",
+                "revoked": "Revoked"
+            },
+            "actions": {
+                "close": "Close"
+            },
+            "placeholders": {
+                "everyone": "Everyone",
+                "development": "Development"
+            }
         },
         "revocation": {
             "revokeTitle": "Revoke this user? | Revoke these users?",

diff --git a/client/src/locales/fr-FR.json b/client/src/locales/fr-FR.json
@@ -781,7 +781,20 @@
             "create": "Inviter"
         },
         "UserDetailsModal": {
-            "title": "Détails de l'utilisateur"
+            "title": "Détails de l'utilisateur",
+            "subtitles": {
+                "name": "Nom",
+                "joined": "Rejoint",
+                "commonWorkspaces": "Espaces de travail communs",
+                "revoked": "Révoqué"
+            },
+            "actions": {
+                "close": "Fermer"
+            },
+            "placeholders": {
+                "everyone": "Tout le monde",
+                "development": "Développement"
+            }
         },
         "revocation": {
             "revokeTitle": "Révoquer cet utilisateur ? | Révoquer ces utilisateurs ?",

diff --git a/client/src/views/users/ActiveUsersPage.vue b/client/src/views/users/ActiveUsersPage.vue
@@ -344,7 +344,7 @@ async function openUserContextMenu(event: Event, user: UserInfo, onFinished?: ()
     dismissOnSelect: true,
     alignment: 'end',
     componentProps: {
-      isRevoked: user.isRevoked(),
+      user: user,
     },
   });
   await popover.present();

diff --git a/client/src/views/users/RevokedUsersPage.vue b/client/src/views/users/RevokedUsersPage.vue
@@ -194,7 +194,7 @@ async function openUserContextMenu(event: Event, user: UserInfo, onFinished?: ()
     dismissOnSelect: true,
     alignment: 'end',
     componentProps: {
-      isRevoked: user.isRevoked(),
+      user: user,
     },
   });
   await popover.present();

diff --git a/client/src/views/users/UserContextMenu.vue b/client/src/views/users/UserContextMenu.vue
@@ -5,7 +5,7 @@
     <ion-list class="menu-list">
       <ion-item-group
         class="group"
-        v-if="!isRevoked"
+        v-if="!user.isRevoked()"
       >
         <ion-item class="group-title caption-caption">
           <ion-label class="group-title__label">
@@ -57,10 +57,10 @@ export enum UserAction {
 import UserDetailsModal from '@/views/users/UserDetailsModal.vue';
 import { IonContent, IonIcon, IonItem, IonItemGroup, IonLabel, IonList, modalController, popoverController } from '@ionic/vue';
 import { informationCircle, personRemove } from 'ionicons/icons';
-import { UserProfile } from '@/parsec';
+import { UserProfile, UserInfo } from '@/parsec';
 
 const props = defineProps<{
-  isRevoked: boolean;
+  user: UserInfo;
 }>();
 
 function onClick(action: UserAction): Promise<boolean> {
@@ -72,8 +72,7 @@ async function presentDetailsModal(): Promise<void> {
     component: UserDetailsModal,
     cssClass: 'user-details-modal',
     componentProps: {
-      userProfile: UserProfile.Admin,
-      isRevoked: props.isRevoked,
+      user: props.user,
     },
   });
   await modal.present();

diff --git a/client/src/views/users/UserDetailsModal.vue b/client/src/views/users/UserDetailsModal.vue
@@ -8,42 +8,42 @@
     >
       <div>
         <ion-text class="text1">
-          Name
+          {{ $t('UsersPage.UserDetailsModal.subtitles.name') }}
         </ion-text>
         <ion-text class="text1-right">
-          Joined
+          {{ $t('UsersPage.UserDetailsModal.subtitles.joined') }}
         </ion-text>
       </div>
       <div>
         <ion-text class="text2">
-          Thomas Linere
+          {{ user.humanHandle.label }}
         </ion-text>
         <ion-text class="text2-right">
-          April 25th 2022
+          {{ timeSince(user.createdOn, '--', 'short') }}
         </ion-text>
       </div>
       <div>
         <ion-text class="text4">
-          Espaces de travail communs
+          {{ $t('UsersPage.UserDetailsModal.subtitles.commonWorkspaces') }}
         </ion-text>
       </div>
       <div>
         <ion-chip
-          v-if="isRevoked"
+          v-if="user.isRevoked()"
           color="danger"
         >
           <ion-icon
             :icon="ellipse"
             class="revoked"
           />
           <ion-label>
-            Révoqué
+            {{ $t('UsersPage.UserDetailsModal.subtitles.revoked') }}
           </ion-label>
         </ion-chip>
       </div>
       <ion-list>
         <ion-card
-          :disabled="isRevoked"
+          :disabled="user.isRevoked()"
           class="workspace-card"
         >
           <ion-card-content>
@@ -58,14 +58,14 @@
                 :icon="cloudOffline"
               />
               <ion-text class="text3">
-                Tout le monde
+                {{ $t('UsersPage.UserDetailsModal.placeholders.everyone') }}
               </ion-text>
-              <tag-profile :profile="standard" />
+              <tag-profile :profile="user.currentProfile" />
             </ion-avatar>
           </ion-card-content>
         </ion-card>
         <ion-card
-          :disabled="isRevoked"
+          :disabled="user.isRevoked()"
           class="workspace-card"
         >
           <ion-card-content>
@@ -80,9 +80,9 @@
                 :icon="cloudOffline"
               />
               <ion-text class="text3">
-                Développement
+                {{ $t('UsersPage.UserDetailsModal.placeholders.development') }}
               </ion-text>
-              <tag-profile :profile="userProfile" />
+              <tag-profile :profile="user.currentProfile" />
             </ion-avatar>
           </ion-card-content>
         </ion-card>
@@ -111,16 +111,19 @@ import {
   IonCard,
   IonCardContent,
   IonIcon,
+  IonLabel,
 } from '@ionic/vue';
 import { business, cloudOffline, ellipse } from 'ionicons/icons';
-import { UserProfile } from '@/parsec';
+import { UserInfo } from '@/parsec';
 import TagProfile from '@/components/users/TagProfile.vue';
+import { FormattersKey, Formatters } from '@/common/injectionKeys';
+import { defineProps, inject } from 'vue';
 
-const standard = UserProfile.Standard;
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const { timeSince } = inject(FormattersKey)! as Formatters;
 
 defineProps<{
-  userProfile: UserProfile;
-  isRevoked: boolean;
+  user: UserInfo,
 }>();
 
 function cancel(): Promise<boolean> {