ami/tl-vikunja
1
0
Fork 0
Code Activity

Cleanup code & make sure it has a common code style

Browse Source
This commit is contained in:
kolaente
2020-09-05 22:35:52 +02:00
parent 4a8b15e7be
commit a8a7f70a3c
132 changed files with 6821 additions and 6595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/404.vue
View File

@ -6,10 +6,10 @@
</template>
<script>
export default {
name: '404',
mounted() {
this.setTitle('404')
},
}
export default {
name: '404',
mounted() {
this.setTitle('404')
},
}
</script>

50
src/views/Home.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="content has-text-centered">
<h2>Hi {{userInfo.username}}!</h2>
<h2>Hi {{ userInfo.username }}!</h2>
<template v-if="!hasTasks">
<p>Click on a list or namespace on the left to get started.</p>
<router-link
class="button is-primary is-right noshadow is-outlined"
:to="{name: 'migrate.start'}"
v-if="migratorsEnabled"
:to="{name: 'migrate.start'}"
class="button is-primary is-right noshadow is-outlined"
v-if="migratorsEnabled"
>
Import your data into Vikunja
</router-link>
@ -16,26 +16,26 @@
</template>
<script>
import {mapState} from 'vuex'
import ShowTasks from './tasks/ShowTasks'
import {mapState} from 'vuex'
import ShowTasks from './tasks/ShowTasks'
export default {
name: 'Home',
components: {
ShowTasks,
},
data() {
return {
loading: false,
currentDate: new Date(),
tasks: []
}
},
computed: mapState({
migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
authenticated: state => state.auth.authenticated,
userInfo: state => state.auth.info,
hasTasks: state => state.hasTasks,
}),
}
export default {
name: 'Home',
components: {
ShowTasks,
},
data() {
return {
loading: false,
currentDate: new Date(),
tasks: [],
}
},
computed: mapState({
migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
authenticated: state => state.auth.authenticated,
userInfo: state => state.auth.info,
hasTasks: state => state.hasTasks,
}),
}
</script>

264
src/views/labels/ListLabels.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="loader-container content" :class="{ 'is-loading': labelService.loading}">
<div :class="{ 'is-loading': labelService.loading}" class="loader-container content">
<h1>Manage labels</h1>
<p>
Click on a label to edit it.
@ -9,23 +9,23 @@
<div class="columns">
<div class="labels-list column">
<span
v-for="l in labels" :key="l.id"
class="tag"
:class="{'disabled': userInfo.id !== l.createdBy.id}"
:style="{'background': l.hexColor, 'color': l.textColor}"
:class="{'disabled': userInfo.id !== l.createdBy.id}" :key="l.id"
:style="{'background': l.hexColor, 'color': l.textColor}"
class="tag"
v-for="l in labels"
>
<span
v-if="userInfo.id !== l.createdBy.id"
v-tooltip.bottom="'You are not allowed to edit this label because you dont own it.'">
v-if="userInfo.id !== l.createdBy.id"
v-tooltip.bottom="'You are not allowed to edit this label because you dont own it.'">
{{ l.title }}
</span>
<a
@click="editLabel(l)"
:style="{'color': l.textColor}"
v-else>
:style="{'color': l.textColor}"
@click="editLabel(l)"
v-else>
{{ l.title }}
</a>
<a class="delete is-small" @click="deleteLabel(l)" v-if="userInfo.id === l.createdBy.id"></a>
<a @click="deleteLabel(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id"></a>
</span>
</div>
<div class="column is-4" v-if="isLabelEdit">
@ -34,7 +34,7 @@
<span class="card-header-title">
Edit Label
</span>
<a class="card-header-icon" @click="isLabelEdit = false">
<a @click="isLabelEdit = false" class="card-header-icon">
<span class="icon">
<icon icon="times"/>
</span>
@ -46,20 +46,20 @@
<label class="label">Title</label>
<div class="control">
<input
class="input"
type="text"
placeholder="Label title"
v-model="labelEditLabel.title"/>
class="input"
placeholder="Label title"
type="text"
v-model="labelEditLabel.title"/>
</div>
</div>
<div class="field">
<label class="label">Description</label>
<div class="control">
<editor
placeholder="Label description"
v-model="labelEditLabel.description"
:preview-is-default="false"
v-if="editorActive"
:preview-is-default="false"
placeholder="Label description"
v-if="editorActive"
v-model="labelEditLabel.description"
/>
</div>
</div>
@ -71,15 +71,15 @@
</div>
<div class="field has-addons">
<div class="control is-expanded">
<button type="submit" class="button is-fullwidth is-primary"
:class="{ 'is-loading': labelService.loading}">
<button :class="{ 'is-loading': labelService.loading}" class="button is-fullwidth is-primary"
type="submit">
Save
</button>
</div>
<div class="control">
<a
class="button has-icon is-danger"
@click="() => {deleteLabel(labelEditLabel);isLabelEdit = false}">
@click="() => {deleteLabel(labelEditLabel);isLabelEdit = false}"
class="button has-icon is-danger">
<span class="icon">
<icon icon="trash-alt"/>
</span>
@ -95,116 +95,116 @@
</template>
<script>
import {mapState} from 'vuex'
import {mapState} from 'vuex'
import LabelService from '../../services/label'
import LabelModel from '../../models/label'
import ColorPicker from '../../components/input/colorPicker'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
import LabelService from '../../services/label'
import LabelModel from '../../models/label'
import ColorPicker from '../../components/input/colorPicker'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
export default {
name: 'ListLabels',
components: {
ColorPicker,
editor: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
data() {
return {
labelService: LabelService,
labels: [],
labelEditLabel: LabelModel,
isLabelEdit: false,
editorActive: false,
}
},
created() {
this.labelService = new LabelService()
this.labelEditLabel = new LabelModel()
this.loadLabels()
},
mounted() {
this.setTitle('Labels')
},
computed: mapState({
userInfo: state => state.auth.info
export default {
name: 'ListLabels',
components: {
ColorPicker,
editor: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
methods: {
loadLabels() {
const getAllLabels = (page = 1) => {
return this.labelService.getAll({}, {}, page)
.then(labels => {
if (page < this.labelService.totalPages) {
return getAllLabels(page + 1)
.then(nextLabels => {
return labels.concat(nextLabels)
})
} else {
return labels
}
})
.catch(e => {
return Promise.reject(e)
})
}
getAllLabels()
.then(r => {
this.$set(this, 'labels', r)
})
.catch(e => {
this.error(e, this)
})
},
deleteLabel(label) {
this.labelService.delete(label)
.then(() => {
// Remove the label from the list
for (const l in this.labels) {
if (this.labels[l].id === label.id) {
this.labels.splice(l, 1)
}
}
this.success({message: 'The label was successfully deleted.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
editLabelSubmit() {
this.labelService.update(this.labelEditLabel)
.then(r => {
for (const l in this.labels) {
if (this.labels[l].id === r.id) {
this.$set(this.labels, l, r)
}
}
this.success({message: 'The label was successfully updated.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
editLabel(label) {
if (label.createdBy.id !== this.userInfo.id) {
return
}
this.labelEditLabel = label
this.isLabelEdit = true
// This makes the editor trigger its mounted function again which makes it forget every input
// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
// which made it impossible to detect change from the outside. Therefore the component would
// not update if new content from the outside was made available.
// See https://github.com/NikulinIlya/vue-easymde/issues/3
this.editorActive = false
this.$nextTick(() => this.editorActive = true)
}
},
data() {
return {
labelService: LabelService,
labels: [],
labelEditLabel: LabelModel,
isLabelEdit: false,
editorActive: false,
}
}
},
created() {
this.labelService = new LabelService()
this.labelEditLabel = new LabelModel()
this.loadLabels()
},
mounted() {
this.setTitle('Labels')
},
computed: mapState({
userInfo: state => state.auth.info,
}),
methods: {
loadLabels() {
const getAllLabels = (page = 1) => {
return this.labelService.getAll({}, {}, page)
.then(labels => {
if (page < this.labelService.totalPages) {
return getAllLabels(page + 1)
.then(nextLabels => {
return labels.concat(nextLabels)
})
} else {
return labels
}
})
.catch(e => {
return Promise.reject(e)
})
}
getAllLabels()
.then(r => {
this.$set(this, 'labels', r)
})
.catch(e => {
this.error(e, this)
})
},
deleteLabel(label) {
this.labelService.delete(label)
.then(() => {
// Remove the label from the list
for (const l in this.labels) {
if (this.labels[l].id === label.id) {
this.labels.splice(l, 1)
}
}
this.success({message: 'The label was successfully deleted.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
editLabelSubmit() {
this.labelService.update(this.labelEditLabel)
.then(r => {
for (const l in this.labels) {
if (this.labels[l].id === r.id) {
this.$set(this.labels, l, r)
}
}
this.success({message: 'The label was successfully updated.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
editLabel(label) {
if (label.createdBy.id !== this.userInfo.id) {
return
}
this.labelEditLabel = label
this.isLabelEdit = true
// This makes the editor trigger its mounted function again which makes it forget every input
// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
// which made it impossible to detect change from the outside. Therefore the component would
// not update if new content from the outside was made available.
// See https://github.com/NikulinIlya/vue-easymde/issues/3
this.editorActive = false
this.$nextTick(() => this.editorActive = true)
},
},
}
</script>

328
src/views/list/EditList.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="loader-container edit-list is-max-width-desktop" :class="{ 'is-loading': listService.loading}">
<div :class="{ 'is-loading': listService.loading}" class="loader-container edit-list is-max-width-desktop">
<div class="notification is-warning" v-if="list.isArchived">
This list is archived.
It is not possible to create new or edit tasks or it.
@ -17,47 +17,47 @@
<label class="label" for="listtext">List Name</label>
<div class="control">
<input
v-focus
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
class="input"
type="text"
id="listtext"
placeholder="The list title goes here..."
@keyup.enter="submit"
v-model="list.title"/>
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
@keyup.enter="submit"
class="input"
id="listtext"
placeholder="The list title goes here..."
type="text"
v-focus
v-model="list.title"/>
</div>
</div>
<div class="field">
<label
class="label"
for="listtext"
v-tooltip="'The list identifier can be used to uniquely identify a task across lists. You can set it to empty to disable it.'">
class="label"
for="listtext"
v-tooltip="'The list identifier can be used to uniquely identify a task across lists. You can set it to empty to disable it.'">
List Identifier
</label>
<div class="control">
<input
v-focus
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
class="input"
type="text"
id="listtext"
placeholder="The list identifier goes here..."
@keyup.enter="submit"
v-model="list.identifier"/>
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
@keyup.enter="submit"
class="input"
id="listtext"
placeholder="The list identifier goes here..."
type="text"
v-focus
v-model="list.identifier"/>
</div>
</div>
<div class="field">
<label class="label" for="listdescription">Description</label>
<div class="control">
<editor
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
placeholder="The lists description goes here..."
id="listdescription"
v-model="list.description"
:preview-is-default="false"
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
:preview-is-default="false"
id="listdescription"
placeholder="The lists description goes here..."
v-model="list.description"
/>
</div>
</div>
@ -65,8 +65,8 @@
<label class="label" for="isArchivedCheck">Is Archived</label>
<div class="control">
<fancycheckbox
v-model="list.isArchived"
v-tooltip="'If a list is archived, you cannot create new tasks or edit the list or existing tasks.'">
v-model="list.isArchived"
v-tooltip="'If a list is archived, you cannot create new tasks or edit the list or existing tasks.'">
This list is archived
</fancycheckbox>
</div>
@ -81,14 +81,14 @@
<div class="columns bigbuttons">
<div class="column">
<button @click="submit()" class="button is-primary is-fullwidth"
:class="{ 'is-loading': listService.loading}">
<button :class="{ 'is-loading': listService.loading}" @click="submit()"
class="button is-primary is-fullwidth">
Save
</button>
</div>
<div class="column is-1">
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth"
:class="{ 'is-loading': listService.loading}">
<button :class="{ 'is-loading': listService.loading}" @click="showDeleteModal = true"
class="button is-danger is-fullwidth">
<span class="icon is-small">
<icon icon="trash-alt"/>
</span>
@ -114,10 +114,10 @@
</p>
<p class="control">
<button
type="submit"
class="button is-success"
@click="duplicateList"
:class="{'is-loading': listDuplicateService.loading}">
:class="{'is-loading': listDuplicateService.loading}"
@click="duplicateList"
class="button is-success"
type="submit">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -132,24 +132,24 @@
<background :list-id="$route.params.id"/>
<component
:is="manageUsersComponent"
:id="list.id"
type="list"
shareType="user"
:userIsAdmin="userIsAdmin"/>
:id="list.id"
:is="manageUsersComponent"
:userIsAdmin="userIsAdmin"
shareType="user"
type="list"/>
<component
:is="manageTeamsComponent"
:id="list.id"
type="list"
shareType="team"
:userIsAdmin="userIsAdmin"/>
:id="list.id"
:is="manageTeamsComponent"
:userIsAdmin="userIsAdmin"
shareType="team"
type="list"/>
<link-sharing :list-id="$route.params.id" v-if="linkSharingEnabled"/>
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
@submit="deleteList()">
@close="showDeleteModal = false"
@submit="deleteList()"
v-if="showDeleteModal">
<span slot="header">Delete the list</span>
<p slot="text">Are you sure you want to delete this list and all of its contents?
<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
@ -158,123 +158,123 @@
</template>
<script>
import router from '../../router'
import manageSharing from '../../components/sharing/userTeam'
import LinkSharing from '../../components/sharing/linkSharing'
import router from '../../router'
import manageSharing from '../../components/sharing/userTeam'
import LinkSharing from '../../components/sharing/linkSharing'
import ListModel from '../../models/list'
import ListService from '../../services/list'
import Fancycheckbox from '../../components/input/fancycheckbox'
import Background from '../../components/list/partials/background-settings'
import {CURRENT_LIST} from '../../store/mutation-types'
import ColorPicker from '../../components/input/colorPicker'
import NamespaceSearch from '../../components/namespace/namespace-search'
import ListDuplicateService from '../../services/listDuplicateService'
import ListDuplicateModel from '../../models/listDuplicateModel'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
import ListModel from '../../models/list'
import ListService from '../../services/list'
import Fancycheckbox from '../../components/input/fancycheckbox'
import Background from '../../components/list/partials/background-settings'
import {CURRENT_LIST} from '@/store/mutation-types'
import ColorPicker from '../../components/input/colorPicker'
import NamespaceSearch from '../../components/namespace/namespace-search'
import ListDuplicateService from '../../services/listDuplicateService'
import ListDuplicateModel from '../../models/listDuplicateModel'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
export default {
name: 'EditList',
data() {
return {
list: ListModel,
listService: ListService,
export default {
name: 'EditList',
data() {
return {
list: ListModel,
listService: ListService,
showDeleteModal: false,
showDeleteModal: false,
manageUsersComponent: '',
manageTeamsComponent: '',
manageUsersComponent: '',
manageTeamsComponent: '',
listDuplicateService: ListDuplicateService,
selectedNamespace: null,
}
},
components: {
NamespaceSearch,
ColorPicker,
Background,
Fancycheckbox,
LinkSharing,
manageSharing,
editor: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
created() {
this.listService = new ListService()
this.listDuplicateService = new ListDuplicateService()
this.loadList()
},
watch: {
// call again the method if the route changes
'$route': 'loadList'
},
computed: {
linkSharingEnabled() {
return this.$store.state.config.linkSharingEnabled
},
userIsAdmin() {
return this.list.owner && this.list.owner.id === this.$store.state.auth.info.id
},
},
methods: {
loadList() {
let list = new ListModel({id: this.$route.params.id})
this.listService.get(list)
.then(r => {
this.$set(this, 'list', r)
this.$store.commit(CURRENT_LIST, r)
// This will trigger the dynamic loading of components once we actually have all the data to pass to them
this.manageTeamsComponent = 'manageSharing'
this.manageUsersComponent = 'manageSharing'
this.setTitle(`Edit ${this.list.title}`)
})
.catch(e => {
this.error(e, this)
})
},
submit() {
this.listService.update(this.list)
.then(r => {
this.$store.commit('namespaces/setListInNamespaceById', r)
this.success({message: 'The list was successfully updated.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
deleteList() {
this.listService.delete(this.list)
.then(() => {
this.success({message: 'The list was successfully deleted.'}, this)
router.push({name: 'home'})
})
.catch(e => {
this.error(e, this)
})
},
selectNamespace(namespace) {
this.selectedNamespace = namespace
},
duplicateList() {
const listDuplicate = new ListDuplicateModel({
listId: this.list.id,
namespaceId: this.selectedNamespace.id,
})
this.listDuplicateService.create(listDuplicate)
.then(r => {
this.$store.commit('namespaces/addListToNamespace', r.list)
this.success({message: 'The list was successfully duplicated.'}, this)
router.push({name: 'list.index', params: {listId: r.list.id}})
})
.catch(e => {
this.error(e, this)
})
},
listDuplicateService: ListDuplicateService,
selectedNamespace: null,
}
}
},
components: {
NamespaceSearch,
ColorPicker,
Background,
Fancycheckbox,
LinkSharing,
manageSharing,
editor: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
created() {
this.listService = new ListService()
this.listDuplicateService = new ListDuplicateService()
this.loadList()
},
watch: {
// call again the method if the route changes
'$route': 'loadList',
},
computed: {
linkSharingEnabled() {
return this.$store.state.config.linkSharingEnabled
},
userIsAdmin() {
return this.list.owner && this.list.owner.id === this.$store.state.auth.info.id
},
},
methods: {
loadList() {
let list = new ListModel({id: this.$route.params.id})
this.listService.get(list)
.then(r => {
this.$set(this, 'list', r)
this.$store.commit(CURRENT_LIST, r)
// This will trigger the dynamic loading of components once we actually have all the data to pass to them
this.manageTeamsComponent = 'manageSharing'
this.manageUsersComponent = 'manageSharing'
this.setTitle(`Edit ${this.list.title}`)
})
.catch(e => {
this.error(e, this)
})
},
submit() {
this.listService.update(this.list)
.then(r => {
this.$store.commit('namespaces/setListInNamespaceById', r)
this.success({message: 'The list was successfully updated.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
deleteList() {
this.listService.delete(this.list)
.then(() => {
this.success({message: 'The list was successfully deleted.'}, this)
router.push({name: 'home'})
})
.catch(e => {
this.error(e, this)
})
},
selectNamespace(namespace) {
this.selectedNamespace = namespace
},
duplicateList() {
const listDuplicate = new ListDuplicateModel({
listId: this.list.id,
namespaceId: this.selectedNamespace.id,
})
this.listDuplicateService.create(listDuplicate)
.then(r => {
this.$store.commit('namespaces/addListToNamespace', r.list)
this.success({message: 'The list was successfully duplicated.'}, this)
router.push({name: 'list.index', params: {listId: r.list.id}})
})
.catch(e => {
this.error(e, this)
})
},
},
}
</script>

109
src/views/list/NewList.vue
View File

@ -1,23 +1,24 @@
<template>
<div class="fullpage">
<a class="close" @click="back()">
<a @click="back()" class="close">
<icon :icon="['far', 'times-circle']">
</icon>
</a>
<h3>Create a new list</h3>
<div class="field is-grouped">
<p class="control is-expanded" :class="{ 'is-loading': listService.loading}">
<input v-focus
class="input"
<p :class="{ 'is-loading': listService.loading}" class="control is-expanded">
<input
:class="{ 'disabled': listService.loading}"
v-model="list.title"
type="text"
placeholder="The list's name goes here..."
@keyup.enter="newList()"
@keyup.esc="back()"
@keyup.enter="newList()"/>
class="input"
placeholder="The list's name goes here..."
type="text"
v-focus
v-model="list.title"/>
</p>
<p class="control">
<button class="button is-success noshadow" @click="newList()" :disabled="list.title === ''">
<button :disabled="list.title === ''" @click="newList()" class="button is-success noshadow">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -32,51 +33,51 @@
</template>
<script>
import router from '../../router'
import ListService from '../../services/list'
import ListModel from '../../models/list'
import {IS_FULLPAGE} from '../../store/mutation-types'
import router from '../../router'
import ListService from '../../services/list'
import ListModel from '../../models/list'
import {IS_FULLPAGE} from '@/store/mutation-types'
export default {
name: "NewList",
data() {
return {
showError: false,
list: ListModel,
listService: ListService,
}
},
created() {
this.list = new ListModel()
this.listService = new ListService()
this.$store.commit(IS_FULLPAGE, true)
},
mounted() {
this.setTitle('Create a new list')
},
methods: {
newList() {
if (this.list.title === '') {
this.showError = true
return
}
this.showError = false
this.list.namespaceId = this.$route.params.id
this.listService.create(this.list)
.then(response => {
response.namespaceId = this.list.namespaceId
this.$store.commit('namespaces/addListToNamespace', response)
this.success({message: 'The list was successfully created.'}, this)
router.push({name: 'list.index', params: {listId: response.id}})
})
.catch(e => {
this.error(e, this)
})
},
back() {
router.go(-1)
},
export default {
name: 'NewList',
data() {
return {
showError: false,
list: ListModel,
listService: ListService,
}
}
},
created() {
this.list = new ListModel()
this.listService = new ListService()
this.$store.commit(IS_FULLPAGE, true)
},
mounted() {
this.setTitle('Create a new list')
},
methods: {
newList() {
if (this.list.title === '') {
this.showError = true
return
}
this.showError = false
this.list.namespaceId = this.$route.params.id
this.listService.create(this.list)
.then(response => {
response.namespaceId = this.list.namespaceId
this.$store.commit('namespaces/addListToNamespace', response)
this.success({message: 'The list was successfully created.'}, this)
router.push({name: 'list.index', params: {listId: response.id}})
})
.catch(e => {
this.error(e, this)
})
},
back() {
router.go(-1)
},
},
}
</script>

223
src/views/list/ShowList.vue
View File

@ -1,27 +1,27 @@
<template>
<div
class="loader-container"
:class="{ 'is-loading': listService.loading}"
:class="{ 'is-loading': listService.loading}"
class="loader-container"
>
<div class="switch-view">
<router-link
:to="{ name: 'list.list', params: { listId: listId } }"
:class="{'is-active': $route.name === 'list.list'}">
:class="{'is-active': $route.name === 'list.list'}"
:to="{ name: 'list.list', params: { listId: listId } }">
List
</router-link>
<router-link
:to="{ name: 'list.gantt', params: { listId: listId } }"
:class="{'is-active': $route.name === 'list.gantt'}">
:class="{'is-active': $route.name === 'list.gantt'}"
:to="{ name: 'list.gantt', params: { listId: listId } }">
Gantt
</router-link>
<router-link
:to="{ name: 'list.table', params: { listId: listId } }"
:class="{'is-active': $route.name === 'list.table'}">
:class="{'is-active': $route.name === 'list.table'}"
:to="{ name: 'list.table', params: { listId: listId } }">
Table
</router-link>
<router-link
:to="{ name: 'list.kanban', params: { listId: listId } }"
:class="{'is-active': $route.name === 'list.kanban'}">
:class="{'is-active': $route.name === 'list.kanban'}"
:to="{ name: 'list.kanban', params: { listId: listId } }">
Kanban
</router-link>
</div>
@ -35,107 +35,110 @@
</template>
<script>
import router from '../../router'
import router from '../../router'
import ListModel from '../../models/list'
import ListService from '../../services/list'
import {CURRENT_LIST} from '../../store/mutation-types'
import {getListView} from '../../helpers/saveListView'
import ListModel from '../../models/list'
import ListService from '../../services/list'
import {CURRENT_LIST} from '@/store/mutation-types'
import {getListView} from '@/helpers/saveListView'
export default {
data() {
return {
listService: ListService,
list: ListModel,
listLoaded: 0,
}
},
created() {
this.listService = new ListService()
this.list = new ListModel()
},
mounted() {
this.loadList()
},
watch: {
// call again the method if the route changes
'$route.path': 'loadList',
},
computed: {
// Computed property to let "listId" always have a value
listId() {
return typeof this.$route.params.listId === 'undefined' ? 0 : this.$route.params.listId
},
background() {
return this.$store.state.background
},
currentList() {
return typeof this.$store.state.currentList === 'undefined' ? {id: 0, title: ''} : this.$store.state.currentList
},
},
methods: {
replaceListView() {
const savedListView = getListView(this.$route.params.listId)
router.replace({name: savedListView, params: {id: this.$route.params.listId}})
console.debug('Replaced list view with ', savedListView)
return
},
loadList() {
this.setTitle(this.currentList.title)
// This invalidates the loaded list at the kanban board which lets it reload its content when
// switched to it. This ensures updates done to tasks in the gantt or list views are consistently
// shown in all views while preventing reloads when closing a task popup.
// We don't do this for the table view because that does not change tasks.
if (
this.$route.name === 'list.list' ||
this.$route.name === 'list.gantt'
) {
this.$store.commit('kanban/setListId', 0)
}
// When clicking again on a list in the menu, there would be no list view selected which means no list
// at all. Users will then have to click on the list view menu again which is quite confusing.
if (this.$route.name === 'list.index') {
return this.replaceListView()
}
// Don't load the list if we either already loaded it or aren't dealing with a list at all currently
if (
this.$route.params.listId === this.listLoaded ||
typeof this.$route.params.listId === 'undefined' ||
this.$route.params.listId === this.currentList.id ||
parseInt(this.$route.params.listId) === this.currentList.id
) {
return
}
// Redirect the user to list view by default
if (
this.$route.name !== 'list.list' &&
this.$route.name !== 'list.gantt' &&
this.$route.name !== 'list.table' &&
this.$route.name !== 'list.kanban'
) {
return this.replaceListView()
}
console.debug(`Loading list, $route.name = ${this.$route.name}, $route.params =`, this.$route.params, `, listLoaded = ${this.listLoaded}, currentList = `, this.currentList)
// 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.listId})
this.listService.get(list)
.then(r => {
this.$set(this, 'list', r)
this.$store.commit(CURRENT_LIST, r)
})
.catch(e => {
this.error(e, this)
})
.finally(() => {
this.listLoaded = this.$route.params.listId
})
},
export default {
data() {
return {
listService: ListService,
list: ListModel,
listLoaded: 0,
}
}
},
created() {
this.listService = new ListService()
this.list = new ListModel()
},
mounted() {
this.loadList()
},
watch: {
// call again the method if the route changes
'$route.path': 'loadList',
},
computed: {
// Computed property to let "listId" always have a value
listId() {
return typeof this.$route.params.listId === 'undefined' ? 0 : this.$route.params.listId
},
background() {
return this.$store.state.background
},
currentList() {
return typeof this.$store.state.currentList === 'undefined' ? {
id: 0,
title: '',
} : this.$store.state.currentList
},
},
methods: {
replaceListView() {
const savedListView = getListView(this.$route.params.listId)
router.replace({name: savedListView, params: {id: this.$route.params.listId}})
console.debug('Replaced list view with ', savedListView)
return
},
loadList() {
this.setTitle(this.currentList.title)
// This invalidates the loaded list at the kanban board which lets it reload its content when
// switched to it. This ensures updates done to tasks in the gantt or list views are consistently
// shown in all views while preventing reloads when closing a task popup.
// We don't do this for the table view because that does not change tasks.
if (
this.$route.name === 'list.list' ||
this.$route.name === 'list.gantt'
) {
this.$store.commit('kanban/setListId', 0)
}
// When clicking again on a list in the menu, there would be no list view selected which means no list
// at all. Users will then have to click on the list view menu again which is quite confusing.
if (this.$route.name === 'list.index') {
return this.replaceListView()
}
// Don't load the list if we either already loaded it or aren't dealing with a list at all currently
if (
this.$route.params.listId === this.listLoaded ||
typeof this.$route.params.listId === 'undefined' ||
this.$route.params.listId === this.currentList.id ||
parseInt(this.$route.params.listId) === this.currentList.id
) {
return
}
// Redirect the user to list view by default
if (
this.$route.name !== 'list.list' &&
this.$route.name !== 'list.gantt' &&
this.$route.name !== 'list.table' &&
this.$route.name !== 'list.kanban'
) {
return this.replaceListView()
}
console.debug(`Loading list, $route.name = ${this.$route.name}, $route.params =`, this.$route.params, `, listLoaded = ${this.listLoaded}, currentList = `, this.currentList)
// 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.listId})
this.listService.get(list)
.then(r => {
this.$set(this, 'list', r)
this.$store.commit(CURRENT_LIST, r)
})
.catch(e => {
this.error(e, this)
})
.finally(() => {
this.listLoaded = this.$route.params.listId
})
},
},
}
</script>

84
src/views/list/views/Gantt.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="gantt-chart-container">
<div class="gantt-options">
<fancycheckbox v-model="showTaskswithoutDates" class="is-block">
<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
Show tasks which don't have dates set
</fancycheckbox>
<div class="range-picker">
@ -21,11 +21,11 @@
<label class="label" for="fromDate">From</label>
<div class="control">
<flat-pickr
class="input"
v-model="dateFrom"
:config="flatPickerConfig"
class="input"
id="fromDate"
placeholder="From"
v-model="dateFrom"
/>
</div>
</div>
@ -33,22 +33,22 @@
<label class="label" for="toDate">To</label>
<div class="control">
<flat-pickr
class="input"
v-model="dateTo"
:config="flatPickerConfig"
class="input"
id="toDate"
placeholder="To"
v-model="dateTo"
/>
</div>
</div>
</div>
</div>
<gantt-chart
:list-id="Number($route.params.listId)"
:show-taskswithout-dates="showTaskswithoutDates"
:date-from="dateFrom"
:date-to="dateTo"
:day-width="dayWidth"
:list-id="Number($route.params.listId)"
:show-taskswithout-dates="showTaskswithoutDates"
/>
<!-- This router view is used to show the task popup while keeping the gantt chart itself -->
@ -60,40 +60,40 @@
</template>
<script>
import GanttChart from '../../../components/tasks/gantt-component'
import flatPickr from 'vue-flatpickr-component'
import Fancycheckbox from '../../../components/input/fancycheckbox'
import {saveListView} from '../../../helpers/saveListView'
import GanttChart from '../../../components/tasks/gantt-component'
import flatPickr from 'vue-flatpickr-component'
import Fancycheckbox from '../../../components/input/fancycheckbox'
import {saveListView} from '@/helpers/saveListView'
export default {
name: 'Gantt',
components: {
Fancycheckbox,
flatPickr,
GanttChart
},
created() {
// Save the current list view to local storage
// We use local storage and not vuex here to make it persistent across reloads.
saveListView(this.$route.params.listId, this.$route.name)
},
data() {
return {
showTaskswithoutDates: false,
dayWidth: 35,
dateFrom: null,
dateTo: null,
flatPickerConfig:{
altFormat: 'j M Y',
altInput: true,
dateFormat: 'Y-m-d',
enableTime: false,
},
}
},
beforeMount() {
this.dateFrom = new Date((new Date()).setDate((new Date()).getDate() - 15))
this.dateTo = new Date((new Date()).setDate((new Date()).getDate() + 30))
},
}
export default {
name: 'Gantt',
components: {
Fancycheckbox,
flatPickr,
GanttChart,
},
created() {
// Save the current list view to local storage
// We use local storage and not vuex here to make it persistent across reloads.
saveListView(this.$route.params.listId, this.$route.name)
},
data() {
return {
showTaskswithoutDates: false,
dayWidth: 35,
dateFrom: null,
dateTo: null,
flatPickerConfig: {
altFormat: 'j M Y',
altInput: true,
dateFormat: 'Y-m-d',
enableTime: false,
},
}
},
beforeMount() {
this.dateFrom = new Date((new Date()).setDate((new Date()).getDate() - 15))
this.dateTo = new Date((new Date()).setDate((new Date()).getDate() + 30))
},
}
</script>

704
src/views/list/views/Kanban.vue
View File

@ -1,26 +1,26 @@
<template>
<div class="kanban loader-container" :class="{ 'is-loading': loading}">
<div v-for="bucket in buckets" :key="`bucket${bucket.id}`" class="bucket">
<div :class="{ 'is-loading': loading}" class="kanban loader-container">
<div :key="`bucket${bucket.id}`" class="bucket" v-for="bucket in buckets">
<div class="bucket-header">
<h2
class="title input"
contenteditable="true"
spellcheck="false"
@focusout="() => saveBucketTitle(bucket.id)"
:ref="`bucket${bucket.id}title`"
@keyup.ctrl.enter="() => saveBucketTitle(bucket.id)">{{ bucket.title }}</h2>
<span
class="limit"
:ref="`bucket${bucket.id}title`"
@focusout="() => saveBucketTitle(bucket.id)"
@keyup.ctrl.enter="() => saveBucketTitle(bucket.id)"
class="title input"
contenteditable="true"
spellcheck="false">{{ bucket.title }}</h2>
<span
:class="{'is-max': bucket.tasks.length >= bucket.limit}"
class="limit"
v-if="bucket.limit > 0">
{{ bucket.tasks.length }}/{{ bucket.limit }}
</span>
<div
class="dropdown is-right options"
:class="{ 'is-active': bucketOptionsDropDownActive[bucket.id] }"
v-if="canWrite"
:class="{ 'is-active': bucketOptionsDropDownActive[bucket.id] }"
class="dropdown is-right options"
v-if="canWrite"
>
<div class="dropdown-trigger" @click.stop="toggleBucketDropdown(bucket.id)">
<div @click.stop="toggleBucketDropdown(bucket.id)" class="dropdown-trigger">
<span class="icon">
<icon icon="ellipsis-v"/>
</span>
@ -28,18 +28,18 @@
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a
class="dropdown-item"
@click.stop="showSetLimitInput = true"
class="dropdown-item"
>
<div class="field has-addons" v-if="showSetLimitInput">
<div class="control">
<input
type="number"
@change="() => updateBucket(bucket)"
@keyup.enter="() => updateBucket(bucket)"
class="input"
type="number"
v-focus.always
v-model="bucket.limit"
@keyup.enter="() => updateBucket(bucket)"
@change="() => updateBucket(bucket)"
/>
</div>
<div class="control">
@ -55,10 +55,10 @@
</template>
</a>
<a
class="dropdown-item has-text-danger"
@click="() => deleteBucketModal(bucket.id)"
:class="{'is-disabled': buckets.length <= 1}"
v-tooltip="buckets.length <= 1 ? 'You cannot remove the last bucket.' : ''"
:class="{'is-disabled': buckets.length <= 1}"
@click="() => deleteBucketModal(bucket.id)"
class="dropdown-item has-text-danger"
v-tooltip="buckets.length <= 1 ? 'You cannot remove the last bucket.' : ''"
>
<span class="icon is-small"><icon icon="trash-alt"/></span>
Delete
@ -67,37 +67,37 @@
</div>
</div>
</div>
<div class="tasks" :ref="`tasks-container${bucket.id}`">
<div :ref="`tasks-container${bucket.id}`" class="tasks">
<!-- Make the component either a div or a draggable component based on the user rights -->
<component
:is="canWrite ? 'Container' : 'div'"
@drop="e => onDrop(bucket.id, e)"
group-name="buckets"
:get-child-payload="getTaskPayload(bucket.id)"
:drop-placeholder="dropPlaceholderOptions"
:animation-duration="150"
:should-accept-drop="() => shouldAcceptDrop(bucket)"
drag-class="ghost-task"
drag-class-drop="ghost-task-drop"
drag-handle-selector=".task.draggable"
:animation-duration="150"
:drop-placeholder="dropPlaceholderOptions"
:get-child-payload="getTaskPayload(bucket.id)"
:is="canWrite ? 'Container' : 'div'"
:should-accept-drop="() => shouldAcceptDrop(bucket)"
@drop="e => onDrop(bucket.id, e)"
drag-class="ghost-task"
drag-class-drop="ghost-task-drop"
drag-handle-selector=".task.draggable"
group-name="buckets"
>
<!-- Make the component either a div or a draggable component based on the user rights -->
<component
v-for="task in bucket.tasks"
:key="`bucket${bucket.id}-task${task.id}`"
:is="canWrite ? 'Draggable' : 'div'"
:is="canWrite ? 'Draggable' : 'div'"
:key="`bucket${bucket.id}-task${task.id}`"
v-for="task in bucket.tasks"
>
<div
class="task loader-container draggable"
:class="{
:class="{
'is-loading': taskService.loading && taskUpdating[task.id],
'draggable': !taskService.loading || !taskUpdating[task.id],
'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
}"
:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
@click.ctrl="() => markTaskAsDone(task)"
@click.meta="() => markTaskAsDone(task)"
@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
@click.ctrl="() => markTaskAsDone(task)"
@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
@click.meta="() => markTaskAsDone(task)"
class="task loader-container draggable"
>
<span class="task-id">
<span class="is-done" v-if="task.done">Done</span>
@ -109,10 +109,10 @@
</template>
</span>
<span
v-if="task.dueDate > 0"
class="due-date"
:class="{'overdue': task.dueDate <= new Date() && !task.done}"
v-tooltip="formatDate(task.dueDate)">
:class="{'overdue': task.dueDate <= new Date() && !task.done}"
class="due-date"
v-if="task.dueDate > 0"
v-tooltip="formatDate(task.dueDate)">
<span class="icon">
<icon :icon="['far', 'calendar-alt']"/>
</span>
@ -127,22 +127,22 @@
<priority-label :priority="task.priority" class="priority-label"/>
<div class="assignees" v-if="task.assignees.length > 0">
<user
v-for="u in task.assignees"
:key="task.id + 'assignee' + u.id"
:user="u"
:show-username="false"
:avatar-size="24"
:avatar-size="24"
:key="task.id + 'assignee' + u.id"
:show-username="false"
:user="u"
v-for="u in task.assignees"
/>
</div>
</div>
<div>
<span class="icon" v-if="task.attachments.length > 0">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<rect fill="none" rx="0" ry="0"></rect>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19.86 8.29994C19.8823 8.27664 19.9026 8.25201 19.9207 8.22634C20.5666 7.53541 20.93 6.63567 20.93 5.68001C20.93 4.69001 20.55 3.76001 19.85 3.06001C18.45 1.66001 16.02 1.66001 14.62 3.06001L9.88002 7.80001C9.86705 7.81355 9.85481 7.82753 9.8433 7.8419L4.58 13.1C3.6 14.09 3.06 15.39 3.06 16.78C3.06 18.17 3.6 19.48 4.58 20.46C5.6 21.47 6.93 21.98 8.26 21.98C9.59 21.98 10.92 21.47 11.94 20.46L17.74 14.66C17.97 14.42 17.98 14.04 17.74 13.81C17.5 13.58 17.12 13.58 16.89 13.81L11.09 19.61C10.33 20.36 9.33 20.78 8.26 20.78C7.19 20.78 6.19 20.37 5.43 19.61C4.68 18.85 4.26 17.85 4.26 16.78C4.26 15.72 4.68 14.71 5.43 13.96L15.47 3.91996C15.4962 3.89262 15.5195 3.86346 15.54 3.83292C16.4992 2.95103 18.0927 2.98269 19.01 3.90001C19.48 4.37001 19.74 5.00001 19.74 5.67001C19.74 6.34001 19.48 6.97001 19.01 7.44001L14.27 12.18C14.2571 12.1935 14.2448 12.2075 14.2334 12.2218L8.96 17.4899C8.59 17.8699 7.93 17.8699 7.55 17.4899C7.36 17.2999 7.26 17.0399 7.26 16.7799C7.26 16.5199 7.36 16.2699 7.55 16.0699L15.47 8.14994C15.7 7.90994 15.71 7.52994 15.47 7.29994C15.23 7.06994 14.85 7.06994 14.62 7.29994L6.7 15.2199C6.29 15.6399 6.06 16.1899 6.06 16.7799C6.06 17.3699 6.29 17.9199 6.7 18.3399C7.12 18.7499 7.67 18.9799 8.26 18.9799C8.85 18.9799 9.4 18.7599 9.82 18.3399L19.86 8.29994Z"></path>
clip-rule="evenodd"
d="M19.86 8.29994C19.8823 8.27664 19.9026 8.25201 19.9207 8.22634C20.5666 7.53541 20.93 6.63567 20.93 5.68001C20.93 4.69001 20.55 3.76001 19.85 3.06001C18.45 1.66001 16.02 1.66001 14.62 3.06001L9.88002 7.80001C9.86705 7.81355 9.85481 7.82753 9.8433 7.8419L4.58 13.1C3.6 14.09 3.06 15.39 3.06 16.78C3.06 18.17 3.6 19.48 4.58 20.46C5.6 21.47 6.93 21.98 8.26 21.98C9.59 21.98 10.92 21.47 11.94 20.46L17.74 14.66C17.97 14.42 17.98 14.04 17.74 13.81C17.5 13.58 17.12 13.58 16.89 13.81L11.09 19.61C10.33 20.36 9.33 20.78 8.26 20.78C7.19 20.78 6.19 20.37 5.43 19.61C4.68 18.85 4.26 17.85 4.26 16.78C4.26 15.72 4.68 14.71 5.43 13.96L15.47 3.91996C15.4962 3.89262 15.5195 3.86346 15.54 3.83292C16.4992 2.95103 18.0927 2.98269 19.01 3.90001C19.48 4.37001 19.74 5.00001 19.74 5.67001C19.74 6.34001 19.48 6.97001 19.01 7.44001L14.27 12.18C14.2571 12.1935 14.2448 12.2075 14.2334 12.2218L8.96 17.4899C8.59 17.8699 7.93 17.8699 7.55 17.4899C7.36 17.2999 7.26 17.0399 7.26 16.7799C7.26 16.5199 7.36 16.2699 7.55 16.0699L15.47 8.14994C15.7 7.90994 15.71 7.52994 15.47 7.29994C15.23 7.06994 14.85 7.06994 14.62 7.29994L6.7 15.2199C6.29 15.6399 6.06 16.1899 6.06 16.7799C6.06 17.3699 6.29 17.9199 6.7 18.3399C7.12 18.7499 7.67 18.9799 8.26 18.9799C8.85 18.9799 9.4 18.7599 9.82 18.3399L19.86 8.29994Z"
fill-rule="evenodd"></path>
</svg>
</span>
</div>
@ -156,16 +156,16 @@
<div class="control">
<input
class="input"
type="text"
placeholder="Enter the new task text..."
v-focus.always
@focusout="toggleShowNewTaskInput(bucket.id)"
@keyup.esc="toggleShowNewTaskInput(bucket.id)"
@keyup.enter="addTaskToBucket(bucket.id)"
v-model="newTaskText"
:disabled="taskService.loading"
:class="{'is-loading': taskService.loading}"
:class="{'is-loading': taskService.loading}"
:disabled="taskService.loading"
@focusout="toggleShowNewTaskInput(bucket.id)"
@keyup.enter="addTaskToBucket(bucket.id)"
@keyup.esc="toggleShowNewTaskInput(bucket.id)"
class="input"
placeholder="Enter the new task text..."
type="text"
v-focus.always
v-model="newTaskText"
/>
</div>
<p class="help is-danger" v-if="newTaskError[bucket.id] && newTaskText === ''">
@ -173,9 +173,9 @@
</p>
</div>
<a
class="button noshadow is-transparent is-fullwidth has-text-centered"
@click="toggleShowNewTaskInput(bucket.id)"
v-if="!showNewTaskInput[bucket.id]">
@click="toggleShowNewTaskInput(bucket.id)"
class="button noshadow is-transparent is-fullwidth has-text-centered"
v-if="!showNewTaskInput[bucket.id]">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -191,21 +191,21 @@
<div class="bucket new-bucket" v-if="!loading && canWrite">
<input
v-if="showNewBucketInput"
class="input"
type="text"
placeholder="Enter the new bucket title..."
v-focus.always
@focusout="() => showNewBucketInput = false"
@keyup.esc="() => showNewBucketInput = false"
@keyup.enter="createNewBucket"
v-model="newBucketTitle"
:disabled="loading"
:class="{'is-loading': loading}"
:class="{'is-loading': loading}"
:disabled="loading"
@focusout="() => showNewBucketInput = false"
@keyup.enter="createNewBucket"
@keyup.esc="() => showNewBucketInput = false"
class="input"
placeholder="Enter the new bucket title..."
type="text"
v-focus.always
v-if="showNewBucketInput"
v-model="newBucketTitle"
/>
<a
class="button noshadow is-transparent is-fullwidth has-text-centered"
@click="() => showNewBucketInput = true" v-if="!showNewBucketInput">
@click="() => showNewBucketInput = true"
class="button noshadow is-transparent is-fullwidth has-text-centered" v-if="!showNewBucketInput">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -221,9 +221,9 @@
</transition>
<modal
v-if="showBucketDeleteModal"
@close="showBucketDeleteModal = false"
@submit="deleteBucket()">
@close="showBucketDeleteModal = false"
@submit="deleteBucket()"
v-if="showBucketDeleteModal">
<span slot="header">Delete the bucket</span>
<p slot="text">
Are you sure you want to delete this bucket?<br/>
@ -235,158 +235,147 @@
</template>
<script>
import TaskService from '../../../services/task'
import TaskModel from '../../../models/task'
import BucketModel from '../../../models/bucket'
import TaskService from '../../../services/task'
import TaskModel from '../../../models/task'
import BucketModel from '../../../models/bucket'
import {Container, Draggable} from 'vue-smooth-dnd'
import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
import User from '../../../components/misc/user'
import Labels from '../../../components/tasks/partials/labels'
import {Container, Draggable} from 'vue-smooth-dnd'
import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
import User from '../../../components/misc/user'
import Labels from '../../../components/tasks/partials/labels'
import {filterObject} from '../../../helpers/filterObject'
import {applyDrag} from '../../../helpers/applyDrag'
import {mapState} from 'vuex'
import {LOADING} from '../../../store/mutation-types'
import {saveListView} from '../../../helpers/saveListView'
import Rights from '../../../models/rights.json'
import {filterObject} from '@/helpers/filterObject'
import {applyDrag} from '@/helpers/applyDrag'
import {mapState} from 'vuex'
import {LOADING} from '@/store/mutation-types'
import {saveListView} from '@/helpers/saveListView'
import Rights from '../../../models/rights.json'
export default {
name: 'Kanban',
components: {
Container,
Draggable,
Labels,
User,
PriorityLabel,
},
data() {
return {
taskService: TaskService,
export default {
name: 'Kanban',
components: {
Container,
Draggable,
Labels,
User,
PriorityLabel,
},
data() {
return {
taskService: TaskService,
dropPlaceholderOptions: {
className: 'drop-preview',
animationDuration: 150,
showOnTop: true,
},
sourceBucket: 0,
bucketOptionsDropDownActive: {},
dropPlaceholderOptions: {
className: 'drop-preview',
animationDuration: 150,
showOnTop: true,
},
sourceBucket: 0,
bucketOptionsDropDownActive: {},
showBucketDeleteModal: false,
bucketToDelete: 0,
showBucketDeleteModal: false,
bucketToDelete: 0,
newTaskText: '',
showNewTaskInput: {},
newBucketTitle: '',
showNewBucketInput: false,
newTaskError: {},
showSetLimitInput: false,
newTaskText: '',
showNewTaskInput: {},
newBucketTitle: '',
showNewBucketInput: false,
newTaskError: {},
showSetLimitInput: false,
// We're using this to show the loading animation only at the task when updating it
taskUpdating: {},
// We're using this to show the loading animation only at the task when updating it
taskUpdating: {},
}
},
created() {
this.taskService = new TaskService()
this.loadBuckets()
this.$nextTick(() => document.addEventListener('click', this.closeBucketDropdowns))
// Save the current list view to local storage
// We use local storage and not vuex here to make it persistent across reloads.
saveListView(this.$route.params.listId, this.$route.name)
},
watch: {
'$route.params.listId': 'loadBuckets',
},
computed: mapState({
buckets: state => state.kanban.buckets,
loadedListId: state => state.kanban.listId,
loading: LOADING,
canWrite: state => state.currentList.maxRight > Rights.READ,
}),
methods: {
loadBuckets() {
// Prevent trying to load buckets if the task popup view is active
if (this.$route.name !== 'list.kanban') {
return
}
// Only load buckets if we don't already loaded them
if (
this.loadedListId === this.$route.params.listId ||
this.loadedListId === parseInt(this.$route.params.listId)
) {
return
}
console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $route.params =`, this.$route.params)
this.$store.dispatch('kanban/loadBucketsForList', this.$route.params.listId)
.catch(e => {
this.error(e, this)
})
},
created() {
this.taskService = new TaskService()
this.loadBuckets()
this.$nextTick(() => document.addEventListener('click', this.closeBucketDropdowns))
onDrop(bucketId, dropResult) {
// Save the current list view to local storage
// We use local storage and not vuex here to make it persistent across reloads.
saveListView(this.$route.params.listId, this.$route.name)
},
watch: {
'$route.params.listId': 'loadBuckets',
},
computed: mapState({
buckets: state => state.kanban.buckets,
loadedListId: state => state.kanban.listId,
loading: LOADING,
canWrite: state => state.currentList.maxRight > Rights.READ,
}),
methods: {
loadBuckets() {
// Note: A lot of this example comes from the excellent kanban example on https://github.com/kutlugsahin/vue-smooth-dnd/blob/master/demo/src/pages/cards.vue
// Prevent trying to load buckets if the task popup view is active
if (this.$route.name !== 'list.kanban') {
return
const bucketIndex = filterObject(this.buckets, b => b.id === bucketId)
if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
// FIXME: This is probably not the best solution and more of a naive brute-force approach
// Duplicate the buckets to avoid stuff moving around without noticing
const buckets = Object.assign({}, this.buckets)
// Get the index of the bucket and the bucket itself
const bucket = buckets[bucketIndex]
// Rebuild the tasks from the bucket, removing/adding the moved task
bucket.tasks = applyDrag(bucket.tasks, dropResult)
// Update the bucket in the list of all buckets
delete buckets[bucketIndex]
buckets[bucketIndex] = bucket
// Set the buckets, triggering a state update in vue
// FIXME: This seems to set some task attributes (like due date) wrong. Commented out, but seems to still work?
// Not sure what to do about this.
// this.$store.commit('kanban/setBuckets', buckets)
}
if (dropResult.addedIndex !== null) {
const taskIndex = dropResult.addedIndex
const taskBefore = typeof this.buckets[bucketIndex].tasks[taskIndex - 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex - 1]
const taskAfter = typeof this.buckets[bucketIndex].tasks[taskIndex + 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex + 1]
const task = this.buckets[bucketIndex].tasks[taskIndex]
this.$set(this.taskUpdating, task.id, true)
// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it
if (taskBefore === null && taskAfter !== null) {
task.position = taskAfter.position / 2
}
// If there is no task after it, we just add 2^16 to the last position
if (taskBefore !== null && taskAfter === null) {
task.position = taskBefore.position + Math.pow(2, 16)
}
// If we have both a task before and after it, we acually calculate the position
if (taskAfter !== null && taskBefore !== null) {
task.position = taskBefore.position + (taskAfter.position - taskBefore.position) / 2
}
// Only load buckets if we don't already loaded them
if (
this.loadedListId === this.$route.params.listId ||
this.loadedListId === parseInt(this.$route.params.listId)
) {
return
}
task.bucketId = bucketId
console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $route.params =`, this.$route.params)
this.$store.dispatch('kanban/loadBucketsForList', this.$route.params.listId)
.catch(e => {
this.error(e, this)
})
},
onDrop(bucketId, dropResult) {
// Note: A lot of this example comes from the excellent kanban example on https://github.com/kutlugsahin/vue-smooth-dnd/blob/master/demo/src/pages/cards.vue
const bucketIndex = filterObject(this.buckets, b => b.id === bucketId)
if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
// FIXME: This is probably not the best solution and more of a naive brute-force approach
// Duplicate the buckets to avoid stuff moving around without noticing
const buckets = Object.assign({}, this.buckets)
// Get the index of the bucket and the bucket itself
const bucket = buckets[bucketIndex]
// Rebuild the tasks from the bucket, removing/adding the moved task
bucket.tasks = applyDrag(bucket.tasks, dropResult)
// Update the bucket in the list of all buckets
delete buckets[bucketIndex]
buckets[bucketIndex] = bucket
// Set the buckets, triggering a state update in vue
// FIXME: This seems to set some task attributes (like due date) wrong. Commented out, but seems to still work?
// Not sure what to do about this.
// this.$store.commit('kanban/setBuckets', buckets)
}
if (dropResult.addedIndex !== null) {
const taskIndex = dropResult.addedIndex
const taskBefore = typeof this.buckets[bucketIndex].tasks[taskIndex - 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex - 1]
const taskAfter = typeof this.buckets[bucketIndex].tasks[taskIndex + 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex + 1]
const task = this.buckets[bucketIndex].tasks[taskIndex]
this.$set(this.taskUpdating, task.id, true)
// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it
if (taskBefore === null && taskAfter !== null) {
task.position = taskAfter.position / 2
}
// If there is no task after it, we just add 2^16 to the last position
if (taskBefore !== null && taskAfter === null) {
task.position = taskBefore.position + Math.pow(2, 16)
}
// If we have both a task before and after it, we acually calculate the position
if (taskAfter !== null && taskBefore !== null) {
task.position = taskBefore.position + (taskAfter.position - taskBefore.position) / 2
}
task.bucketId = bucketId
this.$store.dispatch('tasks/update', task)
.catch(e => {
this.error(e, this)
})
.finally(() => {
this.$set(this.taskUpdating, task.id, false)
})
}
},
markTaskAsDone(task) {
task.done = !task.done
this.$store.dispatch('tasks/update', task)
.catch(e => {
this.error(e, this)
@ -394,144 +383,155 @@
.finally(() => {
this.$set(this.taskUpdating, task.id, false)
})
},
getTaskPayload(bucketId) {
return index => {
const bucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
this.sourceBucket = bucket.id
return bucket.tasks[index]
}
},
toggleShowNewTaskInput(bucket) {
this.$set(this.showNewTaskInput, bucket, !this.showNewTaskInput[bucket])
},
toggleBucketDropdown(bucketId) {
this.closeBucketDropdowns() // Close all eventually open dropdowns
this.$set(this.bucketOptionsDropDownActive, bucketId, !this.bucketOptionsDropDownActive[bucketId])
},
closeBucketDropdowns() {
this.showSetLimitInput = false
for (const bucketId in this.bucketOptionsDropDownActive) {
this.bucketOptionsDropDownActive[bucketId] = false
}
},
addTaskToBucket(bucketId) {
}
},
markTaskAsDone(task) {
task.done = !task.done
this.$store.dispatch('tasks/update', task)
.catch(e => {
this.error(e, this)
})
.finally(() => {
this.$set(this.taskUpdating, task.id, false)
})
},
getTaskPayload(bucketId) {
return index => {
const bucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
this.sourceBucket = bucket.id
return bucket.tasks[index]
}
},
toggleShowNewTaskInput(bucket) {
this.$set(this.showNewTaskInput, bucket, !this.showNewTaskInput[bucket])
},
toggleBucketDropdown(bucketId) {
this.closeBucketDropdowns() // Close all eventually open dropdowns
this.$set(this.bucketOptionsDropDownActive, bucketId, !this.bucketOptionsDropDownActive[bucketId])
},
closeBucketDropdowns() {
this.showSetLimitInput = false
for (const bucketId in this.bucketOptionsDropDownActive) {
this.bucketOptionsDropDownActive[bucketId] = false
}
},
addTaskToBucket(bucketId) {
if (this.newTaskText === '') {
this.$set(this.newTaskError, bucketId, true)
return
}
this.$set(this.newTaskError, bucketId, false)
if (this.newTaskText === '') {
this.$set(this.newTaskError, bucketId, true)
return
}
this.$set(this.newTaskError, bucketId, false)
// We need the actual bucket index so we put that in a seperate function
const bucketIndex = () => {
for (const t in this.buckets) {
if (this.buckets[t].id === bucketId) {
return t
}
// We need the actual bucket index so we put that in a seperate function
const bucketIndex = () => {
for (const t in this.buckets) {
if (this.buckets[t].id === bucketId) {
return t
}
}
}
const bi = bucketIndex()
const bi = bucketIndex()
const task = new TaskModel({
title: this.newTaskText,
bucketId: this.buckets[bi].id,
listId: this.$route.params.listId,
const task = new TaskModel({
title: this.newTaskText,
bucketId: this.buckets[bi].id,
listId: this.$route.params.listId,
})
this.taskService.create(task)
.then(r => {
this.newTaskText = ''
this.$store.commit('kanban/addTaskToBucket', r)
})
this.taskService.create(task)
.then(r => {
this.newTaskText = ''
this.$store.commit('kanban/addTaskToBucket', r)
})
.catch(e => {
this.error(e, this)
})
.finally(() => {
if (!this.$refs[`tasks-container${task.bucketId}`][0]) {
return
}
this.$refs[`tasks-container${task.bucketId}`][0].scrollTop = this.$refs[`tasks-container${task.bucketId}`][0].scrollHeight
})
},
createNewBucket() {
if (this.newBucketTitle === '') {
return
}
const newBucket = new BucketModel({
title: this.newBucketTitle,
listId: parseInt(this.$route.params.listId),
.catch(e => {
this.error(e, this)
})
this.$store.dispatch('kanban/createBucket', newBucket)
.then(() => {
this.newBucketTitle = ''
this.showNewBucketInput = false
})
.catch(e => {
this.error(e, this)
})
},
deleteBucketModal(bucketId) {
if (this.buckets.length <= 1) {
return
}
this.bucketToDelete = bucketId
this.showBucketDeleteModal = true
},
deleteBucket() {
const bucket = new BucketModel({
id: this.bucketToDelete,
listId: this.$route.params.listId,
.finally(() => {
if (!this.$refs[`tasks-container${task.bucketId}`][0]) {
return
}
this.$refs[`tasks-container${task.bucketId}`][0].scrollTop = this.$refs[`tasks-container${task.bucketId}`][0].scrollHeight
})
this.$store.dispatch('kanban/deleteBucket', bucket)
.catch(e => {
this.error(e, this)
})
.finally(() => {
this.showBucketDeleteModal = false
})
},
saveBucketTitle(bucketId) {
const bucketTitle = this.$refs[`bucket${bucketId}title`][0].textContent
const bucket = new BucketModel({
id: bucketId,
title: bucketTitle,
listId: Number(this.$route.params.listId),
})
// Because the contenteditable does not have a change event,
// we're building it ourselves here and only updating the bucket
// if the title changed.
const realBucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
if (realBucket.title === bucketTitle) {
return
}
this.$store.dispatch('kanban/updateBucket', bucket)
.then(r => {
realBucket.title = r.title
})
.catch(e => {
this.error(e, this)
})
},
updateBucket(bucket) {
bucket.limit = parseInt(bucket.limit)
this.$store.dispatch('kanban/updateBucket', bucket)
.catch(e => {
this.error(e, this)
})
},
shouldAcceptDrop(bucket) {
return bucket.id === this.sourceBucket || // When dragging from a bucket who has its limit reached, dragging should still be possible
bucket.limit === 0 || // If there is no limit set, dragging & dropping should always work
bucket.tasks.length < bucket.limit // Disallow dropping to buckets which have their limit reached
},
},
}
createNewBucket() {
if (this.newBucketTitle === '') {
return
}
const newBucket = new BucketModel({
title: this.newBucketTitle,
listId: parseInt(this.$route.params.listId),
})
this.$store.dispatch('kanban/createBucket', newBucket)
.then(() => {
this.newBucketTitle = ''
this.showNewBucketInput = false
})
.catch(e => {
this.error(e, this)
})
},
deleteBucketModal(bucketId) {
if (this.buckets.length <= 1) {
return
}
this.bucketToDelete = bucketId
this.showBucketDeleteModal = true
},
deleteBucket() {
const bucket = new BucketModel({
id: this.bucketToDelete,
listId: this.$route.params.listId,
})
this.$store.dispatch('kanban/deleteBucket', bucket)
.catch(e => {
this.error(e, this)
})
.finally(() => {
this.showBucketDeleteModal = false
})
},
saveBucketTitle(bucketId) {
const bucketTitle = this.$refs[`bucket${bucketId}title`][0].textContent
const bucket = new BucketModel({
id: bucketId,
title: bucketTitle,
listId: Number(this.$route.params.listId),
})
// Because the contenteditable does not have a change event,
// we're building it ourselves here and only updating the bucket
// if the title changed.
const realBucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
if (realBucket.title === bucketTitle) {
return
}
this.$store.dispatch('kanban/updateBucket', bucket)
.then(r => {
realBucket.title = r.title
})
.catch(e => {
this.error(e, this)
})
},
updateBucket(bucket) {
bucket.limit = parseInt(bucket.limit)
this.$store.dispatch('kanban/updateBucket', bucket)
.catch(e => {
this.error(e, this)
})
},
shouldAcceptDrop(bucket) {
return bucket.id === this.sourceBucket || // When dragging from a bucket who has its limit reached, dragging should still be possible
bucket.limit === 0 || // If there is no limit set, dragging & dropping should always work
bucket.tasks.length < bucket.limit // Disallow dropping to buckets which have their limit reached
},
},
}
</script>

446
src/views/list/views/List.vue
View File

@ -1,38 +1,38 @@
<template>
<div class="loader-container is-max-width-desktop" :class="{ 'is-loading': taskCollectionService.loading}">
<div :class="{ 'is-loading': taskCollectionService.loading}" class="loader-container is-max-width-desktop">
<div class="filter-container">
<div class="items">
<div class="search">
<div class="field has-addons" :class="{ 'hidden': !showTaskSearch }">
<div :class="{ 'hidden': !showTaskSearch }" class="field has-addons">
<div class="control has-icons-left has-icons-right">
<input
class="input"
type="text"
placeholder="Search"
v-focus
v-model="searchTerm"
@keyup.enter="searchTasks"
@blur="hideSearchBar()"/>
@blur="hideSearchBar()"
@keyup.enter="searchTasks"
class="input"
placeholder="Search"
type="text"
v-focus
v-model="searchTerm"/>
<span class="icon is-left">
<icon icon="search"/>
</span>
</div>
<div class="control">
<button
class="button noshadow is-primary"
@click="searchTasks"
:class="{'is-loading': taskCollectionService.loading}">
:class="{'is-loading': taskCollectionService.loading}"
@click="searchTasks"
class="button noshadow is-primary">
Search
</button>
</div>
</div>
<button class="button" @click="showTaskSearch = !showTaskSearch" v-if="!showTaskSearch">
<button @click="showTaskSearch = !showTaskSearch" class="button" v-if="!showTaskSearch">
<span class="icon">
<icon icon="search"/>
</span>
</button>
</div>
<button class="button" @click="showTaskFilter = !showTaskFilter">
<button @click="showTaskFilter = !showTaskFilter" class="button">
<span class="icon is-small">
<icon icon="filter"/>
</span>
@ -41,30 +41,30 @@
</div>
<transition name="fade">
<filters
v-if="showTaskFilter"
v-model="params"
@change="loadTasks(1)"
@change="loadTasks(1)"
v-if="showTaskFilter"
v-model="params"
/>
</transition>
</div>
<div class="field task-add" v-if="!list.isArchived && canWrite">
<div class="field is-grouped">
<p class="control has-icons-left is-expanded" :class="{ 'is-loading': taskService.loading}">
<p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded">
<input
v-focus
class="input"
:class="{ 'disabled': taskService.loading}"
v-model="newTaskText"
type="text"
placeholder="Add a new task..."
@keyup.enter="addTask()"/>
:class="{ 'disabled': taskService.loading}"
@keyup.enter="addTask()"
class="input"
placeholder="Add a new task..."
type="text"
v-focus
v-model="newTaskText"/>
<span class="icon is-small is-left">
<icon icon="tasks"/>
</span>
</p>
<p class="control">
<button class="button is-success" :disabled="newTaskText.length === 0" @click="addTask()">
<button :disabled="newTaskText.length === 0" @click="addTask()" class="button is-success">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -77,24 +77,24 @@
</p>
</div>
<p v-if="tasks.length === 0" class="list-is-empty-notice">
<p class="list-is-empty-notice" v-if="tasks.length === 0">
This list is currently empty.
</p>
<div class="columns">
<div class="column">
<div class="tasks" v-if="tasks && tasks.length > 0" :class="{'short': isTaskEdit}">
<div :class="{'short': isTaskEdit}" class="tasks" v-if="tasks && tasks.length > 0">
<single-task-in-list
v-for="t in tasks"
:disabled="!canWrite"
:key="t.id"
:the-task="t"
@taskUpdated="updateTasks"
task-detail-route="task.detail"
:disabled="!canWrite"
v-for="t in tasks"
>
<div @click="editTask(t.id)" class="icon settings" v-if="!list.isArchived && canWrite">
<icon icon="pencil-alt"/>
</div>
<div @click="editTask(t.id)" class="icon settings" v-if="!list.isArchived && canWrite">
<icon icon="pencil-alt"/>
</div>
</single-task-in-list>
</div>
</div>
@ -104,7 +104,7 @@
<p class="card-header-title">
Edit Task
</p>
<a class="card-header-icon" @click="isTaskEdit = false">
<a @click="isTaskEdit = false" class="card-header-icon">
<span class="icon">
<icon icon="angle-right"/>
</span>
@ -120,22 +120,22 @@
</div>
<nav
class="pagination is-centered"
role="navigation"
aria-label="pagination"
v-if="taskCollectionService.totalPages > 1">
aria-label="pagination"
class="pagination is-centered"
role="navigation"
v-if="taskCollectionService.totalPages > 1">
<router-link
class="pagination-previous"
:to="getRouteForPagination(currentPage - 1)"
tag="button"
:disabled="currentPage === 1">
:disabled="currentPage === 1"
:to="getRouteForPagination(currentPage - 1)"
class="pagination-previous"
tag="button">
Previous
</router-link>
<router-link
class="pagination-next"
:to="getRouteForPagination(currentPage + 1)"
tag="button"
:disabled="currentPage === taskCollectionService.totalPages">
:disabled="currentPage === taskCollectionService.totalPages"
:to="getRouteForPagination(currentPage + 1)"
class="pagination-next"
tag="button">
Next page
</router-link>
<ul class="pagination-list">
@ -143,10 +143,10 @@
<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
<li :key="'page'+i" v-else>
<router-link
:to="getRouteForPagination(p.number)"
:class="{'is-current': p.number === currentPage}"
class="pagination-link"
:aria-label="'Goto page ' + p.number">
:aria-label="'Goto page ' + p.number"
:class="{'is-current': p.number === currentPage}"
:to="getRouteForPagination(p.number)"
class="pagination-link">
{{ p.number }}
</router-link>
</li>
@ -163,201 +163,201 @@
</template>
<script>
import TaskService from '../../../services/task'
import TaskModel from '../../../models/task'
import LabelTaskService from '../../../services/labelTask'
import LabelService from '../../../services/label'
import LabelTask from '../../../models/labelTask'
import LabelModel from '../../../models/label'
import TaskService from '../../../services/task'
import TaskModel from '../../../models/task'
import LabelTaskService from '../../../services/labelTask'
import LabelService from '../../../services/label'
import LabelTask from '../../../models/labelTask'
import LabelModel from '../../../models/label'
import EditTask from '../../../components/tasks/edit-task'
import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
import taskList from '../../../components/tasks/mixins/taskList'
import {saveListView} from '../../../helpers/saveListView'
import Filters from '../../../components/list/partials/filters'
import Rights from '../../../models/rights.json'
import {mapState} from 'vuex'
import EditTask from '../../../components/tasks/edit-task'
import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
import taskList from '../../../components/tasks/mixins/taskList'
import {saveListView} from '@/helpers/saveListView'
import Filters from '../../../components/list/partials/filters'
import Rights from '../../../models/rights.json'
import {mapState} from 'vuex'
export default {
name: 'List',
data() {
return {
taskService: TaskService,
list: {},
isTaskEdit: false,
taskEditTask: TaskModel,
newTaskText: '',
export default {
name: 'List',
data() {
return {
taskService: TaskService,
list: {},
isTaskEdit: false,
taskEditTask: TaskModel,
newTaskText: '',
showError: false,
labelTaskService: LabelTaskService,
labelService: LabelService,
showError: false,
labelTaskService: LabelTaskService,
labelService: LabelService,
}
},
mixins: [
taskList,
],
components: {
Filters,
SingleTaskInList,
EditTask,
},
created() {
this.taskService = new TaskService()
this.labelService = new LabelService()
this.labelTaskService = new LabelTaskService()
// Save the current list view to local storage
// We use local storage and not vuex here to make it persistent across reloads.
saveListView(this.$route.params.listId, this.$route.name)
},
computed: mapState({
canWrite: state => state.currentList.maxRight > Rights.READ,
}),
methods: {
// This function initializes the tasks page and loads the first page of tasks
initTasks(page, search = '') {
this.taskEditTask = null
this.isTaskEdit = false
this.loadTasks(page, search)
},
addTask() {
if (this.newTaskText === '') {
this.showError = true
return
}
},
mixins: [
taskList,
],
components: {
Filters,
SingleTaskInList,
EditTask,
},
created() {
this.taskService = new TaskService()
this.labelService = new LabelService()
this.labelTaskService = new LabelTaskService()
this.showError = false
// Save the current list view to local storage
// We use local storage and not vuex here to make it persistent across reloads.
saveListView(this.$route.params.listId, this.$route.name)
},
computed: mapState({
canWrite: state => state.currentList.maxRight > Rights.READ,
}),
methods: {
// This function initializes the tasks page and loads the first page of tasks
initTasks(page, search = '') {
this.taskEditTask = null
this.isTaskEdit = false
this.loadTasks(page, search)
},
addTask() {
if (this.newTaskText === '') {
this.showError = true
return
}
this.showError = false
let task = new TaskModel({title: this.newTaskText, listId: this.$route.params.listId})
this.taskService.create(task)
.then(task => {
this.tasks.push(task)
this.sortTasks()
this.newTaskText = ''
let task = new TaskModel({title: this.newTaskText, listId: this.$route.params.listId})
this.taskService.create(task)
.then(task => {
this.tasks.push(task)
this.sortTasks()
this.newTaskText = ''
// Check if the task has words starting with ~ in the title and make them to labels
const parts = task.title.split(' ~')
// The first element will always contain the title, even if there is no occurrence of ~
if (parts.length > 1) {
// Check if the task has words starting with ~ in the title and make them to labels
const parts = task.title.split(' ~')
// The first element will always contain the title, even if there is no occurrence of ~
if (parts.length > 1) {
// First, create an unresolved promise for each entry in the array to wait
// until all labels are added to update the task title once again
let labelAddings = []
let labelAddsToWaitFor = []
parts.forEach((p, index) => {
if (index < 1) {
return
}
// First, create an unresolved promise for each entry in the array to wait
// until all labels are added to update the task title once again
let labelAddings = []
let labelAddsToWaitFor = []
parts.forEach((p, index) => {
if (index < 1) {
return
}
labelAddsToWaitFor.push(new Promise((resolve, reject) => {
labelAddings.push({resolve: resolve, reject: reject})
}))
})
labelAddsToWaitFor.push(new Promise((resolve, reject) => {
labelAddings.push({resolve: resolve, reject: reject})
}))
})
// Then do everything that is involved in finding, creating and adding the label to the task
parts.forEach((p, index) => {
if (index < 1) {
return
}
// Then do everything that is involved in finding, creating and adding the label to the task
parts.forEach((p, index) => {
if (index < 1) {
return
}
// The part up until the next space
const labelTitle = p.split(' ')[0]
// The part up until the next space
const labelTitle = p.split(' ')[0]
// Check if the label exists
this.labelService.getAll({}, {s: labelTitle})
.then(res => {
// Label found, use it
if (res.length > 0 && res[0].title === labelTitle) {
const labelTask = new LabelTask({
taskId: task.id,
labelId: res[0].id,
})
this.labelTaskService.create(labelTask)
.then(result => {
task.labels.push(res[0])
// Check if the label exists
this.labelService.getAll({}, {s: labelTitle})
.then(res => {
// Label found, use it
if (res.length > 0 && res[0].title === labelTitle) {
const labelTask = new LabelTask({
taskId: task.id,
labelId: res[0].id,
// Remove the label text from the task title
task.title = task.title.replace(` ~${labelTitle}`, '')
// Make the promise done (the one with the index 0 does not exist)
labelAddings[index - 1].resolve(result)
})
this.labelTaskService.create(labelTask)
.then(result => {
task.labels.push(res[0])
// Remove the label text from the task title
task.title = task.title.replace(` ~${labelTitle}`, '')
// Make the promise done (the one with the index 0 does not exist)
labelAddings[index-1].resolve(result)
.catch(e => {
this.error(e, this)
})
} else {
// label not found, create it
const label = new LabelModel({title: labelTitle})
this.labelService.create(label)
.then(res => {
const labelTask = new LabelTask({
taskId: task.id,
labelId: res.id,
})
.catch(e => {
this.error(e, this)
})
} else {
// label not found, create it
const label = new LabelModel({title: labelTitle})
this.labelService.create(label)
.then(res => {
const labelTask = new LabelTask({
taskId: task.id,
labelId: res.id,
this.labelTaskService.create(labelTask)
.then(result => {
task.labels.push(res)
// Remove the label text from the task title
task.title = task.title.replace(` ~${labelTitle}`, '')
// Make the promise done (the one with the index 0 does not exist)
labelAddings[index - 1].resolve(result)
})
this.labelTaskService.create(labelTask)
.then(result => {
task.labels.push(res)
.catch(e => {
this.error(e, this)
})
})
.catch(e => {
this.error(e, this)
})
}
})
.catch(e => {
this.error(e, this)
})
})
// Remove the label text from the task title
task.title = task.title.replace(` ~${labelTitle}`, '')
// Make the promise done (the one with the index 0 does not exist)
labelAddings[index-1].resolve(result)
})
.catch(e => {
this.error(e, this)
})
})
.catch(e => {
this.error(e, this)
})
}
// This waits to update the task until all labels have been added and the title has
// been modified to remove each label text
Promise.all(labelAddsToWaitFor)
.then(() => {
this.taskService.update(task)
.then(updatedTask => {
this.updateTasks(updatedTask)
})
.catch(e => {
this.error(e, this)
})
})
// This waits to update the task until all labels have been added and the title has
// been modified to remove each label text
Promise.all(labelAddsToWaitFor)
.then(() => {
this.taskService.update(task)
.then(updatedTask => {
this.updateTasks(updatedTask)
})
.catch(e => {
this.error(e, this)
})
})
}
})
.catch(e => {
this.error(e, this)
})
},
editTask(id) {
// Find the selected task and set it to the current object
let theTask = this.getTaskById(id) // Somehow this does not work if we directly assign this to this.taskEditTask
this.taskEditTask = theTask
this.isTaskEdit = true
},
getTaskById(id) {
for (const t in this.tasks) {
if (this.tasks[t].id === parseInt(id)) {
return this.tasks[t]
}
})
.catch(e => {
this.error(e, this)
})
},
editTask(id) {
// Find the selected task and set it to the current object
let theTask = this.getTaskById(id) // Somehow this does not work if we directly assign this to this.taskEditTask
this.taskEditTask = theTask
this.isTaskEdit = true
},
getTaskById(id) {
for (const t in this.tasks) {
if (this.tasks[t].id === parseInt(id)) {
return this.tasks[t]
}
return {} // FIXME: This should probably throw something to make it clear to the user noting was found
},
updateTasks(updatedTask) {
for (const t in this.tasks) {
if (this.tasks[t].id === updatedTask.id) {
this.$set(this.tasks, t, updatedTask)
break
}
}
return {} // FIXME: This should probably throw something to make it clear to the user noting was found
},
updateTasks(updatedTask) {
for (const t in this.tasks) {
if (this.tasks[t].id === updatedTask.id) {
this.$set(this.tasks, t, updatedTask)
break
}
this.sortTasks()
},
}
}
}
this.sortTasks()
},
},
}
</script>

268
src/views/list/views/Table.vue
View File

@ -1,14 +1,16 @@
<template>
<div class="table-view loader-container" :class="{'is-loading': taskCollectionService.loading}">
<div :class="{'is-loading': taskCollectionService.loading}" class="table-view loader-container">
<div class="filter-container">
<div class="items">
<button class="button" @click="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}">
<button @click="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
class="button">
<span class="icon is-small">
<icon icon="th"/>
</span>
Columns
</button>
<button class="button" @click="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}">
<button @click="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
class="button">
<span class="icon is-small">
<icon icon="filter"/>
</span>
@ -21,22 +23,29 @@
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">Done</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">Title</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">Priority</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">Priority
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">Labels</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">Assignees</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">Due Date</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">Start Date</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">End Date</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">% Done</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">Assignees
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">Due Date
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">Start Date
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">End Date
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">% Done
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">Created</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">Updated</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">Created By</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">Created By
</fancycheckbox>
</div>
</div>
<filters
v-if="showTaskFilter"
v-model="params"
@change="loadTasks(1)"
@change="loadTasks(1)"
v-if="showTaskFilter"
v-model="params"
/>
</transition>
</div>
@ -96,7 +105,7 @@
</tr>
</thead>
<tbody>
<tr v-for="t in tasks" :key="t.id">
<tr :key="t.id" v-for="t in tasks">
<td v-if="activeColumns.id">
<router-link :to="{name: 'task.detail', params: { id: t.id }}">
<template v-if="t.identifier === ''">
@ -121,12 +130,12 @@
</td>
<td v-if="activeColumns.assignees">
<user
:user="a"
:avatar-size="27"
:show-username="false"
:is-inline="true"
v-for="(a, i) in t.assignees"
:key="t.id + 'assignee' + a.id + i"
:avatar-size="27"
:is-inline="true"
:key="t.id + 'assignee' + a.id + i"
:show-username="false"
:user="a"
v-for="(a, i) in t.assignees"
/>
</td>
<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
@ -137,22 +146,43 @@
<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
<td v-if="activeColumns.createdBy">
<user
:user="t.createdBy"
:show-username="false"
:avatar-size="27"/>
:avatar-size="27"
:show-username="false"
:user="t.createdBy"/>
</td>
</tr>
</tbody>
</table>
<nav class="pagination is-centered" role="navigation" aria-label="pagination" v-if="taskCollectionService.totalPages > 1">
<router-link class="pagination-previous" :to="getRouteForPagination(currentPage - 1, 'table')" tag="button" :disabled="currentPage === 1">Previous</router-link>
<router-link class="pagination-next" :to="getRouteForPagination(currentPage + 1, 'table')" tag="button" :disabled="currentPage === taskCollectionService.totalPages">Next page</router-link>
<nav
aria-label="pagination"
class="pagination is-centered"
role="navigation"
v-if="taskCollectionService.totalPages > 1">
<router-link
:disabled="currentPage === 1"
:to="getRouteForPagination(currentPage - 1, 'table')"
class="pagination-previous"
tag="button">
Previous
</router-link>
<router-link
:disabled="currentPage === taskCollectionService.totalPages"
:to="getRouteForPagination(currentPage + 1, 'table')"
class="pagination-next"
tag="button">
Next page
</router-link>
<ul class="pagination-list">
<template v-for="(p, i) in pages">
<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
<li :key="'page'+i" v-else>
<router-link :to="getRouteForPagination(p.number, 'table')" :class="{'is-current': p.number === currentPage}" class="pagination-link" :aria-label="'Goto page ' + p.number">{{ p.number }}</router-link>
<router-link
:aria-label="'Goto page ' + p.number"
:class="{'is-current': p.number === currentPage}"
:to="getRouteForPagination(p.number, 'table')"
class="pagination-link">{{ p.number }}
</router-link>
</li>
</template>
</ul>
@ -167,100 +197,100 @@
</template>
<script>
import taskList from '../../../components/tasks/mixins/taskList'
import User from '../../../components/misc/user'
import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
import Labels from '../../../components/tasks/partials/labels'
import DateTableCell from '../../../components/tasks/partials/date-table-cell'
import Fancycheckbox from '../../../components/input/fancycheckbox'
import Sort from '../../../components/tasks/partials/sort'
import {saveListView} from '../../../helpers/saveListView'
import Filters from '../../../components/list/partials/filters'
import taskList from '../../../components/tasks/mixins/taskList'
import User from '../../../components/misc/user'
import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
import Labels from '../../../components/tasks/partials/labels'
import DateTableCell from '../../../components/tasks/partials/date-table-cell'
import Fancycheckbox from '../../../components/input/fancycheckbox'
import Sort from '../../../components/tasks/partials/sort'
import {saveListView} from '@/helpers/saveListView'
import Filters from '../../../components/list/partials/filters'
export default {
name: 'Table',
components: {
Filters,
Sort,
Fancycheckbox,
DateTableCell,
Labels,
PriorityLabel,
User,
},
mixins: [
taskList,
],
data() {
return {
showActiveColumnsFilter: false,
activeColumns: {
id: true,
done: true,
title: true,
priority: false,
labels: true,
assignees: true,
dueDate: true,
startDate: false,
endDate: false,
percentDone: false,
created: false,
updated: false,
createdBy: false,
},
sortBy: {
id: 'desc',
},
}
},
created() {
const savedShowColumns = localStorage.getItem('tableViewColumns')
if (savedShowColumns !== null) {
this.$set(this, 'activeColumns', JSON.parse(savedShowColumns))
}
const savedSortBy = localStorage.getItem('tableViewSortBy')
if (savedSortBy !== null) {
this.$set(this, 'sortBy', JSON.parse(savedSortBy))
}
this.$set(this.params, 'filter_by', [])
this.$set(this.params, 'filter_value', [])
this.$set(this.params, 'filter_comparator', [])
this.initTasks(1)
// Save the current list view to local storage
// We use local storage and not vuex here to make it persistent across reloads.
saveListView(this.$route.params.listId, this.$route.name)
},
methods: {
initTasks(page, search = '') {
const params = this.params
params.sort_by = []
params.order_by = []
Object.keys(this.sortBy).map(s => {
params.sort_by.push(s)
params.order_by.push(this.sortBy[s])
})
this.loadTasks(page, search, params)
export default {
name: 'Table',
components: {
Filters,
Sort,
Fancycheckbox,
DateTableCell,
Labels,
PriorityLabel,
User,
},
mixins: [
taskList,
],
data() {
return {
showActiveColumnsFilter: false,
activeColumns: {
id: true,
done: true,
title: true,
priority: false,
labels: true,
assignees: true,
dueDate: true,
startDate: false,
endDate: false,
percentDone: false,
created: false,
updated: false,
createdBy: false,
},
sort(property) {
const order = this.sortBy[property]
if (typeof order === 'undefined' || order === 'none') {
this.$set(this.sortBy, property, 'desc')
} else if (order === 'desc') {
this.$set(this.sortBy, property, 'asc')
} else {
this.$delete(this.sortBy, property)
}
this.initTasks(this.currentPage, this.searchTerm)
// Save the order to be able to retrieve them later
localStorage.setItem('tableViewSortBy', JSON.stringify(this.sortBy))
},
saveTaskColumns() {
localStorage.setItem('tableViewColumns', JSON.stringify(this.activeColumns))
sortBy: {
id: 'desc',
},
}
},
created() {
const savedShowColumns = localStorage.getItem('tableViewColumns')
if (savedShowColumns !== null) {
this.$set(this, 'activeColumns', JSON.parse(savedShowColumns))
}
const savedSortBy = localStorage.getItem('tableViewSortBy')
if (savedSortBy !== null) {
this.$set(this, 'sortBy', JSON.parse(savedSortBy))
}
this.$set(this.params, 'filter_by', [])
this.$set(this.params, 'filter_value', [])
this.$set(this.params, 'filter_comparator', [])
this.initTasks(1)
// Save the current list view to local storage
// We use local storage and not vuex here to make it persistent across reloads.
saveListView(this.$route.params.listId, this.$route.name)
},
methods: {
initTasks(page, search = '') {
const params = this.params
params.sort_by = []
params.order_by = []
Object.keys(this.sortBy).map(s => {
params.sort_by.push(s)
params.order_by.push(this.sortBy[s])
})
this.loadTasks(page, search, params)
},
}
sort(property) {
const order = this.sortBy[property]
if (typeof order === 'undefined' || order === 'none') {
this.$set(this.sortBy, property, 'desc')
} else if (order === 'desc') {
this.$set(this.sortBy, property, 'asc')
} else {
this.$delete(this.sortBy, property)
}
this.initTasks(this.currentPage, this.searchTerm)
// Save the order to be able to retrieve them later
localStorage.setItem('tableViewSortBy', JSON.stringify(this.sortBy))
},
saveTaskColumns() {
localStorage.setItem('tableViewColumns', JSON.stringify(this.activeColumns))
},
},
}
</script>

24
src/views/migrator/Migrate.vue
View File

@ -3,8 +3,8 @@
<h1>Import your data from other services to Vikunja</h1>
<p>Click on the logo of one of the third-party services below to get started.</p>
<div class="migration-services-overview">
<router-link :to="{name: 'migrate.service', params: {service: m}}" v-for="m in availableMigrators" :key="m">
<img :src="`/images/migration/${m}.png`" :alt="m"/>
<router-link :key="m" :to="{name: 'migrate.service', params: {service: m}}" v-for="m in availableMigrators">
<img :alt="m" :src="`/images/migration/${m}.png`"/>
{{ m }}
</router-link>
</div>
@ -12,15 +12,15 @@
</template>
<script>
export default {
name: 'migrate.service',
mounted() {
this.setTitle('Import your data to Vikunja')
export default {
name: 'migrate.service',
mounted() {
this.setTitle('Import your data to Vikunja')
},
computed: {
availableMigrators() {
return this.$store.state.config.availableMigrators
},
computed: {
availableMigrators() {
return this.$store.state.config.availableMigrators
},
},
}
},
}
</script>

66
src/views/migrator/MigrateService.vue
View File

@ -1,42 +1,42 @@
<template>
<migration
:identifier="identifier"
:name="name"
:identifier="identifier"
:name="name"
/>
</template>
<script>
import Migration from '../../components/migrator/migration'
import router from '../../router'
import Migration from '../../components/migrator/migration'
import router from '../../router'
export default {
name: 'migrateService',
components: {
Migration,
},
data() {
return {
name: '',
identifier: '',
}
},
mounted() {
this.setTitle(`Import your data from ${this.name} into Vikunja`)
},
created() {
switch (this.$route.params.service) {
case 'wunderlist':
this.name = 'Wunderlist'
this.identifier = 'wunderlist'
break
case 'todoist':
this.name = 'Todoist'
this.identifier = 'todoist'
break
default:
router.push({name: '404'})
}
},
}
export default {
name: 'migrateService',
components: {
Migration,
},
data() {
return {
name: '',
identifier: '',
}
},
mounted() {
this.setTitle(`Import your data from ${this.name} into Vikunja`)
},
created() {
switch (this.$route.params.service) {
case 'wunderlist':
this.name = 'Wunderlist'
this.identifier = 'wunderlist'
break
case 'todoist':
this.name = 'Todoist'
this.identifier = 'todoist'
break
default:
router.push({name: '404'})
}
},
}
</script>

254
src/views/namespaces/EditNamespace.vue
View File

@ -17,27 +17,27 @@
<label class="label" for="namespacetext">Namespace Name</label>
<div class="control">
<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.title"/>
:class="{ 'disabled': namespaceService.loading}"
:disabled="namespaceService.loading"
class="input"
id="namespacetext"
placeholder="The namespace text is here..."
type="text"
v-focus
v-model="namespace.title"/>
</div>
</div>
<div class="field">
<label class="label" for="namespacedescription">Description</label>
<div class="control">
<editor
:class="{ 'disabled': namespaceService.loading}"
:disabled="namespaceService.loading"
placeholder="The namespaces description goes here..."
id="namespacedescription"
v-model="namespace.description"
:preview-is-default="false"
v-if="editorActive"
:class="{ 'disabled': namespaceService.loading}"
:disabled="namespaceService.loading"
:preview-is-default="false"
id="namespacedescription"
placeholder="The namespaces description goes here..."
v-if="editorActive"
v-model="namespace.description"
/>
</div>
</div>
@ -45,8 +45,8 @@
<label class="label" for="isArchivedCheck">Is Archived</label>
<div class="control">
<fancycheckbox
v-model="namespace.isArchived"
v-tooltip="'If a namespace is archived, you cannot create new lists or edit it.'">
v-model="namespace.isArchived"
v-tooltip="'If a namespace is archived, you cannot create new lists or edit it.'">
This namespace is archived
</fancycheckbox>
</div>
@ -61,14 +61,14 @@
<div class="columns bigbuttons">
<div class="column">
<button @click="submit()" class="button is-primary is-fullwidth"
:class="{ 'is-loading': namespaceService.loading}">
<button :class="{ 'is-loading': namespaceService.loading}" @click="submit()"
class="button is-primary is-fullwidth">
Save
</button>
</div>
<div class="column is-1">
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth"
:class="{ 'is-loading': namespaceService.loading}">
<button :class="{ 'is-loading': namespaceService.loading}" @click="showDeleteModal = true"
class="button is-danger is-fullwidth">
<span class="icon is-small">
<icon icon="trash-alt"/>
</span>
@ -80,22 +80,22 @@
</div>
<component
:is="manageUsersComponent"
:id="namespace.id"
type="namespace"
shareType="user"
:userIsAdmin="userIsAdmin"/>
:id="namespace.id"
:is="manageUsersComponent"
:userIsAdmin="userIsAdmin"
shareType="user"
type="namespace"/>
<component
:is="manageTeamsComponent"
:id="namespace.id"
type="namespace"
shareType="team"
:userIsAdmin="userIsAdmin"/>
:id="namespace.id"
:is="manageTeamsComponent"
:userIsAdmin="userIsAdmin"
shareType="team"
type="namespace"/>
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
v-on:submit="deleteNamespace()">
@close="showDeleteModal = false"
v-if="showDeleteModal"
v-on:submit="deleteNamespace()">
<span slot="header">Delete the namespace</span>
<p slot="text">Are you sure you want to delete this namespace and all of its contents?
<br/>This includes lists & tasks and <b>CANNOT BE UNDONE!</b></p>
@ -104,101 +104,101 @@
</template>
<script>
import router from '../../router'
import manageSharing from '../../components/sharing/userTeam'
import router from '../../router'
import manageSharing from '../../components/sharing/userTeam'
import NamespaceService from '../../services/namespace'
import NamespaceModel from '../../models/namespace'
import Fancycheckbox from '../../components/input/fancycheckbox'
import ColorPicker from '../../components/input/colorPicker'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
import NamespaceService from '../../services/namespace'
import NamespaceModel from '../../models/namespace'
import Fancycheckbox from '../../components/input/fancycheckbox'
import ColorPicker from '../../components/input/colorPicker'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
export default {
name: "EditNamespace",
data() {
return {
namespaceService: NamespaceService,
manageUsersComponent: '',
manageTeamsComponent: '',
export default {
name: 'EditNamespace',
data() {
return {
namespaceService: NamespaceService,
manageUsersComponent: '',
manageTeamsComponent: '',
namespace: NamespaceModel,
showDeleteModal: false,
editorActive: false,
}
},
components: {
ColorPicker,
Fancycheckbox,
manageSharing,
editor: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
beforeMount() {
this.namespace.id = this.$route.params.id
},
created() {
this.namespaceService = new NamespaceService()
this.namespace = new NamespaceModel()
this.loadNamespace()
},
watch: {
// call again the method if the route changes
'$route': 'loadNamespace'
},
computed: {
userIsAdmin() {
return this.namespace.owner && this.namespace.owner.id === this.$store.state.auth.info.id
},
},
methods: {
loadNamespace() {
// This makes the editor trigger its mounted function again which makes it forget every input
// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
// which made it impossible to detect change from the outside. Therefore the component would
// not update if new content from the outside was made available.
// See https://github.com/NikulinIlya/vue-easymde/issues/3
this.editorActive = false
this.$nextTick(() => this.editorActive = true)
let namespace = new NamespaceModel({id: this.$route.params.id})
this.namespaceService.get(namespace)
.then(r => {
this.$set(this, 'namespace', r)
// This will trigger the dynamic loading of components once we actually have all the data to pass to them
this.manageTeamsComponent = 'manageSharing'
this.manageUsersComponent = 'manageSharing'
this.setTitle(`Edit ${this.namespace.title}`)
})
.catch(e => {
this.error(e, this)
})
},
submit() {
this.namespaceService.update(this.namespace)
.then(r => {
// Update the namespace in the parent
this.$store.commit('namespaces/setNamespaceById', r)
this.success({message: 'The namespace was successfully updated.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
deleteNamespace() {
this.namespaceService.delete(this.namespace)
.then(() => {
this.success({message: 'The namespace was successfully deleted.'}, this)
router.push({name: 'home'})
})
.catch(e => {
this.error(e, this)
})
}
namespace: NamespaceModel,
showDeleteModal: false,
editorActive: false,
}
}
},
components: {
ColorPicker,
Fancycheckbox,
manageSharing,
editor: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
beforeMount() {
this.namespace.id = this.$route.params.id
},
created() {
this.namespaceService = new NamespaceService()
this.namespace = new NamespaceModel()
this.loadNamespace()
},
watch: {
// call again the method if the route changes
'$route': 'loadNamespace',
},
computed: {
userIsAdmin() {
return this.namespace.owner && this.namespace.owner.id === this.$store.state.auth.info.id
},
},
methods: {
loadNamespace() {
// This makes the editor trigger its mounted function again which makes it forget every input
// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
// which made it impossible to detect change from the outside. Therefore the component would
// not update if new content from the outside was made available.
// See https://github.com/NikulinIlya/vue-easymde/issues/3
this.editorActive = false
this.$nextTick(() => this.editorActive = true)
let namespace = new NamespaceModel({id: this.$route.params.id})
this.namespaceService.get(namespace)
.then(r => {
this.$set(this, 'namespace', r)
// This will trigger the dynamic loading of components once we actually have all the data to pass to them
this.manageTeamsComponent = 'manageSharing'
this.manageUsersComponent = 'manageSharing'
this.setTitle(`Edit ${this.namespace.title}`)
})
.catch(e => {
this.error(e, this)
})
},
submit() {
this.namespaceService.update(this.namespace)
.then(r => {
// Update the namespace in the parent
this.$store.commit('namespaces/setNamespaceById', r)
this.success({message: 'The namespace was successfully updated.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
deleteNamespace() {
this.namespaceService.delete(this.namespace)
.then(() => {
this.success({message: 'The namespace was successfully deleted.'}, this)
router.push({name: 'home'})
})
.catch(e => {
this.error(e, this)
})
},
},
}
</script>

106
src/views/namespaces/ListNamespaces.vue
View File

@ -7,11 +7,11 @@
Create new namespace
</router-link>
<fancycheckbox v-model="showArchived" class="show-archived-check">
<fancycheckbox class="show-archived-check" v-model="showArchived">
Show Archived
</fancycheckbox>
<div class="namespace" v-for="n in namespaces" :key="`n${n.id}`">
<div :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
<h1>
<span>{{ n.title }}</span>
<span class="is-archived" v-if="n.isArchived">
@ -22,18 +22,18 @@
<div class="lists">
<template v-for="l in n.lists">
<router-link
:to="{ name: 'list.index', params: { listId: l.id} }"
class="list"
:key="`l${l.id}`"
v-if="showArchived ? true : !l.isArchived"
:style="{
'background-color': l.hexColor,
'background-image': typeof backgrounds[l.id] !== 'undefined' ? `url(${backgrounds[l.id]})` : false,
}"
:class="{
:class="{
'has-light-text': !colorIsDark(l.hexColor),
'has-background': typeof backgrounds[l.id] !== 'undefined',
}"
:key="`l${l.id}`"
:style="{
'background-color': l.hexColor,
'background-image': typeof backgrounds[l.id] !== 'undefined' ? `url(${backgrounds[l.id]})` : false,
}"
:to="{ name: 'list.index', params: { listId: l.id} }"
class="list"
v-if="showArchived ? true : !l.isArchived"
>
<div class="is-archived-container">
<span class="is-archived" v-if="l.isArchived">
@ -49,50 +49,50 @@
</template>
<script>
import {mapState} from 'vuex'
import ListService from '../../services/list'
import Fancycheckbox from '../../components/input/fancycheckbox'
import {mapState} from 'vuex'
import ListService from '../../services/list'
import Fancycheckbox from '../../components/input/fancycheckbox'
export default {
name: 'ListNamespaces',
components: {
Fancycheckbox,
export default {
name: 'ListNamespaces',
components: {
Fancycheckbox,
},
data() {
return {
showArchived: false,
// listId is the key, the object is the background blob
backgrounds: {},
}
},
created() {
this.loadBackgroundsForLists()
},
mounted() {
this.setTitle('Namespaces & Lists')
},
computed: mapState({
namespaces(state) {
return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
},
data() {
return {
showArchived: false,
// listId is the key, the object is the background blob
backgrounds: {},
}
},
created() {
this.loadBackgroundsForLists()
},
mounted() {
this.setTitle('Namespaces & Lists')
},
computed: mapState({
namespaces(state) {
return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
},
}),
methods: {
loadBackgroundsForLists() {
const listService = new ListService()
this.namespaces.forEach(n => {
n.lists.forEach(l => {
if (l.backgroundInformation) {
listService.background(l)
.then(b => {
this.$set(this.backgrounds, l.id, b)
})
.catch(e => {
this.error(e, this)
})
}
})
}),
methods: {
loadBackgroundsForLists() {
const listService = new ListService()
this.namespaces.forEach(n => {
n.lists.forEach(l => {
if (l.backgroundInformation) {
listService.background(l)
.then(b => {
this.$set(this.backgrounds, l.id, b)
})
.catch(e => {
this.error(e, this)
})
}
})
},
})
},
}
},
}
</script>

107
src/views/namespaces/NewNamespace.vue
View File

@ -1,23 +1,24 @@
<template>
<div class="fullpage">
<a class="close" @click="back()">
<a @click="back()" class="close">
<icon :icon="['far', 'times-circle']">
</icon>
</a>
<h3>Create a new namespace</h3>
<div class="field is-grouped">
<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.title"
type="text"
<input
@keyup.enter="newNamespace()"
@keyup.esc="back()"
placeholder="The namespace's name goes here..."/>
class="input"
placeholder="The namespace's name goes here..."
type="text"
:class="{ 'disabled': namespaceService.loading}"
v-focus
v-model="namespace.title"/>
</p>
<p class="control">
<button class="button is-success noshadow" @click="newNamespace()" :disabled="namespace.title === ''">
<button :disabled="namespace.title === ''" @click="newNamespace()" class="button is-success noshadow">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -28,55 +29,57 @@
<p class="help is-danger" v-if="showError && namespace.title === ''">
Please specify a title.
</p>
<p class="small" v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.'">
<p
class="small"
v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.'">
What's a namespace?</p>
</div>
</template>
<script>
import router from '../../router'
import NamespaceModel from "../../models/namespace";
import NamespaceService from "../../services/namespace";
import {IS_FULLPAGE} from '../../store/mutation-types'
import router from '../../router'
import NamespaceModel from '../../models/namespace'
import NamespaceService from '../../services/namespace'
import {IS_FULLPAGE} from '@/store/mutation-types'
export default {
name: "NewNamespace",
data() {
return {
showError: false,
namespace: NamespaceModel,
namespaceService: NamespaceService,
}
},
created() {
this.namespace = new NamespaceModel()
this.namespaceService = new NamespaceService()
this.$store.commit(IS_FULLPAGE, true)
},
mounted() {
this.setTitle('Create a new namespace')
},
methods: {
newNamespace() {
if (this.namespace.title === '') {
this.showError = true
return
}
this.showError = false
this.namespaceService.create(this.namespace)
.then(r => {
this.$store.commit('namespaces/addNamespace', r)
this.success({message: 'The namespace was successfully created.'}, this)
router.back()
})
.catch(e => {
this.error(e, this)
})
},
back() {
router.go(-1)
}
export default {
name: 'NewNamespace',
data() {
return {
showError: false,
namespace: NamespaceModel,
namespaceService: NamespaceService,
}
}
},
created() {
this.namespace = new NamespaceModel()
this.namespaceService = new NamespaceService()
this.$store.commit(IS_FULLPAGE, true)
},
mounted() {
this.setTitle('Create a new namespace')
},
methods: {
newNamespace() {
if (this.namespace.title === '') {
this.showError = true
return
}
this.showError = false
this.namespaceService.create(this.namespace)
.then(r => {
this.$store.commit('namespaces/addNamespace', r)
this.success({message: 'The namespace was successfully created.'}, this)
router.back()
})
.catch(e => {
this.error(e, this)
})
},
back() {
router.go(-1)
},
},
}
</script>

54
src/views/sharing/LinkSharingAuth.vue
View File

@ -9,33 +9,33 @@
</template>
<script>
import router from '../../router'
import router from '../../router'
export default {
name: 'LinkSharingAuth',
data() {
return {
hash: '',
loading: true,
}
export default {
name: 'LinkSharingAuth',
data() {
return {
hash: '',
loading: true,
}
},
created() {
this.auth()
},
mounted() {
this.setTitle('Authenticating...')
},
methods: {
auth() {
this.$store.dispatch('auth/linkShareAuth', this.$route.params.share)
.then((r) => {
this.loading = false
router.push({name: 'list.list', params: {listId: r.list_id}})
})
.catch(e => {
this.error(e, this)
})
},
created() {
this.auth()
},
mounted() {
this.setTitle('Authenticating...')
},
methods: {
auth() {
this.$store.dispatch('auth/linkShareAuth', this.$route.params.share)
.then((r) => {
this.loading = false
router.push({name: 'list.list', params: {listId: r.list_id}})
})
.catch(e => {
this.error(e, this)
})
}
},
}
},
}
</script>

310
src/views/tasks/ShowTasks.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="is-max-width-desktop show-tasks">
<fancycheckbox
class="is-pulled-right"
v-if="!showAll"
v-model="showNulls"
@change="loadPendingTasks"
@change="loadPendingTasks"
class="is-pulled-right"
v-if="!showAll"
v-model="showNulls"
>
Show tasks without dates
</fancycheckbox>
@ -12,184 +12,184 @@
<h3 v-else>
Tasks from
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading"
v-model="cStartDate"
:config="flatPickerConfig"
@on-close="loadPendingTasks"
:class="{ 'disabled': taskService.loading}"
:config="flatPickerConfig"
:disabled="taskService.loading"
@on-close="loadPendingTasks"
class="input"
v-model="cStartDate"
/>
until
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading"
v-model="cEndDate"
:config="flatPickerConfig"
@on-close="loadPendingTasks"
:class="{ 'disabled': taskService.loading}"
:config="flatPickerConfig"
:disabled="taskService.loading"
@on-close="loadPendingTasks"
class="input"
v-model="cEndDate"
/>
</h3>
<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0)">
<h3 class="nothing">Nothing to do - Have a nice day!</h3>
<img src="/images/cool.svg" alt=""/>
<img alt="" src="/images/cool.svg"/>
</template>
<div class="spinner" :class="{ 'is-loading': taskService.loading}"></div>
<div :class="{ 'is-loading': taskService.loading}" class="spinner"></div>
<div class="tasks" v-if="tasks && tasks.length > 0">
<div class="task" v-for="t in tasks" :key="t.id">
<single-task-in-list :the-task="t" @taskUpdated="updateTasks" :show-list="true"/>
<div :key="t.id" class="task" v-for="t in tasks">
<single-task-in-list :show-list="true" :the-task="t" @taskUpdated="updateTasks"/>
</div>
</div>
</div>
</template>
<script>
import TaskService from '../../services/task'
import SingleTaskInList from '../../components/tasks/partials/singleTaskInList'
import {HAS_TASKS} from '../../store/mutation-types'
import {mapState} from 'vuex'
import TaskService from '../../services/task'
import SingleTaskInList from '../../components/tasks/partials/singleTaskInList'
import {HAS_TASKS} from '@/store/mutation-types'
import {mapState} from 'vuex'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import Fancycheckbox from '../../components/input/fancycheckbox'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import Fancycheckbox from '../../components/input/fancycheckbox'
export default {
name: 'ShowTasks',
components: {
Fancycheckbox,
SingleTaskInList,
flatPickr,
export default {
name: 'ShowTasks',
components: {
Fancycheckbox,
SingleTaskInList,
flatPickr,
},
data() {
return {
tasks: [],
hasUndoneTasks: false,
taskService: TaskService,
showNulls: true,
cStartDate: null,
cEndDate: null,
flatPickerConfig: {
altFormat: 'j M Y H:i',
altInput: true,
dateFormat: 'Y-m-d H:i',
enableTime: true,
time_24hr: true,
},
}
},
props: {
startDate: Date,
endDate: Date,
showAll: Boolean,
},
created() {
this.taskService = new TaskService()
this.cStartDate = this.startDate
this.cEndDate = this.endDate
this.loadPendingTasks()
},
watch: {
'$route': 'loadPendingTasks',
startDate(newVal) {
this.cStartDate = newVal
},
data() {
return {
tasks: [],
hasUndoneTasks: false,
taskService: TaskService,
showNulls: true,
cStartDate: null,
cEndDate: null,
flatPickerConfig: {
altFormat: 'j M Y H:i',
altInput: true,
dateFormat: 'Y-m-d H:i',
enableTime: true,
time_24hr: true,
},
endDate(newVal) {
this.cEndDate = newVal
},
},
computed: mapState({
userAuthenticated: state => state.auth.authenticated,
}),
methods: {
loadPendingTasks() {
// Since this route is authentication only, users would get an error message if they access the page unauthenticated.
// Since this component is mounted as the home page before unauthenticated users get redirected
// to the login page, they will almost always see the error message.
if (!this.userAuthenticated) {
return
}
},
props: {
startDate: Date,
endDate: Date,
showAll: Boolean,
},
created() {
this.taskService = new TaskService()
this.cStartDate = this.startDate
this.cEndDate = this.endDate
this.loadPendingTasks()
},
watch: {
'$route': 'loadPendingTasks',
startDate(newVal) {
this.cStartDate = newVal
},
endDate(newVal) {
this.cEndDate = newVal
},
},
computed: mapState({
userAuthenticated: state => state.auth.authenticated,
}),
methods: {
loadPendingTasks() {
// Since this route is authentication only, users would get an error message if they access the page unauthenticated.
// Since this component is mounted as the home page before unauthenticated users get redirected
// to the login page, they will almost always see the error message.
if (!this.userAuthenticated) {
return
}
// Make sure all dates are date objects
this.cStartDate = new Date(this.cStartDate)
this.cEndDate = new Date(this.cEndDate)
// Make sure all dates are date objects
this.cStartDate = new Date(this.cStartDate)
this.cEndDate = new Date(this.cEndDate)
if (this.showAll) {
this.setTitle('Current Tasks')
} else {
this.setTitle(`Tasks from ${this.cStartDate.toLocaleDateString()} until ${this.cEndDate.toLocaleDateString()}`)
}
if (this.showAll) {
this.setTitle('Current Tasks')
} else {
this.setTitle(`Tasks from ${this.cStartDate.toLocaleDateString()} until ${this.cEndDate.toLocaleDateString()}`)
}
const params = {
sort_by: ['due_date', 'id'],
order_by: ['desc', 'desc'],
filter_by: ['done'],
filter_value: [false],
filter_comparator: ['equals'],
filter_concat: 'and',
filter_include_nulls: this.showNulls,
}
if (!this.showAll) {
if(this.showNulls) {
params.filter_by.push('start_date')
params.filter_value.push(this.cStartDate)
params.filter_comparator.push('greater')
params.filter_by.push('end_date')
params.filter_value.push(this.cEndDate)
params.filter_comparator.push('less')
}
params.filter_by.push('due_date')
params.filter_value.push(this.cEndDate)
params.filter_comparator.push('less')
params.filter_by.push('due_date')
const params = {
sort_by: ['due_date', 'id'],
order_by: ['desc', 'desc'],
filter_by: ['done'],
filter_value: [false],
filter_comparator: ['equals'],
filter_concat: 'and',
filter_include_nulls: this.showNulls,
}
if (!this.showAll) {
if (this.showNulls) {
params.filter_by.push('start_date')
params.filter_value.push(this.cStartDate)
params.filter_comparator.push('greater')
params.filter_by.push('end_date')
params.filter_value.push(this.cEndDate)
params.filter_comparator.push('less')
}
this.taskService.getAll({}, params)
.then(r => {
if (r.length > 0) {
for (const index in r) {
if (r[index].done !== true) {
this.hasUndoneTasks = true
}
params.filter_by.push('due_date')
params.filter_value.push(this.cEndDate)
params.filter_comparator.push('less')
params.filter_by.push('due_date')
params.filter_value.push(this.cStartDate)
params.filter_comparator.push('greater')
}
this.taskService.getAll({}, params)
.then(r => {
if (r.length > 0) {
for (const index in r) {
if (r[index].done !== true) {
this.hasUndoneTasks = true
}
}
this.$set(this, 'tasks', r.filter(t => !t.done))
this.$store.commit(HAS_TASKS, r.length > 0)
})
.catch(e => {
this.error(e, this)
})
},
sortTasks() {
if (this.tasks === null || this.tasks === []) {
return
}
return this.tasks.sort(function (a, b) {
if (a.done < b.done)
return -1
if (a.done > b.done)
return 1
if (a.id > b.id)
return -1
if (a.id < b.id)
return 1
return 0
})
},
updateTasks(updatedTask) {
for (const t in this.tasks) {
if (this.tasks[t].id === updatedTask.id) {
this.$set(this.tasks, t, updatedTask)
break
}
}
this.sortTasks()
},
this.$set(this, 'tasks', r.filter(t => !t.done))
this.$store.commit(HAS_TASKS, r.length > 0)
})
.catch(e => {
this.error(e, this)
})
},
}
sortTasks() {
if (this.tasks === null || this.tasks === []) {
return
}
return this.tasks.sort(function (a, b) {
if (a.done < b.done)
return -1
if (a.done > b.done)
return 1
if (a.id > b.id)
return -1
if (a.id < b.id)
return 1
return 0
})
},
updateTasks(updatedTask) {
for (const t in this.tasks) {
if (this.tasks[t].id === updatedTask.id) {
this.$set(this.tasks, t, updatedTask)
break
}
}
this.sortTasks()
},
},
}
</script>

68
src/views/tasks/ShowTasksInRange.vue
View File

@ -1,46 +1,46 @@
<template>
<div class="content has-text-centered">
<ShowTasks
:start-date="startDate"
:end-date="endDate"
:start-date="startDate"
/>
</div>
</template>
<script>
import ShowTasks from './ShowTasks'
import ShowTasks from './ShowTasks'
export default {
name: 'ShowTasksInRange',
components: {
ShowTasks,
},
data() {
return {
startDate: new Date(this.$route.params.startDateUnix),
endDate: new Date(this.$route.params.endDateUnix),
}
},
watch: {
// call again the method if the route changes
'$route': 'setDates'
},
created() {
this.setDates();
},
methods: {
setDates() {
switch (this.$route.params.type) {
case 'week':
this.startDate = new Date();
this.endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000);
break;
case 'month':
this.startDate = new Date();
this.endDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1));
break;
}
}
export default {
name: 'ShowTasksInRange',
components: {
ShowTasks,
},
data() {
return {
startDate: new Date(this.$route.params.startDateUnix),
endDate: new Date(this.$route.params.endDateUnix),
}
}
},
watch: {
// call again the method if the route changes
'$route': 'setDates',
},
created() {
this.setDates()
},
methods: {
setDates() {
switch (this.$route.params.type) {
case 'week':
this.startDate = new Date()
this.endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
break
case 'month':
this.startDate = new Date()
this.endDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
break
}
},
},
}
</script>

722
src/views/tasks/TaskDetailView.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="loader-container task-view-container" :class="{ 'is-loading': taskService.loading}">
<div :class="{ 'is-loading': taskService.loading}" class="loader-container task-view-container">
<div class="task-view">
<div class="heading">
<h1 class="title task-id" v-if="task.identifier === ''">
@ -9,8 +9,8 @@
{{ task.identifier }}
</h1>
<div class="is-done" v-if="task.done">Done</div>
<h1 class="title input" contenteditable="true" @focusout="saveTaskOnChange()" ref="taskTitle"
@keyup.ctrl.enter="saveTaskOnChange()">{{ task.title }}</h1>
<h1 @focusout="saveTaskOnChange()" @keyup.ctrl.enter="saveTaskOnChange()" class="title input" contenteditable="true"
ref="taskTitle">{{ task.title }}</h1>
</div>
<h6 class="subtitle" v-if="parent && parent.namespace && parent.list">
{{ parent.namespace.title }} >
@ -22,7 +22,7 @@
<!-- Content and buttons -->
<div class="columns">
<!-- Content -->
<div class="column" :class="{'is-two-thirds': canWrite}">
<div :class="{'is-two-thirds': canWrite}" class="column">
<div class="columns details">
<div class="column assignees" v-if="activeFields.assignees">
<!-- Assignees -->
@ -31,11 +31,11 @@
Assignees
</div>
<edit-assignees
:task-id="task.id"
:list-id="task.listId"
:initial-assignees="task.assignees"
ref="assignees"
:disabled="!canWrite"
:disabled="!canWrite"
:initial-assignees="task.assignees"
:list-id="task.listId"
:task-id="task.id"
ref="assignees"
/>
</div>
<div class="column" v-if="activeFields.priority">
@ -45,10 +45,10 @@
Priority
</div>
<priority-select
v-model="task.priority"
@change="saveTask"
ref="priority"
:disabled="!canWrite"/>
:disabled="!canWrite"
@change="saveTask"
ref="priority"
v-model="task.priority"/>
</div>
<div class="column" v-if="activeFields.dueDate">
<!-- Due Date -->
@ -58,17 +58,17 @@
</div>
<div class="date-input">
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading || !canWrite"
v-model="dueDate"
:config="flatPickerConfig"
@on-close="saveTask"
placeholder="Click here to set a due date"
ref="dueDate"
:class="{ 'disabled': taskService.loading}"
:config="flatPickerConfig"
:disabled="taskService.loading || !canWrite"
@on-close="saveTask"
class="input"
placeholder="Click here to set a due date"
ref="dueDate"
v-model="dueDate"
>
</flat-pickr>
<a v-if="dueDate && canWrite" @click="() => {dueDate = task.dueDate = null;saveTask()}">
<a @click="() => {dueDate = task.dueDate = null;saveTask()}" v-if="dueDate && canWrite">
<span class="icon is-small">
<icon icon="times"></icon>
</span>
@ -82,10 +82,10 @@
Percent Done
</div>
<percent-done-select
v-model="task.percentDone"
@change="saveTask"
ref="percentDone"
:disabled="!canWrite"/>
:disabled="!canWrite"
@change="saveTask"
ref="percentDone"
v-model="task.percentDone"/>
</div>
<div class="column" v-if="activeFields.startDate">
<!-- Start Date -->
@ -95,17 +95,17 @@
</div>
<div class="date-input">
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading || !canWrite"
v-model="task.startDate"
:config="flatPickerConfig"
@on-close="saveTask"
placeholder="Click here to set a start date"
ref="startDate"
:class="{ 'disabled': taskService.loading}"
:config="flatPickerConfig"
:disabled="taskService.loading || !canWrite"
@on-close="saveTask"
class="input"
placeholder="Click here to set a start date"
ref="startDate"
v-model="task.startDate"
>
</flat-pickr>
<a v-if="task.startDate && canWrite" @click="() => {task.startDate = null;saveTask()}">
<a @click="() => {task.startDate = null;saveTask()}" v-if="task.startDate && canWrite">
<span class="icon is-small">
<icon icon="times"></icon>
</span>
@ -120,17 +120,17 @@
</div>
<div class="date-input">
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading || !canWrite"
v-model="task.endDate"
:config="flatPickerConfig"
@on-close="saveTask"
placeholder="Click here to set an end date"
ref="endDate"
:class="{ 'disabled': taskService.loading}"
:config="flatPickerConfig"
:disabled="taskService.loading || !canWrite"
@on-close="saveTask"
class="input"
placeholder="Click here to set an end date"
ref="endDate"
v-model="task.endDate"
>
</flat-pickr>
<a v-if="task.endDate && canWrite" @click="() => {task.endDate = null;saveTask()}">
<a @click="() => {task.endDate = null;saveTask()}" v-if="task.endDate && canWrite">
<span class="icon is-small">
<icon icon="times"></icon>
</span>
@ -144,10 +144,10 @@
Reminders
</div>
<reminders
v-model="task.reminderDates"
@change="saveTask"
ref="reminders"
:disabled="!canWrite"/>
:disabled="!canWrite"
@change="saveTask"
ref="reminders"
v-model="task.reminderDates"/>
</div>
<div class="column" v-if="activeFields.repeatAfter">
<!-- Repeat after -->
@ -156,10 +156,10 @@
Repeat
</div>
<repeat-after
v-model="task"
@change="saveTask"
:disabled="!canWrite"
ref="repeatAfter"/>
:disabled="!canWrite"
@change="saveTask"
ref="repeatAfter"
v-model="task"/>
</div>
<div class="column" v-if="activeFields.color">
<!-- Color -->
@ -168,10 +168,10 @@
Color
</div>
<color-picker
v-model="taskColor"
menu-position="bottom"
@change="saveTask"
ref="color"/>
@change="saveTask"
menu-position="bottom"
ref="color"
v-model="taskColor"/>
</div>
</div>
@ -183,11 +183,11 @@
</span>
Labels
</div>
<edit-labels :task-id="taskId" v-model="task.labels" ref="labels" :disabled="!canWrite"/>
<edit-labels :disabled="!canWrite" :task-id="taskId" ref="labels" v-model="task.labels"/>
</div>
<!-- Description -->
<div class="details content description" :class="{ 'has-top-border': activeFields.labels }">
<div :class="{ 'has-top-border': activeFields.labels }" class="details content description">
<h3>
<span class="icon is-grey">
<icon icon="align-left"/>
@ -195,20 +195,20 @@
Description
</h3>
<editor
v-model="task.description"
@change="saveTask"
:upload-enabled="true"
:upload-callback="attachmentUpload"
:is-edit-enabled="canWrite"
placeholder="Click here to enter a description..."/>
:is-edit-enabled="canWrite"
:upload-callback="attachmentUpload"
:upload-enabled="true"
@change="saveTask"
placeholder="Click here to enter a description..."
v-model="task.description"/>
</div>
<!-- Attachments -->
<div class="content attachments has-top-border" v-if="activeFields.attachments">
<attachments
:task-id="taskId"
ref="attachments"
:edit-enabled="canWrite"
:edit-enabled="canWrite"
:task-id="taskId"
ref="attachments"
/>
</div>
@ -221,12 +221,12 @@
Related Tasks
</h3>
<related-tasks
:task-id="taskId"
:list-id="task.listId"
:initial-related-tasks="task.relatedTasks"
:show-no-relations-notice="true"
ref="relatedTasks"
:edit-enabled="canWrite"
:edit-enabled="canWrite"
:initial-related-tasks="task.relatedTasks"
:list-id="task.listId"
:show-no-relations-notice="true"
:task-id="taskId"
ref="relatedTasks"
/>
</div>
@ -246,13 +246,13 @@
</div>
<!-- Comments -->
<comments :task-id="taskId" :can-write="canWrite"/>
<comments :can-write="canWrite" :task-id="taskId"/>
</div>
<div class="column is-one-third action-buttons" v-if="canWrite">
<a
class="button is-outlined noshadow has-no-border"
:class="{'is-success': !task.done}"
@click="toggleTaskDone()">
:class="{'is-success': !task.done}"
@click="toggleTaskDone()"
class="button is-outlined noshadow has-no-border">
<span class="icon is-small"><icon icon="check-double"/></span>
<template v-if="task.done">
Mark as undone
@ -262,78 +262,78 @@
</template>
</a>
<a
class="button"
@click="setFieldActive('assignees')"
v-shortkey="['ctrl', 'shift', 'a']"
@shortkey="setFieldActive('assignees')">
@click="setFieldActive('assignees')"
@shortkey="setFieldActive('assignees')"
class="button"
v-shortkey="['ctrl', 'shift', 'a']">
<span class="icon is-small"><icon icon="users"/></span>
Assign this task to a user
</a>
<a
class="button"
@click="setFieldActive('labels')"
v-shortkey="['ctrl', 'shift', 'l']"
@shortkey="setFieldActive('labels')">
@click="setFieldActive('labels')"
@shortkey="setFieldActive('labels')"
class="button"
v-shortkey="['ctrl', 'shift', 'l']">
<span class="icon is-small"><icon icon="tags"/></span>
Add labels
</a>
<a class="button" @click="setFieldActive('reminders')">
<a @click="setFieldActive('reminders')" class="button">
<span class="icon is-small"><icon icon="history"/></span>
Set Reminders
</a>
<a
class="button"
@click="setFieldActive('dueDate')"
v-shortkey="['ctrl', 'shift', 'd']"
@shortkey="setFieldActive('dueDate')">
@click="setFieldActive('dueDate')"
@shortkey="setFieldActive('dueDate')"
class="button"
v-shortkey="['ctrl', 'shift', 'd']">
<span class="icon is-small"><icon icon="calendar"/></span>
Set Due Date
</a>
<a class="button" @click="setFieldActive('startDate')">
<a @click="setFieldActive('startDate')" class="button">
<span class="icon is-small"><icon icon="calendar-week"/></span>
Set a Start Date
</a>
<a class="button" @click="setFieldActive('endDate')">
<a @click="setFieldActive('endDate')" class="button">
<span class="icon is-small"><icon icon="calendar-week"/></span>
Set an End Date
</a>
<a class="button" @click="setFieldActive('repeatAfter')">
<a @click="setFieldActive('repeatAfter')" class="button">
<span class="icon is-small"><icon :icon="['far', 'clock']"/></span>
Set a repeating interval
</a>
<a class="button" @click="setFieldActive('priority')">
<a @click="setFieldActive('priority')" class="button">
<span class="icon is-small"><icon :icon="['far', 'star']"/></span>
Set Priority
</a>
<a class="button" @click="setFieldActive('percentDone')">
<a @click="setFieldActive('percentDone')" class="button">
<span class="icon is-small"><icon icon="percent"/></span>
Set Percent Done
</a>
<a
class="button"
@click="setFieldActive('attachments')"
v-shortkey="['ctrl', 'shift', 'f']"
@shortkey="setFieldActive('attachments')">
@click="setFieldActive('attachments')"
@shortkey="setFieldActive('attachments')"
class="button"
v-shortkey="['ctrl', 'shift', 'f']">
<span class="icon is-small"><icon icon="paperclip"/></span>
Add attachments
</a>
<a
class="button"
@click="setFieldActive('relatedTasks')"
v-shortkey="['ctrl', 'shift', 'r']"
@shortkey="setFieldActive('relatedTasks')">
@click="setFieldActive('relatedTasks')"
@shortkey="setFieldActive('relatedTasks')"
class="button"
v-shortkey="['ctrl', 'shift', 'r']">
<span class="icon is-small"><icon icon="tasks"/></span>
Add task relations
</a>
<a class="button" @click="setFieldActive('moveList')">
<a @click="setFieldActive('moveList')" class="button">
<span class="icon is-small"><icon icon="list"/></span>
Move task
</a>
<a class="button" @click="setFieldActive('color')">
<a @click="setFieldActive('color')" class="button">
<span class="icon is-small"><icon icon="fill-drip"/></span>
Set task color
</a>
<a class="button is-danger is-outlined noshadow has-no-border" @click="showDeleteModal = true">
<a @click="showDeleteModal = true" class="button is-danger is-outlined noshadow has-no-border">
<span class="icon is-small"><icon icon="trash-alt"/></span>
Delete task
</a>
@ -344,9 +344,9 @@
</div>
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
@submit="deleteTask()">
@close="showDeleteModal = false"
@submit="deleteTask()"
v-if="showDeleteModal">
<span slot="header">Delete this task</span>
<p slot="text">
Are you sure you want to remove this task? <br/>
@ -358,269 +358,269 @@
</template>
<script>
import TaskService from '../../services/task'
import TaskModel from '../../models/task'
import relationKinds from '../../models/relationKinds.json'
import TaskService from '../../services/task'
import TaskModel from '../../models/task'
import relationKinds from '../../models/relationKinds.json'
import priorites from '../../models/priorities.json'
import rights from '../../models/rights.json'
import priorites from '../../models/priorities.json'
import rights from '../../models/rights.json'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import PrioritySelect from '../../components/tasks/partials/prioritySelect'
import PercentDoneSelect from '../../components/tasks/partials/percentDoneSelect'
import EditLabels from '../../components/tasks/partials/editLabels'
import EditAssignees from '../../components/tasks/partials/editAssignees'
import Attachments from '../../components/tasks/partials/attachments'
import RelatedTasks from '../../components/tasks/partials/relatedTasks'
import RepeatAfter from '../../components/tasks/partials/repeatAfter'
import Reminders from '../../components/tasks/partials/reminders'
import Comments from '../../components/tasks/partials/comments'
import router from '../../router'
import ListSearch from '../../components/tasks/partials/listSearch'
import ColorPicker from '../../components/input/colorPicker'
import attachmentUpload from '../../components/tasks/mixins/attachmentUpload'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
import PrioritySelect from '../../components/tasks/partials/prioritySelect'
import PercentDoneSelect from '../../components/tasks/partials/percentDoneSelect'
import EditLabels from '../../components/tasks/partials/editLabels'
import EditAssignees from '../../components/tasks/partials/editAssignees'
import Attachments from '../../components/tasks/partials/attachments'
import RelatedTasks from '../../components/tasks/partials/relatedTasks'
import RepeatAfter from '../../components/tasks/partials/repeatAfter'
import Reminders from '../../components/tasks/partials/reminders'
import Comments from '../../components/tasks/partials/comments'
import router from '../../router'
import ListSearch from '../../components/tasks/partials/listSearch'
import ColorPicker from '../../components/input/colorPicker'
import attachmentUpload from '../../components/tasks/mixins/attachmentUpload'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
export default {
name: 'TaskDetailView',
components: {
ColorPicker,
ListSearch,
Reminders,
RepeatAfter,
RelatedTasks,
Attachments,
EditAssignees,
EditLabels,
PercentDoneSelect,
PrioritySelect,
Comments,
flatPickr,
editor: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
mixins: [
attachmentUpload,
],
data() {
return {
taskId: Number(this.$route.params.id),
taskService: TaskService,
task: TaskModel,
relationKinds: relationKinds,
// The due date is a seperate property in the task to prevent flatpickr from modifying the task model
// in store right after updating it from the api resulting in the wrong due date format being saved in the task.
dueDate: null,
// We doubled the task color property here because verte does not have a real change property, leading
// to the color property change being triggered when the # is removed from it, leading to an update,
// which leads in turn to a change... This creates an infinite loop in which the task is updated, changed,
// updated, changed, updated and so on.
// To prevent this, we put the task color property in a seperate value which is set to the task color
// when it is saved and loaded.
taskColor: '',
export default {
name: 'TaskDetailView',
components: {
ColorPicker,
ListSearch,
Reminders,
RepeatAfter,
RelatedTasks,
Attachments,
EditAssignees,
EditLabels,
PercentDoneSelect,
PrioritySelect,
Comments,
flatPickr,
editor: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
mixins: [
attachmentUpload,
],
data() {
return {
taskId: Number(this.$route.params.id),
taskService: TaskService,
task: TaskModel,
relationKinds: relationKinds,
// The due date is a seperate property in the task to prevent flatpickr from modifying the task model
// in store right after updating it from the api resulting in the wrong due date format being saved in the task.
dueDate: null,
// We doubled the task color property here because verte does not have a real change property, leading
// to the color property change being triggered when the # is removed from it, leading to an update,
// which leads in turn to a change... This creates an infinite loop in which the task is updated, changed,
// updated, changed, updated and so on.
// To prevent this, we put the task color property in a seperate value which is set to the task color
// when it is saved and loaded.
taskColor: '',
showDeleteModal: false,
taskTitle: '',
descriptionChanged: false,
listViewName: 'list.list',
showDeleteModal: false,
taskTitle: '',
descriptionChanged: false,
listViewName: 'list.list',
priorities: priorites,
flatPickerConfig: {
altFormat: 'j M Y H:i',
altInput: true,
dateFormat: 'Y-m-d H:i',
enableTime: true,
time_24hr: true,
},
activeFields: {
assignees: false,
priority: false,
dueDate: false,
percentDone: false,
startDate: false,
endDate: false,
reminders: false,
repeatAfter: false,
labels: false,
attachments: false,
relatedTasks: false,
moveList: false,
color: false,
},
}
},
watch: {
'$route': 'loadTask',
},
created() {
this.taskService = new TaskService()
this.task = new TaskModel()
},
mounted() {
priorities: priorites,
flatPickerConfig: {
altFormat: 'j M Y H:i',
altInput: true,
dateFormat: 'Y-m-d H:i',
enableTime: true,
time_24hr: true,
},
activeFields: {
assignees: false,
priority: false,
dueDate: false,
percentDone: false,
startDate: false,
endDate: false,
reminders: false,
repeatAfter: false,
labels: false,
attachments: false,
relatedTasks: false,
moveList: false,
color: false,
},
}
},
watch: {
'$route': 'loadTask',
},
created() {
this.taskService = new TaskService()
this.task = new TaskModel()
},
mounted() {
// Build the list path from the task detail name to send the user to the view they came from.
const parts = this.$route.name.split('.')
if (parts.length > 2 && parts[2] === 'detail') {
this.listViewName = `list.${parts[1]}`
// Build the list path from the task detail name to send the user to the view they came from.
const parts = this.$route.name.split('.')
if (parts.length > 2 && parts[2] === 'detail') {
this.listViewName = `list.${parts[1]}`
}
this.loadTask()
},
computed: {
parent() {
if (!this.task.listId) {
return {
namespace: null,
list: null,
}
}
this.loadTask()
if (!this.$store.getters['namespaces/getListAndNamespaceById']) {
return null
}
return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
},
computed: {
parent() {
if (!this.task.listId) {
return {
namespace: null,
list: null,
}
}
if (!this.$store.getters['namespaces/getListAndNamespaceById']) {
return null
}
return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
},
canWrite() {
return this.task && this.task.maxRight && this.task.maxRight > rights.READ
},
canWrite() {
return this.task && this.task.maxRight && this.task.maxRight > rights.READ
},
methods: {
loadTask() {
this.taskId = Number(this.$route.params.id)
this.taskService.get({id: this.taskId})
.then(r => {
this.$set(this, 'task', r)
this.$store.commit('attachments/set', r.attachments)
this.taskTitle = this.task.title
this.taskColor = this.task.hexColor
this.setActiveFields()
this.setTitle(this.task.title)
})
.catch(e => {
this.error(e, this)
})
},
setActiveFields() {
this.dueDate = this.task.dueDate ? this.task.dueDate : null
this.task.startDate = this.task.startDate ? this.task.startDate : null
this.task.endDate = this.task.endDate ? this.task.endDate : null
// Set all active fields based on values in the model
this.activeFields.assignees = this.task.assignees.length > 0
this.activeFields.priority = this.task.priority !== priorites.UNSET
this.activeFields.dueDate = this.task.dueDate !== null
this.activeFields.percentDone = this.task.percentDone > 0
this.activeFields.startDate = this.task.startDate !== null
this.activeFields.endDate = this.task.endDate !== null
// On chrome, reminderDates.length holds the actual number of reminders that are not null.
// Unlike on desktop where it holds all reminders, including the ones which are null.
// This causes the reminders to dissapear entierly when only one is set and the user is on mobile.
this.activeFields.reminders = this.task.reminderDates.length > 1 || (window.innerWidth < 769 && this.task.reminderDates.length > 0)
this.activeFields.repeatAfter = this.task.repeatAfter.amount > 0
this.activeFields.labels = this.task.labels.length > 0
this.activeFields.attachments = this.task.attachments.length > 0
this.activeFields.relatedTasks = Object.keys(this.task.relatedTasks).length > 0
},
saveTaskOnChange() {
this.$refs.taskTitle.spellcheck = false
// Pull the task title from the contenteditable
let taskTitle = this.$refs.taskTitle.textContent
this.task.title = taskTitle
// We only want to save if the title was actually change.
// Because the contenteditable does not have a change event,
// we're building it ourselves and only calling saveTask()
// if the task title changed.
if (this.task.title !== this.taskTitle) {
this.saveTask()
this.taskTitle = taskTitle
}
},
saveTask(undoCallback = null) {
if (!this.canWrite) {
return
}
this.task.dueDate = this.dueDate
this.task.hexColor = this.taskColor
// If no end date is being set, but a start date and due date,
// use the due date as the end date
if (this.task.endDate === null && this.task.startDate !== null && this.task.dueDate !== null) {
this.task.endDate = this.task.dueDate
}
this.$store.dispatch('tasks/update', this.task)
.then(r => {
this.$set(this, 'task', r)
let actions = []
if (undoCallback !== null) {
actions = [{
title: 'Undo',
callback: undoCallback,
}]
this.success({message: 'The task was saved successfully.'}, this, actions)
}
this.dueDate = this.task.dueDate
this.setActiveFields()
})
.catch(e => {
this.error(e, this)
})
},
setFieldActive(fieldName) {
this.activeFields[fieldName] = true
this.$nextTick(() => {
if (this.$refs[fieldName]) {
this.$refs[fieldName].$el.focus()
}
},
methods: {
loadTask() {
this.taskId = Number(this.$route.params.id)
this.taskService.get({id: this.taskId})
.then(r => {
this.$set(this, 'task', r)
this.$store.commit('attachments/set', r.attachments)
this.taskTitle = this.task.title
this.taskColor = this.task.hexColor
this.setActiveFields()
this.setTitle(this.task.title)
})
.catch(e => {
this.error(e, this)
})
},
deleteTask() {
this.$store.dispatch('tasks/delete', this.task)
.then(() => {
this.success({message: 'The task been deleted successfully.'}, this)
router.back()
})
.catch(e => {
this.error(e, this)
})
},
toggleTaskDone() {
this.task.done = !this.task.done
this.saveTask(() => this.toggleTaskDone())
},
setDescriptionChanged(e) {
if (e.key === 'Enter' || e.key === 'Control') {
return
}
this.descriptionChanged = true
},
saveTaskIfDescriptionChanged() {
// We want to only save the description if it was changed.
// Since we can either trigger this with ctrl+enter or @change, it would be possible to save a task first
// with ctrl+enter and then with @change although nothing changed since the last save when @change gets fired.
// To only save one time we added this method.
if (this.descriptionChanged) {
this.descriptionChanged = false
this.saveTask()
}
},
changeList(list) {
this.task.listId = list.id
this.saveTask()
},
},
}
setActiveFields() {
this.dueDate = this.task.dueDate ? this.task.dueDate : null
this.task.startDate = this.task.startDate ? this.task.startDate : null
this.task.endDate = this.task.endDate ? this.task.endDate : null
// Set all active fields based on values in the model
this.activeFields.assignees = this.task.assignees.length > 0
this.activeFields.priority = this.task.priority !== priorites.UNSET
this.activeFields.dueDate = this.task.dueDate !== null
this.activeFields.percentDone = this.task.percentDone > 0
this.activeFields.startDate = this.task.startDate !== null
this.activeFields.endDate = this.task.endDate !== null
// On chrome, reminderDates.length holds the actual number of reminders that are not null.
// Unlike on desktop where it holds all reminders, including the ones which are null.
// This causes the reminders to dissapear entierly when only one is set and the user is on mobile.
this.activeFields.reminders = this.task.reminderDates.length > 1 || (window.innerWidth < 769 && this.task.reminderDates.length > 0)
this.activeFields.repeatAfter = this.task.repeatAfter.amount > 0
this.activeFields.labels = this.task.labels.length > 0
this.activeFields.attachments = this.task.attachments.length > 0
this.activeFields.relatedTasks = Object.keys(this.task.relatedTasks).length > 0
},
saveTaskOnChange() {
this.$refs.taskTitle.spellcheck = false
// Pull the task title from the contenteditable
let taskTitle = this.$refs.taskTitle.textContent
this.task.title = taskTitle
// We only want to save if the title was actually change.
// Because the contenteditable does not have a change event,
// we're building it ourselves and only calling saveTask()
// if the task title changed.
if (this.task.title !== this.taskTitle) {
this.saveTask()
this.taskTitle = taskTitle
}
},
saveTask(undoCallback = null) {
if (!this.canWrite) {
return
}
this.task.dueDate = this.dueDate
this.task.hexColor = this.taskColor
// If no end date is being set, but a start date and due date,
// use the due date as the end date
if (this.task.endDate === null && this.task.startDate !== null && this.task.dueDate !== null) {
this.task.endDate = this.task.dueDate
}
this.$store.dispatch('tasks/update', this.task)
.then(r => {
this.$set(this, 'task', r)
let actions = []
if (undoCallback !== null) {
actions = [{
title: 'Undo',
callback: undoCallback,
}]
this.success({message: 'The task was saved successfully.'}, this, actions)
}
this.dueDate = this.task.dueDate
this.setActiveFields()
})
.catch(e => {
this.error(e, this)
})
},
setFieldActive(fieldName) {
this.activeFields[fieldName] = true
this.$nextTick(() => {
if (this.$refs[fieldName]) {
this.$refs[fieldName].$el.focus()
}
})
},
deleteTask() {
this.$store.dispatch('tasks/delete', this.task)
.then(() => {
this.success({message: 'The task been deleted successfully.'}, this)
router.back()
})
.catch(e => {
this.error(e, this)
})
},
toggleTaskDone() {
this.task.done = !this.task.done
this.saveTask(() => this.toggleTaskDone())
},
setDescriptionChanged(e) {
if (e.key === 'Enter' || e.key === 'Control') {
return
}
this.descriptionChanged = true
},
saveTaskIfDescriptionChanged() {
// We want to only save the description if it was changed.
// Since we can either trigger this with ctrl+enter or @change, it would be possible to save a task first
// with ctrl+enter and then with @change although nothing changed since the last save when @change gets fired.
// To only save one time we added this method.
if (this.descriptionChanged) {
this.descriptionChanged = false
this.saveTask()
}
},
changeList(list) {
this.task.listId = list.id
this.saveTask()
},
},
}
</script>

26
src/views/tasks/TaskDetailViewModal.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="modal-mask">
<div class="modal-container" @click.self="close()">
<div @click.self="close()" class="modal-container">
<div class="scrolling-content">
<a @click="close()" class="close">
<icon icon="times"/>
@ -12,18 +12,18 @@
</template>
<script>
import TaskDetailView from './TaskDetailView'
import router from '../../router'
import TaskDetailView from './TaskDetailView'
import router from '../../router'
export default {
name: 'TaskDetailViewModal',
components: {
TaskDetailView,
export default {
name: 'TaskDetailViewModal',
components: {
TaskDetailView,
},
methods: {
close() {
router.back()
},
methods: {
close() {
router.back()
},
},
}
},
}
</script>

426
src/views/teams/EditTeam.vue
View File

@ -13,14 +13,14 @@
<label class="label" for="teamtext">Team Name</label>
<div class="control">
<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"/>
:class="{ 'disabled': teamMemberService.loading}"
:disabled="teamMemberService.loading"
class="input"
id="teamtext"
placeholder="The team text is here..."
type="text"
v-focus
v-model="team.name"/>
</div>
</div>
<p class="help is-danger" v-if="showError && team.name === ''">
@ -30,12 +30,12 @@
<label class="label" for="teamdescription">Description</label>
<div class="control">
<editor
:class="{ 'disabled': teamService.loading}"
:disabled="teamService.loading"
placeholder="The teams description goes here..."
id="teamdescription"
v-model="team.description"
:preview-is-default="false"
:class="{ 'disabled': teamService.loading}"
:disabled="teamService.loading"
:preview-is-default="false"
id="teamdescription"
placeholder="The teams description goes here..."
v-model="team.description"
/>
</div>
</div>
@ -43,14 +43,14 @@
<div class="columns bigbuttons">
<div class="column">
<button @click="submit()" class="button is-primary is-fullwidth"
:class="{ 'is-loading': teamService.loading}">
<button :class="{ 'is-loading': teamService.loading}" @click="submit()"
class="button is-primary is-fullwidth">
Save
</button>
</div>
<div class="column is-1">
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth"
:class="{ 'is-loading': teamService.loading}">
<button :class="{ 'is-loading': teamService.loading}" @click="showDeleteModal = true"
class="button is-danger is-fullwidth">
<span class="icon is-small">
<icon icon="trash-alt"/>
</span>
@ -70,31 +70,31 @@
<form @submit.prevent="addUser()" class="add-member-form" v-if="userIsAdmin">
<div class="field is-grouped">
<p
class="control has-icons-left is-expanded"
:class="{ 'is-loading': teamMemberService.loading}">
:class="{ 'is-loading': teamMemberService.loading}"
class="control has-icons-left is-expanded">
<multiselect
v-model="newMember"
:options="foundUsers"
:multiple="false"
:searchable="true"
:loading="userService.loading"
:internal-search="true"
@search-change="findUser"
placeholder="Type to search..."
:showNoOptions="false"
label="username"
track-by="id">
:internal-search="true"
:loading="userService.loading"
:multiple="false"
:options="foundUsers"
:searchable="true"
:showNoOptions="false"
@search-change="findUser"
label="username"
placeholder="Type to search..."
track-by="id"
v-model="newMember">
<template slot="clear" slot-scope="props">
<div
class="multiselect__clear" v-if="newMember !== null && newMember.id !== 0"
@mousedown.prevent.stop="clearAll(props.search)">
@mousedown.prevent.stop="clearAll(props.search)" class="multiselect__clear"
v-if="newMember !== null && newMember.id !== 0">
</div>
</template>
<span slot="noResult">Oops! No user found. Consider changing the search query.</span>
</multiselect>
</p>
<p class="control">
<button type="submit" class="button is-success">
<button class="button is-success" type="submit">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -105,8 +105,8 @@
</form>
<table class="table is-striped is-hoverable is-fullwidth">
<tbody>
<tr v-for="m in team.members" :key="m.id">
<td>{{m.username}}</td>
<tr :key="m.id" v-for="m in team.members">
<td>{{ m.username }}</td>
<td>
<template v-if="m.id === userInfo.id">
<b class="is-success">You</b>
@ -127,8 +127,8 @@
</template>
</td>
<td class="actions" v-if="userIsAdmin">
<button @click="toggleUserType(m)" class="button buttonright is-primary"
:class="{'is-loading': teamMemberService.loading}"
<button :class="{'is-loading': teamMemberService.loading}" @click="toggleUserType(m)"
class="button buttonright is-primary"
v-if="m.id !== userInfo.id">
Make
<template v-if="!m.admin">
@ -138,8 +138,8 @@
Member
</template>
</button>
<button @click="() => {member = m; showUserDeleteModal = true}" class="button is-danger"
:class="{'is-loading': teamMemberService.loading}"
<button :class="{'is-loading': teamMemberService.loading}" @click="() => {member = m; showUserDeleteModal = true}"
class="button is-danger"
v-if="m.id !== userInfo.id">
<span class="icon is-small">
<icon icon="trash-alt"/>
@ -154,9 +154,9 @@
<!-- Team delete modal -->
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
@submit="deleteTeam()">
@close="showDeleteModal = false"
@submit="deleteTeam()"
v-if="showDeleteModal">
<span slot="header">Delete the team</span>
<p slot="text">Are you sure you want to delete this team and all of its members?<br/>
All team members will loose access to lists and namespaces shared with this team.<br/>
@ -164,9 +164,9 @@
</modal>
<!-- User delete modal -->
<modal
v-if="showUserDeleteModal"
@close="showUserDeleteModal = false"
@submit="deleteUser()">
@close="showUserDeleteModal = false"
@submit="deleteUser()"
v-if="showUserDeleteModal">
<span slot="header">Remove a user from the team</span>
<p slot="text">Are you sure you want to remove this user from the team?<br/>
They will loose access to all lists and namespaces this team has access to.<br/>
@ -176,187 +176,187 @@
</template>
<script>
import router from '../../router'
import {mapState} from 'vuex'
import router from '../../router'
import {mapState} from 'vuex'
import TeamService from '../../services/team'
import TeamModel from '../../models/team'
import TeamMemberService from '../../services/teamMember'
import TeamMemberModel from '../../models/teamMember'
import UserModel from '../../models/user'
import UserService from '../../services/user'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
import Rights from '../../models/rights.json'
import TeamService from '../../services/team'
import TeamModel from '../../models/team'
import TeamMemberService from '../../services/teamMember'
import TeamMemberModel from '../../models/teamMember'
import UserModel from '../../models/user'
import UserService from '../../services/user'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
import Rights from '../../models/rights.json'
export default {
name: 'EditTeam',
data() {
return {
teamService: TeamService,
teamMemberService: TeamMemberService,
team: TeamModel,
teamId: this.$route.params.id,
member: TeamMemberModel,
export default {
name: 'EditTeam',
data() {
return {
teamService: TeamService,
teamMemberService: TeamMemberService,
team: TeamModel,
teamId: this.$route.params.id,
member: TeamMemberModel,
showDeleteModal: false,
showUserDeleteModal: false,
showDeleteModal: false,
showUserDeleteModal: false,
newMember: UserModel,
foundUsers: [],
userService: UserService,
newMember: UserModel,
foundUsers: [],
userService: UserService,
showError: false,
}
showError: false,
}
},
components: {
multiselect: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
editor: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
created() {
this.teamService = new TeamService()
this.teamMemberService = new TeamMemberService()
this.userService = new UserService()
this.loadTeam()
},
watch: {
// call again the method if the route changes
'$route': 'loadTeam',
},
computed: {
userIsAdmin() {
return this.team && this.team.maxRight && this.team.maxRight > Rights.READ
},
components: {
multiselect: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
editor: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
created() {
this.teamService = new TeamService()
this.teamMemberService = new TeamMemberService()
this.userService = new UserService()
this.loadTeam()
},
watch: {
// call again the method if the route changes
'$route': 'loadTeam',
},
computed: {
userIsAdmin() {
return this.team && this.team.maxRight && this.team.maxRight > Rights.READ
},
...mapState({
userInfo: state => state.auth.info,
}),
},
methods: {
loadTeam() {
this.team = new TeamModel({id: this.teamId})
this.teamService.get(this.team)
.then(response => {
this.$set(this, 'team', response)
this.setTitle(`Edit Team ${this.team.name}`)
})
.catch(e => {
this.error(e, this)
})
},
submit() {
if (this.team.name === '') {
this.showError = true
return
}
this.showError = false
this.teamService.update(this.team)
.then(response => {
this.team = response
this.success({message: 'The team was successfully updated.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
deleteTeam() {
this.teamService.delete(this.team)
.then(() => {
this.success({message: 'The team was successfully deleted.'}, this)
router.push({name: 'teams.index'})
})
.catch(e => {
this.error(e, this)
})
},
deleteUser() {
this.teamMemberService.delete(this.member)
.then(() => {
this.success({message: 'The user was successfully deleted from the team.'}, this)
this.loadTeam()
})
.catch(e => {
this.error(e, this)
})
.finally(() => {
this.showUserDeleteModal = false
})
},
addUser() {
const newMember = new TeamMemberModel({
teamId: this.teamId,
username: this.newMember.username,
...mapState({
userInfo: state => state.auth.info,
}),
},
methods: {
loadTeam() {
this.team = new TeamModel({id: this.teamId})
this.teamService.get(this.team)
.then(response => {
this.$set(this, 'team', response)
this.setTitle(`Edit Team ${this.team.name}`)
})
.catch(e => {
this.error(e, this)
})
this.teamMemberService.create(newMember)
.then(() => {
this.loadTeam()
this.success({message: 'The team member was successfully added.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
toggleUserType(member) {
member.admin = !member.admin
this.teamMemberService.update(member)
.then(r => {
for (const tm in this.team.members) {
if (this.team.members[tm].id === member.id) {
this.$set(this.team.members[tm], 'admin', r.admin)
break
}
}
this.success({message: 'The team member was successfully made ' + (member.admin ? 'admin' : 'member') + '.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
findUser(query) {
if (query === '') {
this.$set(this, 'foundUsers', [])
return
}
this.userService.getAll({}, {s: query})
.then(response => {
this.$set(this, 'foundUsers', response)
})
.catch(e => {
this.error(e, this)
})
},
clearAll() {
this.$set(this, 'foundUsers', [])
},
},
}
submit() {
if (this.team.name === '') {
this.showError = true
return
}
this.showError = false
this.teamService.update(this.team)
.then(response => {
this.team = response
this.success({message: 'The team was successfully updated.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
deleteTeam() {
this.teamService.delete(this.team)
.then(() => {
this.success({message: 'The team was successfully deleted.'}, this)
router.push({name: 'teams.index'})
})
.catch(e => {
this.error(e, this)
})
},
deleteUser() {
this.teamMemberService.delete(this.member)
.then(() => {
this.success({message: 'The user was successfully deleted from the team.'}, this)
this.loadTeam()
})
.catch(e => {
this.error(e, this)
})
.finally(() => {
this.showUserDeleteModal = false
})
},
addUser() {
const newMember = new TeamMemberModel({
teamId: this.teamId,
username: this.newMember.username,
})
this.teamMemberService.create(newMember)
.then(() => {
this.loadTeam()
this.success({message: 'The team member was successfully added.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
toggleUserType(member) {
member.admin = !member.admin
this.teamMemberService.update(member)
.then(r => {
for (const tm in this.team.members) {
if (this.team.members[tm].id === member.id) {
this.$set(this.team.members[tm], 'admin', r.admin)
break
}
}
this.success({message: 'The team member was successfully made ' + (member.admin ? 'admin' : 'member') + '.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
findUser(query) {
if (query === '') {
this.$set(this, 'foundUsers', [])
return
}
this.userService.getAll({}, {s: query})
.then(response => {
this.$set(this, 'foundUsers', response)
})
.catch(e => {
this.error(e, this)
})
},
clearAll() {
this.$set(this, 'foundUsers', [])
},
},
}
</script>
<style lang="scss" scoped>
.card {
margin-bottom: 1rem;
.card {
margin-bottom: 1rem;
.add-member-form {
margin: 1rem;
}
.add-member-form {
margin: 1rem;
}
}
.team-members {
padding: 0;
.team-members {
padding: 0;
.table {
border-top: 0;
}
.table {
border-top: 0;
}
}
</style>

62
src/views/teams/ListTeams.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="content loader-container is-max-width-desktop" v-bind:class="{ 'is-loading': teamService.loading}">
<router-link :to="{name:'teams.create'}" class="button is-success button-right" >
<router-link :to="{name:'teams.create'}" class="button is-success button-right">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -8,9 +8,9 @@
</router-link>
<h1>Teams</h1>
<ul class="teams box">
<li v-for="t in teams" :key="t.id">
<li :key="t.id" v-for="t in teams">
<router-link :to="{name: 'teams.edit', params: {id: t.id}}">
{{t.name}}
{{ t.name }}
</router-link>
</li>
</ul>
@ -18,33 +18,33 @@
</template>
<script>
import TeamService from '../../services/team'
export default {
name: 'ListTeams',
data() {
return {
teamService: TeamService,
teams: [],
}
},
created() {
this.teamService = new TeamService()
this.loadTeams()
},
mounted() {
this.setTitle('Teams')
},
methods: {
loadTeams() {
this.teamService.getAll()
.then(response => {
this.$set(this, 'teams', response)
})
.catch(e => {
this.error(e, this)
})
},
import TeamService from '../../services/team'
export default {
name: 'ListTeams',
data() {
return {
teamService: TeamService,
teams: [],
}
}
},
created() {
this.teamService = new TeamService()
this.loadTeams()
},
mounted() {
this.setTitle('Teams')
},
methods: {
loadTeams() {
this.teamService.getAll()
.then(response => {
this.$set(this, 'teams', response)
})
.catch(e => {
this.error(e, this)
})
},
},
}
</script>

102
src/views/teams/NewTeam.vue
View File

@ -1,22 +1,22 @@
<template>
<div class="fullpage">
<a class="close" @click="back()">
<a @click="back()" class="close">
<icon :icon="['far', 'times-circle']">
</icon>
</a>
<h3>Create a new team</h3>
<form @submit.prevent="newTeam" @keyup.esc="back()">
<form @keyup.esc="back()" @submit.prevent="newTeam">
<div class="field is-grouped">
<p class="control is-expanded" v-bind:class="{ 'is-loading': teamService.loading}">
<input
v-focus
class="input"
:class="{ 'disabled': teamService.loading}" v-model="team.name"
type="text"
placeholder="The team's name goes here..."/>
:class="{ 'disabled': teamService.loading}"
class="input"
placeholder="The team's name goes here..." type="text"
v-focus
v-model="team.name"/>
</p>
<p class="control">
<button type="submit" class="button is-success noshadow">
<button class="button is-success noshadow" type="submit">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -32,49 +32,49 @@
</template>
<script>
import router from '../../router'
import TeamModel from '../../models/team'
import TeamService from '../../services/team'
import {IS_FULLPAGE} from '../../store/mutation-types'
import router from '../../router'
import TeamModel from '../../models/team'
import TeamService from '../../services/team'
import {IS_FULLPAGE} from '@/store/mutation-types'
export default {
name: 'NewTeam',
data() {
return {
teamService: TeamService,
team: TeamModel,
showError: false,
}
},
created() {
this.teamService = new TeamService()
this.team = new TeamModel()
this.$store.commit(IS_FULLPAGE, true)
},
mounted() {
this.setTitle('Create a new Team')
},
methods: {
newTeam() {
if (this.team.name === '') {
this.showError = true
return
}
this.showError = false
this.teamService.create(this.team)
.then(response => {
router.push({name: 'teams.edit', params: {id: response.id}})
this.success({message: 'The team was successfully created.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
back() {
router.go(-1)
},
export default {
name: 'NewTeam',
data() {
return {
teamService: TeamService,
team: TeamModel,
showError: false,
}
}
},
created() {
this.teamService = new TeamService()
this.team = new TeamModel()
this.$store.commit(IS_FULLPAGE, true)
},
mounted() {
this.setTitle('Create a new Team')
},
methods: {
newTeam() {
if (this.team.name === '') {
this.showError = true
return
}
this.showError = false
this.teamService.create(this.team)
.then(response => {
router.push({name: 'teams.edit', params: {id: response.id}})
this.success({message: 'The team was successfully created.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
back() {
router.go(-1)
},
},
}
</script>

206
src/views/user/Login.vue
View File

@ -2,21 +2,21 @@
<div>
<h2 class="title has-text-centered">Login</h2>
<div class="box">
<div v-if="confirmedEmailSuccess" class="notification is-success has-text-centered">
<div class="notification is-success has-text-centered" v-if="confirmedEmailSuccess">
You successfully confirmed your email! You can log in now.
</div>
<form id="loginform" @submit.prevent="submit">
<form @submit.prevent="submit" id="loginform">
<div class="field">
<label class="label" for="username">Username</label>
<div class="control">
<input
v-focus type="text"
id="username"
class="input"
name="username"
placeholder="e.g. frederick"
ref="username"
required
class="input" id="username"
name="username"
placeholder="e.g. frederick"
ref="username"
required
type="text"
v-focus
/>
</div>
</div>
@ -24,13 +24,13 @@
<label class="label" for="password">Password</label>
<div class="control">
<input
type="password"
class="input"
id="password"
name="password"
placeholder="e.g. ••••••••••••"
ref="password"
required
class="input"
id="password"
name="password"
placeholder="e.g. ••••••••••••"
ref="password"
required
type="password"
/>
</div>
</div>
@ -38,26 +38,27 @@
<label class="label" for="totpPasscode">Two Factor Authentication Code</label>
<div class="control">
<input
type="text"
class="input"
id="totpPasscode"
placeholder="e.g. 123456"
ref="totpPasscode"
required
v-focus
class="input"
id="totpPasscode"
placeholder="e.g. 123456"
ref="totpPasscode"
required
type="text"
v-focus
/>
</div>
</div>
<div class="field is-grouped login-buttons">
<div class="control is-expanded">
<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': loading}">Login
<button class="button is-primary" type="submit" v-bind:class="{ 'is-loading': loading}">Login
</button>
<router-link :to="{ name: 'user.register' }" class="button" v-if="registrationEnabled">Register
</router-link>
</div>
<div class="control">
<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">Reset your
<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">Reset
your
password
</router-link>
</div>
@ -72,88 +73,89 @@
</template>
<script>
import {mapState} from 'vuex'
import {mapState} from 'vuex'
import router from '../../router'
import {HTTP} from '../../http-common'
import message from '../../message'
import {ERROR_MESSAGE, LOADING} from '../../store/mutation-types'
import legal from '../../components/misc/legal'
import router from '../../router'
import {HTTP} from '@/http-common'
import message from '../../message'
import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
import legal from '../../components/misc/legal'
export default {
components: {
legal,
},
data() {
return {
confirmedEmailSuccess: 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
cancel()
})
.catch(e => {
cancel()
this.$store.commit(ERROR_MESSAGE, e.response.data.message)
})
}
// Check if the user is already logged in, if so, redirect him to the homepage
if (this.authenticated) {
router.push({name: 'home'})
}
},
created() {
this.setTitle('Login')
},
computed: mapState({
registrationEnabled: state => state.config.registrationEnabled,
loading: LOADING,
errorMessage: ERROR_MESSAGE,
needsTotpPasscode: state => state.auth.needsTotpPasscode,
authenticated: state => state.auth.authenticated,
}),
methods: {
submit() {
this.$store.commit(ERROR_MESSAGE, '')
// Some browsers prevent Vue bindings from working with autofilled values.
// To work around this, we're manually getting the values here instead of relying on vue bindings.
// For more info, see https://kolaente.dev/vikunja/frontend/issues/78
const credentials = {
username: this.$refs.username.value,
password: this.$refs.password.value,
}
if (this.needsTotpPasscode) {
credentials.totpPasscode = this.$refs.totpPasscode.value
}
this.$store.dispatch('auth/login', credentials)
.then(() => {
router.push({name: 'home'})
})
.catch(() => {})
}
export default {
components: {
legal,
},
data() {
return {
confirmedEmailSuccess: 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
cancel()
})
.catch(e => {
cancel()
this.$store.commit(ERROR_MESSAGE, e.response.data.message)
})
}
// Check if the user is already logged in, if so, redirect him to the homepage
if (this.authenticated) {
router.push({name: 'home'})
}
},
created() {
this.setTitle('Login')
},
computed: mapState({
registrationEnabled: state => state.config.registrationEnabled,
loading: LOADING,
errorMessage: ERROR_MESSAGE,
needsTotpPasscode: state => state.auth.needsTotpPasscode,
authenticated: state => state.auth.authenticated,
}),
methods: {
submit() {
this.$store.commit(ERROR_MESSAGE, '')
// Some browsers prevent Vue bindings from working with autofilled values.
// To work around this, we're manually getting the values here instead of relying on vue bindings.
// For more info, see https://kolaente.dev/vikunja/frontend/issues/78
const credentials = {
username: this.$refs.username.value,
password: this.$refs.password.value,
}
if (this.needsTotpPasscode) {
credentials.totpPasscode = this.$refs.totpPasscode.value
}
this.$store.dispatch('auth/login', credentials)
.then(() => {
router.push({name: 'home'})
})
.catch(() => {
})
},
},
}
</script>
<style scoped>
.button {
margin: 0 0.4em 0 0;
}
.button {
margin: 0 0.4em 0 0;
}
.reset-password-link {
display: inline-block;
padding-top: 5px;
}
.reset-password-link {
display: inline-block;
padding-top: 5px;
}
</style>

121
src/views/user/PasswordReset.vue
View File

@ -2,23 +2,40 @@
<div>
<h2 class="title has-text-centered">Reset your password</h2>
<div class="box">
<form id="form" @submit.prevent="submit" v-if="!successMessage">
<form @submit.prevent="submit" id="form" v-if="!successMessage">
<div class="field">
<label class="label" for="password1">Password</label>
<div class="control">
<input v-focus type="password" class="input" id="password1" name="password1" placeholder="e.g. ••••••••••••" v-model="credentials.password" required/>
<input
class="input"
id="password1"
name="password1"
placeholder="e.g. ••••••••••••"
required
type="password"
v-focus
v-model="credentials.password"/>
</div>
</div>
<div class="field">
<label class="label" for="password2">Retype your password</label>
<div class="control">
<input type="password" class="input" id="password2" name="password2" placeholder="e.g. ••••••••••••" v-model="credentials.password2" required/>
<input
class="input"
id="password2"
name="password2"
placeholder="e.g. ••••••••••••"
required
type="password"
v-model="credentials.password2"/>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" class="button is-primary" :class="{ 'is-loading': this.passwordResetService.loading}">Reset your password</button>
<button :class="{ 'is-loading': this.passwordResetService.loading}" class="button is-primary"
type="submit">Reset your password
</button>
</div>
</div>
<div class="notification is-info" v-if="this.passwordResetService.loading">
@ -28,7 +45,7 @@
{{ errorMsg }}
</div>
</form>
<div v-if="successMessage" class="has-text-centered">
<div class="has-text-centered" v-if="successMessage">
<div class="notification is-success">
{{ successMessage }}
</div>
@ -40,56 +57,56 @@
</template>
<script>
import PasswordResetModel from '../../models/passwordReset'
import PasswordResetService from '../../services/passwordReset'
import Legal from '../../components/misc/legal'
import PasswordResetModel from '../../models/passwordReset'
import PasswordResetService from '../../services/passwordReset'
import Legal from '../../components/misc/legal'
export default {
components: {
Legal,
},
data() {
return {
passwordResetService: PasswordResetService,
credentials: {
password: '',
password2: '',
},
errorMsg: '',
successMessage: ''
}
},
created() {
this.passwordResetService = new PasswordResetService()
},
mounted() {
this.setTitle('Reset your password')
},
methods: {
submit() {
this.errorMsg = ''
if (this.credentials.password2 !== this.credentials.password) {
this.errorMsg = 'Passwords don\'t match'
return
}
let passwordReset = new PasswordResetModel({newPassword: this.credentials.password})
this.passwordResetService.resetPassword(passwordReset)
.then(response => {
this.successMessage = response.data.message
localStorage.removeItem('passwordResetToken')
})
.catch(e => {
this.errorMsg = e.response.data.message
})
}
export default {
components: {
Legal,
},
data() {
return {
passwordResetService: PasswordResetService,
credentials: {
password: '',
password2: '',
},
errorMsg: '',
successMessage: '',
}
}
},
created() {
this.passwordResetService = new PasswordResetService()
},
mounted() {
this.setTitle('Reset your password')
},
methods: {
submit() {
this.errorMsg = ''
if (this.credentials.password2 !== this.credentials.password) {
this.errorMsg = 'Passwords don\'t match'
return
}
let passwordReset = new PasswordResetModel({newPassword: this.credentials.password})
this.passwordResetService.resetPassword(passwordReset)
.then(response => {
this.successMessage = response.data.message
localStorage.removeItem('passwordResetToken')
})
.catch(e => {
this.errorMsg = e.response.data.message
})
},
},
}
</script>
<style scoped>
.button {
margin: 0 0.4em 0 0;
}
.button {
margin: 0 0.4em 0 0;
}
</style>

153
src/views/user/Register.vue
View File

@ -2,35 +2,66 @@
<div>
<h2 class="title has-text-centered">Register</h2>
<div class="box">
<form id="registerform" @submit.prevent="submit">
<form @submit.prevent="submit" id="registerform">
<div class="field">
<label class="label" for="username">Username</label>
<div class="control">
<input v-focus type="text" id="username" class="input" name="username" placeholder="e.g. frederick" v-model="credentials.username" required/>
<input
class="input"
id="username"
name="username"
placeholder="e.g. frederick"
required
type="text"
v-focus
v-model="credentials.username"/>
</div>
</div>
<div class="field">
<label class="label" for="email">E-mail address</label>
<div class="control">
<input type="email" class="input" id="email" name="email" placeholder="e.g. frederic@vikunja.io" v-model="credentials.email" required/>
<input
class="input"
id="email"
name="email"
placeholder="e.g. frederic@vikunja.io"
required
type="email"
v-model="credentials.email"/>
</div>
</div>
<div class="field">
<label class="label" for="password1">Password</label>
<div class="control">
<input type="password" class="input" id="password1" name="password1" placeholder="e.g. ••••••••••••" v-model="credentials.password" required/>
<input
class="input"
id="password1"
name="password1"
placeholder="e.g. ••••••••••••"
required
type="password"
v-model="credentials.password"/>
</div>
</div>
<div class="field">
<label class="label" for="password2">Retype your password</label>
<div class="control">
<input type="password" class="input" id="password2" name="password2" placeholder="e.g. ••••••••••••" v-model="credentials.password2" required/>
<input
class="input"
id="password2"
name="password2"
placeholder="e.g. ••••••••••••"
required
type="password"
v-model="credentials.password2"/>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': loading}">Register</button>
<button class="button is-primary" type="submit" v-bind:class="{ 'is-loading': loading}">
Register
</button>
<router-link :to="{ name: 'user.login' }" class="button">Login</router-link>
</div>
</div>
@ -47,64 +78,64 @@
</template>
<script>
import router from '../../router'
import {mapState} from 'vuex'
import {ERROR_MESSAGE, LOADING} from '../../store/mutation-types'
import Legal from '../../components/misc/legal'
import router from '../../router'
import {mapState} from 'vuex'
import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
import Legal from '../../components/misc/legal'
export default {
components: {
Legal,
},
data() {
return {
credentials: {
username: '',
email: '',
password: '',
password2: '',
},
}
},
beforeMount() {
// Check if the user is already logged in, if so, redirect him to the homepage
if (this.authenticated) {
router.push({name: 'home'})
}
},
mounted() {
this.setTitle('Register')
},
computed: mapState({
authenticated: state => state.auth.authenticated,
loading: LOADING,
errorMessage: ERROR_MESSAGE,
}),
methods: {
submit() {
this.$store.commit(LOADING, true)
this.$store.commit(ERROR_MESSAGE, '')
if (this.credentials.password2 !== this.credentials.password) {
this.$store.commit(ERROR_MESSAGE, 'Passwords don\'t match.')
this.$store.commit(LOADING, false)
return
}
const credentials = {
username: this.credentials.username,
email: this.credentials.email,
password: this.credentials.password
}
this.$store.dispatch('auth/register', credentials)
}
export default {
components: {
Legal,
},
data() {
return {
credentials: {
username: '',
email: '',
password: '',
password2: '',
},
}
}
},
beforeMount() {
// Check if the user is already logged in, if so, redirect him to the homepage
if (this.authenticated) {
router.push({name: 'home'})
}
},
mounted() {
this.setTitle('Register')
},
computed: mapState({
authenticated: state => state.auth.authenticated,
loading: LOADING,
errorMessage: ERROR_MESSAGE,
}),
methods: {
submit() {
this.$store.commit(LOADING, true)
this.$store.commit(ERROR_MESSAGE, '')
if (this.credentials.password2 !== this.credentials.password) {
this.$store.commit(ERROR_MESSAGE, 'Passwords don\'t match.')
this.$store.commit(LOADING, false)
return
}
const credentials = {
username: this.credentials.username,
email: this.credentials.email,
password: this.credentials.password,
}
this.$store.dispatch('auth/register', credentials)
},
},
}
</script>
<style scoped>
.button {
margin: 0 0.4em 0 0;
}
.button {
margin: 0 0.4em 0 0;
}
</style>

91
src/views/user/RequestPasswordReset.vue
View File

@ -6,13 +6,24 @@
<div class="field">
<label class="label" for="email">E-mail address</label>
<div class="control">
<input v-focus type="email" class="input" id="email" name="email" placeholder="e.g. frederic@vikunja.io" v-model="passwordReset.email" required/>
<input
class="input"
id="email"
name="email"
placeholder="e.g. frederic@vikunja.io"
required
type="email"
v-focus
v-model="passwordReset.email"/>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': passwordResetService.loading}">Send me a password reset link</button>
<button class="button is-primary" type="submit"
v-bind:class="{ 'is-loading': passwordResetService.loading}">Send me a password reset
link
</button>
<router-link :to="{ name: 'user.login' }" class="button">Login</router-link>
</div>
</div>
@ -20,7 +31,7 @@
{{ errorMsg }}
</div>
</form>
<div v-if="isSuccess" class="has-text-centered">
<div class="has-text-centered" v-if="isSuccess">
<div class="notification is-success">
Check your inbox! You should have a mail with instructions on how to reset your password.
</div>
@ -32,46 +43,46 @@
</template>
<script>
import PasswordResetModel from '../../models/passwordReset'
import PasswordResetService from '../../services/passwordReset'
import Legal from '../../components/misc/legal'
import PasswordResetModel from '../../models/passwordReset'
import PasswordResetService from '../../services/passwordReset'
import Legal from '../../components/misc/legal'
export default {
components: {
Legal,
},
data() {
return {
passwordResetService: PasswordResetService,
passwordReset: PasswordResetModel,
errorMsg: '',
isSuccess: false
}
},
created() {
this.passwordResetService = new PasswordResetService()
this.passwordReset = new PasswordResetModel()
},
mounted() {
this.setTitle('Reset your password')
},
methods: {
submit() {
this.errorMsg = ''
this.passwordResetService.requestResetPassword(this.passwordReset)
.then(() => {
this.isSuccess = true
})
.catch(e => {
this.errorMsg = e.response.data.message
})
},
export default {
components: {
Legal,
},
data() {
return {
passwordResetService: PasswordResetService,
passwordReset: PasswordResetModel,
errorMsg: '',
isSuccess: false,
}
}
},
created() {
this.passwordResetService = new PasswordResetService()
this.passwordReset = new PasswordResetModel()
},
mounted() {
this.setTitle('Reset your password')
},
methods: {
submit() {
this.errorMsg = ''
this.passwordResetService.requestResetPassword(this.passwordReset)
.then(() => {
this.isSuccess = true
})
.catch(e => {
this.errorMsg = e.response.data.message
})
},
},
}
</script>
<style scoped>
.button {
margin: 0 0.4em 0 0;
}
.button {
margin: 0 0.4em 0 0;
}
</style>

352
src/views/user/Settings.vue
View File

@ -1,7 +1,7 @@
<template>
<div
class="loader-container is-max-width-desktop"
:class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }">
:class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }"
class="loader-container is-max-width-desktop">
<!-- Password update -->
<div class="card">
<header class="card-header">
@ -16,43 +16,43 @@
<label class="label" for="newPassword">New Password</label>
<div class="control">
<input
class="input"
type="password"
id="newPassword"
placeholder="The new password..."
v-model="passwordUpdate.newPassword"
@keyup.enter="updatePassword"/>
@keyup.enter="updatePassword"
class="input"
id="newPassword"
placeholder="The new password..."
type="password"
v-model="passwordUpdate.newPassword"/>
</div>
</div>
<div class="field">
<label class="label" for="newPasswordConfirm">New Password Confirmation</label>
<div class="control">
<input
class="input"
type="password"
id="newPasswordConfirm"
placeholder="Confirm your new password..."
v-model="passwordConfirm"
@keyup.enter="updatePassword"/>
@keyup.enter="updatePassword"
class="input"
id="newPasswordConfirm"
placeholder="Confirm your new password..."
type="password"
v-model="passwordConfirm"/>
</div>
</div>
<div class="field">
<label class="label" for="currentPassword">Current Password</label>
<div class="control">
<input
class="input"
type="password"
id="currentPassword"
placeholder="Your current password"
v-model="passwordUpdate.oldPassword"
@keyup.enter="updatePassword"/>
@keyup.enter="updatePassword"
class="input"
id="currentPassword"
placeholder="Your current password"
type="password"
v-model="passwordUpdate.oldPassword"/>
</div>
</div>
</form>
<div class="bigbuttons">
<button @click="updatePassword()" class="button is-primary is-fullwidth"
:class="{ 'is-loading': passwordUpdateService.loading}">
<button :class="{ 'is-loading': passwordUpdateService.loading}" @click="updatePassword()"
class="button is-primary is-fullwidth">
Save
</button>
</div>
@ -74,31 +74,31 @@
<label class="label" for="newEmail">New Email Address</label>
<div class="control">
<input
class="input"
type="email"
id="newEmail"
placeholder="The new email address..."
v-model="emailUpdate.newEmail"
@keyup.enter="updateEmail"/>
@keyup.enter="updateEmail"
class="input"
id="newEmail"
placeholder="The new email address..."
type="email"
v-model="emailUpdate.newEmail"/>
</div>
</div>
<div class="field">
<label class="label" for="currentPassword">Current Password</label>
<div class="control">
<input
class="input"
type="password"
id="currentPassword"
placeholder="Your current password"
v-model="emailUpdate.password"
@keyup.enter="updateEmail"/>
@keyup.enter="updateEmail"
class="input"
id="currentPassword"
placeholder="Your current password"
type="password"
v-model="emailUpdate.password"/>
</div>
</div>
</form>
<div class="bigbuttons">
<button @click="updateEmail()" class="button is-primary is-fullwidth"
:class="{ 'is-loading': emailUpdateService.loading}">
<button :class="{ 'is-loading': emailUpdateService.loading}" @click="updateEmail()"
class="button is-primary is-fullwidth">
Save
</button>
</div>
@ -118,10 +118,10 @@
</header>
<div class="card-content">
<a
class="button is-primary"
v-if="!totpEnrolled && totp.secret === ''"
@click="totpEnroll()"
:class="{ 'is-loading': totpService.loading }">
:class="{ 'is-loading': totpService.loading }"
@click="totpEnroll()"
class="button is-primary"
v-if="!totpEnrolled && totp.secret === ''">
Enroll
</a>
<div class="content" v-else-if="totp.secret !== '' && !totp.enabled">
@ -138,38 +138,38 @@
<label class="label" for="totpConfirmPasscode">Passcode</label>
<div class="control">
<input
class="input"
type="text"
id="totpConfirmPasscode"
placeholder="A code generated by your totp application"
v-model="totpConfirmPasscode"
@keyup.enter="totpConfirm()"/>
@keyup.enter="totpConfirm()"
class="input"
id="totpConfirmPasscode"
placeholder="A code generated by your totp application"
type="text"
v-model="totpConfirmPasscode"/>
</div>
</div>
<a class="button is-primary" @click="totpConfirm()">Confirm</a>
<a @click="totpConfirm()" class="button is-primary">Confirm</a>
</div>
<div class="content" v-else-if="totp.secret !== '' && totp.enabled">
<p>
You've sucessfully set up two factor authentication!
</p>
<p v-if="!totpDisableForm">
<a class="button is-danger" @click="totpDisableForm = true">Disable</a>
<a @click="totpDisableForm = true" class="button is-danger">Disable</a>
</p>
<div v-if="totpDisableForm">
<div class="field">
<label class="label" for="currentPassword">Please Enter Your Password</label>
<div class="control">
<input
class="input"
type="password"
id="currentPassword"
placeholder="Your current password"
v-model="totpDisablePassword"
@keyup.enter="totpDisable"
v-focus/>
@keyup.enter="totpDisable"
class="input"
id="currentPassword"
placeholder="Your current password"
type="password"
v-focus
v-model="totpDisablePassword"/>
</div>
</div>
<a class="button is-danger" @click="totpDisable()">Disable two factor authentication</a>
<a @click="totpDisable()" class="button is-danger">Disable two factor authentication</a>
</div>
</div>
</div>
@ -182,9 +182,9 @@
</header>
<div class="card-content">
<router-link
class="button is-primary is-right noshadow is-outlined"
:to="{name: 'migrate.start'}"
v-if="migratorsEnabled"
:to="{name: 'migrate.start'}"
class="button is-primary is-right noshadow is-outlined"
v-if="migratorsEnabled"
>
Import your data into Vikunja
</router-link>
@ -194,131 +194,131 @@
</template>
<script>
import PasswordUpdateModel from '../../models/passwordUpdate'
import PasswordUpdateService from '../../services/passwordUpdateService'
import EmailUpdateService from '../../services/emailUpdate'
import EmailUpdateModel from '../../models/emailUpdate'
import TotpModel from '../../models/totp'
import TotpService from '../../services/totp'
import PasswordUpdateModel from '../../models/passwordUpdate'
import PasswordUpdateService from '../../services/passwordUpdateService'
import EmailUpdateService from '../../services/emailUpdate'
import EmailUpdateModel from '../../models/emailUpdate'
import TotpModel from '../../models/totp'
import TotpService from '../../services/totp'
import {mapState} from 'vuex'
import {mapState} from 'vuex'
import AvatarSettings from '../../components/user/avatar-settings'
import AvatarSettings from '../../components/user/avatar-settings'
export default {
name: 'Settings',
data() {
return {
passwordUpdateService: PasswordUpdateService,
passwordUpdate: PasswordUpdateModel,
passwordConfirm: '',
export default {
name: 'Settings',
data() {
return {
passwordUpdateService: PasswordUpdateService,
passwordUpdate: PasswordUpdateModel,
passwordConfirm: '',
emailUpdateService: EmailUpdateService,
emailUpdate: EmailUpdateModel,
emailUpdateService: EmailUpdateService,
emailUpdate: EmailUpdateModel,
totpService: TotpService,
totp: TotpModel,
totpQR: '',
totpEnrolled: false,
totpConfirmPasscode: '',
totpDisableForm: false,
totpDisablePassword: '',
totpService: TotpService,
totp: TotpModel,
totpQR: '',
totpEnrolled: false,
totpConfirmPasscode: '',
totpDisableForm: false,
totpDisablePassword: '',
}
},
components: {
AvatarSettings,
},
created() {
this.passwordUpdateService = new PasswordUpdateService()
this.passwordUpdate = new PasswordUpdateModel()
this.emailUpdateService = new EmailUpdateService()
this.emailUpdate = new EmailUpdateModel()
this.totpService = new TotpService()
this.totp = new TotpModel()
this.totpStatus()
},
mounted() {
this.setTitle('Settings')
},
computed: mapState({
totpEnabled: state => state.config.totpEnabled,
migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
}),
methods: {
updatePassword() {
if (this.passwordConfirm !== this.passwordUpdate.newPassword) {
this.error({message: 'The new password and its confirmation don\'t match.'}, this)
return
}
this.passwordUpdateService.update(this.passwordUpdate)
.then(() => {
this.success({message: 'The password was successfully updated.'}, this)
})
.catch(e => this.error(e, this))
},
components: {
AvatarSettings,
updateEmail() {
this.emailUpdateService.update(this.emailUpdate)
.then(() => {
this.success({message: 'Your email address was successfully updated. We\'ve sent you a link to confirm it.'}, this)
})
.catch(e => this.error(e, this))
},
created() {
this.passwordUpdateService = new PasswordUpdateService()
this.passwordUpdate = new PasswordUpdateModel()
this.emailUpdateService = new EmailUpdateService()
this.emailUpdate = new EmailUpdateModel()
this.totpService = new TotpService()
this.totp = new TotpModel()
this.totpStatus()
},
mounted() {
this.setTitle('Settings')
},
computed: mapState({
totpEnabled: state => state.config.totpEnabled,
migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
}),
methods: {
updatePassword() {
if (this.passwordConfirm !== this.passwordUpdate.newPassword) {
this.error({message: 'The new password and its confirmation don\'t match.'}, this)
return
}
this.passwordUpdateService.update(this.passwordUpdate)
.then(() => {
this.success({message: 'The password was successfully updated.'}, this)
})
.catch(e => this.error(e, this))
},
updateEmail() {
this.emailUpdateService.update(this.emailUpdate)
.then(() => {
this.success({message: 'Your email address was successfully updated. We\'ve sent you a link to confirm it.'}, this)
})
.catch(e => this.error(e, this))
},
totpStatus() {
if (!this.totpEnabled) {
return
}
this.totpService.get()
.then(r => {
this.$set(this, 'totp', r)
this.totpSetQrCode()
})
.catch(e => {
// Error code 1016 means totp is not enabled, we don't need an error in that case.
if (e.response && e.response.data && e.response.data.code && e.response.data.code === 1016) {
this.totpEnrolled = false
return
}
this.error(e, this)
})
},
totpSetQrCode() {
this.totpService.qrcode()
.then(qr => {
const urlCreator = window.URL || window.webkitURL
this.totpQR = urlCreator.createObjectURL(qr)
})
},
totpEnroll() {
this.totpService.enroll()
.then(r => {
this.totpEnrolled = true
this.$set(this, 'totp', r)
this.totpSetQrCode()
})
.catch(e => this.error(e, this))
},
totpConfirm() {
this.totpService.enable({passcode: this.totpConfirmPasscode})
.then(() => {
this.$set(this.totp, 'enabled', true)
this.success({message: 'You\'ve successfully confirmed your totp setup and can use it from now on!'}, this)
})
.catch(e => this.error(e, this))
},
totpDisable() {
this.totpService.disable({password: this.totpDisablePassword})
.then(() => {
totpStatus() {
if (!this.totpEnabled) {
return
}
this.totpService.get()
.then(r => {
this.$set(this, 'totp', r)
this.totpSetQrCode()
})
.catch(e => {
// Error code 1016 means totp is not enabled, we don't need an error in that case.
if (e.response && e.response.data && e.response.data.code && e.response.data.code === 1016) {
this.totpEnrolled = false
this.$set(this, 'totp', new TotpModel())
this.success({message: 'Two factor authentication was sucessfully disabled.'}, this)
})
.catch(e => this.error(e, this))
},
return
}
this.error(e, this)
})
},
}
totpSetQrCode() {
this.totpService.qrcode()
.then(qr => {
const urlCreator = window.URL || window.webkitURL
this.totpQR = urlCreator.createObjectURL(qr)
})
},
totpEnroll() {
this.totpService.enroll()
.then(r => {
this.totpEnrolled = true
this.$set(this, 'totp', r)
this.totpSetQrCode()
})
.catch(e => this.error(e, this))
},
totpConfirm() {
this.totpService.enable({passcode: this.totpConfirmPasscode})
.then(() => {
this.$set(this.totp, 'enabled', true)
this.success({message: 'You\'ve successfully confirmed your totp setup and can use it from now on!'}, this)
})
.catch(e => this.error(e, this))
},
totpDisable() {
this.totpService.disable({password: this.totpDisablePassword})
.then(() => {
this.totpEnrolled = false
this.$set(this, 'totp', new TotpModel())
this.success({message: 'Two factor authentication was sucessfully disabled.'}, this)
})
.catch(e => this.error(e, this))
},
},
}
</script>