155 lines
3.2 KiB
Vue
155 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
|
|
<app-expand-transition name="fade">
|
|
<task-item-edit @save="save" :task-item="newItem" v-if="showAddItem" ref="itemEdit"></task-item-edit>
|
|
</app-expand-transition>
|
|
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Name</th>
|
|
<th>Quantity</th>
|
|
<th>
|
|
<button class="button" @click="toggleShowAddItem">{{ showAddItem ? 'Done' : 'New Item' }}</button>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<transition-group tag="tbody" name="list-item-move">
|
|
<tr v-for="i in taskItems" :key="i.id" @click="toggleItem(i)">
|
|
<td>
|
|
<div class="check">
|
|
<app-icon v-if="i.completed" icon="check"></app-icon>
|
|
<span class="icon" v-else></span>
|
|
</div>
|
|
</td>
|
|
<td>{{ i.name }}</td>
|
|
<td>{{ i.quantity }}</td>
|
|
<td></td>
|
|
</tr>
|
|
</transition-group>
|
|
<tbody v-if="taskItems.length === 0">
|
|
<tr>
|
|
<td colspan="4">
|
|
No Items
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import * as Errors from '../lib/Errors';
|
|
import { mapActions } from "vuex";
|
|
import cloneDeep from "lodash/cloneDeep";
|
|
|
|
import TaskItemEdit from "./TaskItemEdit";
|
|
|
|
const newItemTemplate = function(listId) {
|
|
return {
|
|
task_list_id: listId,
|
|
name: '',
|
|
quantity: '',
|
|
completed: false
|
|
};
|
|
};
|
|
|
|
export default {
|
|
props: {
|
|
taskList: {
|
|
required: true,
|
|
type: Object
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
showAddItem: false,
|
|
newItem: null,
|
|
newItemValidationErrors: {}
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
completedTaskItems() {
|
|
return (this.taskList ? this.taskList.task_items : []).filter(i => i.completed);
|
|
},
|
|
|
|
uncompletedTaskItems() {
|
|
return (this.taskList ? this.taskList.task_items : []).filter(i => !i.completed);
|
|
},
|
|
|
|
taskItems() {
|
|
return this.uncompletedTaskItems.concat(this.completedTaskItems);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
...mapActions([
|
|
'createTaskItem',
|
|
'updateTaskItem',
|
|
'completeTaskItems'
|
|
]),
|
|
|
|
save() {
|
|
this.loadResource(
|
|
this.createTaskItem(this.newItem)
|
|
.then(() => {
|
|
this.newItem = newItemTemplate(this.taskList.id);
|
|
this.$refs.itemEdit.focus();
|
|
})
|
|
.catch(Errors.onlyFor(Errors.ApiValidationError, err => this.newItemValidationErrors = err.validationErrors()))
|
|
)
|
|
},
|
|
|
|
toggleItem(i) {
|
|
this.loadResource(
|
|
this.completeTaskItems({
|
|
taskList: this.taskList,
|
|
taskItems: [i],
|
|
completed: !i.completed
|
|
})
|
|
);
|
|
},
|
|
|
|
toggleShowAddItem() {
|
|
this.newItem = newItemTemplate(this.taskList.id);
|
|
this.showAddItem = !this.showAddItem;
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
TaskItemEdit
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
@import "../styles/variables";
|
|
|
|
.columns {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.column {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
div.check {
|
|
border: 2px solid $link;
|
|
display: flex;
|
|
}
|
|
|
|
</style> |