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

app/src/plugins/app/_config/quill.util.ts

@@ -3,16 +3,17 @@ import { Quill } from '@vueup/vue-quill'
 export function registerQuillUrlSanitizer() {
     const Link = Quill.import('formats/link')
 
+    // Extend the protocol whitelist
+    Link.PROTOCOL_WHITELIST.push('smb', 'fmp', 'radar', 'rdar', 'sms', '\\')
+
     class CustomLinkSanitizer extends Link {
         static sanitize(url) {
             const sanitizedUrl = super.sanitize(url)
 
             if (!sanitizedUrl || sanitizedUrl === 'about:blank') return sanitizedUrl
 
-            const protocolWhhitelist = ['http', 'https', 'mailto', 'tel', 'radar', 'rdar', 'smb', 'sms']
+            const protocolWhitelist = Link.PROTOCOL_WHITELIST
-            const hasWhitelistedProtocol = protocolWhhitelist.some(function(protocol) {
+            const hasWhitelistedProtocol = protocolWhitelist.some(protocol => sanitizedUrl.startsWith(protocol))
-            return sanitizedUrl.startsWith(protocol)
-            })
 
             if (hasWhitelistedProtocol) return sanitizedUrl
 
@@ -20,5 +21,5 @@ export function registerQuillUrlSanitizer() {
         }       
     }
 
-    Quill.register(CustomLinkSanitizer, true)
+    Quill.register('formats/link', CustomLinkSanitizer, true)
 }

app/src/plugins/app/_layout/auth/_components/a-header.vue

@@ -1,5 +1,5 @@
 <template>
-	<header class="login-header-border hover">
+	<header class="login-header-border">
 		<v-container>
 			<img :src="require('@/plugins/app/_img/jandl-logo.svg')" alt="jandl-logo" @click="$router.push({name: 'Login'})">
 		</v-container>

app/src/plugins/app/_theme/global.sass

@@ -29,11 +29,6 @@
 	padding: 5px 20px
 	min-width: 50px
 
-.description-detail
-	background: rgba(0, 0, 0, 0.04)
-	color: rgba(0, 0, 0, 0.6)
-	height: fit-content
-
 .employee-selected-avatar
 	background: #6200EE
 	color: #fff
@@ -105,7 +100,51 @@ input[type="time"]::-webkit-calendar-picker-indicator
 	.v-input
 		height: 40px !important
 
+.server-links
+	background: rgba(127, 57, 251, 1)
+	padding: 4px 5px
+
+	a
+		color: #fff
+
 @media (max-width: 534px)
 	.mobile-view
 		flex-direction: column
 		gap: 20px
+
+.description-detail
+	background: rgba(0, 0, 0, 0.04)
+	color: rgba(0, 0, 0, 0.6)
+	height: fit-content
+
+	$indentSize: 15px
+	
+	li
+		margin-left: $indentSize
+
+		&.ql-indent-1
+			margin-left: 2 * $indentSize
+
+		&.ql-indent-2
+			margin-left: 3 * $indentSize
+		
+		&.ql-indent-3
+			margin-left: 4 * $indentSize
+
+		&.ql-indent-4
+			margin-left: 5 * $indentSize
+		
+		&.ql-indent-5
+			margin-left: 6 * $indentSize
+		
+		&.ql-indent-6
+			margin-left: 7 * $indentSize
+		
+		&.ql-indent-7
+			margin-left: 8 * $indentSize
+		
+		&.ql-indent-8
+			margin-left: 9 * $indentSize
+		
+		&.ql-indent-9
+			margin-left: 10 * $indentSize

app/src/plugins/tm@_utils/server-links.utils.ts

@@ -0,0 +1,73 @@
+import { useToast } from 'vue-toast-notification';
+const toast = useToast();
+
+declare global {
+  interface Window {
+	toast: typeof toast;
+  }
+}
+
+window.toast = toast;
+
+export function detectOS() {
+	const platform = window.navigator.platform
+	const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K']
+	const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
+
+	if (macosPlatforms.indexOf(platform) !== -1) {
+		return 'mac'
+	} else if (windowsPlatforms.indexOf(platform) !== -1) {
+		return 'win'
+	}
+	return 'win'
+}
+
+export function prepareHTMLDescription(description) {
+	if (!description) return description
+
+	const os = detectOS()
+
+	if (os === 'mac') {
+		description = description.replace(/\\\\/g, 'smb://')
+
+		// find all smb links and replace them with clickable links, separated by ' ', '<', '>', '"', and '(', ')' characters
+		description = description = description.replace(/(smb:\/\/[^\s<>"()]+)/g, function(match) {
+			return '<a href="' + match.replace(/\\/g, '/') + '">' + match.replace(/\\/g, '/') + '</a>'
+		})
+	} else {
+		description = description.replace(/smb:\/\//g, '\\\\')
+
+		
+		// find all windows links and replace them with clickable links, separated by ' ', '<', '>', '"', and '(', ')' characters
+		description = description.replace(/(\\\\[^\s<>"()]+)/g, function(match) {
+			match = match.replaceAll('/', '\\')
+			return '<span style="cursor: pointer; text-decoration: underline" onclick="' + getCopyFunction(match) + '">' + match + '</span>';
+		});
+	}
+
+	return description;
+}
+
+function getCopyFunction(text) {
+	return `
+		if (navigator.clipboard && navigator.clipboard.writeText) {
+			navigator.clipboard.writeText('${text.replace(/\\/g, '\\\\')}').then(() => {
+				window.toast.success('Link copied to clipboard!')
+			}).catch(err => {
+				window.toast.error('Failed to copy link to clipboard!')
+			});
+		} else {
+			const input = document.createElement('input');
+			input.style.position = 'fixed';
+			input.style.opacity = 0;
+			input.style.pointerEvents = 'none';
+			input.value = '${text.replace(/\\/g, '\\\\')}';
+			document.body.appendChild(input);
+			input.select();
+			input.focus();
+			document.execCommand('copy');
+			document.body.removeChild(input);
+			window.toast.success('Link copied to clipboard!')
+		}
+	`
+}

app/src/plugins/tm@dashboard/_mixins/Filter.mixin.ts

@@ -16,7 +16,7 @@ export default {
 
 	methods: {
 		_initScrollListener(repeat = 0) {
-			if (this.initialized) return
+			if (this.initialized && repeat > 0) return
 
 			const calendar = this.$refs.page?.querySelector('.vuecal__bg')
 

app/src/plugins/tm@dashboard/projects/projects.vue

@@ -120,7 +120,9 @@ export default {
 				this.$toast.error('Nepodarilo sa nacitat data!')
 			}
 
-			this._initScrollListener()
+			setTimeout(() => {
+				this._initScrollListener()
+			}, 100)
 		},
 
 		openMasterTaskModal(mastertaskId) {

app/src/plugins/tm@dashboard/tasks/tasks.vue

@@ -181,7 +181,9 @@ export default {
 				this.$toast.error('Nepodarilo sa nacitat data!')
 			}
 
-			this._initScrollListener()
+			setTimeout(() => {
+				this._initScrollListener()
+			}, 100)
 		}
 	}
 }

app/src/plugins/tm@dashboard/teams/teams.vue

@@ -86,7 +86,9 @@ export default {
 				this.$toast.error('Nepodarilo sa nacitat data!')
 			}
 
-			this._initScrollListener()
+			setTimeout(() => {
+				this._initScrollListener()
+			}, 100)
 		}
 	}
 }

app/src/plugins/tm@modal/_components/read-only/z-description.vue

@@ -1,16 +1,18 @@
 <template>
 	<div class="px-5 py-5 border-bottom" v-if="description" >
 		<p>Popis zadania</p>
-		<section v-html="description" class="description-detail px-2 py-2 w-100 rounded mt-2" />
+		<section v-html="preparedDescription" class="description-detail px-2 py-2 w-100 rounded mt-2" />
 	</div>
   
 	<div class="px-5 py-5 border-bottom" v-if="inheritedDescription">
 		<p>Popis mastertasku</p>
-		<section v-html="inheritedDescription" class="description-detail px-2 py-2 w-100 rounded mt-2" />
+		<section v-html="preparedInheritedDescription" class="description-detail px-2 py-2 w-100 rounded mt-2" />
 	</div>
 </template>
 
 <script>
+import { prepareHTMLDescription } from '@/plugins/tm@_utils/server-links.utils'
+
 export default {
 	props: {
 		description: {
@@ -22,6 +24,19 @@ export default {
 			type: String || null,
 			default: () => null
 		}
+	},
+
+	data() {
+		return {
+			copiedIndices: [],
+			preparedDescription: '',
+			preparedInheritedDescription: ''
+		}
+	},
+
+	mounted() {
+		this.preparedDescription = prepareHTMLDescription(this.description)
+		this.preparedInheritedDescription = prepareHTMLDescription(this.inheritedDescription)
 	}
 }
 </script>

app/src/plugins/tm@modal/master-task/_mixins/selects.mixin.ts

@@ -43,7 +43,6 @@ export default {
 
 		onEmployeeSelected(id) {
 			const employee = this.enrichedEmployees.find(employee => employee.id == id)
-			console.log('add employee', employee)
 			this.mastertask.employees.push(employee)
 			this.showAddEmployeeInput = false
 		},

app/src/plugins/tm@modal/master-task/z-master-task-modal.vue

@@ -280,8 +280,6 @@ export default {
 						return employee
 					})
 
-					console.log('NEW', this.mastertask)
-
 					// this.mastertask.project_code 	= project.code
 				} else {
 					this.mastertask = { employees: [], duration: 0, _deadline_time: '17:00' }
@@ -300,7 +298,7 @@ export default {
 		async save() {
 			if (this.mastertask.id) {
 				this.mastertask.employees = this.mastertask.employees.map(employee => {
-					const { duration } = this.mastertask.subtasks.find(({ employee_id }) => employee_id == employee.id)
+					const { duration } = this.mastertask.subtasks.find(({ employee_id }) => employee_id == employee.id) || {}
 					employee.duration = duration
 					return employee
 				})

app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue

@@ -54,7 +54,6 @@ export default {
 		},
 
 		createTask() {
-			console.log(this.localData.date, this.localData.time, this.localData.employees)
 			this.$events.emit('show-subtask-modal', {
 				subtask: {
 					deadline: this.localData.date,

app/src/plugins/tm@modal/task/_components/_components/a-task-description.vue

@@ -1,16 +1,18 @@
 <template>
 	<div class="px-5 py-5 border-bottom" v-if="description" >
 		<p>Popis zadania</p>
-		<section v-html="description" class="description-detail px-2 py-2 w-100 rounded mt-2" />
+		<section v-html="preparedDescription" class="description-detail px-2 py-2 w-100 rounded mt-2" />
 	</div>
 
 	<div class="px-5 py-5 border-bottom" v-if="mastertaskDescription">
 		<p>Popis mastertasku</p>
-		<section v-html="mastertaskDescription" class="description-detail px-2 py-2 w-100 rounded mt-2" />
+		<section v-html="preparedMastertaskDescription" class="description-detail px-2 py-2 w-100 rounded mt-2" />
 	</div>
 </template>
 
 <script>
+import { prepareHTMLDescription } from '@/plugins/tm@_utils/server-links.utils'
+
 export default {
 	props: {
 		description: {
@@ -22,6 +24,19 @@ export default {
 			type: String || null,
 			default: () => null
 		}
-	}
+	},
+
+	data() {
+		return {
+			copiedIndices: [],
+			preparedDescription: '',
+			preparedMastertaskDescription: ''
+		}
+	},
+
+	mounted() {
+		this.preparedDescription = prepareHTMLDescription(this.description)
+		this.preparedMastertaskDescription = prepareHTMLDescription(this.mastertaskDescription)
+	},
 }
 </script>

app/src/plugins/tm@modal/task/_components/a-timeblock.vue

@@ -3,7 +3,9 @@
         <div v-if="deletable && editable" class="x-button">
             <button @click="$emit('removeTimeblock')" class="x-button">x</button>
         </div>
-        <Datepicker :model-value="timeblock.date" @focus="$emit('onDateFocus')" @update:model-value="updateDate" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" :auto-apply="true" :enable-time-picker="false" class="mb-5 modal-input" />
+        <div @click="openDatepicker('datepicker')" class="datepicker-wrapper" ref="datepicker-wrapper">
+            <Datepicker :model-value="timeblock.date" ref="datepicker" @focus="onDateFocus" @update:model-value="updateDate" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" :auto-apply="true" :enable-time-picker="false" class="mb-5 modal-input datepicker-input" />
+        </div>
         <div class="splitted-time-inputs">
             <v-text-field :value="timeblock.starts_at_time" @input="updateStartTime" @focus="onInputFocus" :class="{ error: v$?.timeblock.starts_at_time.$errors.length }" type="time" variant="solo" bg-color="white" label="Začiatok" />
             <v-text-field :value="timeblock.ends_at_time" @input="updateEndTime" @focus="onInputFocus" :class="{ error: v$?.timeblock.ends_at_time.$errors.length }" type="time" variant="solo" bg-color="white" label="Koniec" />
@@ -15,13 +17,15 @@
 import useVuelidate from '@vuelidate/core'
 import { requiredIf } from '@vuelidate/validators'
 import Datepicker from '@vuepic/vue-datepicker'
+import VuetifyFixFocusMixin from '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
 
 export default {
+    mixins: [VuetifyFixFocusMixin],
+
     components: {
         Datepicker
     },
 
-
     props: {
         timeblock: {
             type: Object,
@@ -55,9 +59,18 @@ export default {
     },
 
     methods: {
-        onFocus() {
+        async openDatepicker(ref) {
-            console.log('focus')
+			this.$refs[ref].openMenu()
-        },
+            this.$nextTick(() => {
+                this.$refs['datepicker-wrapper'].scrollIntoView({ behavior: 'instant', block: 'center', inline: 'center' })
+                this.$nextTick(() => {
+                    const popup = document.querySelector('.dp__menu.dp__menu_index')
+                    const isBottom = popup.querySelector('.dp__arrow_bottom')
+                    const yDifference = isBottom ? 0 - popup.clientHeight - 42 : 35
+                    popup.style.top = window.innerHeight / 2 + yDifference + 'px'
+                })
+            })
+		},
         updateDate(date) {
             const timeblock = { ...this.timeblock }
             if (date) timeblock.date = date
@@ -100,4 +113,10 @@ export default {
 
 .error input
     border: 1px solid red !important
+
+.datepicker-wrapper
+    width: 100%
+    .datepicker-input
+        width: 100% !important
+        pointer-events: none
 </style>e

app/src/plugins/tm@modal/task/z-task-modal.vue

@@ -16,7 +16,9 @@
 
 					<div class="splitted-inputs">
 						<!-- TODO: Bialko validacie -->
-						<Datepicker v-model="subtask.deadline" @focus="onDateFocus" :auto-apply="true" :min-date="new Date()" class="modal-input left" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Deadline" :class="{ error: v$.subtask.deadline.$errors?.length }" :validations="v$.subtask.deadline" />
+						<div @click="openDatepicker('datepicker-01')" class="datepicker-wrapper">
+							<Datepicker v-model="subtask.deadline" @focus="onDateFocus" ref="datepicker-01" :auto-apply="true" :min-date="new Date()" class="modal-input left datepicker-input" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Deadline" :class="{ error: v$.subtask.deadline.$errors?.length }" :validations="v$.subtask.deadline" />
+						</div>
 
 						<v-text-field class="modal-input right" variant="solo" v-model="subtask._deadline_time" label="Čas" append-inner-icon="mdi-clock-outline" type="time" @focus="onInputFocus" :class="{ error: v$.subtask._deadline_time.$errors.length }" :hint="v$.subtask._deadline_time.$errors ? errorUtils.parseErrors(v$.subtask._deadline_time.$errors) : null" />
 					</div>
@@ -69,7 +71,7 @@
 
 					<template v-if="!subtask.id">
 						<div class="timeblocks w-100">
-							<A-timeblock v-for="(timeblock, index) in timeblocks" :key="index" @updateTimeblock="val => updateTimeblock(val, index)" @removeTimeblock="removeTimeblock(index)" @onDateFocus="onDateFocus" :timeblock="timeblock" :deletable="index > 0" editable :ref="`timetable-${index}`" />
+							<A-timeblock v-for="(timeblock, index) in timeblocks" :key="index" @updateTimeblock="val => updateTimeblock(val, index)" @removeTimeblock="removeTimeblock(index)" :timeblock="timeblock" :deletable="index > 0" editable :ref="`timetable-${index}`" />
 							<div class="end-button w-100">
 								<button @click="timeblocks.push({date: null, starts_at_time: null, ends_at_time: null})">Pridať časový blok</button>
 							</div>
@@ -232,6 +234,10 @@ export default {
 	},
 
 	methods: {
+		openDatepicker(ref) {
+			this.$refs[ref].openMenu()
+		},
+
 		updateTimeblock(val, index) {
 			this.timeblocks[index] = val
 		},
@@ -362,7 +368,6 @@ export default {
 		},
 
 		updateSubtask(subtask) {
-			console.log('UPDATE SUBTASK: ', subtask.timeblocks[0])
 			this.subtask = subtask
 		},
 
@@ -559,4 +564,10 @@ export default {
 		flex-direction: row !important
 		gap: 15px
 		margin-bottom: -11px
+
+.datepicker-wrapper
+	width: 70%
+	.datepicker-input
+		width: 100% !important
+		pointer-events: none
 </style>