mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
refactor: ♻️ rewrite admin CRUD interface for admins (#825)
* docs: 📝 general documentation + add FAQ page * fix(frontend): 🐛 readd missing upload button to backups. * feat(backend): ✨ add support for backup sizes to be displayed on frontend * feat(backend): ✨ add backend for administrator CRUD of users * add admin support for user * refactor(frontend): ♻️ rewrite admin CRUD interface for admins * fix build errors Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden
GitHub
parent
7afdd5b577
commit
dce84c3937
32 changed files with 657 additions and 563 deletions
120
frontend/pages/admin/manage/group/index.vue
Normal file
120
frontend/pages/admin/manage/group/index.vue
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
// TODO: Edit Group
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<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>
|
||||
</v-toolbar>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="groups || []"
|
||||
item-key="id"
|
||||
class="elevation-0"
|
||||
hide-default-footer
|
||||
disable-pagination
|
||||
:search="search"
|
||||
>
|
||||
<template #item.mealplans="{ item }">
|
||||
{{ item.mealplans.length }}
|
||||
</template>
|
||||
<template #item.shoppingLists="{ item }">
|
||||
{{ item.shoppingLists.length }}
|
||||
</template>
|
||||
<template #item.users="{ item }">
|
||||
{{ item.users.length }}
|
||||
</template>
|
||||
<template #item.webhookEnable="{ item }">
|
||||
{{ item.webhookEnabled ? $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>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<v-divider></v-divider>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
|
||||
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({
|
||||
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("user.total-mealplans"), value: "mealplans" },
|
||||
{ text: i18n.t("shopping-list.shopping-lists"), value: "shoppingLists" },
|
||||
{ value: "actions" },
|
||||
],
|
||||
updateMode: false,
|
||||
createUserForm: {
|
||||
items: [
|
||||
{
|
||||
label: "Group Name",
|
||||
varName: "name",
|
||||
type: fieldTypes.TEXT,
|
||||
rules: ["required"],
|
||||
},
|
||||
],
|
||||
data: {
|
||||
name: "",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return { ...toRefs(state), groups, refreshAllGroups, deleteGroup, createGroup };
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("group.manage-groups") as string,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
117
frontend/pages/admin/manage/users/_id.vue
Normal file
117
frontend/pages/admin/manage/users/_id.vue
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<v-container v-if="user" class="narrow-container">
|
||||
<BasePageTitle>
|
||||
<template #header>
|
||||
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-profile.svg')"></v-img>
|
||||
</template>
|
||||
<template #title> Admin User Management </template>
|
||||
Changes to this user will be reflected immediately.
|
||||
</BasePageTitle>
|
||||
<AppToolbar back> </AppToolbar>
|
||||
<v-form v-if="!userError" ref="refNewUserForm" @submit.prevent="handleSubmit">
|
||||
<v-card outlined>
|
||||
<v-card-text>
|
||||
<div class="d-flex">
|
||||
<p>User Id: {{ user.id }}</p>
|
||||
</div>
|
||||
<v-select
|
||||
v-if="groups"
|
||||
v-model="user.group"
|
||||
:items="groups"
|
||||
rounded
|
||||
class="rounded-lg"
|
||||
item-text="name"
|
||||
item-value="name"
|
||||
:return-object="false"
|
||||
filled
|
||||
label="User Group"
|
||||
:rules="[validators.required]"
|
||||
></v-select>
|
||||
<AutoForm v-model="user" :items="userForm" update-mode />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<div class="d-flex pa-2">
|
||||
<BaseButton type="submit" class="ml-auto"></BaseButton>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, useRoute, onMounted, ref } from "@nuxtjs/composition-api";
|
||||
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({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
const { userForm } = useUserForm();
|
||||
const { groups } = useGroups();
|
||||
const route = useRoute();
|
||||
|
||||
const userId = route.value.params.id;
|
||||
|
||||
// ==============================================
|
||||
// New User Form
|
||||
|
||||
const refNewUserForm = ref<VForm | null>(null);
|
||||
|
||||
const adminApi = useAdminApi();
|
||||
|
||||
const user = ref({
|
||||
username: "",
|
||||
fullName: "",
|
||||
email: "",
|
||||
admin: false,
|
||||
group: "",
|
||||
advanced: false,
|
||||
canInvite: false,
|
||||
canManage: false,
|
||||
canOrganize: false,
|
||||
id: 0,
|
||||
groupId: 0,
|
||||
});
|
||||
|
||||
const userError = ref(false);
|
||||
|
||||
onMounted(async () => {
|
||||
const { data, error } = await adminApi.users.getOne(userId);
|
||||
|
||||
if (error?.response?.status === 404) {
|
||||
alert.error("User Not Found");
|
||||
userError.value = true;
|
||||
}
|
||||
|
||||
if (data) {
|
||||
// @ts-ignore
|
||||
user.value = data;
|
||||
}
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!refNewUserForm.value?.validate()) return;
|
||||
|
||||
// @ts-ignore
|
||||
const { response, data } = await adminApi.users.updateOne(user.value.id, user.value);
|
||||
|
||||
if (response?.status === 200 && data) {
|
||||
// @ts-ignore
|
||||
user.value = data;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
userError,
|
||||
userForm,
|
||||
refNewUserForm,
|
||||
handleSubmit,
|
||||
groups,
|
||||
validators,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
96
frontend/pages/admin/manage/users/create.vue
Normal file
96
frontend/pages/admin/manage/users/create.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<v-container class="narrow-container">
|
||||
<BasePageTitle class="mb-2">
|
||||
<template #header>
|
||||
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-profile.svg')"></v-img>
|
||||
</template>
|
||||
<template #title> Admin User Creation </template>
|
||||
</BasePageTitle>
|
||||
<AppToolbar back> </AppToolbar>
|
||||
<v-form ref="refNewUserForm" @submit.prevent="handleSubmit">
|
||||
<v-card outlined>
|
||||
<v-card-text>
|
||||
<v-select
|
||||
v-if="groups"
|
||||
v-model="newUserData.group"
|
||||
:items="groups"
|
||||
rounded
|
||||
class="rounded-lg"
|
||||
item-text="name"
|
||||
item-value="name"
|
||||
:return-object="false"
|
||||
filled
|
||||
label="User Group"
|
||||
:rules="[validators.required]"
|
||||
></v-select>
|
||||
<AutoForm v-model="newUserData" :items="userForm" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<div class="d-flex pa-2">
|
||||
<BaseButton type="submit" class="ml-auto"></BaseButton>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, useRouter } from "@nuxtjs/composition-api";
|
||||
import { reactive, ref, toRefs } from "vue-demi";
|
||||
import { useAdminApi } from "~/composables/api";
|
||||
import { useGroups } from "~/composables/use-groups";
|
||||
import { useUserForm } from "~/composables/use-users";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
const { userForm } = useUserForm();
|
||||
const { groups } = useGroups();
|
||||
const router = useRouter();
|
||||
|
||||
// ==============================================
|
||||
// New User Form
|
||||
|
||||
const refNewUserForm = ref<VForm | null>(null);
|
||||
|
||||
const adminApi = useAdminApi();
|
||||
|
||||
const state = reactive({
|
||||
newUserData: {
|
||||
username: "",
|
||||
fullName: "",
|
||||
email: "",
|
||||
admin: false,
|
||||
group: "",
|
||||
advanced: false,
|
||||
canInvite: false,
|
||||
canManage: false,
|
||||
canOrganize: false,
|
||||
password: "",
|
||||
},
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!refNewUserForm.value?.validate()) return;
|
||||
|
||||
const { response } = await adminApi.users.createOne(state.newUserData);
|
||||
|
||||
if (response?.status === 201) {
|
||||
router.push("/admin/manage/users");
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
userForm,
|
||||
refNewUserForm,
|
||||
handleSubmit,
|
||||
groups,
|
||||
validators,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
108
frontend/pages/admin/manage/users/index.vue
Normal file
108
frontend/pages/admin/manage/users/index.vue
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
// TODO: Edit User
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<BaseCardSectionTitle title="User Management"> </BaseCardSectionTitle>
|
||||
<section>
|
||||
<v-toolbar color="background" flat class="justify-between">
|
||||
<BaseButton to="/admin/manage/users/create">
|
||||
{{ $t("general.create") }}
|
||||
</BaseButton>
|
||||
</v-toolbar>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="users || []"
|
||||
item-key="id"
|
||||
class="elevation-0"
|
||||
elevation="0"
|
||||
hide-default-footer
|
||||
disable-pagination
|
||||
:search="search"
|
||||
@click:row="handleRowClick"
|
||||
>
|
||||
<template #item.admin="{ item }">
|
||||
<v-icon right :color="item.admin ? 'success' : null">
|
||||
{{ item.admin ? $globals.icons.checkboxMarkedCircle : $globals.icons.windowClose }}
|
||||
</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>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<v-divider></v-divider>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useUser, useAllUsers } from "~/composables/use-user";
|
||||
import { UserOut } from "~/types/api-types/user";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
const api = useUserApi();
|
||||
const refUserDialog = ref();
|
||||
|
||||
const { i18n } = useContext();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
search: "",
|
||||
});
|
||||
|
||||
const { users, refreshAllUsers } = useAllUsers();
|
||||
const { loading, deleteUser } = useUser(refreshAllUsers);
|
||||
|
||||
function handleRowClick(item: UserOut) {
|
||||
router.push("/admin/manage/users/" + item.id);
|
||||
}
|
||||
|
||||
// ==========================================================
|
||||
// Constants / Non-reactive
|
||||
|
||||
const headers = [
|
||||
{
|
||||
text: i18n.t("user.user-id"),
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
{ text: i18n.t("user.username"), value: "username" },
|
||||
{ text: i18n.t("user.full-name"), value: "fullName" },
|
||||
{ text: i18n.t("user.email"), value: "email" },
|
||||
{ text: i18n.t("group.group"), value: "group" },
|
||||
{ text: i18n.t("user.admin"), value: "admin" },
|
||||
{ text: i18n.t("general.delete"), value: "actions", sortable: false, align: "center" },
|
||||
];
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
api,
|
||||
headers,
|
||||
deleteUser,
|
||||
loading,
|
||||
refUserDialog,
|
||||
users,
|
||||
handleRowClick,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("sidebar.manage-users") as string,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue