mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 13:35:23 +02:00
fix: consoldate stores to fix mismatched state
This commit is contained in:
Hayden
parent
f831791db2
commit
d2a9f7ca24
15 changed files with 348 additions and 350 deletions
|
|
@ -48,7 +48,7 @@
|
|||
</template>
|
||||
</v-autocomplete>
|
||||
|
||||
<v-alert v-if="foods.length > 0" type="error" class="mb-0 text-body-2">
|
||||
<v-alert v-if="foods && foods.length > 0" type="error" class="mb-0 text-body-2">
|
||||
{{ $t("data-pages.foods.seed-dialog-warning") }}
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
<CrudTable
|
||||
:table-config="tableConfig"
|
||||
:headers.sync="tableHeaders"
|
||||
:data="foods"
|
||||
:data="foods || []"
|
||||
:bulk-actions="[]"
|
||||
@delete-one="deleteEventHandler"
|
||||
@edit-one="editEventHandler"
|
||||
|
|
@ -132,6 +132,7 @@ import { IngredientFood } from "~/types/api-types/recipe";
|
|||
import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
|
||||
import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
|
||||
import { useLocales } from "~/composables/use-locales";
|
||||
import { useFoodStore, useLabelStore } from "~/composables/store";
|
||||
|
||||
export default defineComponent({
|
||||
components: { MultiPurposeLabel },
|
||||
|
|
@ -163,32 +164,32 @@ export default defineComponent({
|
|||
show: true,
|
||||
},
|
||||
];
|
||||
const foods = ref<IngredientFood[]>([]);
|
||||
async function refreshFoods() {
|
||||
const { data } = await userApi.foods.getAll();
|
||||
foods.value = data ?? [];
|
||||
}
|
||||
onMounted(() => {
|
||||
refreshFoods();
|
||||
});
|
||||
|
||||
const foodStore = useFoodStore();
|
||||
|
||||
// ===============================================================
|
||||
// Food Editor
|
||||
|
||||
const editDialog = ref(false);
|
||||
const editTarget = ref<IngredientFood | null>(null);
|
||||
|
||||
function editEventHandler(item: IngredientFood) {
|
||||
editTarget.value = item;
|
||||
editDialog.value = true;
|
||||
}
|
||||
|
||||
async function editSaveFood() {
|
||||
if (!editTarget.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.foods.updateOne(editTarget.value.id, editTarget.value);
|
||||
if (data) {
|
||||
refreshFoods();
|
||||
}
|
||||
|
||||
await foodStore.actions.updateOne(editTarget.value);
|
||||
editDialog.value = false;
|
||||
}
|
||||
|
||||
// ===============================================================
|
||||
// Food Delete
|
||||
|
||||
const deleteDialog = ref(false);
|
||||
const deleteTarget = ref<IngredientFood | null>(null);
|
||||
function deleteEventHandler(item: IngredientFood) {
|
||||
|
|
@ -200,10 +201,7 @@ export default defineComponent({
|
|||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.foods.deleteOne(deleteTarget.value.id);
|
||||
if (data) {
|
||||
refreshFoods();
|
||||
}
|
||||
await foodStore.actions.deleteOne(deleteTarget.value.id);
|
||||
deleteDialog.value = false;
|
||||
}
|
||||
|
||||
|
|
@ -226,19 +224,14 @@ export default defineComponent({
|
|||
const { data } = await userApi.foods.merge(fromFood.value.id, toFood.value.id);
|
||||
|
||||
if (data) {
|
||||
refreshFoods();
|
||||
foodStore.actions.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Labels
|
||||
|
||||
const allLabels = ref([] as MultiPurposeLabelSummary[]);
|
||||
|
||||
async function refreshLabels() {
|
||||
const { data } = await userApi.multiPurposeLabels.getAll();
|
||||
allLabels.value = data ?? [];
|
||||
}
|
||||
const { labels: allLabels } = useLabelStore();
|
||||
|
||||
// ============================================================
|
||||
// Seed
|
||||
|
|
@ -260,15 +253,14 @@ export default defineComponent({
|
|||
const { data } = await userApi.seeders.foods({ locale: locale.value });
|
||||
|
||||
if (data) {
|
||||
refreshFoods();
|
||||
foodStore.actions.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
refreshLabels();
|
||||
return {
|
||||
tableConfig,
|
||||
tableHeaders,
|
||||
foods,
|
||||
foods: foodStore.foods,
|
||||
allLabels,
|
||||
validators,
|
||||
// Edit
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
</template>
|
||||
</v-autocomplete>
|
||||
|
||||
<v-alert v-if="labels.length > 0" type="error" class="mb-0 text-body-2">
|
||||
<v-alert v-if="labels && labels.length > 0" type="error" class="mb-0 text-body-2">
|
||||
{{ $t("data-pages.foods.seed-dialog-warning") }}
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
<CrudTable
|
||||
:table-config="tableConfig"
|
||||
:headers.sync="tableHeaders"
|
||||
:data="labels"
|
||||
:data="labels || []"
|
||||
:bulk-actions="[]"
|
||||
@delete-one="deleteEventHandler"
|
||||
@edit-one="editEventHandler"
|
||||
|
|
@ -118,6 +118,7 @@ import { useUserApi } from "~/composables/api";
|
|||
import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
|
||||
import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
|
||||
import { useLocales } from "~/composables/use-locales";
|
||||
import { useLabelData, useLabelStore } from "~/composables/store";
|
||||
|
||||
export default defineComponent({
|
||||
components: { MultiPurposeLabel },
|
||||
|
|
@ -149,31 +150,14 @@ export default defineComponent({
|
|||
// ============================================================
|
||||
// Labels
|
||||
|
||||
const labels = ref([] as MultiPurposeLabelSummary[]);
|
||||
|
||||
async function refreshLabels() {
|
||||
const { data } = await userApi.multiPurposeLabels.getAll();
|
||||
labels.value = data ?? [];
|
||||
}
|
||||
const labelData = useLabelData();
|
||||
const labelStore = useLabelStore();
|
||||
|
||||
// Create
|
||||
|
||||
const createLabelData = ref({
|
||||
groupId: "",
|
||||
id: "",
|
||||
name: "",
|
||||
color: "",
|
||||
});
|
||||
|
||||
async function createLabel() {
|
||||
await userApi.multiPurposeLabels.createOne(createLabelData.value);
|
||||
createLabelData.value = {
|
||||
groupId: "",
|
||||
id: "",
|
||||
name: "",
|
||||
color: "",
|
||||
};
|
||||
refreshLabels();
|
||||
await labelStore.actions.createOne(labelData.data);
|
||||
labelData.reset();
|
||||
state.createDialog = false;
|
||||
}
|
||||
|
||||
|
|
@ -190,10 +174,7 @@ export default defineComponent({
|
|||
if (!deleteTarget.value) {
|
||||
return;
|
||||
}
|
||||
const { data } = await userApi.multiPurposeLabels.deleteOne(deleteTarget.value.id);
|
||||
if (data) {
|
||||
refreshLabels();
|
||||
}
|
||||
await labelStore.actions.deleteOne(deleteTarget.value.id);
|
||||
state.deleteDialog = false;
|
||||
}
|
||||
|
||||
|
|
@ -214,15 +195,10 @@ export default defineComponent({
|
|||
if (!editLabel.value) {
|
||||
return;
|
||||
}
|
||||
const { data } = await userApi.multiPurposeLabels.updateOne(editLabel.value.id, editLabel.value);
|
||||
if (data) {
|
||||
refreshLabels();
|
||||
}
|
||||
await labelStore.actions.updateOne(editLabel.value);
|
||||
state.editDialog = false;
|
||||
}
|
||||
|
||||
refreshLabels();
|
||||
|
||||
// ============================================================
|
||||
// Seed
|
||||
|
||||
|
|
@ -243,7 +219,7 @@ export default defineComponent({
|
|||
const { data } = await userApi.seeders.labels({ locale: locale.value });
|
||||
|
||||
if (data) {
|
||||
refreshLabels();
|
||||
labelStore.actions.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -251,7 +227,7 @@ export default defineComponent({
|
|||
state,
|
||||
tableConfig,
|
||||
tableHeaders,
|
||||
labels,
|
||||
labels: labelStore.labels,
|
||||
validators,
|
||||
|
||||
deleteEventHandler,
|
||||
|
|
@ -260,7 +236,7 @@ export default defineComponent({
|
|||
editEventHandler,
|
||||
editSaveLabel,
|
||||
createLabel,
|
||||
createLabelData,
|
||||
createLabelData: labelData.data,
|
||||
|
||||
// Seed
|
||||
seedDatabase,
|
||||
|
|
|
|||
|
|
@ -6,8 +6,15 @@
|
|||
Combining the selected units will merge the Source Unit and Target Unit into a single unit. The
|
||||
<strong> Source Unit will be deleted </strong> and all of the references to the Source Unit will be updated to
|
||||
point to the Target Unit.
|
||||
<v-autocomplete v-model="fromUnit" return-object :items="units" item-text="name" label="Source Unit" />
|
||||
<v-autocomplete v-model="toUnit" return-object :items="units" item-text="name" label="Target Unit" />
|
||||
|
||||
<v-autocomplete v-model="fromUnit" return-object :items="units" item-text="id" label="Source Unit">
|
||||
<template #selection="{ item }"> {{ item.name }}</template>
|
||||
<template #item="{ item }"> {{ item.name }} </template>
|
||||
</v-autocomplete>
|
||||
<v-autocomplete v-model="toUnit" return-object :items="units" item-text="id" label="Target Unit">
|
||||
<template #selection="{ item }"> {{ item.name }}</template>
|
||||
<template #item="{ item }"> {{ item.name }} </template>
|
||||
</v-autocomplete>
|
||||
|
||||
<template v-if="canMerge && fromUnit && toUnit">
|
||||
<div class="text-center">Merging {{ fromUnit.name }} into {{ toUnit.name }}</div>
|
||||
|
|
@ -77,7 +84,7 @@
|
|||
</template>
|
||||
</v-autocomplete>
|
||||
|
||||
<v-alert v-if="units.length > 0" type="error" class="mb-0 text-body-2">
|
||||
<v-alert v-if="units && units.length > 0" type="error" class="mb-0 text-body-2">
|
||||
{{ $t("data-pages.foods.seed-dialog-warning") }}
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
|
|
@ -88,7 +95,7 @@
|
|||
<CrudTable
|
||||
:table-config="tableConfig"
|
||||
:headers.sync="tableHeaders"
|
||||
:data="units"
|
||||
:data="units || []"
|
||||
:bulk-actions="[]"
|
||||
@delete-one="deleteEventHandler"
|
||||
@edit-one="editEventHandler"
|
||||
|
|
@ -120,8 +127,8 @@ import type { LocaleObject } from "@nuxtjs/i18n";
|
|||
import { validators } from "~/composables/use-validators";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { IngredientUnit } from "~/types/api-types/recipe";
|
||||
import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
|
||||
import { useLocales } from "~/composables/use-locales";
|
||||
import { useUnitStore } from "~/composables/store";
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
|
@ -157,47 +164,39 @@ export default defineComponent({
|
|||
show: true,
|
||||
},
|
||||
];
|
||||
const units = ref<IngredientUnit[]>([]);
|
||||
async function refreshUnits() {
|
||||
const { data } = await userApi.units.getAll();
|
||||
units.value = data ?? [];
|
||||
}
|
||||
onMounted(() => {
|
||||
refreshUnits();
|
||||
});
|
||||
|
||||
const { units, actions: unitActions } = useUnitStore();
|
||||
|
||||
// Edit Units
|
||||
const editDialog = ref(false);
|
||||
const editTarget = ref<IngredientUnit | null>(null);
|
||||
function editEventHandler(item: IngredientUnit) {
|
||||
editTarget.value = item;
|
||||
editDialog.value = true;
|
||||
}
|
||||
|
||||
async function editSaveUnit() {
|
||||
if (!editTarget.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.units.updateOne(editTarget.value.id, editTarget.value);
|
||||
if (data) {
|
||||
refreshUnits();
|
||||
}
|
||||
|
||||
await unitActions.updateOne(editTarget.value);
|
||||
editDialog.value = false;
|
||||
}
|
||||
|
||||
// Delete Units
|
||||
const deleteDialog = ref(false);
|
||||
const deleteTarget = ref<IngredientUnit | null>(null);
|
||||
function deleteEventHandler(item: IngredientUnit) {
|
||||
deleteTarget.value = item;
|
||||
deleteDialog.value = true;
|
||||
}
|
||||
|
||||
async function deleteUnit() {
|
||||
if (!deleteTarget.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.units.deleteOne(deleteTarget.value.id);
|
||||
if (data) {
|
||||
refreshUnits();
|
||||
}
|
||||
await unitActions.deleteOne(deleteTarget.value.id);
|
||||
deleteDialog.value = false;
|
||||
}
|
||||
|
||||
|
|
@ -220,22 +219,10 @@ export default defineComponent({
|
|||
const { data } = await userApi.units.merge(fromUnit.value.id, toUnit.value.id);
|
||||
|
||||
if (data) {
|
||||
refreshUnits();
|
||||
unitActions.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Labels
|
||||
|
||||
const allLabels = ref([] as MultiPurposeLabelSummary[]);
|
||||
|
||||
async function refreshLabels() {
|
||||
const { data } = await userApi.multiPurposeLabels.getAll();
|
||||
allLabels.value = data ?? [];
|
||||
}
|
||||
|
||||
refreshLabels();
|
||||
|
||||
// ============================================================
|
||||
// Seed
|
||||
|
||||
|
|
@ -256,7 +243,7 @@ export default defineComponent({
|
|||
const { data } = await userApi.seeders.units({ locale: locale.value });
|
||||
|
||||
if (data) {
|
||||
refreshUnits();
|
||||
unitActions.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -264,7 +251,6 @@ export default defineComponent({
|
|||
tableConfig,
|
||||
tableHeaders,
|
||||
units,
|
||||
allLabels,
|
||||
validators,
|
||||
// Edit
|
||||
editDialog,
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<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.
|
||||
you can select cancel and your changes will not be saved.
|
||||
</div>
|
||||
</v-alert>
|
||||
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
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
|
||||
confidence score is displayed on the right of the title item. This is an average of all scores and may not be
|
||||
wholey accurate.
|
||||
wholely accurate.
|
||||
|
||||
<div class="my-4">
|
||||
Alerts will be displayed if a matching foods or unit is found but does not exists in the database.
|
||||
|
|
@ -84,11 +84,18 @@
|
|||
import { defineComponent, ref, useRoute, useRouter } from "@nuxtjs/composition-api";
|
||||
import { invoke, until } from "@vueuse/core";
|
||||
import { Parser } from "~/api/class-interfaces/recipes/recipe";
|
||||
import { CreateIngredientFood, CreateIngredientUnit, IngredientFood, IngredientUnit, ParsedIngredient } from "~/types/api-types/recipe";
|
||||
import {
|
||||
CreateIngredientFood,
|
||||
CreateIngredientUnit,
|
||||
IngredientFood,
|
||||
IngredientUnit,
|
||||
ParsedIngredient,
|
||||
} from "~/types/api-types/recipe";
|
||||
import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useFoods, useRecipe, useUnits } from "~/composables/recipes";
|
||||
import { useRecipe } from "~/composables/recipes";
|
||||
import { RecipeIngredient } from "~/types/api-types/admin";
|
||||
import { useFoodData, useFoodStore, useUnitStore } from "~/composables/store";
|
||||
|
||||
interface Error {
|
||||
ingredientIndex: number;
|
||||
|
|
@ -182,8 +189,9 @@ export default defineComponent({
|
|||
// =========================================================
|
||||
// Food and Ingredient Logic
|
||||
|
||||
const { foods, workingFoodData, actions } = useFoods();
|
||||
const { units } = useUnits();
|
||||
const foodStore = useFoodStore();
|
||||
const foodData = useFoodData();
|
||||
const { units } = useUnitStore();
|
||||
|
||||
const errors = ref<Error[]>([]);
|
||||
|
||||
|
|
@ -201,16 +209,17 @@ export default defineComponent({
|
|||
if (!food) {
|
||||
return false;
|
||||
}
|
||||
if (foods.value && food?.name) {
|
||||
return foods.value.some((f) => f.name === food.name);
|
||||
if (foodStore.foods.value && food?.name) {
|
||||
return foodStore.foods.value.some((f) => f.name === food.name);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
async function createFood(food: CreateIngredientFood, index: number) {
|
||||
workingFoodData.name = food.name;
|
||||
await actions.createOne();
|
||||
foodData.data.name = food.name;
|
||||
await foodStore.actions.createOne(foodData.data);
|
||||
errors.value[index].foodError = false;
|
||||
foodData.reset();
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
|
|
@ -219,16 +228,16 @@ export default defineComponent({
|
|||
let ingredients = parsedIng.value.map((ing) => {
|
||||
return {
|
||||
...ing.ingredient,
|
||||
originalText: ing.input
|
||||
originalText: ing.input,
|
||||
} as RecipeIngredient;
|
||||
});
|
||||
|
||||
ingredients = ingredients.map((ing) => {
|
||||
if (!foods.value || !units.value) {
|
||||
if (!foodStore.foods.value || !units.value) {
|
||||
return ing;
|
||||
}
|
||||
// Get food from foods
|
||||
ing.food = foods.value.find((f) => f.name === ing.food?.name);
|
||||
ing.food = foodStore.foods.value.find((f) => f.name === ing.food?.name);
|
||||
|
||||
// Get unit from units
|
||||
ing.unit = units.value.find((u) => u.name === ing.unit?.name);
|
||||
|
|
@ -252,8 +261,8 @@ export default defineComponent({
|
|||
saveAll,
|
||||
createFood,
|
||||
errors,
|
||||
actions,
|
||||
workingFoodData,
|
||||
actions: foodStore.actions,
|
||||
workingFoodData: foodData,
|
||||
isError,
|
||||
panels,
|
||||
asPercentage,
|
||||
|
|
|
|||
|
|
@ -108,10 +108,11 @@ import { defineComponent, toRefs, computed, reactive } from "@nuxtjs/composition
|
|||
import RecipeSearchFilterSelector from "~/components/Domain/Recipe/RecipeSearchFilterSelector.vue";
|
||||
import RecipeCategoryTagSelector from "~/components/Domain/Recipe/RecipeCategoryTagSelector.vue";
|
||||
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
|
||||
import { useRecipes, allRecipes, useFoods } from "~/composables/recipes";
|
||||
import { useRecipes, allRecipes } from "~/composables/recipes";
|
||||
import { RecipeSummary } from "~/types/api-types/recipe";
|
||||
import { useRouteQuery } from "~/composables/use-router";
|
||||
import { RecipeTag } from "~/types/api-types/user";
|
||||
import { useFoodStore } from "~/composables/store";
|
||||
|
||||
interface GenericFilter {
|
||||
exclude: boolean;
|
||||
|
|
@ -259,7 +260,7 @@ export default defineComponent({
|
|||
state.foodFilter = params;
|
||||
}
|
||||
|
||||
const { foods } = useFoods();
|
||||
const { foods } = useFoodStore();
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue