Merge pull request #1108 from nextcloud/fix/1042-recipeyield-optional

Make recipeYield optional

Author: christianlupus

CHANGELOG.md

@@ -13,6 +13,8 @@
   [#1103](https://github.com./nextcloud/cookbook/pull/1103) @MarcelRobitaille
 - Replace print icon with something better recognizable
   [#1106](https://github.com./nextcloud/cookbook/pull/1106) @christianlupus
+- Make recipeYield optional
+  [#1108](https://github.com./nextcloud/cookbook/pull/1108) @christianlupus
 
 ### Maintenance
 - Add composer.json to version control to have unique installed dependency versions

lib/Helper/Filter/JSON/FixRecipeYieldFilter.php

@@ -56,6 +56,10 @@ public function apply(array &$json): bool {
 			return true;
 		}
 
+		if ($json[self::YIELD] === null) {
+			return $changed;
+		}
+
 		if (is_array($json[self::YIELD])) {
 			assert(count($json[self::YIELD]) !== 1);
 

src/components/EditInputField.vue

@@ -9,13 +9,16 @@
             v-model="content"
             @input="handleInput"
         />
-        <input
-            v-else
-            ref="inputField"
-            v-model="content"
-            :type="fieldType"
-            @input="handleInput"
-        />
+        <div v-else>
+            <slot />
+            <input
+                v-if="!hide"
+                ref="inputField"
+                v-model="content"
+                :type="fieldType"
+                @input="handleInput"
+            />
+        </div>
     </fieldset>
 </template>
 
@@ -41,6 +44,11 @@ export default {
             default: "",
             required: true,
         },
+        hide: {
+            type: Boolean,
+            default: false,
+            required: false,
+        },
     },
     data() {
         return {
@@ -196,13 +204,17 @@ fieldset > label {
     vertical-align: top;
 }
 
-fieldset > input,
+fieldset > div,
 fieldset > textarea {
     width: revert;
     flex: 1;
 }
 
-fieldset > input[type="number"] {
+fieldset > div > input {
+    width: 100%;
+}
+
+fieldset input[type="number"] {
     width: 5em;
     flex-grow: 0;
 }

src/components/RecipeEdit.vue

@@ -58,7 +58,20 @@
             v-model="recipe['recipeYield']"
             :field-type="'number'"
             :field-label="t('cookbook', 'Servings')"
-        />
+            :hide="!showRecipeYield"
+        >
+            <actions>
+                <action-button
+                    class="btn-enable-recipe-yield"
+                    :aria-label="
+                        t('cookbook', 'Toggle if recipe yield field is present')
+                    "
+                    @click="toggleShowRecipeYield"
+                >
+                    <template #icon><numeric-icon :size="20" /></template>
+                </action-button>
+            </actions>
+        </EditInputField>
         <EditMultiselectInputGroup
             v-model="recipe['nutrition']"
             :field-label="t('cookbook', 'Nutrition Information')"
@@ -120,6 +133,10 @@ import Vue from "vue"
 
 import api from "cookbook/js/api-interface"
 import helpers from "cookbook/js/helper"
+import NumericIcon from "icons/Numeric.vue"
+
+import Actions from "@nextcloud/vue/dist/Components/Actions"
+import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
 
 import EditImageField from "./EditImageField.vue"
 import EditInputField from "./EditInputField.vue"
@@ -139,6 +156,9 @@ export default {
         EditTimeField,
         EditMultiselectInputGroup,
         EditMultiselectPopup,
+        Actions,
+        ActionButton,
+        NumericIcon,
     },
     // We can check if the user has browsed from the same recipe's view to this
     // edit and save some time by not reloading the recipe data, leading to a
@@ -308,6 +328,7 @@ export default {
             referencesPopupFocused: false,
             popupContext: undefined,
             loadingRecipeReferences: true,
+            showRecipeYield: true,
         }
     },
     computed: {
@@ -329,6 +350,13 @@ export default {
                         this.recipe.recipeCategory)
             )
         },
+        recipeWithCorrectedYield() {
+            const r = this.recipe
+            if (!this.showRecipeYield) {
+                r.recipeYield = null
+            }
+            return r
+        },
     },
     watch: {
         prepTime: {
@@ -578,11 +606,11 @@ export default {
             const request = (() => {
                 if (this.recipe_id) {
                     return this.$store.dispatch("updateRecipe", {
-                        recipe: this.recipe,
+                        recipe: this.recipeWithCorrectedYield,
                     })
                 }
                 return this.$store.dispatch("createRecipe", {
-                    recipe: this.recipe,
+                    recipe: this.recipeWithCorrectedYield,
                 })
             })()
 
@@ -690,6 +718,15 @@ export default {
                     this.allCategories.push(this.recipe.recipeCategory)
                 }
 
+                if (this.recipe.recipeYield === null) {
+                    this.showRecipeYield = false
+                } else if (!this.recipe.recipeYield) {
+                    this.showRecipeYield = false
+                    this.recipe.recipeYield = null
+                } else {
+                    this.showRecipeYield = true
+                }
+
                 // Always set the active page last!
                 this.$store.dispatch("setPage", { page: "edit" })
             } else {
@@ -724,6 +761,11 @@ export default {
                 nutrition: {},
             }
             this.formDirty = false
+            this.showRecipeYield = true
+        },
+        toggleShowRecipeYield() {
+            this.showRecipeYield = !this.showRecipeYield
+            this.formDirty = true
         },
     },
 }
@@ -771,4 +813,8 @@ form fieldset ul label input[type="checkbox"] {
     margin-top: 3.5em;
     text-align: end;
 }
+
+.btn-enable-recipe-yield {
+    vertical-align: bottom;
+}
 </style>

src/components/RecipeView.vue

@@ -63,7 +63,7 @@
                             >{{ $store.state.recipe.url }}</a
                         >
                     </p>
-                    <p>
+                    <p v-if="$store.state.recipe.recipeYield != null">
                         <strong>{{ t("cookbook", "Servings") }}: </strong
                         >{{ $store.state.recipe.recipeYield }}
                     </p>

tests/Unit/Helper/Filter/JSON/FixRecipeYieldFilterTest.php

@@ -52,6 +52,7 @@ public function dp() {
 			[[4,5], 5, true],
 			['', 1, true],
 			['one two three', 1, true],
+			[null, null, false]
 		];
 	}