-
- ![]()
- ![]()
+
-
{
- event.start = new Date(event.starts_at)
- event.end = new Date(event.ends_at)
event.name = this.timelineData.name
event.surname = this.timelineData.surname
- delete event.starts_at
- delete event.ends_at
+
+ // 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
})
this.timelineData.unscheduled_times.forEach(time => {
@@ -72,15 +95,46 @@ export default {
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)
+ },
+
triggerToast(message) {
this.errorToastMessage = message
this.errorToast = true
},
async onEventMoved(event) {
- console.log(`ID from dragStop: ${event.event.id}`)
+ console.log("drag", event)
// try {
- // await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: event.event.start, end: event.event.end})
+ // 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})
// } catch(error) {
// this.triggerToast("Nepodarilo sa presunut ulohu!")
// this.timelineData.tasks.filter(e => {
@@ -90,6 +144,18 @@ export default {
// }
// })
// }
+ },
+
+ completeTask(id) {
+ this.timelineData.tasks.filter(task => {
+ if (task.id == id) {
+ task.completed = true
+ }
+ })
+ },
+
+ deleteTask(id) {
+ this.timelineData.tasks.splice(this.timelineData.tasks.findIndex(item => item.id === id), 1)
}
}
}
diff --git a/app/src/plugins/tm@dashboard/teams/teams.vue b/app/src/plugins/tm@dashboard/teams/teams.vue
index 7b768ed..bc2dbd7 100644
--- a/app/src/plugins/tm@dashboard/teams/teams.vue
+++ b/app/src/plugins/tm@dashboard/teams/teams.vue
@@ -3,12 +3,12 @@
-
-
@@ -21,6 +21,8 @@
import ATeamFilter from './_components/a-team-filter.vue'
import ZTimeline from '../tasks/_components/z-timeline.vue'
+import { setHours, setMinutes, setSeconds } from 'date-fns'
+
export default {
components: {
ATeamFilter,
@@ -29,7 +31,119 @@ export default {
data() {
return {
- timelineData: {kokot: "kokot"}
+ timelineData: null,
+ formatedTasks: {tasks: []},
+ errorToast: false,
+ errorToastMessage: "Nepodarilo sa nacitat data!",
+ dataLoaded: false,
+ splitDays: [],
+ config: {
+ date: new Date(),
+ scrollHour: 7,
+ }
+ }
+ },
+
+ methods: {
+ async getDayData(date) {
+ this.config.date = date
+ try {
+ this.timelineData = await this.$axios.get_auth_data('v1/overview/teams')
+ this.generateSplits()
+ this.formatData()
+ this.generateNonWorkingHours(date)
+ } catch(error) {
+ this.timelineData = {}
+ console.error(error)
+ this.triggerToast("Nepodarilo sa nacitat data!")
+ }
+ },
+
+ generateSplits() {
+ this.splitDays = []
+ for (let i = 0; i < this.timelineData.length; i++) {
+ this.timelineData[i].splitId = i + 1
+ this.splitDays.push({
+ id: i + 1,
+ firstName: this.timelineData[i].name,
+ name: this.timelineData[i].name + " " + this.timelineData[i].surname,
+ initials: this.timelineData[i].name.charAt(0).toUpperCase() + this.timelineData[i].surname.charAt(0).toUpperCase(),
+ unscheduledTime: Math.floor(this.timelineData[i].unscheduled_time / 60) + "," + String(this.timelineData[i].unscheduled_time % 60)[0]
+ })
+ }
+ },
+
+ formatData() {
+ this.timelineData.tasks = []
+
+ // format events
+ this.timelineData.forEach(user => {
+ user.tasks.forEach(event => {
+ event.name = user.name
+ event.surname = user.surname
+
+ event.start = new Date(event.starts_at)
+ event.end = new Date(event.ends_at)
+ event.split = user.splitId
+ })
+ this.timelineData.tasks.push(...user.tasks)
+ })
+ },
+
+ generateNonWorkingHours(date) {
+ let nonWorkingHours = []
+ let workStartHour = 23
+
+ this.timelineData.forEach(user => {
+ const start1 = { hour: 0, minutes: 0, seconds: 0}
+ const end1 = { hour: Number(user.work_hours_from.split(':')[0]), minutes: Number(user.work_hours_from.split(':')[1]) - 1, seconds: 0 }
+ const start2 = { hour: Number(user.work_hours_to.split(':')[0]), minutes: Number(user.work_hours_to.split(':')[1]) + 1, seconds: 0 }
+ const end2 = { hour: 23, minutes: 59, seconds: 59}
+
+ if (workStartHour > Number(user.work_hours_from.split(':')[0])) workStartHour = Number(user.work_hours_from.split(':')[0])
+
+ 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: user.splitId,
+ 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: user.splitId,
+ draggable: false
+ })
+ })
+
+ this.config.scrollHour = workStartHour - 1
+ this.timelineData.tasks.push(...nonWorkingHours)
+ },
+
+ triggerToast(message) {
+ this.errorToastMessage = message
+ this.errorToast = true
+ },
+
+ async onEventMoved(event) {
+ console.log("drag", event)
+ // 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})
+ // } catch(error) {
+ // this.triggerToast("Nepodarilo sa presunut ulohu!")
+ // this.timelineData.tasks.filter(e => {
+ // if (e.id == event.event.id) {
+ // e.start = new Date(event.originalEvent.start)
+ // e.end = new Date(event.originalEvent.end)
+ // }
+ // })
+ // }
}
}
}
@@ -44,4 +158,5 @@ export default {
@media (max-width: 1312px)
.w-loadable
height: calc( 100% - 202px )
+
\ No newline at end of file
diff --git a/app/src/plugins/tm@modal/task/z-complete-task-modal.vue b/app/src/plugins/tm@modal/task/z-complete-task-modal.vue
index e78d170..f6438d1 100644
--- a/app/src/plugins/tm@modal/task/z-complete-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-complete-task-modal.vue
@@ -44,6 +44,7 @@ export default {
await this.$axios.post(`v1/tasks/${task.id}`, task)
this.show = false
+ this.$emit('completeTask', task.id)
} catch (error) {
this.$toast.error(error)
}
diff --git a/app/src/plugins/tm@modal/task/z-delete-task-modal.vue b/app/src/plugins/tm@modal/task/z-delete-task-modal.vue
index 116b1f3..5c4fea0 100644
--- a/app/src/plugins/tm@modal/task/z-delete-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-delete-task-modal.vue
@@ -39,6 +39,7 @@ export default {
try {
await this.$axios.delete(`v1/tasks/${this.task.id}`)
this.show = false
+ this.$emit('deleteTask', this.task.id)
} catch (error) {
this.$toast.error(error)
}
{{ getHeadingDate(heading.date) }}
+ +{{ getHeadingDate(split.date) }}
+ + +{{ split.firstName }}
-
+
@@ -47,7 +53,7 @@
-
-
{{heading.initials}}
+{{split.initials}}
-
{{heading.name}}
-{{heading.unscheduledTime}} h
+{{split.name}}
+{{split.unscheduledTime}} h
+
-
@@ -100,6 +113,13 @@ export default {
default() {
return {date: new Date(), scrollHour: 7}
}
+ },
+ splits: {
+ type: Array,
+ required: false,
+ default() {
+ return []
+ }
}
},
@@ -122,17 +142,13 @@ export default {
},
mounted() {
- this._scrollToDefaultTime()
+ // console.log(this.calData.tasks)
},
methods: {
weekChanged() {
const scrollContainer = document.getElementsByClassName('vuecal__scrollable-body')[0]
scrollContainer.scrollLeft = 0
-
- this.$nextTick(() => {
- this.scrollToYesterday()
- })
},
async eventMoved(e) {
@@ -141,20 +157,12 @@ export default {
},
onReady() {
- this.scrollToYesterday()
this.correctMargins()
},
- scrollToYesterday() {
- if (!document.getElementsByClassName('yesterday-cell').length || !document.getElementsByClassName('today-cell').length) return
-
- const scrollContainer = document.getElementsByClassName('vuecal__scrollable-body')[0]
- const yesterdayCell = document.getElementsByClassName('yesterday-cell')[0]
- scrollContainer.scrollLeft = yesterdayCell.offsetLeft - scrollContainer.offsetLeft - 20
- },
-
correctMargins() {
- const heightOfDayHeader = document.getElementsByClassName('vuecal__heading')[0].clientHeight
+ if (!document.getElementsByClassName('vuecal__split-days-headers').length) return
+ const heightOfDayHeader = document.getElementsByClassName('vuecal__split-days-headers')[0].clientHeight
document.getElementsByClassName('vuecal__time-column')[0].style.marginTop = `${heightOfDayHeader}px`
document.getElementsByClassName('vuecal__cells-body')[0].style.marginTop = `${heightOfDayHeader}px`
},
@@ -182,6 +190,7 @@ export default {
},
taskClicked(task) {
+ if (task.nonWorking) return
console.log("task", task)
if (task.end.getTime() - task.start.getTime() <= 3600000) {
console.log("ShortTask")
@@ -190,22 +199,19 @@ export default {
eventFocused(event) {
this.focusedEventId = event.task_id
- console.log(`Focused: ${event.task_id}`)
+ // console.log(`Focused: ${event.task_id}`)
},
- _scrollToDefaultTime() {
- const calendarContainer = document.querySelector('.main-content')
- const defaultTimeToScrollTo = document.querySelectorAll('.vuecal__time-cell')[7]
- const toolbarHeight = document.querySelector('.v-toolbar').getBoundingClientRect().height
- const subheaderHeight = document.querySelector('.subheader').getBoundingClientRect().height
-
- calendarContainer.scrollTo({
- top: defaultTimeToScrollTo.getBoundingClientRect().top - toolbarHeight - subheaderHeight
- })
+ completeTask(id) {
+ this.$emit('completeTask', id)
},
editTask(subTask, editMode) {
this.$refs['z-sub-task-modal'].create(subTask, editMode)
+ },
+
+ deleteTask(id) {
+ this.$emit('deleteTask', id)
}
}
}
@@ -218,7 +224,7 @@ export default {
.calendar-wrapper
width: 100%
height: 100%
- // padding-top: 50px
+ // padding: 0 20px 0 0
&:deep()
.vuecal__cells
@@ -227,7 +233,6 @@ export default {
&::-webkit-scrollbar
display: none
- &.week-view
border-left: 1px solid rgba(0, 0, 0, .1)
padding-left: 20px
@@ -255,21 +260,27 @@ export default {
// HEADING
- .vuecal__weekdays-headings,
+ // .vuecal__weekdays-headings,
.vuecal__cell:before
border: none
.vuecal__scrollable-body
position: relative
- .vuecal__weekdays-headings
+ // .vuecal__weekdays-headings
+ .vuecal__split-days-headers
position: absolute
top: 0
left: 20px
z-index: 999
background: white
+ padding-bottom: 15px
+ width: calc( 100% - 20px )
- .vuecal__heading
+ .vuecal__cell-split
+ margin-right: 20px
+
+ .day-split-header
height: fit-content
min-height: 100%
padding-right: 20px
@@ -311,8 +322,8 @@ export default {
.vuecal__now-line
display: none !important
- .vuecal__cell
- padding: 10px 20px 10px 0px
+ // .vuecal__cell
+ // padding: 10px 20px 10px 0px
.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
.vuecal__cell--current:not(.vuecal__cell--today),
@@ -322,6 +333,7 @@ export default {
background-color: white
// EVENT
+
.vuecal__event
border-radius: 16px
padding: 20px 10px
@@ -330,6 +342,13 @@ export default {
min-height: 40px
transition: min-height .4s, height .4s, box-shadow .4s, width .4s, left .4s
+ // &:has(.completed)
+ // filter: grayscale(.9) !important
+
+ &:has(.non-working-event)
+ background: repeating-linear-gradient(135deg, rgba(215, 215, 215, 1), rgba(215, 215, 215, 1) 1px, rgba(224, 224, 224, 1) 1px, rgba(224, 224, 224, 1) 20px)
+ border: 1px solid rgba(215, 215, 215, 1)
+
&.vuecal__event--focus
z-index: 100 !important
min-height: 250px !important
@@ -432,6 +451,9 @@ export default {
min-width: fit-content
width: fit-content
+ &.completed
+ background: #00B3A6
+
img
width: 18px
diff --git a/app/src/plugins/tm@dashboard/tasks/tasks.vue b/app/src/plugins/tm@dashboard/tasks/tasks.vue
index 2421b3f..5199dfa 100644
--- a/app/src/plugins/tm@dashboard/tasks/tasks.vue
+++ b/app/src/plugins/tm@dashboard/tasks/tasks.vue
@@ -3,7 +3,7 @@
{{ event.project_code }}
{{ event.title }}
@@ -55,22 +61,29 @@
{{ getUserInitials(event) }}
- {{ event.start.toLocaleDateString('sk-SK') }}
+ {{ new Date(event.starts_at).toLocaleDateString('sk-SK') }}
- ![]()
+
+
+ ![]()
![]()
![]()
+
+
+