Move everything to models and services (#17)
This commit is contained in:
konrad
@ -7,29 +7,29 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '../auth'
|
||||
import router from '../router'
|
||||
import auth from '../auth'
|
||||
import router from '../router'
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
data() {
|
||||
return {
|
||||
user: auth.user,
|
||||
export default {
|
||||
name: "Home",
|
||||
data() {
|
||||
return {
|
||||
user: auth.user,
|
||||
loading: false,
|
||||
currentDate: new Date(),
|
||||
tasks: []
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'login'})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
auth.logout()
|
||||
},
|
||||
},
|
||||
}
|
||||
router.push({name: 'login'})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
auth.logout()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="loader-container" :class="{ 'is-loading': loading}">
|
||||
<div class="loader-container" :class="{ 'is-loading': listService.loading}">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
@ -12,25 +12,25 @@
|
||||
<div class="field">
|
||||
<label class="label" for="listtext">List Name</label>
|
||||
<div class="control">
|
||||
<input v-focus :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="listtext" placeholder="The list title goes here..." v-model="list.title">
|
||||
<input v-focus :class="{ 'disabled': listService.loading}" :disabled="listService.loading" class="input" type="text" id="listtext" placeholder="The list title goes here..." v-model="list.title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="listdescription">Description</label>
|
||||
<div class="control">
|
||||
<textarea :class="{ 'disabled': loading}" :disabled="loading" class="textarea" placeholder="The lists description goes here..." id="listdescription" v-model="list.description"></textarea>
|
||||
<textarea :class="{ 'disabled': listService.loading}" :disabled="listService.loading" class="textarea" placeholder="The lists description goes here..." id="listdescription" v-model="list.description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="columns bigbuttons">
|
||||
<div class="column">
|
||||
<button @click="submit()" class="button is-primary is-fullwidth" :class="{ 'is-loading': loading}">
|
||||
<button @click="submit()" class="button is-primary is-fullwidth" :class="{ 'is-loading': listService.loading}">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="column is-1">
|
||||
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth" :class="{ 'is-loading': loading}">
|
||||
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth" :class="{ 'is-loading': listService.loading}">
|
||||
<span class="icon is-small">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
@ -41,9 +41,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<manageusers :id="list.id" type="list" :userIsAdmin="userIsAdmin" />
|
||||
|
||||
<manageteams :id="list.id" type="list" :userIsAdmin="userIsAdmin" />
|
||||
<component :is="manageUsersComponent" :id="list.id" type="list" :userIsAdmin="userIsAdmin"></component>
|
||||
<component :is="manageTeamsComponent" :id="list.id" type="list" :userIsAdmin="userIsAdmin"></component>
|
||||
|
||||
<modal
|
||||
v-if="showDeleteModal"
|
||||
@ -57,101 +56,92 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import {HTTP} from '../../http-common'
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import message from '../../message'
|
||||
import manageusers from '../sharing/user'
|
||||
import manageteams from '../sharing/team'
|
||||
import ListModel from '../../models/list'
|
||||
import ListService from '../../services/list'
|
||||
|
||||
export default {
|
||||
name: "EditList",
|
||||
data() {
|
||||
return {
|
||||
list: {title: '', description:''},
|
||||
error: '',
|
||||
loading: false,
|
||||
showDeleteModal: false,
|
||||
export default {
|
||||
name: "EditList",
|
||||
data() {
|
||||
return {
|
||||
list: ListModel,
|
||||
listService: ListService,
|
||||
|
||||
showDeleteModal: false,
|
||||
user: auth.user,
|
||||
userIsAdmin: false,
|
||||
}
|
||||
},
|
||||
userIsAdmin: false, // FIXME: we should be able to know somehow if the user is admin, not only based on if he's the owner
|
||||
|
||||
manageUsersComponent: '',
|
||||
manageTeamsComponent: '',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
manageusers,
|
||||
manageteams,
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
|
||||
this.list.id = this.$route.params.id
|
||||
},
|
||||
created() {
|
||||
this.loadList()
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'loadList'
|
||||
},
|
||||
methods: {
|
||||
loadList() {
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
HTTP.get(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
this.$set(this, 'list', response.data)
|
||||
if (response.data.owner.id === this.user.infos.id) {
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.listService = new ListService()
|
||||
this.loadList()
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'loadList'
|
||||
},
|
||||
methods: {
|
||||
loadList() {
|
||||
let list = new ListModel({id: this.$route.params.id})
|
||||
this.listService.get(list)
|
||||
.then(r => {
|
||||
this.$set(this, 'list', r)
|
||||
if (r.owner.id === this.user.infos.id) {
|
||||
this.userIsAdmin = true
|
||||
}
|
||||
cancel()
|
||||
})
|
||||
.catch(e => {
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
HTTP.post(`lists/` + this.$route.params.id, this.list, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
// Update the list in the parent
|
||||
for (const n in this.$parent.namespaces) {
|
||||
let lists = this.$parent.namespaces[n].lists
|
||||
for (const l in lists) {
|
||||
if (lists[l].id === response.data.id) {
|
||||
this.$set(this.$parent.namespaces[n].lists, l, response.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.handleSuccess({message: 'The list was successfully updated.'})
|
||||
cancel()
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
deleteList() {
|
||||
const cancel = message.setLoading(this)
|
||||
HTTP.delete(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(() => {
|
||||
this.handleSuccess({message: 'The list was successfully deleted.'})
|
||||
cancel()
|
||||
router.push({name: 'home'})
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
handleError(e) {
|
||||
message.error(e, this)
|
||||
},
|
||||
handleSuccess(e) {
|
||||
message.success(e, this)
|
||||
}
|
||||
}
|
||||
}
|
||||
// This will trigger the dynamic loading of components once we actually have all the data to pass to them
|
||||
this.manageTeamsComponent = 'manageteams'
|
||||
this.manageUsersComponent = 'manageusers'
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
this.listService.update(this.list)
|
||||
.then(r => {
|
||||
// Update the list in the parent
|
||||
for (const n in this.$parent.namespaces) {
|
||||
let lists = this.$parent.namespaces[n].lists
|
||||
for (const l in lists) {
|
||||
if (lists[l].id === r.id) {
|
||||
this.$set(this.$parent.namespaces[n].lists, l, r)
|
||||
}
|
||||
}
|
||||
}
|
||||
message.success({message: 'The list was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteList() {
|
||||
this.listService.delete(this.list)
|
||||
.then(() => {
|
||||
message.success({message: 'The list was successfully deleted.'}, this)
|
||||
router.push({name: 'home'})
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
<h3>Create a new list</h3>
|
||||
<form @submit.prevent="newList" @keyup.esc="back()">
|
||||
<div class="field is-grouped">
|
||||
<p class="control is-expanded" :class="{ 'is-loading': loading}">
|
||||
<input v-focus class="input" :class="{ 'disabled': loading}" v-model="list.title" type="text" placeholder="The list's name goes here...">
|
||||
<p class="control is-expanded" :class="{ 'is-loading': listService.loading}">
|
||||
<input v-focus class="input" :class="{ 'disabled': listService.loading}" v-model="list.title" type="text" placeholder="The list's name goes here...">
|
||||
</p>
|
||||
<p class="control">
|
||||
<button type="submit" class="button is-success noshadow">
|
||||
@ -24,54 +24,47 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import {HTTP} from '../../http-common'
|
||||
import message from '../../message'
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import message from '../../message'
|
||||
import ListService from '../../services/list'
|
||||
import ListModel from '../../models/list'
|
||||
|
||||
export default {
|
||||
name: "NewList",
|
||||
data() {
|
||||
return {
|
||||
list: {title: ''},
|
||||
error: '',
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
export default {
|
||||
name: "NewList",
|
||||
data() {
|
||||
return {
|
||||
list: ListModel,
|
||||
listService: ListService,
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.list = new ListModel()
|
||||
this.listService = new ListService()
|
||||
this.$parent.setFullPage();
|
||||
},
|
||||
methods: {
|
||||
newList() {
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
HTTP.put(`namespaces/` + this.$route.params.id + `/lists`, this.list, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
methods: {
|
||||
newList() {
|
||||
this.list.namespaceID = this.$route.params.id
|
||||
this.listService.create(this.list)
|
||||
.then(response => {
|
||||
this.$parent.loadNamespaces()
|
||||
this.handleSuccess({message: 'The list was successfully created.'})
|
||||
cancel()
|
||||
router.push({name: 'showList', params: {id: response.data.id}})
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
message.success({message: 'The list was successfully created.'}, this)
|
||||
router.push({name: 'showList', params: {id: response.id}})
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
back() {
|
||||
router.go(-1)
|
||||
},
|
||||
handleError(e) {
|
||||
message.error(e, this)
|
||||
},
|
||||
handleSuccess(e) {
|
||||
message.success(e, this)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="loader-container" :class="{ 'is-loading': loading}">
|
||||
<div class="loader-container" :class="{ 'is-loading': listService.loading}">
|
||||
<div class="content">
|
||||
<router-link :to="{ name: 'editList', params: { id: list.id } }" class="icon settings is-medium">
|
||||
<icon icon="cog" size="2x"/>
|
||||
@ -8,8 +8,8 @@
|
||||
</div>
|
||||
<form @submit.prevent="addTask()">
|
||||
<div class="field is-grouped">
|
||||
<p class="control has-icons-left is-expanded" :class="{ 'is-loading': loading}">
|
||||
<input v-focus class="input" :class="{ 'disabled': loading}" v-model="newTask.text" type="text" placeholder="Add a new task...">
|
||||
<p class="control has-icons-left is-expanded" :class="{ 'is-loading': taskService.loading}">
|
||||
<input v-focus class="input" :class="{ 'disabled': taskService.loading}" v-model="newTask.text" type="text" placeholder="Add a new task...">
|
||||
<span class="icon is-small is-left">
|
||||
<icon icon="tasks"/>
|
||||
</span>
|
||||
@ -68,21 +68,21 @@
|
||||
<div class="field">
|
||||
<label class="label" for="tasktext">Task Text</label>
|
||||
<div class="control">
|
||||
<input v-focus :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="tasktext" placeholder="The task text is here..." v-model="taskEditTask.text">
|
||||
<input v-focus :class="{ 'disabled': taskService.loading}" :disabled="taskService.loading" class="input" type="text" id="tasktext" placeholder="The task text is here..." v-model="taskEditTask.text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="taskdescription">Description</label>
|
||||
<div class="control">
|
||||
<textarea :class="{ 'disabled': loading}" :disabled="loading" class="textarea" placeholder="The tasks description goes here..." id="taskdescription" v-model="taskEditTask.description"></textarea>
|
||||
<textarea :class="{ 'disabled': taskService.loading}" :disabled="taskService.loading" class="textarea" placeholder="The tasks description goes here..." id="taskdescription" v-model="taskEditTask.description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b>Reminder Dates</b>
|
||||
<div class="reminder-input" :class="{ 'overdue': (r < nowUnix && index !== (taskEditTask.reminderDates.length - 1))}" v-for="(r, index) in taskEditTask.reminderDates" :key="index">
|
||||
<flat-pickr
|
||||
:class="{ 'disabled': loading}"
|
||||
:disabled="loading"
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
:disabled="taskService.loading"
|
||||
:v-model="taskEditTask.reminderDates"
|
||||
:config="flatPickerConfig"
|
||||
:id="'taskreminderdate' + index"
|
||||
@ -97,9 +97,9 @@
|
||||
<label class="label" for="taskduedate">Due Date</label>
|
||||
<div class="control">
|
||||
<flat-pickr
|
||||
:class="{ 'disabled': loading}"
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
class="input"
|
||||
:disabled="loading"
|
||||
:disabled="taskService.loading"
|
||||
v-model="taskEditTask.dueDate"
|
||||
:config="flatPickerConfig"
|
||||
id="taskduedate"
|
||||
@ -113,9 +113,9 @@
|
||||
<div class="control columns">
|
||||
<div class="column">
|
||||
<flat-pickr
|
||||
:class="{ 'disabled': loading}"
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
class="input"
|
||||
:disabled="loading"
|
||||
:disabled="taskService.loading"
|
||||
v-model="taskEditTask.startDate"
|
||||
:config="flatPickerConfig"
|
||||
id="taskduedate"
|
||||
@ -124,9 +124,9 @@
|
||||
</div>
|
||||
<div class="column">
|
||||
<flat-pickr
|
||||
:class="{ 'disabled': loading}"
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
class="input"
|
||||
:disabled="loading"
|
||||
:disabled="taskService.loading"
|
||||
v-model="taskEditTask.endDate"
|
||||
:config="flatPickerConfig"
|
||||
id="taskduedate"
|
||||
@ -140,11 +140,11 @@
|
||||
<label class="label" for="">Repeat after</label>
|
||||
<div class="control repeat-after-input columns">
|
||||
<div class="column">
|
||||
<input class="input" placeholder="Specify an amount..." v-model="repeatAfter.amount"/>
|
||||
<input class="input" placeholder="Specify an amount..." v-model="taskEditTask.repeatAfter.amount"/>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="select">
|
||||
<select v-model="repeatAfter.type">
|
||||
<select v-model="taskEditTask.repeatAfter.type">
|
||||
<option value="hours">Hours</option>
|
||||
<option value="days">Days</option>
|
||||
<option value="weeks">Weeks</option>
|
||||
@ -179,14 +179,14 @@
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input @keyup.enter="addSubtask()" :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="tasktext" placeholder="New subtask" v-model="newTask.text"/>
|
||||
<input @keyup.enter="addSubtask()" :class="{ 'disabled': taskService.loading}" :disabled="taskService.loading" class="input" type="text" id="tasktext" placeholder="New subtask" v-model="newTask.text"/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button" @click="addSubtask()"><icon icon="plus"></icon></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button is-success is-fullwidth" :class="{ 'is-loading': loading}">
|
||||
<button type="submit" class="button is-success is-fullwidth" :class="{ 'is-loading': taskService.loading}">
|
||||
Save
|
||||
</button>
|
||||
|
||||
@ -200,294 +200,147 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import {HTTP} from '../../http-common'
|
||||
import message from '../../message'
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import message from '../../message'
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
listID: this.$route.params.id,
|
||||
list: {},
|
||||
newTask: {text: ''},
|
||||
error: '',
|
||||
loading: false,
|
||||
import ListService from '../../services/list'
|
||||
import TaskService from '../../services/task'
|
||||
import TaskModel from '../../models/task'
|
||||
import ListModel from '../../models/list'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
listID: this.$route.params.id,
|
||||
listService: ListService,
|
||||
taskService: TaskService,
|
||||
|
||||
list: {},
|
||||
newTask: TaskModel,
|
||||
isTaskEdit: false,
|
||||
taskEditTask: {
|
||||
subtasks: [],
|
||||
},
|
||||
lastReminder: 0,
|
||||
nowUnix: new Date(),
|
||||
repeatAfter: {type: 'days', amount: null},
|
||||
flatPickerConfig:{
|
||||
altFormat: 'j M Y H:i',
|
||||
altInput: true,
|
||||
dateFormat: 'Y-m-d H:i',
|
||||
flatPickerConfig:{
|
||||
altFormat: 'j M Y H:i',
|
||||
altInput: true,
|
||||
dateFormat: 'Y-m-d H:i',
|
||||
enableTime: true,
|
||||
onOpen: this.updateLastReminderDate,
|
||||
onClose: this.addReminderDate,
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadList()
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'loadList'
|
||||
},
|
||||
methods: {
|
||||
loadList() {
|
||||
this.isTaskEdit = false
|
||||
const cancel = message.setLoading(this)
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.listService = new ListService()
|
||||
this.taskService = new TaskService()
|
||||
this.newTask = new TaskModel()
|
||||
this.loadList()
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'loadList'
|
||||
},
|
||||
methods: {
|
||||
loadList() {
|
||||
this.isTaskEdit = false
|
||||
// We create an extra list object instead of creating it in this.list because that would trigger a ui update which would result in bad ux.
|
||||
let list = new ListModel({id: this.$route.params.id})
|
||||
this.listService.get(list)
|
||||
.then(r => {
|
||||
this.$set(this, 'list', r)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
addTask() {
|
||||
this.newTask.listID = this.$route.params.id
|
||||
this.taskService.create(this.newTask)
|
||||
.then(r => {
|
||||
this.list.addTaskToList(r)
|
||||
message.success({message: 'The task was successfully created.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
|
||||
HTTP.get(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
for (const t in response.data.tasks) {
|
||||
response.data.tasks[t] = this.fixStuffComingFromAPI(response.data.tasks[t])
|
||||
}
|
||||
|
||||
// This adds a new elemednt "list" to our object which contains all lists
|
||||
response.data.tasks = this.sortTasks(response.data.tasks)
|
||||
this.$set(this, 'list', response.data)
|
||||
if (this.list.tasks === null) {
|
||||
this.list.tasks = []
|
||||
}
|
||||
cancel() // cancel the timer
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
addTask() {
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
HTTP.put(`lists/` + this.$route.params.id, this.newTask, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
this.addTaskToList(response.data)
|
||||
this.handleSuccess({message: 'The task was successfully created.'})
|
||||
cancel() // cancel the timer
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
})
|
||||
|
||||
this.newTask = {}
|
||||
},
|
||||
addTaskToList(task) {
|
||||
// If it's a subtask, add it to its parent, otherwise append it to the list of tasks
|
||||
if (task.parentTaskID === 0) {
|
||||
this.list.tasks.push(task)
|
||||
} else {
|
||||
for (const t in this.list.tasks) {
|
||||
if (this.list.tasks[t].id === task.parentTaskID) {
|
||||
this.list.tasks[t].subtasks.push(task)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update the current edit task if needed
|
||||
if (task.ParentTask === this.taskEditTask.id) {
|
||||
this.taskEditTask.subtasks.push(task)
|
||||
}
|
||||
this.list.tasks = this.sortTasks(this.list.tasks)
|
||||
this.newTask = {}
|
||||
},
|
||||
markAsDone(e) {
|
||||
let context = this
|
||||
if (e.target.checked) {
|
||||
setTimeout(doTheDone, 300); // Delay it to show the animation when marking a task as done
|
||||
} else {
|
||||
doTheDone() // Don't delay it when un-marking it as it doesn't have an animation the other way around
|
||||
}
|
||||
|
||||
function doTheDone() {
|
||||
const cancel = message.setLoading(context)
|
||||
|
||||
HTTP.post(`tasks/` + e.target.id, {done: e.target.checked}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
context.updateTaskByID(parseInt(e.target.id), response.data)
|
||||
context.handleSuccess({message: 'The task was successfully ' + (e.target.checked ? '' : 'un-') + 'marked as done.'})
|
||||
cancel() // To not set the spinner to loading when the request is made in less than 100ms, would lead to loading infinitly.
|
||||
let updateFunc = () => {
|
||||
// We get the task, update the 'done' property and then push it to the api.
|
||||
let task = this.list.getTaskByID(e.target.id)
|
||||
task.done = e.target.checked
|
||||
this.taskService.update(task)
|
||||
.then(r => {
|
||||
this.updateTaskInList(r)
|
||||
message.success({message: 'The task was successfully ' + (task.done ? '' : 'un-') + 'marked as done.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
context.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
}
|
||||
|
||||
if (e.target.checked) {
|
||||
setTimeout(updateFunc(), 300); // Delay it to show the animation when marking a task as done
|
||||
} else {
|
||||
updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
|
||||
}
|
||||
},
|
||||
editTask(id) {
|
||||
// Find the selected task and set it to the current object
|
||||
for (const t in this.list.tasks) {
|
||||
if (this.list.tasks[t].id === id) {
|
||||
this.taskEditTask = this.list.tasks[t]
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (this.taskEditTask.reminderDates === null) {
|
||||
this.taskEditTask.reminderDates = []
|
||||
}
|
||||
this.taskEditTask.reminderDates = this.removeNullsFromArray(this.taskEditTask.reminderDates)
|
||||
this.taskEditTask.reminderDates.push(null)
|
||||
|
||||
// Re-convert the the amount from seconds to be used with our form
|
||||
let repeatAfterHours = (this.taskEditTask.repeatAfter / 60) / 60
|
||||
// if its dividable by 24, its something with days
|
||||
if (repeatAfterHours % 24 === 0) {
|
||||
let repeatAfterDays = repeatAfterHours / 24
|
||||
if (repeatAfterDays % 7 === 0) {
|
||||
this.repeatAfter.type = 'weeks'
|
||||
this.repeatAfter.amount = repeatAfterDays / 7
|
||||
} else if (repeatAfterDays % 30 === 0) {
|
||||
this.repeatAfter.type = 'months'
|
||||
this.repeatAfter.amount = repeatAfterDays / 30
|
||||
} else if (repeatAfterDays % 365 === 0) {
|
||||
this.repeatAfter.type = 'years'
|
||||
this.repeatAfter.amount = repeatAfterDays / 365
|
||||
} else {
|
||||
this.repeatAfter.type = 'days'
|
||||
this.repeatAfter.amount = repeatAfterDays
|
||||
}
|
||||
} else {
|
||||
// otherwise hours
|
||||
this.repeatAfter.type = 'hours'
|
||||
this.repeatAfter.amount = repeatAfterHours
|
||||
}
|
||||
|
||||
if(this.taskEditTask.subtasks === null) {
|
||||
this.taskEditTask.subtasks = [];
|
||||
}
|
||||
|
||||
// Find the selected task and set it to the current object
|
||||
let theTask = this.list.getTaskByID(id) // Somehow this does not work if we directly assign this to this.taskEditTask
|
||||
this.taskEditTask = theTask
|
||||
this.isTaskEdit = true
|
||||
},
|
||||
editTaskSubmit() {
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
// Convert the date in a unix timestamp
|
||||
this.taskEditTask.dueDate = (+ new Date(this.taskEditTask.dueDate)) / 1000
|
||||
this.taskEditTask.startDate = (+ new Date(this.taskEditTask.startDate)) / 1000
|
||||
this.taskEditTask.endDate = (+ new Date(this.taskEditTask.endDate)) / 1000
|
||||
|
||||
// remove all nulls
|
||||
this.taskEditTask.reminderDates = this.removeNullsFromArray(this.taskEditTask.reminderDates)
|
||||
// Make normal timestamps from js timestamps
|
||||
for (const t in this.taskEditTask.reminderDates) {
|
||||
this.taskEditTask.reminderDates[t] = Math.round(this.taskEditTask.reminderDates[t] / 1000)
|
||||
}
|
||||
|
||||
// Make the repeating amount to seconds
|
||||
let repeatAfterSeconds = 0
|
||||
if (this.repeatAfter.amount !== null || this.repeatAfter.amount !== 0) {
|
||||
switch (this.repeatAfter.type) {
|
||||
case 'hours':
|
||||
repeatAfterSeconds = this.repeatAfter.amount * 60 * 60
|
||||
break;
|
||||
case 'days':
|
||||
repeatAfterSeconds = this.repeatAfter.amount * 60 * 60 * 24
|
||||
break;
|
||||
case 'weeks':
|
||||
repeatAfterSeconds = this.repeatAfter.amount * 60 * 60 * 24 * 7
|
||||
break;
|
||||
case 'months':
|
||||
repeatAfterSeconds = this.repeatAfter.amount * 60 * 60 * 24 * 30
|
||||
break;
|
||||
case 'years':
|
||||
repeatAfterSeconds = this.repeatAfter.amount * 60 * 60 * 24 * 365
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.taskEditTask.repeatAfter = repeatAfterSeconds
|
||||
|
||||
HTTP.post(`tasks/` + this.taskEditTask.id, this.taskEditTask, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
// Update the task in the list
|
||||
this.updateTaskByID(this.taskEditTask.id, response.data)
|
||||
|
||||
// Also update the current taskedit object so the ui changes
|
||||
response.data.reminderDates.push(null) // To be able to add a new one
|
||||
this.$set(this, 'taskEditTask', response.data)
|
||||
this.handleSuccess({message: 'The task was successfully updated.'})
|
||||
cancel() // cancel the timers
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
})
|
||||
this.taskService.update(this.taskEditTask)
|
||||
.then(r => {
|
||||
this.updateTaskInList(r)
|
||||
this.$set(this, 'taskEditTask', r)
|
||||
message.success({message: 'The task was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
addSubtask() {
|
||||
this.newTask.parentTaskID = this.taskEditTask.id
|
||||
this.addTask()
|
||||
},
|
||||
updateTaskByID(id, updatedTask) {
|
||||
for (const t in this.list.tasks) {
|
||||
if (this.list.tasks[t].id === id) {
|
||||
this.$set(this.list.tasks, t, this.fixStuffComingFromAPI(updatedTask))
|
||||
break
|
||||
}
|
||||
updateTaskInList(task) {
|
||||
// We need to do the update here in the component, because there is no way of notifiying vue of the change otherwise.
|
||||
for (const t in this.list.tasks) {
|
||||
if (this.list.tasks[t].id === task.id) {
|
||||
this.$set(this.list.tasks, t, task)
|
||||
break
|
||||
}
|
||||
|
||||
if (this.list.tasks[t].id === updatedTask.parentTaskID) {
|
||||
if (this.list.tasks[t].id === task.parentTaskID) {
|
||||
for (const s in this.list.tasks[t].subtasks) {
|
||||
if (this.list.tasks[t].subtasks[s].id === updatedTask.id) {
|
||||
this.$set(this.list.tasks[t].subtasks, s, updatedTask)
|
||||
if (this.list.tasks[t].subtasks[s].id === task.id) {
|
||||
this.$set(this.list.tasks[t].subtasks, s, task)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.list.tasks = this.sortTasks(this.list.tasks)
|
||||
},
|
||||
fixStuffComingFromAPI(task) {
|
||||
// Make date objects from timestamps
|
||||
task.dueDate = this.parseDateIfNessecary(task.dueDate)
|
||||
task.startDate = this.parseDateIfNessecary(task.startDate)
|
||||
task.endDate = this.parseDateIfNessecary(task.endDate)
|
||||
|
||||
for (const rd in task.reminderDates) {
|
||||
task.reminderDates[rd] = this.parseDateIfNessecary(task.reminderDates[rd])
|
||||
}
|
||||
|
||||
// Make subtasks into empty array if null
|
||||
if (task.subtasks === null) {
|
||||
task.subtasks = []
|
||||
}
|
||||
|
||||
return task
|
||||
},
|
||||
sortTasks(tasks) {
|
||||
if (tasks === null) {
|
||||
return tasks
|
||||
}
|
||||
return tasks.sort(function(a,b) {
|
||||
if (a.done < b.done)
|
||||
return -1
|
||||
if (a.done > b.done)
|
||||
return 1
|
||||
return 0
|
||||
})
|
||||
},
|
||||
parseDateIfNessecary(dateUnix) {
|
||||
let dateobj = (+new Date(dateUnix * 1000))
|
||||
if (dateobj === 0 || dateUnix === 0) {
|
||||
dateUnix = null
|
||||
} else {
|
||||
dateUnix = dateobj
|
||||
}
|
||||
return dateUnix
|
||||
this.list.sortTasks()
|
||||
},
|
||||
updateLastReminderDate(selectedDates) {
|
||||
this.lastReminder = +new Date(selectedDates[0])
|
||||
@ -513,24 +366,7 @@
|
||||
this.taskEditTask.reminderDates.splice(index, 1)
|
||||
// Reset the last to 0 to have the "add reminder" button
|
||||
this.taskEditTask.reminderDates[this.taskEditTask.reminderDates.length - 1] = null
|
||||
},
|
||||
removeNullsFromArray(array) {
|
||||
for (const index in array) {
|
||||
if (array[index] === null) {
|
||||
array.splice(index, 1)
|
||||
}
|
||||
}
|
||||
return array
|
||||
},
|
||||
formatUnixDate(dateUnix) {
|
||||
return (new Date(dateUnix)).toLocaleString()
|
||||
},
|
||||
handleError(e) {
|
||||
message.error(e, this)
|
||||
},
|
||||
handleSuccess(e) {
|
||||
message.success(e, this)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -32,6 +32,7 @@
|
||||
import router from '../../router'
|
||||
import {HTTP} from '../../http-common'
|
||||
import message from '../../message'
|
||||
import TaskService from '../../services/task'
|
||||
|
||||
export default {
|
||||
name: "ShowTasks",
|
||||
@ -39,7 +40,8 @@
|
||||
return {
|
||||
loading: true,
|
||||
tasks: [],
|
||||
hasUndoneTasks: false
|
||||
hasUndoneTasks: false,
|
||||
taskService: TaskService,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@ -48,10 +50,22 @@
|
||||
showAll: Boolean,
|
||||
},
|
||||
created() {
|
||||
this.taskService = new TaskService()
|
||||
this.loadPendingTasks()
|
||||
},
|
||||
methods: {
|
||||
loadPendingTasks() {
|
||||
// We can't really make this code work until 0.6 is released which will make this exact thing a lot easier.
|
||||
// Because the feature we need here (specifying sort order and start/end date via query parameters) is already in master, we'll just wait and use the legacy method until then.
|
||||
/*
|
||||
let taskDummy = new TaskModel() // Used to specify options for the request
|
||||
this.taskService.getAll(taskDummy)
|
||||
.then(r => {
|
||||
this.tasks = r
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})*/
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
let url = `tasks/all/duedate`
|
||||
|
||||
@ -20,17 +20,17 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'modal',
|
||||
mounted: function () {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Close the model when escape is pressed
|
||||
if (e.keyCode === 27) {
|
||||
this.$emit('close')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'modal',
|
||||
mounted: function () {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Close the model when escape is pressed
|
||||
if (e.keyCode === 27) {
|
||||
this.$emit('close')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="loader-container" v-bind:class="{ 'is-loading': loading}">
|
||||
<div class="loader-container" v-bind:class="{ 'is-loading': namespaceService.loading}">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
@ -12,25 +12,25 @@
|
||||
<div class="field">
|
||||
<label class="label" for="namespacetext">Namespace Name</label>
|
||||
<div class="control">
|
||||
<input v-focus :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="namespacetext" placeholder="The namespace text is here..." v-model="namespace.name">
|
||||
<input v-focus :class="{ 'disabled': namespaceService.loading}" :disabled="namespaceService.loading" class="input" type="text" id="namespacetext" placeholder="The namespace text is here..." v-model="namespace.name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="namespacedescription">Description</label>
|
||||
<div class="control">
|
||||
<textarea :class="{ 'disabled': loading}" :disabled="loading" class="textarea" placeholder="The namespaces description goes here..." id="namespacedescription" v-model="namespace.description"></textarea>
|
||||
<textarea :class="{ 'disabled': namespaceService.loading}" :disabled="namespaceService.loading" class="textarea" placeholder="The namespaces description goes here..." id="namespacedescription" v-model="namespace.description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="columns bigbuttons">
|
||||
<div class="column">
|
||||
<button @click="submit()" class="button is-primary is-fullwidth" :class="{ 'is-loading': loading}">
|
||||
<button @click="submit()" class="button is-primary is-fullwidth" :class="{ 'is-loading': namespaceService.loading}">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="column is-1">
|
||||
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth" :class="{ 'is-loading': loading}">
|
||||
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth" :class="{ 'is-loading': namespaceService.loading}">
|
||||
<span class="icon is-small">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
@ -41,9 +41,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<manageusers :id="namespace.id" type="namespace" :userIsAdmin="userIsAdmin" />
|
||||
|
||||
<manageteams :id="namespace.id" type="namespace" :userIsAdmin="userIsAdmin" />
|
||||
<component :is="manageUsersComponent" :id="namespace.id" type="namespace" :userIsAdmin="userIsAdmin"></component>
|
||||
<component :is="manageTeamsComponent" :id="namespace.id" type="namespace" :userIsAdmin="userIsAdmin"></component>
|
||||
|
||||
<modal
|
||||
v-if="showDeleteModal"
|
||||
@ -57,106 +56,91 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import {HTTP} from '../../http-common'
|
||||
import message from '../../message'
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import message from '../../message'
|
||||
import manageusers from '../sharing/user'
|
||||
import manageteams from '../sharing/team'
|
||||
import NamespaceService from '../../services/namespace'
|
||||
import NamespaceModel from '../../models/namespace'
|
||||
|
||||
export default {
|
||||
name: "EditNamespace",
|
||||
data() {
|
||||
return {
|
||||
namespace: {title: '', description:''},
|
||||
error: '',
|
||||
loading: false,
|
||||
showDeleteModal: false,
|
||||
user: auth.user,
|
||||
export default {
|
||||
name: "EditNamespace",
|
||||
data() {
|
||||
return {
|
||||
namespaceService: NamespaceService,
|
||||
userIsAdmin: false,
|
||||
}
|
||||
},
|
||||
manageUsersComponent: '',
|
||||
manageTeamsComponent: '',
|
||||
|
||||
namespace: NamespaceModel,
|
||||
showDeleteModal: false,
|
||||
user: auth.user,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
manageusers,
|
||||
manageteams,
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
|
||||
this.namespace.id = this.$route.params.id
|
||||
},
|
||||
created() {
|
||||
this.loadNamespace()
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'loadNamespace'
|
||||
},
|
||||
this.namespace.id = this.$route.params.id
|
||||
},
|
||||
created() {
|
||||
this.namespaceService = new NamespaceService()
|
||||
this.loadNamespace()
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'loadNamespace'
|
||||
},
|
||||
methods: {
|
||||
loadNamespace() {
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
HTTP.get(`namespaces/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
this.$set(this, 'namespace', response.data)
|
||||
if (response.data.owner.id === this.user.infos.id) {
|
||||
loadNamespace() {
|
||||
let namespace = new NamespaceModel({id: this.$route.params.id})
|
||||
this.namespaceService.get(namespace)
|
||||
.then(r => {
|
||||
this.$set(this, 'namespace', r)
|
||||
if (r.owner.id === this.user.infos.id) {
|
||||
this.userIsAdmin = true
|
||||
}
|
||||
cancel()
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
HTTP.post(`namespaces/` + this.$route.params.id, this.namespace, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
// Update the namespace in the parent
|
||||
for (const n in this.$parent.namespaces) {
|
||||
if (this.$parent.namespaces[n].id === response.data.id) {
|
||||
response.data.lists = this.$parent.namespaces[n].lists
|
||||
this.$set(this.$parent.namespaces, n, response.data)
|
||||
}
|
||||
}
|
||||
this.handleSuccess({message: 'The namespace was successfully updated.'})
|
||||
cancel()
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
deleteNamespace() {
|
||||
const cancel = message.setLoading(this)
|
||||
HTTP.delete(`namespaces/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(() => {
|
||||
this.handleSuccess({message: 'The namespace was successfully deleted.'})
|
||||
cancel()
|
||||
router.push({name: 'home'})
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
})
|
||||
// This will trigger the dynamic loading of components once we actually have all the data to pass to them
|
||||
this.manageTeamsComponent = 'manageteams'
|
||||
this.manageUsersComponent = 'manageusers'
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
handleError(e) {
|
||||
message.error(e, this)
|
||||
},
|
||||
handleSuccess(e) {
|
||||
message.success(e, this)
|
||||
}
|
||||
submit() {
|
||||
this.namespaceService.update(this.namespace)
|
||||
.then(r => {
|
||||
// Update the namespace in the parent
|
||||
for (const n in this.$parent.namespaces) {
|
||||
if (this.$parent.namespaces[n].id === r.id) {
|
||||
r.lists = this.$parent.namespaces[n].lists
|
||||
this.$set(this.$parent.namespaces, n, r)
|
||||
}
|
||||
}
|
||||
message.success({message: 'The namespace was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteNamespace() {
|
||||
this.namespaceService.delete(this.namespace)
|
||||
.then(() => {
|
||||
message.success({message: 'The namespace was successfully deleted.'}, this)
|
||||
router.push({name: 'home'})
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bigbuttons{
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@ -7,8 +7,8 @@
|
||||
<h3>Create a new namespace</h3>
|
||||
<form @submit.prevent="newNamespace" @keyup.esc="back()">
|
||||
<div class="field is-grouped">
|
||||
<p class="control is-expanded" v-bind:class="{ 'is-loading': loading}">
|
||||
<input v-focus class="input" v-bind:class="{ 'disabled': loading}" v-model="namespace.name" type="text" placeholder="The namespace's name goes here...">
|
||||
<p class="control is-expanded" v-bind:class="{ 'is-loading': namespaceService.loading}">
|
||||
<input v-focus class="input" v-bind:class="{ 'disabled': namespaceService.loading}" v-model="namespace.name" type="text" placeholder="The namespace's name goes here...">
|
||||
</p>
|
||||
<p class="control">
|
||||
<button type="submit" class="button is-success noshadow">
|
||||
@ -27,16 +27,16 @@
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import {HTTP} from '../../http-common'
|
||||
import message from '../../message'
|
||||
import NamespaceModel from "../../models/namespace";
|
||||
import NamespaceService from "../../services/namespace";
|
||||
|
||||
export default {
|
||||
name: "NewNamespace",
|
||||
data() {
|
||||
return {
|
||||
namespace: {title: ''},
|
||||
error: '',
|
||||
loading: false
|
||||
namespace: NamespaceModel,
|
||||
namespaceService: NamespaceService,
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
@ -46,32 +46,24 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.namespace = new NamespaceModel()
|
||||
this.namespaceService = new NamespaceService()
|
||||
this.$parent.setFullPage();
|
||||
},
|
||||
methods: {
|
||||
newNamespace() {
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
HTTP.put(`namespaces`, this.namespace, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
this.namespaceService.create(this.namespace)
|
||||
.then(() => {
|
||||
this.$parent.loadNamespaces()
|
||||
this.handleSuccess({message: 'The namespace was successfully created.'})
|
||||
cancel()
|
||||
message.success({message: 'The namespace was successfully created.'}, this)
|
||||
router.push({name: 'home'})
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
back() {
|
||||
router.go(-1)
|
||||
},
|
||||
handleError(e) {
|
||||
message.error(e, this)
|
||||
},
|
||||
handleSuccess(e) {
|
||||
message.success(e, this)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
<div class="card-content content teams-list">
|
||||
<form @submit.prevent="addTeam()" class="add-team-form" v-if="userIsAdmin">
|
||||
<div class="field is-grouped">
|
||||
<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
|
||||
<input class="input" v-bind:class="{ 'disabled': loading}" v-model.number="newTeam.team_id" type="text" placeholder="Add a new team...">
|
||||
<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': this.teamService.loading}">
|
||||
<input class="input" v-bind:class="{ 'disabled': this.teamService.loading}" v-model.number="teamStuffModel.teamID" type="text" placeholder="Add a new team...">
|
||||
<span class="icon is-small is-left">
|
||||
<icon icon="users"/>
|
||||
</span>
|
||||
@ -86,9 +86,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {HTTP} from '../../http-common'
|
||||
import auth from '../../auth'
|
||||
import message from '../../message'
|
||||
import TeamNamespaceService from '../../services/teamNamespace'
|
||||
import TeamNamespaceModel from '../../models/teamNamespace'
|
||||
import TeamListModel from '../../models/teamList'
|
||||
import TeamListService from '../../services/teamList'
|
||||
|
||||
export default {
|
||||
name: 'team',
|
||||
@ -99,11 +102,13 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
teamService: Object, // This team service is either a teamNamespaceService or a teamListService, depending on the type we are using
|
||||
teamStuffModel: Object,
|
||||
|
||||
currentUser: auth.user.infos,
|
||||
typeString: '',
|
||||
listTeams: [],
|
||||
newTeam: {team_id: 0},
|
||||
newTeam: {teamID: 0},
|
||||
showTeamDeleteModal: false,
|
||||
teamToDelete: 0,
|
||||
}
|
||||
@ -111,8 +116,12 @@
|
||||
created() {
|
||||
if (this.type === 'list') {
|
||||
this.typeString = `list`
|
||||
this.teamService = new TeamListService()
|
||||
this.teamStuffModel = new TeamListModel({listID: this.id})
|
||||
} else if (this.type === 'namespace') {
|
||||
this.typeString = `namespace`
|
||||
this.teamService = new TeamNamespaceService()
|
||||
this.teamStuffModel = new TeamNamespaceModel({namespaceID: this.id})
|
||||
} else {
|
||||
throw new Error('Unknown type: ' + this.type)
|
||||
}
|
||||
@ -121,75 +130,61 @@
|
||||
},
|
||||
methods: {
|
||||
loadTeams() {
|
||||
const cancel = message.setLoading(this)
|
||||
HTTP.get(this.typeString + `s/` + this.id + `/teams`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
this.$set(this, 'listTeams', response.data)
|
||||
cancel()
|
||||
this.teamService.getAll(this.teamStuffModel)
|
||||
.then(r => {
|
||||
this.$set(this, 'listTeams', r)
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteTeam() {
|
||||
const cancel = message.setLoading(this)
|
||||
HTTP.delete(this.typeString + `s/` + this.id + `/teams/` + this.teamToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
this.teamService.delete(this.teamStuffModel)
|
||||
.then(() => {
|
||||
this.showTeamDeleteModal = false;
|
||||
this.handleSuccess({message: 'The team was successfully deleted from the ' + this.typeString + '.'})
|
||||
message.success({message: 'The team was successfully deleted from the ' + this.typeString + '.'}, this)
|
||||
// FIXME: this should remove the team from the list instead of loading it again
|
||||
this.loadTeams()
|
||||
cancel()
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
addTeam(admin) {
|
||||
const cancel = message.setLoading(this)
|
||||
if(admin === null) {
|
||||
admin = false
|
||||
}
|
||||
this.newTeam.right = 0
|
||||
this.teamStuffModel.right = 0
|
||||
if (admin) {
|
||||
this.newTeam.right = 2
|
||||
this.teamStuffModel.right = 2
|
||||
}
|
||||
|
||||
HTTP.put(this.typeString + `s/` + this.id + `/teams`, this.newTeam, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
this.teamService.create(this.teamStuffModel)
|
||||
.then(() => {
|
||||
// FIXME: this should add the team to the list instead of loading it again
|
||||
this.loadTeams()
|
||||
this.handleSuccess({message: 'The team was successfully added.'})
|
||||
cancel()
|
||||
message.success({message: 'The team was successfully added.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
toggleTeamType(teamid, current) {
|
||||
const cancel = message.setLoading(this)
|
||||
let right = 0
|
||||
this.teamStuffModel.teamID = teamid
|
||||
this.teamStuffModel.right = 0
|
||||
if (!current) {
|
||||
right = 2
|
||||
this.teamStuffModel.right = 2
|
||||
}
|
||||
|
||||
HTTP.post(this.typeString + `s/` + this.id + `/teams/` + teamid, {right: right}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
this.teamService.update(this.teamStuffModel)
|
||||
.then(() => {
|
||||
// FIXME: this should update the team in the list instead of loading it again
|
||||
this.loadTeams()
|
||||
this.handleSuccess({message: 'The team right was successfully updated.'})
|
||||
cancel()
|
||||
message.success({message: 'The team right was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
handleError(e) {
|
||||
message.error(e, this)
|
||||
},
|
||||
handleSuccess(e) {
|
||||
message.success(e, this)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@ -9,21 +9,20 @@
|
||||
<div class="card-content content users-list">
|
||||
<form @submit.prevent="addUser()" class="add-user-form" v-if="userIsAdmin">
|
||||
<div class="field is-grouped">
|
||||
<p class="control is-expanded" v-bind:class="{ 'is-loading': loading}">
|
||||
<p class="control is-expanded" v-bind:class="{ 'is-loading': userStuffService.loading}">
|
||||
<multiselect
|
||||
v-model="newUser"
|
||||
v-model="user"
|
||||
:options="foundUsers"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:loading="loading"
|
||||
:loading="userService.loading"
|
||||
:internal-search="true"
|
||||
@search-change="findUsers"
|
||||
placeholder="Type to search a user"
|
||||
label="username"
|
||||
track-by="user_id">
|
||||
|
||||
track-by="id">
|
||||
<template slot="clear" slot-scope="props">
|
||||
<div class="multiselect__clear" v-if="newUser.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
|
||||
<div class="multiselect__clear" v-if="user.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
|
||||
</template>
|
||||
<span slot="noResult">Oops! No users found. Consider changing the search query.</span>
|
||||
</multiselect>
|
||||
@ -77,7 +76,7 @@
|
||||
Admin
|
||||
</template>
|
||||
</button>
|
||||
<button @click="userToDelete = u.id; showUserDeleteModal = true" class="button is-danger" v-if="u.id !== currentUser.id">
|
||||
<button @click="user = u; showUserDeleteModal = true" class="button is-danger" v-if="u.id !== currentUser.id">
|
||||
<span class="icon is-small">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
@ -100,12 +99,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {HTTP} from '../../http-common'
|
||||
import auth from '../../auth'
|
||||
import message from '../../message'
|
||||
import multiselect from 'vue-multiselect'
|
||||
import 'vue-multiselect/dist/vue-multiselect.min.css'
|
||||
|
||||
import UserService from '../../services/user'
|
||||
import UserNamespaceModel from '../../models/userNamespace'
|
||||
import UserListModel from '../../models/userList'
|
||||
import UserListService from '../../services/userList'
|
||||
import UserNamespaceService from '../../services/userNamespace'
|
||||
import UserModel from '../../models/user'
|
||||
|
||||
export default {
|
||||
name: 'user',
|
||||
props: {
|
||||
@ -115,14 +120,15 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
userService: UserService, // To search for users
|
||||
user: UserModel,
|
||||
userStuff: Object, // This will be either UserNamespaceModel or UserListModel
|
||||
userStuffService: Object, // This will be either UserListService or UserNamespaceService
|
||||
|
||||
currentUser: auth.user.infos,
|
||||
typeString: '',
|
||||
showUserDeleteModal: false,
|
||||
users: [],
|
||||
newUser: {username: '', user_id: 0},
|
||||
userToDelete: 0,
|
||||
newUserid: 0,
|
||||
foundUsers: [],
|
||||
}
|
||||
},
|
||||
@ -130,10 +136,17 @@
|
||||
multiselect
|
||||
},
|
||||
created() {
|
||||
this.userService = new UserService()
|
||||
this.user = new UserModel()
|
||||
|
||||
if (this.type === 'list') {
|
||||
this.typeString = `list`
|
||||
this.userStuffService = new UserListService()
|
||||
this.userStuff = new UserListModel({listID: this.id})
|
||||
} else if (this.type === 'namespace') {
|
||||
this.typeString = `namespace`
|
||||
this.userStuffService = new UserNamespaceService()
|
||||
this.userStuff = new UserNamespaceModel({namespaceID: this.id})
|
||||
} else {
|
||||
throw new Error('Unknown type: ' + this.type)
|
||||
}
|
||||
@ -142,100 +155,76 @@
|
||||
},
|
||||
methods: {
|
||||
loadUsers() {
|
||||
const cancel = message.setLoading(this)
|
||||
HTTP.get(this.typeString + `s/` + this.id + `/users`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
this.userStuffService.getAll(this.userStuff)
|
||||
.then(response => {
|
||||
//response.data.push(this.list.owner)
|
||||
this.$set(this, 'users', response.data)
|
||||
cancel()
|
||||
this.$set(this, 'users', response)
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteUser() {
|
||||
const cancel = message.setLoading(this)
|
||||
HTTP.delete(this.typeString + `s/` + this.id + `/users/` + this.userToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
// The api wants the user id as userID
|
||||
let usr = this.user
|
||||
this.userStuff.userID = usr.id
|
||||
|
||||
this.userStuffService.delete(this.userStuff)
|
||||
.then(() => {
|
||||
this.showUserDeleteModal = false;
|
||||
this.handleSuccess({message: 'The user was successfully deleted from the ' + this.typeString + '.'})
|
||||
message.success({message: 'The user was successfully deleted from the ' + this.typeString + '.'}, this)
|
||||
this.loadUsers()
|
||||
cancel()
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
addUser(admin) {
|
||||
const cancel = message.setLoading(this)
|
||||
if(admin === null) {
|
||||
admin = false
|
||||
}
|
||||
this.newUser.right = 0
|
||||
addUser(admin = false) {
|
||||
this.userStuff.right = 0
|
||||
if (admin) {
|
||||
this.newUser.right = 2
|
||||
this.userStuff.right = 2
|
||||
}
|
||||
|
||||
// The api wants the user id as userID
|
||||
this.userStuff.userID = this.user.id
|
||||
this.$set(this, 'foundUsers', [])
|
||||
|
||||
HTTP.put(this.typeString + `s/` + this.id + `/users`, this.newUser, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
this.userStuffService.create(this.userStuff)
|
||||
.then(() => {
|
||||
this.loadUsers()
|
||||
this.newUser = {}
|
||||
this.handleSuccess({message: 'The user was successfully added.'})
|
||||
cancel()
|
||||
message.success({message: 'The user was successfully added.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
toggleUserType(userid, current) {
|
||||
const cancel = message.setLoading(this)
|
||||
let right = 0
|
||||
this.userStuff.userID = userid
|
||||
this.userStuff.right = 0
|
||||
if (!current) {
|
||||
right = 2
|
||||
this.userStuff.right = 2
|
||||
}
|
||||
|
||||
HTTP.post(this.typeString + `s/` + this.id + `/users/` + userid, {right: right}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
this.userStuffService.update(this.userStuff)
|
||||
.then(() => {
|
||||
this.loadUsers()
|
||||
this.handleSuccess({message: 'The user right was successfully updated.'})
|
||||
cancel()
|
||||
message.success({message: 'The user right was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
findUsers(query) {
|
||||
const cancel = message.setLoading(this)
|
||||
if(query === '') {
|
||||
this.$set(this, 'foundUsers', [])
|
||||
cancel()
|
||||
return
|
||||
}
|
||||
|
||||
this.$set(this, 'newUser', {username: '', user_id: 0})
|
||||
|
||||
HTTP.get(`users?s=` + query, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
this.userService.getAll({}, {s: query})
|
||||
.then(response => {
|
||||
this.$set(this, 'foundUsers', [])
|
||||
|
||||
for (const u in response.data) {
|
||||
this.foundUsers.push({
|
||||
username: response.data[u].username,
|
||||
user_id: response.data[u].id,
|
||||
})
|
||||
}
|
||||
|
||||
cancel()
|
||||
this.$set(this, 'foundUsers', response)
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
clearAll () {
|
||||
@ -244,12 +233,6 @@
|
||||
limitText (count) {
|
||||
return `and ${count} others`
|
||||
},
|
||||
handleError(e) {
|
||||
message.error(e, this)
|
||||
},
|
||||
handleSuccess(e) {
|
||||
message.success(e, this)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="loader-container" v-bind:class="{ 'is-loading': loading}">
|
||||
<div class="loader-container" v-bind:class="{ 'is-loading': teamService.loading}">
|
||||
<div class="card" v-if="userIsAdmin">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
@ -12,25 +12,25 @@
|
||||
<div class="field">
|
||||
<label class="label" for="teamtext">Team Name</label>
|
||||
<div class="control">
|
||||
<input v-focus :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="teamtext" placeholder="The team text is here..." v-model="team.name">
|
||||
<input v-focus :class="{ 'disabled': teamMemberService.loading}" :disabled="teamMemberService.loading" class="input" type="text" id="teamtext" placeholder="The team text is here..." v-model="team.name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="teamdescription">Description</label>
|
||||
<div class="control">
|
||||
<textarea :class="{ 'disabled': loading}" :disabled="loading" class="textarea" placeholder="The teams description goes here..." id="teamdescription" v-model="team.description"></textarea>
|
||||
<textarea :class="{ 'disabled': teamService.loading}" :disabled="teamService.loading" class="textarea" placeholder="The teams description goes here..." id="teamdescription" v-model="team.description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="columns bigbuttons">
|
||||
<div class="column">
|
||||
<button @click="submit()" class="button is-success is-fullwidth" :class="{ 'is-loading': loading}">
|
||||
<button @click="submit()" class="button is-success is-fullwidth" :class="{ 'is-loading': teamService.loading}">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="column is-1">
|
||||
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth" :class="{ 'is-loading': loading}">
|
||||
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth" :class="{ 'is-loading': teamService.loading}">
|
||||
<span class="icon is-small">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
@ -50,8 +50,8 @@
|
||||
<div class="card-content content team-members">
|
||||
<form @submit.prevent="addUser()" class="add-member-form" v-if="userIsAdmin">
|
||||
<div class="field is-grouped">
|
||||
<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
|
||||
<input class="input" v-bind:class="{ 'disabled': loading}" v-model.number="newUser.id" type="text" placeholder="Add a new user...">
|
||||
<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': teamMemberService.loading}">
|
||||
<input class="input" v-bind:class="{ 'disabled': teamMemberService.loading}" v-model.number="member.id" type="text" placeholder="Add a new user...">
|
||||
<span class="icon is-small is-left">
|
||||
<icon icon="user"/>
|
||||
</span>
|
||||
@ -90,7 +90,7 @@
|
||||
</template>
|
||||
</td>
|
||||
<td class="actions" v-if="userIsAdmin">
|
||||
<button @click="toggleUserType(m.id, m.admin)" class="button buttonright is-primary" v-if="m.id !== user.infos.id">
|
||||
<button @click="toggleUserType(m)" class="button buttonright is-primary" v-if="m.id !== user.infos.id">
|
||||
Make
|
||||
<template v-if="!m.admin">
|
||||
Admin
|
||||
@ -99,7 +99,7 @@
|
||||
Member
|
||||
</template>
|
||||
</button>
|
||||
<button @click="userToDelete = m.id; showUserDeleteModal = true" class="button is-danger" v-if="m.id !== user.infos.id">
|
||||
<button @click="member = m; showUserDeleteModal = true" class="button is-danger" v-if="m.id !== user.infos.id">
|
||||
<span class="icon is-small">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
@ -135,135 +135,115 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import {HTTP} from '../../http-common'
|
||||
import message from '../../message'
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import message from '../../message'
|
||||
|
||||
import TeamService from '../../services/team'
|
||||
import TeamModel from '../../models/team'
|
||||
import TeamMemberService from '../../services/teamMember'
|
||||
import TeamMemberModel from '../../models/teamMember'
|
||||
|
||||
export default {
|
||||
name: "EditTeam",
|
||||
data() {
|
||||
return {
|
||||
team: {title: '', description:''},
|
||||
error: '',
|
||||
loading: false,
|
||||
showDeleteModal: false,
|
||||
export default {
|
||||
name: "EditTeam",
|
||||
data() {
|
||||
return {
|
||||
teamService: TeamService,
|
||||
teamMemberService: TeamMemberService,
|
||||
team: TeamModel,
|
||||
member: TeamMemberModel,
|
||||
|
||||
showDeleteModal: false,
|
||||
showUserDeleteModal: false,
|
||||
user: auth.user,
|
||||
userIsAdmin: false,
|
||||
userToDelete: 0,
|
||||
newUser: {id:0},
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadTeam()
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'loadTeam'
|
||||
},
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.teamService = new TeamService()
|
||||
this.teamMemberService = new TeamMemberService()
|
||||
this.loadTeam()
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'loadTeam'
|
||||
},
|
||||
methods: {
|
||||
loadTeam() {
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
HTTP.get(`teams/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
this.$set(this, 'team', response.data)
|
||||
let members = response.data.members
|
||||
loadTeam() {
|
||||
this.member = new TeamMemberModel({teamID: this.$route.params.id})
|
||||
this.team = new TeamModel({id: this.$route.params.id})
|
||||
this.teamService.get(this.team)
|
||||
.then(response => {
|
||||
this.$set(this, 'team', response)
|
||||
let members = response.members
|
||||
for (const m in members) {
|
||||
members[m].teamID = this.$route.params.id
|
||||
if (members[m].id === this.user.infos.id && members[m].admin) {
|
||||
this.userIsAdmin = true
|
||||
}
|
||||
}
|
||||
cancel()
|
||||
})
|
||||
.catch(e => {
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
HTTP.post(`teams/` + this.$route.params.id, this.team, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
// Update the team in the parent
|
||||
for (const n in this.$parent.teams) {
|
||||
if (this.$parent.teams[n].id === response.data.id) {
|
||||
response.data.lists = this.$parent.teams[n].lists
|
||||
this.$set(this.$parent.teams, n, response.data)
|
||||
}
|
||||
}
|
||||
this.handleSuccess({message: 'The team was successfully updated.'})
|
||||
cancel()
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
deleteTeam() {
|
||||
const cancel = message.setLoading(this)
|
||||
HTTP.delete(`teams/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(() => {
|
||||
this.handleSuccess({message: 'The team was successfully deleted.'})
|
||||
cancel()
|
||||
router.push({name: 'home'})
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
})
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
this.teamService.update(this.team)
|
||||
.then(response => {
|
||||
this.team = response
|
||||
message.success({message: 'The team was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteTeam() {
|
||||
this.teamService.delete(this.team)
|
||||
.then(() => {
|
||||
message.success({message: 'The team was successfully deleted.'}, this)
|
||||
router.push({name: 'listTeams'})
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteUser() {
|
||||
const cancel = message.setLoading(this)
|
||||
HTTP.delete(`teams/` + this.$route.params.id + `/members/` + this.userToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
this.teamMemberService.delete(this.member)
|
||||
.then(() => {
|
||||
this.showUserDeleteModal = false;
|
||||
this.handleSuccess({message: 'The user was successfully deleted from the team.'})
|
||||
message.success({message: 'The user was successfully deleted from the team.'}, this)
|
||||
this.loadTeam()
|
||||
cancel()
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
.finally(() => {
|
||||
this.showUserDeleteModal = false
|
||||
})
|
||||
},
|
||||
addUser(admin) {
|
||||
const cancel = message.setLoading(this)
|
||||
if(admin === null) {
|
||||
admin = false
|
||||
}
|
||||
HTTP.put(`teams/` + this.$route.params.id + `/members`, {admin: admin, user_id: this.newUser.id}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
addUser() {
|
||||
this.teamMemberService.create(this.member)
|
||||
.then(() => {
|
||||
this.loadTeam()
|
||||
this.handleSuccess({message: 'The team member was successfully added.'})
|
||||
cancel()
|
||||
message.success({message: 'The team member was successfully added.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
toggleUserType(userid, current) {
|
||||
this.userToDelete = userid
|
||||
this.newUser.id = userid
|
||||
toggleUserType(member) {
|
||||
this.member = member
|
||||
this.member.admin = !member.admin
|
||||
this.deleteUser()
|
||||
this.addUser(!current)
|
||||
},
|
||||
handleError(e) {
|
||||
message.error(e, this)
|
||||
},
|
||||
handleSuccess(e) {
|
||||
message.success(e, this)
|
||||
}
|
||||
this.addUser()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="content loader-container" v-bind:class="{ 'is-loading': loading}">
|
||||
<div class="content loader-container" v-bind:class="{ 'is-loading': teamService.loading}">
|
||||
<router-link :to="{name:'newTeam'}" class="button is-success button-right" >
|
||||
<span class="icon is-small">
|
||||
<icon icon="plus"/>
|
||||
@ -18,45 +18,39 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import {HTTP} from '../../http-common'
|
||||
import message from '../../message'
|
||||
|
||||
export default {
|
||||
name: "ListTeams",
|
||||
data() {
|
||||
return {
|
||||
teams: [],
|
||||
error: '',
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadTeams()
|
||||
},
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import message from '../../message'
|
||||
import TeamService from '../../services/team'
|
||||
|
||||
export default {
|
||||
name: "ListTeams",
|
||||
data() {
|
||||
return {
|
||||
teamService: TeamService,
|
||||
teams: [],
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.teamService = new TeamService()
|
||||
this.loadTeams()
|
||||
},
|
||||
methods: {
|
||||
loadTeams() {
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
HTTP.get(`teams`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
this.$set(this, 'teams', response.data)
|
||||
cancel()
|
||||
})
|
||||
.catch(e => {
|
||||
this.handleError(e)
|
||||
})
|
||||
this.teamService.getAll()
|
||||
.then(response => {
|
||||
this.$set(this, 'teams', response)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
handleError(e) {
|
||||
message.error(e, this)
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
<h3>Create a new team</h3>
|
||||
<form @submit.prevent="newTeam" @keyup.esc="back()">
|
||||
<div class="field is-grouped">
|
||||
<p class="control is-expanded" v-bind:class="{ 'is-loading': loading}">
|
||||
<input v-focus class="input" v-bind:class="{ 'disabled': loading}" v-model="team.name" type="text" placeholder="The team's name goes here...">
|
||||
<p class="control is-expanded" v-bind:class="{ 'is-loading': teamService.loading}">
|
||||
<input v-focus class="input" v-bind:class="{ 'disabled': teamService.loading}" v-model="team.name" type="text" placeholder="The team's name goes here...">
|
||||
</p>
|
||||
<p class="control">
|
||||
<button type="submit" class="button is-success noshadow">
|
||||
@ -26,16 +26,16 @@
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import {HTTP} from '../../http-common'
|
||||
import message from '../../message'
|
||||
import TeamModel from '../../models/team'
|
||||
import TeamService from '../../services/team'
|
||||
|
||||
export default {
|
||||
name: "NewTeam",
|
||||
data() {
|
||||
return {
|
||||
team: {title: ''},
|
||||
error: '',
|
||||
loading: false
|
||||
teamService: TeamService,
|
||||
team: TeamModel,
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
@ -45,32 +45,23 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.teamService = new TeamService()
|
||||
this.$parent.setFullPage();
|
||||
},
|
||||
methods: {
|
||||
newTeam() {
|
||||
const cancel = message.setLoading(this)
|
||||
|
||||
HTTP.put(`teams`, this.team, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
this.teamService.create(this.team)
|
||||
.then(response => {
|
||||
router.push({name:'editTeam', params:{id: response.data.id}})
|
||||
this.handleSuccess({message: 'The team was successfully created.'})
|
||||
cancel()
|
||||
router.push({name:'editTeam', params:{id: response.id}})
|
||||
message.success({message: 'The team was successfully created.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
back() {
|
||||
router.go(-1)
|
||||
},
|
||||
handleError(e) {
|
||||
message.error(e, this)
|
||||
},
|
||||
handleSuccess(e) {
|
||||
message.success(e, this)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -33,58 +33,59 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import {HTTP} from '../../http-common'
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import {HTTP} from '../../http-common'
|
||||
import message from '../../message'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
error: '',
|
||||
confirmedEmailSuccess: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Try to verify the email
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
error: '',
|
||||
confirmedEmailSuccess: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Try to verify the email
|
||||
// FIXME: Why is this here? Can we find a better place for this?
|
||||
let emailVerifyToken = localStorage.getItem('emailConfirmToken')
|
||||
if (emailVerifyToken) {
|
||||
const cancel = message.setLoading(this)
|
||||
HTTP.post(`user/confirm`, {token: emailVerifyToken})
|
||||
.then(() => {
|
||||
localStorage.removeItem('emailConfirmToken')
|
||||
this.confirmedEmailSuccess = true
|
||||
localStorage.removeItem('emailConfirmToken')
|
||||
this.confirmedEmailSuccess = true
|
||||
cancel()
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.error = e.response.data.message
|
||||
})
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.error = e.response.data.message
|
||||
})
|
||||
}
|
||||
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.loading = true
|
||||
this.error = ''
|
||||
let credentials = {
|
||||
username: this.credentials.username,
|
||||
password: this.credentials.password
|
||||
}
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.loading = true
|
||||
this.error = ''
|
||||
let credentials = {
|
||||
username: this.credentials.username,
|
||||
password: this.credentials.password
|
||||
}
|
||||
|
||||
auth.login(this, credentials, 'home')
|
||||
}
|
||||
}
|
||||
}
|
||||
auth.login(this, credentials, 'home')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -16,10 +16,10 @@
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': loading}">Reset your password</button>
|
||||
<button type="submit" class="button is-primary" :class="{ 'is-loading': this.passwordResetService.loading}">Reset your password</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification is-info" v-if="loading">
|
||||
<div class="notification is-info" v-if="this.passwordResetService.loading">
|
||||
Loading...
|
||||
</div>
|
||||
<div class="notification is-danger" v-if="error">
|
||||
@ -37,56 +37,45 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {HTTP} from '../../http-common'
|
||||
import message from '../../message'
|
||||
import PasswordResetModel from '../../models/passwordReset'
|
||||
import PasswordResetService from '../../services/passwordReset'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
password: '',
|
||||
password2: '',
|
||||
},
|
||||
error: '',
|
||||
successMessage: '',
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
const cancel = message.setLoading(this)
|
||||
this.error = ''
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
passwordResetService: PasswordResetService,
|
||||
credentials: {
|
||||
password: '',
|
||||
password2: '',
|
||||
},
|
||||
error: '',
|
||||
successMessage: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.passwordResetService = new PasswordResetService()
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.error = ''
|
||||
|
||||
if (this.credentials.password2 !== this.credentials.password) {
|
||||
cancel()
|
||||
this.error = 'Passwords don\'t match'
|
||||
return
|
||||
}
|
||||
|
||||
let resetPasswordPayload = {
|
||||
token: localStorage.getItem('passwordResetToken'),
|
||||
new_password: this.credentials.password
|
||||
if (this.credentials.password2 !== this.credentials.password) {
|
||||
this.error = 'Passwords don\'t match'
|
||||
return
|
||||
}
|
||||
|
||||
HTTP.post(`user/password/reset`, resetPasswordPayload)
|
||||
.then(response => {
|
||||
this.handleSuccess(response)
|
||||
localStorage.removeItem('passwordResetToken')
|
||||
cancel()
|
||||
})
|
||||
.catch(e => {
|
||||
this.error = e.response.data.message
|
||||
cancel()
|
||||
})
|
||||
},
|
||||
handleError(e) {
|
||||
this.error = e.response.data.message
|
||||
},
|
||||
handleSuccess(e) {
|
||||
this.successMessage = e.data.message
|
||||
}
|
||||
}
|
||||
}
|
||||
let passwordReset = new PasswordResetModel({new_password: this.credentials.password})
|
||||
this.passwordResetService.resetPassword(passwordReset)
|
||||
.then(response => {
|
||||
this.successMessage = response.data.message
|
||||
localStorage.removeItem('passwordResetToken')
|
||||
})
|
||||
.catch(e => {
|
||||
this.error = e.response.data.message
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -42,50 +42,50 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
username: '',
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password2: '',
|
||||
},
|
||||
error: '',
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.loading = true
|
||||
password: '',
|
||||
password2: '',
|
||||
},
|
||||
error: '',
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.loading = true
|
||||
|
||||
this.error = ''
|
||||
this.error = ''
|
||||
|
||||
if (this.credentials.password2 !== this.credentials.password) {
|
||||
this.loading = false
|
||||
this.error = 'Passwords don\'t match'
|
||||
this.loading = false
|
||||
this.error = 'Passwords don\'t match'
|
||||
return
|
||||
}
|
||||
|
||||
let credentials = {
|
||||
username: this.credentials.username,
|
||||
email: this.credentials.email,
|
||||
password: this.credentials.password
|
||||
}
|
||||
let credentials = {
|
||||
username: this.credentials.username,
|
||||
email: this.credentials.email,
|
||||
password: this.credentials.password
|
||||
}
|
||||
|
||||
auth.register(this, credentials, 'home')
|
||||
}
|
||||
}
|
||||
}
|
||||
auth.register(this, credentials, 'home')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<form id="loginform" @submit.prevent="submit" v-if="!isSuccess">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input v-focus type="text" class="input" name="email" placeholder="Email-Adress" v-model="email" required>
|
||||
<input v-focus type="text" class="input" name="email" placeholder="Email-Adress" v-model="passwordReset.email" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': loading}">Send me a password reset link</button>
|
||||
<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': passwordResetService.loading}">Send me a password reset link</button>
|
||||
<router-link :to="{ name: 'login' }" class="button">Login</router-link>
|
||||
</div>
|
||||
</div>
|
||||
@ -30,41 +30,35 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {HTTP} from '../../http-common'
|
||||
import message from '../../message'
|
||||
import PasswordResetModel from '../../models/passwordReset'
|
||||
import PasswordResetService from '../../services/passwordReset'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
email: '',
|
||||
error: '',
|
||||
isSuccess: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
const cancel = message.setLoading(this)
|
||||
this.error = ''
|
||||
let credentials = {
|
||||
email: this.email,
|
||||
}
|
||||
|
||||
HTTP.post(`user/password/token`, credentials)
|
||||
.then(() => {
|
||||
cancel()
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
passwordResetService: PasswordResetService,
|
||||
passwordReset: PasswordResetModel,
|
||||
error: '',
|
||||
isSuccess: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.passwordResetService = new PasswordResetService()
|
||||
this.passwordReset = new PasswordResetModel()
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.error = ''
|
||||
this.passwordResetService.requestResetPassword(this.passwordReset)
|
||||
.then(() => {
|
||||
this.isSuccess = true
|
||||
})
|
||||
.catch(e => {
|
||||
cancel()
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
handleError(e) {
|
||||
this.error = e.response.data.message
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
this.error = e.response.data.message
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user