File
Extends
Implements
Metadata
| selector |
app-interview-form |
| styleUrls |
./interview-form.component.scss |
| templateUrl |
./interview-form.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
Constructor
constructor(fb: FormBuilder, dialogService: NbDialogService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| fb |
FormBuilder
|
No
|
| dialogService |
NbDialogService
|
No
|
|
|
cancelButtonName
|
Type : string
|
|
|
|
|
|
submitButtonName
|
Type : string
|
|
|
|
|
Methods
|
checkedFacCrits
|
checkedFacCrits()
|
|
|
|
Returns : {}
|
|
toggleCriteriaChecked
|
toggleCriteriaChecked(factorId: string, checked)
|
|
|
Parameters :
| Name |
Type |
Optional |
| factorId |
string
|
No
|
| checked |
|
No
|
|
|
facCritSelected
|
Default value : false
|
|
|
Accessors
|
contactPersons
|
getcontactPersons()
|
|
|
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Interview, InterviewStatus } from 'src/app/core/data/models/interview.model';
import { FormBuilder, Validators, FormControl } from '@angular/forms';
import { NbDialogService } from '@nebular/theme';
import { Select } from '@ngxs/store';
import { AuditState } from 'src/app/core/ngxs/audit.state';
import { Observable } from 'rxjs';
import { ContactPerson } from 'src/app/core/data/models/contact-person.model';
import { FacCrit } from 'src/app/core/data/models/faccrit.model';
import { AbstractFormComponent } from '../abstract-form-component';
import { ContactPersonState } from 'src/app/core/ngxs/contact-person.state';
@Component({
selector: 'app-interview-form',
templateUrl: './interview-form.component.html',
styleUrls: ['./interview-form.component.scss'],
})
export class InterviewFormComponent extends AbstractFormComponent implements OnInit {
@Input() interview: Interview;
@Input() scope: FacCrit[];
@Output() formSubmitted = new EventEmitter<{ interview: Interview; scope: FacCrit[] }>();
@Select(AuditState.facCrits) allFacCrits$: Observable<FacCrit[]>;
@Select(ContactPersonState.contactPersons) contactPersons$: Observable<ContactPerson[]>;
facCritSelected = false;
constructor(private fb: FormBuilder, protected dialogService: NbDialogService) {
super(dialogService);
}
get startDate() {
return this.formGroup.get('startDate');
}
get facCrit() {
return this.formGroup.get('facCrit');
}
get contactPersons() {
return this.formGroup.get('contactPersons');
}
ngOnInit() {
this.formGroup = this.fb.group({
startDate: [this.interview?.startDate ?? new Date()],
contactPersons: [this.interview?.contactPersons, Validators.required],
});
for (const facCrit of this.scope) {
this.formGroup.addControl(String(facCrit.id), new FormControl(false));
}
this.formGroup.valueChanges.subscribe(() => {
for (const facCrit of this.scope) {
if (this.formGroup.get(String(facCrit.id)).value === true) {
return (this.facCritSelected = true);
}
}
return (this.facCritSelected = false);
});
}
checkedFacCrits() {
const result: FacCrit[] = [];
for (const crit of this.scope) {
const checked = this.formGroup.get(String(crit.id)).value;
if (checked) {
result.push(crit);
}
}
return result;
}
onSubmit() {
const interview: Interview = {
startDate: this.startDate.value,
status: InterviewStatus.Active,
contactPersons: this.contactPersons.value,
};
this.formSubmitted.emit({ interview, scope: this.checkedFacCrits() });
}
toggleCriteriaChecked(factorId: string, checked: true) {
const criteria = this.scope.filter(x => x.referenceId === +factorId);
for (const crit of criteria) {
this.formGroup.get(String(crit.id))?.setValue(checked);
}
}
}
<form [formGroup]="formGroup" data-cy="add-interview-form">
<nb-card fullWidth>
<nb-card-header>Neues Interview</nb-card-header>
<nb-card-body>
<div class="mb-2">
<nb-accordion>
<nb-accordion-item>
<nb-accordion-item-header class="label" data-cy="interview-scope-header">ISO/IEC 25010 Faktoren / Kriterien</nb-accordion-item-header>
<nb-accordion-item-body data-cy="interview-scope-body">
<div class="wrapper-facCrits mt-2">
<div class="wrapper-facCrits-inner" *ngFor="let factor of scope | factors">
<nb-checkbox [formControlName]="factor.id" data-cy="interview-scope-factor">{{ factor.name }}</nb-checkbox>
<nb-checkbox
class="criteria"
*ngIf="(scope | criterias: factor.id).length > 0"
(checkedChange)="toggleCriteriaChecked(factor.id, $event)"
status="warning"
data-cy="interview-scope-radio"
>Alle Kriterien</nb-checkbox
>
<nb-checkbox class="criteria" [formControlName]="criteria.id" *ngFor="let criteria of scope | criterias: factor.id" data-cy="interview-scope-criteria">{{
criteria.name
}}</nb-checkbox>
</div>
</div>
</nb-accordion-item-body>
</nb-accordion-item>
</nb-accordion>
</div>
<hr />
<div class="mb-2">
<label class="label">Startdatum</label>
<input formControlName="startDate" readonly nbInput fullWidth [nbDatepicker]="datePickerStart" data-cy="interview-start-input" />
<nb-datepicker #datePickerStart></nb-datepicker>
</div>
<div class="mb-2">
<label class="label">Kontaktpersonen</label>
<nb-select formControlName="contactPersons" multiple fullWidth data-cy="interview-contacts">
<nb-option *ngFor="let contactPerson of contactPersons$ | async" [value]="contactPerson" data-cy="interview-contact">{{ contactPerson.forename + ' ' + contactPerson.surname }}</nb-option>
</nb-select>
</div>
</nb-card-body>
<nb-card-footer>
<button (click)="onCancel()" hero nbButton data-cy="cancel-interview-data-form">
abbrechen
</button>
<button [disabled]="!facCritSelected" (click)="onSubmit()" status="primary" hero nbButton data-cy="submit-interview-data-form">
Hinzufügen
</button>
</nb-card-footer>
</nb-card>
</form>
@import 'src/sass/utils';
nb-card-footer {
display: flex;
justify-content: space-between;
border-radius: 0;
padding: 10px 20px 10px 20px;
}
.wrapper-facCrits {
max-width: 600px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 20px;
@media screen and(max-width: 500px) {
grid-template-columns: 1fr;
nb-checkbox {
margin: 0px 10px 0px 0px;
}
}
& .criteria {
margin-left: 20px;
}
}
nb-checkbox {
display: block;
}
hr {
border-bottom: 3px dotted rgb(228, 233, 242);
}
Legend
Html element with directive