Backport #8975 (#9364)

* [MS] Updated the message for stats page when all orgs selected * [MS] Added style * Apply suggestions from code review Co-authored-by: Alban Costaz <[email protected]> * [MS] Fixed pluralization --------- Co-authored-by: fabienSvstr <[email protected]> Co-authored-by: Alban Costaz <[email protected]>
Scille · Jan 17, 2025 · 9184b25 · 9184b25
1 parent f2447f2
commit 9184b25
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 21 deletions.
diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json
@@ -1454,9 +1454,9 @@
                 "revoked": "revoked",
                 "storage": "Used storage"
             },
-            "admin": "Administrator | Administrators",
-            "standard": "Standard | Standards",
-            "outsider": "External | Externals",
+            "admin": "Administrators | Administrator | Administrators",
+            "standard": "Standards | Standard | Standards",
+            "outsider": "Externals | External | Externals",
             "consumptionDetail": "Consumption detail",
             "nonPaying": "Non paying",
             "paying": "charged",
@@ -1465,6 +1465,7 @@
             "data": "data",
             "metadata": "metadata",
             "error": "Failed to retrieve organization data.",
+            "multipleOrganizations": "You have multiple organizations. Please select one from the top-left button or select it below in order to check its statistics.",
             "noStats": "No statistics to display.",
             "used": "consumed",
             "remaining": "remaining",

diff --git a/client/src/locales/fr-FR.json b/client/src/locales/fr-FR.json
@@ -1454,9 +1454,9 @@
                 "revoked": "révoqués",
                 "storage": "Stockage utilisé"
             },
-            "admin": "Administrateur | Administrateurs",
-            "standard": "Standard | Standards",
-            "outsider": "Externe | Externes",
+            "admin": "Administrateur | Administrateur | Administrateurs",
+            "standard": "Standard | Standard | Standards",
+            "outsider": "Externe | Externe | Externes",
             "consumptionDetail": "Détail des consommations",
             "nonPaying": "Non payant",
             "paying": "payant",
@@ -1465,6 +1465,7 @@
             "data": "de données",
             "metadata": "métadonnées",
             "error": "Impossible de récupérer les données de l'organisation.",
+            "multipleOrganizations": "Vous possédez plusieurs organisations. Veuillez en choisir une en utilisant le bouton dans le coin supérieur gauche ou sélectionnez-là ci-dessous pour voir ses statistiques.",
             "noStats": "Aucune statistique à afficher.",
             "used": "consommé",
             "remaining": "restant",

diff --git a/client/src/views/client-area/ClientAreaPage.vue b/client/src/views/client-area/ClientAreaPage.vue
@@ -76,6 +76,7 @@
               <statistics-page
                 v-if="currentPage === ClientAreaPages.Statistics"
                 :organization="currentOrganization"
+                @organization-selected="onOrganizationSelected"
               />
               <invoices-page
                 v-if="currentPage === ClientAreaPages.Invoices"

diff --git a/client/src/views/client-area/statistics/StatisticsPage.vue b/client/src/views/client-area/statistics/StatisticsPage.vue
@@ -28,7 +28,7 @@
             <div class="users-cards-list-item-text">
               <ion-text class="users-cards-list-item-text__number title-h1">{{ stats.adminUsersDetail.active }}</ion-text>
               <ion-text class="users-cards-list-item-text__text subtitles-sm">
-                {{ $msTranslate(stats.adminUsersDetail.active > 1 ? 'clientArea.statistics.admins' : 'clientArea.statistics.admin') }}
+                {{ $msTranslate({ key: 'clientArea.statistics.admin', count: stats.adminUsersDetail.active }) }}
               </ion-text>
             </div>
           </ion-card>
@@ -46,9 +46,7 @@
             <div class="users-cards-list-item-text">
               <ion-text class="users-cards-list-item-text__number title-h1">{{ stats.standardUsersDetail.active }}</ion-text>
               <ion-text class="users-cards-list-item-text__text subtitles-sm">
-                {{
-                  $msTranslate(stats.standardUsersDetail.active > 1 ? 'clientArea.statistics.standards' : 'clientArea.statistics.standard')
-                }}
+                {{ $msTranslate({ key: 'clientArea.statistics.standard', count: stats.standardUsersDetail.active }) }}
               </ion-text>
             </div>
           </ion-card>
@@ -66,9 +64,7 @@
             <div class="users-cards-list-item-text">
               <ion-text class="users-cards-list-item-text__number title-h1">{{ stats.outsiderUsersDetail.active }}</ion-text>
               <ion-text class="users-cards-list-item-text__text subtitles-sm">
-                {{
-                  $msTranslate(stats.outsiderUsersDetail.active > 1 ? 'clientArea.statistics.outsiders' : 'clientArea.statistics.outsider')
-                }}
+                {{ $msTranslate({ key: 'clientArea.statistics.outsider', count: stats.outsiderUsersDetail.active }) }}
               </ion-text>
             </div>
           </ion-card>
@@ -99,7 +95,7 @@
             <div class="users-cards-list-item-text">
               <ion-text class="users-cards-list-item-text__number title-h1">{{ stats.adminUsersDetail.revoked }}</ion-text>
               <ion-text class="users-cards-list-item-text__text subtitles-sm">
-                {{ $msTranslate(stats.adminUsersDetail.revoked > 1 ? 'clientArea.statistics.admins' : 'clientArea.statistics.admin') }}
+                {{ $msTranslate({ key: 'clientArea.statistics.admin', count: stats.adminUsersDetail.revoked }) }}
               </ion-text>
             </div>
           </ion-card>
@@ -117,9 +113,7 @@
             <div class="users-cards-list-item-text">
               <ion-text class="users-cards-list-item-text__number title-h1">{{ stats.standardUsersDetail.revoked }}</ion-text>
               <ion-text class="users-cards-list-item-text__text subtitles-sm">
-                {{
-                  $msTranslate(stats.standardUsersDetail.revoked > 1 ? 'clientArea.statistics.standards' : 'clientArea.statistics.standard')
-                }}
+                {{ $msTranslate({ key: 'clientArea.statistics.standard', count: stats.standardUsersDetail.revoked }) }}
               </ion-text>
             </div>
           </ion-card>
@@ -137,9 +131,7 @@
             <div class="users-cards-list-item-text">
               <ion-text class="users-cards-list-item-text__number title-h1">{{ stats.outsiderUsersDetail.revoked }}</ion-text>
               <ion-text class="users-cards-list-item-text__text subtitles-sm">
-                {{
-                  $msTranslate(stats.outsiderUsersDetail.revoked > 1 ? 'clientArea.statistics.outsiders' : 'clientArea.statistics.outsider')
-                }}
+                {{ $msTranslate({ key: 'clientArea.statistics.outsider', count: stats.outsiderUsersDetail.revoked }) }}
               </ion-text>
             </div>
           </ion-card>
@@ -359,7 +351,28 @@
         </div>
       </div>
     </template>
-    <template v-else-if="!querying && !stats && !error">
+    <template v-else-if="!querying && !stats && !error && allOrganizations.length">
+      <ion-text class="organization-choice-title body-lg">
+        {{ $msTranslate('clientArea.statistics.multipleOrganizations') }}
+      </ion-text>
+
+      <div class="organization-list">
+        <div
+          class="organization-list-item subtitles-normal"
+          v-for="org in allOrganizations"
+          :key="org.bmsId"
+          @click="onOrganizationSelected(org)"
+        >
+          {{ org.name }}
+          <ion-icon
+            :icon="arrowForward"
+            slot="end"
+            class="organization-list-item__icon"
+          />
+        </div>
+      </div>
+    </template>
+    <template v-else-if="!querying && !stats && !error && allOrganizations.length === 0">
       {{ $msTranslate('clientArea.statistics.noStats') }}
     </template>
     <ion-text
@@ -390,12 +403,17 @@ const props = defineProps<{
   organization: BmsOrganization;
 }>();
 
+const emits = defineEmits<{
+  (e: 'organizationSelected', organization: BmsOrganization): void;
+}>();
+
 const stats = ref<OrganizationStatsResultData>();
 const totalData = ref<number>(0);
 const freeSliceSize = ref<number>(0);
 const payingSliceSize = ref<number>(0);
 const querying = ref(true);
 const error = ref('');
+const allOrganizations = ref<Array<BmsOrganization>>([]);
 
 const firstBarData = ref<ProgressBarData>();
 const secondBarData = ref<ProgressBarData>();
@@ -455,6 +473,10 @@ function getThirdBarData(): ProgressBarData | undefined {
 
 onMounted(async () => {
   if (isDefaultOrganization(props.organization)) {
+    const listResponse = await BmsAccessInstance.get().listOrganizations();
+    if (!listResponse.isError && listResponse.data && listResponse.data.type === DataType.ListOrganizations) {
+      allOrganizations.value = listResponse.data.organizations;
+    }
     querying.value = false;
     return;
   }
@@ -475,6 +497,10 @@ onMounted(async () => {
   }
   querying.value = false;
 });
+
+async function onOrganizationSelected(org: BmsOrganization): Promise<void> {
+  emits('organizationSelected', org);
+}
 </script>
 
 <style scoped lang="scss">
@@ -723,4 +749,41 @@ onMounted(async () => {
     }
   }
 }
+
+.organization-choice-title {
+  color: var(--parsec-color-light-secondary-soft-text);
+}
+
+.organization-list {
+  min-height: 4em;
+  margin-top: 1.5rem;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  border-radius: var(--parsec-radius-12);
+  background: var(--parsec-color-light-secondary-background);
+  border: 1px solid var(--parsec-color-light-secondary-premiere);
+  overflow: hidden;
+
+  &-item {
+    display: flex;
+    justify-content: space-between;
+    color: var(--parsec-color-light-primary-700);
+    flex: 1;
+    padding: 1em 1rem 1rem 1.5rem;
+    cursor: pointer;
+    min-width: 20rem;
+    width: 100%;
+    transition: background 0.2s;
+
+    &__icon {
+      color: var(--parsec-color-light-secondary-text);
+    }
+
+    &:hover {
+      background: var(--parsec-color-light-secondary-medium);
+    }
+  }
+}
 </style>