mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-11-03 18:53:17 -05:00
682 lines
19 KiB
Vue
682 lines
19 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Merge Dialog -->
|
|
<BaseDialog
|
|
v-model="mergeDialog"
|
|
:icon="$globals.icons.foods"
|
|
:title="$t('data-pages.foods.combine-food')"
|
|
can-confirm
|
|
@confirm="mergeFoods"
|
|
>
|
|
<v-card-text>
|
|
<div>
|
|
{{ $t("data-pages.foods.merge-dialog-text") }}
|
|
</div>
|
|
<v-autocomplete
|
|
v-model="fromFood"
|
|
return-object
|
|
:items="foods"
|
|
item-title="name"
|
|
:label="$t('data-pages.foods.source-food')"
|
|
/>
|
|
<v-autocomplete
|
|
v-model="toFood"
|
|
return-object
|
|
:items="foods"
|
|
item-title="name"
|
|
:label="$t('data-pages.foods.target-food')"
|
|
/>
|
|
|
|
<template v-if="canMerge && fromFood && toFood">
|
|
<div class="text-center">
|
|
{{ $t("data-pages.foods.merge-food-example", { food1: fromFood.name, food2: toFood.name }) }}
|
|
</div>
|
|
</template>
|
|
</v-card-text>
|
|
</BaseDialog>
|
|
|
|
<!-- Seed Dialog -->
|
|
<BaseDialog
|
|
v-model="seedDialog"
|
|
:icon="$globals.icons.foods"
|
|
:title="$t('data-pages.seed-data')"
|
|
can-confirm
|
|
@confirm="seedDatabase"
|
|
>
|
|
<v-card-text>
|
|
<div class="pb-2">
|
|
{{ $t("data-pages.foods.seed-dialog-text") }}
|
|
</div>
|
|
<v-autocomplete
|
|
v-model="locale"
|
|
:items="locales"
|
|
item-title="name"
|
|
:label="$t('data-pages.select-language')"
|
|
class="my-3"
|
|
hide-details
|
|
variant="outlined"
|
|
offset
|
|
>
|
|
<template #item="{ item }">
|
|
<v-list-item-title> {{ item.raw.name }} </v-list-item-title>
|
|
<v-list-item-subtitle>
|
|
{{ item.raw.progress }}% {{ $t("language-dialog.translated") }}
|
|
</v-list-item-subtitle>
|
|
</template>
|
|
</v-autocomplete>
|
|
|
|
<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>
|
|
</BaseDialog>
|
|
|
|
<!-- Create Dialog -->
|
|
<BaseDialog
|
|
v-model="createDialog"
|
|
:icon="$globals.icons.foods"
|
|
:title="$t('data-pages.foods.create-food')"
|
|
:submit-icon="$globals.icons.save"
|
|
:submit-text="$t('general.save')"
|
|
can-submit
|
|
@submit="createFood"
|
|
>
|
|
<v-card-text>
|
|
<v-form ref="domNewFoodForm">
|
|
<v-text-field
|
|
v-model="createTarget.name"
|
|
autofocus
|
|
:label="$t('general.name')"
|
|
:hint="$t('data-pages.foods.example-food-singular')"
|
|
:rules="[validators.required]"
|
|
/>
|
|
<v-text-field
|
|
v-model="createTarget.pluralName"
|
|
:label="$t('general.plural-name')"
|
|
:hint="$t('data-pages.foods.example-food-plural')"
|
|
/>
|
|
<v-text-field
|
|
v-model="createTarget.description"
|
|
:label="$t('recipe.description')"
|
|
/>
|
|
<v-autocomplete
|
|
v-model="createTarget.labelId"
|
|
clearable
|
|
:items="allLabels"
|
|
item-value="id"
|
|
item-title="name"
|
|
:label="$t('data-pages.foods.food-label')"
|
|
/>
|
|
<v-checkbox
|
|
v-model="createTarget.onHand"
|
|
hide-details
|
|
:label="$t('tool.on-hand')"
|
|
/>
|
|
<p class="text-caption mt-1">
|
|
{{ $t("data-pages.foods.on-hand-checkbox-label") }}
|
|
</p>
|
|
</v-form>
|
|
</v-card-text>
|
|
</BaseDialog>
|
|
|
|
<!-- Alias Sub-Dialog -->
|
|
<RecipeDataAliasManagerDialog
|
|
v-if="editTarget"
|
|
v-model="aliasManagerDialog"
|
|
:data="editTarget"
|
|
@submit="updateFoodAlias"
|
|
@cancel="aliasManagerDialog = false"
|
|
/>
|
|
|
|
<!-- Edit Dialog -->
|
|
<BaseDialog
|
|
v-model="editDialog"
|
|
:icon="$globals.icons.foods"
|
|
:title="$t('data-pages.foods.edit-food')"
|
|
:submit-icon="$globals.icons.save"
|
|
:submit-text="$t('general.save')"
|
|
can-submit
|
|
@submit="editSaveFood"
|
|
>
|
|
<v-card-text v-if="editTarget">
|
|
<v-form ref="domEditFoodForm">
|
|
<v-text-field
|
|
v-model="editTarget.name"
|
|
:label="$t('general.name')"
|
|
:hint="$t('data-pages.foods.example-food-singular')"
|
|
:rules="[validators.required]"
|
|
/>
|
|
<v-text-field
|
|
v-model="editTarget.pluralName"
|
|
:label="$t('general.plural-name')"
|
|
:hint="$t('data-pages.foods.example-food-plural')"
|
|
/>
|
|
<v-text-field
|
|
v-model="editTarget.description"
|
|
:label="$t('recipe.description')"
|
|
/>
|
|
<v-autocomplete
|
|
v-model="editTarget.labelId"
|
|
clearable
|
|
:items="allLabels"
|
|
item-value="id"
|
|
item-title="name"
|
|
:label="$t('data-pages.foods.food-label')"
|
|
/>
|
|
<v-checkbox
|
|
v-model="editTarget.onHand"
|
|
hide-details
|
|
:label="$t('tool.on-hand')"
|
|
/>
|
|
<p class="text-caption mt-1">
|
|
{{ $t("data-pages.foods.on-hand-checkbox-label") }}
|
|
</p>
|
|
</v-form>
|
|
</v-card-text>
|
|
<template #custom-card-action>
|
|
<BaseButton
|
|
edit
|
|
@click="aliasManagerEventHandler"
|
|
>
|
|
{{ $t('data-pages.manage-aliases') }}
|
|
</BaseButton>
|
|
</template>
|
|
</BaseDialog>
|
|
|
|
<!-- Delete Dialog -->
|
|
<BaseDialog
|
|
v-model="deleteDialog"
|
|
:title="$t('general.confirm')"
|
|
:icon="$globals.icons.alertCircle"
|
|
color="error"
|
|
can-confirm
|
|
@confirm="deleteFood"
|
|
>
|
|
<v-card-text>
|
|
{{ $t("general.confirm-delete-generic") }}
|
|
<p
|
|
v-if="deleteTarget"
|
|
class="mt-4 ml-4"
|
|
>
|
|
{{ deleteTarget.name }}
|
|
</p>
|
|
</v-card-text>
|
|
</BaseDialog>
|
|
|
|
<!-- Bulk Delete Dialog -->
|
|
<BaseDialog
|
|
v-model="bulkDeleteDialog"
|
|
width="650px"
|
|
:title="$t('general.confirm')"
|
|
:icon="$globals.icons.alertCircle"
|
|
color="error"
|
|
can-confirm
|
|
@confirm="deleteSelected"
|
|
>
|
|
<v-card-text>
|
|
<p class="h4">
|
|
{{ $t('general.confirm-delete-generic-items') }}
|
|
</p>
|
|
<v-card variant="outlined">
|
|
<v-virtual-scroll
|
|
height="400"
|
|
item-height="25"
|
|
:items="bulkDeleteTarget"
|
|
>
|
|
<template #default="{ item }">
|
|
<v-list-item class="pb-2">
|
|
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
|
</v-list-item>
|
|
</template>
|
|
</v-virtual-scroll>
|
|
</v-card>
|
|
</v-card-text>
|
|
</BaseDialog>
|
|
|
|
<!-- Bulk Assign Labels Dialog -->
|
|
<BaseDialog
|
|
v-model="bulkAssignLabelDialog"
|
|
:title="$t('data-pages.labels.assign-label')"
|
|
:icon="$globals.icons.tags"
|
|
can-confirm
|
|
@confirm="assignSelected"
|
|
>
|
|
<v-card-text>
|
|
<v-card class="mb-4">
|
|
<v-card-title>{{ $t("general.caution") }}</v-card-title>
|
|
<v-card-text>{{ $t("data-pages.foods.label-overwrite-warning") }}</v-card-text>
|
|
</v-card>
|
|
|
|
<v-autocomplete
|
|
v-model="bulkAssignLabelId"
|
|
clearable
|
|
:items="allLabels"
|
|
item-value="id"
|
|
item-title="name"
|
|
:label="$t('data-pages.foods.food-label')"
|
|
/>
|
|
<v-card variant="outlined">
|
|
<v-virtual-scroll
|
|
height="400"
|
|
item-height="25"
|
|
:items="bulkAssignTarget"
|
|
>
|
|
<template #default="{ item }">
|
|
<v-list-item class="pb-2">
|
|
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
|
</v-list-item>
|
|
</template>
|
|
</v-virtual-scroll>
|
|
</v-card>
|
|
</v-card-text>
|
|
</BaseDialog>
|
|
|
|
<!-- Data Table -->
|
|
<BaseCardSectionTitle
|
|
:icon="$globals.icons.foods"
|
|
section
|
|
:title="$t('data-pages.foods.food-data')"
|
|
/>
|
|
<CrudTable
|
|
v-model:headers="tableHeaders"
|
|
:table-config="tableConfig"
|
|
:data="foods || []"
|
|
:bulk-actions="[
|
|
{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' },
|
|
{ icon: $globals.icons.tags, text: $t('data-pages.labels.assign-label'), event: 'assign-selected' },
|
|
]"
|
|
initial-sort="createdAt"
|
|
initial-sort-desc
|
|
@delete-one="deleteEventHandler"
|
|
@edit-one="editEventHandler"
|
|
@create-one="createEventHandler"
|
|
@delete-selected="bulkDeleteEventHandler"
|
|
@assign-selected="bulkAssignEventHandler"
|
|
>
|
|
<template #button-row>
|
|
<BaseButton
|
|
create
|
|
@click="createDialog = true"
|
|
/>
|
|
<BaseButton @click="mergeDialog = true">
|
|
<template #icon>
|
|
{{ $globals.icons.externalLink }}
|
|
</template>
|
|
{{ $t('data-pages.combine') }}
|
|
</BaseButton>
|
|
</template>
|
|
<template #[`item.label`]="{ item }">
|
|
<MultiPurposeLabel
|
|
v-if="item.label"
|
|
:label="item.label"
|
|
>
|
|
{{ item.label.name }}
|
|
</MultiPurposeLabel>
|
|
</template>
|
|
<template #[`item.onHand`]="{ item }">
|
|
<v-icon :color="item.onHand ? 'success' : undefined">
|
|
{{ item.onHand ? $globals.icons.check : $globals.icons.close }}
|
|
</v-icon>
|
|
</template>
|
|
<template #[`item.createdAt`]="{ item }">
|
|
{{ formatDate(item.createdAt) }}
|
|
</template>
|
|
<template #button-bottom>
|
|
<BaseButton @click="seedDialog = true">
|
|
<template #icon>
|
|
{{ $globals.icons.database }}
|
|
</template>
|
|
{{ $t('data-pages.seed') }}
|
|
</BaseButton>
|
|
</template>
|
|
</CrudTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import type { LocaleObject } from "@nuxtjs/i18n";
|
|
import RecipeDataAliasManagerDialog from "~/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue";
|
|
import { validators } from "~/composables/use-validators";
|
|
import { useUserApi } from "~/composables/api";
|
|
import type { CreateIngredientFood, IngredientFood, IngredientFoodAlias } from "~/lib/api/types/recipe";
|
|
import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
|
|
import { useLocales } from "~/composables/use-locales";
|
|
import { useFoodStore, useLabelStore } from "~/composables/store";
|
|
import type { MultiPurposeLabelOut } from "~/lib/api/types/labels";
|
|
import type { VForm } from "~/types/auto-forms";
|
|
|
|
interface CreateIngredientFoodWithOnHand extends CreateIngredientFood {
|
|
onHand: boolean;
|
|
householdsWithIngredientFood: string[];
|
|
}
|
|
|
|
interface IngredientFoodWithOnHand extends IngredientFood {
|
|
onHand: boolean;
|
|
}
|
|
|
|
export default defineNuxtComponent({
|
|
components: { MultiPurposeLabel, RecipeDataAliasManagerDialog },
|
|
setup() {
|
|
const userApi = useUserApi();
|
|
const i18n = useI18n();
|
|
const $auth = useMealieAuth();
|
|
const tableConfig = {
|
|
hideColumns: true,
|
|
canExport: true,
|
|
};
|
|
const tableHeaders = [
|
|
{
|
|
text: i18n.t("general.id"),
|
|
value: "id",
|
|
show: false,
|
|
},
|
|
{
|
|
text: i18n.t("general.name"),
|
|
value: "name",
|
|
show: true,
|
|
sortable: true,
|
|
},
|
|
{
|
|
text: i18n.t("general.plural-name"),
|
|
value: "pluralName",
|
|
show: true,
|
|
sortable: true,
|
|
},
|
|
{
|
|
text: i18n.t("recipe.description"),
|
|
value: "description",
|
|
show: true,
|
|
},
|
|
{
|
|
text: i18n.t("shopping-list.label"),
|
|
value: "label",
|
|
show: true,
|
|
sortable: true,
|
|
sort: (label1: MultiPurposeLabelOut | null, label2: MultiPurposeLabelOut | null) => {
|
|
const label1Name = label1?.name || "";
|
|
const label2Name = label2?.name || "";
|
|
return label1Name.localeCompare(label2Name);
|
|
},
|
|
},
|
|
{
|
|
text: i18n.t("tool.on-hand"),
|
|
value: "onHand",
|
|
show: true,
|
|
sortable: true,
|
|
},
|
|
{
|
|
text: i18n.t("general.date-added"),
|
|
value: "createdAt",
|
|
show: false,
|
|
sortable: true,
|
|
},
|
|
];
|
|
|
|
function formatDate(date: string) {
|
|
try {
|
|
return i18n.d(Date.parse(date), "medium");
|
|
}
|
|
catch {
|
|
return "";
|
|
}
|
|
}
|
|
|
|
const userHousehold = computed(() => $auth.user.value?.householdSlug || "");
|
|
const foodStore = useFoodStore();
|
|
const foods = computed(() => foodStore.store.value.map((food) => {
|
|
const onHand = food.householdsWithIngredientFood?.includes(userHousehold.value) || false;
|
|
return { ...food, onHand } as IngredientFoodWithOnHand;
|
|
}));
|
|
|
|
// ===============================================================
|
|
// Food Creator
|
|
|
|
const domNewFoodForm = ref<VForm>();
|
|
const createDialog = ref(false);
|
|
const createTarget = ref<CreateIngredientFoodWithOnHand>({
|
|
name: "",
|
|
onHand: false,
|
|
householdsWithIngredientFood: [],
|
|
});
|
|
|
|
function createEventHandler() {
|
|
createDialog.value = true;
|
|
}
|
|
|
|
async function createFood() {
|
|
if (!createTarget.value || !createTarget.value.name) {
|
|
return;
|
|
}
|
|
|
|
if (createTarget.value.onHand) {
|
|
createTarget.value.householdsWithIngredientFood = [userHousehold.value];
|
|
}
|
|
|
|
// @ts-expect-error the createOne function erroneously expects an id because it uses the IngredientFood type
|
|
await foodStore.actions.createOne(createTarget.value);
|
|
createDialog.value = false;
|
|
|
|
domNewFoodForm.value?.reset();
|
|
createTarget.value = {
|
|
name: "",
|
|
onHand: false,
|
|
householdsWithIngredientFood: [],
|
|
};
|
|
}
|
|
|
|
// ===============================================================
|
|
// Food Editor
|
|
|
|
const editDialog = ref(false);
|
|
const editTarget = ref<IngredientFoodWithOnHand | null>(null);
|
|
|
|
function editEventHandler(item: IngredientFoodWithOnHand) {
|
|
editTarget.value = item;
|
|
editTarget.value.onHand = item.householdsWithIngredientFood?.includes(userHousehold.value) || false;
|
|
editDialog.value = true;
|
|
}
|
|
|
|
async function editSaveFood() {
|
|
if (!editTarget.value) {
|
|
return;
|
|
}
|
|
if (editTarget.value.onHand && !editTarget.value.householdsWithIngredientFood?.includes(userHousehold.value)) {
|
|
if (!editTarget.value.householdsWithIngredientFood) {
|
|
editTarget.value.householdsWithIngredientFood = [userHousehold.value];
|
|
}
|
|
else {
|
|
editTarget.value.householdsWithIngredientFood.push(userHousehold.value);
|
|
}
|
|
}
|
|
else if (!editTarget.value.onHand && editTarget.value.householdsWithIngredientFood?.includes(userHousehold.value)) {
|
|
editTarget.value.householdsWithIngredientFood = editTarget.value.householdsWithIngredientFood.filter(
|
|
household => household !== userHousehold.value,
|
|
);
|
|
}
|
|
|
|
await foodStore.actions.updateOne(editTarget.value);
|
|
editDialog.value = false;
|
|
}
|
|
|
|
// ===============================================================
|
|
// Food Delete
|
|
|
|
const deleteDialog = ref(false);
|
|
const deleteTarget = ref<IngredientFoodWithOnHand | null>(null);
|
|
function deleteEventHandler(item: IngredientFoodWithOnHand) {
|
|
deleteTarget.value = item;
|
|
deleteDialog.value = true;
|
|
}
|
|
async function deleteFood() {
|
|
if (!deleteTarget.value) {
|
|
return;
|
|
}
|
|
|
|
await foodStore.actions.deleteOne(deleteTarget.value.id);
|
|
deleteDialog.value = false;
|
|
}
|
|
|
|
const bulkDeleteDialog = ref(false);
|
|
const bulkDeleteTarget = ref<IngredientFoodWithOnHand[]>([]);
|
|
|
|
function bulkDeleteEventHandler(selection: IngredientFoodWithOnHand[]) {
|
|
bulkDeleteTarget.value = selection;
|
|
bulkDeleteDialog.value = true;
|
|
}
|
|
|
|
async function deleteSelected() {
|
|
for (const item of bulkDeleteTarget.value) {
|
|
await foodStore.actions.deleteOne(item.id);
|
|
}
|
|
bulkDeleteTarget.value = [];
|
|
}
|
|
|
|
// ============================================================
|
|
// Alias Manager
|
|
|
|
const aliasManagerDialog = ref(false);
|
|
function aliasManagerEventHandler() {
|
|
aliasManagerDialog.value = true;
|
|
}
|
|
|
|
function updateFoodAlias(newAliases: IngredientFoodAlias[]) {
|
|
if (!editTarget.value) {
|
|
return;
|
|
}
|
|
editTarget.value.aliases = newAliases;
|
|
aliasManagerDialog.value = false;
|
|
}
|
|
|
|
// ============================================================
|
|
// Merge Foods
|
|
|
|
const mergeDialog = ref(false);
|
|
const fromFood = ref<IngredientFoodWithOnHand | null>(null);
|
|
const toFood = ref<IngredientFoodWithOnHand | null>(null);
|
|
|
|
const canMerge = computed(() => {
|
|
return fromFood.value && toFood.value && fromFood.value.id !== toFood.value.id;
|
|
});
|
|
|
|
async function mergeFoods() {
|
|
if (!canMerge.value || !fromFood.value || !toFood.value) {
|
|
return;
|
|
}
|
|
|
|
const { data } = await userApi.foods.merge(fromFood.value.id, toFood.value.id);
|
|
|
|
if (data) {
|
|
foodStore.actions.refresh();
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// Labels
|
|
|
|
const { store: allLabels } = useLabelStore();
|
|
|
|
// ============================================================
|
|
// Seed
|
|
|
|
const seedDialog = ref(false);
|
|
const locale = ref("");
|
|
|
|
const { locales: LOCALES, locale: currentLocale } = useLocales();
|
|
|
|
onMounted(() => {
|
|
locale.value = currentLocale.value;
|
|
});
|
|
|
|
const locales = LOCALES.filter(locale =>
|
|
(i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value as any),
|
|
);
|
|
|
|
async function seedDatabase() {
|
|
const { data } = await userApi.seeders.foods({ locale: locale.value });
|
|
|
|
if (data) {
|
|
foodStore.actions.refresh();
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// Bulk Assign Labels
|
|
const bulkAssignLabelDialog = ref(false);
|
|
const bulkAssignTarget = ref<IngredientFoodWithOnHand[]>([]);
|
|
const bulkAssignLabelId = ref<string | undefined>();
|
|
|
|
function bulkAssignEventHandler(selection: IngredientFoodWithOnHand[]) {
|
|
bulkAssignTarget.value = selection;
|
|
bulkAssignLabelDialog.value = true;
|
|
}
|
|
|
|
async function assignSelected() {
|
|
if (!bulkAssignLabelId.value) {
|
|
return;
|
|
}
|
|
for (const item of bulkAssignTarget.value) {
|
|
item.labelId = bulkAssignLabelId.value;
|
|
await foodStore.actions.updateOne(item);
|
|
}
|
|
bulkAssignTarget.value = [];
|
|
bulkAssignLabelId.value = undefined;
|
|
foodStore.actions.refresh();
|
|
}
|
|
|
|
return {
|
|
tableConfig,
|
|
tableHeaders,
|
|
foods,
|
|
allLabels,
|
|
validators,
|
|
formatDate,
|
|
// Create
|
|
createDialog,
|
|
domNewFoodForm,
|
|
createEventHandler,
|
|
createFood,
|
|
createTarget,
|
|
// Edit
|
|
editDialog,
|
|
editEventHandler,
|
|
editSaveFood,
|
|
editTarget,
|
|
// Delete
|
|
deleteEventHandler,
|
|
deleteDialog,
|
|
deleteFood,
|
|
deleteTarget,
|
|
bulkDeleteDialog,
|
|
bulkDeleteTarget,
|
|
bulkDeleteEventHandler,
|
|
deleteSelected,
|
|
// Alias Manager
|
|
aliasManagerDialog,
|
|
aliasManagerEventHandler,
|
|
updateFoodAlias,
|
|
// Merge
|
|
canMerge,
|
|
mergeFoods,
|
|
mergeDialog,
|
|
fromFood,
|
|
toFood,
|
|
// Seed Data
|
|
locale,
|
|
locales,
|
|
seedDialog,
|
|
seedDatabase,
|
|
// Bulk Assign Labels
|
|
bulkAssignLabelDialog,
|
|
bulkAssignTarget,
|
|
bulkAssignLabelId,
|
|
bulkAssignEventHandler,
|
|
assignSelected,
|
|
};
|
|
},
|
|
});
|
|
</script>
|