Feat(task): Added support for Office 365 events, that are not editable from the application

app/src/plugins/tm@modal/master-task/_components/a-tasks-table.vue

@@ -15,11 +15,19 @@
 					<p v-if="!subtask.is_finished">Neukončený</p>
 				</td>
 				<td class="task-action">
-					<div class="d-flex justify-start">
-						<img v-if="subtask.is_finished" class="pencil-icon is-finished" :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt="checkmark-icon" @click.stop="clickCompleteTask(subtask)" />
-						<img v-if="!subtask.is_finished" class="pencil-icon" :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt="checkmark-icon" @click.stop="clickCompleteTask(subtask)" />
-						<img class="pencil-icon ml-2" :src="require('@/plugins/app/_img/icons/eye.svg')" alt="pencil-icon" @click.stop="openTaskModal(subtask)" />
-						<img class="trash-icon" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon" @click.stop="openDeleteTaskModal(subtask)" />
+					<div class="d-flex justify-start align-center">
+						<!-- TODO office365: Only for office365 events -->
+						<template v-if="true">
+							<img class="pencil-icon ml-2" :src="eye" alt="pencil-icon" @click.stop="openTaskModal(subtask)" />
+							<img class="office-icon" :src="office365" />
+						</template>
+
+						<template v-else>
+							<img v-if="subtask.is_finished" class="pencil-icon is-finished" :src="checkmark" alt="checkmark-icon" @click.stop="clickCompleteTask(subtask)" />
+							<img v-if="!subtask.is_finished" class="pencil-icon" :src="checkmark" alt="checkmark-icon" @click.stop="clickCompleteTask(subtask)" />
+							<img class="pencil-icon ml-2" :src="eye" alt="pencil-icon" @click.stop="openTaskModal(subtask)" />
+							<img class="trash-icon" :src="bin" alt="trash-icon" @click.stop="openDeleteTaskModal(subtask)" />
+						</template>
 					</div>
 				</td>
 			</tr>
@@ -29,6 +37,8 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import { bin, eye, office365, checkmark } from '@/plugins/app/_img'
+
 
 export default {
 	props: {
@@ -38,6 +48,15 @@ export default {
 		}
 	},
 
+	data() {
+		return {
+			checkmark,
+			bin,
+			eye,
+			office365
+		}
+	},
+
 	computed: {
 		...mapGetters('tm', ['enrichedEmployees']),
 
@@ -60,11 +79,18 @@ export default {
 		},
 
 		openTaskModal(subtask) {
-			this.$events.emit('show-subtask-modal', { subtask, editMode: false })
+			// TODO office365: Only for office365 events
+			return this.editOfficeEvent(subtask)
+
+			// this.$events.emit('show-subtask-modal', { subtask, editMode: false })
 		},
 
 		async clickCompleteTask(subtask) {
 			this.$events.emit('show-complete-task-modal', { subtask })
+		},
+
+		editOfficeEvent(subtask) {
+			this.$events.emit('show-unable-to-edit-office-task-modal', { subtask })
 		}
 	}
 }
@@ -78,6 +104,10 @@ v-table, tbody
 td:not(:last-child)
 	border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
 
+.office-icon
+	height: 20px
+	margin-left: 12px
+
 .line-clamp
 	display: -webkit-box
 	-webkit-line-clamp: 2

app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue

@@ -0,0 +1,47 @@
+<template>
+	<v-dialog v-model="visible" max-width="750" persistent>
+		<v-card>
+			<div class="d-flex justify-space-between align-center">
+				<h1>Sub Task zosynchronizovaný z Office365 sa nedá upravovat. Upravte ho vo svojom kalendári a pockajte
+					na zosynchronizovanie s Task Managerom</h1>
+
+					<v-icon
+					@click.stop="closeModal()"
+					icon="mdi-close"
+					size="large"
+				></v-icon>
+			</div>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'
+
+export default {
+	mixins: [ modalMixin ],
+	emits: ['close', 'on-subtask-edited'],
+
+	data() {
+		return {
+			visible: false,
+			subtask: null
+		}
+	},
+
+	methods: {
+		async showModal({ subtask }) {
+			this.subtask = subtask
+			this.visible = true
+		},
+
+		async complete() {
+			console.log('complete')
+		},
+
+		closeModal() {
+			this.visible = false
+		}
+	}
+}
+</script>