From bd317858bf21862f519df3cef8e90682fbeb03f0 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sat, 23 Mar 2024 21:57:42 +0100
Subject: [PATCH] number scaler

---
 vue3/package.json                             |   2 +-
 vue3/src/components/display/RecipeView.vue    | 100 +++++++++---------
 .../components/inputs/NumberScalerDialog.vue  |  29 +++--
 .../components/inputs/RecipeContextMenu.vue   |   2 +-
 vue3/yarn.lock                                |   8 +-
 5 files changed, 71 insertions(+), 70 deletions(-)

diff --git a/vue3/package.json b/vue3/package.json
index 953ba59d2..5929fda4f 100644
--- a/vue3/package.json
+++ b/vue3/package.json
@@ -19,7 +19,7 @@
     "vue-multiselect": "^3.0.0-beta.3",
     "vue-router": "4",
     "vuedraggable": "^4.1.0",
-    "vuetify": "^3.5.8"
+    "vuetify": "^3.5.10"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.5.1",
diff --git a/vue3/src/components/display/RecipeView.vue b/vue3/src/components/display/RecipeView.vue
index 2f8a1bacc..442b159db 100644
--- a/vue3/src/components/display/RecipeView.vue
+++ b/vue3/src/components/display/RecipeView.vue
@@ -1,61 +1,65 @@
 <template>
 
+    <template v-if="recipe.name != undefined">
 
-    <v-card class="mt-md-4">
 
-        <v-img max-height="25vh" cover lazy :src="recipe.image" v-if="recipe.image != undefined" class="align-end">
-            <KeywordsComponent variant="flat" class="ms-1 mb-2" :keywords="recipe.keywords"></KeywordsComponent>
-        </v-img>
+        <v-card class="mt-md-4">
+
+            <v-img max-height="25vh" cover lazy :src="recipe.image" v-if="recipe.image != undefined" class="align-end">
+                <KeywordsComponent variant="flat" class="ms-1 mb-2" :keywords="recipe.keywords"></KeywordsComponent>
+            </v-img>
+
+            <v-card>
+                <v-sheet class="d-flex align-center">
+                    <span class="ps-2 text-h5 text-truncate flex-grow-1">{{ recipe.name }}</span>
+                    <recipe-context-menu :recipe="recipe"></recipe-context-menu>
+                </v-sheet>
+            </v-card>
+
+            <!--        <v-card class="mt-1">-->
+            <!--            <v-sheet class="d-flex ">-->
+            <!--                <span class="ps-2 text-h5 flex-grow-1">{{ recipe.name }}</span>-->
+            <!--                <recipe-context-menu :recipe="recipe"></recipe-context-menu>-->
+            <!--            </v-sheet>-->
+            <!--        </v-card>-->
 
-        <v-card>
-            <v-sheet class="d-flex align-center">
-                <span class="ps-2 text-h5 text-truncate flex-grow-1">{{ recipe.name }}</span>
-                <recipe-context-menu :recipe="recipe"></recipe-context-menu>
-            </v-sheet>
         </v-card>
 
-<!--        <v-card class="mt-1">-->
-<!--            <v-sheet class="d-flex ">-->
-<!--                <span class="ps-2 text-h5 flex-grow-1">{{ recipe.name }}</span>-->
-<!--                <recipe-context-menu :recipe="recipe"></recipe-context-menu>-->
-<!--            </v-sheet>-->
-<!--        </v-card>-->
+        <v-card class="mt-1">
+            <v-container>
+                <v-row class="text-center text-body-2">
+                    <v-col class="pt-1 pb-1">
+                        <i class="fas fa-cogs"></i> {{ recipe.workingTime }} min<br/>
+                        <div class="text-grey">Working Time</div>
+                    </v-col>
+                    <v-col class="pt-1 pb-1">
+                        <div><i class="fas fa-hourglass-half"></i> {{ recipe.waitingTime }} min</div>
+                        <div class="text-grey">Waiting Time</div>
+                    </v-col>
+                    <v-col class="pt-1 pb-1">
+                        <NumberScalerDialog :number="servings" @change="servings = $event.number" title="Servings">
+                            <template #activator>
+                                <div class="cursor-pointer">
+                                    <i class="fas fa-calendar-alt"></i> {{ servings }} <br/>
+                                    <div class="text-grey"><span v-if="recipe?.servingsText">{{ recipe.servingsText }}</span><span v-else>Servings</span></div>
+                                </div>
+                            </template>
+                        </NumberScalerDialog>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-card>
 
-    </v-card>
+        <v-card class="mt-1" v-if="recipe.steps.length > 1">
+            <StepsOverview :steps="recipe.steps"></StepsOverview>
+        </v-card>
 
-    <v-card class="mt-1">
-        <v-container>
-            <v-row class="text-center text-body-2">
-                <v-col class="pt-1 pb-1">
-                    <i class="fas fa-cogs"></i> {{ recipe.workingTime }} min<br/>
-                    <div class="text-grey">Working Time</div>
-                </v-col>
-                <v-col class="pt-1 pb-1">
-                    <div><i class="fas fa-hourglass-half"></i> {{ recipe.waitingTime }} min</div>
-                    <div class="text-grey">Waiting Time</div>
-                </v-col>
-                <v-col class="pt-1 pb-1">
-                    <NumberScalerDialog :number="servings" @change="servings = $event.number" title="Servings">
-                        <template #activator>
-                            <i class="fas fa-calendar-alt"></i> {{ 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>
-        </v-container>
-    </v-card>
-
-    <v-card class="mt-1" v-if="recipe.steps.length > 1">
-        <StepsOverview :steps="recipe.steps"></StepsOverview>
-    </v-card>
-
-    <v-card class="mt-1" v-for="s in recipe.steps" :key="s.id">
-        <Step :step="s" :ingredient_factor="ingredient_factor"></Step>
-    </v-card>
-
-    <!--    <RecipeActivity :recipe="recipe"></RecipeActivity>-->
+        <v-card class="mt-1" v-for="s in recipe.steps" :key="s.id">
+            <Step :step="s" :ingredient_factor="ingredient_factor"></Step>
+        </v-card>
 
+        <!--    <RecipeActivity :recipe="recipe"></RecipeActivity>-->
+    </template>
 </template>
 
 <script lang="ts">
diff --git a/vue3/src/components/inputs/NumberScalerDialog.vue b/vue3/src/components/inputs/NumberScalerDialog.vue
index d4af62032..62abe9af8 100644
--- a/vue3/src/components/inputs/NumberScalerDialog.vue
+++ b/vue3/src/components/inputs/NumberScalerDialog.vue
@@ -8,29 +8,25 @@
 
         <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-number-input v-model="mutable_number" @update:modelValue="updateNumber('set')" control-variant="split" :min="0" >
+                    </v-number-input>
+
+                    <v-btn-group divided class="d-flex">
+                        <v-btn  variant="tonal" class="flex-grow-1" @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 variant="tonal" class="flex-grow-1" @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-spacer></v-spacer>
+                    <v-btn class="float-right" rounded @click="dialog = false">Close</v-btn>
                 </v-card-actions>
             </v-card>
 
@@ -41,9 +37,10 @@
 <script lang="ts">
 
 import {defineComponent} from 'vue'
-
+import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
 export default defineComponent({
     name: "NumberScalerDialog",
+    components: {VNumberInput},
     emits: {
         change(payload: { number: number }) {
             return payload
diff --git a/vue3/src/components/inputs/RecipeContextMenu.vue b/vue3/src/components/inputs/RecipeContextMenu.vue
index a29914538..4639cab4b 100644
--- a/vue3/src/components/inputs/RecipeContextMenu.vue
+++ b/vue3/src/components/inputs/RecipeContextMenu.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <v-menu open-on-hover open-delay="0" :open-on-click="true">
+    <v-menu open-on-hover open-delay="0" :open-on-click="true" location="start">
         <template v-slot:activator="{ props }">
             <v-btn v-bind="props" icon="fas fa-ellipsis-v" variant="plain"></v-btn>
         </template>
diff --git a/vue3/yarn.lock b/vue3/yarn.lock
index 6d4a414db..3d82bc20c 100644
--- a/vue3/yarn.lock
+++ b/vue3/yarn.lock
@@ -936,10 +936,10 @@ vuedraggable@^4.1.0:
   dependencies:
     sortablejs "1.14.0"
 
-vuetify@^3.5.8:
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.5.8.tgz#bc8f08dfd3314640e7b5d43b50138a26d650cbbf"
-  integrity sha512-8nGS+lKejZkev55HFwIfsRt+9fOqbeDQNmXxfmLKAlnUT8FtynVwbjAwHMtX/OQAQ3ZwRaR1ptqQQmx3OgxzbQ==
+vuetify@^3.5.10:
+  version "3.5.11"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.5.11.tgz#9e5b628544e736de0b7f236b704539d544588152"
+  integrity sha512-us5I0jyFwIQYG4v41PFmVMkoc/oJddVT4C2RFjJTI99ttigbQ92gsTeG5SB8BPfmfnUS4paR5BedZwk6W3KlJw==
 
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"