114 lines
2.9 KiB
Vue
114 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<h1>Tasks</h1>
|
|
|
|
<app-dropdown button-class="is-primary" :open="showListDropdown" :label="listSelectLabel" @open="showListDropdown = true" @close="showListDropdown = false">
|
|
|
|
<task-list-dropdown-item v-for="l in taskLists" :task-list="l" :active="currentList !== null && currentList.id === l.id" @select="selectList" @delete="deleteList"></task-list-dropdown-item>
|
|
|
|
<hr class="dropdown-divider" v-if="taskLists.length > 0">
|
|
<div class="dropdown-item">
|
|
<task-list-mini-form :task-list="newList" :validation-errors="newListValidationErrors" @save="saveNewList"></task-list-mini-form>
|
|
</div>
|
|
</app-dropdown>
|
|
|
|
<div v-if="currentList !== null">
|
|
|
|
<task-item-list :task-items="currentList.task_items"></task-item-list>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import api from "../lib/Api";
|
|
import * as Errors from '../lib/Errors';
|
|
import TaskListMiniForm from "./TaskListMiniForm";
|
|
import TaskListDropdownItem from "./TaskListDropdownItem";
|
|
import TaskItemList from "./TaskItemList";
|
|
|
|
const newListTemplate = function() {
|
|
return {
|
|
name: ''
|
|
};
|
|
};
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
taskLists: [],
|
|
showListDropdown: false,
|
|
currentList: null,
|
|
newList: newListTemplate(),
|
|
newListValidationErrors: {}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
listSelectLabel() {
|
|
if (this.currentList === null) {
|
|
return "Select or Create a List";
|
|
} else {
|
|
return this.currentList.name;
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
selectList(list) {
|
|
this.currentList = list;
|
|
this.showListDropdown = false;
|
|
},
|
|
|
|
saveNewList() {
|
|
this.loadResource(
|
|
api.postTaskList(this.newList)
|
|
.then(l => this.currentList = l)
|
|
.then(() => this.showListDropdown = false)
|
|
.then(() => this.updateData())
|
|
.then(() => { this.newList = newListTemplate(); this.newListValidationErrors = {}; } )
|
|
.catch(Errors.onlyFor(Errors.ApiValidationError, err => this.newListValidationErrors = err.validationErrors()))
|
|
);
|
|
},
|
|
|
|
updateData() {
|
|
return this.loadResource(api.getTaskLists(data => this.setNewData(data)));
|
|
},
|
|
|
|
setNewData(list) {
|
|
this.taskLists = list;
|
|
if (this.currentList !== null) {
|
|
this.currentList = this.taskLists.find(l => this.currentList.id === l.id) || null;
|
|
}
|
|
|
|
if (this.currentList === null && this.taskLists.length > 0) {
|
|
this.currentList = this.taskLists[0];
|
|
}
|
|
},
|
|
|
|
deleteList(list) {
|
|
this.loadResource(
|
|
api.deleteTaskList(list)
|
|
.then(() => this.updateData())
|
|
);
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.updateData()
|
|
},
|
|
|
|
components: {
|
|
TaskListMiniForm,
|
|
TaskListDropdownItem,
|
|
TaskItemList
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style> |