matsen-tool-fe/matsen-tool/src/app/_views/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">
                            <h3 class="m-0" *ngIf="task.partner"><a href="/{{task.partnerType}}/{{apiHelperService.extractId(task.partner)}}">{{task.partnerName}}</a></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 class="pt-3 pe-5 position-relative">
                                <p class="m-0" [innerHTML]="apiHelperService.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>