srumboard_frontend/src/app/components/tabels/task/task-table.component.ts

import { Component } from '@angular/core';
import {
  BackendService,
  ScrumTask,
  ScrumStatus,
  ScrumUser,
  ScrumCategory,
} from '../../../services/backend.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { TaskFormComponent } from '../../task-form/task-form.component';
import { TableComponentBase } from '../table-component.base';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { getNumberForPriority } from '../../../services/sorting.service';

@Component({
  selector: 'app-task-table',
  templateUrl: './task-table.component.html',
  styleUrls: ['./task-table.component.css'],
})
export class TaskTableComponent extends TableComponentBase<ScrumTask> {
  public filterUserstoryId: number | null = null;
  public filterPriority: string | null = null;
  public status: ScrumStatus[] = [];
  public users: ScrumUser[] = [];
  public categories: ScrumCategory[] = [];

  /**
   * Constructor that establishes the initial backend communication.
   * @param backendService backendService object for backend communication
   * @param modalService angular modalService to handle modals for the Form popups
   * @param route route object to extract parameters from
   */
  constructor(
    private backendService: BackendService,
    private modalService: NgbModal,
    protected route: ActivatedRoute
  ) {
    super(route);

    backendService.getTasks().subscribe((response) => {
      if (response.status > 399) {
        alert('Fehler');
      } else {
        this.items.push(...response.body);
      }
    });
    backendService.getAllStatus().subscribe((response) => {
      if (response.status > 399) {
        alert('Fehler');
      } else {
        this.status.push(...response.body);
      }
    });
    backendService.getUsers().subscribe((response) => {
      if (response.status > 399) {
        alert('Fehler');
      } else {
        this.users.push(...response.body);
      }
    });
    backendService.getCategories().subscribe((response) => {
      if (response.status > 399) {
        alert('Fehler');
      } else {
        this.categories.push(...response.body);
      }
    });
  }

  //#region getters
  /**
   * Returns a filtered list of all tasks that have a selected priority or belong to a certain userstory.
   * If no pritority or userstory to be filtered for is defined it just returns all tasks.
   */
  public get filteredItems() {
    return this.items.filter(
      (task) =>
        (this.filterUserstoryId === null ||
          task.userstoryid === this.filterUserstoryId) &&
        (this.filterPriority === null || task.priority === this.filterPriority)
    );
  }

  /**
   * Returns the title of the status that has the provided id.
   * @param id id of the searched status
   */
  getStatusTitleById(id) {
    var status = this.status.find((x) => x.id === id);
    if (!status) {
      return 'N/A';
    }
    return status.title;
  }

  /**
   * Returns the name of the iser that has the provided id.
   * @param id id of the searched user
   */
  getUserNameById(id) {
    var user = this.users.find((x) => x.id === id);
    if (!user) {
      return 'N/A';
    }
    return user.name;
  }

  /**
   * Returns the title of the category that has the provided id.
   * @param id id of the searched category
   */
  getCategoryTitleById(id) {
    var category = this.categories.find((x) => x.id === id);
    if (!category) {
      return 'N/A';
    }
    return category.title;
  }

  //#endregion getters

  //#region taskTableFunctions
  /**
   * Deletes a task by calling the delete method via the backendService and removing it from the tabel's items array.
   * @param userstory task that will be deleted
   */
  public deleteTask(task: ScrumTask) {
    this.backendService.deleteTask(task).subscribe((response) => {
      if (response.status > 399) {
        alert('Fehler');
      }
    });
    const index = this.items.indexOf(task);
    if (index !== -1) {
      this.items.splice(index, 1);
    }
  }
  //#endregion taskTableFunctions

  //#region sorters
  /**
   * Sorts the tabel's items by priority.
   */
  sortByPrio() {
    this.doNumericSort('priority', (task) =>
      getNumberForPriority(task.priority)
    );
  }

  /**
   * Sorts the tabel's items by userstoryid.
   */
  sortByTasks() {
    this.doNumericSort('userstory', (task) => task.userstoryid);
  }

  /**
   * Sorts the tabel's items by statusid
   */
  sortByStatus() {
    this.doNumericSort('statusid', (task) => task.statusid);
  }

  /**
   * Sorts the tabel's items by assignedtoid
   */
  sortByAssigned() {
    this.doNumericSort('assignedtoid', (task) => task.assignedtoid);
  }

  /**
   * Sorts the tabel's items by categoryid
   */
  sortByCategory() {
    this.doNumericSort('categoryid', (task) => task.categoryid);
  }
  //#endregion sorters

  //#region modals
  /**
   * Opens a TaskForm popup for editing a existing task or creating a new one.
   * @param editTask optional: task to edit (only needed if a task should be edited, not newly created)
   */
  public openTaskForm(editTask?: ScrumTask) {
    const modalRef = this.modalService.open(TaskFormComponent, {
      backdrop: 'static',
      keyboard: true,
      size: 'lg',
    });
    if (editTask === null) {
      modalRef.result.then((result) => {
        this.items.push(result);
      });
    }
    modalRef.componentInstance.task = editTask;
  }
  //#endregion modals
}