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

<div class="home-container pb-5">
    <div class="pt-4">
        <div class="container">
            <h1>{{ 'user.hello' | translate }} {{ user?.firstName }}!</h1>
            <p *ngIf="userIsAdmin"><a routerLink="/users">Manage Users</a></p>
        </div>
    </div>

    <div class="spt-home-cards">
        <div class="container">
            <div class="row pt-4 pb-4 d-flex">
                <div class="col d-flex">
                    <a class="card" routerLink="/customer" routerLinkActive="active">
                        <div class="card-body position-relative bi bi-emoji-heart-eyes">
                            <h3 class="position-absolute m-0">{{ 'basic.customer' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col d-flex">
                    <a class="card" routerLink="/supplier" routerLinkActive="active">
                        <div class="card-body position-relative bi bi-emoji-kiss">
                            <h3 class="position-absolute m-0">{{ 'basic.supplier' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col d-flex">
                    <a class="card" routerLink="/service" routerLinkActive="active">
                        <div class="card-body position-relative bi bi-emoji-smile">
                            <h3 class="position-absolute m-0">{{ 'basic.service' | translate }}</h3>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="container mb-5">
            <div class="row pt-4 pb-4 d-flex">
                <div class="col d-flex">
                    <a class="card" routerLink="/products" routerLinkActive="active">
                        <div class="card-body position-relative bi bi-droplet-fill">
                            <h3 class="position-absolute m-0">{{ 'basic.products' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col d-flex">
                    <a class="card" routerLink="/tasks" routerLinkActive="active">
                        <div class="card-body position-relative bi bi-list-check">
                            <h3 class="position-absolute m-0">{{ 'basic.tasks' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col d-flex">
                    <a class="card" routerLink="/documents" routerLinkActive="active">
                        <div class="card-body position-relative bi bi-journals">
                            <h3 class="position-absolute m-0">{{ 'basic.documents' | translate }}</h3>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container spt-container">
        <app-toggle #togglePosts [headline]="('user.my' | translate) + ' ' + ('basic.tasks' | translate)">
            <div class="spt-accordion position-relative">
                <button class="btn btn-primary toggle-btn" (click)="openModalNewTask()">{{'basic.new-task' | translate}}</button>
                <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" [innerHTML]="apiConverter.getSafeLongtext(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>
                    <ng-container *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' }}</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>
                    </ng-container>

                    <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>
        </app-toggle>
    </div>

<!--    <div class="container spt-container">-->
<!--        <div class="d-flex justify-content-between align-items-start">-->
<!--            <h2>{{'user.my' | translate}} {{'basic.customer' | translate}}</h2>-->
<!--        </div>-->
<!--        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"-->
<!--               class="mat-elevation-z8 mb-3">-->

<!--            <ng-container matColumnDef="pos">-->
<!--                <th mat-header-cell *matHeaderCellDef>-->
<!--                    {{ 'overview.number' | translate }}-->
<!--                </th>-->
<!--                <td mat-cell-->
<!--                    *matCellDef="let element">{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }}-->
<!--                </td>-->
<!--            </ng-container>-->

<!--            <ng-container matColumnDef="image">-->
<!--                <th mat-header-cell *matHeaderCellDef>-->
<!--                    {{ 'overview.logo' | translate }}-->
<!--                </th>-->
<!--                <td mat-cell *matCellDef="let element">-->
<!--                    <img role="button" src="{{ element.logoUrl }}" (click)="navigateToPartnerDetails(element)" width="40"-->
<!--                         height="40"/>-->
<!--                </td>-->
<!--            </ng-container>-->

<!--            <ng-container matColumnDef="name">-->
<!--                <th mat-header-cell *matHeaderCellDef mat-sort-header-->
<!--                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ partnerNameOne }}">-->
<!--                    {{ partnerNameOne }}-->
<!--                </th>-->
<!--                <td mat-cell *matCellDef="let element"><span role="button"-->
<!--                                                             (click)="navigateToPartnerDetails(element)">{{ element.name }}</span>-->
<!--                </td>-->
<!--            </ng-container>-->

<!--            <ng-container matColumnDef="address">-->
<!--                <th mat-header-cell *matHeaderCellDef mat-sort-header="address"-->
<!--                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.address' | translate }}">-->
<!--                    {{ 'overview.address' | translate }}-->
<!--                </th>-->
<!--                <td mat-cell *matCellDef="let element">{{ element.street }} {{ element.streetNo }}-->
<!--                    <br/>{{ element.zip }} {{ element.city }}-->
<!--                    <br/>{{ element.country }}-->
<!--                </td>-->
<!--            </ng-container>-->

<!--            <ng-container matColumnDef="website">-->
<!--                <th mat-header-cell *matHeaderCellDef mat-sort-header-->
<!--                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.website' | translate }}">-->
<!--                    {{ 'overview.website' | translate }}-->
<!--                </th>-->
<!--                <td mat-cell *matCellDef="let element"><a href="{{ element.website }}"-->
<!--                                                          target="_blank">{{ element.website }}</a>-->
<!--                </td>-->
<!--            </ng-container>-->

<!--            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>-->
<!--            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>-->
<!--        </table>-->
<!--        <mat-paginator class="rounded-1"-->
<!--                       [pageSizeOptions]="[10,25,50]"-->
<!--                       [length]="length"-->
<!--                       (page)="handlePageEvent($event)"-->
<!--                       [pageSize]="pageSize"-->
<!--                       [pageIndex]="pageIndex"-->
<!--                       showFirstLastButtons>-->
<!--        </mat-paginator>-->
<!--    </div>-->
</div>