From 7fc9c1a0ecafc05d1ded510426120384bd298a31 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Wed, 21 Apr 2021 21:49:56 -0800
Subject: [PATCH] fix timecard display

---
 .../src/components/Recipe/RecipeTimeCard.vue  | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Recipe/RecipeTimeCard.vue b/frontend/src/components/Recipe/RecipeTimeCard.vue
index 86e2181d4..642465550 100644
--- a/frontend/src/components/Recipe/RecipeTimeCard.vue
+++ b/frontend/src/components/Recipe/RecipeTimeCard.vue
@@ -3,7 +3,7 @@
     color="accent"
     class="custom-transparent d-flex justify-start align-center text-center time-card-flex"
     tile
-    v-if="totalTime || prepTime || performTime"
+    v-if="showCards"
   >
     <v-card flat color="rgb(255, 0, 0, 0.0)">
       <v-icon large color="white" class="mx-2"> mdi-clock-outline </v-icon>
@@ -16,7 +16,7 @@
       flat
       color="rgb(255, 0, 0, 0.0)"
     >
-      <v-card-text class="white--text py-2">
+      <v-card-text class="caption white--text py-2">
         <div>
           <strong> {{ time.name }} </strong>
         </div>
@@ -33,30 +33,45 @@ export default {
     totalTime: String,
     performTime: String,
   },
+  watch: {
+    showCards(val) {
+      console.log(val);
+    },
+  },
   computed: {
+    showCards() {
+      return [this.prepTime, this.totalTime, this.performTime].some(
+        x => !this.isEmpty(x)
+      );
+    },
     allTimes() {
       return [
         this.validateTotalTime,
         this.validatePrepTime,
         this.validatePerformTime,
-      ];
+      ].filter(x => x !== null);
     },
     validateTotalTime() {
-      return this.prepTime
-        ? { name: this.$t("recipe.prep-time"), value: this.prepTime }
+      return !this.isEmpty(this.totalTime)
+        ? { name: this.$t("recipe.total-time"), value: this.totalTime }
         : null;
     },
     validatePrepTime() {
-      return this.prepTime
+      return !this.isEmpty(this.prepTime)
         ? { name: this.$t("recipe.prep-time"), value: this.prepTime }
         : null;
     },
     validatePerformTime() {
-      return this.prepTime
+      return !this.isEmpty(this.performTime)
         ? { name: this.$t("recipe.perform-time"), value: this.performTime }
         : null;
     },
   },
+  methods: {
+    isEmpty(str) {
+      return !str || str.length === 0;
+    },
+  },
 };
 </script>