feat: add peak toggle for seeing original ingredient txt (#1111)

* add peak toggle for seeing original ingredient txt

* add recent changes + format

* cleanup search view

* space out results

frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue

@@ -12,11 +12,11 @@
     item-text="name"
     persistent-hint
     multiple
+    :hide-details="hideDetails"
     :hint="hint"
     :solo="solo"
     :return-object="returnObject"
     :prepend-inner-icon="$globals.icons.tags"
-    :flat="flat"
     v-bind="$attrs"
     @input="emitChange"
   >
@@ -36,7 +36,7 @@
         {{ data.item.name || data.item }}
       </v-chip>
     </template>
-    <template #append-outer="">
+    <template #append-outer>
       <RecipeCategoryTagDialog v-if="showAdd" :tag-dialog="tagSelector" @created-item="pushToItem" />
     </template>
   </v-autocomplete>
@@ -91,6 +91,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    hideDetails: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   setup(props, context) {
@@ -127,13 +131,6 @@ export default defineComponent({
       }
     });
 
-    const flat = computed(() => {
-      if (state.selected) {
-        return state.selected.length > 0 && props.solo;
-      }
-      return false;
-    });
-
     function emitChange() {
       context.emit("input", state.selected);
     }
@@ -158,7 +155,6 @@ export default defineComponent({
       ...toRefs(state),
       inputLabel,
       activeItems,
-      flat,
       emitChange,
       removeByIndex,
       pushToItem,

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -89,28 +89,34 @@
           <v-icon v-if="disableAmount" slot="prepend" class="mr-n1" color="error" @click="$emit('delete')">
             {{ $globals.icons.delete }}
           </v-icon>
-          <template slot="append">
-            <v-tooltip top nudge-right="10">
-              <template #activator="{ on, attrs }">
-                <v-btn icon small class="mt-n1" v-bind="attrs" v-on="on" @click="toggleTitle()">
-                  <v-icon>{{ showTitle || value.title ? $globals.icons.minus : $globals.icons.createAlt }}</v-icon>
-                </v-btn>
-              </template>
-              <span>{{ showTitle ? $t("recipe.remove-section") : $t("recipe.insert-section") }}</span>
-            </v-tooltip>
-          </template>
+
           <template slot="append-outer">
-            <v-icon class="handle mt-1">{{ $globals.icons.arrowUpDown }}</v-icon>
+            <BaseButtonGroup
+              :large="false"
+              class="handle my-auto"
+              :buttons="[
+                {
+                  icon: $globals.icons.arrowUpDown,
+                  text: '',
+                  event: 'open',
+                  children: contextMenuOptions,
+                },
+              ]"
+              @toggle-section="toggleTitle"
+              @toggle-original="toggleOriginalText"
+            />
           </template>
         </v-text-field>
       </v-col>
     </v-row>
+    <p v-if="showOriginalText" class="text-caption">Original Text: {{ value.originalText }}</p>
+
     <v-divider v-if="!$vuetify.breakpoint.mdAndUp" class="my-4"></v-divider>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs } from "@nuxtjs/composition-api";
+import { computed, defineComponent, reactive, ref, toRefs } from "@nuxtjs/composition-api";
 import { useFoods, useUnits } from "~/composables/recipes";
 import { validators } from "~/composables/use-validators";
 import { RecipeIngredient } from "~/types/api-types/recipe";
@@ -153,6 +159,7 @@ export default defineComponent({
 
     const state = reactive({
       showTitle: false,
+      showOriginalText: false,
     });
 
     function toggleTitle() {
@@ -165,6 +172,10 @@ export default defineComponent({
       }
     }
 
+    function toggleOriginalText() {
+      state.showOriginalText = !state.showOriginalText;
+    }
+
     function handleUnitEnter() {
       if (value.unit === undefined || value.unit === null || !value.unit.name.includes(unitSearch.value)) {
         createAssignUnit();
@@ -177,7 +188,35 @@ export default defineComponent({
       }
     }
 
+    const contextMenuOptions = computed(() => {
+      const options = [
+        {
+          text: "Toggle Section",
+          event: "toggle-section",
+        },
+      ];
+
+      // FUTURE: add option to parse a single ingredient
+      // if (!value.food && !value.unit && value.note) {
+      //   options.push({
+      //     text: "Parse Ingredient",
+      //     event: "parse-ingredient",
+      //   });
+      // }
+
+      if (value.originalText) {
+        options.push({
+          text: "See Original Text",
+          event: "toggle-original",
+        });
+      }
+
+      return options;
+    });
+
     return {
+      toggleOriginalText,
+      contextMenuOptions,
       handleUnitEnter,
       handleFoodEnter,
       ...toRefs(state),

frontend/components/Domain/Recipe/RecipeInstructions.vue

@@ -122,7 +122,8 @@
                     :buttons="[
                       {
                         icon: $globals.icons.dotsVertical,
-                        text: $t('general.delete'),
+                        text: '',
+                        event: 'open',
                         children: [
                           {
                             text: 'Toggle Section',
@@ -140,7 +141,7 @@
                       },
                       {
                         icon: previewStates[index] ? $globals.icons.edit : $globals.icons.eye,
-                        text: previewStates[index] ? $t('general.edit') : 'Preview Markdown',
+                        text: previewStates[index] ? $tc('general.edit') : 'Preview Markdown',
                         event: 'preview-step',
                       },
                     ]"

frontend/components/Domain/Recipe/RecipeSearchFilterSelector.vue

@@ -1,15 +1,13 @@
 <template>
-  <v-toolbar dense flat>
+  <div class="d-flex justify-center align-center">
     <v-btn-toggle v-model="selected" tile group color="primary accent-3" mandatory @change="emitMulti">
       <v-btn small :value="false">
         {{ $t("search.include") }}
       </v-btn>
-
       <v-btn small :value="true">
         {{ $t("search.exclude") }}
       </v-btn>
     </v-btn-toggle>
-    <v-spacer></v-spacer>
     <v-btn-toggle v-model="match" tile group color="primary accent-3" mandatory @change="emitMulti">
       <v-btn small :value="false" class="text-uppercase">
         {{ $t("search.and") }}
@@ -18,7 +16,7 @@
         {{ $t("search.or") }}
       </v-btn>
     </v-btn-toggle>
-  </v-toolbar>
+  </div>
 </template>
 
 <script lang="ts">

frontend/components/global/BaseButtonGroup.vue

@@ -3,7 +3,7 @@
     <template v-for="btn in buttons">
       <v-menu v-if="btn.children" :key="'menu-' + btn.event" active-class="pa-0" offset-x left>
         <template #activator="{ on, attrs }">
-          <v-btn tile large icon v-bind="attrs" v-on="on">
+          <v-btn tile :large="large" icon v-bind="attrs" v-on="on">
             <v-icon>
               {{ btn.icon }}
             </v-icon>
@@ -25,7 +25,7 @@
         content-class="text-caption"
       >
         <template #activator="{ on, attrs }">
-          <v-btn tile large icon v-bind="attrs" @click="$emit(btn.event)" v-on="on">
+          <v-btn tile :large="large" icon v-bind="attrs" @click="$emit(btn.event)" v-on="on">
             <v-icon> {{ btn.icon }} </v-icon>
           </v-btn>
         </template>
@@ -39,7 +39,7 @@
 import { defineComponent } from "@nuxtjs/composition-api";
 
 export interface ButtonOption {
-  icon: string;
+  icon?: string;
   text: string;
   event: string;
   children?: ButtonOption[];
@@ -51,6 +51,10 @@ export default defineComponent({
       type: Array as () => ButtonOption[],
       required: true,
     },
+    large: {
+      type: Boolean,
+      default: true,
+    },
   },
 });
 </script>