summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2022-10-17 08:50:25 +0200
committerSanto Cariotti <santo@dcariotti.me>2022-10-17 08:50:25 +0200
commit7ab985549280ea7fa91cf5f73d2d31bcb3c07fb4 (patch)
tree2a27241b967ca67ad319be8201cf8d87787e8e27
parent8d1112146beff49d19eb025f4fa7c36353aa7872 (diff)
admin: edit user
-rw-r--r--components/VTable.vue9
-rw-r--r--pages/admin/index.vue91
2 files changed, 97 insertions, 3 deletions
diff --git a/components/VTable.vue b/components/VTable.vue
index 225c3f9..ced1016 100644
--- a/components/VTable.vue
+++ b/components/VTable.vue
@@ -51,8 +51,8 @@
a(:href="path + field.id" target="_blank")
svg(xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6")
path(stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244")
- .mr-1
- svg(xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer")
+ .mr-1(v-if="editrow")
+ svg(xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer" @click="handleEdit(field.id)")
path(stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125")
div(v-if="deleterow")
svg(xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500 cursor-pointer" @click="handleDelete(field.id)")
@@ -64,7 +64,7 @@
import UserAvatar from "@/components/UserAvatar.vue";
export default {
- props: ["keys", "fields", "path", "deleterow"],
+ props: ["keys", "fields", "path", "deleterow", "editrow"],
components: {
"user-avatar": UserAvatar,
},
@@ -78,6 +78,9 @@ export default {
handleDelete(id) {
this.deleterow(id);
},
+ handleEdit(id) {
+ this.editrow(id);
+ },
deleteAvatar(id) {
this.$store.dispatch("users/deleteAvatar", id).then((response) => {
if (response.status == 200) {
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index e08f819..08c0121 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -1,6 +1,67 @@
<template lang="pug">
.mx-auto.w-90p.py-6(class="sm:px-6 lg:px-8 md:max-w-7xl")
h1.text-3xl.font-bold(class="dark:text-white") Users
+ .relative.z-10(aria-labelledby="modal-title", role="dialog", aria-modal="true" v-if="boxEditUser > 0")
+ .fixed.inset-0.bg-gray-900.bg-opacity-90.transition-opacity
+ .fixed.inset-0.z-10.overflow-y-auto
+ .flex.min-h-full.items-end.justify-center.p-4.text-center(class="sm:items-center sm:p-0")
+ .relative.transform.overflow-hidden.rounded-lg.bg-white.text-left.shadow-xl.transition-all(class="sm:my-8 sm:w-full sm:max-w-lg")
+ h3.text-xl.font-bold.text-center.p-5 Edit user
+ form.m-3
+ .mb-5
+ label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="name") Name
+ .mt-1
+ input#name.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
+ name="name"
+ class="focus:border-green-500 focus:ring-green-500 sm:text-sm dark:bg-gray-600 dark:text-gray-50 dark:border-gray-700"
+ placeholder="John Doe"
+ v-model="form.name"
+ )
+ .mb-5
+ label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="username") Username
+ .mt-1
+ input#email.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
+ name="username"
+ class="focus:border-green-500 focus:ring-green-500 sm:text-sm dark:bg-gray-600 dark:text-gray-50 dark:border-gray-700"
+ placeholder="john"
+ v-model="form.username"
+ )
+ .mb-5
+ label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="email") Email
+ .mt-1
+ input#email.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
+ type="email"
+ name="email"
+ class="focus:border-green-500 focus:ring-green-500 sm:text-sm dark:bg-gray-600 dark:text-gray-50 dark:border-gray-700"
+ placeholder="john@example.com"
+ v-model="form.email"
+ )
+ .mb-5
+ label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="is_staff") Staffer
+ .mt-1.flow-root
+ input#is_staff.form-check-input.h-4.w-4.border.border-gray-300.rounded-sm.bg-white.transition.duration-200.mt-1.align-top.bg-no-repeat.bg-center.bg-contain.float-left.mr-2.cursor-pointer(
+ class="checked:bg-blue-600 checked:border-blue-600 focus:outline-none"
+ type="checkbox" name="is_staff" v-model="form.is_staff"
+ )
+
+ .bg-gray-50.px-4.py-3(class="sm:flex sm:flex-row-reverse sm:px-6")
+ button.inline-flex.w-full.justify-center.rounded-md.border.border-transparent.bg-green-600.px-4.py-2.text-base.font-medium.text-white.shadow-sm(
+ type="button"
+ :class="{'hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm': true, 'opacity-25 cursor-default': isLoading}"
+ :disabled="isLoading"
+ :readonly="isLoading"
+ @click="saveUser"
+ )
+ <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" v-if="isLoading">
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+ </svg>
+ | Save
+ button.mt-3.inline-flex.w-full.justify-center.rounded-md.border.border-gray-300.bg-white.px-4.py-2.text-base.font-medium.text-gray-700.shadow-sm(
+ type="button"
+ class="hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+ @click="boxEditUser = 0"
+ ) Cancel
.grid.grid-cols-6.mt-3
div
admin-sidebar
@@ -9,6 +70,7 @@
:keys="['id', 'avatar', 'username', 'email', 'is_staff', 'name']"
:fields="users"
path="/users/"
+ :editrow="openEditModal"
)
pagination(:page="page" :pages="pages" v-if="count" path="/admin")
</template>
@@ -24,6 +86,7 @@ export default {
name: "AdminView",
head: { title: "Admin panel ยท Verden" },
computed: {
+ ...mapGetters(["isLoading"]),
...mapGetters("auth", ["isLogged", "me"]),
...mapGetters("users", ["users", "count"]),
},
@@ -31,6 +94,8 @@ export default {
return {
page: 0,
pages: 0,
+ boxEditUser: 0,
+ form: {},
};
},
components: {
@@ -50,5 +115,31 @@ export default {
this.pages = Math.ceil(this.count / 20);
});
},
+ methods: {
+ openEditModal(id) {
+ this.$store.dispatch("users/findById", id).then((response) => {
+ this.boxEditUser = id;
+ this.form = response.data;
+ });
+ },
+ saveUser(event) {
+ const f = this.form;
+
+ if (f.username && f.email) {
+ this.$store.dispatch("users/editUser", f).then((response) => {
+ if (response.status == 200) {
+ this.$toast.success("User has been saved");
+
+ this.$store.dispatch("users/getUsers", this.page).then(() => {
+ this.pages = Math.ceil(this.count / 20);
+ });
+ } else {
+ this.$toast.error(response.data.error);
+ }
+ });
+ }
+ event.preventDefault();
+ },
+ },
};
</script>