mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-07 06:25:21 +02:00
feat: Migrate to Nuxt 3 framework (#5184)
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com> Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Hoa (Kyle) Trinh
GitHub
parent
89ab7fac25
commit
c24d532608
403 changed files with 23959 additions and 19557 deletions
|
|
@ -1,153 +1,163 @@
|
|||
<template>
|
||||
<v-container v-if="household" class="narrow-container">
|
||||
<v-container v-if="household"
|
||||
class="narrow-container"
|
||||
>
|
||||
<BasePageTitle class="mb-5">
|
||||
<template #header>
|
||||
<v-img max-height="100" max-width="100" :src="require('~/static/svgs/manage-group-settings.svg')"></v-img>
|
||||
<v-img
|
||||
width="100%"
|
||||
max-height="100"
|
||||
max-width="100"
|
||||
:src="require('~/static/svgs/manage-group-settings.svg')"
|
||||
/>
|
||||
</template>
|
||||
<template #title>
|
||||
{{ $t("profile.household-settings") }}
|
||||
</template>
|
||||
<template #title> {{ $t("profile.household-settings") }} </template>
|
||||
{{ $t("profile.household-description") }}
|
||||
</BasePageTitle>
|
||||
<v-form ref="refHouseholdEditForm" @submit.prevent="handleSubmit">
|
||||
<v-card outlined>
|
||||
<v-card variant="outlined" style="border-color: lightgray;">
|
||||
<v-card-text>
|
||||
<HouseholdPreferencesEditor v-if="household.preferences" v-model="household.preferences" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<div class="d-flex pa-2">
|
||||
<BaseButton type="submit" edit class="ml-auto"> {{ $t("general.update") }}</BaseButton>
|
||||
<BaseButton type="submit" edit class="ml-auto">
|
||||
{{ $t("general.update") }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
|
||||
import HouseholdPreferencesEditor from "~/components/Domain/Household/HouseholdPreferencesEditor.vue";
|
||||
import { VForm } from "~/types/vuetify";
|
||||
import { useHouseholdSelf } from "~/composables/use-households";
|
||||
import { ReadHouseholdPreferences } from "~/lib/api/types/household";
|
||||
import type { ReadHouseholdPreferences } from "~/lib/api/types/household";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import type { VForm } from "~/types/auto-forms";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
HouseholdPreferencesEditor,
|
||||
},
|
||||
middleware: ["auth", "can-manage-household-only"],
|
||||
middleware: ["sidebase-auth", "can-manage-household-only"],
|
||||
setup() {
|
||||
const { household, actions: householdActions } = useHouseholdSelf();
|
||||
const { i18n } = useContext();
|
||||
const i18n = useI18n();
|
||||
|
||||
useSeoMeta({
|
||||
title: i18n.t("household.household"),
|
||||
});
|
||||
|
||||
const refHouseholdEditForm = ref<VForm | null>(null);
|
||||
|
||||
type Preference = {
|
||||
key: keyof ReadHouseholdPreferences;
|
||||
value: boolean;
|
||||
label: string;
|
||||
description: string;
|
||||
};
|
||||
type Preference = {
|
||||
key: keyof ReadHouseholdPreferences;
|
||||
value: boolean;
|
||||
label: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
const preferencesEditor = computed<Preference[]>(() => {
|
||||
if (!household.value || !household.value.preferences) {
|
||||
return [];
|
||||
}
|
||||
return [
|
||||
{
|
||||
key: "recipePublic",
|
||||
value: household.value.preferences.recipePublic || false,
|
||||
label: i18n.t("household.allow-users-outside-of-your-household-to-see-your-recipes"),
|
||||
description: i18n.t("household.allow-users-outside-of-your-household-to-see-your-recipes-description"),
|
||||
} as Preference,
|
||||
{
|
||||
key: "recipeShowNutrition",
|
||||
value: household.value.preferences.recipeShowNutrition || false,
|
||||
label: i18n.t("group.show-nutrition-information"),
|
||||
description: i18n.t("group.show-nutrition-information-description"),
|
||||
} as Preference,
|
||||
{
|
||||
key: "recipeShowAssets",
|
||||
value: household.value.preferences.recipeShowAssets || false,
|
||||
label: i18n.t("group.show-recipe-assets"),
|
||||
description: i18n.t("group.show-recipe-assets-description"),
|
||||
} as Preference,
|
||||
{
|
||||
key: "recipeLandscapeView",
|
||||
value: household.value.preferences.recipeLandscapeView || false,
|
||||
label: i18n.t("group.default-to-landscape-view"),
|
||||
description: i18n.t("group.default-to-landscape-view-description"),
|
||||
} as Preference,
|
||||
{
|
||||
key: "recipeDisableComments",
|
||||
value: household.value.preferences.recipeDisableComments || false,
|
||||
label: i18n.t("group.disable-users-from-commenting-on-recipes"),
|
||||
description: i18n.t("group.disable-users-from-commenting-on-recipes-description"),
|
||||
} as Preference,
|
||||
{
|
||||
key: "recipeDisableAmount",
|
||||
value: household.value.preferences.recipeDisableAmount || false,
|
||||
label: i18n.t("group.disable-organizing-recipe-ingredients-by-units-and-food"),
|
||||
description: i18n.t("group.disable-organizing-recipe-ingredients-by-units-and-food-description"),
|
||||
} as Preference,
|
||||
];
|
||||
});
|
||||
const preferencesEditor = computed<Preference[]>(() => {
|
||||
if (!household.value || !household.value.preferences) {
|
||||
return [];
|
||||
}
|
||||
return [
|
||||
{
|
||||
key: "recipePublic",
|
||||
value: household.value.preferences.recipePublic || false,
|
||||
label: i18n.t("household.allow-users-outside-of-your-household-to-see-your-recipes"),
|
||||
description: i18n.t("household.allow-users-outside-of-your-household-to-see-your-recipes-description"),
|
||||
} as Preference,
|
||||
{
|
||||
key: "recipeShowNutrition",
|
||||
value: household.value.preferences.recipeShowNutrition || false,
|
||||
label: i18n.t("group.show-nutrition-information"),
|
||||
description: i18n.t("group.show-nutrition-information-description"),
|
||||
} as Preference,
|
||||
{
|
||||
key: "recipeShowAssets",
|
||||
value: household.value.preferences.recipeShowAssets || false,
|
||||
label: i18n.t("group.show-recipe-assets"),
|
||||
description: i18n.t("group.show-recipe-assets-description"),
|
||||
} as Preference,
|
||||
{
|
||||
key: "recipeLandscapeView",
|
||||
value: household.value.preferences.recipeLandscapeView || false,
|
||||
label: i18n.t("group.default-to-landscape-view"),
|
||||
description: i18n.t("group.default-to-landscape-view-description"),
|
||||
} as Preference,
|
||||
{
|
||||
key: "recipeDisableComments",
|
||||
value: household.value.preferences.recipeDisableComments || false,
|
||||
label: i18n.t("group.disable-users-from-commenting-on-recipes"),
|
||||
description: i18n.t("group.disable-users-from-commenting-on-recipes-description"),
|
||||
} as Preference,
|
||||
{
|
||||
key: "recipeDisableAmount",
|
||||
value: household.value.preferences.recipeDisableAmount || false,
|
||||
label: i18n.t("group.disable-organizing-recipe-ingredients-by-units-and-food"),
|
||||
description: i18n.t("group.disable-organizing-recipe-ingredients-by-units-and-food-description"),
|
||||
} as Preference,
|
||||
];
|
||||
});
|
||||
|
||||
const allDays = [
|
||||
{
|
||||
name: i18n.t("general.sunday"),
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.monday"),
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.tuesday"),
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.wednesday"),
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.thursday"),
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.friday"),
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.saturday"),
|
||||
value: 6,
|
||||
},
|
||||
];
|
||||
const allDays = [
|
||||
{
|
||||
name: i18n.t("general.sunday"),
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.monday"),
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.tuesday"),
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.wednesday"),
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.thursday"),
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.friday"),
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.saturday"),
|
||||
value: 6,
|
||||
},
|
||||
];
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!refHouseholdEditForm.value?.validate() || !household.value?.preferences) {
|
||||
console.log(refHouseholdEditForm.value?.validate());
|
||||
return;
|
||||
}
|
||||
async function handleSubmit() {
|
||||
if (!refHouseholdEditForm.value?.validate() || !household.value?.preferences) {
|
||||
console.log(refHouseholdEditForm.value?.validate());
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await householdActions.updatePreferences();
|
||||
if (data) {
|
||||
alert.success(i18n.tc("settings.settings-updated"));
|
||||
} else {
|
||||
alert.error(i18n.tc("settings.settings-update-failed"));
|
||||
}
|
||||
}
|
||||
const data = await householdActions.updatePreferences();
|
||||
if (data) {
|
||||
alert.success(i18n.t("settings.settings-updated"));
|
||||
}
|
||||
else {
|
||||
alert.error(i18n.t("settings.settings-update-failed"));
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
household,
|
||||
householdActions,
|
||||
allDays,
|
||||
preferencesEditor,
|
||||
refHouseholdEditForm,
|
||||
handleSubmit,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("household.household") as string,
|
||||
};
|
||||
return {
|
||||
household,
|
||||
householdActions,
|
||||
allDays,
|
||||
preferencesEditor,
|
||||
refHouseholdEditForm,
|
||||
handleSubmit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,13 @@
|
|||
max-width="290px"
|
||||
min-width="auto"
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn color="primary" class="mb-2" v-bind="attrs" v-on="on">
|
||||
<v-icon left>
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
class="mb-2"
|
||||
v-bind="props"
|
||||
>
|
||||
<v-icon start>
|
||||
{{ $globals.icons.calendar }}
|
||||
</v-icon>
|
||||
{{ $d(weekRange.start, "short") }} - {{ $d(weekRange.end, "short") }}
|
||||
|
|
@ -18,8 +22,8 @@
|
|||
</template>
|
||||
<v-date-picker
|
||||
v-model="state.range"
|
||||
no-title
|
||||
range
|
||||
hide-header
|
||||
:multiple="'range'"
|
||||
:first-day-of-week="firstDayOfWeek"
|
||||
:local="$i18n.locale"
|
||||
>
|
||||
|
|
@ -30,8 +34,12 @@
|
|||
:hint="$t('meal-plan.numberOfDays-hint')"
|
||||
persistent-hint
|
||||
/>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text color="primary" @click="state.picker = false">
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
variant="text"
|
||||
color="primary"
|
||||
@click="state.picker = false"
|
||||
>
|
||||
{{ $t("general.ok") }}
|
||||
</v-btn>
|
||||
</v-date-picker>
|
||||
|
|
@ -39,34 +47,49 @@
|
|||
|
||||
<div class="d-flex flex-wrap align-center justify-space-between mb-2">
|
||||
<v-tabs style="width: fit-content;">
|
||||
<v-tab :to="`/household/mealplan/planner/view`">{{ $t('meal-plan.meal-planner') }}</v-tab>
|
||||
<v-tab :to="`/household/mealplan/planner/edit`">{{ $t('general.edit') }}</v-tab>
|
||||
<v-tab :to="`/household/mealplan/planner/view`">
|
||||
{{ $t('meal-plan.meal-planner') }}
|
||||
</v-tab>
|
||||
<v-tab :to="`/household/mealplan/planner/edit`">
|
||||
{{ $t('general.edit') }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<ButtonLink :icon="$globals.icons.calendar" :to="`/household/mealplan/settings`" :text="$tc('general.settings')" />
|
||||
<ButtonLink
|
||||
:icon="$globals.icons.calendar"
|
||||
:to="`/household/mealplan/settings`"
|
||||
:text="$t('general.settings')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<NuxtChild :mealplans="mealsByDate" :actions="actions" />
|
||||
<NuxtPage
|
||||
:mealplans="mealsByDate"
|
||||
:actions="actions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-row> </v-row>
|
||||
<v-row />
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref, useRoute, useRouter, watch } from "@nuxtjs/composition-api";
|
||||
import { isSameDay, addDays, parseISO } from "date-fns";
|
||||
import { useHouseholdSelf } from "~/composables/use-households";
|
||||
import { useMealplans } from "~/composables/use-group-mealplan";
|
||||
import { useUserMealPlanPreferences } from "~/composables/use-users/preferences";
|
||||
|
||||
export default defineComponent({
|
||||
middleware: ["auth"],
|
||||
export default defineNuxtComponent({
|
||||
middleware: ["sidebase-auth"],
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const i18n = useI18n();
|
||||
const { household } = useHouseholdSelf();
|
||||
|
||||
useSeoMeta({
|
||||
title: i18n.t("meal-plan.dinner-this-week"),
|
||||
});
|
||||
|
||||
const mealPlanPreferences = useUserMealPlanPreferences();
|
||||
const numberOfDays = ref<number>(mealPlanPreferences.value.numberOfDays || 7);
|
||||
watch(numberOfDays, (val) => {
|
||||
|
|
@ -74,21 +97,12 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
// Force to /view if current route is /planner
|
||||
if (route.value.path === "/household/mealplan/planner") {
|
||||
if (route.path === "/household/mealplan/planner") {
|
||||
router.push("/household/mealplan/planner/view");
|
||||
}
|
||||
|
||||
function fmtYYYYMMDD(date: Date) {
|
||||
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
|
||||
}
|
||||
|
||||
function parseYYYYMMDD(date: string) {
|
||||
const [year, month, day] = date.split("-");
|
||||
return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
|
||||
}
|
||||
|
||||
const state = ref({
|
||||
range: [fmtYYYYMMDD(new Date()), fmtYYYYMMDD(addDays(new Date(), adjustForToday(numberOfDays.value)))] as [string, string],
|
||||
range: [new Date(), addDays(new Date(), adjustForToday(numberOfDays.value))] as [Date, Date],
|
||||
start: new Date(),
|
||||
picker: false,
|
||||
end: addDays(new Date(), adjustForToday(numberOfDays.value)),
|
||||
|
|
@ -99,15 +113,17 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
const weekRange = computed(() => {
|
||||
const sorted = state.value.range.sort((a, b) => {
|
||||
return parseYYYYMMDD(a).getTime() - parseYYYYMMDD(b).getTime();
|
||||
});
|
||||
const sorted = [...state.value.range].sort((a, b) => a.getTime() - b.getTime());
|
||||
|
||||
if (sorted.length === 2) {
|
||||
return {
|
||||
start: parseYYYYMMDD(sorted[0]),
|
||||
end: parseYYYYMMDD(sorted[1]),
|
||||
start: sorted[0],
|
||||
end: sorted[1],
|
||||
};
|
||||
// return {
|
||||
// start: parseYYYYMMDD(sorted[0]),
|
||||
// end: parseYYYYMMDD(sorted[1]),
|
||||
// };
|
||||
}
|
||||
return {
|
||||
start: new Date(),
|
||||
|
|
@ -128,12 +144,12 @@ export default defineComponent({
|
|||
function adjustForToday(days: number) {
|
||||
// The use case for this function is "how many days are we adding to 'today'?"
|
||||
// e.g. If the user wants 7 days, we substract one to do "today + 6"
|
||||
return days > 0 ? days - 1 : days + 1
|
||||
return days > 0 ? days - 1 : days + 1;
|
||||
}
|
||||
|
||||
const days = computed(() => {
|
||||
const numDays =
|
||||
Math.floor((weekRange.value.end.getTime() - weekRange.value.start.getTime()) / (1000 * 60 * 60 * 24)) + 1;
|
||||
const numDays
|
||||
= Math.floor((weekRange.value.end.getTime() - weekRange.value.start.getTime()) / (1000 * 60 * 60 * 24)) + 1;
|
||||
|
||||
// Calculate absolute value
|
||||
if (numDays < 0) return [];
|
||||
|
|
@ -143,7 +159,7 @@ export default defineComponent({
|
|||
const date = new Date(weekRange.value.start.getTime());
|
||||
date.setDate(date.getDate() + i);
|
||||
return date;
|
||||
}
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -162,11 +178,6 @@ export default defineComponent({
|
|||
numberOfDays,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("meal-plan.dinner-this-week") as string,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,54 +3,51 @@
|
|||
<!-- Create Meal Dialog -->
|
||||
<BaseDialog
|
||||
v-model="state.dialog"
|
||||
:title="$tc(newMeal.existing
|
||||
? 'meal-plan.update-this-meal-plan'
|
||||
: 'meal-plan.create-a-new-meal-plan'
|
||||
)"
|
||||
:submit-text="$tc(newMeal.existing
|
||||
? 'general.update'
|
||||
: 'general.create'
|
||||
)"
|
||||
:title="newMeal.existing ? $t('meal-plan.update-this-meal-plan') : $t('meal-plan.create-a-new-meal-plan')"
|
||||
:submit-text="newMeal.existing ? $t('general.update') : $t('general.create')"
|
||||
color="primary"
|
||||
:icon="$globals.icons.foods"
|
||||
:submit-disabled="isCreateDisabled"
|
||||
can-submit
|
||||
@submit="
|
||||
if (newMeal.existing) {
|
||||
actions.updateOne(newMeal);
|
||||
} else {
|
||||
actions.createOne(newMeal);
|
||||
() => {
|
||||
if (newMeal.existing) {
|
||||
actions.updateOne({ ...newMeal, date: newMealDateString });
|
||||
}
|
||||
else {
|
||||
actions.createOne({ ...newMeal, date: newMealDateString });
|
||||
}
|
||||
resetDialog();
|
||||
}
|
||||
resetDialog();
|
||||
"
|
||||
@close="resetDialog()"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-menu
|
||||
v-model="state.pickerMenu"
|
||||
v-model="state.pickerMenu!"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
max-width="290px"
|
||||
min-width="auto"
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<template #activator="{ props }">
|
||||
<v-text-field
|
||||
v-model="newMeal.date"
|
||||
v-model="newMealDateString"
|
||||
:label="$t('general.date')"
|
||||
:hint="$t('recipe.date-format-hint-yyyy-mm-dd')"
|
||||
persistent-hint
|
||||
:prepend-icon="$globals.icons.calendar"
|
||||
v-bind="attrs"
|
||||
v-bind="props"
|
||||
readonly
|
||||
v-on="on"
|
||||
/>
|
||||
</template>
|
||||
<v-date-picker
|
||||
v-model="newMeal.date"
|
||||
no-title
|
||||
hide-header
|
||||
:first-day-of-week="firstDayOfWeek"
|
||||
:local="$i18n.locale"
|
||||
@input="state.pickerMenu = false"
|
||||
@update:model-value="state.pickerMenu = false"
|
||||
/>
|
||||
</v-menu>
|
||||
<v-card-text>
|
||||
|
|
@ -59,16 +56,18 @@
|
|||
:return-object="false"
|
||||
:items="planTypeOptions"
|
||||
:label="$t('recipe.entry-type')"
|
||||
item-title="text"
|
||||
item-value="value"
|
||||
/>
|
||||
<v-autocomplete
|
||||
v-if="!dialog.note"
|
||||
v-model="newMeal.recipeId"
|
||||
v-model:search="search.query.value"
|
||||
:label="$t('meal-plan.meal-recipe')"
|
||||
:items="search.data.value"
|
||||
:loading="search.loading.value"
|
||||
:search-input.sync="search.query.value"
|
||||
cache-items
|
||||
item-text="name"
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
:return-object="false"
|
||||
:rules="[requiredRule]"
|
||||
|
|
@ -99,12 +98,12 @@
|
|||
{{ $d(plan.date, "short") }}
|
||||
</p>
|
||||
</v-card>
|
||||
<draggable
|
||||
<VueDraggable
|
||||
v-model="mealplansByDate[plan.date.toString()]"
|
||||
tag="div"
|
||||
handle=".handle"
|
||||
delay="250"
|
||||
:delay="250"
|
||||
:delay-on-touch-only="true"
|
||||
:value="plan.meals"
|
||||
group="meals"
|
||||
:data-index="index"
|
||||
:data-box="plan.date"
|
||||
|
|
@ -112,50 +111,47 @@
|
|||
@end="onMoveCallback"
|
||||
>
|
||||
<v-card
|
||||
v-for="mealplan in plan.meals"
|
||||
v-for="mealplan in mealplansByDate[plan.date.toString()]"
|
||||
:key="mealplan.id"
|
||||
class="my-1"
|
||||
:class="{ handle: $vuetify.breakpoint.smAndUp }"
|
||||
:class="{ handle: $vuetify.display.smAndUp }"
|
||||
>
|
||||
<v-list-item
|
||||
@click="editMeal(mealplan)"
|
||||
>
|
||||
<v-list-item-avatar :rounded="false">
|
||||
<RecipeCardImage
|
||||
v-if="mealplan.recipe"
|
||||
:recipe-id="mealplan.recipe.id"
|
||||
tiny
|
||||
icon-size="25"
|
||||
:slug="mealplan.recipe ? mealplan.recipe.slug : ''"
|
||||
>
|
||||
</RecipeCardImage>
|
||||
<v-icon v-else>
|
||||
{{ $globals.icons.primary }}
|
||||
</v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="mb-1">
|
||||
{{ mealplan.recipe ? mealplan.recipe.name : mealplan.title }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle style="min-height: 16px">
|
||||
{{ mealplan.recipe ? mealplan.recipe.description + " " : mealplan.text }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item lines="three" @click="editMeal(mealplan)">
|
||||
<template #prepend>
|
||||
<v-avatar>
|
||||
<RecipeCardImage
|
||||
v-if="mealplan.recipe"
|
||||
:recipe-id="mealplan.recipe.id!"
|
||||
tiny
|
||||
icon-size="25"
|
||||
:slug="mealplan.recipe ? mealplan.recipe.slug : ''"
|
||||
/>
|
||||
<v-icon v-else>
|
||||
{{ $globals.icons.primary }}
|
||||
</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<v-list-item-title class="mb-1">
|
||||
{{ mealplan.recipe ? mealplan.recipe.name : mealplan.title }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle style="min-height: 16px">
|
||||
{{ mealplan.recipe ? mealplan.recipe.description + " " : mealplan.text }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-divider class="mx-2" />
|
||||
<div class="py-2 px-2 d-flex" style="align-items: center">
|
||||
<v-btn small icon :class="{ handle: !$vuetify.breakpoint.smAndUp }">
|
||||
<v-btn size="small" icon variant="text" :class="{ handle: !$vuetify.display.smAndUp }">
|
||||
<v-icon>
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
<v-menu offset-y>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-chip v-bind="attrs" label small color="accent" v-on="on" @click.prevent>
|
||||
<v-icon left>
|
||||
<template #activator="{ props }">
|
||||
<v-chip v-bind="props" label variant="elevated" size="small" color="accent" @click.prevent>
|
||||
<v-icon start>
|
||||
{{ $globals.icons.tags }}
|
||||
</v-icon>
|
||||
{{ getEntryTypeText(mealplan.entryType) }}
|
||||
{{ getEntryTypeText(mealplan.entryType!) }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<v-list>
|
||||
|
|
@ -168,54 +164,54 @@
|
|||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-btn class="ml-auto" small icon @click="actions.deleteOne(mealplan.id)">
|
||||
<v-btn class="ml-auto" size="small" variant="text" icon @click="actions.deleteOne(mealplan.id)">
|
||||
<v-icon>{{ $globals.icons.delete }}</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
</draggable>
|
||||
</VueDraggable>
|
||||
<!-- Day Column Actions -->
|
||||
<div class="d-flex justify-end mt-auto">
|
||||
<BaseButtonGroup
|
||||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.diceMultiple,
|
||||
text: $tc('meal-plan.random-meal'),
|
||||
text: $t('meal-plan.random-meal'),
|
||||
event: 'random',
|
||||
children: [
|
||||
{
|
||||
icon: $globals.icons.diceMultiple,
|
||||
text: $tc('meal-plan.breakfast'),
|
||||
text: $t('meal-plan.breakfast'),
|
||||
event: 'randomBreakfast',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.diceMultiple,
|
||||
text: $tc('meal-plan.lunch'),
|
||||
text: $t('meal-plan.lunch'),
|
||||
event: 'randomLunch',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.potSteam,
|
||||
text: $tc('meal-plan.random-dinner'),
|
||||
text: $t('meal-plan.random-dinner'),
|
||||
event: 'randomDinner',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.bowlMixOutline,
|
||||
text: $tc('meal-plan.random-side'),
|
||||
text: $t('meal-plan.random-side'),
|
||||
event: 'randomSide',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.createAlt,
|
||||
text: $tc('general.new'),
|
||||
text: $t('general.new'),
|
||||
event: 'create',
|
||||
},
|
||||
]"
|
||||
@create="openDialog(plan.date)"
|
||||
@randomBreakfast="randomMeal(plan.date, 'breakfast')"
|
||||
@randomLunch="randomMeal(plan.date, 'lunch')"
|
||||
@randomDinner="randomMeal(plan.date, 'dinner')"
|
||||
@randomSide="randomMeal(plan.date, 'side')"
|
||||
@random-breakfast="randomMeal(plan.date, 'breakfast')"
|
||||
@random-lunch="randomMeal(plan.date, 'lunch')"
|
||||
@random-dinner="randomMeal(plan.date, 'dinner')"
|
||||
@random-side="randomMeal(plan.date, 'side')"
|
||||
/>
|
||||
</div>
|
||||
</v-col>
|
||||
|
|
@ -224,21 +220,21 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, reactive, ref, watch, onMounted, useContext } from "@nuxtjs/composition-api";
|
||||
import { format } from "date-fns";
|
||||
import { SortableEvent } from "sortablejs";
|
||||
import draggable from "vuedraggable";
|
||||
import { MealsByDate } from "./types";
|
||||
import { useMealplans, usePlanTypeOptions, getEntryTypeText } from "~/composables/use-group-mealplan";
|
||||
import type { SortableEvent } from "sortablejs";
|
||||
import { VueDraggable } from "vue-draggable-plus";
|
||||
import type { MealsByDate } from "./types";
|
||||
import type { useMealplans } from "~/composables/use-group-mealplan";
|
||||
import { usePlanTypeOptions, getEntryTypeText } from "~/composables/use-group-mealplan";
|
||||
import RecipeCardImage from "~/components/Domain/Recipe/RecipeCardImage.vue";
|
||||
import { PlanEntryType, UpdatePlanEntry } from "~/lib/api/types/meal-plan";
|
||||
import type { PlanEntryType, UpdatePlanEntry } from "~/lib/api/types/meal-plan";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useHouseholdSelf } from "~/composables/use-households";
|
||||
import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
draggable,
|
||||
VueDraggable,
|
||||
RecipeCardImage,
|
||||
},
|
||||
props: {
|
||||
|
|
@ -253,9 +249,9 @@ export default defineComponent({
|
|||
},
|
||||
setup(props) {
|
||||
const api = useUserApi();
|
||||
const { $auth } = useContext();
|
||||
const $auth = useMealieAuth();
|
||||
const { household } = useHouseholdSelf();
|
||||
const requiredRule = (value: any) => !!value || "Required."
|
||||
const requiredRule = (value: any) => !!value || "Required.";
|
||||
|
||||
const state = ref({
|
||||
dialog: false,
|
||||
|
|
@ -266,6 +262,24 @@ export default defineComponent({
|
|||
return household.value?.preferences?.firstDayOfWeek || 0;
|
||||
});
|
||||
|
||||
// Local mutable meals object
|
||||
const mealplansByDate = reactive<{ [date: string]: UpdatePlanEntry[] }>({});
|
||||
watch(
|
||||
() => props.mealplans,
|
||||
(plans) => {
|
||||
for (const plan of plans) {
|
||||
mealplansByDate[plan.date.toString()] = plan.meals ? [...plan.meals] : [];
|
||||
}
|
||||
// Remove any dates that no longer exist
|
||||
Object.keys(mealplansByDate).forEach((date) => {
|
||||
if (!plans.find(p => p.date.toString() === date)) {
|
||||
mealplansByDate[date] = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
function onMoveCallback(evt: SortableEvent) {
|
||||
const supportedEvents = ["drop", "touchend"];
|
||||
|
||||
|
|
@ -275,14 +289,15 @@ export default defineComponent({
|
|||
if (ogEvent && ogEvent.type in supportedEvents) {
|
||||
// The drop was cancelled, unsure if anything needs to be done?
|
||||
console.log("Cancel Move Event");
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
// A Meal was moved, set the new date value and make an update request and refresh the meals
|
||||
const fromMealsByIndex = parseInt(evt.from.getAttribute("data-index") ?? "");
|
||||
const toMealsByIndex = parseInt(evt.to.getAttribute("data-index") ?? "");
|
||||
|
||||
if (!isNaN(fromMealsByIndex) && !isNaN(toMealsByIndex)) {
|
||||
const mealData = props.mealplans[fromMealsByIndex].meals[evt.oldIndex as number];
|
||||
const destDate = props.mealplans[toMealsByIndex].date;
|
||||
const mealData = mealplansByDate[destDate.toString()][evt.newIndex as number];
|
||||
|
||||
mealData.date = format(destDate, "yyyy-MM-dd");
|
||||
|
||||
|
|
@ -307,7 +322,7 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
const newMeal = reactive({
|
||||
date: "",
|
||||
date: new Date(Date.now() - new Date().getTimezoneOffset() * 60000),
|
||||
title: "",
|
||||
text: "",
|
||||
recipeId: undefined as string | undefined,
|
||||
|
|
@ -315,7 +330,11 @@ export default defineComponent({
|
|||
existing: false,
|
||||
id: 0,
|
||||
groupId: "",
|
||||
userId: $auth.user?.id || "",
|
||||
userId: $auth.user.value?.id || "",
|
||||
});
|
||||
|
||||
const newMealDateString = computed(() => {
|
||||
return format(newMeal.date, "yyyy-MM-dd");
|
||||
});
|
||||
|
||||
const isCreateDisabled = computed(() => {
|
||||
|
|
@ -325,9 +344,8 @@ export default defineComponent({
|
|||
return !newMeal.recipeId;
|
||||
});
|
||||
|
||||
|
||||
function openDialog(date: Date) {
|
||||
newMeal.date = format(date, "yyyy-MM-dd");
|
||||
newMeal.date = date;
|
||||
state.value.dialog = true;
|
||||
}
|
||||
|
||||
|
|
@ -335,7 +353,8 @@ export default defineComponent({
|
|||
const { date, title, text, entryType, recipeId, id, groupId, userId } = mealplan;
|
||||
if (!entryType) return;
|
||||
|
||||
newMeal.date = date;
|
||||
const [year, month, day] = date.split("-").map(Number);
|
||||
newMeal.date = new Date(year, month - 1, day);
|
||||
newMeal.title = title || "";
|
||||
newMeal.text = text || "";
|
||||
newMeal.recipeId = recipeId || undefined;
|
||||
|
|
@ -343,14 +362,14 @@ export default defineComponent({
|
|||
newMeal.existing = true;
|
||||
newMeal.id = id;
|
||||
newMeal.groupId = groupId;
|
||||
newMeal.userId = userId || $auth.user?.id || "";
|
||||
newMeal.userId = userId || $auth.user.value?.id || "";
|
||||
|
||||
state.value.dialog = true;
|
||||
dialog.note = !recipeId;
|
||||
}
|
||||
|
||||
function resetDialog() {
|
||||
newMeal.date = "";
|
||||
newMeal.date = new Date(Date.now() - new Date().getTimezoneOffset() * 60000);
|
||||
newMeal.title = "";
|
||||
newMeal.text = "";
|
||||
newMeal.entryType = "dinner";
|
||||
|
|
@ -390,6 +409,7 @@ export default defineComponent({
|
|||
// Dialog
|
||||
dialog,
|
||||
newMeal,
|
||||
newMealDateString,
|
||||
openDialog,
|
||||
editMeal,
|
||||
resetDialog,
|
||||
|
|
@ -398,6 +418,7 @@ export default defineComponent({
|
|||
// Search
|
||||
search,
|
||||
firstDayOfWeek,
|
||||
mealplansByDate,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { ReadPlanEntry } from "~/lib/api/types/meal-plan";
|
||||
import type { ReadPlanEntry } from "~/lib/api/types/meal-plan";
|
||||
|
||||
export type MealsByDate = {
|
||||
date: Date;
|
||||
meals: ReadPlanEntry[]
|
||||
}
|
||||
meals: ReadPlanEntry[];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,8 @@
|
|||
<template>
|
||||
<v-container class="mx-0 my-3 pa">
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="(day, index) in plan"
|
||||
:key="index"
|
||||
cols="12"
|
||||
sm="12"
|
||||
md="4"
|
||||
lg="4"
|
||||
xl="2"
|
||||
class="col-borders my-1 d-flex flex-column"
|
||||
>
|
||||
<v-col v-for="(day, index) in plan" :key="index" cols="12" sm="12" md="4" lg="4" xl="2"
|
||||
class="col-borders my-1 d-flex flex-column">
|
||||
<v-card class="mb-2 border-left-primary rounded-sm px-2">
|
||||
<v-container class="px-0">
|
||||
<v-row no-gutters style="width: 100%;">
|
||||
|
|
@ -27,23 +19,19 @@
|
|||
</v-card>
|
||||
<div v-for="section in day.sections" :key="section.title">
|
||||
<div class="py-2 d-flex flex-column">
|
||||
<div class="primary" style="width: 50px; height: 2.5px"></div>
|
||||
<div class="primary" style="width: 50px; height: 2.5px" />
|
||||
<p class="text-overline my-0">
|
||||
{{ section.title }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<RecipeCardMobile
|
||||
v-for="mealplan in section.meals"
|
||||
:key="mealplan.id"
|
||||
:recipe-id="mealplan.recipe ? mealplan.recipe.id : ''"
|
||||
class="mb-2"
|
||||
:rating="mealplan.recipe ? mealplan.recipe.rating : 0"
|
||||
:slug="mealplan.recipe ? mealplan.recipe.slug : mealplan.title"
|
||||
:description="mealplan.recipe ? mealplan.recipe.description : mealplan.text"
|
||||
:name="mealplan.recipe ? mealplan.recipe.name : mealplan.title"
|
||||
:tags="mealplan.recipe ? mealplan.recipe.tags : []"
|
||||
/>
|
||||
<RecipeCardMobile v-for="mealplan in section.meals" :key="mealplan.id"
|
||||
:recipe-id="mealplan.recipe ? mealplan.recipe.id! : ''" class="mb-2"
|
||||
:rating="mealplan.recipe ? mealplan.recipe.rating! : 0"
|
||||
:slug="mealplan.recipe ? mealplan.recipe.slug! : mealplan.title!"
|
||||
:description="mealplan.recipe ? mealplan.recipe.description! : mealplan.text!"
|
||||
:name="mealplan.recipe ? mealplan.recipe.name! : mealplan.title!"
|
||||
:tags="mealplan.recipe ? mealplan.recipe.tags! : []" />
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
|
@ -51,14 +39,13 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
|
||||
import { MealsByDate } from "./types";
|
||||
import { ReadPlanEntry } from "~/lib/api/types/meal-plan";
|
||||
import type { MealsByDate } from "./types";
|
||||
import type { ReadPlanEntry } from "~/lib/api/types/meal-plan";
|
||||
import GroupMealPlanDayContextMenu from "~/components/Domain/Household/GroupMealPlanDayContextMenu.vue";
|
||||
import RecipeCardMobile from "~/components/Domain/Recipe/RecipeCardMobile.vue";
|
||||
import { RecipeSummary } from "~/lib/api/types/recipe";
|
||||
import type { RecipeSummary } from "~/lib/api/types/recipe";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
GroupMealPlanDayContextMenu,
|
||||
RecipeCardMobile,
|
||||
|
|
@ -81,17 +68,17 @@ export default defineComponent({
|
|||
recipes: RecipeSummary[];
|
||||
};
|
||||
|
||||
const { i18n } = useContext();
|
||||
const i18n = useI18n();
|
||||
|
||||
const plan = computed<Days[]>(() => {
|
||||
return props.mealplans.reduce((acc, day) => {
|
||||
const out: Days = {
|
||||
date: day.date,
|
||||
sections: [
|
||||
{ title: i18n.tc("meal-plan.breakfast"), meals: [] },
|
||||
{ title: i18n.tc("meal-plan.lunch"), meals: [] },
|
||||
{ title: i18n.tc("meal-plan.dinner"), meals: [] },
|
||||
{ title: i18n.tc("meal-plan.side"), meals: [] },
|
||||
{ title: i18n.t("meal-plan.breakfast"), meals: [] },
|
||||
{ title: i18n.t("meal-plan.lunch"), meals: [] },
|
||||
{ title: i18n.t("meal-plan.dinner"), meals: [] },
|
||||
{ title: i18n.t("meal-plan.side"), meals: [] },
|
||||
],
|
||||
recipes: [],
|
||||
};
|
||||
|
|
@ -99,11 +86,14 @@ export default defineComponent({
|
|||
for (const meal of day.meals) {
|
||||
if (meal.entryType === "breakfast") {
|
||||
out.sections[0].meals.push(meal);
|
||||
} else if (meal.entryType === "lunch") {
|
||||
}
|
||||
else if (meal.entryType === "lunch") {
|
||||
out.sections[1].meals.push(meal);
|
||||
} else if (meal.entryType === "dinner") {
|
||||
}
|
||||
else if (meal.entryType === "dinner") {
|
||||
out.sections[2].meals.push(meal);
|
||||
} else if (meal.entryType === "side") {
|
||||
}
|
||||
else if (meal.entryType === "side") {
|
||||
out.sections[3].meals.push(meal);
|
||||
}
|
||||
|
||||
|
|
@ -113,7 +103,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
// Drop empty sections
|
||||
out.sections = out.sections.filter((section) => section.meals.length > 0);
|
||||
out.sections = out.sections.filter(section => section.meals.length > 0);
|
||||
|
||||
acc.push(out);
|
||||
|
||||
|
|
|
|||
|
|
@ -2,35 +2,54 @@
|
|||
<v-container class="md-container">
|
||||
<BasePageTitle divider>
|
||||
<template #header>
|
||||
<v-img max-height="100" max-width="100" :src="require('~/static/svgs/manage-cookbooks.svg')"></v-img>
|
||||
<v-img
|
||||
width="100%"
|
||||
max-height="100"
|
||||
max-width="100"
|
||||
:src="require('~/static/svgs/manage-cookbooks.svg')"
|
||||
/>
|
||||
</template>
|
||||
<template #title>
|
||||
{{ $t('meal-plan.meal-plan-rules') }}
|
||||
</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-divider>
|
||||
<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"
|
||||
:day.sync="createData.day"
|
||||
:entry-type.sync="createData.entryType"
|
||||
:query-filter-string.sync="createData.queryFilterString"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-end">
|
||||
<BaseButton create :disabled="!createData.queryFilterString" @click="createRule" />
|
||||
<BaseButton
|
||||
create
|
||||
:disabled="!createData.queryFilterString"
|
||||
@click="createRule"
|
||||
/>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
<section>
|
||||
<BaseCardSectionTitle class="mt-10" :title="$tc('meal-plan.recipe-rules')" />
|
||||
<BaseCardSectionTitle
|
||||
class="mt-10"
|
||||
:title="$t('meal-plan.recipe-rules')"
|
||||
/>
|
||||
<div>
|
||||
<div v-for="(rule, idx) in allRules" :key="rule.id">
|
||||
<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]) }}
|
||||
|
|
@ -40,12 +59,12 @@
|
|||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.edit,
|
||||
text: $tc('general.edit'),
|
||||
text: $t('general.edit'),
|
||||
event: 'edit',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: $tc('general.delete'),
|
||||
text: $t('general.delete'),
|
||||
event: 'delete',
|
||||
},
|
||||
]"
|
||||
|
|
@ -57,36 +76,53 @@
|
|||
<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" />
|
||||
<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"
|
||||
small
|
||||
size="small"
|
||||
dark
|
||||
>
|
||||
{{ $tc("meal-plan.any-category") }}
|
||||
{{ $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" />
|
||||
<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"
|
||||
small
|
||||
size="small"
|
||||
dark
|
||||
>
|
||||
{{ $tc("meal-plan.any-tag") }}
|
||||
{{ $t("meal-plan.any-tag") }}
|
||||
</v-card-text>
|
||||
</div>
|
||||
<div v-if="rule.households">
|
||||
<h4 class="py-1">{{ $t("household.households") }}:</h4>
|
||||
<h4 class="py-1">
|
||||
{{ $t("household.households") }}:
|
||||
</h4>
|
||||
<div v-if="rule.households.length">
|
||||
<v-chip
|
||||
v-for="household in rule.households"
|
||||
|
|
@ -94,7 +130,7 @@
|
|||
label
|
||||
class="ma-1"
|
||||
color="accent"
|
||||
small
|
||||
size="small"
|
||||
dark
|
||||
>
|
||||
{{ household.name }}
|
||||
|
|
@ -105,22 +141,26 @@
|
|||
label
|
||||
class="ma-0 px-0 pt-0 pb-3"
|
||||
text-color="accent"
|
||||
small
|
||||
size="small"
|
||||
dark
|
||||
>
|
||||
{{ $tc("meal-plan.any-household") }}
|
||||
{{ $t("meal-plan.any-household") }}
|
||||
</v-card-text>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<GroupMealPlanRuleForm
|
||||
:day.sync="allRules[idx].day"
|
||||
:entry-type.sync="allRules[idx].entryType"
|
||||
:query-filter-string.sync="allRules[idx].queryFilterString"
|
||||
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)" />
|
||||
<BaseButton
|
||||
update
|
||||
:disabled="!allRules[idx].queryFilterString"
|
||||
@click="updateRule(rule)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</v-card-text>
|
||||
|
|
@ -132,27 +172,31 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, useAsync } from "@nuxtjs/composition-api";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { PlanRulesCreate, PlanRulesOut } from "~/lib/api/types/meal-plan";
|
||||
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";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
GroupMealPlanRuleForm,
|
||||
RecipeChips,
|
||||
},
|
||||
middleware: ["auth"],
|
||||
middleware: ["sidebase-auth"],
|
||||
props: {
|
||||
value: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const api = useUserApi();
|
||||
const i18n = useI18n();
|
||||
|
||||
useSeoMeta({
|
||||
title: i18n.t("meal-plan.meal-plan-settings"),
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
// Manage All
|
||||
|
|
@ -172,9 +216,9 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
useAsync(async () => {
|
||||
useAsyncData(useAsyncKey(), async () => {
|
||||
await refreshAll();
|
||||
}, useAsyncKey());
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
// Creating Rules
|
||||
|
|
@ -225,10 +269,5 @@ export default defineComponent({
|
|||
toggleEditState,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$tc("meal-plan.meal-plan-settings"),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,21 +2,32 @@
|
|||
<v-container>
|
||||
<BasePageTitle divider>
|
||||
<template #header>
|
||||
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-members.svg')"></v-img>
|
||||
<v-img
|
||||
width="100%"
|
||||
max-height="125"
|
||||
max-width="125"
|
||||
:src="require('~/static/svgs/manage-members.svg')"
|
||||
/>
|
||||
</template>
|
||||
<template #title> {{ $t('group.manage-members') }} </template>
|
||||
<i18n path="group.manage-members-description">
|
||||
<template #manage>
|
||||
<b>{{ $t('group.manage') }}</b>
|
||||
</template>
|
||||
<template #invite>
|
||||
<b>{{ $t('group.invite') }}</b>
|
||||
</template>
|
||||
</i18n>
|
||||
<v-container class="mt-1 px-0">
|
||||
<nuxt-link class="text-center" :to="`/user/profile/edit`"> {{ $t('group.looking-to-update-your-profile') }} </nuxt-link>
|
||||
<template #title>
|
||||
{{ $t('group.manage-members') }}
|
||||
</template>
|
||||
<i18n-t keypath="group.manage-members-description">
|
||||
<template #manage>
|
||||
<b>{{ $t('group.manage') }}</b>
|
||||
</template>
|
||||
<template #invite>
|
||||
<b>{{ $t('group.invite') }}</b>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<v-container class="mt-1 px-0">
|
||||
<nuxt-link
|
||||
class="text-center"
|
||||
:to="`/user/profile/edit`"
|
||||
> {{ $t('group.looking-to-update-your-profile') }}
|
||||
</nuxt-link>
|
||||
</v-container>
|
||||
</BasePageTitle>
|
||||
</BasePageTitle>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="members || []"
|
||||
|
|
@ -25,54 +36,78 @@
|
|||
hide-default-footer
|
||||
disable-pagination
|
||||
>
|
||||
<template #item.avatar="{ item }">
|
||||
<UserAvatar :tooltip="false" :user-id="item.id" />
|
||||
<template #[`item.avatar`]="{ item }">
|
||||
<UserAvatar
|
||||
v-if="item"
|
||||
:tooltip="false"
|
||||
:user-id="item.id"
|
||||
/>
|
||||
</template>
|
||||
<template #item.admin="{ item }">
|
||||
{{ item.admin ? $t('user.admin') : $t('user.user') }}
|
||||
<template #[`item.admin`]="{ item }">
|
||||
{{ item && item.admin ? $t('user.admin') : $t('user.user') }}
|
||||
</template>
|
||||
<template #item.manageHousehold="{ item }">
|
||||
<div class="d-flex justify-center">
|
||||
<template #[`item.manageHousehold`]="{ item }">
|
||||
<div
|
||||
v-if="item"
|
||||
class="d-flex justify-center"
|
||||
>
|
||||
<v-checkbox
|
||||
v-model="item.canManageHousehold"
|
||||
:disabled="item.id === $auth.user.id || item.admin"
|
||||
:disabled="item.id === sessionUser?.id || item.admin"
|
||||
color="primary"
|
||||
class=""
|
||||
style="max-width: 30px"
|
||||
hide-details
|
||||
@change="setPermissions(item)"
|
||||
></v-checkbox>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.manage="{ item }">
|
||||
<div class="d-flex justify-center">
|
||||
<template #[`item.manage`]="{ item }">
|
||||
<div
|
||||
v-if="item"
|
||||
class="d-flex justify-center"
|
||||
>
|
||||
<v-checkbox
|
||||
v-model="item.canManage"
|
||||
:disabled="item.id === $auth.user.id || item.admin"
|
||||
:disabled="item.id === sessionUser?.id || item.admin"
|
||||
class=""
|
||||
style="max-width: 30px"
|
||||
hide-details
|
||||
color="primary"
|
||||
@change="setPermissions(item)"
|
||||
></v-checkbox>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.organize="{ item }">
|
||||
<div class="d-flex justify-center">
|
||||
<template #[`item.organize`]="{ item }">
|
||||
<div
|
||||
v-if="item"
|
||||
class="d-flex justify-center"
|
||||
>
|
||||
<v-checkbox
|
||||
v-model="item.canOrganize"
|
||||
:disabled="item.id === $auth.user.id || item.admin"
|
||||
:disabled="item.id === sessionUser?.id || item.admin"
|
||||
class=""
|
||||
style="max-width: 30px"
|
||||
hide-details
|
||||
color="primary"
|
||||
@change="setPermissions(item)"
|
||||
></v-checkbox>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.invite="{ item }">
|
||||
<div class="d-flex justify-center">
|
||||
<template #[`item.invite`]="{ item }">
|
||||
<div
|
||||
v-if="item"
|
||||
class="d-flex justify-center"
|
||||
>
|
||||
<v-checkbox
|
||||
v-model="item.canInvite"
|
||||
:disabled="item.id === $auth.user.id || item.admin"
|
||||
:disabled="item.id === sessionUser?.id || item.admin"
|
||||
class=""
|
||||
style="max-width: 30px"
|
||||
hide-details
|
||||
color="primary"
|
||||
@change="setPermissions(item)"
|
||||
></v-checkbox>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
|
@ -80,32 +115,35 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, useContext } from "@nuxtjs/composition-api";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { UserOut } from "~/lib/api/types/user";
|
||||
import type { UserOut } from "~/lib/api/types/user";
|
||||
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
UserAvatar,
|
||||
},
|
||||
middleware: ["auth"],
|
||||
middleware: ["sidebase-auth"],
|
||||
setup() {
|
||||
const $auth = useMealieAuth();
|
||||
const api = useUserApi();
|
||||
const i18n = useI18n();
|
||||
|
||||
const { i18n } = useContext();
|
||||
useSeoMeta({
|
||||
title: i18n.t("profile.members"),
|
||||
});
|
||||
|
||||
const members = ref<UserOut[] | null[]>([]);
|
||||
|
||||
const headers = [
|
||||
{ text: "", value: "avatar", sortable: false, align: "center" },
|
||||
{ text: i18n.t("user.username"), value: "username" },
|
||||
{ text: i18n.t("user.full-name"), value: "fullName" },
|
||||
{ text: i18n.t("user.admin"), value: "admin" },
|
||||
{ text: i18n.t("group.manage"), value: "manage", sortable: false, align: "center" },
|
||||
{ text: i18n.t("settings.organize"), value: "organize", sortable: false, align: "center" },
|
||||
{ text: i18n.t("group.invite"), value: "invite", sortable: false, align: "center" },
|
||||
{ text: i18n.t("group.manage-household"), value: "manageHousehold", sortable: false, align: "center" },
|
||||
{ title: "", value: "avatar", sortable: false, align: "center" },
|
||||
{ title: i18n.t("user.username"), value: "username" },
|
||||
{ title: i18n.t("user.full-name"), value: "fullName" },
|
||||
{ title: i18n.t("user.admin"), value: "admin" },
|
||||
{ title: i18n.t("group.manage"), value: "manage", sortable: false, align: "center" },
|
||||
{ title: i18n.t("settings.organize"), value: "organize", sortable: false, align: "center" },
|
||||
{ title: i18n.t("group.invite"), value: "invite", sortable: false, align: "center" },
|
||||
{ title: i18n.t("group.manage-household"), value: "manageHousehold", sortable: false, align: "center" },
|
||||
];
|
||||
|
||||
async function refreshMembers() {
|
||||
|
|
@ -131,12 +169,7 @@ export default defineComponent({
|
|||
await refreshMembers();
|
||||
});
|
||||
|
||||
return { members, headers, setPermissions };
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("profile.members"),
|
||||
};
|
||||
return { members, headers, setPermissions, sessionUser: $auth.user };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,65 +3,138 @@
|
|||
<BaseDialog
|
||||
v-model="deleteDialog"
|
||||
color="error"
|
||||
:title="$tc('general.confirm')"
|
||||
:title="$t('general.confirm')"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
can-confirm
|
||||
@confirm="deleteNotifier(deleteTargetId)"
|
||||
>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<BaseDialog v-model="createDialog" :title="$t('events.new-notification')" @submit="createNewNotifier">
|
||||
<BaseDialog
|
||||
v-model="createDialog"
|
||||
:title="$t('events.new-notification')"
|
||||
can-submit
|
||||
@submit="createNewNotifier"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="createNotifierData.name" :label="$t('general.name')"></v-text-field>
|
||||
<v-text-field v-model="createNotifierData.appriseUrl" :label="$t('events.apprise-url')"></v-text-field>
|
||||
<v-text-field
|
||||
v-model="createNotifierData.name"
|
||||
:label="$t('general.name')"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="createNotifierData.appriseUrl"
|
||||
:label="$t('events.apprise-url')"
|
||||
/>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BasePageTitle divider>
|
||||
<template #header>
|
||||
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-notifiers.svg')"></v-img>
|
||||
<v-img
|
||||
width="100%"
|
||||
max-height="125"
|
||||
max-width="125"
|
||||
:src="require('~/static/svgs/manage-notifiers.svg')"
|
||||
/>
|
||||
</template>
|
||||
<template #title>
|
||||
{{ $t("events.event-notifiers") }}
|
||||
</template>
|
||||
<template #title> {{ $t("events.event-notifiers") }} </template>
|
||||
{{ $t("events.new-notification-form-description") }}
|
||||
|
||||
<div class="mt-3 d-flex flex-wrap justify-space-between mx-n2">
|
||||
<a href="https://github.com/caronc/apprise/wiki" target="_blanks" class="mx-2"> Apprise </a>
|
||||
<a href="https://github.com/caronc/apprise/wiki/Notify_gotify" target="_blanks" class="mx-2"> Gotify </a>
|
||||
<a href="https://github.com/caronc/apprise/wiki/Notify_discord" target="_blanks" class="mx-2"> Discord </a>
|
||||
<a href="https://github.com/caronc/apprise/wiki/Notify_homeassistant" target="_blanks" class="mx-2"> Home Assistant </a>
|
||||
<a href="https://github.com/caronc/apprise/wiki/Notify_matrix" target="_blanks" class="mx-2"> Matrix </a>
|
||||
<a href="https://github.com/caronc/apprise/wiki/Notify_pushover" target="_blanks" class="mx-2"> Pushover </a>
|
||||
<a
|
||||
href="https://github.com/caronc/apprise/wiki"
|
||||
target="_blanks"
|
||||
class="mx-2"
|
||||
> Apprise </a>
|
||||
<a
|
||||
href="https://github.com/caronc/apprise/wiki/Notify_gotify"
|
||||
target="_blanks"
|
||||
class="mx-2"
|
||||
> Gotify </a>
|
||||
<a
|
||||
href="https://github.com/caronc/apprise/wiki/Notify_discord"
|
||||
target="_blanks"
|
||||
class="mx-2"
|
||||
> Discord </a>
|
||||
<a
|
||||
href="https://github.com/caronc/apprise/wiki/Notify_homeassistant"
|
||||
target="_blanks"
|
||||
class="mx-2"
|
||||
> Home
|
||||
Assistant
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/caronc/apprise/wiki/Notify_matrix"
|
||||
target="_blanks"
|
||||
class="mx-2"
|
||||
> Matrix </a>
|
||||
<a
|
||||
href="https://github.com/caronc/apprise/wiki/Notify_pushover"
|
||||
target="_blanks"
|
||||
class="mx-2"
|
||||
> Pushover </a>
|
||||
</div>
|
||||
</BasePageTitle>
|
||||
|
||||
<BaseButton create @click="createDialog = true" />
|
||||
<v-expansion-panels v-if="notifiers" class="mt-2">
|
||||
<v-expansion-panel v-for="(notifier, index) in notifiers" :key="index" class="my-2 left-border rounded">
|
||||
<v-expansion-panel-header disable-icon-rotate class="headline">
|
||||
<BaseButton
|
||||
create
|
||||
@click="createDialog = true"
|
||||
/>
|
||||
<v-expansion-panels
|
||||
v-if="notifiers"
|
||||
class="mt-2"
|
||||
>
|
||||
<v-expansion-panel
|
||||
v-for="(notifier, index) in notifiers"
|
||||
:key="index"
|
||||
class="my-2 left-border rounded"
|
||||
>
|
||||
<v-expansion-panel-title
|
||||
disable-icon-rotate
|
||||
class="headline"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
{{ notifier.name }}
|
||||
</div>
|
||||
<template #actions>
|
||||
<v-btn icon class="ml-2">
|
||||
<v-btn
|
||||
icon
|
||||
class="ml-2"
|
||||
>
|
||||
<v-icon>
|
||||
{{ $globals.icons.edit }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<v-text-field v-model="notifiers[index].name" :label="$t('general.name')"></v-text-field>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-text-field
|
||||
v-model="notifiers[index].name"
|
||||
:label="$t('general.name')"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="notifiers[index].appriseUrl"
|
||||
:label="$t('events.apprise-url-skipped-if-blank')"
|
||||
></v-text-field>
|
||||
<v-checkbox v-model="notifiers[index].enabled" :label="$t('events.enable-notifier')" dense></v-checkbox>
|
||||
/>
|
||||
<v-checkbox
|
||||
v-model="notifiers[index].enabled"
|
||||
:label="$t('events.enable-notifier')"
|
||||
density="compact"
|
||||
/>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<p class="pt-4">{{ $t("events.what-events") }}</p>
|
||||
<v-divider />
|
||||
<p class="pt-4">
|
||||
{{ $t("events.what-events") }}
|
||||
</p>
|
||||
<div class="notifier-options">
|
||||
<section v-for="sec in optionsSections" :key="sec.id">
|
||||
<section
|
||||
v-for="sec in optionsSections"
|
||||
:key="sec.id"
|
||||
>
|
||||
<h4>
|
||||
{{ sec.text }}
|
||||
</h4>
|
||||
|
|
@ -70,28 +143,28 @@
|
|||
:key="opt.key"
|
||||
v-model="notifiers[index].options[opt.key]"
|
||||
hide-details
|
||||
dense
|
||||
density="compact"
|
||||
:label="opt.text"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<v-card-actions class="py-0">
|
||||
<v-spacer></v-spacer>
|
||||
<v-spacer />
|
||||
<BaseButtonGroup
|
||||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: $tc('general.delete'),
|
||||
text: $t('general.delete'),
|
||||
event: 'delete',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.testTube,
|
||||
text: $tc('general.test'),
|
||||
text: $t('general.test'),
|
||||
event: 'test',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.save,
|
||||
text: $tc('general.save'),
|
||||
text: $t('general.save'),
|
||||
event: 'save',
|
||||
},
|
||||
]"
|
||||
|
|
@ -100,33 +173,37 @@
|
|||
@test="testNotifier(notifier)"
|
||||
/>
|
||||
</v-card-actions>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, useAsync, reactive, useContext, toRefs } from "@nuxtjs/composition-api";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useAsyncKey } from "~/composables/use-utils";
|
||||
import { GroupEventNotifierCreate, GroupEventNotifierOut } from "~/lib/api/types/household";
|
||||
import type { GroupEventNotifierCreate, GroupEventNotifierOut } from "~/lib/api/types/household";
|
||||
|
||||
interface OptionKey {
|
||||
text: string;
|
||||
key: keyof GroupEventNotifierOut["options"];
|
||||
}
|
||||
|
||||
|
||||
interface OptionSection {
|
||||
id: number;
|
||||
text: string;
|
||||
options: OptionKey[];
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
middleware: ["auth", "advanced-only"],
|
||||
export default defineNuxtComponent({
|
||||
middleware: ["sidebase-auth", "advanced-only"],
|
||||
setup() {
|
||||
const api = useUserApi();
|
||||
const i18n = useI18n();
|
||||
|
||||
useSeoMeta({
|
||||
title: i18n.t("profile.notifiers"),
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
deleteDialog: false,
|
||||
|
|
@ -134,10 +211,10 @@ export default defineComponent({
|
|||
deleteTargetId: "",
|
||||
});
|
||||
|
||||
const notifiers = useAsync(async () => {
|
||||
const { data: notifiers } = useAsyncData(useAsyncKey(), async () => {
|
||||
const { data } = await api.groupEventNotifier.getAll();
|
||||
return data?.items;
|
||||
}, useAsyncKey());
|
||||
});
|
||||
|
||||
async function refreshNotifiers() {
|
||||
const { data } = await api.groupEventNotifier.getAll();
|
||||
|
|
@ -177,12 +254,11 @@ export default defineComponent({
|
|||
|
||||
// ===============================================================
|
||||
// Options Definitions
|
||||
const { i18n } = useContext();
|
||||
|
||||
const optionsSections: OptionSection[] = [
|
||||
{
|
||||
id: 1,
|
||||
text: i18n.tc("events.recipe-events"),
|
||||
text: i18n.t("events.recipe-events"),
|
||||
options: [
|
||||
{
|
||||
text: i18n.t("general.create") as string,
|
||||
|
|
@ -200,27 +276,27 @@ export default defineComponent({
|
|||
},
|
||||
{
|
||||
id: 2,
|
||||
text: i18n.tc("events.user-events"),
|
||||
text: i18n.t("events.user-events"),
|
||||
options: [
|
||||
{
|
||||
text: i18n.tc("events.when-a-new-user-joins-your-group"),
|
||||
text: i18n.t("events.when-a-new-user-joins-your-group"),
|
||||
key: "userSignup",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: i18n.tc("events.mealplan-events"),
|
||||
text: i18n.t("events.mealplan-events"),
|
||||
options: [
|
||||
{
|
||||
text: i18n.tc("events.when-a-user-in-your-group-creates-a-new-mealplan"),
|
||||
text: i18n.t("events.when-a-user-in-your-group-creates-a-new-mealplan"),
|
||||
key: "mealplanEntryCreated",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: i18n.tc("events.shopping-list-events"),
|
||||
text: i18n.t("events.shopping-list-events"),
|
||||
options: [
|
||||
{
|
||||
text: i18n.t("general.create") as string,
|
||||
|
|
@ -238,7 +314,7 @@ export default defineComponent({
|
|||
},
|
||||
{
|
||||
id: 5,
|
||||
text: i18n.tc("events.cookbook-events"),
|
||||
text: i18n.t("events.cookbook-events"),
|
||||
options: [
|
||||
{
|
||||
text: i18n.t("general.create") as string,
|
||||
|
|
@ -256,7 +332,7 @@ export default defineComponent({
|
|||
},
|
||||
{
|
||||
id: 6,
|
||||
text: i18n.tc("events.tag-events"),
|
||||
text: i18n.t("events.tag-events"),
|
||||
options: [
|
||||
{
|
||||
text: i18n.t("general.create") as string,
|
||||
|
|
@ -274,7 +350,7 @@ export default defineComponent({
|
|||
},
|
||||
{
|
||||
id: 7,
|
||||
text: i18n.tc("events.category-events"),
|
||||
text: i18n.t("events.category-events"),
|
||||
options: [
|
||||
{
|
||||
text: i18n.t("general.create") as string,
|
||||
|
|
@ -304,11 +380,6 @@ export default defineComponent({
|
|||
createNewNotifier,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("profile.notifiers"),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,68 +2,93 @@
|
|||
<v-container class="narrow-container">
|
||||
<BasePageTitle divider>
|
||||
<template #header>
|
||||
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-webhooks.svg')"></v-img>
|
||||
<v-img
|
||||
width="100%"
|
||||
max-height="125"
|
||||
max-width="125"
|
||||
:src="require('~/static/svgs/manage-webhooks.svg')"
|
||||
/>
|
||||
</template>
|
||||
<template #title>
|
||||
{{ $t('settings.webhooks.webhooks') }}
|
||||
</template>
|
||||
<template #title> {{ $t('settings.webhooks.webhooks') }} </template>
|
||||
<v-card-text class="pb-0">
|
||||
{{ $t('settings.webhooks.description') }}
|
||||
</v-card-text>
|
||||
</BasePageTitle>
|
||||
|
||||
<BaseButton create @click="actions.createOne()" />
|
||||
<BaseButton
|
||||
create
|
||||
@click="actions.createOne()"
|
||||
/>
|
||||
<v-expansion-panels class="mt-2">
|
||||
<v-expansion-panel v-for="(webhook, index) in webhooks" :key="index" class="my-2 left-border rounded">
|
||||
<v-expansion-panel-header disable-icon-rotate class="headline">
|
||||
<v-expansion-panel
|
||||
v-for="(webhook, index) in webhooks"
|
||||
:key="index"
|
||||
class="my-2 left-border rounded"
|
||||
>
|
||||
<v-expansion-panel-title
|
||||
disable-icon-rotate
|
||||
class="headline"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<v-icon large left :color="webhook.enabled ? 'info' : null">
|
||||
<v-icon
|
||||
size="large"
|
||||
start
|
||||
:color="webhook.enabled ? 'info' : undefined"
|
||||
>
|
||||
{{ $globals.icons.webhook }}
|
||||
</v-icon>
|
||||
{{ webhook.name }} - {{ $d(timeUTC(webhook.scheduledTime), "time") }}
|
||||
</div>
|
||||
<template #actions>
|
||||
<v-btn small icon class="ml-2">
|
||||
<v-btn
|
||||
size="small"
|
||||
icon
|
||||
flat
|
||||
class="ml-2"
|
||||
>
|
||||
<v-icon>
|
||||
{{ $globals.icons.edit }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<GroupWebhookEditor
|
||||
:key="webhook.id"
|
||||
:webhook="webhook"
|
||||
@save="actions.updateOne($event)"
|
||||
@delete="actions.deleteOne($event)"
|
||||
@test="actions.testOne($event).then(() => alert.success($tc('events.test-message-sent')))"
|
||||
@test="actions.testOne($event).then(() => alert.success($t('events.test-message-sent')))"
|
||||
/>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import { useGroupWebhooks, timeUTC } from "~/composables/use-group-webhooks";
|
||||
import GroupWebhookEditor from "~/components/Domain/Household/GroupWebhookEditor.vue";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
components: { GroupWebhookEditor },
|
||||
middleware: ["auth", "advanced-only"],
|
||||
middleware: ["sidebase-auth", "advanced-only"],
|
||||
setup() {
|
||||
const i18n = useI18n();
|
||||
const { actions, webhooks } = useGroupWebhooks();
|
||||
|
||||
useSeoMeta({
|
||||
title: i18n.t("settings.webhooks.webhooks"),
|
||||
});
|
||||
|
||||
return {
|
||||
alert,
|
||||
webhooks,
|
||||
actions,
|
||||
timeUTC
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("settings.webhooks.webhooks") as string,
|
||||
timeUTC,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue