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

<template>
  <div>
    <Z-tasks-search
      @search="onSearch"
      @employee-selected="onEmployeeSelected"
      @update-sort-order="onUpdateSortOrder"
    />

    <W-loadable
      :content="filteredConceptTasks"
      :emptyMessage="
        searchQuery.length
          ? 'Neboli nájdené žiadne úlohy'
          : 'Nenašli sa žiadne záznamy'
      "
    >
      <A-concepts-table :subtasks="filteredConceptTasks" />
    </W-loadable>
  </div>
</template>

<script>
import ZTasksSearch from '@/plugins/tm@overview/_components/z-tasks-search.vue';
import { mapGetters } from 'vuex';
import AConceptsTable from './_components/a-concepts-table.vue';

export default {
  components: {
    ZTasksSearch,
    AConceptsTable,
  },

  data() {
    return {
      searchQuery: '',
      sortOrder: null,
      conceptSubtasks: null,
    };
  },

  async ionViewWillEnter() {
    await this.loadConceptTasks();
  },

  async mounted() {
    await this.loadConceptTasks();

    this.$events.on('on-subtask-edited', async () => {
      await this.loadConceptTasks();
    });

    this.$events.on('on-subtask-deleted', async () => {
      await this.loadConceptTasks();
    });
  },

  unmounted() {
    this.$events.off('on-subtask-edited');
    this.$events.off('on-subtask-deleted');
  },

  computed: {
    ...mapGetters('tm', ['mastertasks']),

    filteredConceptTasks() {
      if (!this.conceptSubtasks) return null;

      let filteredSubtasks = this.conceptSubtasks.filter((subtask) => {
        return (
          this.filterParams(
            this.searchQuery,
            subtask.master_task?.name || subtask.title,
          ) || this.filterParams(this.searchQuery, subtask.project_code)
        );
      });

      //Sorting by name A-Z
      if (this.sortOrder === 'nameAsc') {
        filteredSubtasks.sort((a, b) => {
          const nameA = (a.title || a.master_task || '').toLowerCase();
          const nameB = (b.title || b.master_task || '').toLowerCase();
          return nameA.localeCompare(nameB);
        });
        //Sorting by name Z-A
      } else if (this.sortOrder === 'nameDesc') {
        filteredSubtasks.sort((a, b) => {
          const nameA = (a.title || a.master_task || '').toLowerCase();
          const nameB = (b.title || b.master_task || '').toLowerCase();
          return nameB.localeCompare(nameA);
        });
        //Sorting by date Newest-Oldest
      } else if (this.sortOrder === 'deadlineDesc') {
        filteredSubtasks.sort((a, b) => {
          const deadlineA = a.deadline
            ? new Date(a.deadline)
            : new Date(this.getMasterTaskDeadline(a));
          const deadlineB = b.deadline
            ? new Date(b.deadline)
            : new Date(this.getMasterTaskDeadline(b));
          return deadlineB - deadlineA;
        });
        //Sorting by date Oldest-Newest
      } else if (this.sortOrder === 'deadlineAsc') {
        filteredSubtasks.sort((a, b) => {
          const deadlineA = a.deadline
            ? new Date(a.deadline)
            : new Date(this.getMasterTaskDeadline(a));
          const deadlineB = b.deadline
            ? new Date(b.deadline)
            : new Date(this.getMasterTaskDeadline(b));
          return deadlineA - deadlineB;
        });
      }

      return filteredSubtasks;
    },
  },

  methods: {
    async loadConceptTasks(employeeId = null) {
      try {
        const params = { type: 'concept' };
        if (employeeId) {
          params.employee_id = employeeId;
        } else {
          params.employee_id = this.$store.getters['auth/user'].id;
        }

        const queryParameters = new URLSearchParams(params).toString();
        const { subtasks } = await this.$axios.get_auth(
          `v1/subtasks?${queryParameters}`,
        );
        this.conceptSubtasks = subtasks;
      } catch (error) {
        this.$toast.error('Nepodarilo sa načítať koncepty!');

        if (process.env.NODE_ENV === 'development')
          console.log('[tasks-concepts.vue] Error: ', error);
      }
    },

    onSearch(searchQuery) {
      this.searchQuery = searchQuery;
    },

    async onEmployeeSelected(id) {
      await this.loadConceptTasks(id);
    },

    onUpdateSortOrder(newSortOrder) {
      this.sortOrder = newSortOrder;
    },

    filterParams(searchQuery, row) {
      if (!row) return false;
      return row.toLowerCase().includes(searchQuery.toLowerCase());
    },

    getMasterTaskDeadline(subtask) {
      return subtask.master_task_deadline;
    },
  },
};
</script>