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/pages/admin/manage/groups/_id.vue

@@ -0,0 +1,96 @@
+<template>
+  <v-container v-if="group" class="narrow-container">
+    <BasePageTitle>
+      <template #header>
+        <v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-group-settings.svg')"></v-img>
+      </template>
+      <template #title> Admin Group Management </template>
+      Changes to this group will be reflected immediately.
+    </BasePageTitle>
+    <AppToolbar back> </AppToolbar>
+    <v-card-text> Group Id: {{ group.id }} </v-card-text>
+    <v-form v-if="!userError" ref="refGroupEditForm" @submit.prevent="handleSubmit">
+      <v-card outlined>
+        <v-card-text>
+          <v-text-field v-model="group.name" label="Group Name"> </v-text-field>
+          <GroupPreferencesEditor v-if="group.preferences" v-model="group.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-form>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, useRoute, onMounted, ref } from "@nuxtjs/composition-api";
+import GroupPreferencesEditor from "~/components/Domain/Group/GroupPreferencesEditor.vue";
+import { useAdminApi } from "~/composables/api";
+import { useGroups } from "~/composables/use-groups";
+import { alert } from "~/composables/use-toast";
+import { useUserForm } from "~/composables/use-users";
+import { validators } from "~/composables/use-validators";
+
+export default defineComponent({
+  components: {
+    GroupPreferencesEditor,
+  },
+  layout: "admin",
+  setup() {
+    const { userForm } = useUserForm();
+    const { groups } = useGroups();
+    const route = useRoute();
+
+    const groupId = route.value.params.id;
+
+    // ==============================================
+    // New User Form
+
+    const refGroupEditForm = ref<VForm | null>(null);
+
+    const adminApi = useAdminApi();
+
+    const group = ref({});
+
+    const userError = ref(false);
+
+    onMounted(async () => {
+      const { data, error } = await adminApi.groups.getOne(groupId);
+
+      if (error?.response?.status === 404) {
+        alert.error("User Not Found");
+        userError.value = true;
+      }
+
+      if (data) {
+        // @ts-ignore
+        group.value = data;
+      }
+    });
+
+    async function handleSubmit() {
+      if (!refGroupEditForm.value?.validate()) {
+        return;
+      }
+
+      // @ts-ignore
+      const { response, data } = await adminApi.groups.updateOne(group.value.id, group.value);
+      if (response?.status === 200 && data) {
+        // @ts-ignore
+        group.value = data;
+      }
+    }
+
+    return {
+      group,
+      userError,
+      userForm,
+      refGroupEditForm,
+      handleSubmit,
+      groups,
+      validators,
+    };
+  },
+});
+</script>

frontend/pages/admin/manage/groups/index.vue

@@ -0,0 +1,140 @@
+// TODO: Edit Group
+<template>
+  <v-container fluid>
+    <BaseDialog
+      v-model="createDialog"
+      :title="$t('group.create-group')"
+      :icon="$globals.icons.group"
+      @submit="createGroup(createUserForm.data)"
+    >
+      <template #activator> </template>
+      <v-card-text>
+        <AutoForm v-model="createUserForm.data" :update-mode="updateMode" :items="createUserForm.items" />
+      </v-card-text>
+    </BaseDialog>
+
+    <BaseDialog
+      v-model="confirmDialog"
+      :title="$t('general.confirm')"
+      color="error"
+      @confirm="deleteGroup(deleteTarget)"
+    >
+      <template #activator> </template>
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
+
+    <BaseCardSectionTitle title="Group Management"> </BaseCardSectionTitle>
+    <section>
+      <v-toolbar flat color="background" class="justify-between">
+        <BaseButton @click="openDialog"> {{ $t("general.create") }} </BaseButton>
+      </v-toolbar>
+
+      <v-data-table
+        :headers="headers"
+        :items="groups || []"
+        item-key="id"
+        class="elevation-0"
+        hide-default-footer
+        disable-pagination
+        :search="search"
+        @click:row="handleRowClick"
+      >
+        <template #item.shoppingLists="{ item }">
+          {{ item.shoppingLists.length }}
+        </template>
+        <template #item.users="{ item }">
+          {{ item.users.length }}
+        </template>
+        <template #item.webhookEnable="{ item }">
+          {{ item.webhooks.length > 0 ? $t("general.yes") : $t("general.no") }}
+        </template>
+        <template #item.actions="{ item }">
+          <v-btn
+            :disabled="item && item.users.length > 0"
+            class="mr-1"
+            icon
+            color="error"
+            @click.stop="
+              confirmDialog = true;
+              deleteTarget = item.id;
+            "
+          >
+            <v-icon>
+              {{ $globals.icons.delete }}
+            </v-icon>
+          </v-btn>
+        </template>
+      </v-data-table>
+      <v-divider></v-divider>
+    </section>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
+import { Group } from "~/api/class-interfaces/groups";
+import { fieldTypes } from "~/composables/forms";
+import { useGroups } from "~/composables/use-groups";
+
+export default defineComponent({
+  layout: "admin",
+  setup() {
+    const { i18n } = useContext();
+    const { groups, refreshAllGroups, deleteGroup, createGroup } = useGroups();
+
+    const state = reactive({
+      createDialog: false,
+      confirmDialog: false,
+      deleteTarget: 0,
+      search: "",
+      headers: [
+        {
+          text: i18n.t("group.group"),
+          align: "start",
+          sortable: false,
+          value: "id",
+        },
+        { text: i18n.t("general.name"), value: "name" },
+        { text: i18n.t("user.total-users"), value: "users" },
+        { text: i18n.t("user.webhooks-enabled"), value: "webhookEnable" },
+        { text: i18n.t("shopping-list.shopping-lists"), value: "shoppingLists" },
+        { text: i18n.t("general.delete"), value: "actions" },
+      ],
+      updateMode: false,
+      createUserForm: {
+        items: [
+          {
+            label: "Group Name",
+            varName: "name",
+            type: fieldTypes.TEXT,
+            rules: ["required"],
+          },
+        ],
+        data: {
+          name: "",
+        },
+      },
+    });
+
+    function openDialog() {
+      state.createDialog = true;
+      state.createUserForm.data.name = "";
+    }
+
+    const router = useRouter();
+
+    function handleRowClick(item: Group) {
+      router.push("/admin/manage/groups/" + item.id);
+    }
+
+    return { ...toRefs(state), groups, refreshAllGroups, deleteGroup, createGroup, openDialog, handleRowClick };
+  },
+  head() {
+    return {
+      title: this.$t("group.manage-groups") as string,
+    };
+  },
+});
+</script>