Skip to content
Snippets Groups Projects
Commit beb5a9d6 authored by moon's avatar moon
Browse files

Close #50: Add EditUser component

parent 8882675a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web/src/components/UserTable.vue
+ 7
− 3
View file @ beb5a9d6
<template>
<div class="flex items-center justify-center panel-table w-full md:w-auto pt-10">
<table :id=id class="table table-striped table-bordered table-hover" width="100%"></table>
<table :id=id class="table table-striped table-bordered table-hover"></table>
</div>
</template>
......@@ -14,7 +14,11 @@ export default {
name: 'user-table',
props: ['id', 'data'],
methods:{
createTable(id, data) {
editUser(id) {
// eslint-disable-next-line
this.$router.push('/updateuser/' + id)
},
createTable(id, data) {
const vm = this;
......@@ -92,7 +96,7 @@ export default {
e.preventDefault()
const tr = $(e.target).parent().parent();
const row = table.row(tr);
// vm.editUpdateItem(row.data().id);
vm.editUser(row.data().id);
});
},
},
......
web/src/router/index.js
+ 5
− 0
View file @ beb5a9d6
......@@ -101,6 +101,11 @@ export default new Router({
name: 'updateItem',
component: () => import('@/views/UpdateItem'),
},
{
path: '/updateuser/:user',
name: 'updateUser',
component: () => import('@/views/UpdateUser'),
},
// { path: '/user/:id', component: User },
// {
// path: '*',
......
web/src/views/UpdateUser.vue 0 → 100644
+ 292
− 0
View file @ beb5a9d6
<template>
<div>
<h3 v-show="error" class="flex items-center justify-center text-2xl text-red-500">{{ errorMsg }}</h3>
<div class="flex items-center justify-center">
<div v-if="loaded" class="md:flex card p-2 mt-5">
<div class="p-5 mx-auto text-left font-raleway container max-w-screen-md">
<h1 class="font-bold text-left font-montserrat text-3xl sm:text-5xl mb-7">
{{ user }}
</h1>
<form @submit="update" class="w-full md:w-auto">
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-entity-type">
Username
</label>
</div>
<div class="md:w-2/3">
<p class="mt-3">
{{username}}
</p>
</div>
</div>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-entity-id">
Email
</label>
</div>
<div class="md:w-2/3">
<p class="mt-3">
{{email}}
</p>
</div>
</div>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-change-operation">
Role
</label>
</div>
<div class="md:w-2/3">
<select v-model="role" class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-change-operation" >
<option v-for="option in roles" v-bind:key="option.id" :selected="role.name === option.name" :disabled="option.name === 'Administrator' || option.name === 'Public'" v-bind:value="{ id: option.id, name: option.name }">
{{ option.name }}
</option>
</select>
</div>
</div>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-status">
Affiliation
</label>
</div>
<div class="md:w-2/3">
<p class="mt-3">
{{Affiliation}}
</p>
</div>
</div>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-status">
Profile Link
</label>
</div>
<div class="md:w-2/3">
<p class="mt-3">
{{ProfileLink}}
</p>
</div>
</div>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-status">
Status
</label>
</div>
<div class="md:w-2/3">
<p class="mt-3">
<input type="checkbox" id="confirmed_checkbox" v-model="confirmed" disabled>
<label class="ml-3" for="confirmed_checkbox">Authenticated</label>
</p>
<p class="mt-3">
<input type="checkbox" id="blocked_checkbox" v-model="blocked">
<label class="ml-3" for="blocked_checkbox">Blocked</label>
</p>
</div>
</div>
<button type="submit" :disabled="role.length < 3" class="bg-green-400 p-5 text-white">
{{ 'Update' }} <span class="fa fa-arrow-right"/>
</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
const _ = require('lodash');
let host = require('@/components/js/const').apiHost;
export default {
name: 'UpdateUser',
props: ['userId'],
data() {
return {
user: this.$route.params.user ? this.$route.params.user : this.userId,
username: '',
email: '',
preRole: '',
role: {},
roles: [],
confirmed: false,
blocked: true,
Affiliation: '',
ProfileLink: '',
createdAt: '', // datetime
updatedAt: '', // datetime
loaded: false,
error: false,
errorMsg: `An error occurred, please try again`,
isDev: process.env.NODE_ENV === 'development',
}
},
computed: {
jwt: function () {
return this.$store.getters['User/jwt']
},
userData: function () {
return this.$store.getters['User/userData']
},
userRole: function () {
return this.$store.getters['User/userRole']
},
},
methods: {
async update(e) {
e.preventDefault()
const vm = this;
if(vm.isDev) {
host = require('@/components/js/const').devApiHost;
}
const jwt = vm.jwt;
if(jwt === null) {
vm.loaded = false;
return
}
// Prevent to update the Administrator status
if(vm.preRole === 'Administrator') {
this.error = true
this.errorMsg = `Cannot change the administrator's attributes.`
setTimeout(() => vm.$router.go(-1), 2000);
return
}
// console.log(vm.role)
let dat = {
id: vm.user,
role: vm.role.id,
blocked: vm.blocked,
};
try {
const res = await this.axios.put(`${host}/api/users/${vm.user}`, dat, {
headers: {
Authorization: `Bearer ${jwt}`
}
});
// console.log(res.data)
vm.$router.push('/profile')
} catch(error) {
// console.log(error.response.data.error.message)
// console.log(error.response)
this.error = true
this.errorMsg = error
}
},
async preload() {
const vm = this;
if(vm.isDev) {
host = require('@/components/js/const').devApiHost;
}
const jwt = vm.jwt;
if(jwt === null) {
vm.loaded = false;
return
}
// console.log(vm.userData)
try {
const res = await this.axios.get(`${host}/api/users-permissions/roles`, {
headers: {
Authorization: `Bearer ${jwt}`
}
});
if(res.data) {
vm.roles = _.sortBy(_.filter(res.data.roles, o => o.name !== 'Public'), ['name']);
}
} catch(error) {
// console.error(error)
this.error = true
this.errorMsg = "You are not authorized to access this item."
setTimeout(() => vm.$router.go(-1), 2000);
}
},
async load(id) {
const vm = this;
if(vm.isDev) {
host = require('@/components/js/const').devApiHost;
}
const jwt = vm.jwt;
if(jwt === null) {
vm.loaded = false;
return
}
// console.log(vm.userData)
try {
const res = await this.axios.get(`${host}/api/users/` + id, {
headers: {
Authorization: `Bearer ${jwt}`
}
});
// console.log(res)
if(res.data) {
const d = res.data;
vm.username = d.username;
vm.email = d.email;
vm.preRole = d.role.name;
vm.role.name = d.role.name;
vm.role.id = d.role.id;
vm.confirmed = d.confirmed;
vm.blocked = d.blocked;
vm.Affiliation = d.Affiliation;
vm.ProfileLink = d.ProfileLink;
vm.createdAt = d.createdAt;
vm.updatedAt = d.updatedAt;
}
vm.loaded = true;
} catch(error) {
// console.error(error)
this.error = true
this.errorMsg = "You are not authorized to access this item."
setTimeout(() => vm.$router.go(-1), 2000);
}
}
},
mounted: function () {
const vm = this;
const jwt = vm.jwt;
if(jwt === null) {
vm.$router.push('/login')
} else {
vm.preload();
vm.load(vm.user)
}
}
}
</script>
<style>
@import url('~@/assets/bootstrap.css');
a {
color: #42b983;
}
</style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment