mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue