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

[Refactor] Code formatting refactor

Browse Source
This commit is contained in:
Matej Glasnák committed 2022-12-19 16:30:54 +01:00
1 parent 9d70fe378d
commit 1a1b6f99a8
3 files changed
+211 -146
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/public/mock/v1/overview/tasks.GET.json
+30
View File
@@ -104,6 +104,36 @@
"title": "Task 7",
"project_code": "CO-2201",
"master_task_color": "#E7DBF8"
},
{
"id": 8,
"task_id": 8,
"starts_at": "2022-12-19T07:00:00+00:00",
"ends_at": "2022-12-19T09:00:00+00:00",
"title": "Task 8",
"project_code": "CO-2201",
"master_task_color": "#E7DBF8"
},
{
"id": 9,
"task_id": 9,
"starts_at": "2022-12-20T09:00:00+00:00",
"ends_at": "2022-12-20T12:00:00+00:00",
"title": "Task 9",
"project_code": "CO-2201",
"master_task_color": "#E9FFE6"
},
{
"id": 10,
"task_id": 10,
"starts_at": "2022-12-19T12:00:00+00:00",
"ends_at": "2022-12-19T13:00:00+00:00",
"title": "Task 10",
"project_code": "CO-2201",
"master_task_color": "#57e0f2"
}
]
},
app/src/plugins/app@vendor/vue-cal/index.vue
+180 -146
View File
@@ -35,9 +35,13 @@
<div class="vuecal__bg" :class="{ vuecal__flex: !hasTimeColumn }" column="column">
<div class="vuecal__flex" row="row" grow="grow">
<div class="vuecal__time-column" v-if="hasTimeColumn">
<div class="vuecal__all-day-text" v-if="showAllDayEvents &amp;&amp; cellOrSplitMinWidth &amp;&amp; !(isDayView &amp;&amp; !minSplitWidth)" :style="{ height: allDayBar.height }"><span>{{ texts.allDay }}</span></div>
<div class="vuecal__all-day-text" v-if="showAllDayEvents &amp;&amp; cellOrSplitMinWidth &amp;&amp; !(isDayView &amp;&amp; !minSplitWidth)" :style="{ height: allDayBar.height }">
<span>{{ texts.allDay }}</span>
</div>
<div class="vuecal__time-cell" v-for="(cell, i) in timeCells" :key="i" :style="`height: ${timeCellHeight}px`">
<slot name="time-cell" :hours="cell.hours" :minutes="cell.minutes"><span class="vuecal__time-cell-line"></span><span class="vuecal__time-cell-label">{{ cell.label }}</span></slot>
<slot name="time-cell" :hours="cell.hours" :minutes="cell.minutes"
><span class="vuecal__time-cell-line"></span><span class="vuecal__time-cell-label">{{ cell.label }}</span></slot
>
</div>
</div>
<div class="vuecal__flex vuecal__week-numbers" v-if="showWeekNumbers &amp;&amp; isMonthView" column="column">
@@ -68,7 +72,9 @@
</slot>
</template>
</all-day-bar>
<div class="vuecal__flex" :ref="el =&gt; cellsEl = el" grow="grow" :wrap="!cellOrSplitMinWidth || !isWeekView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''">
<!-- TU -->
<vuecal-cell v-for="(cell, i) in viewCells" :key="i" :options="$props" :edit-events="editEvents" :data="cell" :cell-width="hideWeekdays.length &amp;&amp; (isWeekView || isMonthView) &amp;&amp; cellWidth" :min-timestamp="minTimestamp" :max-timestamp="maxTimestamp" :cell-splits="hasSplits &amp;&amp; daySplits || []">
<template #cell-content="{ events, split, selectCell }">
<slot name="cell-content" :cell="cell" :view="view" :go-narrower="selectCell" :events="events">
@@ -86,7 +92,10 @@
<slot name="event" :view="view" :event="event">
<div class="vuecal__event-title vuecal__event-title--edit" v-if="editEvents.title &amp;&amp; event.titleEditable" contenteditable="contenteditable" @blur="onEventTitleBlur($event, event)" v-html="event.title"></div>
<div class="vuecal__event-title" v-else-if="event.title" v-html="event.title"></div>
<div class="vuecal__event-time" v-if="time &amp;&amp; !event.allDay &amp;&amp; !(isMonthView &amp;&amp; (event.allDay || showAllDayEvents === 'short')) &amp;&amp; !isShortMonthView">{{ utils.date.formatTime(event.start, TimeFormat) }}<span v-if="event.endTimeMinutes">&nbsp;- {{ utils.date.formatTime(event.end, TimeFormat, null, true) }}</span><small class="days-to-end" v-if="event.daysCount &gt; 1 &amp;&amp; (event.segments[cell.formattedDate] || {}).isFirstDay">&nbsp;+{{ event.daysCount - 1 }}{{ (texts.day[0] || '').toLowerCase() }}</small></div>
<div class="vuecal__event-time" v-if="time &amp;&amp; !event.allDay &amp;&amp; !(isMonthView &amp;&amp; (event.allDay || showAllDayEvents === 'short')) &amp;&amp; !isShortMonthView">
{{ utils.date.formatTime(event.start, TimeFormat) }}<span v-if="event.endTimeMinutes">&nbsp;- {{ utils.date.formatTime(event.end, TimeFormat, null, true) }}</span
><small class="days-to-end" v-if="event.daysCount &gt; 1 &amp;&amp; (event.segments[cell.formattedDate] || {}).isFirstDay">&nbsp;+{{ event.daysCount - 1 }}{{ (texts.day[0] || '').toLowerCase() }}</small>
</div>
<div class="vuecal__event-content" v-if="event.content &amp;&amp; !(isMonthView &amp;&amp; event.allDay &amp;&amp; showAllDayEvents === 'short') &amp;&amp; !isShortMonthView" v-html="event.content"></div>
</slot>
</template>
@@ -149,10 +158,15 @@ const dateUtils = new DateUtils(textsDefaults) // Do this ASAP for date prototyp
export default {
name: 'vue-cal',
components: { 'vuecal-cell': Cell, 'vuecal-header': Header, WeekdaysHeadings, AllDayBar },
components: {
'vuecal-cell': Cell,
'vuecal-header': Header,
WeekdaysHeadings,
AllDayBar
},
// By Vue design, passing props loses the reactivity unless it's a method or reactive OBJECT.
provide () {
provide() {
return {
vuecal: this,
utils: this.utils,
@@ -228,7 +242,7 @@ export default {
xsmall: { type: Boolean, default: false }
},
data () {
data() {
return {
ready: false, // Is vue-cal ready.
// Make texts reactive before a locale is loaded.
@@ -329,7 +343,7 @@ export default {
*
* @param {String|Object} locale the language user whishes to have on vue-cal.
*/
async loadLocale (locale) {
async loadLocale(locale) {
if (typeof this.locale === 'object') {
this.texts = Object.assign({}, textsDefaults, locale)
this.utils.date.updateTexts(this.texts)
@@ -339,10 +353,8 @@ export default {
if (this.locale === 'en') {
const texts = await import('./i18n/en.json')
this.texts = Object.assign({}, textsDefaults, texts)
}
else {
import(`./i18n/${locale}.json`)
.then(response => {
} else {
import(`./i18n/${locale}.json`).then((response) => {
this.texts = Object.assign({}, textsDefaults, response.default)
this.utils.date.updateTexts(this.texts)
})
@@ -352,9 +364,9 @@ export default {
/**
* Only import drag and drop module on demand to keep a small library weight.
*/
loadDragAndDrop () {
loadDragAndDrop() {
import('./modules/drag-and-drop')
.then(response => {
.then((response) => {
const { DragAndDrop } = response
this.modules.dnd = new DragAndDrop(this)
})
@@ -370,7 +382,7 @@ export default {
* @param {String} view The view to validate.
* @return {String} a valid view.
*/
validateView (view) {
validateView(view) {
if (!validViews.includes(view)) {
// eslint-disable-next-line no-console
console.error(`Vue Cal: invalid active-view parameter provided: "${view}".\nA valid view must be one of: ${validViews.join(', ')}.`)
@@ -393,7 +405,7 @@ export default {
* @param {String | Date} date A starting date for the view, if none, fallbacks to the selected date,
* If also empty fallbacks to the current view start date.
*/
switchToNarrowerView (date = null) {
switchToNarrowerView(date = null) {
this.transitionDirection = 'right'
const view = this.enabledViews[this.enabledViews.indexOf(this.view.id) + 1]
if (view) this.switchView(view, date)
@@ -408,7 +420,7 @@ export default {
* If also empty fallbacks to the current view start date.
* @param {Boolean} fromViewSelector to know if the caller is the built-in view selector.
*/
switchView (view, date = null, fromViewSelector = false) {
switchView(view, date = null, fromViewSelector = false) {
view = this.validateView(view)
const ud = this.utils.date
@@ -516,13 +528,19 @@ export default {
view,
startDate,
endDate: this.view.endDate,
...(this.isMonthView ? {
...(this.isMonthView
? {
firstCellDate: this.view.firstCellDate,
lastCellDate: this.view.lastCellDate,
outOfScopeEvents: this.view.outOfScopeEvents.map(this.cleanupEvent)
} : {}),
}
: {}),
events: this.view.events.map(this.cleanupEvent),
...(this.isWeekView ? { week: ud.getWeek(this.startWeekOnSunday ? ud.addDays(startDate, 1) : startDate) } : {})
...(this.isWeekView
? {
week: ud.getWeek(this.startWeekOnSunday ? ud.addDays(startDate, 1) : startDate)
}
: {})
}
this.$emit('view-change', params)
}
@@ -531,14 +549,14 @@ export default {
/**
* Shorthand function for external call (via $refs).
*/
previous () {
previous() {
this.previousNext(false)
},
/**
* Shorthand function for external call (via $refs).
*/
next () {
next() {
this.previousNext()
},
@@ -547,7 +565,7 @@ export default {
*
* @param {Boolean} next
*/
previousNext (next = true) {
previousNext(next = true) {
const ud = this.utils.date
this.transitionDirection = next ? 'right' : 'left'
const modifier = next ? 1 : -1
@@ -570,7 +588,7 @@ export default {
case 'day':
firstCellDate = ud[next ? 'addDays' : 'subtractDays'](startDate, 1)
const weekDay = firstCellDate.getDay() // 0 to 6 with Sunday at position 0.
const weekDayIndex = this.startWeekOnSunday ? weekDay : ((weekDay || 7) - 1)
const weekDayIndex = this.startWeekOnSunday ? weekDay : (weekDay || 7) - 1
const isDayHidden = this.weekDays[weekDayIndex].hide
// If the day to show on the day view is listed as hidden by hideWeekdays or hideWeekends,
@@ -582,14 +600,13 @@ export default {
let daysFromDate = 0
if (next) {
dayToShow = ([...daysWithIndex.slice(weekDayIndex), ...daysWithIndex]).find(day => {
dayToShow = [...daysWithIndex.slice(weekDayIndex), ...daysWithIndex].find((day) => {
daysFromDate++
return !day.hide
}).i // Returns 0 to 6 with Monday at position 0.
daysFromDate--
}
else {
dayToShow = ([...daysWithIndex, ...daysWithIndex.slice(0, weekDayIndex)]).reverse().find(day => {
} else {
dayToShow = [...daysWithIndex, ...daysWithIndex.slice(0, weekDayIndex)].reverse().find((day) => {
daysFromDate++
return !day.hide
}).i // Returns 0 to 6 with Monday at position 0.
@@ -608,7 +625,7 @@ export default {
*
* @param {Array} events
*/
addEventsToView (events = []) {
addEventsToView(events = []) {
const ue = this.utils.event
const { startDate, endDate, firstCellDate, lastCellDate } = this.view
@@ -624,12 +641,12 @@ export default {
// First remove the events that are not in view.
// Keep the unfiltered array of events for outOfScopeEvents below.
let filteredEvents = events.filter(e => ue.eventInRange(e, startDate, endDate))
let filteredEvents = events.filter((e) => ue.eventInRange(e, startDate, endDate))
// For each multiple-day event and only if needed, create its segments (= days) for rendering in the view.
// If we don't display the event on month view (eventsOnMonthView = false) then don't create segments.
if (!this.isYearsOrYearView && !(this.isMonthView && !this.eventsOnMonthView)) {
filteredEvents = filteredEvents.map(e => {
filteredEvents = filteredEvents.map((e) => {
return e.daysCount > 1 ? ue.createEventSegments(e, firstCellDate || startDate, lastCellDate || endDate) : e
})
}
@@ -639,11 +656,11 @@ export default {
if (this.isMonthView) {
// Save out of scope events into the view object separated from the array of in-scope events.
this.view.outOfScopeEvents = []
events.forEach(e => {
events.forEach((e) => {
if (ue.eventInRange(e, firstCellDate, startDate) || ue.eventInRange(e, endDate, lastCellDate)) {
// Only add events to the view.outOfScopeEvents array if not already in view.events
// (multiple-day events case).
if (!this.view.events.some(e2 => e2._eid === e._eid)) this.view.outOfScopeEvents.push(e)
if (!this.view.events.some((e2) => e2._eid === e._eid)) this.view.outOfScopeEvents.push(e)
}
})
}
@@ -656,7 +673,7 @@ export default {
* @param {String} Class the CSS class name of the ancestor.
* @return {Object} The matched DOM node or null if no match.
*/
findAncestor (el, Class) {
findAncestor(el, Class) {
while ((el = el.parentElement) && !el.classList.contains(Class)) {}
return el
},
@@ -667,7 +684,7 @@ export default {
* @param {Object} el a DOM node to check if event.
* @return {Boolean} true if the given DOM node is - or is in - an event.
*/
isDOMElementAnEvent (el) {
isDOMElementAnEvent(el) {
return el.classList.contains('vuecal__event') || this.findAncestor(el, 'vuecal__event')
},
@@ -680,14 +697,13 @@ export default {
*
* @param {Object} e the native DOM event object.
*/
onMouseMove (e) {
onMouseMove(e) {
const { resizeAnEvent, dragAnEvent, dragCreateAnEvent } = this.domEvents
if (resizeAnEvent._eid === null && dragAnEvent._eid === null && !dragCreateAnEvent.start) return
e.preventDefault()
if (resizeAnEvent._eid) this.eventResizing(e)
else if (this.dragToCreateEvent && dragCreateAnEvent.start) this.eventDragCreation(e)
},
@@ -699,14 +715,8 @@ export default {
*
* @param {Object} e the native DOM event object.
*/
onMouseUp (e) {
const {
focusAnEvent,
resizeAnEvent,
clickHoldAnEvent,
clickHoldACell,
dragCreateAnEvent
} = this.domEvents
onMouseUp(e) {
const { focusAnEvent, resizeAnEvent, clickHoldAnEvent, clickHoldACell, dragCreateAnEvent } = this.domEvents
const { _eid: isClickHoldingEvent } = clickHoldAnEvent
const { _eid: wasResizing } = resizeAnEvent
let hasResized = false
@@ -723,7 +733,7 @@ export default {
// On event resize end, emit event if duration has changed.
if (wasResizing) {
const { originalEnd, originalEndTimeMinutes, endTimeMinutes } = resizeAnEvent
const event = this.view.events.find(e => e._eid === resizeAnEvent._eid)
const event = this.view.events.find((e) => e._eid === resizeAnEvent._eid)
// If end time is different than original, consider as resized.
hasResized = endTimeMinutes && endTimeMinutes !== originalEndTimeMinutes
@@ -731,7 +741,7 @@ export default {
// So compare timestamps instead of only endTimeMinutes.
if (event && event.end.getTime() !== originalEnd.getTime()) {
// Update the modified event in the mutable events array.
const mutableEvent = this.mutableEvents.find(e => e._eid === resizeAnEvent._eid)
const mutableEvent = this.mutableEvents.find((e) => e._eid === resizeAnEvent._eid)
mutableEvent.endTimeMinutes = event.endTimeMinutes
mutableEvent.end = event.end
@@ -741,7 +751,11 @@ export default {
end: originalEnd,
endTimeMinutes: event.originalEndTimeMinutes
}
this.$emit('event-duration-change', { event: cleanEvent, oldDate: resizeAnEvent.originalEnd, originalEvent })
this.$emit('event-duration-change', {
event: cleanEvent,
oldDate: resizeAnEvent.originalEnd,
originalEvent
})
this.$emit('event-change', { event: cleanEvent, originalEvent })
}
@@ -755,9 +769,7 @@ export default {
resizeAnEvent.endTimeMinutes = null
resizeAnEvent.startCell = null
resizeAnEvent.endCell = null
}
else if (dragCreateStarted) {
} else if (dragCreateStarted) {
// The drag create might be started but not completed due to threshold never reached.
if (dragCreatedEvent) {
this.emitWithEvent('event-drag-create', dragCreatedEvent)
@@ -790,9 +802,9 @@ export default {
// and if not dragging handle or deleting event.
const eventClickHandler = typeof this.onEventClick === 'function'
if (eventClicked && !hasResized && !isClickHoldingEvent && !dragCreatedEvent && eventClickHandler) {
let event = this.view.events.find(e => e._eid === focusAnEvent._eid)
let event = this.view.events.find((e) => e._eid === focusAnEvent._eid)
// If not found, the event may be in the outOfScope array.
if (!event && this.isMonthView) event = this.view.outOfScopeEvents.find(e => e._eid === focusAnEvent._eid)
if (!event && this.isMonthView) event = this.view.outOfScopeEvents.find((e) => e._eid === focusAnEvent._eid)
return event && this.onEventClick(event, e)
}
@@ -803,7 +815,7 @@ export default {
*
* @param {Object} e the native DOM event object.
*/
onKeyUp (e) {
onKeyUp(e) {
if (e.keyCode === 27) this.cancelDelete() // Escape key.
},
@@ -812,9 +824,11 @@ export default {
*
* @param {Object} e the native DOM event object.
*/
eventResizing (e) {
eventResizing(e) {
const { resizeAnEvent } = this.domEvents
const event = this.view.events.find(e => e._eid === resizeAnEvent._eid) || { segments: {} }
const event = this.view.events.find((e) => e._eid === resizeAnEvent._eid) || {
segments: {}
}
const { minutes, cursorCoords } = this.minutesAtCursor(e)
const segment = event.segments && event.segments[resizeAnEvent.segment]
@@ -828,7 +842,7 @@ export default {
// On resize, snap to time (e.g. 0, 15, 30, 45) if the option is on.
if (this.snapToTime) {
const plusHalfSnapTime = (event.endTimeMinutes + this.snapToTime / 2)
const plusHalfSnapTime = event.endTimeMinutes + this.snapToTime / 2
event.endTimeMinutes = plusHalfSnapTime - (plusHalfSnapTime % this.snapToTime)
}
@@ -864,7 +878,11 @@ export default {
}
// Emit event while resizing, so it has to be fast.
this.$emit('event-resizing', { _eid: event._eid, end: event.end, endTimeMinutes: event.endTimeMinutes })
this.$emit('event-resizing', {
_eid: event._eid,
end: event.end,
endTimeMinutes: event.endTimeMinutes
})
},
/**
@@ -872,11 +890,14 @@ export default {
*
* @param {Object} e the native DOM event object.
*/
eventDragCreation (e) {
eventDragCreation(e) {
const { dragCreateAnEvent } = this.domEvents
const { start, startCursorY, split } = dragCreateAnEvent
const timeAtCursor = new Date(start)
const { minutes, cursorCoords: { y } } = this.minutesAtCursor(e)
const {
minutes,
cursorCoords: { y }
} = this.minutesAtCursor(e)
// Don't show anything until the threshold is reached.
if (!dragCreateAnEvent.event && Math.abs(startCursorY - y) < this.dragToCreateThreshold) return
@@ -925,9 +946,9 @@ export default {
/**
* Unfocus an event (e.g. when clicking outside of focused event).
*/
unfocusEvent () {
unfocusEvent() {
const { focusAnEvent, clickHoldAnEvent } = this.domEvents
const event = this.view.events.find(e => e._eid === (focusAnEvent._eid || clickHoldAnEvent._eid))
const event = this.view.events.find((e) => e._eid === (focusAnEvent._eid || clickHoldAnEvent._eid))
focusAnEvent._eid = null // Cancel event focus.
clickHoldAnEvent._eid = null // Hide delete button.
@@ -940,10 +961,10 @@ export default {
/**
* Cancel an event deletion (e.g. when clicking outside of visible delete button).
*/
cancelDelete () {
cancelDelete() {
const { clickHoldAnEvent } = this.domEvents
if (clickHoldAnEvent._eid) {
const event = this.view.events.find(e => e._eid === clickHoldAnEvent._eid)
const event = this.view.events.find((e) => e._eid === clickHoldAnEvent._eid)
if (event) event.deleting = false
clickHoldAnEvent._eid = null
@@ -958,7 +979,7 @@ export default {
* @param {Object} e the native DOM event object.
* @param {Object} event the vue-cal event object.
*/
onEventTitleBlur (e, event) {
onEventTitleBlur(e, event) {
// If no change cancel action.
if (event.title === e.target.innerHTML) return
@@ -967,7 +988,10 @@ export default {
const cleanEvent = this.cleanupEvent(event)
this.$emit('event-title-change', { event: cleanEvent, oldTitle })
this.$emit('event-change', { event: cleanEvent, originalEvent: { ...cleanEvent, title: oldTitle } })
this.$emit('event-change', {
event: cleanEvent,
originalEvent: { ...cleanEvent, title: oldTitle }
})
},
/**
@@ -977,7 +1001,7 @@ export default {
* Notes: mutableEvents couldn't be a computed variable based on this.events, because we add
* items to the array. (Cannot mutate props)
*/
updateMutableEvents () {
updateMutableEvents() {
// Destructuring class method loses the `this` context.
// const { formatDateLite, stringToDate, dateToMinutes, countDays } = this.utils.date
const ud = this.utils.date
@@ -986,7 +1010,7 @@ export default {
// For each event of the `events` prop, prepare the event for vue-cal:
// Populate missing keys: start, startDate, startTimeMinutes, end, endTimeMinutes, daysCount.
// Lots of these variables may look redundant but are here for performance as a cached result of calculation. :)
this.events.forEach(event => {
this.events.forEach((event) => {
// `event.start` accepts a Date object, or a formatted string, but always convert to Date.
const start = typeof event.start === 'string' ? ud.stringToDate(event.start) : event.start
const startDateF = ud.formatDateLite(start)
@@ -998,8 +1022,7 @@ export default {
if (typeof event.end === 'string' && event.end.includes('24:00')) {
end = new Date(event.end.replace(' 24:00', ''))
end.setHours(23, 59, 59, 0) // Sets to the same day at 23.59.59.
}
else end = typeof event.end === 'string' ? ud.stringToDate(event.end) : event.end
} else end = typeof event.end === 'string' ? ud.stringToDate(event.end) : event.end
let endDateF = ud.formatDateLite(end)
let endTimeMinutes = ud.dateToMinutes(end)
@@ -1008,8 +1031,7 @@ export default {
// This also applies on timeless events, all-day events & multiple-day events.
if (!this.time || (typeof event.end === 'string' && event.end.length === 10)) {
end.setHours(23, 59, 59, 0) // Sets to the same day at 23.59.59.
}
else end.setSeconds(end.getSeconds() - 1) // Sets to the previous day at 23.59.59.
} else end.setSeconds(end.getSeconds() - 1) // Sets to the previous day at 23.59.59.
endDateF = ud.formatDateLite(end)
endTimeMinutes = minutesInADay
}
@@ -1038,7 +1060,7 @@ export default {
* @param {Object} e the native DOM event object.
* @return {Object} containing { minutes: {Number}, cursorCoords: { x: {Number}, y: {Number} } }
*/
minutesAtCursor (e) {
minutesAtCursor(e) {
return this.utils.cell.minutesAtCursor(e)
},
@@ -1053,7 +1075,7 @@ export default {
* (can be any key allowed in an event object)
* @return {Object} the created event.
*/
createEvent (dateTime, duration, eventOptions = {}) {
createEvent(dateTime, duration, eventOptions = {}) {
return this.utils.event.createAnEvent(dateTime, duration, eventOptions)
},
@@ -1062,16 +1084,15 @@ export default {
*
* @param {Object} event the event object to cleanup.
*/
cleanupEvent (event) {
cleanupEvent(event) {
event = { ...event }
// Delete vue-cal specific props instead of returning a set of props so user
// can place whatever they want inside an event and see it returned.
const discardProps = [
'segments', 'deletable', 'deleting', 'titleEditable', 'resizable', 'resizing',
'draggable', 'dragging', 'draggingStatic', 'focused'
]
discardProps.forEach(prop => { if (prop in event) delete event[prop] })
const discardProps = ['segments', 'deletable', 'deleting', 'titleEditable', 'resizable', 'resizing', 'draggable', 'dragging', 'draggingStatic', 'focused']
discardProps.forEach((prop) => {
if (prop in event) delete event[prop]
})
if (!event.repeat) delete event.repeat // If empty we don't need it.
@@ -1085,7 +1106,7 @@ export default {
* @param {String} eventName the name of the custom emitted event (e.g. `event-focus`).
* @param {Object} event the event to return to the outside world.
*/
emitWithEvent (eventName, event) {
emitWithEvent(eventName, event) {
this.$emit(eventName, this.cleanupEvent(event))
},
@@ -1099,7 +1120,7 @@ export default {
*
* @param {String | Date} date The date to select.
*/
updateSelectedDate (date) {
updateSelectedDate(date) {
if (date && typeof date === 'string') date = this.utils.date.stringToDate(date)
else date = new Date(date) // Clone to keep original untouched.
@@ -1130,7 +1151,7 @@ export default {
*
* @param {Number} weekFromFirstCell Number from 0 to 6.
*/
getWeekNumber (weekFromFirstCell) {
getWeekNumber(weekFromFirstCell) {
const ud = this.utils.date
const firstCellWeekNumber = this.firstCellDateWeekNumber
const currentWeekNumber = firstCellWeekNumber + weekFromFirstCell
@@ -1138,8 +1159,7 @@ export default {
if (currentWeekNumber > 52) {
return ud.getWeek(ud.addDays(this.view.firstCellDate, 7 * weekFromFirstCell + modifier))
}
else return currentWeekNumber
} else return currentWeekNumber
},
/**
@@ -1147,7 +1167,7 @@ export default {
* Pull the current time from user machine every minute to keep vue-cal accurate even when idle.
* This will redraw the now line every minute and ensure that Today's date is always accurate.
*/
timeTick () {
timeTick() {
// Updating `now` will re-trigger the computed `todaysTimePosition` in cell.vue.
this.now = new Date()
this.timeTickerIds[1] = setTimeout(this.timeTick, 60 * 1000) // Every minute.
@@ -1157,7 +1177,7 @@ export default {
* Updates the localized texts in use in the Date prototypes. (E.g. new Date().format())
* Callable from outside of Vue Cal.
*/
updateDateTexts () {
updateDateTexts() {
this.utils.date.updateTexts(this.texts)
},
@@ -1168,7 +1188,7 @@ export default {
* (the scrollbar width never changes).
* Ref. https://github.com/antoniandre/vue-cal/issues/221
*/
alignWithScrollbar () {
alignWithScrollbar() {
// If already done from another instance, exit.
return
@@ -1195,12 +1215,12 @@ export default {
* @param {Object|Boolean} split The current split object if any or false.
* @return {Boolean} true if there are events, false otherwise.
*/
cellOrSplitHasEvents (events, split = null) {
return events.length && ((!split && events.length) || (split && events.some(e => e.split === split.id)))
cellOrSplitHasEvents(events, split = null) {
return events.length && ((!split && events.length) || (split && events.some((e) => e.split === split.id)))
}
},
created () {
created() {
this.utils.cell = new CellUtils(this)
this.utils.event = new EventUtils(this, this.utils.date)
@@ -1226,7 +1246,7 @@ export default {
}
},
mounted () {
mounted() {
const ud = this.utils.date
const hasTouch = 'ontouchstart' in window
const { resize, drag, create, delete: deletable, title } = this.editEvents
@@ -1237,7 +1257,9 @@ export default {
window.addEventListener(hasTouch ? 'touchend' : 'mouseup', this.onMouseUp)
}
if (resize || drag || (create && this.dragToCreateEvent)) {
window.addEventListener(hasTouch ? 'touchmove' : 'mousemove', this.onMouseMove, { passive: false })
window.addEventListener(hasTouch ? 'touchmove' : 'mousemove', this.onMouseMove, {
passive: false
})
}
if (title) window.addEventListener('keyup', this.onKeyUp)
@@ -1261,16 +1283,22 @@ export default {
endDate: this.view.endDate,
...(this.isMonthView ? { firstCellDate: this.view.firstCellDate, lastCellDate: this.view.lastCellDate } : {}),
events: this.view.events.map(this.cleanupEvent),
...(this.isWeekView ? { week: ud.getWeek(this.startWeekOnSunday ? ud.addDays(startDate, 1) : startDate) } : {})
...(this.isWeekView
? {
week: ud.getWeek(this.startWeekOnSunday ? ud.addDays(startDate, 1) : startDate)
}
: {})
}
this.$emit('ready', params)
this.ready = true
},
beforeUnmount () {
beforeUnmount() {
const hasTouch = 'ontouchstart' in window
window.removeEventListener(hasTouch ? 'touchmove' : 'mousemove', this.onMouseMove, { passive: false })
window.removeEventListener(hasTouch ? 'touchmove' : 'mousemove', this.onMouseMove, {
passive: false
})
window.removeEventListener(hasTouch ? 'touchend' : 'mouseup', this.onMouseUp)
window.removeEventListener('keyup', this.onKeyUp)
@@ -1281,7 +1309,7 @@ export default {
},
computed: {
editEvents () {
editEvents() {
if (this.editableEvents && typeof this.editableEvents === 'object') {
return {
title: !!this.editableEvents.title,
@@ -1300,7 +1328,7 @@ export default {
delete: !!this.editableEvents
}
},
views () {
views() {
return {
years: { label: this.texts.years, enabled: !this.disableViews.includes('years') },
year: { label: this.texts.year, enabled: !this.disableViews.includes('year') },
@@ -1309,25 +1337,25 @@ export default {
day: { label: this.texts.day, enabled: !this.disableViews.includes('day') }
}
},
currentView () {
currentView() {
return this.validateView(this.activeView)
},
enabledViews () {
return Object.keys(this.views).filter(view => this.views[view].enabled)
enabledViews() {
return Object.keys(this.views).filter((view) => this.views[view].enabled)
},
hasTimeColumn () {
hasTimeColumn() {
return this.time && this.isWeekOrDayView
},
isShortMonthView () {
isShortMonthView() {
return this.isMonthView && this.eventsOnMonthView === 'short'
},
firstCellDateWeekNumber () {
firstCellDateWeekNumber() {
const ud = this.utils.date
const date = this.view.firstCellDate
return ud.getWeek(this.startWeekOnSunday ? ud.addDays(date, 1) : date)
},
// For week & day views.
timeCells () {
timeCells() {
const timeCells = []
for (let i = this.timeFrom, max = this.timeTo; i < max; i += this.timeStep) {
timeCells.push({
@@ -1340,25 +1368,25 @@ export default {
return timeCells
},
TimeFormat () {
TimeFormat() {
return this.timeFormat || (this.twelveHour ? 'h:mm{am}' : 'HH:mm')
},
// Filter out the day splits that are hidden.
daySplits () {
return (
(this.splitDays.filter(item => !item.hide) || [])
.map((item, i) => ({ ...item, id: item.id || (i + 1) })) // Make sure there's always an id.
)
daySplits() {
return (this.splitDays.filter((item) => !item.hide) || []).map((item, i) => ({
...item,
id: item.id || i + 1
})) // Make sure there's always an id.
},
// Whether the current view has days splits.
hasSplits () {
hasSplits() {
return this.daySplits.length && this.isWeekOrDayView
},
hasShortEvents () {
hasShortEvents() {
return this.showAllDayEvents === 'short'
},
// Returns the min cell width or the min split width if any.
cellOrSplitMinWidth () {
cellOrSplitMinWidth() {
let minWidth = null
if (this.hasSplits && this.minSplitWidth) minWidth = this.visibleDaysCount * this.minSplitWidth * this.daySplits.length
@@ -1366,7 +1394,7 @@ export default {
return minWidth
},
allDayBar () {
allDayBar() {
let height = this.allDayBarHeight || null
if (height && !isNaN(height)) height += 'px'
@@ -1380,19 +1408,19 @@ export default {
height
}
},
minTimestamp () {
minTimestamp() {
let date = null
if (this.minDate && typeof this.minDate === 'string') date = this.utils.date.stringToDate(this.minDate)
else if (this.minDate && this.minDate instanceof Date) date = this.minDate
return date ? date.getTime() : null
},
maxTimestamp () {
maxTimestamp() {
let date = null
if (this.maxDate && typeof this.maxDate === 'string') date = this.utils.date.stringToDate(this.maxDate)
else if (this.maxDate && this.minDate instanceof Date) date = this.maxDate
return date ? date.getTime() : null
},
weekDays () {
weekDays() {
let { weekDays, weekDaysShort = [] } = this.texts
// Do not modify original for next instances.
weekDays = weekDays.slice(0).map((day, i) => ({
@@ -1405,20 +1433,23 @@ export default {
return weekDays
},
weekDaysInHeader () {
weekDaysInHeader() {
return (
this.isMonthView ||
// hasSplits check is important here in case the user toggles the splits but keep minSplitWidth.
(this.isWeekView && !this.minCellWidth && !(this.hasSplits && this.minSplitWidth)))
(this.isWeekView && !this.minCellWidth && !(this.hasSplits && this.minSplitWidth))
)
},
months () {
return this.texts.months.map(month => ({ label: month }))
months() {
return this.texts.months.map((month) => ({ label: month }))
},
// Validate and fill up the special hours object once for all at root level and not in cell.
specialDayHours () {
specialDayHours() {
if (!this.specialHours || !Object.keys(this.specialHours).length) return {}
return Array(7).fill('').map((cell, i) => {
return Array(7)
.fill('')
.map((cell, i) => {
let day = this.specialHours[i + 1] || []
if (!Array.isArray(day)) day = [day]
cell = []
@@ -1435,7 +1466,7 @@ export default {
return cell
})
},
viewTitle () {
viewTitle() {
const ud = this.utils.date
let title = ''
const date = this.view.startDate
@@ -1484,7 +1515,7 @@ export default {
return title
},
viewCells () {
viewCells() {
const ud = this.utils.date
let cells = []
let fromYear = null
@@ -1557,11 +1588,10 @@ export default {
})
if (this.hideWeekends || this.hideWeekdays.length) {
cells = cells.filter(cell => {
cells = cells.filter((cell) => {
const day = cell.startDate.getDay() || 7 // Put Sunday at position 7 instead of 0.
return !((this.hideWeekends && day >= 6) ||
(this.hideWeekdays.length && this.hideWeekdays.includes(day)))
return !((this.hideWeekends && day >= 6) || (this.hideWeekdays.length && this.hideWeekdays.includes(day)))
})
}
break
@@ -1571,7 +1601,8 @@ export default {
const firstDayOfWeek = this.view.startDate
const weekDays = this.weekDays
cells = weekDays.map((cell, i) => {
cells = weekDays
.map((cell, i) => {
const startDate = ud.addDays(firstDayOfWeek, this.startWeekOnSunday ? i - 1 : i)
const endDate = new Date(startDate)
endDate.setHours(23, 59, 59, 0) // End at 23:59:59.
@@ -1585,7 +1616,8 @@ export default {
today: !todayFound && ud.isToday(startDate) && !todayFound++,
specialHours: this.specialDayHours[dayOfWeek] || []
}
}).filter((cell, i) => !weekDays[i].hide)
})
.filter((cell, i) => !weekDays[i].hide)
break
}
case 'day': {
@@ -1594,27 +1626,29 @@ export default {
endDate.setHours(23, 59, 59, 0) // End at 23:59:59.
const dayOfWeek = (startDate.getDay() || 7) - 1 // Day of the week from 0 to 6 with 6 = Sunday.
cells = [{
cells = [
{
startDate,
formattedDate: ud.formatDateLite(startDate),
endDate,
today: ud.isToday(startDate),
specialHours: this.specialDayHours[dayOfWeek] || []
}]
}
]
break
}
}
return cells
},
// Only when hiding weekdays on month and week views.
visibleDaysCount () {
visibleDaysCount() {
if (this.isDayView) return 1
return 7 - this.weekDays.reduce((total, day) => total + day.hide, 0)
},
cellWidth () {
cellWidth() {
return 100 / this.visibleDaysCount
},
cssClasses () {
cssClasses() {
const { resizeAnEvent, dragAnEvent, dragCreateAnEvent } = this.domEvents
return {
[`vuecal--${this.view.id}-view`]: true,
@@ -1638,25 +1672,25 @@ export default {
'vuecal--has-touch': typeof window !== 'undefined' && 'ontouchstart' in window
}
},
isYearsOrYearView () {
isYearsOrYearView() {
return ['years', 'year'].includes(this.view.id)
},
isYearsView () {
isYearsView() {
return this.view.id === 'years'
},
isYearView () {
isYearView() {
return this.view.id === 'year'
},
isMonthView () {
isMonthView() {
return this.view.id === 'month'
},
isWeekOrDayView () {
isWeekOrDayView() {
return ['week', 'day'].includes(this.view.id)
},
isWeekView () {
isWeekView() {
return this.view.id === 'week'
},
isDayView () {
isDayView() {
return this.view.id === 'day'
}
},
@@ -1664,19 +1698,19 @@ export default {
watch: {
events: {
// To be able to detect an event attribute change, it has to be first initialized with a value.
handler (events, oldEvents) {
handler(events, oldEvents) {
this.updateMutableEvents(events)
this.addEventsToView()
},
deep: true
},
locale (locale) {
locale(locale) {
this.loadLocale(locale)
},
selectedDate (date) {
selectedDate(date) {
this.updateSelectedDate(date)
},
activeView (newVal) {
activeView(newVal) {
this.switchView(newVal)
}
}
app/src/plugins/tm@dashboard/tasks/tasks.vue
+1
View File
@@ -1,6 +1,7 @@
<template>
<div>
<A-task-filter @weekChange="getWeekData" />
<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
<Z-timeline :calData="timelineData" :calConfig="config" @eventMoved="onEventMoved" />
</W-loadable>