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

Merge branch 'updateItemDetailPage_quickfix' into develop

parents f29790db 720c54f4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web/src/views/Profile.vue
+ 366
− 211
View file @ cfc6a82e
<template> <template>
<div id="page-content-wrapper" class="main"> <div id="page-content-wrapper" class="main">
<base-toaster @close="hideDialog" :open="toasterIsOpen">
<base-toaster @close="hideDialog" :open="toasterIsOpen" type="error">
<div class="flex justify-between space-x-4 items-center"> <div class="flex justify-between space-x-4 items-center">
<font-awesome-icon size="lg" class="ml-3" icon="fa-solid fa-triangle-exclamation" /> <font-awesome-icon
class="ml-3"
icon="fa-solid fa-thumbs-up "
size="lg"
/>
<h4>Profile edit at the moment not possible!</h4> <h4>Profile update successful!</h4>
<button class="btn btn-outline" @click="hideDialog"> <button class="btn btn-outline" @click="hideDialog">
<font-awesome-icon icon="fa-regular fa-circle-xmark" size="2x" /> <font-awesome-icon icon="fa-regular fa-circle-xmark" size="2x" />
</button> </button>
...@@ -21,39 +23,99 @@ ...@@ -21,39 +23,99 @@
<div v-else> <div v-else>
<!-- {{response}}--> <!-- {{response}}-->
<h4 class="round">User Profile</h4> <h4 class="round">User Profile</h4>
<div class="panel panel-default" v-if="!editMode"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
<div class="container-fluid col-md-12"> <div class="container-fluid col-md-12">
<div class="row"> <div class="row">
<div class="text col-sm-3">User ID</div> <div class="text col-sm-3">User ID</div>
<div class="col-sm-9"> <div class="col-sm-9">
<div class="flex justify-between"> <div class="flex justify-between">
<b>{{ response.username }}</b> <b>{{ response.username }}</b>
<button <div class="relative">
<button
type="button" type="button"
class=" class="
bg-blue-600
text-2xl
bg-blue-600 font-bold
text-2xl font-bold rounded-lg p-5 text-white hover:bg-blue-600 rounded-lg
p-5
" text-white
@click="toasterIsOpen= true" hover:bg-blue-600
"
@click="isOpen = !isOpen"
> >
Edit <font-awesome-icon class="ml-2" icon="fa-solid fa-user-pen" /> Edit
</button> <font-awesome-icon
class="ml-2"
icon="fa-solid fa-user-pen"
/>
</button>
<div
v-if="isOpen"
class="
mt-2
absolute
z-50
right-0
rounded-lg
py-4
w-80
shadow-lg
bg-white
"
>
<!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
<a
href="#"
@click="openScientificDisciplineEdit"
class="
text-gray-700
rounded-lg
block
px-6
py-4
text-2xl
hover:bg-gray-400
hover:text-white
hover:no-underline
"
>Scientific Discipline</a
>
<a
href="#"
@click="openProfileLinkEdit"
class="
text-gray-700
block
px-6
rounded-lg
py-4
text-2xl
hover:bg-gray-400
hover:text-white
hover:no-underline
"
>Profile Link</a
>
<!-- <a href="#" @click="openChangePassword" class="text-gray-700
block
px-6
rounded-lg
py-4
text-2xl
hover:bg-gray-400
hover:text-white
hover:no-underline" >Password</a> -->
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="text col-sm-3">Full Name</div> <div class="text col-sm-3">Full Name</div>
<div class="col-sm-9"> <div class="col-sm-9">
<b>{{response.full_name}}</b> <b>{{ response.full_name }}</b>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
...@@ -72,44 +134,39 @@ ...@@ -72,44 +134,39 @@
<div class="text col-sm-3">Current role</div> <div class="text col-sm-3">Current role</div>
<div class="col-sm-9"> <div class="col-sm-9">
<div> <div>
{{response.current_role}} {{ response.current_role }}
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="text col-sm-3">Scientific Discipline</div> <div class="text col-sm-3">Scientific Discipline</div>
<div class="col-sm-9"> <div class="col-sm-9">
<div> <div>
{{response.scientific_discipline}} {{ response.scientific_discipline }}
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="text col-sm-3">Motivation</div> <div class="text col-sm-3">Motivation</div>
<div class="col-sm-9"> <div class="col-sm-9">
<p> <p>
{{response.motivation_text}} {{ response.motivation_text }}
</p> </p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="text col-sm-3">Affiliation</div> <div class="text col-sm-3">Affiliation</div>
<div class="col-sm-9"> <div class="col-sm-9">
<div> <div>
{{response.current_affiliation}} {{ response.current_affiliation }}
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="text col-sm-3">Profile Link</div> <div class="text col-sm-3">Profile Link</div>
<div class="col-sm-9"> <div class="col-sm-9">
<a :href="response.profile_link" target="_blank"> <a :href="response.profile_link" target="_blank">
{{response.profile_link}} {{ response.profile_link }}
</a> </a>
</div> </div>
</div> </div>
...@@ -127,132 +184,141 @@ ...@@ -127,132 +184,141 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="panel panel-default" v-if="editMode"> <div class="panel panel-default" v-if="editMode">
<div class="panel-body"> <div class="panel-body">
<div class="container-fluid col-md-12"> <div class="container-fluid col-md-12">
<div class="row"> <div v-if="showEditScientificDis">
<div class="text col-sm-3">User ID</div> <h3 class="mb-6 border-b">Update Scientific Discipline</h3>
<div class="col-sm-9"> <div class="row">
<b>{{ response.username }}</b> <div class="text col-sm-3 p-4">Scientific Discipline</div>
</div> <div class="col-sm-9 p-4">
</div> <div
<div class="row"> v-for="options in scientificDisciplineOptions"
<div class="text col-sm-3">Full Name</div> :key="options.id"
<div class="col-sm-9"> >
<b>{{response.full_name}}</b> <input
</div> type="checkbox"
</div> class="h-6 w-6"
<div class="row"> :id="options.id"
<div class="text col-sm-3">Email</div> :name="options"
<div class="col-sm-9"> :value="options.discipline"
{{ response.email }} v-model="selected"
</div> />
</div> <label class="mx-3" :for="options.id">{{
<div class="row"> options.discipline
<div class="text col-sm-3">Role</div> }}</label>
<div class="col-sm-9"> </div>
{{ setRole(response.role.name) }}
</div> <p
</div> class="text-red-500 font-bold mt-2"
<div class="row"> v-if="error && scientificErrMsg"
<div class="text col-sm-3">Current role</div> >
<div class="col-sm-9"> {{ scientificErrMsg }}
<select v-model="current_role" class="bg-white py-1 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-current-role" > </p>
<option id="phd" value="PhD">PhD</option> </div>
<option id="postdoc" value="PostDoc">PostDoc</option>
<option id="research_scientist" value="Research_Scientist">Research Scientist</option>
<option id="principal_investigator" value="Principal_Investigator">Principal Investigator</option>
</select>
</div>
</div>
<div class="row">
<div class="text col-sm-3">Scientific Discipline</div>
<div class="col-sm-9">
<input type="checkbox" id="physics" value="Physics" v-model="scientific_discipline">
<label class="mx-3" for="physics">Physics</label>
<input type="checkbox" id="chemistry" value="Chemistry" v-model="scientific_discipline">
<label class="mx-3" for="chemistry">Chemistry</label>
<input type="checkbox" id="biology" value="Biology" v-model="scientific_discipline">
<label class="mx-3" for="biology">Biology</label>
<input type="checkbox" id="computer_science" value="Computer_Science" v-model="scientific_discipline">
<label class="mx-3" for="computer_science">Computer Science</label>
<input type="checkbox" id="mathematics" value="Mathematics" v-model="scientific_discipline">
<label class="mx-3" for="mathematics">Mathematics</label>
</div>
</div>
<div class="row">
<div class="text col-sm-3">Motivation</div>
<div class="col-sm-9">
<textarea rows="5" class="
bg-white
w-full
py-2
text-gray-700
outline-none
bg-transparent
border-b
hover:border-gray-700
focus:bg-gray-200 focus:border-gray-700
"
v-model="motivation_text"
></textarea>
</div>
</div>
<div class="row">
<div class="text col-sm-3">Affiliation</div>
<div class="col-sm-9">
<input v-model="current_affiliation" class="bg-white w-3/4 py-1 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-current-affiliation" type="text" :placeholder="current_affiliation === ''? current_affiliation = response.current_affiliation : current_affiliation">
</div>
</div>
<div class="row">
<div class="text col-sm-3">Profile Link</div>
<div class="col-sm-9">
{{response.profile_link}}
<input v-model="profile_link" class="bg-white w-3/4 py-1 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-profile-link" type="text" :placeholder="profile_link === ''? profile_link = response.profile_link : profile_link">
</div> </div>
</div> </div>
<div v-if="showEditProfileLink">
<h3 class="mb-6 border-b">Change Profile Link</h3>
<div class="row">
<div class="text col-sm-3 p-4">Profile Link</div>
<div class="row"> <div class="col-sm-9 p-4">
<div class="text col-sm-3">Joined</div> <input
<div class="col-sm-9"> v-model.trim="profile_link"
{{ response.createdAt }} class="
bg-white
w-1/3
py-4
px-4
rounded-lg
text-gray-700
bg-transparent
border border-gray-500
hover:border-gray-700
"
id="inline-profile-link"
type="text"
placeholder="Enter profile link."
/>
<p
class="text-red-500 font-bold mt-2"
v-if="error && profileLinkErrMsg"
>
{{ profileLinkErrMsg }}
</p>
</div>
</div> </div>
</div> </div>
<div class="row"> <div v-if="showChangePassword">
<div class="text col-sm-3">Updated</div> <h3 class="mb-6 border-b">Change Password</h3>
<div class="col-sm-9"> <div class="row">
{{ response.updatedAt }} <div class="text col-sm-3 p-4">Password</div>
<div class="col-sm-9 p-4">
<input
v-model.trim="password"
class="
bg-white
w-1/3
py-4
px-4
rounded-lg
text-gray-700
bg-transparent
border border-gray-500
hover:border-gray-700
"
id="inline-profile-link"
type="text"
/>
<p
class="text-red-500 font-bold mt-2"
v-if="error && passwordErrMsg"
>
{{ passwordErrMsg }}
</p>
</div>
</div> </div>
</div> </div>
<div class="flex space-x-4 mt-2"> <div class="flex space-x-4 mt-2">
<button class=" <button
class="
bg-green-600
bg-green-600 text-xl
text-xl font-bold rounded-lg p-5 text-white hover:bg-green-600 font-bold
rounded-lg
" @click="update(response)"> p-5
Update Profile text-white
</button> hover:bg-green-600
<button class=" "
@click="update(response)"
>
bg-blue-600 Update Profile
text-xl font-bold rounded-lg p-5 text-white hover:bg-blue-600 </button>
<button
" @click="editMode=false"> class="
Cancel bg-blue-600
</button> text-xl
</div> font-bold
rounded-lg
p-5
text-white
hover:bg-blue-600
"
@click="close"
>
Cancel
</button>
</div>
</div> </div>
</div> </div>
<p class="text-red-500 font-bold mt-2" v-if="error && errorMsg">
{{ errorMsg }}
</p>
</div> </div>
<!-- <button v-if="userData !== null && (getRole === 'Contributor' || getRole === 'Maintainer')" <!-- <button v-if="userData !== null && (getRole === 'Contributor' || getRole === 'Maintainer')"
...@@ -265,15 +331,15 @@ ...@@ -265,15 +331,15 @@
</fetch-profile> </fetch-profile>
<fetch-users v-if="getRole === 'Administrator'"> <fetch-users v-if="getRole === 'Administrator'">
<template slot-scope="{response, loading}"> <template slot-scope="{ response, loading }">
<slot :response="response" :loading="loading"> <slot :response="response" :loading="loading">
<div v-if="loading || response === null"></div> <div v-if="loading || response === null"></div>
<div v-else> <div v-else>
<h4 class="round">User List</h4> <h4 class="round">User List</h4>
<user-table id="usersTable" :data="response" /> <user-table id="usersTable" :data="response" />
</div> </div>
</slot> </slot>
</template> </template>
</fetch-users> </fetch-users>
</div> </div>
</template> </template>
...@@ -281,121 +347,210 @@ ...@@ -281,121 +347,210 @@
<script> <script>
import FetchProfile from "@/components/CMS/fetchProfile"; import FetchProfile from "@/components/CMS/fetchProfile";
import FetchUpdateItems from "@/components/CMS/fetchUpdateItems"; import FetchUpdateItems from "@/components/CMS/fetchUpdateItems";
import FetchUsers from "@/components/CMS/fetchUsers" import FetchUsers from "@/components/CMS/fetchUsers";
import UserTable from '../components/UserTable.vue'; import UserTable from "../components/UserTable.vue";
import BaseSpinner from '../components/UI/BaseSpinner.vue'; import BaseSpinner from "../components/UI/BaseSpinner.vue";
import BaseToaster from '../components/UI/BaseToaster.vue'; import BaseToaster from "../components/UI/BaseToaster.vue";
const _ = require('lodash') const _ = require("lodash");
let host = require('@/components/js/const').apiHost; let host = require("@/components/js/const").apiHost;
export default { export default {
name: "ProfilePage", name: "ProfilePage",
components: { components: {
FetchProfile, UserTable, FetchUsers, FetchProfile,
BaseSpinner, BaseToaster UserTable,
FetchUsers,
BaseSpinner,
BaseToaster,
}, },
props: { props: {
msg: String, msg: String,
}, },
data() { data() {
return { return {
user: '', user: "",
motivation_text: '', motivation_text: "",
current_role: '', current_role: "",
scientific_discipline: '', scientific_discipline: [],
current_affiliation: '', current_affiliation: "",
profile_link: '', profile_link: "",
isDev: process.env.NODE_ENV === 'development', password: "",
isDev: process.env.NODE_ENV === "development",
editMode: false, editMode: false,
toasterIsOpen: false toasterIsOpen: false,
} error: false,
scientificDisciplineOptions: [
{ id: "1", discipline: "Physics" },
{ id: "2", discipline: "Chemistry" },
{ id: "3", discipline: "Biology" },
{ id: "4", discipline: "Computer_Science" },
{ id: "5", discipline: "Mathematics" },
],
selected: [],
isOpen: false,
showEditScientificDis: false,
showEditProfileLink: false,
showChangePassword: false,
scientificErrMsg: "",
profileLinkErrMsg: "",
passwordErrMsg: "",
errorMsg: "",
};
}, },
computed: { computed: {
jwt: function () { jwt: function () {
return this.$store.getters['User/jwt'] return this.$store.getters["User/jwt"];
}, },
userData: function () { userData: function () {
return this.$store.getters["User/userData"]; return this.$store.getters["User/userData"];
}, },
getRole: function(){ getRole: function () {
return this.$store.getters['User/userRole'] return this.$store.getters["User/userRole"];
} },
}, },
methods: { methods: {
showDialog() { close() {
this.editMode = false;
this.showEditScientificDis = false;
this.showEditProfileLink = false;
this.showChangePassword = false;
this.error = false;
this.scientificErrMsg = "";
this.profileLinkErrMsg = "";
this.passwordErrMsg = "";
this.selected = [];
this.profile_link = "";
this.password = "";
},
openScientificDisciplineEdit() {
this.editMode = true;
this.showEditScientificDis = true;
this.showEditProfileLink = false;
this.showChangePassword = false;
},
openProfileLinkEdit() {
this.editMode = true;
this.showEditScientificDis = false;
this.showEditProfileLink = true;
this.showChangePassword = false;
},
openChangePassword() {
this.editMode = true;
this.showEditScientificDis = false;
this.showEditProfileLink = false;
this.showChangePassword = true;
},
showDialog() {
this.toasterIsOpen = true; this.toasterIsOpen = true;
}, },
hideDialog() { hideDialog() {
this.toasterIsOpen = false; this.toasterIsOpen = false;
}, },
showEditMode(){ showEditMode() {
console.log(true); console.log(true);
this.editMode= true this.editMode = true;
}, },
setRole(roleName) { setRole(roleName) {
//console.log("role name is,", roleName); //console.log("role name is,", roleName);
const vm = this const vm = this;
window.localStorage.setItem('roleName', roleName) window.localStorage.setItem("roleName", roleName);
vm.$store.dispatch('User/setUserRole', roleName) vm.$store.dispatch("User/setUserRole", roleName);
return roleName return roleName;
}, },
async update(e) { async update(e) {
console.log("user data", e);
console.log("user data", e);
const vm = this; const vm = this;
if(vm.isDev) { if (vm.isDev) {
host = require('@/components/js/const').devApiHost; host = require("@/components/js/const").devApiHost;
} }
const jwt = vm.jwt; const jwt = vm.jwt;
if(jwt === null) { if (jwt === null) {
vm.loaded = false; vm.loaded = false;
return return;
} }
vm.user= e.id vm.user = e.id;
let dat;
if (this.showEditScientificDis) {
if (this.selected.length === 0) {
this.error = true;
this.scientificErrMsg = "Please select at least one discipline.";
return;
}
dat = {
id: vm.user,
scientific_discipline: vm.selected,
};
} else if (this.showEditProfileLink) {
if (!this.profile_link) {
this.error = true;
this.profileLinkErrMsg = "Please enter your profile link.";
return;
}
dat = {
id: vm.user,
let dat = { profile_link: vm.profile_link,
id: vm.user, };
motivation_text: vm.motivation_text, } else if (this.showChangePassword) {
current_role: vm.current_role, if (!this.password) {
current_affiliation: vm.current_affiliation, this.error = true;
profile_link: vm.profile_link, this.passwordErrMsg = "Please enter a password.";
scientific_discipline: vm.scientific_discipline return;
}; }
dat = {
id: vm.user,
password: vm.password,
};
}
this.error = false;
this.scientificErrMsg = "";
this.profileLinkErrMsg = "";
this.passwordErrMsg = "";
// let dat = {
// id: vm.user,
// profile_link: vm.profile_link,
// scientific_discipline: vm.selected,
// password: vm.password,
// };
console.log(dat);
try { try {
const res = await this.axios.put(`${host}/api/users/${vm.user}`, dat, { const res = await this.axios.put(`${host}/api/users/${vm.user}`, dat, {
headers: { headers: {
Authorization: `Bearer ${jwt}` Authorization: `Bearer ${jwt}`,
} },
}); });
// console.log(res.data) console.log(res.data);
this.error = false;
await vm.$router.push('/profile') this.toasterIsOpen = true;
} catch(error) { this.selected = [];
this.profile_link = "";
this.password = "";
} catch (error) {
// console.log(error.response.data.error.message) // console.log(error.response.data.error.message)
// console.log(error.response) // console.log(error.response)
this.error = true this.error = true;
this.errorMsg = error this.errorMsg = error;
} }
}, },
}, },
mounted: function () { mounted: function () {
const vm = this const vm = this;
if(vm.userData === null) { if (vm.userData === null) {
this.$router.push('/login') this.$router.push("/login");
} else { } else {
vm.user = vm.userData.id; vm.user = vm.userData.id;
vm.current_role = vm.userData.current_role; vm.current_role = vm.userData.current_role;
vm.scientific_discipline = vm.userData.scientific_discipline; vm.scientific_discipline = vm.userData.scientific_discipline;
if(vm.scientific_discipline === null) { if (vm.scientific_discipline === null) {
vm.scientific_discipline = [] vm.scientific_discipline = [];
} }
} }
}, },
......
web/src/views/SignUp.vue
+ 2
− 1
View file @ cfc6a82e
...@@ -116,7 +116,7 @@ export default { ...@@ -116,7 +116,7 @@ export default {
}, },
async register(e) { async register(e) {
const vm = this const vm = this
vm.toasterIsOpen= true;
e.preventDefault() e.preventDefault()
...@@ -135,6 +135,7 @@ try { ...@@ -135,6 +135,7 @@ try {
current_role: vm.current_role, current_role: vm.current_role,
scientific_discipline: vm.scientific_discipline scientific_discipline: vm.scientific_discipline
}) })
vm.toasterIsOpen= true;
//vm.$router.push('login') //vm.$router.push('login')
} catch(e) { } catch(e) {
// console.error(e) // console.error(e)
......
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