98 lines
1.7 KiB
Vue
98 lines
1.7 KiB
Vue
<template>
|
|
<div>
|
|
|
|
<app-expand-transition name="fade">
|
|
<task-item-edit :task-item="newItem" v-if="showAddItem"></task-item-edit>
|
|
</app-expand-transition>
|
|
|
|
<table class="table is-narrow">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Name</th>
|
|
<th>Quantity</th>
|
|
<th>
|
|
<button class="button" @click="toggleShowAddItem">{{ showAddItem ? 'Done' : 'New Item' }}</button>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="i in taskItems">
|
|
<td></td>
|
|
<td>{{ i.name }}</td>
|
|
<td>{{ i.quantity }}</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr v-if="taskItems.length === 0">
|
|
<td colspan="4">
|
|
No Items
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import TaskItemEdit from "./TaskItemEdit";
|
|
|
|
const newItemTemplate = function() {
|
|
return {
|
|
name: '',
|
|
quantity: ''
|
|
};
|
|
};
|
|
|
|
export default {
|
|
props: {
|
|
taskItems: {
|
|
required: true,
|
|
type: Array
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
showAddItem: false,
|
|
newItem: newItemTemplate(),
|
|
newItemValidationErrors: {}
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
|
|
toggleShowAddItem() {
|
|
this.showAddItem = !this.showAddItem;
|
|
if (this.showAddItem) {
|
|
this.$nextTick(() => {
|
|
//this.$refs.quantityInput.focus();
|
|
});
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
TaskItemEdit
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.columns {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.column {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
</style> |