mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-25 08:09:41 +02:00
feat: Additional Household Permissions (#4158)
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Michael Genson
GitHub
parent
b1820f9b23
commit
fd0257c1b8
37 changed files with 690 additions and 185 deletions
|
|
@ -53,7 +53,7 @@ import { VForm } from "~/types/vuetify";
|
|||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
HouseholdPreferencesEditor,
|
||||
HouseholdPreferencesEditor,
|
||||
},
|
||||
layout: "admin",
|
||||
setup() {
|
||||
|
|
@ -94,11 +94,8 @@ export default defineComponent({
|
|||
|
||||
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;
|
||||
alert.success(i18n.tc("settings.settings-updated"));
|
||||
} else {
|
||||
alert.error(i18n.tc("settings.settings-update-failed"));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<v-container 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>
|
||||
|
|
@ -7,70 +7,38 @@
|
|||
<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>
|
||||
<v-form ref="refHouseholdEditForm" @submit.prevent="handleSubmit">
|
||||
<v-card outlined>
|
||||
<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>
|
||||
</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-form>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
|
||||
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 { alert } from "~/composables/use-toast";
|
||||
|
||||
export default defineComponent({
|
||||
middleware: ["auth", "can-manage-only"],
|
||||
components: {
|
||||
HouseholdPreferencesEditor,
|
||||
},
|
||||
middleware: ["auth", "can-manage-household-only"],
|
||||
setup() {
|
||||
const { household, actions: householdActions } = useHouseholdSelf();
|
||||
|
||||
const { i18n } = useContext();
|
||||
|
||||
const refHouseholdEditForm = ref<VForm | null>(null);
|
||||
|
||||
type Preference = {
|
||||
key: keyof ReadHouseholdPreferences;
|
||||
value: boolean;
|
||||
|
|
@ -153,11 +121,27 @@ export default defineComponent({
|
|||
},
|
||||
];
|
||||
|
||||
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"));
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
household,
|
||||
householdActions,
|
||||
allDays,
|
||||
preferencesEditor,
|
||||
refHouseholdEditForm,
|
||||
handleSubmit,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
|
|
|
|||
|
|
@ -31,6 +31,17 @@
|
|||
<template #item.admin="{ item }">
|
||||
{{ item.admin ? $t('user.admin') : $t('user.user') }}
|
||||
</template>
|
||||
<template #item.manageHousehold="{ item }">
|
||||
<div class="d-flex justify-center">
|
||||
<v-checkbox
|
||||
v-model="item.canManageHousehold"
|
||||
:disabled="item.id === $auth.user.id || item.admin"
|
||||
class=""
|
||||
style="max-width: 30px"
|
||||
@change="setPermissions(item)"
|
||||
></v-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.manage="{ item }">
|
||||
<div class="d-flex justify-center">
|
||||
<v-checkbox
|
||||
|
|
@ -94,6 +105,7 @@ export default defineComponent({
|
|||
{ 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" },
|
||||
];
|
||||
|
||||
async function refreshMembers() {
|
||||
|
|
@ -107,6 +119,7 @@ export default defineComponent({
|
|||
const payload = {
|
||||
userId: user.id,
|
||||
canInvite: user.canInvite,
|
||||
canManageHousehold: user.canManageHousehold,
|
||||
canManage: user.canManage,
|
||||
canOrganize: user.canOrganize,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<v-container v-if="user">
|
||||
<section class="d-flex flex-column align-center mt-4">
|
||||
<UserAvatar size="96" :user-id="$auth.user.id" />
|
||||
<UserAvatar size="96" :user-id="user.id" />
|
||||
|
||||
<h2 class="headline">{{ $t('profile.welcome-user', [user.fullName]) }}</h2>
|
||||
<p class="subtitle-1 mb-0 text-center">
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
</p>
|
||||
<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-btn v-if="user.canInvite" outlined rounded @click="getSignupLink()">
|
||||
<v-icon left>
|
||||
{{ $globals.icons.createAlt }}
|
||||
</v-icon>
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
<p>{{ $t('profile.household-description') }}</p>
|
||||
</div>
|
||||
<v-row tag="section">
|
||||
<v-col v-if="$auth.user.canManage" cols="12" sm="12" md="6">
|
||||
<v-col v-if="user.canManageHousehold" cols="12" sm="12" md="6">
|
||||
<UserProfileLinkCard
|
||||
:link="{ text: $tc('profile.household-settings'), to: `/household` }"
|
||||
:image="require('~/static/svgs/manage-group-settings.svg')"
|
||||
|
|
@ -165,13 +165,13 @@
|
|||
</v-row>
|
||||
</section>
|
||||
<v-divider class="my-7" />
|
||||
<section v-if="$auth.user.canManage || $auth.user.canOrganize || $auth.user.advanced">
|
||||
<section v-if="user.canManage || user.canOrganize || user.advanced">
|
||||
<div>
|
||||
<h3 class="headline">{{ $t('group.group') }}</h3>
|
||||
<p>{{ $t('profile.group-description') }}</p>
|
||||
</div>
|
||||
<v-row tag="section">
|
||||
<v-col v-if="$auth.user.canManage" cols="12" sm="12" md="6">
|
||||
<v-col v-if="user.canManage" cols="12" sm="12" md="6">
|
||||
<UserProfileLinkCard
|
||||
:link="{ text: $tc('profile.group-settings'), to: `/group` }"
|
||||
:image="require('~/static/svgs/manage-group-settings.svg')"
|
||||
|
|
@ -180,8 +180,7 @@
|
|||
{{ $t('profile.group-settings-description') }}
|
||||
</UserProfileLinkCard>
|
||||
</v-col>
|
||||
<!-- $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">
|
||||
<v-col v-if="user.canOrganize" cols="12" sm="12" md="6">
|
||||
<UserProfileLinkCard
|
||||
:link="{ text: $tc('profile.manage-data'), to: `/group/data/foods` }"
|
||||
:image="require('~/static/svgs/manage-recipes.svg')"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue