File
Implements
Metadata
| selector |
app-interview-list |
| styleUrls |
./interview-list.component.scss |
| templateUrl |
./interview-list.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 { Audit } from 'src/app/core/data/models/audit.model';
import { Observable } from 'rxjs';
import { Store, Select } from '@ngxs/store';
import { AuditState } from 'src/app/core/ngxs/audit.state';
import { FacCrit } from 'src/app/core/data/models/faccrit.model';
import { AppRouterState } from 'src/app/core/ngxs/app-router.state';
import { Interview } from 'src/app/core/data/models/interview.model';
import { InterviewState } from 'src/app/core/ngxs/interview.state';
@Component({
selector: 'app-interview-list',
templateUrl: './interview-list.component.html',
styleUrls: ['./interview-list.component.scss'],
})
export class InterviewListComponent implements OnInit {
@Select(AuditState.facCrits) facCrits$: Observable<FacCrit[]>;
@Select(AppRouterState.auditId) auditId$: Observable<number>;
interviews$: Observable<Interview[]>;
audit$: Observable<Audit>;
constructor(private store: Store) {}
ngOnInit() {
this.auditId$.subscribe(id => {
this.audit$ = this.store.select(AuditState.audit(id));
this.interviews$ = this.store.select(InterviewState.interviewsByAuditId(id));
});
}
}
<header>
<button [disabled]="!(audit$ | async)?.scope.length" [routerLink]="['new']" nbButton status="primary" hero data-cy="new-interview">
<div class="min-500">
<nb-icon icon="plus"></nb-icon>
Neues Interview
</div>
<div class="max-500">
<nb-icon icon="plus"></nb-icon>
</div>
</button>
</header>
<div class="fac-crits" *ngIf="(audit$ | async)?.scope.length > 0; else noFacrits">
<nb-accordion [id]="factor.id" *ngFor="let factor of (audit$ | async)?.scope | factors">
<nb-accordion-item expanded data-cy="factor-card">
<nb-accordion-item-header class="subtitle-2" data-cy="factor-header">{{ factor.name }}</nb-accordion-item-header>
<nb-accordion-item-body data-cy="faccrit-body">
<nb-list *ngIf="interviews$ | async | interviewsByFacCritId: factor.id as interviews; else noInterviews">
<nb-list-item *ngFor="let interview of interviews">
<app-interview-card [interview]="interview" [facCritId]="factor.id" data-cy="interview"></app-interview-card>
</nb-list-item>
</nb-list>
<ng-template #noInterviews>
<div class="hint-no-interviews label" data-cy="noInterviews">
Keine Interviews vorhanden
</div>
</ng-template>
<nb-card [id]="criteria.id" class="mt-2" *ngFor="let criteria of (audit$ | async)?.scope | criteriaByFactorId: factor.id">
<nb-card-header class="subtitle-2" data-cy="criteria-header">
{{ criteria.name }}
</nb-card-header>
<nb-card-body>
<nb-list *ngIf="interviews$ | async | interviewsByFacCritId: criteria.id as interviews; else noInterviews">
<nb-list-item *ngFor="let interview of interviews">
<app-interview-card [interview]="interview" [facCritId]="criteria.id" data-cy="interview"></app-interview-card>
</nb-list-item>
</nb-list>
<ng-template #noInterviews>
<div class="hint-no-interviews label">
Keine Interviews vorhanden
</div>
</ng-template>
</nb-card-body>
</nb-card>
</nb-accordion-item-body>
</nb-accordion-item>
</nb-accordion>
</div>
<ng-template #noFacrits>
<div class="hint-no-interviews" data-cy="emptyScope">
<h6 class="text-hint mb-1">Leerer Scope</h6>
<p class="label">Fügen Sie dem Audit ISO/IEC Faktoren & Kriterien hinzu</p>
</div>
</ng-template>
<nb-layout>
<router-outlet></router-outlet>
</nb-layout>
@import '../../../../sass/utils';
header {
margin: 20px 0 10px 0;
display: grid;
justify-items: right;
}
nb-accordion {
margin-bottom: 15px;
}
app-interview-card {
position: relative;
padding-left: 30px;
}
nb-card {
margin-bottom: 0px;
}
li {
margin-left: 20px;
}
.hint-no-interviews {
margin: 0 auto;
text-align: center;
}
nb-list-item {
display: grid;
}
nb-accordion-item-header,
nb-card-header {
background: #f7f9fc !important;
}
nb-accordion-item-header {
border-radius: 0.25rem !important;
}
nb-accordion-item.expanded nb-accordion-item-header {
border-radius: 0.25rem 0.25rem 0 0 !important;
}
Legend
Html element with directive