mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 22:39:34 +00:00
[Tasks] WIP
This commit is contained in:
Matej Glasnák committed
1 parent
e34386b179
commit
c69f022423
15 files changed
+335
-307
No files matched your search
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<A-task-filter :unscheduledTime="unscheduledTime" @dataChanged="getTimelineData" />
|
||||
|
||||
<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
|
||||
<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @reopenTask="toggleCompleteTask" />
|
||||
</W-loadable>
|
||||
<A-task-filter v-if="$store.getters['tm/isInitialized']" :unscheduledTime="timelineData?.unscheduledTime || 0" @filter-changed="onFilterChanged" />
|
||||
<Z-timeline v-if="timelineData" :calData="timelineData" :calConfig="config" :splits="splitDays" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ATaskFilter from './_components/a-tasks-filter.vue'
|
||||
import ZTimeline from '@/plugins/tm@dashboard/_components/z-timeline.vue'
|
||||
import { addDays, setHours, setMinutes, setSeconds, differenceInCalendarDays } from 'date-fns'
|
||||
import ATaskFilter from './_components/a-tasks-filter.vue'
|
||||
import ZTimeline from '@/plugins/tm@dashboard/_components/z-timeline.vue'
|
||||
import { addDays, differenceInCalendarDays } from 'date-fns'
|
||||
import { mapGetters } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import timelineUtils from './_utils/timeline.utils'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -21,9 +21,8 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
timelineData: null,
|
||||
splitDays: [],
|
||||
unscheduledTime: 0,
|
||||
filter: null,
|
||||
subtasks: null,
|
||||
config: {
|
||||
date: new Date(),
|
||||
scrollHour: 7,
|
||||
@@ -31,150 +30,82 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters('tm', [
|
||||
'ongoingSubtasks'
|
||||
]),
|
||||
|
||||
splitDays() {
|
||||
const days = []
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
days.push({
|
||||
id: i + 1,
|
||||
name: this.filter.employee.name + " " + this.filter.employee.surname,
|
||||
initials: this.filter.employee.name.charAt(0).toUpperCase() + this.filter.employee.surname.charAt(0).toUpperCase(),
|
||||
unscheduledTime: this.timelineData.unscheduledTime,
|
||||
date: addDays(this.filter.start, i),
|
||||
isWeekend: timelineUtils.isWeekend(addDays(this.filter.start, i))
|
||||
})
|
||||
}
|
||||
|
||||
return days
|
||||
},
|
||||
|
||||
unscheduledTime() {
|
||||
if (!this.subtasks) return 0
|
||||
|
||||
return timelineUtils.getUnscheduledTime(this.subtasks)
|
||||
},
|
||||
|
||||
|
||||
timelineData() {
|
||||
if (!this.subtasks || !this.filter)
|
||||
return null
|
||||
|
||||
return {
|
||||
name: this.filter.employee.name,
|
||||
surname: this.filter.employee.surname,
|
||||
unscheduledTime: this.unscheduledTime,
|
||||
tasks: timelineUtils.generateTimelineTasks(this.subtasks, new Date(this.filter.start), this.filter.employee)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$events.on('on-task-deleted', (task) => {
|
||||
this.deleteTask(task)
|
||||
})
|
||||
|
||||
this.$events.on('on-task-completed', (task) => {
|
||||
this.toggleCompleteTask(task)
|
||||
})
|
||||
|
||||
this.$events.on('on-task-edited', (task) => {
|
||||
this.editTask(task)
|
||||
this.$events.on('on-subtask-edited', (subtask) => {
|
||||
this.subtasks = this.subtasks.map(st => {
|
||||
if (st.id == subtask.id)
|
||||
return subtask
|
||||
|
||||
return st
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getTimelineData(data) {
|
||||
this.config.date = data.firstDay
|
||||
const lastDay = addDays(data.firstDay, 6)
|
||||
async onFilterChanged(filter) {
|
||||
this.filter = filter
|
||||
|
||||
const urlQueryObject = {}
|
||||
|
||||
if (filter.start) urlQueryObject.start = moment(filter.start).format('YYYY-MM-DD')
|
||||
if (filter.end) urlQueryObject.end = moment(filter.end).format('YYYY-MM-DD')
|
||||
if (filter.employee) urlQueryObject.employee_id = filter.employee.id
|
||||
|
||||
const queryParameters = new URLSearchParams(urlQueryObject).toString()
|
||||
|
||||
try {
|
||||
this.timelineData = await this.$axios.get_auth_data('v1/overview/tasks', {firstDay: data.firstDay, lastDay: lastDay, employeeId: data.employeeId})
|
||||
this.formatTimelineDataToTimelineFormat(data.firstDay)
|
||||
this.generateDays(data.firstDay)
|
||||
this.generateNonWorkingHours(data.firstDay)
|
||||
const { subtasks } = await this.$axios.get_auth(`v1/subtasks?${queryParameters}`)
|
||||
this.config.scrollHour = this.filter.employee.work_start - 1
|
||||
this.subtasks = subtasks
|
||||
|
||||
setTimeout(() => console.log(this.timelineData), 1000)
|
||||
} catch (error) {
|
||||
this.timelineData = {error: error || 'Nepodarilo sa nacitat data!'}
|
||||
console.error(error)
|
||||
// console.log(this.$store.getters['auth/user'])
|
||||
this.$toast.error('Nepodarilo sa nacitat data!')
|
||||
}
|
||||
},
|
||||
|
||||
generateDays(date) {
|
||||
this.splitDays = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
this.splitDays.push({
|
||||
id: i + 1,
|
||||
name: this.timelineData.name + " " + this.timelineData.surname,
|
||||
initials: this.timelineData.name.charAt(0).toUpperCase() + this.timelineData.surname.charAt(0).toUpperCase(),
|
||||
unscheduledTime: Math.floor(this.timelineData.unscheduled_times[i].time / 60) + "," + String(this.timelineData.unscheduled_times[i].time % 60)[0],
|
||||
date: addDays(date, i),
|
||||
isWeekend: this.isWeekend(addDays(date, i))
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
isWeekend(date) {
|
||||
if (date.getDay() == 6 || date.getDay() == 0) return true
|
||||
return false
|
||||
},
|
||||
|
||||
formatTimelineDataToTimelineFormat(date) {
|
||||
// format events
|
||||
this.timelineData.tasks.forEach(event => {
|
||||
event.name = this.timelineData.name
|
||||
event.surname = this.timelineData.surname
|
||||
|
||||
// convert all dates to one to show in day-splits
|
||||
const startDate = new Date(event.starts_at)
|
||||
const endDate = new Date(event.ends_at)
|
||||
const diffInDays = differenceInCalendarDays(date, startDate)
|
||||
|
||||
event.start = addDays(startDate, diffInDays)
|
||||
event.end = addDays(endDate, diffInDays)
|
||||
event.split = diffInDays * (-1) + 1
|
||||
})
|
||||
|
||||
// console.log(this.timelineData.tasks)
|
||||
|
||||
this.unscheduledTime = 0
|
||||
|
||||
this.timelineData.unscheduled_times.forEach(time => {
|
||||
time.name = this.timelineData.name
|
||||
time.surname = this.timelineData.surname
|
||||
this.unscheduledTime += time.time
|
||||
})
|
||||
|
||||
this.unscheduledTime = Math.floor(this.unscheduledTime / 60) + "," + String(this.unscheduledTime % 60)[0] + " h"
|
||||
|
||||
this.config.scrollHour = Number(this.timelineData.work_hours_from.split(':')[0]) - 1
|
||||
},
|
||||
|
||||
generateNonWorkingHours(date) {
|
||||
const nonWorkingHours = []
|
||||
const start1 = { hour: 0, minutes: 0, seconds: 0}
|
||||
const end1 = { hour: Number(this.timelineData.work_hours_from.split(':')[0]), minutes: Number(this.timelineData.work_hours_from.split(':')[1]) - 1, seconds: 0 }
|
||||
const start2 = { hour: Number(this.timelineData.work_hours_to.split(':')[0]), minutes: Number(this.timelineData.work_hours_to.split(':')[1]) + 1, seconds: 0 }
|
||||
const end2 = { hour: 23, minutes: 59, seconds: 59}
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
nonWorkingHours.push({
|
||||
title: "Non working hours",
|
||||
start: setSeconds(setMinutes(setHours(date, start1.hour), start1.minutes), start1.seconds),
|
||||
end: setSeconds(setMinutes(setHours(date, end1.hour), end1.minutes), end1.seconds),
|
||||
nonWorking: true,
|
||||
split: i + 1,
|
||||
draggable: false
|
||||
})
|
||||
nonWorkingHours.push({
|
||||
title: "Non working hours",
|
||||
start: setSeconds(setMinutes(setHours(date, start2.hour), start2.minutes), start2.seconds),
|
||||
end: setSeconds(setMinutes(setHours(date, end2.hour), end2.minutes), end2.seconds),
|
||||
nonWorking: true,
|
||||
split: i + 1,
|
||||
draggable: false
|
||||
})
|
||||
}
|
||||
|
||||
this.timelineData.tasks.push(...nonWorkingHours)
|
||||
},
|
||||
|
||||
async onEventMoved(event) {
|
||||
// console.log("drag", event)
|
||||
const task = this.timelineData.tasks.find(task => task.id == event.event.id)
|
||||
|
||||
try {
|
||||
const newStartDate = addDays(event.event.start, differenceInCalendarDays(this.splitDays.filter((split) => {return split.id == event.newSplit})[0].date, event.event.start))
|
||||
const newEndDate = addDays(event.event.end, differenceInCalendarDays( newStartDate, event.event.start))
|
||||
|
||||
// await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: newStartDate, end: newEndDate})
|
||||
task.start = newStartDate
|
||||
task.end = newEndDate
|
||||
task.split = event.newSplit
|
||||
} catch(error) {
|
||||
this.$toast.error(error)
|
||||
|
||||
task.start = new Date(event.originalEvent.start)
|
||||
task.end = new Date(event.originalEvent.end)
|
||||
task.split = event.oldSplit
|
||||
}
|
||||
},
|
||||
|
||||
deleteTask(task) {
|
||||
const id = task.id
|
||||
this.timelineData.tasks.splice(this.timelineData.tasks.findIndex(item => item.id === id), 1)
|
||||
},
|
||||
|
||||
toggleCompleteTask(task) {
|
||||
const taskInTasks = this.timelineData.tasks.find(e => e.id == task.id)
|
||||
taskInTasks.completed = !taskInTasks.completed
|
||||
},
|
||||
|
||||
editTask(task) {
|
||||
const taskIndex = this.timelineData.tasks.findIndex(item => item.id === task.id)
|
||||
this.timelineData.tasks[taskIndex] = task
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in new issue
Block a user