[@dhealthdapps/frontend] fix(screens): add fallback message for an em…

…pty data
dhealthproject · Jan 11, 2023 · 8c91af5 · 8c91af5
1 parent 351c384
commit 8c91af5
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/runtime/dapp-frontend-vue/resources/i18n/en/Common.json b/runtime/dapp-frontend-vue/resources/i18n/en/Common.json
@@ -20,6 +20,7 @@
         "dropdown_refer_earn": "Refer and Earn",
         "disconnect_wallet": "Disconnect wallet",
         "activities": "Activities",
-        "amount_earned": "$ACTIV earned"
+        "amount_earned": "$ACTIV earned",
+        "no_activities": "You don't have any activities currently."
     }
 }
diff --git a/runtime/dapp-frontend-vue/src/views/Activities/Activities.vue b/runtime/dapp-frontend-vue/src/views/Activities/Activities.vue
@@ -58,31 +58,36 @@
             {{ activityTitle }}
           </div>
         </div>
-        <div
-          class="row"
-          v-for="(item, index) in activityItems"
-          :key="index + item.distance"
-        >
-          <div class="item">
-            <img
-              v-if="item.sport"
-              :src="getImageUrl(`activities-icons/${item.sport}.svg`)"
-              :alt="item.sport"
+        <div v-if="activityItems?.length" class="table-values">
+          <div
+            class="row"
+            v-for="(item, index) in activityItems"
+            :key="index + item.distance"
+          >
+            <div class="item">
+              <img
+                v-if="item.sport"
+                :src="getImageUrl(`activities-icons/${item.sport}.svg`)"
+                :alt="item.sport"
+              />
+              {{ item.sport }}
+            </div>
+            <div class="item" v-html="item.elapsedTime" />
+            <div class="item" v-html="item.distance" />
+            <div class="item" v-html="item.elevationGain" />
+            <div class="item" v-html="item.avgPace" />
+            <div
+              class="item"
+              v-html="
+                item.assets[0] && item.assets[0].amount
+                  ? item.assets[0].amount
+                  : 0
+              "
             />
-            {{ item.sport }}
           </div>
-          <div class="item" v-html="item.elapsedTime" />
-          <div class="item" v-html="item.distance" />
-          <div class="item" v-html="item.elevationGain" />
-          <div class="item" v-html="item.avgPace" />
-          <div
-            class="item"
-            v-html="
-              item.assets[0] && item.assets[0].amount
-                ? item.assets[0].amount
-                : 0
-            "
-          />
+        </div>
+        <div v-else class="flex items-center justify-center">
+          <h2 class="py-3" v-html="$t('common.no_activities')" />
         </div>
       </div>
     </div>