From 364ffeb4d5821c1fa4f2839a77213625a4047121 Mon Sep 17 00:00:00 2001
From: "Jared.K" <3268576+jaredkotoff@users.noreply.github.com>
Date: Wed, 8 Nov 2023 00:37:46 -0800
Subject: [PATCH] Add total time to recipe cards with a toggle switch

---
 frontend/components/Domain/Recipe/RecipeCard.vue  | 15 +++++++++++++--
 .../components/Domain/Recipe/RecipeCardMobile.vue | 13 +++++++++++++
 .../Domain/Recipe/RecipeCardSection.vue           |  8 ++++++++
 .../Domain/Recipe/RecipeExplorerPage.vue          |  8 ++++++++
 frontend/lang/messages/en-US.json                 |  3 ++-
 5 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeCard.vue b/frontend/components/Domain/Recipe/RecipeCard.vue
index 4499cdb989c..cdb130f550d 100644
--- a/frontend/components/Domain/Recipe/RecipeCard.vue
+++ b/frontend/components/Domain/Recipe/RecipeCard.vue
@@ -31,7 +31,9 @@
             {{ name }}
           </div>
         </v-card-title>
-
+        <v-card-text v-if="totalTime && displayTotalTimes" class="px-1 pt-1 pb-0">
+          <RecipeTimeCard :total-time="totalTime"/>
+        </v-card-text>
         <slot name="actions">
           <v-card-actions class="px-1">
             <RecipeFavoriteBadge v-if="isOwnGroup" class="absolute" :slug="slug" show-always />
@@ -74,10 +76,11 @@ import RecipeChips from "./RecipeChips.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
 import RecipeRating from "./RecipeRating.vue";
+import RecipeTimeCard from "./RecipeTimeCard.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 
 export default defineComponent({
-  components: { RecipeFavoriteBadge, RecipeChips, RecipeContextMenu, RecipeRating, RecipeCardImage },
+  components: { RecipeFavoriteBadge, RecipeChips, RecipeContextMenu, RecipeRating, RecipeCardImage, RecipeTimeCard },
   props: {
     name: {
       type: String,
@@ -117,6 +120,14 @@ export default defineComponent({
       type: Number,
       default: 200,
     },
+    totalTime: {
+      type: Number,
+      default: 0
+    },
+    displayTotalTimes: {
+      type: Boolean,
+      default: false
+    }
   },
   setup(props) {
     const { $auth } = useContext();
diff --git a/frontend/components/Domain/Recipe/RecipeCardMobile.vue b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
index 8f46d2f6b47..e30df05d705 100644
--- a/frontend/components/Domain/Recipe/RecipeCardMobile.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
@@ -35,6 +35,9 @@
           <v-list-item-subtitle>
             <SafeMarkdown :source="description" />
           </v-list-item-subtitle>
+          <v-card-text v-if="totalTime && displayTotalTimes" class="px-0 py-0 mb-0">
+            <RecipeTimeCard :total-time="totalTime"/>
+          </v-card-text>
           <div class="d-flex flex-wrap justify-end align-center">
             <slot name="actions">
               <RecipeFavoriteBadge v-if="isOwnGroup" :slug="slug" show-always />
@@ -83,6 +86,7 @@ import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composi
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
+import RecipeTimeCard from "./RecipeTimeCard.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 
 export default defineComponent({
@@ -90,6 +94,7 @@ export default defineComponent({
     RecipeFavoriteBadge,
     RecipeContextMenu,
     RecipeCardImage,
+    RecipeTimeCard,
   },
   props: {
     name: {
@@ -129,6 +134,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    totalTime: {
+      type: Number,
+      default: 0,
+    },
+    displayTotalTimes: {
+      type: Boolean,
+      default: false
+    }
   },
   setup(props) {
     const { $auth } = useContext();
diff --git a/frontend/components/Domain/Recipe/RecipeCardSection.vue b/frontend/components/Domain/Recipe/RecipeCardSection.vue
index ecdfe9e7a33..58911af695c 100644
--- a/frontend/components/Domain/Recipe/RecipeCardSection.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue
@@ -81,6 +81,8 @@
               :image="recipe.image"
               :tags="recipe.tags"
               :recipe-id="recipe.id"
+              :total-time="recipe.totalTime"
+              :display-total-times="displayTotalTimes"
             />
           </v-lazy>
         </v-col>
@@ -104,6 +106,8 @@
               :image="recipe.image"
               :tags="recipe.tags"
               :recipe-id="recipe.id"
+              :total-time="recipe.totalTime"
+              :display-total-times="displayTotalTimes"
             />
           </v-lazy>
         </v-col>
@@ -173,6 +177,10 @@ export default defineComponent({
       type: Object as () => RecipeSearchQuery,
       default: null,
     },
+    displayTotalTimes: {
+      type: Boolean,
+      default: false
+    }
   },
   setup(props, context) {
     const preferences = useUserSortPreferences();
diff --git a/frontend/components/Domain/Recipe/RecipeExplorerPage.vue b/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
index 72c47cebbc6..bb005346edc 100644
--- a/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
@@ -100,6 +100,7 @@
             <v-card>
               <v-card-text>
                 <v-switch v-model="state.auto" :label="$t('search.auto-search')" single-line></v-switch>
+                <v-switch v-model="state.displayTotalTimes" :label="$t('search.display-total-times')" single-line></v-switch>
                 <v-btn block color="primary" @click="reset">
                   {{ $tc("general.reset") }}
                 </v-btn>
@@ -125,6 +126,7 @@
         :title="$tc('search.results')"
         :recipes="recipes"
         :query="passedQuery"
+        :display-total-times="state.displayTotalTimes"
         @replaceRecipes="replaceRecipes"
         @appendRecipes="appendRecipes"
       />
@@ -157,6 +159,7 @@ export default defineComponent({
     const { isOwnGroup } = useLoggedInState();
     const state = ref({
       auto: true,
+      displayTotalTimes: true,
       search: "",
       orderBy: "created_at",
       orderDirection: "desc" as "asc" | "desc",
@@ -230,6 +233,7 @@ export default defineComponent({
           // Only add the query param if it's or not default
           ...{
             auto: state.value.auto ? undefined : "false",
+            displayTotalTimes: state.value.displayTotalTimes ? undefined : "false",
             search: state.value.search === "" ? undefined : state.value.search,
             orderBy: state.value.orderBy === "createdAt" ? undefined : state.value.orderBy,
             orderDirection: state.value.orderDirection === "desc" ? undefined : state.value.orderDirection,
@@ -336,6 +340,10 @@ export default defineComponent({
         state.value.auto = query.auto === "true";
       }
 
+      if (query.auto) {
+        state.value.displayTotalTimes = query.displayTotalTimes === "true";
+      }
+
       if (query.search) {
         state.value.search = query.search as string;
       }
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index e107864591d..b48b2719b85 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -561,7 +561,8 @@
     "tag-filter": "Tag Filter",
     "search-hint": "Press '/'",
     "advanced": "Advanced",
-    "auto-search": "Auto Search"
+    "auto-search": "Auto Search",
+    "display-total-times": "Display Total Times"
   },
   "settings": {
     "add-a-new-theme": "Add a New Theme",