fix(views): add go-back-button to user-subs view

bimdata · Nov 15, 2021 · e0ec91a · e0ec91a
1 parent 877fd12
commit e0ec91a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/src/views/user-subscriptions/UserSubscriptions.scss b/src/views/user-subscriptions/UserSubscriptions.scss
@@ -1,5 +1,6 @@
 .user-subscriptions {
   &__header {
+    margin-top: var(--spacing-unit);
     display: flex;
     justify-content: space-between;
     gap: var(--spacing-unit);

diff --git a/src/views/user-subscriptions/UserSubscriptions.vue b/src/views/user-subscriptions/UserSubscriptions.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="user-subscriptions">
+    <ViewHeader>
+      <template #left>
+        <GoBackButton />
+      </template>
+    </ViewHeader>
     <div class="user-subscriptions__header">
       <div class="user-subscriptions__header__left">
         <h1>
@@ -51,15 +56,19 @@ import { useOrganizations } from "@/state/organizations.js";
 import { useSubscriptions } from "@/state/subscriptions.js";
 
 // Components
+import ViewHeader from "@/components/generic/view-header/ViewHeader.vue";
+import GoBackButton from "@/components/specific/app/go-back-button/GoBackButton.vue";
 import BillingsTable from "@/components/specific/subscriptions/billings-table/BillingsTable.vue";
 import InvoicesTable from "@/components/specific/subscriptions/invoices-table/InvoicesTable.vue";
 import SubscribeCard from "@/components/specific/subscriptions/subscribe-card/SubscribeCard.vue";
 
 export default {
   components: {
     BillingsTable,
+    GoBackButton,
     InvoicesTable,
-    SubscribeCard
+    SubscribeCard,
+    ViewHeader
   },
   setup() {
     const { userOrganizations } = useOrganizations();
@@ -85,9 +94,17 @@ export default {
         );
 
         let allPayments = await Promise.all(
-          subscriptions.value.map(sub => {
-            return loadSubscriptionPayments(selectedOrga.value, sub.cloud, sub);
-          })
+          subscriptions.value
+            // TODO: this is to avoid errors when fetching payments of a deleted space.
+            // Should be removed when a solution is found.
+            .filter(sub => sub.cloud)
+            .map(sub => {
+              return loadSubscriptionPayments(
+                selectedOrga.value,
+                sub.cloud,
+                sub
+              );
+            })
         );
 
         const tomorrow = new Date();