feat(router, sidebar, modal): add 'Tasks Concepts' route and update sidebar/menu items; enhance task modal save functionality

app/src/plugins/tm@dashboard/tasks-concepts/_components/a-concepts-table.vue

@@ -0,0 +1,179 @@
+<template>
+  <v-table>
+    <thead>
+      <tr>
+        <th class="text-left">
+          Kód projektu
+        </th>
+        <th class="text-left">Názov</th>
+        <th class="text-left">Deadline</th>
+        <th class="text-left">Najbližší neuzavretý</th>
+        <th class="text-left">Naplánované</th>
+        <th class="text-left">Zostávajúce</th>
+        <th class="text-left">Akcia</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr
+        class="cursor-pointer"
+        v-for="subtask in subtasks"
+        :key="subtask.id"
+        @click.stop="editTask(subtask, false)"
+      >
+        <td>{{ subtask.project_code }}</td>
+        <td>{{ subtask.title ?? subtask.master_task }}</td>
+        <td v-if="subtask.deadline">{{ getDeadline(subtask) }}</td>
+        <v-tooltip text="Deadline z Mastertasku" location="end">
+          <template v-slot:activator="{ props }">
+            <td v-if="!subtask.deadline" v-bind="props">
+              {{ getDeadline(subtask) }}*
+            </td>
+          </template>
+        </v-tooltip>
+        <td>{{ displayTimeblock(subtask) }}</td>
+        <td>{{ subtask.duration }} h</td>
+        <td>{{ (subtask.duration - subtask.spent_time).toFixed(2) }} h</td>
+
+        <td class="task-action">
+          <div class="d-flex justify-start align-center">
+            <template v-if="subtask.type == 'office365'">
+              <img
+                class="pencil-icon"
+                :src="eye"
+                @click.stop="editTask(subtask, false)"
+              />
+              <img class="office-icon" :src="office365" />
+            </template>
+
+            <template v-else>
+              <img
+                class="pencil-icon"
+                :src="pencil"
+                @click.stop="editTask(subtask, true)"
+              />
+              <img
+                class="pencil-icon"
+                :src="eye"
+                @click.stop="editTask(subtask, false)"
+              />
+              <img
+                class="trash-icon"
+                :src="bin"
+                @click.stop="deleteTask(subtask)"
+              />
+            </template>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>
+
+<script>
+import { bin, eye, office365, pencil } from '@/plugins/app/_img';
+
+import { mapGetters } from 'vuex';
+import moment from 'moment';
+
+export default {
+  props: {
+    subtasks: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      eye,
+      bin,
+      office365,
+      pencil,
+      loadingSubtask: {},
+    };
+  },
+
+  computed: {
+    ...mapGetters('tm', ['mastertasks']),
+  },
+
+  methods: {
+    editTask(subtask, editMode = false) {
+      this.$events.emit('show-subtask-modal', { subtask, editMode });
+    },
+
+    deleteTask(subtask) {
+      if (subtask.type == 'office365')
+        return this.$events.emit('show-unable-to-edit-office-task-modal', {
+          mode: 'delete',
+        });
+
+      this.$events.emit('show-delete-task-modal', { subtask });
+    },
+
+    getDeadline(subtask) {
+      if (subtask?.deadline)
+        return moment(subtask.deadline).format('DD.MM.yyyy');
+
+      return moment(subtask.master_task_deadline).format('DD.MM.yyyy');
+    },
+
+    getSelectedTimeblockDeadline(timeblocks) {
+      const currentDate = moment();
+
+      const unfinishedTimeblocks = timeblocks.filter(
+        (tb) => tb.is_finished === 0,
+      );
+      if (unfinishedTimeblocks.length > 0)
+        return moment(unfinishedTimeblocks[0].end).format('DD.MM.yyyy, HH:mm');
+
+      const upcomingTimeblocks = timeblocks
+        .filter((tb) => moment(tb.end).isAfter(currentDate))
+        .sort((a, b) => moment(a.end).diff(moment(b.end)));
+
+      if (upcomingTimeblocks.length > 0 && upcomingTimeblocks.is_finished === 0)
+        return moment(upcomingTimeblocks[0].end).format('DD.MM.yyyy, HH:mm');
+
+      return '';
+    },
+
+    displayTimeblock(subtask) {
+      const timeblockDeadline = this.getSelectedTimeblockDeadline(
+        subtask.timeblocks,
+      );
+
+      return timeblockDeadline !== '' ? timeblockDeadline : 'Žiadny termín';
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+v-table, th, td
+	border: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+.office-icon
+	height: 20px
+	margin-left: 12px
+
+@media screen and (max-width: 496px)
+	.task-action
+		div
+			display: flex
+			flex-direction: column
+
+			.pencil-icon, .trash-icon
+				border-radius: 50%
+				margin: 6px
+				padding: 6px
+
+.disabled
+	opacity: 0.5
+	pointer-events: none
+
+tbody
+	tr:hover
+		background: rgba(0,0,0,.1)
+</style>
+