<template> <v-container class="tasks"> <app-bar title="Central Backlog" :hide-drawer="true"></app-bar> <v-row> <v-col cols="12"> <v-card flat class="my-1 px-1" style="background: rgba(0,0,0,0)" v-show="$vuetify.breakpoint.smAndUp"> <v-card-text class="body-2 black--text font-weight-bold"> <v-row align="center"> <v-col cols="6" sm="1">ID</v-col> <v-col cols="6" sm="1">Date</v-col> <v-col cols="12" sm="1">Name</v-col> <v-col cols="12" sm="1">Lens</v-col> <v-col cols="12" sm="1">Purpose</v-col> <v-col cols="6" sm="1">Cycle</v-col> <v-col cols="6" sm="1">Effort</v-col> <v-col cols="6" sm="1">Owner</v-col> <v-col cols="6" sm="1">Reviewer</v-col> <v-col cols="6" sm="1"></v-col> <v-col cols="6" sm="1"></v-col> <v-col cols="6" sm="1"></v-col> </v-row> </v-card-text> </v-card> <v-card v-for="task in backlog" :key="task.id" flat class="my-1 px-1" :to="{name: 'site-kanban-id', params: {'cycleId': task.label.cycle_id}}"> <v-card-text class="body-2 black--text"> <v-row align="center"> <v-col cols="6" sm="1"><strong v-show="$vuetify.breakpoint.xsOnly">ID: </strong><span>{{ task.id }}</span></v-col> <v-col cols="6" sm="1"><strong v-show="$vuetify.breakpoint.xsOnly">Date: </strong><span>{{ task.date_added }}</span></v-col> <v-col cols="12" sm="1"><strong v-show="$vuetify.breakpoint.xsOnly">Name: </strong><span>{{ task.name }}</span></v-col> <v-col cols="12" sm="1"><strong v-show="$vuetify.breakpoint.xsOnly">Lens: </strong><span>{{ task.lens_emoji }} {{ task.lens }}</span></v-col> <v-col cols="12" sm="1"><strong v-show="$vuetify.breakpoint.xsOnly">Purpose: </strong><span>{{ task.purpose_emoji }} {{ task.purpose }}</span></v-col> <v-col cols="6" sm="1"><strong v-show="$vuetify.breakpoint.xsOnly">Cycle: </strong><span>{{ task.label.cycle_id }}</span></v-col> <v-col cols="6" sm="1"><strong v-show="$vuetify.breakpoint.xsOnly">Effort: </strong><span>{{ task.effort }}</span></v-col> <v-col cols="6" sm="1"><strong v-show="$vuetify.breakpoint.xsOnly">Owner: </strong><span>{{ task.owner }}</span></v-col> <v-col cols="6" sm="1"><strong v-show="$vuetify.breakpoint.xsOnly">Reviewer: </strong><span>{{ task.reviewer }}</span></v-col> <v-col cols="6" sm="1"> <v-btn small depressed dark class="body-2" color="blue" @click.native.stop.prevent="dialogAdd = true; currentTask = task.id; taskName = task.name" block >Add To Cycle </v-btn> </v-col> <v-col cols="6" sm="1"> <v-btn small depressed dark class="body-2" color="#68A694" @click.native.stop.prevent="dialogResolve = true; currentTask = task.id; form.effortReal = task.effortReal" block >Resolve </v-btn> </v-col> <v-col cols="6" sm="1"> <v-btn small depressed dark class="body-2" color="#CC0606" @click.native.stop.prevent="dialogDelete = true; currentTask = task.id" block >Delete </v-btn> </v-col> </v-row> </v-card-text> </v-card> </v-col> </v-row> <v-dialog v-model="dialogAdd" max-width="500px" overlay-color="white" > <dialog-cycle v-on:on-cancel="dialogAdd = false" v-on:on-continue="addTask" :loading="loading" :form="form" ref="dialog"> <template v-slot:title>Add <strong> {{ taskName }} </strong> to Cycle Todo</template> </dialog-cycle> </v-dialog> <v-dialog v-model="dialogDelete" max-width="500px" overlay-color="white" > <dialog-alert v-on:on-cancel="dialogDelete = false" v-on:on-continue="deleteTask" :loading="loading"> <template v-slot:title>Delete Task</template> <template v-slot:text> Are you sure? This can't be undone! </template> </dialog-alert> </v-dialog> <v-dialog v-model="dialogResolve" max-width="500px" overlay-color="white" > <dialog-hours v-on:on-cancel="dialogResolve = false" v-on:on-continue="resolveTask" :loading="loading" :form="form"> <template v-slot:title>Resolve Task</template> </dialog-alert> </v-dialog> </v-container> </template> <script> import AppBar from "@/components/AppBar"; import DialogAlert from "@/components/DialogAlert"; import DialogCycle from "@/components/DialogCycle"; import DialogHours from "@/components/DialogHours"; export default { name: "Tasks", components: {DialogAlert, DialogCycle, DialogHours, AppBar}, data: () => ({ backlog: [], currentTask: null, taskName: null, form: { selectedCycle: null, effortReal: null }, dialogAdd: false, dialogDelete: false, dialogResolve: false, loading: false, }), methods: { addTask() { if(this.$refs.dialog.$refs.form.validate()) { this.loading = true this.$http.put('/board/task?move=true', { id: Number(this.currentTask), cycle_id: Number(this.form.selectedCycle), status: 'Todo' }).then(() => { this.backlog = this.backlog.filter(task => task.id !== this.currentTask) this.$snackbar.showMessage({ content: 'Task moved!' }) }).catch(() => { this.$snackbar.showMessage({ content: 'Something went wrong, please try again!', color: 'warning' }) }).finally(() => { this.loading = false this.dialogAdd = false }) } }, deleteTask() { this.loading = true this.$http.put('/board/task', { id: Number(this.currentTask), status: 'Rejected' }).then(() => { this.backlog = this.backlog.filter(task => task.id !== this.currentTask) this.$snackbar.showMessage({ content: 'Task deleted!' }) }).catch(() => { this.$snackbar.showMessage({ content: 'Something went wrong, please try again!', color: 'warning' }) }).finally(() => { this.loading = false this.dialogDelete = false }) }, resolveTask() { this.loading = true this.$http.put('/board/task?reflect=true', { id: Number(this.currentTask), effortReal: this.form.effortReal, status: 'Done' }).then(() => { this.backlog = this.backlog.filter(task => task.id !== this.currentTask) this.$snackbar.showMessage({ content: 'Task resolved!' }) this.$store.dispatch('site/fetchMatrix') }).catch(() => { this.$snackbar.showMessage({ content: 'Something went wrong, please try again!', color: 'warning' }) }).finally(() => { this.loading = false this.dialogResolve = false }) } }, computed: {}, created() { this.$http.get('/board/task?backlog=true').then(res => { this.backlog = res.data.backlog }) }, } </script> <style scoped> </style>