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

docs/docs/changelog/v1.0.0.md

@@ -1,3 +1,11 @@
+## v1.0.0b - 2022-03-29
+
+- Mealie now stores the original text from parsed ingredients, with the ability to peak at the original text from a recipe. [@miroito](https://github.com/Miroito)
+- Added some management / utility functions for administrators to manage data and cleanup artifacts from the file system.
+- Fix clear url action in recipe creation [#1101](https://github.com/hay-kot/mealie/pull/1101) [@miroito](https://github.com/Miroito)
+- Add group statistics calculations and data storage measurements
+    - No hard limits are currently imposed on groups - though this may be implemented in the future.
+
 ## v1.0.0b - 2022-03-25
 
 - Mealie now packages the last git commit as the build ID

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>

frontend/pages/search.vue

@@ -34,46 +34,39 @@
         <template #default="{ state }">
           <v-expand-transition>
             <v-row v-show="state" dense class="my-0 dense flex-row align-center justify-space-around">
-              <v-col>
+              <v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
-                <h3 class="pl-2 text-center headline">
-                  {{ $t("category.category-filter") }}
-                </h3>
-                <RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
                 <RecipeCategoryTagSelector
                   v-model="includeCategories"
+                  hide-details
                   :solo="true"
                   :dense="false"
                   :return-object="false"
                 />
+                <RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
               </v-col>
-              <v-col>
+              <v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
-                <h3 class="pl-2 text-center headline">
-                  {{ $t("search.tag-filter") }}
-                </h3>
-                <RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
                 <RecipeCategoryTagSelector
                   v-model="includeTags"
+                  hide-details
                   :solo="true"
                   :dense="false"
                   :return-object="false"
                   :tag-selector="true"
                 />
+                <RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
               </v-col>
-              <v-col>
+              <v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
-                <h3 class="pl-2 text-center headline">Food Filter</h3>
-                <RecipeSearchFilterSelector class="mb-1" @update="updateFoodParams" />
                 <v-autocomplete
                   v-model="includeFoods"
-                  hide-details
                   chips
+                  hide-details
                   deletable-chips
                   solo
                   multiple
                   :items="foods || []"
                   item-text="name"
-                  class="mx-1 py-0 mb-8"
                   :prepend-inner-icon="$globals.icons.foods"
-                  label="Choose Food"
+                  label="Foods"
                 >
                   <template #selection="data">
                     <v-chip
@@ -90,16 +83,18 @@
                     </v-chip>
                   </template>
                 </v-autocomplete>
+                <RecipeSearchFilterSelector class="mb-1" @update="updateFoodParams" />
               </v-col>
             </v-row>
           </v-expand-transition>
         </template>
       </ToggleState>
     </v-container>
-    <v-container>
+    <v-container class="px-0 mt-6">
       <RecipeCardSection
         class="mt-n5"
-        :title-icon="$globals.icons.magnify"
+        :icon="$globals.icons.search"
+        title="Results"
         :recipes="showRecipes.slice(0, maxResults)"
         @sort="assignFuzzy"
       />