matsen-tool-fe/matsen-tool/src/app/tasks/tasks.component.ts

import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {NewTaskComponent} from "@app/tasks/new-task/new-task.component";
import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
import {ModalComponent} from "@app/_components/modal/modal.component";
import {ApiConverter} from "@app/_helpers/api.converter";
import {Subscription} from "rxjs";
import {TaskJsonld, TaskNoteJsonld, TaskService} from "@app/core/api/v1";
import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
import {MatTableDataSource} from "@angular/material/table";
import {User} from "@app/_models";
import {AccountService} from "@app/_services";
import {ModalStatus} from "@app/_helpers/modal.states";
import {NewTaskNoteComponent} from "@app/tasks/new-task-note/new-task-note.component";

@Component({
    selector: 'app-tasks',
    templateUrl: './tasks.component.html',
    styleUrl: './tasks.component.scss'
})
export class TasksComponent implements OnInit, AfterViewInit {
    @ViewChild(MatPaginator) tasksPaginator: MatPaginator;

    protected user: User | null;
    protected readonly ApiConverter = ApiConverter;

    protected tasksSub: Subscription;
    protected tasks: Array<TaskJsonld>;
    protected tasksDataSource;
    protected tasksLength: number;
    protected tasksPageEvent: PageEvent;
    protected tasksPageSize: number;
    protected tasksPageIndex: number;

    protected taskNotesVisibility: Map<string, boolean>;

    protected modalOptions: NgbModalOptions = {
        centered: true
    };

    constructor(
        private modalService: NgbModal,
        private accountService: AccountService,
        private taskService: TaskService
    ) {
        this.user = this.accountService.userValue;

        this.tasksSub = new Subscription();
        this.tasks = [];
        this.tasksPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
        this.tasksDataSource = new MatTableDataSource<TaskJsonld>(this.tasks);
        this.tasksLength = 0;
        this.tasksPageEvent = new PageEvent();
        this.tasksPageSize = 10;
        this.tasksPageIndex = 0;
        this.taskNotesVisibility = new Map<string, boolean>();
    }

    ngOnInit() {
        this.getTasksData();
    }

    ngAfterViewInit() {
        this.tasksDataSource.paginator = this.tasksPaginator;
    }

    getTasksData() {
        this.tasksSub = this.taskService.tasksGetCollection(
            this.tasksPageIndex + 1,
            this.tasksPageSize,
            // TODO: User-ID muss übergeben werden können, damit man nur die Tasks bekommt, die einem User zugewiesen sind
        ).subscribe(
            data => {
                this.tasks = data["hydra:member"];
                this.tasksLength = Number(data["hydra:totalItems"]);
                this.tasks.forEach(task => {
                    if (task.id) {
                        this.taskNotesVisibility.set(task.id, false);
                    }
                });
                console.log(this.tasks);
            }
        );
    }

    tasksHandlePageEvent(e: PageEvent) {
        this.tasksPageEvent = e;
        this.tasksLength = e.length;
        this.tasksPageIndex = e.pageIndex.valueOf();
        this.tasksPageSize = e.pageSize.valueOf();
        this.getTasksData();
    }

    openModalNewTask() {
        const modalRefTask = this.modalService.open(NewTaskComponent, this.modalOptions);
        let task: TaskJsonld = {} as TaskJsonld;
        task.partner = null;
        task.completed = false;
        modalRefTask.componentInstance.task = task;
        modalRefTask.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
            if (modalStatus === ModalStatus.Submitted) {
                modalRefTask.dismiss();
                this.getTasksData();
            }
        });
    }

    openModalNewTaskNote(task: TaskJsonld) {
        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.modalOptions);
        let taskNote: TaskNoteJsonld = {} as TaskNoteJsonld;
        taskNote.task = task.id ?? null;
        modalRefTaskNote.componentInstance.taskNote = taskNote;
        modalRefTaskNote.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
            if (modalStatus === ModalStatus.Submitted) {
                modalRefTaskNote.dismiss();
                this.getTasksData();
            }
        });
    }

    openModalEditTask(task: TaskJsonld) {
        const modalRefTaskEdit = this.modalService.open(NewTaskComponent, this.modalOptions);
        modalRefTaskEdit.componentInstance.task = task;
        modalRefTaskEdit.componentInstance.dueAtValue = ApiConverter.convertDate(task.dueAt);
        modalRefTaskEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
            if (modalStatus === ModalStatus.Submitted) {
                modalRefTaskEdit.dismiss();
                this.getTasksData();
            }
        });
    }

    openModalEditTaskNote(taskNote: TaskNoteJsonld) {
        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.modalOptions);
        modalRefTaskNote.componentInstance.taskNote = taskNote;
        modalRefTaskNote.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
            if (modalStatus === ModalStatus.Submitted) {
                modalRefTaskNote.dismiss();
                this.getTasksData();
            }
        });
    }

    showTaskNotes(task: TaskJsonld) {
        if (task.id) {
            const currentVisibility = this.taskNotesVisibility.get(task.id);
            this.taskNotesVisibility.set(task.id, !currentVisibility);
        }
    }
}