149 lines
4.0 KiB
Vue
149 lines
4.0 KiB
Vue
<template>
|
|
<div>
|
|
<h1>Tasks</h1>
|
|
|
|
<app-modal :open="listToDelete !== null" :title="'Delete ' + (listToDelete !== null ? listToDelete.name : '') + '?'" @dismiss="listToDelete = null">
|
|
<button class="button is-danger" @click="confirmListDelete">Confirm</button>
|
|
<button class="button is-primary" @click="listToDelete = null">Cancel</button>
|
|
</app-modal>
|
|
|
|
<app-dropdown button-class="is-primary" :open="showListDropdown" :label="listSelectLabel" @open="showListDropdown = true" @close="showListDropdown = false">
|
|
<div class="dropdown-item" v-for="l in taskLists">
|
|
<a href="#" @click="selectList(l)">{{l.name}}<button @click.stop="listToDelete = l" class="button is-small is-danger is-pulled-right"><app-icon icon="x" size="sm"></app-icon></button></a>
|
|
|
|
</div>
|
|
|
|
<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">
|
|
<table class="table">
|
|
<tr>
|
|
<th></th>
|
|
<th>Name</th>
|
|
<th>Quantity</th>
|
|
<th></th>
|
|
</tr>
|
|
<tr v-if="showAddItem">
|
|
<th></th>
|
|
<th><input type="text"></th>
|
|
<th><input type="text"></th>
|
|
<th><button type="button" class="button">Add</button></th>
|
|
</tr>
|
|
<tr v-for="i in currentList.task_items">
|
|
<td></td>
|
|
<td>{{i.name}}</td>
|
|
<td>{{i.quantity}}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div v-if="currentList.task_items.length === 0">
|
|
No Items
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import api from "../lib/Api";
|
|
import * as Errors from '../lib/Errors';
|
|
import TaskListMiniForm from "./TaskListMiniForm";
|
|
|
|
const newListTemplate = function() {
|
|
return {
|
|
name: ''
|
|
};
|
|
};
|
|
|
|
const newItemTemplate = function() {
|
|
return {
|
|
name: '',
|
|
quantity: ''
|
|
};
|
|
};
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
taskLists: [],
|
|
showListDropdown: false,
|
|
currentList: null,
|
|
newList: newListTemplate(),
|
|
newListValidationErrors: {},
|
|
showAddItem: false,
|
|
newItem: newItemTemplate(),
|
|
newItemValidationErrors: {},
|
|
listToDelete: null
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
listSelectLabel() {
|
|
if (this.currentList === null) {
|
|
return "Select or Create a List";
|
|
} else {
|
|
return this.currentList.name;
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
selectList(l) {
|
|
this.currentList = l;
|
|
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];
|
|
}
|
|
},
|
|
|
|
confirmListDelete() {
|
|
this.loadResource(
|
|
api.deleteTaskList(this.listToDelete)
|
|
.then(() => this.updateData())
|
|
.then(() => this.listToDelete = null)
|
|
);
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.updateData()
|
|
},
|
|
|
|
components: {
|
|
TaskListMiniForm
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style> |