mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 13:35:23 +02:00
Feature/group items editor (#1064)
* update types * remove toolbox routes * remove unused "" * add generic crud table * update calls for type safety * recreate food/unit editors * fix type error * remove shopping list link * add transition * add basic search box * conditional show-select * styling + basic download support * generic download as json function * add fraction support * add export option * add label text
This commit is contained in:
Hayden
GitHub
parent
86b450fb8c
commit
8c0c8be659
17 changed files with 674 additions and 364 deletions
|
|
@ -1,171 +0,0 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<BaseCardSectionTitle title="Manage Units"> </BaseCardSectionTitle>
|
||||
<v-toolbar flat color="background">
|
||||
<!-- New/Edit Food Dialog -->
|
||||
<BaseDialog
|
||||
v-model="newFoodDialog"
|
||||
:title="dialog.title"
|
||||
:icon="$globals.icons.units"
|
||||
:submit-text="dialog.text"
|
||||
:keep-open="!validForm"
|
||||
@submit="create ? actions.createOne(domCreateFoodForm) : actions.updateOne()"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-form ref="domCreateFoodForm">
|
||||
<v-text-field v-model="workingFoodData.name" label="Name" :rules="[validators.required]"></v-text-field>
|
||||
<v-text-field v-model="workingFoodData.description" label="Description"></v-text-field>
|
||||
<v-autocomplete
|
||||
v-model="workingFoodData.labelId"
|
||||
clearable
|
||||
:items="allLabels"
|
||||
item-value="id"
|
||||
item-text="name"
|
||||
>
|
||||
</v-autocomplete>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Delete Food Dialog -->
|
||||
<BaseDialog
|
||||
v-model="deleteFoodDialog"
|
||||
:title="$t('general.confirm')"
|
||||
color="error"
|
||||
@confirm="actions.deleteOne(deleteTarget)"
|
||||
>
|
||||
<template #activator> </template>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BaseButton
|
||||
class="mr-1"
|
||||
@click="
|
||||
create = true;
|
||||
actions.resetWorking();
|
||||
newFoodDialog = true;
|
||||
"
|
||||
></BaseButton>
|
||||
<BaseButton secondary @click="filter = !filter"> Filter </BaseButton>
|
||||
</v-toolbar>
|
||||
|
||||
<v-expand-transition>
|
||||
<div v-show="filter">
|
||||
<v-text-field v-model="search" style="max-width: 500px" label="Filter" class="ml-4"> </v-text-field>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
|
||||
<v-data-table :headers="headers" :items="foods || []" item-key="id" class="elevation-0" :search="search">
|
||||
<template #item.label="{ item }">
|
||||
<v-chip v-if="item.label" label>
|
||||
{{ item.label.name }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<template #item.actions="{ item }">
|
||||
<div class="d-flex justify-end">
|
||||
<BaseButton
|
||||
edit
|
||||
small
|
||||
class="mr-2"
|
||||
@click="
|
||||
create = false;
|
||||
actions.setWorking(item);
|
||||
newFoodDialog = true;
|
||||
"
|
||||
></BaseButton>
|
||||
<BaseButton
|
||||
delete
|
||||
small
|
||||
@click="
|
||||
deleteFoodDialog = true;
|
||||
deleteTarget = item.id;
|
||||
"
|
||||
></BaseButton>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<v-divider></v-divider>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, ref, computed } from "@nuxtjs/composition-api";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useFoods } from "~/composables/recipes";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
const { foods, actions, workingFoodData, validForm } = useFoods();
|
||||
|
||||
const domCreateFoodForm = ref(null);
|
||||
const domFoodDialog = ref(null);
|
||||
|
||||
const dialog = computed(() => {
|
||||
if (state.create) {
|
||||
return {
|
||||
title: "Create Food",
|
||||
text: "Create",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
title: "Edit Food",
|
||||
text: "Update",
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
deleteFoodDialog: false,
|
||||
newFoodDialog: false,
|
||||
deleteTarget: 0,
|
||||
headers: [
|
||||
{ text: "Id", value: "id" },
|
||||
{ text: "Name", value: "name" },
|
||||
{ text: "Description", value: "description" },
|
||||
{ text: "Label", value: "label" },
|
||||
{ text: "", value: "actions", sortable: false },
|
||||
],
|
||||
filter: false,
|
||||
create: true,
|
||||
search: "",
|
||||
});
|
||||
|
||||
const userApi = useUserApi();
|
||||
|
||||
const allLabels = ref([] as MultiPurposeLabelSummary[]);
|
||||
|
||||
async function refreshLabels() {
|
||||
const { data } = await userApi.multiPurposeLabels.getAll();
|
||||
allLabels.value = data ?? [];
|
||||
}
|
||||
|
||||
refreshLabels();
|
||||
|
||||
return {
|
||||
allLabels,
|
||||
refreshLabels,
|
||||
...toRefs(state),
|
||||
actions,
|
||||
dialog,
|
||||
domCreateFoodForm,
|
||||
domFoodDialog,
|
||||
foods,
|
||||
validators,
|
||||
validForm,
|
||||
workingFoodData,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: "Foods",
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<!-- Create/Edit Unit Dialog -->
|
||||
<BaseDialog
|
||||
v-model="createUnitDialog"
|
||||
:title="dialog.title"
|
||||
:icon="$globals.icons.units"
|
||||
:submit-text="dialog.text"
|
||||
:keep-open="!validForm"
|
||||
@submit="create ? actions.createOne(domCreateUnitForm) : actions.updateOne()"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-form ref="domCreateUnitForm">
|
||||
<v-text-field v-model="workingUnitData.name" label="Name" :rules="[validators.required]"></v-text-field>
|
||||
<v-text-field v-model="workingUnitData.abbreviation" label="Abbreviation"></v-text-field>
|
||||
<v-text-field v-model="workingUnitData.description" label="Description"></v-text-field>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Delete Unit Dialog -->
|
||||
<BaseDialog
|
||||
v-model="deleteUnitDialog"
|
||||
:title="$t('general.confirm')"
|
||||
color="error"
|
||||
@confirm="actions.deleteOne(item.id)"
|
||||
>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<BaseCardSectionTitle title="Manage Units"> </BaseCardSectionTitle>
|
||||
<v-toolbar flat color="background">
|
||||
<BaseButton
|
||||
class="mr-1"
|
||||
@click="
|
||||
create = true;
|
||||
actions.resetWorking();
|
||||
createUnitDialog = true;
|
||||
"
|
||||
></BaseButton>
|
||||
<BaseButton secondary @click="filter = !filter"> Filter </BaseButton>
|
||||
</v-toolbar>
|
||||
|
||||
<v-expand-transition>
|
||||
<div v-show="filter">
|
||||
<v-text-field v-model="search" style="max-width: 500px" label="Filter" class="ml-4"> </v-text-field>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
|
||||
<v-data-table :headers="headers" :items="units || []" item-key="id" class="elevation-0" :search="search">
|
||||
<template #item.actions="{ item }">
|
||||
<div class="d-flex justify-end">
|
||||
<BaseButton
|
||||
edit
|
||||
small
|
||||
class="mr-2"
|
||||
@click="
|
||||
create = false;
|
||||
actions.setWorking(item);
|
||||
createUnitDialog = true;
|
||||
"
|
||||
></BaseButton>
|
||||
<BaseButton
|
||||
delete
|
||||
small
|
||||
@click="
|
||||
deleteUnitDialog = true;
|
||||
deleteUnitTarget = item.id;
|
||||
"
|
||||
></BaseButton>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<v-divider></v-divider>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, ref, computed } from "@nuxtjs/composition-api";
|
||||
import { useUnits } from "~/composables/recipes";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
const { units, actions, workingUnitData, validForm } = useUnits();
|
||||
|
||||
const domCreateUnitForm = ref(null);
|
||||
const domUnitDialog = ref(null);
|
||||
|
||||
const dialog = computed(() => {
|
||||
if (state.create) {
|
||||
return {
|
||||
title: "Create Unit",
|
||||
text: "Create",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
title: "Edit Unit",
|
||||
text: "Update",
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
createUnitDialog: false,
|
||||
deleteUnitDialog: false,
|
||||
deleteUnitTarget: 0,
|
||||
headers: [
|
||||
{ text: "Id", value: "id" },
|
||||
{ text: "Name", value: "name" },
|
||||
{ text: "Abbreviation", value: "abbreviation" },
|
||||
{ text: "Description", value: "description" },
|
||||
{ text: "", value: "actions", sortable: false },
|
||||
],
|
||||
filter: false,
|
||||
create: true,
|
||||
search: "",
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
actions,
|
||||
dialog,
|
||||
domCreateUnitForm,
|
||||
domUnitDialog,
|
||||
units,
|
||||
validators,
|
||||
validForm,
|
||||
workingUnitData,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: "Units",
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
83
frontend/pages/group/data.vue
Normal file
83
frontend/pages/group/data.vue
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<BasePageTitle>
|
||||
<template #header>
|
||||
<v-img max-height="175" max-width="175" :src="require('~/static/svgs/manage-recipes.svg')"></v-img>
|
||||
</template>
|
||||
<template #title> Data Management </template>
|
||||
Select which data set you want to make changes to.
|
||||
<BannerExperimental class="mt-5"></BannerExperimental>
|
||||
<template #content>
|
||||
<div>
|
||||
<BaseOverflowButton
|
||||
:btn-text="buttonText"
|
||||
mode="link"
|
||||
rounded
|
||||
:items="[
|
||||
{
|
||||
text: 'Foods',
|
||||
value: 'url',
|
||||
to: '/group/data/foods',
|
||||
},
|
||||
{
|
||||
text: 'Units',
|
||||
value: 'new',
|
||||
to: '/group/data/units',
|
||||
},
|
||||
// {
|
||||
// text: 'Labels',
|
||||
// value: 'new',
|
||||
// to: '/group/data/labels',
|
||||
// },
|
||||
]"
|
||||
>
|
||||
</BaseOverflowButton>
|
||||
</div>
|
||||
</template>
|
||||
</BasePageTitle>
|
||||
<section>
|
||||
<v-scroll-x-transition>
|
||||
<NuxtChild />
|
||||
</v-scroll-x-transition>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, useRoute } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const buttonLookup: { [key: string]: string } = {
|
||||
foods: "Foods",
|
||||
units: "Units",
|
||||
labels: "Labels",
|
||||
};
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const buttonText = computed(() => {
|
||||
const last = route.value.path.split("/").pop();
|
||||
|
||||
if (last) {
|
||||
return buttonLookup[last];
|
||||
}
|
||||
|
||||
return "Select Data";
|
||||
});
|
||||
|
||||
return {
|
||||
buttonText,
|
||||
};
|
||||
},
|
||||
head: {
|
||||
title: "Data Management",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
176
frontend/pages/group/data/foods.vue
Normal file
176
frontend/pages/group/data/foods.vue
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Edit Dialog -->
|
||||
<BaseDialog
|
||||
v-model="editDialog"
|
||||
:icon="$globals.icons.foods"
|
||||
title="Edit Food"
|
||||
:submit-text="$tc('general.save')"
|
||||
@submit="editSaveFood"
|
||||
>
|
||||
<v-card-text v-if="editTarget">
|
||||
<v-form ref="domCreateFoodForm">
|
||||
<v-text-field v-model="editTarget.name" label="Name" :rules="[validators.required]"></v-text-field>
|
||||
<v-text-field v-model="editTarget.description" label="Description"></v-text-field>
|
||||
<v-autocomplete
|
||||
v-model="editTarget.labelId"
|
||||
clearable
|
||||
:items="allLabels"
|
||||
item-value="id"
|
||||
item-text="name"
|
||||
label="Food Label"
|
||||
>
|
||||
</v-autocomplete>
|
||||
</v-form> </v-card-text
|
||||
></BaseDialog>
|
||||
|
||||
<!-- Delete Dialog -->
|
||||
<BaseDialog
|
||||
v-model="deleteDialog"
|
||||
:title="$tc('general.delete')"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
color="error"
|
||||
@confirm="deleteFood"
|
||||
>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Recipe Data Table -->
|
||||
<BaseCardSectionTitle :icon="$globals.icons.foods" section title="Food Data"> </BaseCardSectionTitle>
|
||||
<CrudTable
|
||||
:table-config="tableConfig"
|
||||
:headers.sync="tableHeaders"
|
||||
:data="foods"
|
||||
:bulk-actions="[]"
|
||||
@delete-one="deleteEventHandler"
|
||||
@edit-one="editEventHandler"
|
||||
>
|
||||
<template #button-row>
|
||||
<BaseButton :disabled="true">
|
||||
<template #icon> {{ $globals.icons.foods }} </template>
|
||||
Combine
|
||||
</BaseButton>
|
||||
</template>
|
||||
<template #item.label="{ item }">
|
||||
<MultiPurposeLabel v-if="item.label" :label="item.label">
|
||||
{{ item.label.name }}
|
||||
</MultiPurposeLabel>
|
||||
</template>
|
||||
</CrudTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { IngredientFood } from "~/types/api-types/recipe";
|
||||
import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
|
||||
import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
|
||||
|
||||
export default defineComponent({
|
||||
components: { MultiPurposeLabel },
|
||||
setup() {
|
||||
const userApi = useUserApi();
|
||||
const tableConfig = {
|
||||
hideColumns: true,
|
||||
canExport: true,
|
||||
};
|
||||
const tableHeaders = [
|
||||
{
|
||||
text: "Id",
|
||||
value: "id",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: "Name",
|
||||
value: "name",
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
text: "Description",
|
||||
value: "description",
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
text: "Label",
|
||||
value: "label",
|
||||
show: true,
|
||||
},
|
||||
];
|
||||
const foods = ref<IngredientFood[]>([]);
|
||||
async function refreshFoods() {
|
||||
const { data } = await userApi.foods.getAll();
|
||||
foods.value = data ?? [];
|
||||
}
|
||||
onMounted(() => {
|
||||
refreshFoods();
|
||||
});
|
||||
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();
|
||||
}
|
||||
|
||||
editDialog.value = false;
|
||||
}
|
||||
const deleteDialog = ref(false);
|
||||
const deleteTarget = ref<IngredientFood | null>(null);
|
||||
function deleteEventHandler(item: IngredientFood) {
|
||||
deleteTarget.value = item;
|
||||
deleteDialog.value = true;
|
||||
}
|
||||
async function deleteFood() {
|
||||
if (!deleteTarget.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.foods.deleteOne(deleteTarget.value.id);
|
||||
if (data) {
|
||||
refreshFoods();
|
||||
}
|
||||
deleteDialog.value = false;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Labels
|
||||
|
||||
const allLabels = ref([] as MultiPurposeLabelSummary[]);
|
||||
|
||||
async function refreshLabels() {
|
||||
const { data } = await userApi.multiPurposeLabels.getAll();
|
||||
allLabels.value = data ?? [];
|
||||
}
|
||||
|
||||
refreshLabels();
|
||||
return {
|
||||
tableConfig,
|
||||
tableHeaders,
|
||||
foods,
|
||||
allLabels,
|
||||
validators,
|
||||
// Edit
|
||||
editDialog,
|
||||
editEventHandler,
|
||||
editSaveFood,
|
||||
editTarget,
|
||||
// Delete
|
||||
deleteEventHandler,
|
||||
deleteDialog,
|
||||
deleteFood,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
24
frontend/pages/group/data/index.vue
Normal file
24
frontend/pages/group/data/index.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, useRouter } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
onMounted(() => {
|
||||
// Force redirect to first valid page
|
||||
router.push("/group/data/foods");
|
||||
});
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
167
frontend/pages/group/data/units.vue
Normal file
167
frontend/pages/group/data/units.vue
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Edit Dialog -->
|
||||
<BaseDialog
|
||||
v-model="editDialog"
|
||||
:icon="$globals.icons.units"
|
||||
title="Edit Food"
|
||||
:submit-text="$tc('general.save')"
|
||||
@submit="editSaveFood"
|
||||
>
|
||||
<v-card-text v-if="editTarget">
|
||||
<v-form ref="domCreateFoodForm">
|
||||
<v-text-field v-model="editTarget.name" label="Name" :rules="[validators.required]"></v-text-field>
|
||||
<v-text-field v-model="editTarget.abbreviation" label="Abbreviation"></v-text-field>
|
||||
<v-text-field v-model="editTarget.description" label="Description"></v-text-field>
|
||||
<v-checkbox v-model="editTarget.fraction" hide-details label="Display as Fraction"></v-checkbox>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Delete Dialog -->
|
||||
<BaseDialog
|
||||
v-model="deleteDialog"
|
||||
:title="$tc('general.delete')"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
color="error"
|
||||
@confirm="deleteFood"
|
||||
>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Recipe Data Table -->
|
||||
<BaseCardSectionTitle :icon="$globals.icons.units" section title="Unit Data"> </BaseCardSectionTitle>
|
||||
<CrudTable
|
||||
:table-config="tableConfig"
|
||||
:headers.sync="tableHeaders"
|
||||
:data="units"
|
||||
:bulk-actions="[]"
|
||||
@delete-one="deleteEventHandler"
|
||||
@edit-one="editEventHandler"
|
||||
>
|
||||
<template #item.fraction="{ item }">
|
||||
<v-icon :color="item.fraction ? 'success' : undefined">
|
||||
{{ item.fraction ? $globals.icons.check : $globals.icons.close }}
|
||||
</v-icon>
|
||||
</template>
|
||||
</CrudTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
|
||||
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";
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const userApi = useUserApi();
|
||||
const tableConfig = {
|
||||
hideColumns: true,
|
||||
canExport: true,
|
||||
};
|
||||
const tableHeaders = [
|
||||
{
|
||||
text: "Id",
|
||||
value: "id",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: "Name",
|
||||
value: "name",
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
text: "Abbreviation",
|
||||
value: "abbreviation",
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
text: "Description",
|
||||
value: "description",
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
text: "Fraction",
|
||||
value: "fraction",
|
||||
show: true,
|
||||
},
|
||||
];
|
||||
const units = ref<IngredientUnit[]>([]);
|
||||
async function refreshFoods() {
|
||||
const { data } = await userApi.units.getAll();
|
||||
units.value = data ?? [];
|
||||
}
|
||||
onMounted(() => {
|
||||
refreshFoods();
|
||||
});
|
||||
const editDialog = ref(false);
|
||||
const editTarget = ref<IngredientUnit | null>(null);
|
||||
function editEventHandler(item: IngredientUnit) {
|
||||
editTarget.value = item;
|
||||
editDialog.value = true;
|
||||
}
|
||||
async function editSaveFood() {
|
||||
if (!editTarget.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.units.updateOne(editTarget.value.id, editTarget.value);
|
||||
if (data) {
|
||||
refreshFoods();
|
||||
}
|
||||
|
||||
editDialog.value = false;
|
||||
}
|
||||
const deleteDialog = ref(false);
|
||||
const deleteTarget = ref<IngredientUnit | null>(null);
|
||||
function deleteEventHandler(item: IngredientUnit) {
|
||||
deleteTarget.value = item;
|
||||
deleteDialog.value = true;
|
||||
}
|
||||
async function deleteFood() {
|
||||
if (!deleteTarget.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.units.deleteOne(deleteTarget.value.id);
|
||||
if (data) {
|
||||
refreshFoods();
|
||||
}
|
||||
deleteDialog.value = false;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Labels
|
||||
|
||||
const allLabels = ref([] as MultiPurposeLabelSummary[]);
|
||||
|
||||
async function refreshLabels() {
|
||||
const { data } = await userApi.multiPurposeLabels.getAll();
|
||||
allLabels.value = data ?? [];
|
||||
}
|
||||
|
||||
refreshLabels();
|
||||
return {
|
||||
tableConfig,
|
||||
tableHeaders,
|
||||
units,
|
||||
allLabels,
|
||||
validators,
|
||||
// Edit
|
||||
editDialog,
|
||||
editEventHandler,
|
||||
editSaveFood,
|
||||
editTarget,
|
||||
// Delete
|
||||
deleteEventHandler,
|
||||
deleteDialog,
|
||||
deleteFood,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -45,12 +45,12 @@
|
|||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.edit,
|
||||
text: $t('general.edit'),
|
||||
text: $tc('general.edit'),
|
||||
event: 'edit',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: $t('general.delete'),
|
||||
text: $tc('general.delete'),
|
||||
event: 'delete',
|
||||
},
|
||||
]"
|
||||
|
|
|
|||
|
|
@ -125,6 +125,15 @@
|
|||
Manage your recipe data and make bulk changes
|
||||
</UserProfileLinkCard>
|
||||
</v-col>
|
||||
<v-col v-if="user.advanced" cols="12" sm="12" md="6">
|
||||
<UserProfileLinkCard
|
||||
:link="{ text: 'Manage Data', to: '/group/data/foods' }"
|
||||
:image="require('~/static/svgs/manage-recipes.svg')"
|
||||
>
|
||||
<template #title> Manage Data </template>
|
||||
Manage your Food and Units (more options coming soon)
|
||||
</UserProfileLinkCard>
|
||||
</v-col>
|
||||
<v-col v-if="user.advanced" cols="12" sm="12" md="6">
|
||||
<UserProfileLinkCard
|
||||
:link="{ text: 'Manage Data Migrations', to: '/user/group/data/migrations' }"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue