fix: add a placeholder for empty orga spaces list

bimdata · Jan 12, 2022 · 95b50f5 · 95b50f5
1 parent a1a4da7
commit 95b50f5
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git a/src/components/generic/carousel-list/CarouselList.vue b/src/components/generic/carousel-list/CarouselList.vue
@@ -68,7 +68,7 @@ export default {
         slider.value.style.height = `${itemHeight + 2 * sliderPadding}px`;
 
         // Calculate the maximum number of items that can be displayed
-        // at the same time according to slider width and items height
+        // at the same time according to slider width and items width
         // taking minimum gap into account
         const nbDisplayed = Math.floor(contentWidth / (itemWidth + minGap));
 

diff --git a/.../organizations/organizations-manager/organization-spaces-list/OrganizationSpacesList.scss b/.../organizations/organizations-manager/organization-spaces-list/OrganizationSpacesList.scss
@@ -30,4 +30,13 @@
     overflow-x: hidden;
     overflow-y: auto;
   }
+
+  &__placeholder {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: calc(var(--spacing-unit) * 2);
+    color: var(--color-granite-light);
+  }
 }
diff --git a/...c/organizations/organizations-manager/organization-spaces-list/OrganizationSpacesList.vue b/...c/organizations/organizations-manager/organization-spaces-list/OrganizationSpacesList.vue
@@ -31,7 +31,7 @@
     <div class="organization-spaces-list__title">
       {{ $t("OrganizationSpacesList.spaceListTitle") }}
     </div>
-    <div class="organization-spaces-list__container">
+    <div class="organization-spaces-list__container" v-if="spaces.length > 0">
       <transition-group name="list">
         <OrganizationSpaceCard
           v-for="space of displayedSpaces"
@@ -41,6 +41,9 @@
         />
       </transition-group>
     </div>
+    <div class="organization-spaces-list__placeholder" v-else>
+      {{ $t("OrganizationSpacesList.spaceListPlaceholder") }}
+    </div>
   </div>
 </template>
 
@@ -64,8 +67,12 @@ export default {
 
     const localState = inject("localState");
 
+    const spaces = computed(() =>
+      getOrganizationSpaces(localState.organization)
+    );
+
     const { filteredList: displayedSpaces, searchText } = useListFilter(
-      computed(() => getOrganizationSpaces(localState.organization)),
+      spaces,
       space => space.name
     );
 
@@ -84,6 +91,7 @@ export default {
       isSubscriptionEnabled: IS_SUBSCRIPTION_ENABLED,
       localState,
       searchText,
+      spaces,
       // Methods
       goToSubscriptionPro
     };

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
@@ -624,7 +624,8 @@
         "importButtonText": "Import space",
         "addButtonText": "Add new space",
         "searchInputPlaceholder": "Search",
-        "spaceListTitle": "Account spaces"
+        "spaceListTitle": "Account spaces",
+        "spaceListPlaceholder": "No space is attached to this billing account."
     },
     "ProjectCardLeaveGuard": {
         "title": "Leave projet",

diff --git a/src/i18n/lang/fr.json b/src/i18n/lang/fr.json
@@ -544,7 +544,8 @@
     "importButtonText": "Importer un espace",
     "addButtonText": "Ajouter un espace",
     "searchInputPlaceholder": "Rechercher",
-    "spaceListTitle": "Liste des espaces rattachés au compte de facturation"
+    "spaceListTitle": "Liste des espaces rattachés au compte de facturation",
+    "spaceListPlaceholder": "Aucun espace n'est rattaché à ce compte de facturation."
   },
 
   "ProjectCardActionMenu": {