mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-14 00:45:35 -04:00
chore: Nuxt 4 upgrade (#7426)
This commit is contained in:
Kuchenpirat
GitHub
247
frontend/app/pages/household/mealplan/settings.vue
Normal file
247
frontend/app/pages/household/mealplan/settings.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<v-container class="lg-container">
|
||||
<BasePageTitle divider>
|
||||
<template #header>
|
||||
<v-img
|
||||
width="100%"
|
||||
max-height="100"
|
||||
max-width="100"
|
||||
src="/svgs/manage-cookbooks.svg"
|
||||
/>
|
||||
</template>
|
||||
<template #title>
|
||||
{{ $t('meal-plan.meal-plan-rules') }}
|
||||
</template>
|
||||
{{ $t('meal-plan.meal-plan-rules-description') }}
|
||||
</BasePageTitle>
|
||||
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
{{ $t('meal-plan.new-rule') }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2" />
|
||||
<v-card-text>
|
||||
{{ $t('meal-plan.new-rule-description') }}
|
||||
|
||||
<GroupMealPlanRuleForm
|
||||
:key="createDataFormKey"
|
||||
v-model:day="createData.day"
|
||||
v-model:entry-type="createData.entryType"
|
||||
v-model:query-filter-string="createData.queryFilterString"
|
||||
class="mt-2"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-end">
|
||||
<BaseButton
|
||||
create
|
||||
:disabled="!createData.queryFilterString"
|
||||
@click="createRule"
|
||||
/>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
<section>
|
||||
<BaseCardSectionTitle
|
||||
class="mt-10"
|
||||
:title="$t('meal-plan.recipe-rules')"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
v-for="(rule, idx) in allRules"
|
||||
:key="rule.id"
|
||||
>
|
||||
<v-card class="my-2 left-border">
|
||||
<v-card-title class="headline pb-1">
|
||||
{{ rule.day === "unset" ? $t('meal-plan.applies-to-all-days') : $t('meal-plan.applies-on-days', [rule.day]) }}
|
||||
{{ rule.entryType === "unset" ? $t('meal-plan.for-all-meal-types') : $t('meal-plan.for-type-meal-types', [rule.entryType]) }}
|
||||
<span class="ml-auto">
|
||||
<BaseButtonGroup
|
||||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.edit,
|
||||
text: $t('general.edit'),
|
||||
event: 'edit',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: $t('general.delete'),
|
||||
event: 'delete',
|
||||
},
|
||||
]"
|
||||
@delete="deleteRule(rule.id)"
|
||||
@edit="toggleEditState(rule.id)"
|
||||
/>
|
||||
</span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<template v-if="!editState[rule.id]">
|
||||
<div v-if="rule.categories">
|
||||
<h4 class="py-1">
|
||||
{{ $t("category.categories") }}:
|
||||
</h4>
|
||||
<RecipeChips
|
||||
v-if="rule.categories.length"
|
||||
:items="rule.categories"
|
||||
small
|
||||
class="pb-3"
|
||||
/>
|
||||
<v-card-text
|
||||
v-else
|
||||
label
|
||||
class="ma-0 px-0 pt-0 pb-3"
|
||||
text-color="accent"
|
||||
size="small"
|
||||
dark
|
||||
>
|
||||
{{ $t("meal-plan.any-category") }}
|
||||
</v-card-text>
|
||||
</div>
|
||||
|
||||
<div v-if="rule.tags">
|
||||
<h4 class="py-1">
|
||||
{{ $t("tag.tags") }}:
|
||||
</h4>
|
||||
<RecipeChips
|
||||
v-if="rule.tags.length"
|
||||
:items="rule.tags"
|
||||
url-prefix="tags"
|
||||
small
|
||||
class="pb-3"
|
||||
/>
|
||||
<v-card-text
|
||||
v-else
|
||||
label
|
||||
class="ma-0 px-0 pt-0 pb-3"
|
||||
text-color="accent"
|
||||
size="small"
|
||||
dark
|
||||
>
|
||||
{{ $t("meal-plan.any-tag") }}
|
||||
</v-card-text>
|
||||
</div>
|
||||
<div v-if="rule.households">
|
||||
<h4 class="py-1">
|
||||
{{ $t("household.households") }}:
|
||||
</h4>
|
||||
<div v-if="rule.households.length">
|
||||
<v-chip
|
||||
v-for="household in rule.households"
|
||||
:key="household.id"
|
||||
label
|
||||
class="ma-1"
|
||||
color="accent"
|
||||
size="small"
|
||||
dark
|
||||
>
|
||||
{{ household.name }}
|
||||
</v-chip>
|
||||
</div>
|
||||
<v-card-text
|
||||
v-else
|
||||
label
|
||||
class="ma-0 px-0 pt-0 pb-3"
|
||||
text-color="accent"
|
||||
size="small"
|
||||
dark
|
||||
>
|
||||
{{ $t("meal-plan.any-household") }}
|
||||
</v-card-text>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<GroupMealPlanRuleForm
|
||||
v-model:day="allRules[idx].day"
|
||||
v-model:entry-type="allRules[idx].entryType"
|
||||
v-model:query-filter-string="allRules[idx].queryFilterString"
|
||||
:query-filter="allRules[idx].queryFilter"
|
||||
/>
|
||||
<div class="d-flex justify-end">
|
||||
<BaseButton
|
||||
update
|
||||
:disabled="!allRules[idx].queryFilterString"
|
||||
@click="updateRule(rule)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import type { PlanRulesCreate, PlanRulesOut } from "~/lib/api/types/meal-plan";
|
||||
import GroupMealPlanRuleForm from "~/components/Domain/Household/GroupMealPlanRuleForm.vue";
|
||||
import { useAsyncKey } from "~/composables/use-utils";
|
||||
import RecipeChips from "~/components/Domain/Recipe/RecipeChips.vue";
|
||||
|
||||
const api = useUserApi();
|
||||
const i18n = useI18n();
|
||||
|
||||
useSeoMeta({
|
||||
title: i18n.t("meal-plan.meal-plan-settings"),
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
// Manage All
|
||||
const editState = ref<{ [key: string]: boolean }>({});
|
||||
const allRules = ref<PlanRulesOut[]>([]);
|
||||
|
||||
function toggleEditState(id: string) {
|
||||
editState.value[id] = !editState.value[id];
|
||||
editState.value = { ...editState.value };
|
||||
}
|
||||
|
||||
async function refreshAll() {
|
||||
const { data } = await api.mealplanRules.getAll();
|
||||
|
||||
if (data) {
|
||||
allRules.value = data.items ?? [];
|
||||
}
|
||||
}
|
||||
|
||||
useAsyncData(useAsyncKey(), async () => {
|
||||
await refreshAll();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
// Creating Rules
|
||||
|
||||
const createDataFormKey = ref(0);
|
||||
const createData = ref<PlanRulesCreate>({
|
||||
entryType: "unset",
|
||||
day: "unset",
|
||||
queryFilterString: "",
|
||||
});
|
||||
|
||||
async function createRule() {
|
||||
const { data } = await api.mealplanRules.createOne(createData.value);
|
||||
if (data) {
|
||||
refreshAll();
|
||||
createData.value = {
|
||||
entryType: "unset",
|
||||
day: "unset",
|
||||
queryFilterString: "",
|
||||
};
|
||||
createDataFormKey.value++;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRule(ruleId: string) {
|
||||
const { data } = await api.mealplanRules.deleteOne(ruleId);
|
||||
if (data) {
|
||||
refreshAll();
|
||||
}
|
||||
}
|
||||
|
||||
async function updateRule(rule: PlanRulesOut) {
|
||||
const { data } = await api.mealplanRules.updateOne(rule.id, rule);
|
||||
if (data) {
|
||||
refreshAll();
|
||||
toggleEditState(rule.id);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user