File
Implements
Metadata
| selector |
app-audit-info |
| styleUrls |
./audit-info.component.scss |
| templateUrl |
./audit-info.component.html |
Constructor
constructor(store: Store)
|
|
|
Parameters :
| Name |
Type |
Optional |
| store |
Store
|
No
|
|
|
auditId$
|
Type : Observable<number>
|
Decorators :
@Select(AppRouterState.auditId)
|
|
|
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Audit } from 'src/app/core/data/models/audit.model';
import { Store, Select } from '@ngxs/store';
import { AuditState } from 'src/app/core/ngxs/audit.state';
import { AppRouterState } from 'src/app/core/ngxs/app-router.state';
@Component({
selector: 'app-audit-info',
templateUrl: './audit-info.component.html',
styleUrls: ['./audit-info.component.scss'],
})
export class AuditInfoComponent implements OnInit {
@Select(AppRouterState.auditId) auditId$: Observable<number>;
audit$: Observable<Audit>;
constructor(private store: Store) {}
ngOnInit() {
this.auditId$.subscribe(id => (this.audit$ = this.store.select(AuditState.audit(id))));
}
}
<br />
<nb-card fullWidth>
<nb-card-header>
<div class="wrapper-header">
Kontaktpersonen
<button [routerLink]="['edit']" nbContextMenuPlacement="left" nbContextMenuTrigger="focus" ghost nbButton data-cy="audit-options">
<nb-icon icon="edit-outline"></nb-icon>
</button>
</div>
</nb-card-header>
<div *ngIf="(audit$ | async).contactPersons as contactPersons; else noContacts">
<nb-card-body>
<nb-list>
<nb-list-item *ngFor="let contactPerson of contactPersons">
<app-contact-person-card [contactPerson]="contactPerson" data-cy="contact-person-card"></app-contact-person-card>
</nb-list-item>
</nb-list>
</nb-card-body>
</div>
<ng-template #noContacts>
<nb-card-body>
<div class="hint-no-contacts">
<h6 class="text-hint mb-1">Keine Kontakte</h6>
<p class="label">Fügen Sie dem Audit Kontaktpersonen hinzu</p>
</div>
</nb-card-body>
</ng-template>
</nb-card>
<nb-layout>
<router-outlet></router-outlet>
</nb-layout>
@import '../../../../sass/utils';
.edit-icon-bar {
text-align: right;
}
.audit-params {
margin-top: 7px;
}
.content-active {
padding-left: 0;
padding-right: 0;
}
.factor-container {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0px;
}
}
.wrapper-header {
display: flex;
justify-content: space-between;
}
.hint-no-contacts {
margin: 0 auto;
text-align: center;
padding: 40px;
}
nb-card-body {
padding: 0;
}
Legend
Html element with directive