From 644be2d59b8e4a2c6368ac8eb742ed4b84e0752b Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sat, 24 Feb 2024 11:14:58 +0100
Subject: [PATCH] some more things in recipe view

---
 vue3/src/apps/tandoor/Tandoor.vue             | 31 ++----
 vue3/src/apps/tandoor/main.ts                 |  4 +-
 ...{KeywordsComponent.vue => KeywordsBar.vue} |  2 +-
 ...RecipeCardComponent.vue => RecipeCard.vue} |  4 +-
 ...RecipeViewComponent.vue => RecipeView.vue} | 58 +++++------
 .../components/inputs/NumberScalerDialog.vue  | 98 +++++++++++++++++++
 vue3/src/pages/RecipeSearchPage.vue           |  4 +-
 vue3/src/pages/RecipeViewPage.vue             |  8 +-
 8 files changed, 144 insertions(+), 65 deletions(-)
 rename vue3/src/components/display/{KeywordsComponent.vue => KeywordsBar.vue} (91%)
 rename vue3/src/components/display/{RecipeCardComponent.vue => RecipeCard.vue} (92%)
 rename vue3/src/components/display/{RecipeViewComponent.vue => RecipeView.vue} (52%)
 create mode 100644 vue3/src/components/inputs/NumberScalerDialog.vue

diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index 90f57eeb4..bde11d1db 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -1,35 +1,20 @@
 <template>
     <v-app>
-        <v-layout>
-            <v-navigation-drawer v-model="drawer"
-                                 :rail="rail"
-                                 permanent
-                                 @click="rail = false">
-                <v-list-item @click="drawer = false">
-                    <v-img src="../../assets/logo_color.svg" height="48px" v-if="rail"></v-img>
-                    <v-img src="../../assets/brand_logo.svg" max-height="64px" v-if="!rail"></v-img>
-                </v-list-item>
-                <v-divider></v-divider>
-                <v-list density="compact" nav>
-                    <v-list-item prepend-icon="fas fa-book" title="Home" value="home"></v-list-item>
-                    <v-list-item prepend-icon="fas fa-calendar-alt" title="My Account" value="account"></v-list-item>
-                    <v-list-item prepend-icon="fas fa-shopping-cart" title="Users" value="users"></v-list-item>
-                    <v-list-item prepend-icon="fas fa-book-open" title="Users" value="users"></v-list-item>
-                </v-list>
-                <v-divider></v-divider>
-            </v-navigation-drawer>
 
-            <v-app-bar color="tandoor" flat>
+
+            <v-app-bar color="tandoor" flat density="compact" >
                 <template v-slot:prepend>
-                    <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+                    Tandoor Brand Logo
                 </template>
 
-
+                <v-spacer></v-spacer>
+                <v-btn density="compact" icon="fas fa-search"></v-btn>
+                <v-btn density="compact" icon="fas fa-ellipsis-v"></v-btn>
             </v-app-bar>
 
 
             <v-main>
-                <v-container fluid class="pa-0 ma-0">
+                <v-container class="pa-0 ma-0">
                     <router-view></router-view>
                 </v-container>
             </v-main>
@@ -57,7 +42,7 @@
                     <span>Books</span>
                 </v-btn>
             </v-bottom-navigation>
-        </v-layout>
+
 
 
     </v-app>
diff --git a/vue3/src/apps/tandoor/main.ts b/vue3/src/apps/tandoor/main.ts
index b727fbc12..8128e13b4 100644
--- a/vue3/src/apps/tandoor/main.ts
+++ b/vue3/src/apps/tandoor/main.ts
@@ -15,8 +15,10 @@ const routes = [
     {path: '/', redirect: '/search', name: 'index'},
     {path: '/search', component: RecipeSearchPage, name: 'view_search'},
     {path: '/shopping', component: ShoppingListPage, name: 'view_shopping'},
+    {path: '/mealplan', component: ShoppingListPage, name: 'view_mealplan'},
+    {path: '/books', component: ShoppingListPage, name: 'view_books'},
     {path: '/recipe/:id', component: RecipeViewPage, name: 'view_recipe', props: true},
-    {path: '/recipe/edit/:id', component: RecipeViewPage, name: 'view_recipe', props: true},
+    {path: '/recipe/edit/:id', component: RecipeViewPage, name: 'edit_recipe', props: true},
 ]
 
 const router = createRouter({
diff --git a/vue3/src/components/display/KeywordsComponent.vue b/vue3/src/components/display/KeywordsBar.vue
similarity index 91%
rename from vue3/src/components/display/KeywordsComponent.vue
rename to vue3/src/components/display/KeywordsBar.vue
index fec98280c..a0d134e6a 100644
--- a/vue3/src/components/display/KeywordsComponent.vue
+++ b/vue3/src/components/display/KeywordsBar.vue
@@ -10,7 +10,7 @@ import {Keyword} from "@/openapi";
 import {PropType} from "vue";
 
 export default {
-    name: 'KeywordsComponent',
+    name: 'KeywordsBar',
     mixins: [],
     props: {
         keywords: Array as PropType<Array<Keyword>>,
diff --git a/vue3/src/components/display/RecipeCardComponent.vue b/vue3/src/components/display/RecipeCard.vue
similarity index 92%
rename from vue3/src/components/display/RecipeCardComponent.vue
rename to vue3/src/components/display/RecipeCard.vue
index d91060962..ac19d5121 100644
--- a/vue3/src/components/display/RecipeCardComponent.vue
+++ b/vue3/src/components/display/RecipeCard.vue
@@ -39,11 +39,11 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
-import KeywordsComponent from "@/components/display/KeywordsComponent.vue";
+import KeywordsComponent from "@/components/display/KeywordsBar.vue";
 import {Recipe} from "@/openapi";
 
 export default defineComponent({
-    name: "RecipeCardComponent",
+    name: "RecipeCard",
     components: {KeywordsComponent},
     props: {
         recipe: {} as Recipe
diff --git a/vue3/src/components/display/RecipeViewComponent.vue b/vue3/src/components/display/RecipeView.vue
similarity index 52%
rename from vue3/src/components/display/RecipeViewComponent.vue
rename to vue3/src/components/display/RecipeView.vue
index 443151baa..5a4610600 100644
--- a/vue3/src/components/display/RecipeViewComponent.vue
+++ b/vue3/src/components/display/RecipeView.vue
@@ -1,13 +1,12 @@
 <template>
-    <v-card to="/search">
-        <v-card-title><i class="fas fa-chevron-left mr-3"></i>{{ recipe.name }}</v-card-title>
-    </v-card>
 
     <v-img cover lazy :src="recipe.image"></v-img>
 
 
     <v-card>
 
+        <v-card-title>{{ recipe.name }}</v-card-title>
+
         <v-container>
             <v-row class="text-center text-body-2">
                 <v-col class="pt-1 pb-1">
@@ -19,8 +18,14 @@
                     <div class="text-grey">Waiting Time</div>
                 </v-col>
                 <v-col class="pt-1 pb-1">
-                    <i class="fas fa-calendar-alt"></i> {{ recipe.servings }} <br/>
-                    <div class="text-grey"><span v-if="recipe?.servingsText">{{ recipe.servingsText }}</span><span v-else>Servings</span></div>
+                    <NumberScalerDialog :number="recipe.servings" @change="recipe.servings = $event.number" title="Servings">
+                        <template #activator>
+                            <i class="fas fa-calendar-alt"></i> {{ recipe.servings }} <br/>
+                            <div class="text-grey"><span v-if="recipe?.servingsText">{{ recipe.servingsText }}</span><span v-else>Servings</span></div>
+                        </template>
+                    </NumberScalerDialog>
+
+
                 </v-col>
 
             </v-row>
@@ -28,7 +33,7 @@
 
         <v-card-subtitle v-if="recipe?.description"> {{ recipe.description }}</v-card-subtitle>
         <v-card-subtitle>
-            <KeywordsComponent :keywords="recipe?.keywords"></KeywordsComponent>
+            <KeywordsBar :keywords="recipe?.keywords"></KeywordsBar>
         </v-card-subtitle>
 
 
@@ -42,44 +47,33 @@
                 <v-icon icon="fas fa-hourglass-half" class="mr-2"></v-icon>
                 {{ recipe.waitingTime }} min
             </v-chip>
+            <v-chip size="small" color="primary" label>
+                <v-icon icon="fas fa-calendar" class="mr-2"></v-icon>
+                {{ recipe.lastCooked }}
+            </v-chip>
+            <v-rating v-model="recipe.rating" color="tandoor"></v-rating>
 
         </v-card-text>
     </v-card>
 
-    <v-btn color="primary" id="id_btn_test">test</v-btn>
-
-    <v-dialog
-    activator="parent">
-
-
-        <template #default>
-            <v-card title="Servings">
-                <v-card-text>
-                    <v-btn>{{recipe.servings / 2}}</v-btn>
-                    <v-text-field v-model="recipe.servings">
-                        <template #append><v-btn @click="recipe.servings++">+</v-btn></template>
-                        <template #prepend><v-btn @click="recipe.servings--">-</v-btn></template>
-                    </v-text-field>
-                    <v-btn>{{recipe.servings * 2}}</v-btn>
-                </v-card-text>
-
-
-            </v-card>
-        </template>
-    </v-dialog>
 
 </template>
 
 <script lang="ts">
+
 import {defineComponent, PropType} from 'vue'
-import {Recipe} from "@/openapi";
-import KeywordsComponent from "@/components/display/KeywordsComponent.vue";
+import {Recipe} from "@/openapi"
+import KeywordsBar from "@/components/display/KeywordsBar.vue"
+import NumberScalerDialog from "@/components/inputs/NumberScalerDialog.vue"
 
 export default defineComponent({
-    name: "RecipeViewComponent",
-    components: {KeywordsComponent},
+    name: "RecipeView",
+    components: {NumberScalerDialog, KeywordsBar},
     props: {
-        recipe: {} as PropType<Recipe>
+        recipe: {
+            type: Object as PropType<Recipe>,
+            required: true
+        }
     }
 })
 </script>
diff --git a/vue3/src/components/inputs/NumberScalerDialog.vue b/vue3/src/components/inputs/NumberScalerDialog.vue
new file mode 100644
index 000000000..d4af62032
--- /dev/null
+++ b/vue3/src/components/inputs/NumberScalerDialog.vue
@@ -0,0 +1,98 @@
+<template>
+    <v-dialog width="500" activator="parent" v-model="dialog">
+        <template v-slot:activator="{ props }">
+            <slot name="activator">
+                <v-btn v-bind="props" text="Open Dialog"></v-btn>
+            </slot>
+        </template>
+
+        <template v-slot:default="{ isActive }">
+            <v-card :title="title">
+                <v-card-text>
+                    Change Number
+                </v-card-text>
+
+                <v-card-text>
+                    <v-btn-group divided color="primary">
+                        <v-btn @click="updateNumber( 'half')"><i class="fas fa-divide"></i> 2
+                        </v-btn>
+                        <v-btn @click="updateNumber( 'sub')"><i class="fas fa-minus"></i>
+                        </v-btn>
+                        <v-btn @click="updateNumber('prompt')">
+                            {{ mutable_number }}
+                        </v-btn>
+                        <v-btn @click="updateNumber( 'add')"><i class="fas fa-plus"></i>
+                        </v-btn>
+                        <v-btn @click="updateNumber('double')"><i class="fas fa-times"></i> 2
+                        </v-btn>
+                    </v-btn-group>
+
+                    <v-text-field type="number" v-model.number="mutable_number" @change="updateNumber('set')"></v-text-field>
+                </v-card-text>
+                <v-card-actions>
+                    <v-btn rounded variant="outlined" @click="dialog = false">Close</v-btn>
+                </v-card-actions>
+            </v-card>
+
+        </template>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+    name: "NumberScalerDialog",
+    emits: {
+        change(payload: { number: number }) {
+            return payload
+        }
+    },
+    props: {
+        number: {type: Number, default: 0},
+        title: {type: String, default: 'Number'}
+    },
+    data() {
+        return {
+            dialog: false,
+            mutable_number: 0
+        }
+    },
+    watch: {
+        number: function (newVal) {
+            this.mutable_number = newVal
+        }
+    },
+    mounted() {
+        this.mutable_number = this.number
+    },
+    methods: {
+        /**
+         * perform given operation on linked number
+         * @param operation update mode
+         */
+        updateNumber: function (operation: string) {
+            if (operation === 'half') {
+                this.mutable_number = this.number / 2
+            }
+            if (operation === 'double') {
+                this.mutable_number = this.number * 2
+            }
+            if (operation === 'add') {
+                this.mutable_number = this.number + 1
+            }
+            if (operation === 'sub') {
+                this.mutable_number = this.number - 1
+            }
+
+            this.$emit('change', {number: this.mutable_number})
+        }
+    },
+})
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue3/src/pages/RecipeSearchPage.vue b/vue3/src/pages/RecipeSearchPage.vue
index dd9b39a25..464f3cac6 100644
--- a/vue3/src/pages/RecipeSearchPage.vue
+++ b/vue3/src/pages/RecipeSearchPage.vue
@@ -13,8 +13,8 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 import {ApiApi, Recipe} from "@/openapi";
-import KeywordsComponent from "@/components/display/KeywordsComponent.vue";
-import RecipeCardComponent from "@/components/display/RecipeCardComponent.vue";
+import KeywordsComponent from "@/components/display/KeywordsBar.vue";
+import RecipeCardComponent from "@/components/display/RecipeCard.vue";
 
 export default defineComponent({
     name: "RecipeSearchPage",
diff --git a/vue3/src/pages/RecipeViewPage.vue b/vue3/src/pages/RecipeViewPage.vue
index e75060e2f..52af996db 100644
--- a/vue3/src/pages/RecipeViewPage.vue
+++ b/vue3/src/pages/RecipeViewPage.vue
@@ -1,17 +1,17 @@
 <template>
-    <RecipeViewComponent :recipe="recipe"></RecipeViewComponent>
+    <RecipeView :recipe="recipe"></RecipeView>
 </template>
 
 <script lang="ts">
 import {defineComponent} from 'vue'
 import {ApiApi, Recipe} from "@/openapi";
-import RecipeViewComponent from "@/components/display/RecipeViewComponent.vue";
+import RecipeView from "@/components/display/RecipeView.vue";
 
 export default defineComponent({
     name: "RecipeSearchPage",
-    components: {RecipeViewComponent},
+    components: {RecipeView},
     props: {
-        id: Number
+        id: {type: String, required: true}
     },
     data() {
         return {