matsen-tool-fe/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html

<div class="spt-container">
    <div class="card">
        <div class="card-body row">
            <div class="col-4">
                <h1>{{ partner.name }}</h1>
                <p>{{ partner.street }} {{ partner.streetNo }}<br/>
                    {{ partner.zip }} {{ partner.city }}<br/>
                    {{ partner.country }}</p>
                <p>Sprache: Deutsch</p>
            </div>
            <div class="col-4">
                <h2>10002</h2>
                <dl>
                    <dt>Telefon:</dt>
                    <dd>0177 289 23 02</dd>
                    <dt>Website:</dt>
                    <dd><a href="{{partner.website}}" target="_blank">{{ partner.website }}</a></dd>
                    <dt>Streckenpunkt:</dt>
                    <dd>AT-Salzburg</dd>
                    <dt>Geschäftsbuchungsgruppe:</dt>
                    <dd>DE-EU</dd>
                    <dt>MwSt.-Geschäftsbuchungsgruppe:</dt>
                    <dd>DE-DE</dd>
                    <dt>Kreditlimit:</dt>
                    <dd>50.000 €</dd>
                </dl>
            </div>
            <div class="col-4">
                <img *ngIf="partner.logoUrl !== null && partner.logoUrl !== undefined" src="{{partner.logoUrl}}"
                     width="247"
                     height="94" alt="{{partner.name}}" title="{{partner.name}}"/>
            </div>
            <span class="position-absolute bi p-2"
                  [class.bi-heart]="partnerFollow === null"
                  [class.bi-heart-fill]="partnerFollow !== null"
                  [class.user-follows]="partnerFollow !== null"
                  data-type="user-tool" data-action="follow"
                  (click)="followPartner($event)"></span>
            <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"
                  (click)="openModalEditPartner()"></span>
        </div>
    </div>
</div>
<div class="spt-container">
    <div class="contacts">
        <div class="d-flex justify-content-between align-items-start">
            <h2>{{ 'basic.contacts' | translate }}</h2>
            <button class="btn btn-primary" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }}
            </button>
        </div>
        <div class="row">
            <div class="col-4" *ngFor="let contact of contacts">
                <div class="card">
                    <div class="card-body row">
                        <div class="col-8">
                            <h2>{{ contact.firstName }} {{ contact.lastName }}</h2>
                            <p><a href="mailto:{{contact.email}}">{{ contact.email }}</a><br/>
                                {{ contact.phone }}<br/>
                                {{ contact.position }}</p>
                        </div>
                        <div class="col-4">
                            <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"
                                 ngSrc="{{contact.imageUrl}}" width="247" height="94"
                                 alt="{{contact.firstName}} {{contact.lastName}}"
                                 title="{{contact.firstName}} {{contact.lastName}}"/>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end mt-1 mb-4">
                    <span role="button" (click)="navigateToContactDetails(contact)"
                          class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
                </div>
            </div>
        </div>
        <mat-paginator *ngIf="contacts.length > 0" class="rounded-1"
                       [pageSizeOptions]="[6,12,18]"
                       [length]="contactsLength"
                       (page)="contactsHandlePageEvent($event)"
                       [pageSize]="contactsPageSize"
                       [pageIndex]="contactsPageIndex"
                       showFirstLastButtons>
        </mat-paginator>
    </div>
</div>
<div class="spt-container">
    <div class="posts">
        <div class="d-flex justify-content-between align-items-start">
            <h2>Kunden Details</h2>
        </div>
        <div class="card mb-3">
            <div class="card-body">
                <div>
                    <h3>Viel Platz für Freitext</h3>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                        ut
                        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
                        dolores
                        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                        ut
                        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
                        dolores
                        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
                        amet.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<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 HH:mm':'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>
<div class="spt-container">
    <div class="posts">
        <div class="d-flex justify-content-between align-items-start">
            <h2>{{ 'basic.posts' | translate }}</h2>
            <button class="btn btn-primary" (click)="openModalNewPosting()">{{ 'basic.new-post' | translate }}</button>
        </div>
        <div class="post mb-3" *ngFor="let post of posts">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <p>{{ post.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
                        <p>{{ post.ownerName }}</p>
                    </div>
                    <div>
                        <h3>{{ post.headline }}</h3>
                        <p>{{ post.message }}</p>
                    </div>
                    <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2"
                          data-type="user-tool"
                          data-action="edit" (click)="openModalEditPosting(post)"></span>
                </div>
            </div>
            <div *ngIf="post.id && commentsVisibility.get(post.id)">
                <div class="card ms-5" *ngFor="let comment of post.comments">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <p>{{ comment.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
                            <p>{{ comment.ownerName }}</p>
                        </div>
                        <div>
                            <p>{{ comment.message }}</p>
                        </div>
                        <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2"
                              data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end mt-1">
                <span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
                      (click)="showComments(post)">
                    <ng-container *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
                    <ng-container *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
                </span>
                <span role="button" class="badge bg-secondary p-2"
                      (click)="openModalNewComment(post)">{{ 'basic.comment-it' | translate }}</span>
            </div>
        </div>
        <mat-paginator *ngIf="posts.length > 0" class="rounded-1"
                       [pageSizeOptions]="[10,20,30]"
                       [length]="postsLength"
                       (page)="postsHandlePageEvent($event)"
                       [pageSize]="postsPageSize"
                       [pageIndex]="postsPageIndex"
                       showFirstLastButtons>
        </mat-paginator>
    </div>
</div>