From 01e3bb04b9af238d4ee398c79016eedd6bfcb8d8 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sun, 26 Feb 2023 12:39:36 -0900
Subject: [PATCH] feat: update inline docs on group page to clarify
 private/public settings (#2190)

---
 frontend/components/global/DocLink.vue |  29 +++++
 frontend/lang/messages/en-US.json      |   7 ++
 frontend/pages/group/index.vue         | 141 +++++++++++++++++--------
 3 files changed, 131 insertions(+), 46 deletions(-)
 create mode 100644 frontend/components/global/DocLink.vue

diff --git a/frontend/components/global/DocLink.vue b/frontend/components/global/DocLink.vue
new file mode 100644
index 000000000000..2a3b510de49b
--- /dev/null
+++ b/frontend/components/global/DocLink.vue
@@ -0,0 +1,29 @@
+<template>
+  <v-btn x-small :href="href" color="primary" target="_blank">
+    <v-icon left small>
+      {{ $globals.icons.folderOutline }}
+    </v-icon>
+    {{ $tc("about.docs") }}
+  </v-btn>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  props: {
+    link: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const href = computed(() => {
+      // TODO: dynamically set docs link based off env
+      return `https://nightly.mealie.io${props.link}`;
+    });
+
+    return { href };
+  },
+});
+</script>
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index 0d583cb61763..36a435d377f6 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -209,12 +209,19 @@
     "default-recipe-preferences": "Default Recipe Preferences",
     "group-preferences": "Group Preferences",
     "private-group": "Private Group",
+    "private-group-description": "Setting your group to private will default all public view options to default. This overrides an individual recipes public view settings.",
     "allow-users-outside-of-your-group-to-see-your-recipes": "Allow users outside of your group to see your recipes",
+    "allow-users-outside-of-your-group-to-see-your-recipes-description": "When enabled you can use a public share link to share specific recipes without authorizing the user. When disabled, you can only share recipes with users who are in your group or with a pre-generated private link",
     "show-nutrition-information": "Show nutrition information",
+    "show-nutrition-information-description": "When enabled the nutrition information will be shown on the recipe if available. If there is no nutrition information available, the nutrition information will not be shown",
     "show-recipe-assets": "Show recipe assets",
+    "show-recipe-assets-description": "When enabled the recipe assets will be shown on the recipe if available",
     "default-to-landscape-view": "Default to landscape view",
+    "default-to-landscape-view-description": "When enabled the recipe header section will be shown in landscape view",
     "disable-users-from-commenting-on-recipes": "Disable users from commenting on recipes",
+    "disable-users-from-commenting-on-recipes-description": "Hides the comment section on the recipe page and disables commenting",
     "disable-organizing-recipe-ingredients-by-units-and-food": "Disable organizing recipe ingredients by units and food",
+    "disable-organizing-recipe-ingredients-by-units-and-food-description": "Hides the Food, Unit, and Amount fields for ingredients and treats ingredients as plain text fields.",
     "general-preferences": "General Preferences",
     "group-recipe-preferences": "Group Recipe Preferences",
     "report": "Report"
diff --git a/frontend/pages/group/index.vue b/frontend/pages/group/index.vue
index 67c9d9b3e9de..9b4e24678da3 100644
--- a/frontend/pages/group/index.vue
+++ b/frontend/pages/group/index.vue
@@ -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>