fix(frontend): 🚑 fix typescript errors
This commit is contained in:
Hayden
parent
4e70c96f8a
commit
58349bc439
1 changed files with 31 additions and 157 deletions
|
|
@ -1,89 +1,40 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<v-menu offset-y offset-overflow left top nudge-top="6" :close-on-content-click="false">
|
||||||
<v-menu offset-y offset-overflow left top nudge-top="6" :close-on-content-click="false">
|
<template #activator="{ on, attrs }">
|
||||||
<template #activator="{ on, attrs }">
|
<v-btn color="accent" dark v-bind="attrs" v-on="on">
|
||||||
<v-btn color="accent" dark v-bind="attrs" v-on="on">
|
<v-icon left>
|
||||||
<v-icon left>
|
{{ $globals.icons.foods }}
|
||||||
{{ $globals.icons.foods }}
|
</v-icon>
|
||||||
</v-icon>
|
Parse
|
||||||
Parse
|
</v-btn>
|
||||||
</v-btn>
|
</template>
|
||||||
</template>
|
<v-card width="400">
|
||||||
<v-card width="400">
|
<v-card-title class="mb-1 pb-0">
|
||||||
<v-card-title class="mb-1 pb-0">
|
<v-icon left color="warning"> {{ $globals.icons.alert }}</v-icon> Experimental
|
||||||
<v-icon left color="warning"> {{ $globals.icons.alert }}</v-icon> Experimental
|
</v-card-title>
|
||||||
</v-card-title>
|
<v-divider class="mx-2"> </v-divider>
|
||||||
<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>
|
|
||||||
<BaseDialog ref="domParsedDataDialog" width="100%">
|
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-expansion-panels v-model="panels" multiple>
|
Mealie can use natural language processing to attempt to parse and create units, and foods for your Recipe
|
||||||
<v-expansion-panel v-for="(ing, index) in parsedData.ingredient" :key="index">
|
ingredients. This is experimental and may not work as expected. If you choose to not use the parsed results you
|
||||||
<v-expansion-panel-header class="my-0 py-0">
|
can click the close button at the top of the page and your changes will not be saved.
|
||||||
<div class="text-body-1">
|
|
||||||
<span>
|
|
||||||
<v-icon v-if="errors[index].foodError" color="warning">
|
|
||||||
{{ $globals.icons.close }}
|
|
||||||
</v-icon>
|
|
||||||
<v-icon v-else color="success">
|
|
||||||
{{ $globals.icons.check }}
|
|
||||||
</v-icon>
|
|
||||||
</span>
|
|
||||||
{{ ingredients[index].note }}
|
|
||||||
</div>
|
|
||||||
</v-expansion-panel-header>
|
|
||||||
<v-expansion-panel-content class="pb-0 mb-0">
|
|
||||||
<RecipeIngredientEditor v-model="parsedData.ingredient[index]" />
|
|
||||||
<v-card-actions>
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
<BaseButton v-if="errors[index].foodError" color="warning" small @click="createFood(ing.food, index)">
|
|
||||||
{{ errors[index].foodErrorMessage }}
|
|
||||||
</BaseButton>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-expansion-panel-content>
|
|
||||||
</v-expansion-panel>
|
|
||||||
</v-expansion-panels>
|
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</BaseDialog>
|
<v-card-actions>
|
||||||
</div>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, ref } from "@nuxtjs/composition-api";
|
import { defineComponent } from "@nuxtjs/composition-api";
|
||||||
import RecipeIngredientEditor from "./RecipeIngredientEditor.vue";
|
|
||||||
import { useApiSingleton } from "~/composables/use-api";
|
|
||||||
import { RecipeIngredient, RecipeIngredientUnit } from "~/types/api-types/recipe";
|
|
||||||
import { useFoods } from "~/composables/use-recipe-foods";
|
|
||||||
import { useUnits } from "~/composables/use-recipe-units";
|
|
||||||
import { Food } from "~/api/class-interfaces/recipe-foods";
|
|
||||||
|
|
||||||
interface Error {
|
|
||||||
ingredientIndex: number;
|
|
||||||
unitError: Boolean;
|
|
||||||
unitErrorMessage: string;
|
|
||||||
foodError: Boolean;
|
|
||||||
foodErrorMessage: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
|
||||||
RecipeIngredientEditor,
|
|
||||||
},
|
|
||||||
props: {
|
props: {
|
||||||
ingredients: {
|
ingredients: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
|
@ -94,85 +45,8 @@ export default defineComponent({
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup() {
|
||||||
const ingredients = props.ingredients;
|
return {};
|
||||||
const api = useApiSingleton();
|
|
||||||
|
|
||||||
const parsedData = ref<any>([]);
|
|
||||||
|
|
||||||
const { foods, workingFoodData, actions } = useFoods();
|
|
||||||
const { units } = useUnits();
|
|
||||||
|
|
||||||
const domParsedDataDialog = ref(null);
|
|
||||||
|
|
||||||
const panels = ref<number[]>([]);
|
|
||||||
const errors = ref<Error[]>([]);
|
|
||||||
|
|
||||||
function checkForUnit(unit: RecipeIngredientUnit) {
|
|
||||||
if (units.value && unit?.name) {
|
|
||||||
return units.value.some((u) => u.name === unit.name);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkForFood(food: Food) {
|
|
||||||
if (foods.value && food?.name) {
|
|
||||||
return foods.value.some((f) => f.name === food.name);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function createFood(food: Food, index: number) {
|
|
||||||
workingFoodData.name = food.name;
|
|
||||||
|
|
||||||
parsedData.value[index] = await actions.createOne();
|
|
||||||
|
|
||||||
errors.value[index].foodError = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function parseIngredients() {
|
|
||||||
// @ts-ignore -> No idea what it's talking about
|
|
||||||
const ingredientNotes = ingredients.map((ing: RecipeIngredient) => ing.note);
|
|
||||||
|
|
||||||
const { data } = await api.recipes.parseIngredients(ingredientNotes);
|
|
||||||
|
|
||||||
if (data) {
|
|
||||||
// @ts-ignore
|
|
||||||
domParsedDataDialog.value.open();
|
|
||||||
console.log(data);
|
|
||||||
parsedData.value = data;
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
errors.value = data.ingredient.map((ing, index: number) => {
|
|
||||||
const unitError = !checkForUnit(ing.unit);
|
|
||||||
const foodError = !checkForFood(ing.food);
|
|
||||||
|
|
||||||
let unitErrorMessage = "";
|
|
||||||
let foodErrorMessage = "";
|
|
||||||
|
|
||||||
if (unitError || foodError) {
|
|
||||||
if (unitError) {
|
|
||||||
unitErrorMessage = `Create missing unit '${ing.unit.name || "No unit"}'`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (foodError) {
|
|
||||||
panels.value.push(index);
|
|
||||||
foodErrorMessage = `Create missing food '${ing.food.name || "No food"}'?`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
ingredientIndex: index,
|
|
||||||
unitError,
|
|
||||||
unitErrorMessage,
|
|
||||||
foodError,
|
|
||||||
foodErrorMessage,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return { api, parseIngredients, parsedData, domParsedDataDialog, panels, errors, createFood };
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue