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

<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
        v-for="subtask in subtasks"
        :key="subtask.id"
        class="cursor-pointer"
        @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 #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" style="gap: 10px">
            <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 ml-0"
                :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: 4px
				padding: 10px

.disabled
	opacity: 0.5
	pointer-events: none

tbody
	tr:hover
		background: rgba(0,0,0,.1)
</style>