Feature/collapse recipe sections (#1021)

* toggle hide recipe sections

* disable parser if food or units is defined

* make inputs clearable

* remove console.logs

* fix linter error

* fix linter errors

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -44,6 +44,7 @@
           item-text="name"
           class="mx-1"
           placeholder="Choose Unit"
+          clearable
           @keyup.enter="handleUnitEnter"
         >
           <template #no-data>
@@ -70,6 +71,7 @@
           item-text="name"
           class="mx-1 py-0"
           placeholder="Choose Food"
+          clearable
           @keyup.enter="handleFoodEnter"
         >
           <template #no-data>
@@ -165,15 +167,12 @@ export default defineComponent({
 
     function handleUnitEnter() {
       if (value.unit === undefined || value.unit === null || !value.unit.name.includes(unitSearch.value)) {
-        console.log("Creating");
         createAssignUnit();
       }
     }
 
     function handleFoodEnter() {
-      console.log(value.food);
       if (value.food === undefined || value.food === null || !value.food.name.includes(foodSearch.value)) {
-        console.log("Creating");
         createAssignFood();
       }
     }

frontend/components/Domain/Recipe/RecipeInstructions.vue

@@ -76,7 +76,15 @@
       @end="drag = false"
     >
       <div v-for="(step, index) in value" :key="step.id">
-        <v-app-bar v-if="showTitleEditor[step.id]" class="primary mx-1 mt-6" dark dense rounded>
+        <v-app-bar
+          v-if="showTitleEditor[step.id]"
+          class="primary mx-1 mt-6"
+          style="cursor: pointer"
+          dark
+          dense
+          rounded
+          @click="toggleCollapseSection(index)"
+        >
           <v-toolbar-title v-if="!edit" class="headline">
             <v-app-bar-title v-text="step.title"> </v-app-bar-title>
           </v-toolbar-title>
@@ -180,7 +188,7 @@
 import draggable from "vuedraggable";
 // @ts-ignore vue-markdown has no types
 import VueMarkdown from "@adapttive/vue-markdown";
-import { ref, toRefs, reactive, defineComponent, watch, onMounted, watchEffect } from "@nuxtjs/composition-api";
+import { ref, toRefs, reactive, defineComponent, watch, onMounted } from "@nuxtjs/composition-api";
 import { RecipeStep, IngredientReferences, RecipeIngredient } from "~/types/api-types/recipe";
 import { parseIngredientText } from "~/composables/recipes";
 import { uuid4 } from "~/composables/use-utils";
@@ -452,8 +460,29 @@ export default defineComponent({
       previewStates.value = temp;
     }
 
+    function toggleCollapseSection(index: number) {
+      const sectionSteps: number[] = [];
+
+      for (let i = index; i < props.value.length; i++) {
+        if (!(i === index) && validateTitle(props.value[i].title)) {
+          break;
+        } else {
+          sectionSteps.push(i);
+        }
+      }
+
+      const allCollapsed = sectionSteps.every((idx) => state.disabledSteps.includes(idx));
+
+      if (allCollapsed) {
+        state.disabledSteps = state.disabledSteps.filter((idx) => !sectionSteps.includes(idx));
+      } else {
+        state.disabledSteps = [...state.disabledSteps, ...sectionSteps];
+      }
+    }
+
     return {
       togglePreviewState,
+      toggleCollapseSection,
       previewStates,
       ...toRefs(state),
       actionEvents,

frontend/pages/recipe/_slug/index.vue

@@ -142,7 +142,7 @@
                 <template #activator="{ on, attrs }">
                   <span v-on="on">
                     <BaseButton
-                      :disabled="recipe.settings.disableAmount"
+                      :disabled="recipe.settings.disableAmount || hasFoodOrUnit"
                       color="accent"
                       :to="`${recipe.slug}/ingredient-parser`"
                       v-bind="attrs"
@@ -154,9 +154,7 @@
                     </BaseButton>
                   </span>
                 </template>
-                <span>{{
-                  recipe.settings.disableAmount ? "Enable ingredient amounts to use this feature" : "Parse ingredients"
-                }}</span>
+                <span>{{ paserToolTip }}</span>
               </v-tooltip>
               <RecipeDialogBulkAdd class="ml-1 mr-1" @bulk-data="addIngredient" />
               <BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
@@ -798,6 +796,30 @@ export default defineComponent({
 
     useMeta(metaData);
 
+    const hasFoodOrUnit = computed(() => {
+      if (!recipe.value) {
+        return false;
+      }
+      if (recipe.value.recipeIngredient) {
+        for (const ingredient of recipe.value.recipeIngredient) {
+          if (ingredient.food || ingredient.unit) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    });
+
+    const paserToolTip = computed(() => {
+      if (recipe.value?.settings?.disableAmount) {
+        return "Enable ingredient amounts to use this feature";
+      } else if (hasFoodOrUnit.value) {
+        return "Recipes with units or foods defined cannot be parsed.";
+      }
+      return "Parse ingredients";
+    });
+
     return {
       // Wake Lock
       wakeIsSupported,
@@ -806,6 +828,8 @@ export default defineComponent({
       unlockScreen,
       wakeLock,
       //
+      hasFoodOrUnit,
+      paserToolTip,
       originalRecipe,
       createApiExtra,
       apiNewKey,