mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-25 08:09:41 +02:00
feat(frontend): ✨ Create CRUD User Interface for Units and Foods
This commit is contained in:
parent
122d35ec09
commit
a1aad078da
13 changed files with 517 additions and 42 deletions
|
@ -62,12 +62,14 @@ export const useNotifications = function () {
|
|||
}
|
||||
}
|
||||
|
||||
async function testById() {
|
||||
// TODO: Test by ID
|
||||
async function testById(id: number) {
|
||||
const {data} = await api.notifications.testNotification(id, null)
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
async function testByUrl() {
|
||||
// TODO: Test by URL
|
||||
async function testByUrl(testUrl: string) {
|
||||
const {data} = await api.notifications.testNotification(null, testUrl)
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const notifications = getNotifications();
|
||||
|
|
91
frontend/composables/use-recipe-foods.ts
Normal file
91
frontend/composables/use-recipe-foods.ts
Normal file
|
@ -0,0 +1,91 @@
|
|||
import { useAsync, ref, reactive } from "@nuxtjs/composition-api";
|
||||
import { useAsyncKey } from "./use-utils";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
import { Food } from "~/api/class-interfaces/recipe-foods";
|
||||
|
||||
export const useFoods = function () {
|
||||
const api = useApiSingleton();
|
||||
const loading = ref(false);
|
||||
const deleteTargetId = ref(0);
|
||||
const validForm = ref(true);
|
||||
|
||||
const workingFoodData = reactive({
|
||||
id: 0,
|
||||
name: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
const actions = {
|
||||
getAll() {
|
||||
loading.value = true;
|
||||
const units = useAsync(async () => {
|
||||
const { data } = await api.foods.getAll();
|
||||
return data;
|
||||
}, useAsyncKey());
|
||||
|
||||
loading.value = false
|
||||
return units;
|
||||
},
|
||||
async refreshAll() {
|
||||
loading.value = true;
|
||||
const { data } = await api.foods.getAll();
|
||||
|
||||
if (data) {
|
||||
foods.value = data;
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
},
|
||||
async createOne(domForm: VForm | null = null) {
|
||||
if (domForm && !domForm.validate()) {
|
||||
validForm.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
const { data } = await api.foods.createOne(workingFoodData);
|
||||
if (data && foods.value) {
|
||||
foods.value.push(data);
|
||||
} else {
|
||||
this.refreshAll();
|
||||
}
|
||||
domForm?.reset();
|
||||
validForm.value = true;
|
||||
this.resetWorking();
|
||||
loading.value = false;
|
||||
},
|
||||
async updateOne() {
|
||||
if (!workingFoodData.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
const { data } = await api.foods.updateOne(workingFoodData.id, workingFoodData);
|
||||
if (data && foods.value) {
|
||||
this.refreshAll();
|
||||
}
|
||||
loading.value = false;
|
||||
},
|
||||
async deleteOne(id: string | number) {
|
||||
loading.value = true;
|
||||
const { data } = await api.foods.deleteOne(id);
|
||||
if (data && foods.value) {
|
||||
this.refreshAll();
|
||||
}
|
||||
},
|
||||
resetWorking() {
|
||||
workingFoodData.id = 0;
|
||||
workingFoodData.name = "";
|
||||
workingFoodData.description = "";
|
||||
},
|
||||
setWorking(item: Food) {
|
||||
workingFoodData.id = item.id;
|
||||
workingFoodData.name = item.name;
|
||||
workingFoodData.description = item.description;
|
||||
},
|
||||
};
|
||||
|
||||
const foods = actions.getAll();
|
||||
|
||||
return { foods, workingFoodData, deleteTargetId, actions, validForm };
|
||||
};
|
94
frontend/composables/use-recipe-units.ts
Normal file
94
frontend/composables/use-recipe-units.ts
Normal file
|
@ -0,0 +1,94 @@
|
|||
import { useAsync, ref, reactive } from "@nuxtjs/composition-api";
|
||||
import { useAsyncKey } from "./use-utils";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
import { Unit } from "~/api/class-interfaces/recipe-units";
|
||||
|
||||
export const useUnits = function () {
|
||||
const api = useApiSingleton();
|
||||
const loading = ref(false);
|
||||
const deleteTargetId = ref(0);
|
||||
const validForm = ref(true);
|
||||
|
||||
const workingUnitData = reactive({
|
||||
id: 0,
|
||||
name: "",
|
||||
abbreviation: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
const actions = {
|
||||
getAll() {
|
||||
loading.value = true;
|
||||
const units = useAsync(async () => {
|
||||
const { data } = await api.units.getAll();
|
||||
return data;
|
||||
}, useAsyncKey());
|
||||
|
||||
loading.value = false
|
||||
return units;
|
||||
},
|
||||
async refreshAll() {
|
||||
loading.value = true;
|
||||
const { data } = await api.units.getAll();
|
||||
|
||||
if (data) {
|
||||
units.value = data;
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
},
|
||||
async createOne(domForm: VForm | null = null) {
|
||||
if (domForm && !domForm.validate()) {
|
||||
validForm.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
const { data } = await api.units.createOne(workingUnitData);
|
||||
if (data && units.value) {
|
||||
units.value.push(data);
|
||||
} else {
|
||||
this.refreshAll();
|
||||
}
|
||||
domForm?.reset();
|
||||
validForm.value = true;
|
||||
this.resetWorking();
|
||||
loading.value = false;
|
||||
},
|
||||
async updateOne() {
|
||||
if (!workingUnitData.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
const { data } = await api.units.updateOne(workingUnitData.id, workingUnitData);
|
||||
if (data && units.value) {
|
||||
this.refreshAll();
|
||||
}
|
||||
loading.value = false;
|
||||
},
|
||||
async deleteOne(id: string | number) {
|
||||
loading.value = true;
|
||||
const { data } = await api.units.deleteOne(id);
|
||||
if (data && units.value) {
|
||||
this.refreshAll();
|
||||
}
|
||||
},
|
||||
resetWorking() {
|
||||
workingUnitData.id = 0;
|
||||
workingUnitData.name = "";
|
||||
workingUnitData.abbreviation = "";
|
||||
workingUnitData.description = "";
|
||||
},
|
||||
setWorking(item: Unit) {
|
||||
workingUnitData.id = item.id;
|
||||
workingUnitData.name = item.name;
|
||||
workingUnitData.abbreviation = item.abbreviation;
|
||||
workingUnitData.description = item.description;
|
||||
},
|
||||
};
|
||||
|
||||
const units = actions.getAll();
|
||||
|
||||
return { units, workingUnitData, deleteTargetId, actions, validForm };
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue