feat: Additional Household Permissions (#4158)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/components/Domain/Household/HouseholdPreferencesEditor.vue

@@ -1,7 +1,33 @@
 <template>
   <div v-if="preferences">
-    <BaseCardSectionTitle :title="$tc('group.general-preferences')"></BaseCardSectionTitle>
-    <v-checkbox v-model="preferences.privateHousehold" class="mt-n4" :label="$t('household.private-household')"></v-checkbox>
+    <BaseCardSectionTitle class="mt-10" :title="$tc('household.household-preferences')"></BaseCardSectionTitle>
+    <div class="mb-6">
+      <v-checkbox
+        v-model="preferences.privateHousehold"
+        hide-details
+        dense
+        :label="$t('household.private-household')"
+      />
+      <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>
+    <div class="mb-6">
+      <v-checkbox
+        v-model="preferences.lockRecipeEditsFromOtherHouseholds"
+        hide-details
+        dense
+        :label="$t('household.lock-recipe-edits-from-other-households')"
+      />
+      <div class="ml-8">
+        <p class="text-subtitle-2 my-0 py-0">
+          {{ $t("household.lock-recipe-edits-from-other-households-description") }}
+        </p>
+      </div>
+    </div>
     <v-select
       v-model="preferences.firstDayOfWeek"
       :prepend-icon="$globals.icons.calendarWeekBegin"
@@ -12,20 +38,25 @@
     />
 
     <BaseCardSectionTitle class="mt-5" :title="$tc('household.household-recipe-preferences')"></BaseCardSectionTitle>
-    <template v-for="(_, key) in preferences">
-      <v-checkbox
-        v-if="labels[key]"
-        :key="key"
-        v-model="preferences[key]"
-        class="mt-n4"
-        :label="labels[key]"
-      ></v-checkbox>
-    </template>
+    <div class="preference-container">
+      <div v-for="p in recipePreferences" :key="p.key">
+        <v-checkbox
+          v-model="preferences[p.key]"
+          hide-details
+          dense
+          :label="p.label"
+        />
+        <p class="ml-8 text-subtitle-2 my-0 py-0">
+          {{ p.description }}
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed, useContext } from "@nuxtjs/composition-api";
+import { ReadHouseholdPreferences } from "~/lib/api/types/household";
 
 export default defineComponent({
   props: {
@@ -37,14 +68,44 @@ export default defineComponent({
   setup(props, context) {
     const { i18n } = useContext();
 
-    const labels = {
-      recipePublic: i18n.tc("household.allow-users-outside-of-your-household-to-see-your-recipes"),
-      recipeShowNutrition: i18n.tc("group.show-nutrition-information"),
-      recipeShowAssets: i18n.tc("group.show-recipe-assets"),
-      recipeLandscapeView: i18n.tc("group.default-to-landscape-view"),
-      recipeDisableComments: i18n.tc("group.disable-users-from-commenting-on-recipes"),
-      recipeDisableAmount: i18n.tc("group.disable-organizing-recipe-ingredients-by-units-and-food"),
-    };
+    type Preference = {
+      key: keyof ReadHouseholdPreferences;
+      label: string;
+      description: string;
+    }
+
+    const recipePreferences: Preference[] = [
+      {
+        key: "recipePublic",
+        label: i18n.tc("group.allow-users-outside-of-your-group-to-see-your-recipes"),
+        description: i18n.tc("group.allow-users-outside-of-your-group-to-see-your-recipes-description"),
+      },
+      {
+        key: "recipeShowNutrition",
+        label: i18n.tc("group.show-nutrition-information"),
+        description: i18n.tc("group.show-nutrition-information-description"),
+      },
+      {
+        key: "recipeShowAssets",
+        label: i18n.tc("group.show-recipe-assets"),
+        description: i18n.tc("group.show-recipe-assets-description"),
+      },
+      {
+        key: "recipeLandscapeView",
+        label: i18n.tc("group.default-to-landscape-view"),
+        description: i18n.tc("group.default-to-landscape-view-description"),
+      },
+      {
+        key: "recipeDisableComments",
+        label: i18n.tc("group.disable-users-from-commenting-on-recipes"),
+        description: i18n.tc("group.disable-users-from-commenting-on-recipes-description"),
+      },
+      {
+        key: "recipeDisableAmount",
+        label: i18n.tc("group.disable-organizing-recipe-ingredients-by-units-and-food"),
+        description: i18n.tc("group.disable-organizing-recipe-ingredients-by-units-and-food-description"),
+      },
+    ];
 
     const allDays = [
       {
@@ -88,12 +149,18 @@ export default defineComponent({
 
     return {
       allDays,
-      labels,
       preferences,
+      recipePreferences,
     };
   },
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css">
+.preference-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 600px;
+}
 </style>