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

<div class="spt-container">
    <div class="spt-accordion">
        <div class="d-flex justify-content-between align-items-start">
            <h2>{{'basic.tasks' | translate}}</h2>
            <button class="btn btn-primary" (click)="openModalNewTask()">{{'basic.new-task' | translate}}</button>
        </div>
        <div class="tasks mb-3" *ngFor="let task of tasks">
            <div class="card p-3">
                <div class="position-relative" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
                     aria-expanded="false"
                     aria-controls="collapseExample">
                    <h3 class="m-0">{{task.partnerName}}</h3>
                    <span class="info d-flex position-absolute">
                        <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
                        <span class="importance" [attr.data-importance]="task.prio"></span>
                    </span>
                    <h2 class="m-0">{{task.headline}}</h2>
                </div>
                <div class="collapse" id="collapse-{{ApiConverter.extractId(task.id)}}">
                    <div class="pt-3 pe-5 position-relative">
                        <p class="m-0">{{task.description}}</p>
                        <p>Zugewiesen an: {{task.assignedToName}}</p>
                        <span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
                              data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
                    </div>
                </div>
            </div>
            <div *ngIf="task.id && taskNotesVisibility.get(task.id)">
                <div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <p>{{ taskNote.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
                            <p>{{ taskNote.ownerName }}</p>
                        </div>
                        <div>
                            <p>{{ taskNote.message }}</p>
                        </div>
                        <span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
                              data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end mt-1">
                <span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
                      (click)="showTaskNotes(task)">
                    <ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
                    <ng-container *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
                </span>
                <span role="button" class="badge bg-secondary p-2" (click)="openModalNewTaskNote(task)">{{'basic.comment-it' | translate}}</span>
            </div>
        </div>
        <mat-paginator *ngIf="tasks.length > 0" class="rounded-1"
                       [pageSizeOptions]="[10,20,30]"
                       [length]="tasksLength"
                       (page)="tasksHandlePageEvent($event)"
                       [pageSize]="tasksPageSize"
                       [pageIndex]="tasksPageIndex"
                       showFirstLastButtons>
        </mat-paginator>
    </div>
</div>