[Refactor] Code formatting refactor

app/public/mock/v1/overview/tasks.GET.json

@@ -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

@@ -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 {
-      else {
+				import(`./i18n/${locale}.json`).then((response) => {
-        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 {
-            else {
+							dayToShow = [...daysWithIndex, ...daysWithIndex.slice(0, weekDayIndex)].reverse().find((day) => {
-              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) {
+		onMouseUp(e) {
-      const {
+			const { focusAnEvent, resizeAnEvent, clickHoldAnEvent, clickHoldACell, dragCreateAnEvent } = this.domEvents
-        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 = [
+			const discardProps = ['segments', 'deletable', 'deleting', 'titleEditable', 'resizable', 'resizing', 'draggable', 'dragging', 'draggingStatic', 'focused']
-        'segments', 'deletable', 'deleting', 'titleEditable', 'resizable', 'resizing',
+			discardProps.forEach((prop) => {
-        'draggable', 'dragging', 'draggingStatic', 'focused'
+				if (prop in event) delete event[prop]
-      ]
+			})
-      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) {
+		cellOrSplitHasEvents(events, split = null) {
-      return events.length && ((!split && events.length) || (split && events.some(e => e.split === split.id)))
+			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 () {
+		enabledViews() {
-      return Object.keys(this.views).filter(view => this.views[view].enabled)
+			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 () {
+		daySplits() {
-      return (
+			return (this.splitDays.filter((item) => !item.hide) || []).map((item, i) => ({
-        (this.splitDays.filter(item => !item.hide) || [])
+				...item,
-          .map((item, i) => ({ ...item, id: item.id || (i + 1) })) // Make sure there's always an id.
+				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 () {
+		months() {
-      return this.texts.months.map(month => ({ label: month }))
+			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) ||
+							return !((this.hideWeekends && day >= 6) || (this.hideWeekdays.length && this.hideWeekdays.includes(day)))
-              (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,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>