feature/improve-parser-ux (#789)

* cleanup console.logs

* default to panels open

* feat(frontend): ✨ add ingredient on enter

* feat(frontend): ✨ automatically trigger parser on navigation

* feat(frontend): ✨ prompt user before leaving when in editor

* add deep copy utility

* improve flow of parser

* add tooltip and match disable with disableAmount

* force admin users to have advanced access

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -38,7 +38,11 @@
           item-text="name"
           class="mx-1"
           placeholder="Choose Unit"
+          @keyup.enter="handleUnitEnter"
         >
+          <template #no-data>
+            <div class="caption text-center pb-2">Press Enter to Create</div>
+          </template>
           <template #append-item>
             <div class="px-2">
               <BaseButton block small @click="createAssignUnit()"></BaseButton>
@@ -60,7 +64,11 @@
           item-text="name"
           class="mx-1 py-0"
           placeholder="Choose Food"
+          @keyup.enter="handleFoodEnter"
         >
+          <template #no-data>
+            <div class="caption text-center pb-2">Press Enter to Create</div>
+          </template>
           <template #append-item>
             <div class="px-2">
               <BaseButton block small @click="createAssignFood()"></BaseButton>
@@ -132,7 +140,6 @@ export default defineComponent({
       workingUnitData.name = unitSearch.value;
       await unitActions.createOne();
       value.unit = units.value?.find((unit) => unit.name === unitSearch.value);
-      console.log(value.unit);
     }
 
     const state = reactive({
@@ -149,7 +156,23 @@ export default defineComponent({
       }
     }
 
+    function handleUnitEnter() {
+      if (value.unit === null || !value.unit.name.includes(unitSearch.value)) {
+        console.log("Creating");
+        createAssignUnit();
+      }
+    }
+
+    function handleFoodEnter() {
+      if (value.food === null || !value.food.name.includes(foodSearch.value)) {
+        console.log("Creating");
+        createAssignFood();
+      }
+    }
+
     return {
+      handleUnitEnter,
+      handleFoodEnter,
       ...toRefs(state),
       createAssignFood,
       createAssignUnit,

frontend/components/Domain/Recipe/RecipeIngredientParserMenu.vue

@@ -1,52 +0,0 @@
-<template>
-  <v-menu offset-y offset-overflow left top nudge-top="6" :close-on-content-click="false">
-    <template #activator="{ on, attrs }">
-      <v-btn color="accent" dark v-bind="attrs" v-on="on">
-        <v-icon left>
-          {{ $globals.icons.foods }}
-        </v-icon>
-        Parse
-      </v-btn>
-    </template>
-    <v-card width="400">
-      <v-card-title class="mb-1 pb-0">
-        <v-icon left color="warning"> {{ $globals.icons.alert }}</v-icon> Experimental
-      </v-card-title>
-      <v-divider class="mx-2"> </v-divider>
-      <v-card-text>
-        Mealie can use natural language processing to attempt to parse and create units, and foods for your Recipe
-        ingredients. This is experimental and may not work as expected. If you choose to not use the parsed results you
-        can click the close button at the top of the page and your changes will not be saved.
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <BaseButton small color="accent" :to="`${slug}/ingredient-parser`">
-          <template #icon>
-            {{ $globals.icons.check }}
-          </template>
-          {{ $t("general.confirm") }}
-        </BaseButton>
-      </v-card-actions>
-    </v-card>
-  </v-menu>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
-
-export default defineComponent({
-  props: {
-    ingredients: {
-      type: Array,
-      required: true,
-    },
-    slug: {
-      type: String,
-      required: true,
-    },
-  },
-  setup() {
-    return {};
-  },
-});
-</script>

frontend/components/global/BaseDialog.vue

@@ -26,7 +26,14 @@
 
         <v-card-actions>
           <slot name="card-actions">
-            <v-btn text color="grey" @click="dialog = false">
+            <v-btn
+              text
+              color="grey"
+              @click="
+                dialog = false;
+                $emit('cancel');
+              "
+            >
               {{ $t("general.cancel") }}
             </v-btn>
             <v-spacer></v-spacer>