feat(backend): ✨ refactor/fix group management for admins (#838)

* fix(frontend): 🐛 update dialog implementation to simplify state management

* test(backend): ✅ refactor test fixtures + admin group tests

* chore(backend): 🔨 add launcher.json for python debugging (tests)

* fix typing

* feat(backend): ✨ refactor/fix group management for admins

* feat(frontend): ✨ add/fix admin group management

* add LDAP checker

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/components/Domain/Group/GroupPreferencesEditor.vue

@@ -0,0 +1,99 @@
+<template>
+  <div v-if="preferences">
+    <BaseCardSectionTitle title="General Preferences"></BaseCardSectionTitle>
+    <v-checkbox v-model="preferences.privateGroup" class="mt-n4" label="Private Group"></v-checkbox>
+    <v-select
+      v-model="preferences.firstDayOfWeek"
+      :prepend-icon="$globals.icons.calendarWeekBegin"
+      :items="allDays"
+      item-text="name"
+      item-value="value"
+      :label="$t('settings.first-day-of-week')"
+    />
+
+    <BaseCardSectionTitle class="mt-5" title="Group 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>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, useContext } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props, context) {
+    const { i18n } = useContext();
+
+    const labels = {
+      recipePublic: "Allow users outside of your group to see your recipes",
+      recipeShowNutrition: "Show nutrition information",
+      recipeShowAssets: "Show recipe assets",
+      recipeLandscapeView: "Default to landscape view",
+      recipeDisableComments: "Disable recipe comments from users in your group",
+      recipeDisableAmount: "Disable organizing recipe ingredients by units and food",
+    };
+
+    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,
+      },
+    ];
+
+    const preferences = computed({
+      get() {
+        return props.value;
+      },
+      set(val) {
+        context.emit("input", val);
+      },
+    });
+
+    return {
+      allDays,
+      labels,
+      preferences,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -8,7 +8,7 @@
     style="z-index: 2; position: sticky"
   >
     <BaseDialog
-      ref="deleteRecipieConfirm"
+      v-model="deleteDialog"
       :title="$t('recipe.delete-recipe')"
       color="error"
       :icon="$globals.icons.alertCircle"
@@ -112,6 +112,7 @@ export default {
   },
   data() {
     return {
+      deleteDialog: false,
       edit: false,
     };
   },
@@ -160,7 +161,7 @@ export default {
           this.$emit(JSON_EVENT);
           break;
         case DELETE_EVENT:
-          this.$refs.deleteRecipieConfirm.open();
+          this.deleteDialog = true;
           break;
         default:
           break;

frontend/components/Domain/Recipe/RecipeAssets.vue

@@ -34,9 +34,14 @@
     </v-card>
     <div class="d-flex ml-auto mt-2">
       <v-spacer></v-spacer>
-      <BaseDialog :title="$t('asset.new-asset')" :icon="getIconDefinition(newAsset.icon).icon" @submit="addAsset">
-        <template #activator="{ open }">
-          <BaseButton v-if="edit" small create @click="open" />
+      <BaseDialog
+        v-model="newAssetDialog"
+        :title="$t('asset.new-asset')"
+        :icon="getIconDefinition(newAsset.icon).icon"
+        @submit="addAsset"
+      >
+        <template #activator>
+          <BaseButton v-if="edit" small create @click="newAssetDialog = true" />
         </template>
         <v-card-text class="pt-4">
           <v-text-field v-model="newAsset.name" dense :label="$t('general.name')"></v-text-field>
@@ -94,6 +99,7 @@ export default defineComponent({
     const api = useUserApi();
 
     const state = reactive({
+      newAssetDialog: false,
       fileObject: {} as File,
       newAsset: {
         name: "",

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="text-center">
     <BaseDialog
-      ref="domConfirmDelete"
+      v-model="recipeDeleteDialog"
       :title="$t('recipe.delete-recipe')"
       color="error"
       :icon="$globals.icons.alertCircle"
@@ -12,7 +12,7 @@
       </v-card-text>
     </BaseDialog>
     <BaseDialog
-      ref="domMealplanDialog"
+      v-model="mealplannerDialog"
       title="Add Recipe to Mealplan"
       color="primary"
       :icon="$globals.icons.calendar"
@@ -74,7 +74,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, reactive, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
 import { useClipboard, useShare } from "@vueuse/core";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
@@ -152,6 +152,8 @@ export default defineComponent({
     const api = useUserApi();
 
     const state = reactive({
+      recipeDeleteDialog: false,
+      mealplannerDialog: false,
       loading: false,
       menuItems: [] as ContextMenuItem[],
       newMealdate: "",
@@ -232,8 +234,6 @@ export default defineComponent({
 
     const router = useRouter();
 
-    const domConfirmDelete = ref(null);
-
     async function deleteRecipe() {
       await api.recipes.deleteOne(props.slug);
       context.emit("delete", props.slug);
@@ -264,7 +264,6 @@ export default defineComponent({
       }
     }
 
-    const domMealplanDialog = ref(null);
     async function addRecipeToPlan() {
       const { response } = await api.mealplans.createOne({
         date: state.newMealdate,
@@ -284,11 +283,15 @@ export default defineComponent({
     // Note: Print is handled as an event in the parent component
     const eventHandlers: { [key: string]: Function } = {
       // @ts-ignore - Doens't know about open()
-      delete: () => domConfirmDelete?.value?.open(),
+      delete: () => {
+        state.recipeDeleteDialog = true;
+      },
       edit: () => router.push(`/recipe/${props.slug}` + "?edit=true"),
       download: handleDownloadEvent,
       // @ts-ignore - Doens't know about open()
-      mealplanner: () => domMealplanDialog?.value?.open(),
+      mealplanner: () => {
+        state.mealplannerDialog = true;
+      },
       share: handleShareEvent,
     };
 
@@ -310,8 +313,6 @@ export default defineComponent({
       contextMenuEventHandler,
       deleteRecipe,
       addRecipeToPlan,
-      domConfirmDelete,
-      domMealplanDialog,
       icon,
       planTypeOptions,
     };

frontend/components/Domain/Recipe/RecipeTools.vue

@@ -28,9 +28,9 @@
           </v-chip>
         </template>
         <template #append-outer="">
-          <BaseDialog title="Create New Tool" @submit="actions.createOne()">
-            <template #activator="{ open }">
-              <v-btn icon @click="open">
+          <BaseDialog v-model="createDialog" title="Create New Tool" @submit="actions.createOne()">
+            <template #activator>
+              <v-btn icon @click="createDialog = true">
                 <v-icon> {{ $globals.icons.create }}</v-icon>
               </v-btn>
             </template>
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { defineComponent, ref } from "@nuxtjs/composition-api";
 import { computed } from "vue-demi";
 import { Tool } from "~/api/class-interfaces/tools";
 import { useTools } from "~/composables/recipes";
@@ -65,6 +65,8 @@ export default defineComponent({
   setup(props, context) {
     const { tools, actions, workingToolData } = useTools();
 
+    const createDialog = ref(false);
+
     const recipeTools = computed({
       get: () => {
         return props.value;
@@ -75,10 +77,11 @@ export default defineComponent({
     });
 
     return {
-      workingToolData,
       actions,
-      tools,
+      createDialog,
       recipeTools,
+      tools,
+      workingToolData,
     };
   },
 });