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
2022-03-29 09:38:23 -08:00 · 2022-03-29 09:38:23 -08:00 · 1092e0ce7c
commit 1092e0ce7c
parent 1a23f867da
8 changed files with 91 additions and 50 deletions
--- a/docs/docs/changelog/v1.0.0.md
+++ b/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
--- a/docs/docs/overrides/api.html
+++ b/docs/docs/overrides/api.html
--- a/frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue
+++ b/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,
--- a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
+++ b/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),
--- a/frontend/components/Domain/Recipe/RecipeInstructions.vue
+++ b/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',
                      },
                    ]"
--- a/frontend/components/Domain/Recipe/RecipeSearchFilterSelector.vue
+++ b/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">
--- a/frontend/components/global/BaseButtonGroup.vue
+++ b/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>
--- a/frontend/pages/search.vue
+++ b/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>
-                <h3 class="pl-2 text-center headline">
-                  {{ $t("category.category-filter") }}
-                </h3>
-                <RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
+              <v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
                <RecipeCategoryTagSelector
                  v-model="includeCategories"
+                  hide-details
                  :solo="true"
                  :dense="false"
                  :return-object="false"
                />
+                <RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
              </v-col>
-              <v-col>
-                <h3 class="pl-2 text-center headline">
-                  {{ $t("search.tag-filter") }}
-                </h3>
-                <RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
+              <v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
                <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>
-                <h3 class="pl-2 text-center headline">Food Filter</h3>
-                <RecipeSearchFilterSelector class="mb-1" @update="updateFoodParams" />
+              <v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
                <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"
      />