Commit 1db93f6f authored by ZeMKI's avatar ZeMKI
Browse files

Translations

* now the translations are fully programmed, a documentation file on office will explain how to add them.
parent 43ec1583
......@@ -39,7 +39,7 @@ Vue.config.debug = true;
Vue.config.silent = false;
Vue.prototype.trans = (key) => {
return _.findKey(window.trans,key)? window.trans[_.findKey(window.trans,key)][key] : key;
return _.isUndefined(window.trans[key])? key : window.trans[key];
};
/**
......
<template>
<section style="margin-left:auto;margin-right:auto;position: fixed;">
<button class="button is-danger" v-if="!loadingprogress > 0" id="downloadbutton" style="display: flex;z-index: 1000;margin: 5px;position: fixed;" @click="download" > export PDF</button>
<button class="button is-danger" v-if="!loadingprogress > 0" id="downloadbutton" style="display: flex;z-index: 1000;margin: 5px;position: fixed;" @click="download" >{{ trans('export PDF') }}</button>
<img v-show="!loading" :src="screenshot" id="sorting" style="max-width: 100%;max-height: 100%;position:fixed;left:10%">
<div class="columns" style="top:50%;left: 50%;position: fixed;" :class="loading? 'columns loading' : 'columns'"></div>
<div id="bottom" v-show="!loading" style="display: flex;z-index: 1000;margin: 5px;position: fixed;bottom:0px;width:100%;background-color:#e9e7e3;display: inline;">
......
......@@ -17,20 +17,20 @@
{{ props.row.id }}
</b-table-column>
<b-table-column field="email" label="Author" sortable>
<b-table-column field="email" :label="trans('Author')" sortable>
{{ props.row.author }}
</b-table-column>
<b-table-column field="name" label="Interviewee" sortable>
<b-table-column field="name" :label="trans('Interviewee')" sortable>
{{ props.row.interviewed }}
</b-table-column>
<b-table-column field="date" label="Start" centered sortable>
<b-table-column field="date" :label="trans('Start')" centered sortable>
<span class="tag is-success">
{{ formatdate(props.row.start) }}
</span>
</b-table-column>
<b-table-column field="date" label="End" centered sortable>
<b-table-column field="date" :label="trans('End')" centered sortable>
<span class="tag is-success">
{{ formatdate(props.row.end) }}
</span>
......@@ -64,7 +64,7 @@
<template slot="empty">
<section class="section">
<div class="content has-text-grey has-text-centered">
<p>No interviews.</p>
<p>{{ trans('No interviews.') }}</p>
</div>
</section>
</template>
......
<template>
<div v-if="showmodal" :class="showmodal ? 'is-active modaluser modal' : 'modal modaluser'">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title" v-html="'Add/edit User for study '+study"></p>
</header>
<section class="modal-card-body">
<div class="columns">
<div class="level">
<div class="column is-four-fifths">
<div class="field">
<label class="label">Email </label>
<div class="control">
<input class="input has-background-dark has-text-light" type="email" placeholder="User email" id="studyname" v-model="email" />
<div v-if="showmodal" :class="showmodal ? 'is-active modaluser modal' : 'modal modaluser'">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ trans('Add/edit User for study') }} {{study}}</p>
</header>
<section class="modal-card-body">
<div class="columns">
<div class="level">
<div class="column is-four-fifths">
<div class="field">
<label class="label">{{ trans('Email') }} </label>
<div class="control">
<input class="input has-background-dark has-text-light" type="email"
placeholder="User email" id="studyname" v-model="email"/>
</div>
<span v-if="emailexistmessage.length > 0"
:class="this.emailexist ? 'tag is-warning' : 'tag is-danger'"
v-html="emailexistmessage"></span>
</div>
</div>
<div class="column is-one-fourth">
<div class="field">
<b-field label="User Role">
<b-select placeholder="Select a role" v-model="userroleselected">
<option
v-for="role in inputs.userroles"
:value="role.value"
:key="role.value">
{{ role.name }}
</option>
</b-select>
</b-field>
</div>
</div>
<div class="column is-one-fourth" v-if="this.update">
<div class="field">
<label class="label"> {{ trans('Reset') }} </label>
<a class="button is-danger" @click="sendresetpassworddialog">{{ trans('Send reset email') }}</a>
</div>
</div>
</div>
</div>
<div v-if="errors.length > 0" class="notification is-danger" role="alert">
<p v-if="errors" v-for="(error,index) in errors"> {{error}}</p>
</div>
<span v-if="emailexistmessage.length > 0" :class="this.emailexist ? 'tag is-warning' : 'tag is-danger'" v-html="emailexistmessage"></span>
</div>
</div>
<div class="column is-one-fourth">
<div class="field">
<b-field label="User Role">
<b-select placeholder="Select a role" v-model="userroleselected">
<option
v-for="role in inputs.userroles"
:value="role.value"
:key="role.value">
{{ role.name }}
</option>
</b-select>
</b-field>
</div>
</div>
<div class="column is-one-fourth" v-if="this.update">
<div class="field">
<label class="label"> Reset </label>
<a class="button is-danger" @click="sendresetpassworddialog">Send reset email</a>
</div>
</div>
<div v-if="message" class="notification is-success " role="alert">
{{message}}
</div>
</section>
<footer class="modal-card-foot">
<button v-if="!update" class="button is-success" @click="saveuser">{{ trans('Save changes') }}</button>
<button v-if="update" class="button is-success" @click="updateuser">Update User</button>
<button class="button" @click="showmodalparent">{{ trans('Cancel') }}</button>
</footer>
</div>
</div>
<!-- <div class="columns">
<div class="level">
<div class="column">
<div class="field">
<label class="label">Assign to study</label>
<div class="control" >
<label class="radio" v-for="study in inputs.studies" @click="loadpermissions(study.id)" style="display: block">
<input type="radio" name="foobar" v-model="studyradio" :value="study.id">
{{study.name.substring(0,30)}}
</label>
</div>
</div>
</div>
<div class="column is-three-quarters">
<div class="field">
<label class="label">Specific permissions</label>
<label class="checkbox" :disabled="studyradio ==0">
<input type="checkbox" :disabled="studyradio ==0" v-model="permissions.onlyconsult">
Only consult
</label><br>
<label class="checkbox" :disabled="permissions.onlyconsult || studyradio ==0 || globalpermissions.cancreatestudy">
<input type="checkbox" :disabled="permissions.onlyconsult || studyradio ==0 || globalpermissions.cancreatestudy" v-model="permissions.caneditstudy">
Can edit information of this study
</label><br>
<label class="checkbox" :disabled="permissions.onlyconsult || studyradio ==0 || globalpermissions.cancreateusers">
<input type="checkbox" :disabled="permissions.onlyconsult || studyradio ==0 || globalpermissions.cancreateusers" v-model="permissions.canassignusers">
Can assign users to this study
</label><br>
<hr>
<label class="label">Global</label>
<label class="checkbox">
<input type="checkbox" v-model="globalpermissions.cancreateusers">
Can create users
</label><br>
<label class="checkbox">
<input type="checkbox" v-model="globalpermissions.cancreatestudy">
Can create studies
</label>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column" v-if="inputs.supervisors.length > 0">
<div class="field">
<b-field label="Supervised by">
<b-select placeholder="Select a supervisor" v-model="supervisorselected">
<option
v-for="s in inputs.supervisors"
:value="s.user_id"
:key="s.user_id">
{{ s.email }}
</option>
</b-select>
</b-field>
</div>
</div>
</div>-->
<div v-if="errors.length > 0" class="notification is-danger" role="alert">
<p v-if="errors" v-for="(error,index) in errors"> {{error}}</p>
</div>
<div v-if="message" class="notification is-success " role="alert">
{{message}}
</div>
</section>
<footer class="modal-card-foot">
<button v-if="!update" class="button is-success" @click="saveuser">Save changes</button>
<button v-if="update" class="button is-success" @click="updateuser">Update User</button>
<button class="button" @click="showmodalparent">Cancel</button>
</footer>
</div>
</div>
</template>
<script>
export default {
props: ['showmodal','assignstudy','edituser','study'],
mounted() {
},
data() {
return {
email: "",
emailexist: false,
emailexistmessage: "",
studyradio: 0,
userroleselected: [],
previouspermissions: {},
studiesselected: [],
supervisorselected: [],
allpermissions: [],
globalpermissions:{
cancreateusers: false,
cancreatestudy: false
},
inputs:{
userroles: [],
studies: [],
supervisors: []
},
errors: [],
message: "",
usertoedit: {}
}
},
computed: {
update: function(){
return (this.edituser > 0 );
}
},
watch: {
showmodal: function(newVal,oldVal){
let self = this;
self.message = "";
self.errors = [];
// from edit to add new
if(!this.update){
this.usertoedit = {};
this.emptyform();
}
if(newVal){
// for some reasons it can't find the modal background
// but after 1 millisecond it does
setTimeout(function() {
document.querySelector('.modal-background').addEventListener('click', function(e) {
document.querySelector('html').classList.remove('is-clipped');
self.$emit('showmodalparent');
});
}, 1);
this.getinputdata();
}
},
'permissions.onlyconsult': function(newVal,oldVal){
let self = this;
if(newVal){
self.permissions.caneditstudy = false;
self.permissions.canassignusers = false;
}
},
permissions: {
deep: true,
handler(val){
let self = this;
console.log(val)
let permissionsVariables = {
1: "onlyconsult",
2: "caneditstudy",
3: "canassignusers",
4: "cancreateusers",
5: "cancreatestudy",
6: "creator"
};
for (var permission in val){
self.studiesselected[self.studyradio][permission] = val[permission];
}
}
},
userroleselected: function(newVal,oldVal){
let self = this;
if(newVal == 2){
self.globalpermissions.cancreatestudy = true;
self.globalpermissions.cancreateusers = true;
}else if(newVal == 3){
self.resetallpermissions();
}
},
email: function(newVal,oldVal){
if(newVal.length > 4 && newVal.indexOf('@') > -1 && !this.update){
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(re.test(String(newVal).toLowerCase())){
window.axios.post('checkemail',{email: newVal}).then(response =>{
this.emailexist = response.data;
if(response.data){
this.emailexistmessage = "This user will be invited.";
}else{
this.emailexistmessage = "This user is not registered, an invitation email will be sent.";
export default {
props: ['showmodal', 'assignstudy', 'edituser', 'study'],
mounted() {
},
data() {
return {
email: "",
emailexist: false,
emailexistmessage: "",
studyradio: 0,
userroleselected: [],
previouspermissions: {},
studiesselected: [],
supervisorselected: [],
allpermissions: [],
globalpermissions: {
cancreateusers: false,
cancreatestudy: false
},
inputs: {
userroles: [],
studies: [],
supervisors: []
},
errors: [],
message: "",
usertoedit: {}
}
},
computed: {
update: function () {
return (this.edituser > 0);
}
},
watch: {
showmodal: function (newVal, oldVal) {
let self = this;
self.message = "";
self.errors = [];
// from edit to add new
if (!this.update) {
this.usertoedit = {};
this.emptyform();
}
if (newVal) {
// for some reasons it can't find the modal background
// but after 1 millisecond it does
setTimeout(function () {
document.querySelector('.modal-background').addEventListener('click', function (e) {
document.querySelector('html').classList.remove('is-clipped');
self.$emit('showmodalparent');
});
}, 1);
this.getinputdata();
}
},
'permissions.onlyconsult': function (newVal, oldVal) {
let self = this;
if (newVal) {
self.permissions.caneditstudy = false;
self.permissions.canassignusers = false;
}
},
permissions: {
deep: true,
handler(val) {
let self = this;
console.log(val)
let permissionsVariables = {
1: "onlyconsult",
2: "caneditstudy",
3: "canassignusers",
4: "cancreateusers",
5: "cancreatestudy",
6: "creator"
};
for (var permission in val) {
self.studiesselected[self.studyradio][permission] = val[permission];
}
}
},
userroleselected: function (newVal, oldVal) {
let self = this;
if (newVal == 2) {
self.globalpermissions.cancreatestudy = true;
self.globalpermissions.cancreateusers = true;
} else if (newVal == 3) {
self.resetallpermissions();
}
},
email: function (newVal, oldVal) {
if (newVal.length > 4 && newVal.indexOf('@') > -1 && !this.update) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test(String(newVal).toLowerCase())) {
window.axios.post('checkemail', {email: newVal}).then(response => {
this.emailexist = response.data;
if (response.data) {
this.emailexistmessage = "This user will be invited.";
} else {
this.emailexistmessage = "This user is not registered, an invitation email will be sent.";
}
}).catch(error => {
});
} else {
}
}
}).catch(error =>{
}
},
methods: {
createStudyPermissionArray: function (id) {
let permissionsVariables = [
"onlyconsult",
"caneditstudy",
"canassignusers"
];
/// if the study doesn't exist, initialize with all false values
/// otherwise assign the values to the 3 permissions checkboxes
if (_.isUndefined(this.studiesselected[id])) {
this.studiesselected[id] = {}
for (var i = 0; i < permissionsVariables.length; i++) {
this.studiesselected[id][permissionsVariables[i]] = false;
}
this.resetspecificpermissions();
} else {
console.log("study exist")
for (let p in this.permissions) {
this.permissions[p] = this.studiesselected[id][p];
}
}
},
getinputdata: function () {
this.inputs.supervisors = [];
window.axios.post('getinputdata').then(response => {
this.inputs.userroles = response.data.allroles;
this.userroleselected = 3;
}).catch(error => {
console.log("error " + error);
});
},
showmodalparent: function () {
this.$emit('showmodalparent');
},
saveuser: function () {
let activeStudies = this.study;
if (this.validate()) {
let user = {};
_.merge(user, {email: this.email}, {emailexist: this.emailexist}, {role: this.userroleselected}, {study: activeStudies});
window.axios.post('users', user).then(response => {
this.message = "";
this.message = response.data;
window.axios.get('studies/users/' + this.study).then(response => {
// this.$emit('reloadusers',{'response':response,'study': this.study});
Vue.set(this.$parent.users, this.study, response.data)
// this.$parent.$forceUpdate();
}).catch(error => {
console.log(error);
});
}).catch(error => {
this.errors = error.message;
});
}
},
updateuser: function () {
let user = {};
_.merge(user, {id: this.usertoedit}, {email: this.email}, {emailexist: this.emailexist}, {roles: this.userroleselected}, {studies: this.studiesselected}, {permissions: this.permissions});
window.axios.post('updateuser', user).then(response => {
this.message = "";
this.message = response.data;
}).catch(error => {
this.errors = error.data;
});
},
validate: function () {
this.errors = [];
if (this.email == "" || !this.validEmail) this.errors.push("please enter a valid email");
if (!this.userroleselected) this.errors.push("please select a role");
if (this.errors.length > 0) return false;
else return true;
},
validEmail: function () {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(this.email);
},
emptyform: function () {
this.email = "";
this.emailexistmessage = "";
this.userroleselected = [];
this.studiesselected = [];
},
sendresetpassworddialog() {
this.$dialog.confirm({
title: 'Send reset password email',
message: 'Are you sure you want to <b>reset</b> password and wait for the user to set it? This action cannot be undone.',
confirmText: 'Send',
type: 'is-danger',
hasIcon: true,