[quill editor, detail modals, ongoing & unscheduled modals, review, download files]

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

@@ -105,15 +105,16 @@
 						<v-icon class="mx-1" icon="mdi-plus" />Pridať zamestnanca
 					</v-btn>
 
-					<v-textarea
-						:class="{ error: v$.masterTask.description.$errors.length }"
-						label="Popis"
-						class="modal-input"
-						variant="solo"
-						v-model="masterTask.description"
-					></v-textarea>
+					<div class="w-100 modal-input">
+						<QuillEditor 
+							v-model="masterTask.description"
+							placeholder="Popis" 
+							theme="snow"
+							class="rich-text-editor"
+						/>
+					</div>
 
-					<Z-files-upload @files-uploaded="filesUploaded"/>
+					<Z-files-upload class="mt-15 files" @files-uploaded="filesUploaded"/>
 				</v-card-actions>
 
 				<v-btn class="z-btn" @click="save()">VYTVORIŤ</v-btn>
@@ -256,12 +257,12 @@
 						</v-row>
 						<div class="px-5 py-5 border-bottom">
 							<p>Popis zadania</p>
-							<section class="description-detail px-2 py-2 w-100 rounded mt-2">{{ masterTask.description }}</section>
+							<section v-html="masterTask.description" class="description-detail px-2 py-2 w-100 rounded mt-2" />
 							<p class="mt-5">Prílohy</p>
 							<div class="w-100 d-flex align-center">
 								<div v-for="(file, index) in masterTask.files" :key="file.id" class="d-flex align-center flex-wrap" :class="[index === 0 ? 'ml-0': 'ml-2']">
 									<v-chip class="mt-2">
-										{{ file.name }}
+										<p @click="downloadFile" class="cursor-pointer">{{ file.name }}</p>
 										<v-icon class="mx-1" icon="mdi-paperclip"></v-icon>
 									</v-chip>
 								</div>
@@ -308,6 +309,9 @@ import { required } 	from '@vuelidate/validators'
 import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
 import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
 import moment 			from 'moment'
+import { QuillEditor } 	from '@vueup/vue-quill'
+import * as FileSaver	from 'file-saver'
+import '@vueup/vue-quill/dist/vue-quill.snow.css'
 
 const atLeastOne = (value) => value.length
 
@@ -317,7 +321,8 @@ export default {
 	components: {
 		Datepicker,
 		ZFilesUpload,
-		ZAutocomplete
+		ZAutocomplete,
+		QuillEditor
 	},
 
 	data() {
@@ -342,7 +347,6 @@ export default {
 				name: { required },
 				team: { required },
 				deadline: { required },
-				description: { required },
 				employees: { atLeastOne }
 			},
 		}
@@ -360,6 +364,17 @@ export default {
 	},
 
 	methods: {
+		// async downloadFile() {
+		// 	try {
+		// 		const file = await this.$axios.get_auth(`v1/files/${this.file.basename}`, { responseType: 'arraybuffer' })
+		// 		const blob = new Blob([file], { type: this.file.mimetype })
+		// 		FileSaver.saveAs(blob, this.file.name)
+		// 		this.isLoading = false
+		// 	} catch(error) {
+		// 		this.$toast.error(error)
+		// 	}
+		// },
+
 		async create(masterTaskId = null, editMode = false) {
 			this.visible = true
 			this.masterTask = null
@@ -393,6 +408,7 @@ export default {
 			try {
 				if (this.masterTask.id)
 					await this._update()
+					
 				else
 					await this._create()
 
@@ -593,4 +609,8 @@ v-table, tbody
 
 td:not(:last-child)
 	border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+@media screen and (max-width: 522px)
+	.files
+		margin-top: 104px !important
 </style>