Skip to content

Commit b82d8e0

Browse files
vycodervycoder
authored
Merge pull request #8 from vycoder/feature/desktop/active-task-indicator-on-projects-page
🛠️ Active Task Indicator on Desktop Projects
2 parents 6ac1a52 + b9e41ac commit b82d8e0

File tree

7 files changed

+121
-80
lines changed

7 files changed

+121
-80
lines changed

‎src/components/projects/ProjectDetails.vue

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,12 @@
6464
<div class="row q-gutter-x-xs">
6565
<q-btn
6666
@click.stop="showEditTaskDialog(task)"
67-
size="xs"
68-
unelevated round
69-
icon="edit" color="blue"
70-
/>
67+
unelevated round flat
68+
icon="edit" color="blue" size="sm" />
7169
<q-btn
7270
@click.stop="deleteTask(task)"
73-
size="xs"
74-
unelevated round
75-
icon="delete" color="negative" />
71+
unelevated round flat
72+
icon="delete" color="negative" size="sm" />
7673
</div>
7774
</template>
7875
</task-list>

‎src/components/projects/project-details.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ export default {
33
return {
44
selectedFilter: 'all',
55
filters: [
6-
{ label: 'All', value: 'all' },
76
{ label: 'Ongoing', value: 'ongoing' },
7+
{ label: 'To do', value: 'todo' },
88
{ label: 'Completed', value: 'completed' },
9-
{ label: 'To do', value: 'todo' }
9+
{ label: 'All', value: 'all' }
1010
]
1111
}
1212
},

‎src/components/tasks/ActiveTask.vue

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<section v-if="task">
3+
<transition
4+
v-if="task"
5+
appear mode="out-in"
6+
enter-active-class="animated fadeInDown"
7+
leave-active-class="animated fadeOutUp">
8+
<task-item
9+
:value="task"
10+
inner-item-classes="q-pa-md q-px-lg"
11+
@click="$emit('click', task)">
12+
<template v-slot:actions>
13+
<div class="row q-gutter-x-xs">
14+
<q-btn
15+
@click.stop="$emit('complete', task)"
16+
round unelevated
17+
color="positive"
18+
icon="done"
19+
size="xs"/>
20+
<q-btn
21+
@click.stop="$emit('close', task)"
22+
round unelevated
23+
color="red-4"
24+
icon="close"
25+
size="xs"/>
26+
</div>
27+
</template>
28+
</task-item>
29+
</transition>
30+
</section>
31+
</template>
32+
<script>
33+
import TaskItem from 'components/tasks/TaskItem'
34+
35+
export default {
36+
name: 'ActiveTask',
37+
components: { TaskItem },
38+
props: {
39+
task: { type: Object }
40+
}
41+
}
42+
</script>

‎src/pages/desktop/Projects.vue

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,24 +59,38 @@
5959
@edit="showEditProjectDialog"
6060
class="absolute-center"
6161
/>
62+
<div class="absolute-bottom-right q-ma-lg z-top" style="width: 50%">
63+
<active-task
64+
:task="activeTask"
65+
@click="showTaskDetailsDialog(activeTask)"
66+
@complete="markComplete(activeTask)"
67+
@close="clearActiveTask()"
68+
/>
69+
</div>
6270
</q-page>
6371
</q-split-layout>
6472
</template>
6573
<script>
6674
import UseProjects from 'pages/mixin-projects'
75+
import UseTaskActions from 'pages/mixin-task-actions'
6776
6877
import OpusFab from 'lib/commons/OpusFab'
6978
import OpusImgCaption from 'lib/commons/OpusImgCaption'
7079
7180
import ProjectItem from 'components/projects/ProjectItem'
7281
import ProjectDetails from 'components/projects/ProjectDetails'
82+
import ActiveTask from 'components/tasks/ActiveTask'
7383
7484
export default {
7585
name: 'Projects',
76-
mixins: [UseProjects],
86+
mixins: [
87+
UseProjects,
88+
UseTaskActions
89+
],
7790
components: {
7891
ProjectItem,
7992
ProjectDetails,
93+
ActiveTask,
8094
OpusFab,
8195
OpusImgCaption
8296
},

‎src/pages/desktop/Tasks.vue

Lines changed: 8 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -49,33 +49,12 @@
4949
<pomodoro />
5050
</div>
5151
<div class="absolute-bottom-right q-ma-lg" style="width: 50%">
52-
<transition
53-
v-if="activeTask"
54-
appear mode="out-in"
55-
enter-active-class="animated fadeInDown"
56-
leave-active-class="animated fadeOutUp">
57-
<task-item
58-
:value="activeTask"
59-
inner-item-classes="q-pa-md q-px-lg"
60-
@click="showTaskDetailsDialog(activeTask)">
61-
<template v-slot:actions>
62-
<div class="row q-gutter-x-xs">
63-
<q-btn
64-
@click.stop="markComplete(activeTask)"
65-
round unelevated
66-
color="positive"
67-
icon="done"
68-
size="xs"/>
69-
<q-btn
70-
@click.stop="clearActiveTask()"
71-
round unelevated
72-
color="red-4"
73-
icon="close"
74-
size="xs"/>
75-
</div>
76-
</template>
77-
</task-item>
78-
</transition>
52+
<active-task
53+
:task="activeTask"
54+
@click="showTaskDetailsDialog(activeTask)"
55+
@complete="markComplete(activeTask)"
56+
@close="clearActiveTask()"
57+
/>
7958
</div>
8059
</q-page>
8160
</q-split-layout>
@@ -88,16 +67,16 @@ import OpusBtnDropdownSelect from 'lib/commons/OpusBtnDropdownSelect'
8867
import OpusImgCaption from 'lib/commons/OpusImgCaption'
8968
import OpusMoreActionsBtn from 'lib/commons/OpusMoreActionsMenuBtn'
9069
91-
import TaskItem from 'components/tasks/TaskItem'
9270
import TaskList from 'components/tasks/TaskList'
71+
import ActiveTask from 'components/tasks/ActiveTask'
9372
import Pomodoro from 'lib/commons/Pomodoro'
9473
9574
export default {
9675
name: 'TasksPage',
9776
mixins: [UseTasks],
9877
components: {
9978
TaskList,
100-
TaskItem,
79+
ActiveTask,
10180
Pomodoro,
10281
OpusFab,
10382
OpusImgCaption,

‎src/pages/mixin-task-actions.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import Utils from 'lib/utils'
2+
import { RootEvents } from 'lib/constants'
3+
4+
import { mapGetters } from 'vuex'
5+
6+
export default {
7+
computed: { ...mapGetters('tasks', ['activeTask']) },
8+
methods: {
9+
async startTask (task, reset = () => {}) {
10+
if (this.activeTask) {
11+
await this.$o.pomodoro.updateActiveTask()
12+
this.$root.$emit(RootEvents.TaskProgressUpdated, { ...this.activeTask })
13+
}
14+
this.$store.commit('tasks/setActiveTask', task)
15+
this.$store.commit('pomodoro/clear')
16+
this.$o.pomodoro.start()
17+
reset()
18+
await this.$nextTick()
19+
Utils.scrollTo('active-task')
20+
},
21+
async clearActiveTask (reset = () => {}) {
22+
await this.$o.pomodoro.updateActiveTask()
23+
this.$root.$emit(RootEvents.TaskProgressUpdated, { ...this.activeTask })
24+
this.$store.commit('tasks/clearActiveTask')
25+
this.$store.commit('pomodoro/clear')
26+
reset()
27+
},
28+
async markComplete (task, reset = () => {}) {
29+
reset()
30+
if (this.activeTask && this.activeTask.id === task.id) {
31+
await this.clearActiveTask()
32+
}
33+
return this.$store.dispatch('tasks/updateTask', {
34+
id: task.id,
35+
update: { completed: true }
36+
})
37+
},
38+
markUnComplete (task) {
39+
return this.$store.dispatch('tasks/updateTask', {
40+
id: task.id,
41+
update: { completed: false }
42+
})
43+
}
44+
}
45+
}

‎src/pages/mixin-tasks.js

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import Utils from 'lib/utils'
2-
import { RootEvents } from 'lib/constants'
3-
41
import UseTasksDialogs from './mixin-tasks-dialogs'
2+
import UseTaskActions from './mixin-task-actions'
53

64
import { mapGetters } from 'vuex'
75

86
export default {
9-
mixins: [UseTasksDialogs],
7+
mixins: [
8+
UseTasksDialogs,
9+
UseTaskActions
10+
],
1011
data () {
1112
return {
1213
selectedFilter: '',
@@ -78,42 +79,5 @@ export default {
7879
...generics
7980
]
8081
}
81-
},
82-
methods: {
83-
async startTask (task, reset = () => {}) {
84-
if (this.activeTask) {
85-
await this.$o.pomodoro.updateActiveTask()
86-
this.$root.$emit(RootEvents.TaskProgressUpdated, { ...this.activeTask })
87-
}
88-
this.$store.commit('tasks/setActiveTask', task)
89-
this.$store.commit('pomodoro/clear')
90-
this.$o.pomodoro.start()
91-
reset()
92-
await this.$nextTick()
93-
Utils.scrollTo('active-task')
94-
},
95-
async clearActiveTask (reset = () => {}) {
96-
await this.$o.pomodoro.updateActiveTask()
97-
this.$root.$emit(RootEvents.TaskProgressUpdated, { ...this.activeTask })
98-
this.$store.commit('tasks/clearActiveTask')
99-
this.$store.commit('pomodoro/clear')
100-
reset()
101-
},
102-
async markComplete (task, reset = () => {}) {
103-
reset()
104-
if (this.activeTask && this.activeTask.id === task.id) {
105-
await this.clearActiveTask()
106-
}
107-
return this.$store.dispatch('tasks/updateTask', {
108-
id: task.id,
109-
update: { completed: true }
110-
})
111-
},
112-
markUnComplete (task) {
113-
return this.$store.dispatch('tasks/updateTask', {
114-
id: task.id,
115-
update: { completed: false }
116-
})
117-
}
11882
}
11983
}

0 commit comments

Comments
 (0)