Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-05 13:35:23 +02:00
Code Issues Releases Activity

feat: Add Households to Mealie (#3970)

Browse source
This commit is contained in:
Michael Genson 2024-08-22 10:14:32 -05:00 • committed by GitHub
parent 0c29cef17d
commit eb170cc7e5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
315 changed files with 6975 additions and 3577 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/pages/admin/backups.vue
View file

@ -60,7 +60,7 @@
<i18n path="settings.backup.experimental-description" />
</v-card-text>
</BaseCardSectionTitle>
<v-toolbar color="background" flat class="justify-between">
<v-toolbar color="transparent" flat class="justify-between">
<BaseButton class="mr-2" @click="createBackup"> {{ $t("settings.backup.create-heading") }} </BaseButton>
<AppButtonUpload
:text-btn="false"

21
frontend/pages/admin/manage/groups/index.vue
View file

@ -1,15 +1,14 @@
// TODO: Edit Group
<template>
<v-container fluid>
<BaseDialog
v-model="createDialog"
:title="$t('group.create-group')"
:icon="$globals.icons.group"
@submit="createGroup(createUserForm.data)"
@submit="createGroup(createGroupForm.data)"
>
<template #activator> </template>
<v-card-text>
<AutoForm v-model="createUserForm.data" :update-mode="updateMode" :items="createUserForm.items" />
<AutoForm v-model="createGroupForm.data" :update-mode="updateMode" :items="createGroupForm.items" />
</v-card-text>
</BaseDialog>
@ -27,7 +26,7 @@
<BaseCardSectionTitle :title="$tc('group.group-management')"> </BaseCardSectionTitle>
<section>
<v-toolbar flat color="background" class="justify-between">
<v-toolbar flat color="transparent" class="justify-between">
<BaseButton @click="openDialog"> {{ $t("general.create") }} </BaseButton>
</v-toolbar>
@ -41,15 +40,15 @@
:search="search"
@click:row="handleRowClick"
>
<template #item.households="{ item }">
{{ item.households.length }}
</template>
<template #item.users="{ item }">
{{ item.users.length }}
</template>
<template #item.webhookEnable="{ item }">
{{ item.webhooks.length > 0 ? $t("general.yes") : $t("general.no") }}
</template>
<template #item.actions="{ item }">
<v-btn
:disabled="item && item.users.length > 0"
:disabled="item && (item.households.length > 0 || item.users.length > 0)"
class="mr-1"
icon
color="error"
@ -94,12 +93,12 @@ export default defineComponent({
value: "id",
},
{ text: i18n.t("general.name"), value: "name" },
{ text: i18n.t("group.total-households"), value: "households" },
{ text: i18n.t("user.total-users"), value: "users" },
{ text: i18n.t("user.webhooks-enabled"), value: "webhookEnable" },
{ text: i18n.t("general.delete"), value: "actions" },
],
updateMode: false,
createUserForm: {
createGroupForm: {
items: [
{
label: i18n.t("group.group-name"),
@ -116,7 +115,7 @@ export default defineComponent({
function openDialog() {
state.createDialog = true;
state.createUserForm.data.name = "";
state.createGroupForm.data.name = "";
}
const router = useRouter();

117
frontend/pages/admin/manage/households/_id.vue Normal file
View file

@ -0,0 +1,117 @@
<template>
<v-container v-if="household" class="narrow-container">
<BasePageTitle>
<template #header>
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-group-settings.svg')"></v-img>
</template>
<template #title> {{ $t('household.admin-household-management') }} </template>
{{ $t('household.admin-household-management-text') }}
</BasePageTitle>
<AppToolbar back> </AppToolbar>
<v-card-text> {{ $t('household.household-id-value', [household.id]) }} </v-card-text>
<v-form v-if="!userError" ref="refHouseholdEditForm" @submit.prevent="handleSubmit">
<v-card outlined>
<v-card-text>
<v-select
v-if="groups"
v-model="household.groupId"
disabled
:items="groups"
rounded
class="rounded-lg"
item-text="name"
item-value="id"
:return-object="false"
filled
:label="$tc('group.user-group')"
:rules="[validators.required]"
/>
<v-text-field
v-model="household.name"
:label="$t('household.household-name')"
:rules="[validators.required]"
/>
<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>
</div>
</v-form>
</v-container>
</template>
<script lang="ts">
import { defineComponent, useRoute, onMounted, ref, useContext } from "@nuxtjs/composition-api";
import HouseholdPreferencesEditor from "~/components/Domain/Household/HouseholdPreferencesEditor.vue";
import { useGroups } from "~/composables/use-groups";
import { useUserApi } from "~/composables/api";
import { alert } from "~/composables/use-toast";
import { validators } from "~/composables/use-validators";
import { HouseholdInDB } from "~/lib/api/types/household";
import { VForm } from "~/types/vuetify";
export default defineComponent({
components: {
HouseholdPreferencesEditor,
},
layout: "admin",
setup() {
const route = useRoute();
const { i18n } = useContext();
const { groups } = useGroups();
const householdId = route.value.params.id;
// ==============================================
// New User Form
const refHouseholdEditForm = ref<VForm | null>(null);
const userApi = useUserApi();
const household = ref<HouseholdInDB | null>(null);
const userError = ref(false);
onMounted(async () => {
const { data, error } = await userApi.households.getOne(householdId);
if (error?.response?.status === 404) {
alert.error(i18n.tc("user.user-not-found"));
userError.value = true;
}
if (data) {
household.value = data;
}
});
async function handleSubmit() {
if (!refHouseholdEditForm.value?.validate() || household.value === null) {
return;
}
const { response, data } = await userApi.households.updateOne(household.value.id, household.value);
if (response?.status === 200 && data) {
if (household.value.slug !== data.slug) {
// the slug updated, which invalidates the nav URLs
window.location.reload();
}
household.value = data;
} else {
alert.error(i18n.tc("settings.settings-update-failed"));
}
}
return {
groups,
household,
validators,
userError,
refHouseholdEditForm,
handleSubmit,
};
},
});
</script>

167
frontend/pages/admin/manage/households/index.vue Normal file
View file

@ -0,0 +1,167 @@
<template>
<v-container fluid>
<BaseDialog
v-model="createDialog"
:title="$t('household.create-household')"
:icon="$globals.icons.household"
@submit="createHousehold(createHouseholdForm.data)"
>
<template #activator> </template>
<v-card-text>
<v-select
v-if="groups"
v-model="createHouseholdForm.data.groupId"
:items="groups"
rounded
class="rounded-lg"
item-text="name"
item-value="id"
:return-object="false"
filled
:label="$tc('household.household-group')"
:rules="[validators.required]"
/>
<AutoForm v-model="createHouseholdForm.data" :update-mode="updateMode" :items="createHouseholdForm.items" />
</v-card-text>
</BaseDialog>
<BaseDialog
v-model="confirmDialog"
:title="$t('general.confirm')"
color="error"
@confirm="deleteHousehold(deleteTarget)"
>
<template #activator> </template>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
<BaseCardSectionTitle :title="$tc('household.household-management')"> </BaseCardSectionTitle>
<section>
<v-toolbar flat color="transparent" class="justify-between">
<BaseButton @click="openDialog"> {{ $t("general.create") }} </BaseButton>
</v-toolbar>
<v-data-table
:headers="headers"
:items="households || []"
item-key="id"
class="elevation-0"
hide-default-footer
disable-pagination
:search="search"
@click:row="handleRowClick"
>
<template #item.users="{ item }">
{{ item.users.length }}
</template>
<template #item.group="{ item }">
{{ item.group }}
</template>
<template #item.webhookEnable="{ item }">
{{ item.webhooks.length > 0 ? $t("general.yes") : $t("general.no") }}
</template>
<template #item.actions="{ item }">
<v-btn
:disabled="item && item.users.length > 0"
class="mr-1"
icon
color="error"
@click.stop="
confirmDialog = true;
deleteTarget = item.id;
"
>
<v-icon>
{{ $globals.icons.delete }}
</v-icon>
</v-btn>
</template>
</v-data-table>
<v-divider></v-divider>
</section>
</v-container>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
import { fieldTypes } from "~/composables/forms";
import { useGroups } from "~/composables/use-groups";
import { useHouseholds } from "~/composables/use-households";
import { validators } from "~/composables/use-validators";
import { HouseholdInDB } from "~/lib/api/types/household";
export default defineComponent({
layout: "admin",
setup() {
const { i18n } = useContext();
const { groups } = useGroups();
const { households, refreshAllHouseholds, deleteHousehold, createHousehold } = useHouseholds();
const state = reactive({
createDialog: false,
confirmDialog: false,
deleteTarget: 0,
search: "",
headers: [
{
text: i18n.t("household.household"),
align: "start",
sortable: false,
value: "id",
},
{ text: i18n.t("general.name"), value: "name" },
{ text: i18n.t("group.group"), value: "group" },
{ text: i18n.t("user.total-users"), value: "users" },
{ text: i18n.t("user.webhooks-enabled"), value: "webhookEnable" },
{ text: i18n.t("general.delete"), value: "actions" },
],
updateMode: false,
createHouseholdForm: {
items: [
{
label: i18n.t("household.household-name"),
varName: "name",
type: fieldTypes.TEXT,
rules: ["required"],
},
],
data: {
groupId: "",
name: "",
},
},
});
function openDialog() {
state.createDialog = true;
state.createHouseholdForm.data.name = "";
state.createHouseholdForm.data.groupId = "";
}
const router = useRouter();
function handleRowClick(item: HouseholdInDB) {
router.push(`/admin/manage/households/${item.id}`);
}
return {
...toRefs(state),
groups,
households,
validators,
refreshAllHouseholds,
deleteHousehold,
createHousehold,
openDialog,
handleRowClick,
};
},
head() {
return {
title: this.$t("household.manage-households") as string,
};
},
});
</script>

22
frontend/pages/admin/manage/users/_id.vue
View file

@ -14,9 +14,11 @@
<div class="d-flex">
<p> {{ $t("user.user-id-with-value", {id: user.id} ) }}</p>
</div>
<!-- This is disabled since we can't properly handle changing the user's group in most scenarios -->
<v-select
v-if="groups"
v-model="user.group"
disabled
:items="groups"
rounded
class="rounded-lg"
@ -26,7 +28,20 @@
filled
:label="$tc('group.user-group')"
:rules="[validators.required]"
></v-select>
/>
<v-select
v-if="households"
v-model="user.household"
:items="households"
rounded
class="rounded-lg"
item-text="name"
item-value="name"
:return-object="false"
filled
:label="$tc('household.user-household')"
:rules="[validators.required]"
/>
<div class="d-flex py-2 pr-2">
<BaseButton type="button" :loading="generatingToken" create @click.prevent="handlePasswordReset">
{{ $t("user.generate-password-reset-link") }}
@ -65,6 +80,7 @@
import { computed, defineComponent, useRoute, onMounted, ref, useContext } from "@nuxtjs/composition-api";
import { useAdminApi, useUserApi } from "~/composables/api";
import { useGroups } from "~/composables/use-groups";
import { useHouseholds } from "~/composables/use-households";
import { alert } from "~/composables/use-toast";
import { useUserForm } from "~/composables/use-users";
import { validators } from "~/composables/use-validators";
@ -76,6 +92,7 @@ export default defineComponent({
setup() {
const { userForm } = useUserForm();
const { groups } = useGroups();
const { useHouseholdsInGroup } = useHouseholds();
const { i18n } = useContext();
const route = useRoute();
@ -89,6 +106,8 @@ export default defineComponent({
const adminApi = useAdminApi();
const user = ref<UserOut | null>(null);
const households = useHouseholdsInGroup(computed(() => user.value?.groupId || ""));
const disabledFields = computed(() => {
return user.value?.authMethod !== "Mealie" ? ["admin"] : [];
})
@ -154,6 +173,7 @@ export default defineComponent({
refNewUserForm,
handleSubmit,
groups,
households,
validators,
handlePasswordReset,
resetUrl,

38
frontend/pages/admin/manage/users/create.vue
View file

@ -12,17 +12,30 @@
<v-card-text>
<v-select
v-if="groups"
v-model="newUserData.group"
v-model="selectedGroupId"
:items="groups"
rounded
class="rounded-lg"
item-text="name"
item-value="id"
:return-object="false"
filled
:label="$t('group.user-group')"
:rules="[validators.required]"
/>
<v-select
v-if="households"
v-model="newUserData.household"
:items="households"
rounded
class="rounded-lg"
item-text="name"
item-value="name"
:return-object="false"
filled
:label="$t('group.user-group')"
:label="$t('household.user-household')"
:rules="[validators.required]"
></v-select>
/>
<AutoForm v-model="newUserData" :items="userForm" />
</v-card-text>
</v-card>
@ -34,9 +47,10 @@
</template>
<script lang="ts">
import { defineComponent, useRouter, reactive, ref, toRefs } from "@nuxtjs/composition-api";
import { computed, defineComponent, useRouter, reactive, ref, toRefs, watch } from "@nuxtjs/composition-api";
import { useAdminApi } from "~/composables/api";
import { useGroups } from "~/composables/use-groups";
import { useHouseholds } from "~/composables/use-households";
import { useUserForm } from "~/composables/use-users";
import { validators } from "~/composables/use-validators";
import { VForm } from "~/types/vuetify";
@ -46,6 +60,7 @@ export default defineComponent({
setup() {
const { userForm } = useUserForm();
const { groups } = useGroups();
const { useHouseholdsInGroup } = useHouseholds();
const router = useRouter();
// ==============================================
@ -55,13 +70,20 @@ export default defineComponent({
const adminApi = useAdminApi();
const selectedGroupId = ref<string>("");
const households = useHouseholdsInGroup(selectedGroupId);
const selectedGroup = computed(() => {
return groups.value?.find((group) => group.id === selectedGroupId.value);
});
const state = reactive({
newUserData: {
username: "",
fullName: "",
email: "",
admin: false,
group: "",
group: selectedGroup.value?.name || "",
household: "",
advanced: false,
canInvite: false,
canManage: false,
@ -70,6 +92,10 @@ export default defineComponent({
authMethod: "Mealie",
},
});
watch(selectedGroup, (newGroup) => {
state.newUserData.group = newGroup?.name || "";
state.newUserData.household = "";
});
async function handleSubmit() {
if (!refNewUserForm.value?.validate()) return;
@ -87,6 +113,8 @@ export default defineComponent({
refNewUserForm,
handleSubmit,
groups,
selectedGroupId,
households,
validators,
};
},

3
frontend/pages/admin/manage/users/index.vue
View file

@ -18,7 +18,7 @@
<BaseCardSectionTitle :title="$tc('user.user-management')"> </BaseCardSectionTitle>
<section>
<v-toolbar color="background" flat class="justify-between">
<v-toolbar color="transparent" flat class="justify-between">
<BaseButton to="/admin/manage/users/create" class="mr-2">
{{ $t("general.create") }}
</BaseButton>
@ -129,6 +129,7 @@ export default defineComponent({
{ text: i18n.t("user.full-name"), value: "fullName" },
{ text: i18n.t("user.email"), value: "email" },
{ text: i18n.t("group.group"), value: "group" },
{ text: i18n.t("household.household"), value: "household" },
{ text: i18n.t("user.auth-method"), value: "authMethod" },
{ text: i18n.t("user.admin"), value: "admin" },
{ text: i18n.t("general.delete"), value: "actions", sortable: false, align: "center" },

28
frontend/pages/admin/setup.vue
View file

@ -312,7 +312,6 @@ export default defineComponent({
const preferences = {
...data.preferences,
privateGroup: !commonSettings.value.makeGroupRecipesPublic,
recipePublic: commonSettings.value.makeGroupRecipesPublic,
}
const payload = {
@ -327,6 +326,32 @@ export default defineComponent({
}
}
async function updateHousehold() {
// @ts-ignore-next-line user will never be null here
const { data } = await api.households.getOne($auth.user?.householdId);
if (!data || !data.preferences) {
alert.error(i18n.tc("events.something-went-wrong"));
return;
}
const preferences = {
...data.preferences,
privateHousehold: !commonSettings.value.makeGroupRecipesPublic,
recipePublic: commonSettings.value.makeGroupRecipesPublic,
}
const payload = {
...data,
preferences,
}
// @ts-ignore-next-line user will never be null here
const { response } = await api.households.updateOne($auth.user?.householdId, payload);
if (!response || response.status !== 200) {
alert.error(i18n.tc("events.something-went-wrong"));
}
}
async function seedFoods() {
const { response } = await api.seeders.foods({ locale: locale.value })
if (!response || response.status !== 200) {
@ -365,6 +390,7 @@ export default defineComponent({
async function submitCommonSettings() {
const tasks = [
updateGroup(),
updateHousehold(),
seedData(),
]

5
frontend/pages/admin/site-settings.vue
View file

@ -367,6 +367,11 @@ export default defineComponent({
icon: $globals.icons.group,
value: data.defaultGroup,
},
{
name: i18n.t("about.default-household"),
icon: $globals.icons.household,
value: data.defaultHousehold,
},
{
slot: "recipe-scraper",
name: i18n.t("settings.recipe-scraper-version"),

11
frontend/pages/g/_groupSlug/recipes/timeline.vue
View file

@ -24,17 +24,18 @@ export default defineComponent({
const groupName = ref<string>("");
const queryFilter = ref<string>("");
async function fetchGroup() {
const { data } = await api.groups.getCurrentUserGroup();
async function fetchHousehold() {
const { data } = await api.households.getCurrentUserHousehold();
if (data) {
queryFilter.value = `recipe.group_id="${data.id}"`;
groupName.value = data.name;
// TODO: once users are able to fetch other households' recipes, remove the household filter
queryFilter.value = `recipe.group_id="${data.groupId}" AND recipe.household_id="${data.id}"`;
groupName.value = data.group;
}
ready.value = true;
}
fetchGroup();
fetchHousehold();
return {
groupName,
queryFilter,

2
frontend/pages/group/data/recipe-actions.vue
View file

@ -121,7 +121,7 @@
import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
import { validators } from "~/composables/use-validators";
import { useGroupRecipeActions, useGroupRecipeActionData } from "~/composables/use-group-recipe-actions";
import { GroupRecipeActionOut } from "~/lib/api/types/group";
import { GroupRecipeActionOut } from "~/lib/api/types/household";
export default defineComponent({
setup() {

119
frontend/pages/group/index.vue
View file

@ -25,139 +25,22 @@
<DocLink class="mt-2" link="/documentation/getting-started/faq/#how-do-private-groups-and-recipes-work" />
</div>
</div>
<v-select
v-model="group.preferences.firstDayOfWeek"
:prepend-icon="$globals.icons.calendarWeekBegin"
:items="allDays"
item-text="name"
item-value="value"
:label="$t('settings.first-day-of-week')"
@change="groupActions.updatePreferences()"
/>
</section>
<section v-if="group">
<BaseCardSectionTitle class="mt-10" :title="$tc('group.default-recipe-preferences')">
{{ $t("group.default-recipe-preferences-description") }}
</BaseCardSectionTitle>
<div class="preference-container">
<div v-for="p in preferencesEditor" :key="p.key">
<v-checkbox
v-model="group.preferences[p.key]"
hide-details
dense
:label="p.label"
@change="groupActions.updatePreferences()"
/>
<p class="ml-8 text-subtitle-2 my-0 py-0">
{{ p.description }}
</p>
</div>
</div>
</section>
</v-container>
</template>
<script lang="ts">
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
import { defineComponent } from "@nuxtjs/composition-api";
import { useGroupSelf } from "~/composables/use-groups";
import { ReadGroupPreferences } from "~/lib/api/types/group";
export default defineComponent({
middleware: ["auth", "can-manage-only"],
setup() {
const { group, actions: groupActions } = useGroupSelf();
const { i18n } = useContext();
type Preference = {
key: keyof ReadGroupPreferences;
value: boolean;
label: string;
description: string;
};
const preferencesEditor = computed<Preference[]>(() => {
if (!group.value || !group.value.preferences) {
return [];
}
return [
{
key: "recipePublic",
value: group.value.preferences.recipePublic || false,
label: i18n.t("group.allow-users-outside-of-your-group-to-see-your-recipes"),
description: i18n.t("group.allow-users-outside-of-your-group-to-see-your-recipes-description"),
} as Preference,
{
key: "recipeShowNutrition",
value: group.value.preferences.recipeShowNutrition || false,
label: i18n.t("group.show-nutrition-information"),
description: i18n.t("group.show-nutrition-information-description"),
} as Preference,
{
key: "recipeShowAssets",
value: group.value.preferences.recipeShowAssets || false,
label: i18n.t("group.show-recipe-assets"),
description: i18n.t("group.show-recipe-assets-description"),
} as Preference,
{
key: "recipeLandscapeView",
value: group.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: group.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: group.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,
},
];
return {
group,
groupActions,
allDays,
preferencesEditor,
};
},
head() {

178
frontend/pages/household/index.vue Normal file
View file

@ -0,0 +1,178 @@
<template>
<v-container 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>
</template>
<template #title> {{ $t("profile.household-settings") }} </template>
{{ $t("profile.household-description") }}
</BasePageTitle>
<section v-if="household">
<BaseCardSectionTitle class="mt-10" :title="$tc('household.household-preferences')"></BaseCardSectionTitle>
<div class="mb-6">
<v-checkbox
v-model="household.preferences.privateHousehold"
hide-details
dense
:label="$t('household.private-household')"
@change="householdActions.updatePreferences()"
/>
<div class="ml-8">
<p class="text-subtitle-2 my-0 py-0">
{{ $t("household.private-household-description") }}
</p>
<DocLink class="mt-2" link="/documentation/getting-started/faq/#how-do-private-groups-and-recipes-work" />
</div>
</div>
<v-select
v-model="household.preferences.firstDayOfWeek"
:prepend-icon="$globals.icons.calendarWeekBegin"
:items="allDays"
item-text="name"
item-value="value"
:label="$t('settings.first-day-of-week')"
@change="householdActions.updatePreferences()"
/>
</section>
<section v-if="household">
<BaseCardSectionTitle class="mt-10" :title="$tc('group.default-recipe-preferences')">
{{ $t("household.default-recipe-preferences-description") }}
</BaseCardSectionTitle>
<div class="preference-container">
<div v-for="p in preferencesEditor" :key="p.key">
<v-checkbox
v-model="household.preferences[p.key]"
hide-details
dense
:label="p.label"
@change="householdActions.updatePreferences()"
/>
<p class="ml-8 text-subtitle-2 my-0 py-0">
{{ p.description }}
</p>
</div>
</div>
</section>
</v-container>
</template>
<script lang="ts">
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
import { useHouseholdSelf } from "~/composables/use-households";
import { ReadHouseholdPreferences } from "~/lib/api/types/household";
export default defineComponent({
middleware: ["auth", "can-manage-only"],
setup() {
const { household, actions: householdActions } = useHouseholdSelf();
const { i18n } = useContext();
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 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,
},
];
return {
household,
householdActions,
allDays,
preferencesEditor,
};
},
head() {
return {
title: this.$t("household.household") as string,
};
},
});
</script>
<style lang="css">
.preference-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 600px;
}
</style>

16
frontend/pages/group/mealplan/planner.vue → frontend/pages/household/mealplan/planner.vue
View file

@ -39,10 +39,10 @@
<div class="d-flex flex-wrap align-center justify-space-between mb-2">
<v-tabs style="width: fit-content;">
<v-tab :to="`/group/mealplan/planner/view`">{{ $t('meal-plan.meal-planner') }}</v-tab>
<v-tab :to="`/group/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="`/group/mealplan/settings`" :text="$tc('general.settings')" />
<ButtonLink :icon="$globals.icons.calendar" :to="`/household/mealplan/settings`" :text="$tc('general.settings')" />
</div>
<div>
@ -56,7 +56,7 @@
<script lang="ts">
import { computed, defineComponent, ref, useRoute, useRouter, watch } from "@nuxtjs/composition-api";
import { isSameDay, addDays, parseISO } from "date-fns";
import { useGroupSelf } from "~/composables/use-groups";
import { useHouseholdSelf } from "~/composables/use-households";
import { useMealplans } from "~/composables/use-group-mealplan";
import { useUserMealPlanPreferences } from "~/composables/use-users/preferences";
@ -65,7 +65,7 @@ export default defineComponent({
setup() {
const route = useRoute();
const router = useRouter();
const { group } = useGroupSelf();
const { household } = useHouseholdSelf();
const mealPlanPreferences = useUserMealPlanPreferences();
const numberOfDays = ref<number>(mealPlanPreferences.value.numberOfDays || 7);
@ -74,8 +74,8 @@ export default defineComponent({
});
// Force to /view if current route is /planner
if (route.value.path === "/group/mealplan/planner") {
router.push("/group/mealplan/planner/view");
if (route.value.path === "/household/mealplan/planner") {
router.push("/household/mealplan/planner/view");
}
function fmtYYYYMMDD(date: Date) {
@ -95,7 +95,7 @@ export default defineComponent({
});
const firstDayOfWeek = computed(() => {
return group.value?.preferences?.firstDayOfWeek || 0;
return household.value?.preferences?.firstDayOfWeek || 0;
});
const weekRange = computed(() => {

8
frontend/pages/group/mealplan/planner/edit.vue → frontend/pages/household/mealplan/planner/edit.vue
View file

@ -229,7 +229,7 @@ import { useMealplans, usePlanTypeOptions, getEntryTypeText } from "~/composable
import RecipeCardImage from "~/components/Domain/Recipe/RecipeCardImage.vue";
import { PlanEntryType, UpdatePlanEntry } from "~/lib/api/types/meal-plan";
import { useUserApi } from "~/composables/api";
import { useGroupSelf } from "~/composables/use-groups";
import { useHouseholdSelf } from "~/composables/use-households";
import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
export default defineComponent({
@ -249,7 +249,7 @@ export default defineComponent({
},
setup(props) {
const api = useUserApi();
const { group } = useGroupSelf();
const { household } = useHouseholdSelf();
const state = ref({
dialog: false,
@ -257,7 +257,7 @@ export default defineComponent({
});
const firstDayOfWeek = computed(() => {
return group.value?.preferences?.firstDayOfWeek || 0;
return household.value?.preferences?.firstDayOfWeek || 0;
});
function onMoveCallback(evt: SortableEvent) {
@ -308,7 +308,7 @@ export default defineComponent({
entryType: "dinner" as PlanEntryType,
existing: false,
id: 0,
groupId: ""
groupId: "",
});
function openDialog(date: Date) {

0
frontend/pages/group/mealplan/planner/types.ts → frontend/pages/household/mealplan/planner/types.ts
View file

2
frontend/pages/group/mealplan/planner/view.vue → frontend/pages/household/mealplan/planner/view.vue
View file

@ -54,7 +54,7 @@
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
import { MealsByDate } from "./types";
import { ReadPlanEntry } from "~/lib/api/types/meal-plan";
import GroupMealPlanDayContextMenu from "~/components/Domain/Group/GroupMealPlanDayContextMenu.vue";
import GroupMealPlanDayContextMenu from "~/components/Domain/Household/GroupMealPlanDayContextMenu.vue";
import RecipeCardMobile from "~/components/Domain/Recipe/RecipeCardMobile.vue";
import { RecipeSummary } from "~/lib/api/types/recipe";

2
frontend/pages/group/mealplan/settings.vue → frontend/pages/household/mealplan/settings.vue
View file

@ -89,7 +89,7 @@
import { defineComponent, ref, useAsync } from "@nuxtjs/composition-api";
import { useUserApi } from "~/composables/api";
import { PlanRulesCreate, PlanRulesOut } from "~/lib/api/types/meal-plan";
import GroupMealPlanRuleForm from "~/components/Domain/Group/GroupMealPlanRuleForm.vue";
import GroupMealPlanRuleForm from "~/components/Domain/Household/GroupMealPlanRuleForm.vue";
import { useAsyncKey } from "~/composables/use-utils";
import RecipeChips from "~/components/Domain/Recipe/RecipeChips.vue";

4
frontend/pages/group/members.vue → frontend/pages/household/members.vue
View file

@ -97,7 +97,7 @@ export default defineComponent({
];
async function refreshMembers() {
const { data } = await api.groups.fetchMembers();
const { data } = await api.households.fetchMembers();
if (data) {
members.value = data;
}
@ -111,7 +111,7 @@ export default defineComponent({
canOrganize: user.canOrganize,
};
await api.groups.setMemberPermissions(payload);
await api.households.setMemberPermissions(payload);
}
onMounted(async () => {

2
frontend/pages/group/notifiers.vue → frontend/pages/household/notifiers.vue
View file

@ -109,7 +109,7 @@
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/group";
import { GroupEventNotifierCreate, GroupEventNotifierOut } from "~/lib/api/types/household";
interface OptionKey {
text: string;

2
frontend/pages/group/webhooks.vue → frontend/pages/household/webhooks.vue
View file

@ -45,7 +45,7 @@
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
import { useGroupWebhooks, timeUTC } from "~/composables/use-group-webhooks";
import GroupWebhookEditor from "~/components/Domain/Group/GroupWebhookEditor.vue";
import GroupWebhookEditor from "~/components/Domain/Household/GroupWebhookEditor.vue";
import { alert } from "~/composables/use-toast";
export default defineComponent({

16
frontend/pages/shopping-lists/_id.vue
View file

@ -294,8 +294,8 @@ import { useCopyList } from "~/composables/use-copy";
import { useUserApi } from "~/composables/api";
import MultiPurposeLabelSection from "~/components/Domain/ShoppingList/MultiPurposeLabelSection.vue"
import ShoppingListItem from "~/components/Domain/ShoppingList/ShoppingListItem.vue";
import { ShoppingListItemOut, ShoppingListMultiPurposeLabelOut, ShoppingListOut } from "~/lib/api/types/group";
import { UserSummary } from "~/lib/api/types/user";
import { ShoppingListItemOut, ShoppingListMultiPurposeLabelOut, ShoppingListOut } from "~/lib/api/types/household";
import { UserOut } from "~/lib/api/types/user";
import RecipeList from "~/components/Domain/Recipe/RecipeList.vue";
import ShoppingListItemEditor from "~/components/Domain/ShoppingList/ShoppingListItemEditor.vue";
import { useFoodStore, useLabelStore, useUnitStore } from "~/composables/store";
@ -444,7 +444,7 @@ export default defineComponent({
unchecked: shoppingList.value?.listItems?.filter((item) => !item.checked) ?? [],
checked: shoppingList.value?.listItems
?.filter((item) => item.checked)
.sort((a, b) => (a.updateAt < b.updateAt ? 1 : -1))
.sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1))
?? [],
};
});
@ -863,7 +863,7 @@ export default defineComponent({
item.position = shoppingList.value.listItems.length;
// set a temporary updatedAt timestamp prior to refresh so it appears at the top of the checked items
item.updateAt = new Date().toISOString();
item.updatedAt = new Date().toISOString();
}
// make updates reflect immediately
@ -934,7 +934,7 @@ export default defineComponent({
: 0;
createListItemData.value.createdAt = new Date().toISOString();
createListItemData.value.updateAt = createListItemData.value.createdAt;
createListItemData.value.updatedAt = createListItemData.value.createdAt;
updateListItemOrder();
@ -1020,16 +1020,16 @@ export default defineComponent({
// ===============================================================
// Shopping List Settings
const allUsers = ref<UserSummary[]>([]);
const allUsers = ref<UserOut[]>([]);
const currentUserId = ref<string | undefined>();
async function fetchAllUsers() {
const { data } = await userApi.users.getGroupUsers(1, -1, { orderBy: "full_name", orderDirection: "asc" });
const { data } = await userApi.households.fetchMembers();
if (!data) {
return;
}
// update current user
allUsers.value = data.items;
allUsers.value = data.sort((a, b) => ((a.fullName || "") < (b.fullName || "") ? -1 : 1));
currentUserId.value = shoppingList.value?.userId;
}

112
frontend/pages/user/profile/index.vue
View file

@ -7,7 +7,7 @@
<p class="subtitle-1 mb-0 text-center">
{{ $t('profile.description') }}
</p>
<v-card flat color="background" width="100%" max-width="600px">
<v-card flat color="transparent" width="100%" max-width="600px">
<v-card-actions class="d-flex justify-center my-4">
<v-btn v-if="$auth.user.canInvite" outlined rounded @click="getSignupLink()">
<v-icon left>
@ -57,9 +57,9 @@
<v-row tag="section">
<v-col cols="12" sm="12" md="12">
<v-card outlined>
<v-card-title class="headline pb-0"> {{ $t('profile.group-statistics') }} </v-card-title>
<v-card-title class="headline pb-0"> {{ $t('profile.household-statistics') }} </v-card-title>
<v-card-text class="py-0">
{{ $t('profile.group-statistics-description') }}
{{ $t('profile.household-statistics-description') }}
</v-card-text>
<v-card-text class="d-flex flex-wrap justify-center align-center" style="gap: 0.8rem">
<StatsCards
@ -106,8 +106,66 @@
</AdvancedOnly>
</v-row>
</section>
<v-divider class="my-7"></v-divider>
<v-divider class="my-7" />
<section>
<div>
<h3 class="headline">{{ $t('household.household') }}</h3>
<p>{{ $t('profile.household-description') }}</p>
</div>
<v-row tag="section">
<v-col v-if="$auth.user.canManage" cols="12" sm="12" md="6">
<UserProfileLinkCard
:link="{ text: $tc('profile.household-settings'), to: `/household` }"
:image="require('~/static/svgs/manage-group-settings.svg')"
>
<template #title> {{ $t('profile.household-settings') }} </template>
{{ $t('profile.household-settings-description') }}
</UserProfileLinkCard>
</v-col>
<v-col cols="12" sm="12" md="6">
<UserProfileLinkCard
:link="{ text: $tc('profile.manage-cookbooks'), to: `/g/${groupSlug}/cookbooks` }"
:image="require('~/static/svgs/manage-cookbooks.svg')"
>
<template #title> {{ $t('sidebar.cookbooks') }} </template>
{{ $t('profile.cookbooks-description') }}
</UserProfileLinkCard>
</v-col>
<v-col v-if="user.canManage" cols="12" sm="12" md="6">
<UserProfileLinkCard
:link="{ text: $tc('profile.manage-members'), to: `/household/members` }"
:image="require('~/static/svgs/manage-members.svg')"
>
<template #title> {{ $t('profile.members') }} </template>
{{ $t('profile.members-description') }}
</UserProfileLinkCard>
</v-col>
<AdvancedOnly>
<v-col v-if="user.advanced" cols="12" sm="12" md="6">
<UserProfileLinkCard
:link="{ text: $tc('profile.manage-webhooks'), to: `/household/webhooks` }"
:image="require('~/static/svgs/manage-webhooks.svg')"
>
<template #title> {{ $t('settings.webhooks.webhooks') }} </template>
{{ $t('profile.webhooks-description') }}
</UserProfileLinkCard>
</v-col>
</AdvancedOnly>
<AdvancedOnly>
<v-col cols="12" sm="12" md="6">
<UserProfileLinkCard
:link="{ text: $tc('profile.manage-notifiers'), to: `/household/notifiers` }"
:image="require('~/static/svgs/manage-notifiers.svg')"
>
<template #title> {{ $t('profile.notifiers') }} </template>
{{ $t('profile.notifiers-description') }}
</UserProfileLinkCard>
</v-col>
</AdvancedOnly>
</v-row>
</section>
<v-divider class="my-7" />
<section v-if="$auth.user.canManage || $auth.user.canOrganize || $auth.user.advanced">
<div>
<h3 class="headline">{{ $t('group.group') }}</h3>
<p>{{ $t('profile.group-description') }}</p>
@ -122,46 +180,6 @@
{{ $t('profile.group-settings-description') }}
</UserProfileLinkCard>
</v-col>
<v-col cols="12" sm="12" md="6">
<UserProfileLinkCard
:link="{ text: $tc('profile.manage-cookbooks'), to: `/g/${groupSlug}/cookbooks` }"
:image="require('~/static/svgs/manage-cookbooks.svg')"
>
<template #title> {{ $t('sidebar.cookbooks') }} </template>
{{ $t('profile.cookbooks-description') }}
</UserProfileLinkCard>
</v-col>
<v-col v-if="user.canManage" cols="12" sm="12" md="6">
<UserProfileLinkCard
:link="{ text: $tc('profile.manage-members'), to: `/group/members` }"
:image="require('~/static/svgs/manage-members.svg')"
>
<template #title> {{ $t('profile.members') }} </template>
{{ $t('profile.members-description') }}
</UserProfileLinkCard>
</v-col>
<AdvancedOnly>
<v-col v-if="user.advanced" cols="12" sm="12" md="6">
<UserProfileLinkCard
:link="{ text: $tc('profile.manage-webhooks'), to: `/group/webhooks` }"
:image="require('~/static/svgs/manage-webhooks.svg')"
>
<template #title> {{ $t('settings.webhooks.webhooks') }} </template>
{{ $t('profile.webhooks-description') }}
</UserProfileLinkCard>
</v-col>
</AdvancedOnly>
<AdvancedOnly>
<v-col cols="12" sm="12" md="6">
<UserProfileLinkCard
:link="{ text: $tc('profile.manage-notifiers'), to: `/group/notifiers` }"
:image="require('~/static/svgs/manage-notifiers.svg')"
>
<template #title> {{ $t('profile.notifiers') }} </template>
{{ $t('profile.notifiers-description') }}
</UserProfileLinkCard>
</v-col>
</AdvancedOnly>
<!-- $auth.user.canOrganize should not be null because of the auth middleware -->
<v-col v-if="$auth.user.canOrganize" cols="12" sm="12" md="6">
<UserProfileLinkCard
@ -224,7 +242,7 @@ export default defineComponent({
const api = useUserApi();
async function getSignupLink() {
const { data } = await api.groups.createInvitation({ uses: 1 });
const { data } = await api.households.createInvitation({ uses: 1 });
if (data) {
token.value = data.token;
generatedSignupLink.value = constructLink(data.token);
@ -272,7 +290,7 @@ export default defineComponent({
});
const stats = useAsync(async () => {
const { data } = await api.groups.statistics();
const { data } = await api.households.statistics();
if (data) {
return data;
@ -306,7 +324,7 @@ export default defineComponent({
const statsTo = computed<{ [key: string]: string }>(() => { return {
totalRecipes: `/g/${groupSlug.value}/`,
totalUsers: "/group/members",
totalUsers: "/household/members",
totalCategories: `/g/${groupSlug.value}/recipes/categories`,
totalTags: `/g/${groupSlug.value}/recipes/tags`,
totalTools: `/g/${groupSlug.value}/recipes/tools`,