mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
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>
This commit is contained in:
Hayden
GitHub
parent
0db8a58963
commit
791aa8c610
52 changed files with 881 additions and 331 deletions
96
frontend/pages/admin/manage/groups/_id.vue
Normal file
96
frontend/pages/admin/manage/groups/_id.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -1,23 +1,36 @@
|
|||
// 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">
|
||||
<BaseDialog
|
||||
ref="refUserDialog"
|
||||
top
|
||||
:title="$t('group.create-group')"
|
||||
@submit="createGroup(createUserForm.data)"
|
||||
>
|
||||
<template #activator="{ open }">
|
||||
<BaseButton @click="open"> {{ $t("group.create-group") }} </BaseButton>
|
||||
</template>
|
||||
<v-card-text>
|
||||
<AutoForm v-model="createUserForm.data" :update-mode="updateMode" :items="createUserForm.items" />
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<BaseButton @click="openDialog"> {{ $t("general.create") }} </BaseButton>
|
||||
</v-toolbar>
|
||||
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="groups || []"
|
||||
|
|
@ -26,10 +39,8 @@
|
|||
hide-default-footer
|
||||
disable-pagination
|
||||
:search="search"
|
||||
@click:row="handleRowClick"
|
||||
>
|
||||
<template #item.mealplans="{ item }">
|
||||
{{ item.mealplans.length }}
|
||||
</template>
|
||||
<template #item.shoppingLists="{ item }">
|
||||
{{ item.shoppingLists.length }}
|
||||
</template>
|
||||
|
|
@ -37,28 +48,23 @@
|
|||
{{ item.users.length }}
|
||||
</template>
|
||||
<template #item.webhookEnable="{ item }">
|
||||
{{ item.webhookEnabled ? $t("general.yes") : $t("general.no") }}
|
||||
{{ item.webhooks.length > 0 ? $t("general.yes") : $t("general.no") }}
|
||||
</template>
|
||||
<template #item.actions="{ item }">
|
||||
<BaseDialog :title="$t('general.confirm')" color="error" @confirm="deleteGroup(item.id)">
|
||||
<template #activator="{ open }">
|
||||
<v-btn :disabled="item && item.users.length > 0" class="mr-1" small color="error" @click="open">
|
||||
<v-icon small left>
|
||||
{{ $globals.icons.delete }}
|
||||
</v-icon>
|
||||
{{ $t("general.delete") }}
|
||||
</v-btn>
|
||||
<v-btn small color="success" @click="updateUser(item)">
|
||||
<v-icon small left class="mr-2">
|
||||
{{ $globals.icons.edit }}
|
||||
</v-icon>
|
||||
{{ $t("general.edit") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<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>
|
||||
|
|
@ -67,7 +73,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
|
||||
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";
|
||||
|
||||
|
|
@ -78,6 +85,9 @@ export default defineComponent({
|
|||
const { groups, refreshAllGroups, deleteGroup, createGroup } = useGroups();
|
||||
|
||||
const state = reactive({
|
||||
createDialog: false,
|
||||
confirmDialog: false,
|
||||
deleteTarget: 0,
|
||||
search: "",
|
||||
headers: [
|
||||
{
|
||||
|
|
@ -89,9 +99,8 @@ export default defineComponent({
|
|||
{ 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("user.total-mealplans"), value: "mealplans" },
|
||||
{ text: i18n.t("shopping-list.shopping-lists"), value: "shoppingLists" },
|
||||
{ value: "actions" },
|
||||
{ text: i18n.t("general.delete"), value: "actions" },
|
||||
],
|
||||
updateMode: false,
|
||||
createUserForm: {
|
||||
|
|
@ -109,7 +118,18 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
|
||||
return { ...toRefs(state), groups, refreshAllGroups, deleteGroup, createGroup };
|
||||
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 {
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
</v-card-text>
|
||||
</v-card>
|
||||
<div class="d-flex pa-2">
|
||||
<BaseButton type="submit" class="ml-auto"></BaseButton>
|
||||
<BaseButton type="submit" edit class="ml-auto"> {{ $t("general.update") }}</BaseButton>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-container>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
// TODO: Edit User
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<BaseDialog v-model="deleteDialog" :title="$t('general.confirm')" color="error" @confirm="deleteUser(deleteTarget)">
|
||||
<template #activator> </template>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BaseCardSectionTitle title="User Management"> </BaseCardSectionTitle>
|
||||
<section>
|
||||
<v-toolbar color="background" flat class="justify-between">
|
||||
|
|
@ -25,18 +31,19 @@
|
|||
</v-icon>
|
||||
</template>
|
||||
<template #item.actions="{ item }">
|
||||
<BaseDialog :title="$t('general.confirm')" color="error" @confirm="deleteUser(item.id)">
|
||||
<template #activator="{ open }">
|
||||
<v-btn icon :disabled="item.id == 1" color="error" @click.stop="open">
|
||||
<v-icon>
|
||||
{{ $globals.icons.delete }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<v-btn
|
||||
icon
|
||||
:disabled="item.id == 1"
|
||||
color="error"
|
||||
@click.stop="
|
||||
deleteDialog = true;
|
||||
deleteTarget = item.id;
|
||||
"
|
||||
>
|
||||
<v-icon>
|
||||
{{ $globals.icons.delete }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<v-divider></v-divider>
|
||||
|
|
@ -61,6 +68,8 @@ export default defineComponent({
|
|||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
deleteDialog: false,
|
||||
deleteTarget: 0,
|
||||
search: "",
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue