JandL_gitea/jandl-taskmanager-app
1
0 Fork 0
mirror of https://bitbucket.org/studiotem/jandl-taskmanager-app.git synced 2026-10-22 06:49:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://bitbucket.org/studiotem/jandl-taskmanager-app

Browse Source
This commit is contained in:
romankko2 committed 2023-01-11 12:17:56 +01:00
2 parents 258b13c92a b04ddd219d
commit 8d49ad7122
10 files changed
+476 -168
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue
+71 -49
View File
@@ -3,7 +3,8 @@
<Vue-cal
:hide-view-selector="true"
:hide-title-bar="true"
:disable-views="['years', 'year', 'month', 'day']"
:disable-views="['years', 'year', 'month', 'week']"
active-view="day"
:selected-date="calConfig.date"
:onEventClick="taskClicked"
:editable-events="vueCalConfig.editing"
@@ -12,28 +13,33 @@
:overlaps-per-time-step="false"
:showTimeInCells="false"
:time-cell-height="timeCellHeight"
:snap-to-time="8 * 60"
:snap-to-time="15"
:scroll-to-hour="calConfig.scrollHour"
:min-cell-width="300"
:split-days="splits"
:sticky-split-labels="true"
:min-split-width="300"
@ready="onReady()"
@view-change="weekChanged"
@event-drop="eventMoved"
@event-focus="eventFocused"
>
<template v-slot:weekday-heading="{ heading }">
<template v-slot:split-label="{ split }">
<div class="w-100 h-100 d-flex flex-column">
<span class="d-flex align-center">
<img v-if="getHeadingDate(heading.date) == 'Dnes'" :src="require('./_img/home-icon.svg')" class="mr-2">
<p>{{ getHeadingDate(heading.date) }}</p>
<span v-if="split.date" class="d-flex align-center">
<img v-if="getHeadingDate(split.date) == 'Dnes'" :src="require('./_img/home-icon.svg')" class="mr-2">
<p class="weekday-label">{{ getHeadingDate(split.date) }}</p>
</span>
<span v-else class="d-flex align-center">
<p class="weekday-label">{{ split.firstName }}</p>
</span>
<div v-if="heading.unscheduledTime && heading.initials" class="unscheduled-time d-flex align-center text-left">
<div v-if="split.unscheduledTime && split.initials" class="unscheduled-time d-flex align-center text-left">
<div class="unscheduled-time-initials d-flex align-center justify-center me-4">
<p>{{heading.initials}}</p>
<p>{{split.initials}}</p>
</div>
<div>
<p class="mb-0 mt-0 unscheduled-time-name">{{heading.name}}</p>
<h1 class="mb-0 mt-0">{{heading.unscheduledTime}} h</h1>
<p class="mb-0 mt-0 unscheduled-time-name">{{split.name}}</p>
<h1 class="mb-0 mt-0">{{split.unscheduledTime}} h</h1>
</div>
</div>
</div>
@@ -47,7 +53,7 @@
</template>
<template v-slot:event="{ event }">
<div @click.stop="editTask(event.id)" class="event-wrapper w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}">
<div v-if="!event.nonWorking" @click.stop="editTask(event.id)" class="w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}">
<div class="event-content">
<small v-if="(event.project_code && !event.is_blocker)" class="project-code">{{ event.project_code }}</small>
<h3>{{ event.title }}</h3>
@@ -55,22 +61,29 @@
<div class="event-initials d-flex justify-center align-center">
<small>{{ getUserInitials(event) }}</small>
</div>
<small class="event-initials-date">{{ event.start.toLocaleDateString('sk-SK') }}</small>
<small class="event-initials-date">{{ new Date(event.starts_at).toLocaleDateString('sk-SK') }}</small>
</div>
</div>
<div class="event-footer d-flex">
<v-btn rounded class="event-footer-button me-2" @click.stop="this.showCompleteModal = {task: event}"><img :src="require('./_img/checkmark.svg')" alt=""></v-btn>
<div class="event-footer d-flex">
<v-btn rounded class="event-footer-button me-2" :class="{'completed': event.completed}" @click="this.showCompleteModal = {task: event}"><img :src="require('./_img/checkmark.svg')" alt=""></v-btn>
<v-btn rounded class="event-footer-button me-2" @click.stop="editTask(event.id, true)"><img :src="require('./_img/pencil.svg')" alt=""></v-btn>
<v-btn rounded class="event-footer-button me-2" @click.stop="this.showDeleteModal = {task: event}"><img :src="require('./_img/bin.svg')" alt=""></v-btn>
</div>
</div>
<div v-else class="non-working-event w-100 h-100 d-flex flex-column justify-center">
<div class="d-flex justify-center align-center">
<v-icon icon="mdi-cancel" color="black"></v-icon>
<h3 class="mb-0 ms-2">{{ event.title }}</h3>
</div>
</div>
</template>
</Vue-cal>
<Z-sub-task-modal ref="z-sub-task-modal" />
<Z-complete-task-modal v-if="showCompleteModal" :visible="showCompleteModal ? true : false" :task="showCompleteModal.task" @close="showCompleteModal = null" />
<Z-delete-task-modal v-if="showDeleteModal" :visible="showDeleteModal ? true : false" :task="showDeleteModal.task" @close="showDeleteModal = null" />
<Z-complete-task-modal v-if="showCompleteModal" :visible="showCompleteModal ? true : false" :task="showCompleteModal.task" @completeTask="completeTask" @close="showCompleteModal = null" />
<Z-delete-task-modal v-if="showDeleteModal" :visible="showDeleteModal ? true : false" :task="showDeleteModal.task" @deleteTask="deleteTask" @close="showDeleteModal = null" />
</div>
</template>
@@ -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
</style>