Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-25 08:09:41 +02:00
Code Issues Releases Activity

feat: update inline docs on group page to clarify private/public settings (#2190)

Browse source
This commit is contained in:
Hayden 2023-02-26 12:39:36 -09:00 • committed by GitHub
parent d3f893dec2
commit 01e3bb04b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 131 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,18 +4,27 @@
<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.group-settings') }} </template>
{{ $t('profile.group-description') }}
<template #title> {{ $t("profile.group-settings") }} </template>
{{ $t("profile.group-description") }}
</BasePageTitle>
<section v-if="group">
<BaseCardSectionTitle class="mt-10" :title="$tc('group.group-preferences')"></BaseCardSectionTitle>
<v-checkbox
v-model="group.preferences.privateGroup"
class="mt-n4"
:label="$t('group.private-group')"
@change="groupActions.updatePreferences()"
></v-checkbox>
<div class="mb-6">
<v-checkbox
v-model="group.preferences.privateGroup"
hide-details
dense
:label="$t('group.private-group')"
@change="groupActions.updatePreferences()"
/>
<div class="ml-8">
<p class="text-subtitle-2 my-0 py-0">
{{ $t("group.private-group-description") }}
</p>
<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"
@ -29,52 +38,31 @@
<section v-if="group">
<BaseCardSectionTitle class="mt-10" :title="$tc('group.default-recipe-preferences')">
{{ $t('group.default-recipe-preferences-description') }}
{{ $t("group.default-recipe-preferences-description") }}
</BaseCardSectionTitle>
<v-checkbox
v-model="group.preferences.recipePublic"
class="mt-n4"
:label="$t('group.allow-users-outside-of-your-group-to-see-your-recipes')"
@change="groupActions.updatePreferences()"
></v-checkbox>
<v-checkbox
v-model="group.preferences.recipeShowNutrition"
class="mt-n4"
:label="$t('group.show-nutrition-information')"
@change="groupActions.updatePreferences()"
></v-checkbox>
<v-checkbox
v-model="group.preferences.recipeShowAssets"
class="mt-n4"
:label="$t('group.show-recipe-assets')"
@change="groupActions.updatePreferences()"
></v-checkbox>
<v-checkbox
v-model="group.preferences.recipeLandscapeView"
class="mt-n4"
:label="$t('group.default-to-landscape-view')"
@change="groupActions.updatePreferences()"
></v-checkbox>
<v-checkbox
v-model="group.preferences.recipeDisableComments"
class="mt-n4"
:label="$t('group.disable-users-from-commenting-on-recipes')"
@change="groupActions.updatePreferences()"
></v-checkbox>
<v-checkbox
v-model="group.preferences.recipeDisableAmount"
class="mt-n4"
:label="$t('group.disable-organizing-recipe-ingredients-by-units-and-food')"
@change="groupActions.updatePreferences()"
></v-checkbox>
<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 { defineComponent, useContext } from "@nuxtjs/composition-api";
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
import { useGroupSelf } from "~/composables/use-groups";
import { ReadGroupPreferences } from "~/lib/api/types/group";
export default defineComponent({
setup() {
@ -82,6 +70,57 @@ export default defineComponent({
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"),
@ -117,6 +156,7 @@ export default defineComponent({
group,
groupActions,
allDays,
preferencesEditor,
};
},
head() {
@ -126,3 +166,12 @@ export default defineComponent({
},
});
</script>
<style lang="css">
.preference-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 600px;
}
</style>