src/app/features/audits/audits.component.ts
| selector | app-audit-list |
| styleUrls | ./audits.component.scss |
| templateUrl | ./audits.component.html |
Properties |
Methods |
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| activeAudits$ |
Type : Observable<Audit[]>
|
Decorators :
@Select(undefined)
|
| archivedAudits$ |
Type : Observable<Audit[]>
|
Decorators :
@Select(undefined)
|
import { Component, OnInit } from '@angular/core';
import { Select } from '@ngxs/store';
import { Observable } from 'rxjs';
import { AuditState } from 'src/app/core/ngxs/audit.state';
import { AuditStatus, Audit } from 'src/app/core/data/models/audit.model';
@Component({
selector: 'app-audit-list',
templateUrl: './audits.component.html',
styleUrls: ['./audits.component.scss'],
})
export class AuditsComponent implements OnInit {
@Select(AuditState.auditByStatus(AuditStatus.Planned, AuditStatus.Active))
activeAudits$: Observable<Audit[]>;
@Select(AuditState.auditByStatus(AuditStatus.Cancelled, AuditStatus.Finished))
archivedAudits$: Observable<Audit[]>;
ngOnInit() {}
}
<header class="grid-1-auto-auto">
<h4 data-cy="heading">Audits</h4>
<a routerLink="new" hero size="medium" nbButton status="primary" data-cy="new-audit">
<div class="min-500">
<nb-icon icon="plus"></nb-icon>
Neuer Audit
</div>
<div class="max-500">
<nb-icon icon="plus"></nb-icon>
</div>
</a>
<button size="medium" nbButton hero data-cy="export-audits">
<div class="min-500">
<nb-icon icon="download"></nb-icon>
(4) Exportieren
</div>
<div class="max-500">
<nb-icon icon="download"></nb-icon>
</div>
</button>
</header>
<nb-tabset data-cy="audits-list">
<nb-tab responsive tabTitle="Aktiv" tabIcon="activity-outline" data-cy="active-audits">
<div *ngIf="(activeAudits$ | async) && (activeAudits$ | async)?.length > 0; else noActiveAudits">
<app-audit-card *ngFor="let audit of activeAudits$ | async | sortAudit" [audit]="audit"></app-audit-card>
</div>
<ng-template #noActiveAudits>
<div class="hint-no-audits" data-cy="no-active-audits">
<h6 class="text-hint">Keine aktiven Audits vorhanden</h6>
<p class="label">Legen sie einen Audit <a class="text-primary" routerLink="new">hier</a> an</p>
</div>
</ng-template>
</nb-tab>
<nb-tab responsive tabTitle="Archiv" tabIcon="archive-outline" data-cy="archived-audits">
<div *ngIf="(archivedAudits$ | async) && (archivedAudits$ | async)?.length > 0; else noArchivedAudits">
<app-audit-card *ngFor="let audit of archivedAudits$ | async | sortAudit" [audit]="audit"></app-audit-card>
</div>
<ng-template #noArchivedAudits>
<div class="hint-no-audits" data-cy="no-archived-audits">
<h6 class="text-hint">Keine archivierten Audits vorhanden</h6>
</div>
</ng-template>
</nb-tab>
</nb-tabset>
<nb-layout>
<router-outlet></router-outlet>
</nb-layout>
./audits.component.scss
@import '../../../sass/utils';
.audit-cards {
display: grid;
gap: 10px;
}
.hint-no-audits {
max-width: 900px;
margin: 100px auto 0 auto;
text-align: center;
}
.content-active {
padding-left: 0;
padding-right: 0;
}
a {
text-decoration: none;
}