mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-22 06:49:35 +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
@@ -3,7 +3,7 @@
|
||||
<v-select
|
||||
v-model="selectedEmployee"
|
||||
class="subheader-input"
|
||||
:items="[null, ...employees]"
|
||||
:items="enrichedEmployees"
|
||||
item-title="_fullName"
|
||||
item-value="id"
|
||||
label="Zamestnanec"
|
||||
@@ -23,8 +23,9 @@
|
||||
<v-text-field
|
||||
class="subheader-input disabled"
|
||||
label="Nenaplánované hodiny"
|
||||
v-model="time"
|
||||
variant="outlined"
|
||||
:disabled="true"
|
||||
v-model="time"
|
||||
></v-text-field>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -34,76 +35,74 @@ import { addDays, subDays } from 'date-fns'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
emits: ['filter-changed'],
|
||||
|
||||
props: {
|
||||
unscheduledTime: {
|
||||
type: String,
|
||||
default() {
|
||||
return '0'
|
||||
}
|
||||
type: Number,
|
||||
default: () => 0
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
employees: [],
|
||||
selectedDate: "",
|
||||
|
||||
selectedEmployee: '',
|
||||
date: new Date()
|
||||
date: new Date(),
|
||||
selectedEmployee: null,
|
||||
selectedDate: null,
|
||||
time: null,
|
||||
filter: {
|
||||
start: null,
|
||||
end: null,
|
||||
employee: null
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters('auth', ['user']),
|
||||
|
||||
time() {
|
||||
return this.unscheduledTime
|
||||
}
|
||||
...mapGetters('tm', ['enrichedEmployees']),
|
||||
},
|
||||
|
||||
created() {
|
||||
this._getData()
|
||||
mounted() {
|
||||
this.selectedEmployee = this.user.id
|
||||
// this.time = this.unscheduledTime
|
||||
this.$nextTick(() => this._updateFilters())
|
||||
},
|
||||
|
||||
methods: {
|
||||
async _getData() {
|
||||
await this._getEmployees()
|
||||
this._getWeek(false)
|
||||
this.$nextTick(() => {
|
||||
this.$emit('dataChanged', {firstDay: this.firstDay, employeeId: this.selectedEmployee})
|
||||
})
|
||||
},
|
||||
|
||||
async _getEmployees() {
|
||||
this.employees = await this.$axios.get_auth_data('v1/employees')
|
||||
this.employees.forEach(employee => {
|
||||
employee._fullName = `${employee.name} ${employee.surname}`
|
||||
if (employee.id == this.user.id) this.selectedEmployee = employee
|
||||
})
|
||||
},
|
||||
|
||||
_getWeek(emitDataChanged = true) {
|
||||
this.firstDay = subDays(this.date, 1)
|
||||
this.lastDay = addDays(this.date, 5)
|
||||
|
||||
this.selectedDate = String(this.firstDay.toLocaleDateString('sk-SK') + ' - ' + this.lastDay.toLocaleDateString('sk-SK'))
|
||||
if (emitDataChanged) this.$emit('dataChanged', {firstDay: this.firstDay, employeeId: this.selectedEmployee})
|
||||
},
|
||||
|
||||
prevWeek() {
|
||||
this.date = subDays(this.date, 7)
|
||||
this._getWeek()
|
||||
this._updateFilters()
|
||||
},
|
||||
|
||||
nextWeek() {
|
||||
this.date = addDays(this.date, 7)
|
||||
this._getWeek()
|
||||
this._updateFilters()
|
||||
},
|
||||
|
||||
_updateFilters() {
|
||||
this.filter.start = subDays(this.date, 1)
|
||||
this.filter.end = addDays(this.date, 5)
|
||||
this.selectedDate = String(this.filter.start?.toLocaleDateString('sk-SK') + ' - ' + this.filter.end?.toLocaleDateString('sk-SK'))
|
||||
|
||||
this._emitFilterChanged()
|
||||
},
|
||||
|
||||
_emitFilterChanged() {
|
||||
if (!this.filter.start || !this.filter.end || !this.filter.employee) return
|
||||
|
||||
this.$emit('filter-changed', this.filter)
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectedEmployee() {
|
||||
this.$emit('dataChanged', {firstDay: this.firstDay, employeeId: this.selectedEmployee})
|
||||
selectedEmployee(id) {
|
||||
this.filter.employee = this.enrichedEmployees.find(employee => employee.id == id)
|
||||
this._emitFilterChanged()
|
||||
},
|
||||
|
||||
unscheduledTime() {
|
||||
this.time = this.unscheduledTime
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
import { setHours, setMinutes, addDays, differenceInCalendarDays } from 'date-fns'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
generateTimelineTasks(subtasks, date, employee) {
|
||||
return [
|
||||
...this.generateTimelineEvents(subtasks, employee, date),
|
||||
...this.generateTimelineNonWorkingHours(date, employee)
|
||||
]
|
||||
},
|
||||
|
||||
getUnscheduledTime(subtasks) {
|
||||
let unscheduledTime = 0
|
||||
subtasks.forEach(subtask => unscheduledTime += (subtask.duration - subtask.spent_time))
|
||||
|
||||
return unscheduledTime
|
||||
},
|
||||
|
||||
isWeekend(date) {
|
||||
return moment(date).day() % 6 == 0
|
||||
},
|
||||
|
||||
generateTimelineEvents(subtasks, employee, date) {
|
||||
const events = []
|
||||
|
||||
subtasks.forEach(subtask => {
|
||||
subtask.timeblocks?.forEach((timeblock) => {
|
||||
events.push(this._composeTimelineEvent(subtask, employee, date, timeblock))
|
||||
})
|
||||
})
|
||||
|
||||
return events
|
||||
},
|
||||
|
||||
_composeTimelineEvent(subtask, employee, date, timeblock) {
|
||||
const diffInDays = differenceInCalendarDays(date, new Date(timeblock.start))
|
||||
|
||||
return {
|
||||
id: subtask.id,
|
||||
start: addDays(new Date(timeblock.start), diffInDays),
|
||||
end: addDays(new Date(timeblock.end), diffInDays),
|
||||
master_task: subtask.master_task,
|
||||
name: employee.name,
|
||||
surname: employee.surname,
|
||||
date: new Date(timeblock.start),
|
||||
isWeekend: this.isWeekend(timeblock.start),
|
||||
initials: employee.name.charAt(0).toUpperCase() + employee.surname.charAt(0).toUpperCase(),
|
||||
split: this._getSplitFromDate(date, timeblock.start),
|
||||
project_code: subtask.project_code,
|
||||
subtask: subtask,
|
||||
_timeblock_id: timeblock.id
|
||||
}
|
||||
},
|
||||
|
||||
generateTimelineNonWorkingHours(date, employee) {
|
||||
const nonWorkingHours = []
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
nonWorkingHours.push({
|
||||
title: "Non working hours",
|
||||
start: setMinutes(setHours(date, 0), 59),
|
||||
end: setMinutes(setHours(date, employee.work_start), 0),
|
||||
nonWorking: true,
|
||||
split: i + 1,
|
||||
draggable: false
|
||||
})
|
||||
|
||||
nonWorkingHours.push({
|
||||
title: "Non working hours",
|
||||
start: setMinutes(setHours(date, employee.work_end), 0),
|
||||
end: setMinutes(setHours(date, 23), 59),
|
||||
nonWorking: true,
|
||||
split: i + 1,
|
||||
draggable: false
|
||||
})
|
||||
}
|
||||
|
||||
return nonWorkingHours
|
||||
},
|
||||
|
||||
_getSplitFromDate(date, start) {
|
||||
return differenceInCalendarDays(new Date(date), new Date(start)) * (-1) + 1
|
||||
}
|
||||
}
|
||||
@@ -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