mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
refactor(frontend): 🚧 Add group/user CRUD support for admins
This commit is contained in:
hay-kot
parent
917177da5b
commit
695d7e96ae
46 changed files with 2015 additions and 102 deletions
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<v-container fluid>
|
||||
<BaseCardSectionTitle title="About Mealie"> </BaseCardSectionTitle>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,113 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<v-container class="mt-10">
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="4">
|
||||
<BaseStatCard :icon="$globals.icons.primary">
|
||||
<template #after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<h2 class="body-3 grey--text font-weight-light">
|
||||
{{ $t("general.recipes") }}
|
||||
</h2>
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ statistics.totalRecipes }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<div class="d-flex row py-2 justify-end">
|
||||
<v-btn class="ma-1" small color="primary" to="/admin/toolbox/organize">
|
||||
<v-icon left> {{ $globals.icons.tags }} </v-icon>
|
||||
{{ $tc("tag.untagged-count", [statistics.untaggedRecipes]) }}
|
||||
</v-btn>
|
||||
<v-btn class="ma-1" small color="primary" to="/admin/toolbox/organize">
|
||||
<v-icon left> {{ $globals.icons.tags }} </v-icon>
|
||||
{{ $tc("category.uncategorized-count", [statistics.uncategorizedRecipes]) }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</BaseStatCard>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="4">
|
||||
<BaseStatCard :icon="$globals.icons.user">
|
||||
<template #after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<h2 class="body-3 grey--text font-weight-light">
|
||||
{{ $t("user.users") }}
|
||||
</h2>
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ statistics.totalUsers }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<div class="ml-auto">
|
||||
<v-btn color="primary" small to="/admin/manage-users/all-users">
|
||||
<v-icon left>{{ $globals.icons.user }}</v-icon>
|
||||
{{ $t("user.manage-users") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</BaseStatCard>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="4">
|
||||
<BaseStatCard :icon="$globals.icons.group">
|
||||
<template #after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<h2 class="body-3 grey--text font-weight-light">
|
||||
{{ $t("group.groups") }}
|
||||
</h2>
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ statistics.totalGroups }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<div class="ml-auto">
|
||||
<v-btn color="primary" small to="/admin/manage-users/all-groups">
|
||||
<v-icon left>{{ $globals.icons.group }}</v-icon>
|
||||
{{ $t("group.manage-groups") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</BaseStatCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="mt-10" align-content="stretch">
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<AdminEventViewer />
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<AdminBackupViewer />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import AdminEventViewer from "@/components/Domain/Admin/AdminEventViewer.vue";
|
||||
import AdminBackupViewer from "@/components/Domain/Admin/AdminBackupViewer.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { AdminEventViewer, AdminBackupViewer },
|
||||
layout: "admin",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statistics: {
|
||||
totalGroups: 0,
|
||||
totalRecipes: 0,
|
||||
totalUsers: 0,
|
||||
uncategorizedRecipes: 0,
|
||||
untaggedRecipes: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
122
frontend/pages/admin/manage-users/all-groups.vue
Normal file
122
frontend/pages/admin/manage-users/all-groups.vue
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
// TODO: Add Loading Indicator...Maybe?
|
||||
// TODO: Edit Group
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<BaseCardSectionTitle title="Group Management"> </BaseCardSectionTitle>
|
||||
<section>
|
||||
<v-toolbar flat 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 } from "@nuxtjs/composition-api";
|
||||
import { fieldTypes } from "~/composables/forms";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
import { useGroups } from "~/composables/use-groups";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
const api = useApiSingleton();
|
||||
|
||||
const { groups, refreshAllGroups, deleteGroup, createGroup } = useGroups();
|
||||
|
||||
return { api, groups, refreshAllGroups, deleteGroup, createGroup };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: "",
|
||||
headers: [
|
||||
{
|
||||
text: this.$t("group.group"),
|
||||
align: "start",
|
||||
sortable: false,
|
||||
value: "id",
|
||||
},
|
||||
{ text: this.$t("general.name"), value: "name" },
|
||||
{ text: this.$t("user.total-users"), value: "users" },
|
||||
{ text: this.$t("user.webhooks-enabled"), value: "webhookEnable" },
|
||||
{ text: this.$t("user.total-mealplans"), value: "mealplans" },
|
||||
{ text: this.$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: "",
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
178
frontend/pages/admin/manage-users/all-users.vue
Normal file
178
frontend/pages/admin/manage-users/all-users.vue
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
// TODO: Edit User
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<BaseCardSectionTitle title="User Management"> </BaseCardSectionTitle>
|
||||
<section>
|
||||
<v-toolbar flat class="justify-between">
|
||||
<BaseDialog
|
||||
ref="refUserDialog"
|
||||
top
|
||||
:title="$t('user.create-user')"
|
||||
@submit="createUser(createUserForm.data)"
|
||||
@close="resetForm"
|
||||
>
|
||||
<template #activator="{ open }">
|
||||
<BaseButton @click="open"> {{ $t("user.create-user") }} </BaseButton>
|
||||
</template>
|
||||
<v-card-text>
|
||||
<v-select
|
||||
v-model="createUserForm.data.group"
|
||||
:items="groups"
|
||||
rounded
|
||||
class="rounded-lg"
|
||||
item-text="name"
|
||||
item-value="name"
|
||||
:return-object="false"
|
||||
filled
|
||||
label="Filled style"
|
||||
></v-select>
|
||||
<AutoForm v-model="createUserForm.data" :update-mode="updateMode" :items="createUserForm.items" />
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
</v-toolbar>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="users || []"
|
||||
item-key="id"
|
||||
class="elevation-0"
|
||||
hide-default-footer
|
||||
disable-pagination
|
||||
:search="search"
|
||||
>
|
||||
<template #item.admin="{ item }">
|
||||
{{ item.admin ? "Admin" : "User" }}
|
||||
</template>
|
||||
<template #item.actions="{ item }">
|
||||
<BaseDialog :title="$t('general.confirm')" color="error" @confirm="deleteUser(item.id)">
|
||||
<template #activator="{ open }">
|
||||
<v-btn :disabled="item.id == 1" 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, ref } from "@nuxtjs/composition-api";
|
||||
import { fieldTypes } from "~/composables/forms";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
import { useGroups } from "~/composables/use-groups";
|
||||
import { useUser, useAllUsers } from "~/composables/use-user";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
const api = useApiSingleton();
|
||||
const refUserDialog = ref();
|
||||
|
||||
const { groups } = useGroups();
|
||||
|
||||
const { users, refreshAllUsers } = useAllUsers();
|
||||
const { loading, getUser, deleteUser, createUser } = useUser(refreshAllUsers);
|
||||
|
||||
return { refUserDialog, api, users, deleteUser, createUser, getUser, loading, groups };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: "",
|
||||
headers: [
|
||||
{
|
||||
text: this.$t("user.user-id"),
|
||||
align: "start",
|
||||
sortable: false,
|
||||
value: "id",
|
||||
},
|
||||
{ text: this.$t("user.username"), value: "username" },
|
||||
{ text: this.$t("user.full-name"), value: "fullName" },
|
||||
{ text: this.$t("user.email"), value: "email" },
|
||||
{ text: this.$t("group.group"), value: "group" },
|
||||
{ text: this.$t("user.admin"), value: "admin" },
|
||||
{ text: "", value: "actions", sortable: false, align: "center" },
|
||||
],
|
||||
updateMode: false,
|
||||
createUserForm: {
|
||||
items: [
|
||||
{
|
||||
label: "User Name",
|
||||
varName: "username",
|
||||
type: fieldTypes.TEXT,
|
||||
rules: ["required"],
|
||||
},
|
||||
{
|
||||
label: "Full Name",
|
||||
varName: "fullName",
|
||||
type: fieldTypes.TEXT,
|
||||
rules: ["required"],
|
||||
},
|
||||
{
|
||||
label: "Email",
|
||||
varName: "email",
|
||||
type: fieldTypes.TEXT,
|
||||
rules: ["required"],
|
||||
},
|
||||
{
|
||||
label: "Passord",
|
||||
varName: "password",
|
||||
fixed: true,
|
||||
type: fieldTypes.TEXT,
|
||||
rules: ["required"],
|
||||
},
|
||||
{
|
||||
label: "Administrator",
|
||||
varName: "admin",
|
||||
type: fieldTypes.BOOLEAN,
|
||||
rules: ["required"],
|
||||
},
|
||||
],
|
||||
data: {
|
||||
username: "",
|
||||
fullName: "",
|
||||
email: "",
|
||||
admin: false,
|
||||
group: "",
|
||||
favoriteRecipes: [],
|
||||
password: "",
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateUser(userData: any) {
|
||||
this.updateMode = true;
|
||||
this.createUserForm.data = userData;
|
||||
this.refUserDialog.open();
|
||||
},
|
||||
resetForm() {
|
||||
this.createUserForm.data = {
|
||||
username: "",
|
||||
fullName: "",
|
||||
email: "",
|
||||
admin: false,
|
||||
group: "",
|
||||
favoriteRecipes: [],
|
||||
password: "",
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -1,7 +1,14 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<v-container fluid>
|
||||
<BaseCardSectionTitle title="Data Migrations">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias error provident, eveniet, laboriosam assumenda
|
||||
earum amet quaerat vel consequatur molestias sed enim. Adipisci a consequuntur dolor culpa expedita voluptatem
|
||||
praesentium optio iste atque, ea reiciendis iure non aut suscipit modi ducimus ratione, quam numquam quaerat
|
||||
distinctio illum nemo. Dicta, doloremque!
|
||||
</BaseCardSectionTitle>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
|
|
@ -12,6 +19,6 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -1,7 +1,14 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<v-container fluid>
|
||||
<BaseCardSectionTitle title="Sitewide Settings">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias error provident, eveniet, laboriosam assumenda
|
||||
earum amet quaerat vel consequatur molestias sed enim. Adipisci a consequuntur dolor culpa expedita voluptatem
|
||||
praesentium optio iste atque, ea reiciendis iure non aut suscipit modi ducimus ratione, quam numquam quaerat
|
||||
distinctio illum nemo. Dicta, doloremque!
|
||||
</BaseCardSectionTitle>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
|
|
@ -12,6 +19,6 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
19
frontend/pages/admin/toolbox/categories.vue
Normal file
19
frontend/pages/admin/toolbox/categories.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<BaseCardSectionTitle title="Manage Categories"> </BaseCardSectionTitle>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
21
frontend/pages/admin/toolbox/notifications.vue
Normal file
21
frontend/pages/admin/toolbox/notifications.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<BaseCardSectionTitle title="Event Notifications">
|
||||
{{ $t("events.new-notification-form-description") }}
|
||||
</BaseCardSectionTitle>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<v-container fluid>
|
||||
<BaseCardSectionTitle title="Organize Recipes"> </BaseCardSectionTitle>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
|
|
@ -12,6 +14,6 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<v-container fluid>
|
||||
<BaseCardSectionTitle title="Manage Tags"> </BaseCardSectionTitle>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
|
|
@ -12,6 +14,6 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue