mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
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>
This commit is contained in:
Hayden
GitHub
parent
788e176b16
commit
c1ba8dcd86
10 changed files with 462 additions and 140 deletions
|
|
@ -120,7 +120,26 @@
|
|||
/>
|
||||
</draggable>
|
||||
<div class="d-flex justify-end mt-2">
|
||||
<RecipeIngredientParserMenu :slug="recipe.slug" :ingredients="recipe.recipeIngredient" />
|
||||
<v-tooltip top color="accent">
|
||||
<template #activator="{ on, attrs }">
|
||||
<span v-on="on">
|
||||
<BaseButton
|
||||
:disabled="recipe.settings.disableAmount"
|
||||
color="accent"
|
||||
:to="`${recipe.slug}/ingredient-parser`"
|
||||
v-bind="attrs"
|
||||
>
|
||||
<template #icon>
|
||||
{{ $globals.icons.foods }}
|
||||
</template>
|
||||
Parse
|
||||
</BaseButton>
|
||||
</span>
|
||||
</template>
|
||||
<span>{{
|
||||
recipe.settings.disableAmount ? "Enable ingredient amounts to use this feature" : "Parse ingredients"
|
||||
}}</span>
|
||||
</v-tooltip>
|
||||
<RecipeDialogBulkAdd class="ml-1 mr-1" @bulk-data="addIngredient" />
|
||||
<BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
|
||||
</div>
|
||||
|
|
@ -279,6 +298,7 @@ import {
|
|||
computed,
|
||||
defineComponent,
|
||||
reactive,
|
||||
ref,
|
||||
toRefs,
|
||||
useContext,
|
||||
useMeta,
|
||||
|
|
@ -288,6 +308,7 @@ import {
|
|||
// @ts-ignore
|
||||
import VueMarkdown from "@adapttive/vue-markdown";
|
||||
import draggable from "vuedraggable";
|
||||
import { invoke, until } from "@vueuse/core";
|
||||
import RecipeCategoryTagSelector from "@/components/Domain/Recipe/RecipeCategoryTagSelector.vue";
|
||||
import RecipeDialogBulkAdd from "@/components/Domain/Recipe//RecipeDialogBulkAdd.vue";
|
||||
import { useUserApi, useStaticRoutes } from "~/composables/api";
|
||||
|
|
@ -305,10 +326,9 @@ import RecipeNotes from "~/components/Domain/Recipe/RecipeNotes.vue";
|
|||
import RecipeImageUploadBtn from "~/components/Domain/Recipe/RecipeImageUploadBtn.vue";
|
||||
import RecipeSettingsMenu from "~/components/Domain/Recipe/RecipeSettingsMenu.vue";
|
||||
import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
|
||||
import RecipeIngredientParserMenu from "~/components/Domain/Recipe/RecipeIngredientParserMenu.vue";
|
||||
import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
|
||||
import { Recipe } from "~/types/api-types/recipe";
|
||||
import { uuid4 } from "~/composables/use-utils";
|
||||
import { uuid4, deepCopy } from "~/composables/use-utils";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
|
@ -320,7 +340,6 @@ export default defineComponent({
|
|||
RecipeDialogBulkAdd,
|
||||
RecipeImageUploadBtn,
|
||||
RecipeIngredientEditor,
|
||||
RecipeIngredientParserMenu,
|
||||
RecipeIngredients,
|
||||
RecipeInstructions,
|
||||
RecipeNotes,
|
||||
|
|
@ -331,12 +350,31 @@ export default defineComponent({
|
|||
RecipeTimeCard,
|
||||
VueMarkdown,
|
||||
},
|
||||
async beforeRouteLeave(_to, _from, next) {
|
||||
const isSame = JSON.stringify(this.recipe) === JSON.stringify(this.originalRecipe);
|
||||
|
||||
console.log({ working: this.recipe, saved: this.originalRecipe });
|
||||
|
||||
if (this.form && !isSame) {
|
||||
if (window.confirm("You have unsaved changes. Do you want to save before leaving?")) {
|
||||
// @ts-ignore
|
||||
await this.api.recipes.updateOne(this.recipe.slug, this.recipe);
|
||||
}
|
||||
}
|
||||
next();
|
||||
},
|
||||
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const slug = route.value.params.slug;
|
||||
const api = useUserApi();
|
||||
|
||||
// ===============================================================
|
||||
// Check Before Leaving
|
||||
|
||||
const domSaveChangesDialog = ref(null);
|
||||
|
||||
const state = reactive({
|
||||
form: false,
|
||||
scale: 1,
|
||||
|
|
@ -354,6 +392,16 @@ export default defineComponent({
|
|||
|
||||
const { recipe, loading, fetchRecipe } = useRecipe(slug);
|
||||
|
||||
// Manage a deep copy of the recipe so we can detect if changes have occured and inform
|
||||
// the user if they try to navigate away from the page without saving.
|
||||
const originalRecipe = ref<Recipe | null>(null);
|
||||
|
||||
invoke(async () => {
|
||||
await until(recipe).not.toBeNull();
|
||||
|
||||
originalRecipe.value = deepCopy(recipe.value);
|
||||
});
|
||||
|
||||
const { recipeImage } = useStaticRoutes();
|
||||
|
||||
// @ts-ignore
|
||||
|
|
@ -504,6 +552,8 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
return {
|
||||
originalRecipe,
|
||||
domSaveChangesDialog,
|
||||
enableLandscape,
|
||||
scaledYield,
|
||||
toggleJson,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,15 @@
|
|||
<template>
|
||||
<v-container v-if="recipe">
|
||||
<v-container>
|
||||
<v-alert dismissible border="left" colored-border type="warning" elevation="2" :icon="$globals.icons.alert">
|
||||
<b>Experimental Feature</b>
|
||||
<div>
|
||||
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 seleect cancel and your changes will not be saved.
|
||||
</div>
|
||||
</v-alert>
|
||||
|
||||
<BaseCardSectionTitle title="Ingredients Processor">
|
||||
To use the ingredient parser, click the "Parse All" button and the process will start. When the processed
|
||||
ingredients are available, you can look through the items and verify that they were parsed correctly. The models
|
||||
|
|
@ -30,13 +39,14 @@
|
|||
</div>
|
||||
</BaseCardSectionTitle>
|
||||
|
||||
<v-card-actions class="justify-end">
|
||||
<div class="d-flex mt-n3 mb-4 justify-end" style="gap: 5px">
|
||||
<BaseButton cancel class="mr-auto" @click="$router.go(-1)"></BaseButton>
|
||||
<BaseButton color="info" @click="fetchParsed">
|
||||
<template #icon> {{ $globals.icons.foods }}</template>
|
||||
Parse All
|
||||
</BaseButton>
|
||||
<BaseButton save @click="saveAll"> Save All </BaseButton>
|
||||
</v-card-actions>
|
||||
</div>
|
||||
|
||||
<v-expansion-panels v-model="panels" multiple>
|
||||
<v-expansion-panel v-for="(ing, index) in parsedIng" :key="index">
|
||||
|
|
@ -73,12 +83,12 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, useRoute, useRouter } from "@nuxtjs/composition-api";
|
||||
import { until, invoke } from "@vueuse/core";
|
||||
import { Food, ParsedIngredient, Parser } from "~/api/class-interfaces/recipes";
|
||||
import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useRecipe, useFoods, useUnits } from "~/composables/recipes";
|
||||
import { RecipeIngredientUnit } from "~/types/api-types/recipe";
|
||||
|
||||
interface Error {
|
||||
ingredientIndex: number;
|
||||
unitError: Boolean;
|
||||
|
|
@ -101,28 +111,29 @@ export default defineComponent({
|
|||
|
||||
const { recipe, loading } = useRecipe(slug);
|
||||
|
||||
invoke(async () => {
|
||||
await until(recipe).not.toBeNull();
|
||||
|
||||
fetchParsed();
|
||||
});
|
||||
|
||||
const ingredients = ref<any[]>([]);
|
||||
|
||||
// =========================================================
|
||||
// Parser Logic
|
||||
|
||||
const parser = ref<Parser>("nlp");
|
||||
|
||||
const parsedIng = ref<any[]>([]);
|
||||
const parsedIng = ref<ParsedIngredient[]>([]);
|
||||
|
||||
async function fetchParsed() {
|
||||
if (!recipe.value) {
|
||||
return;
|
||||
}
|
||||
const raw = recipe.value.recipeIngredient.map((ing) => ing.note);
|
||||
const { response, data } = await api.recipes.parseIngredients(parser.value, raw);
|
||||
console.log({ response });
|
||||
const { data } = await api.recipes.parseIngredients(parser.value, raw);
|
||||
|
||||
if (data) {
|
||||
parsedIng.value = data;
|
||||
|
||||
console.log(data);
|
||||
|
||||
// @ts-ignore
|
||||
errors.value = data.map((ing, index: number) => {
|
||||
const unitError = !checkForUnit(ing.ingredient.unit);
|
||||
|
|
@ -142,9 +153,9 @@ export default defineComponent({
|
|||
if (ing?.ingredient?.food?.name) {
|
||||
foodErrorMessage = `Create missing food '${ing.ingredient.food.name || "No food"}'?`;
|
||||
}
|
||||
panels.value.push(index);
|
||||
}
|
||||
}
|
||||
panels.value.push(index);
|
||||
|
||||
return {
|
||||
ingredientIndex: index,
|
||||
|
|
@ -176,14 +187,20 @@ export default defineComponent({
|
|||
|
||||
const errors = ref<Error[]>([]);
|
||||
|
||||
function checkForUnit(unit: RecipeIngredientUnit) {
|
||||
function checkForUnit(unit: RecipeIngredientUnit | null) {
|
||||
if (!unit) {
|
||||
return false;
|
||||
}
|
||||
if (units.value && unit?.name) {
|
||||
return units.value.some((u) => u.name === unit.name);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function checkForFood(food: Food) {
|
||||
function checkForFood(food: Food | null) {
|
||||
if (!food) {
|
||||
return false;
|
||||
}
|
||||
if (foods.value && food?.name) {
|
||||
return foods.value.some((f) => f.name === food.name);
|
||||
}
|
||||
|
|
@ -205,21 +222,17 @@ export default defineComponent({
|
|||
};
|
||||
});
|
||||
|
||||
console.log(ingredients);
|
||||
|
||||
ingredients = ingredients.map((ing) => {
|
||||
if (!foods.value || !units.value) {
|
||||
return ing;
|
||||
}
|
||||
// Get food from foods
|
||||
const food = foods.value.find((f) => f.name === ing.food.name);
|
||||
const food = foods.value.find((f) => f.name === ing.food?.name);
|
||||
ing.food = food || null;
|
||||
|
||||
// Get unit from units
|
||||
const unit = units.value.find((u) => u.name === ing.unit.name);
|
||||
const unit = units.value.find((u) => u.name === ing.unit?.name);
|
||||
ing.unit = unit || null;
|
||||
console.log(ing);
|
||||
|
||||
return ing;
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue