File
Implements
Metadata
| selector |
app-answer-question-list |
| styleUrls |
./answer-question-list.component.scss |
| templateUrl |
./answer-question-list.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
ngOnChanges
|
ngOnChanges()
|
|
|
|
|
|
formGroups
|
Type : FormGroup[]
|
|
|
|
Public
store
|
Type : Store
|
|
|
import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { Answer } from 'src/app/core/data/models/answer.model';
import { Select, Store } from '@ngxs/store';
import { InterviewState } from 'src/app/core/ngxs/interview.state';
import { Observable } from 'rxjs';
import { Question } from 'src/app/core/data/models/question.model';
import { FormGroup, FormBuilder } from '@angular/forms';
import { UpdateAnswer } from 'src/app/core/ngxs/actions/inteview.actions';
@Component({
selector: 'app-answer-question-list',
templateUrl: './answer-question-list.component.html',
styleUrls: ['./answer-question-list.component.scss'],
})
export class AnswerQuestionListComponent implements OnChanges {
@Input() answers: Answer[];
@Select(InterviewState.questions) questions$: Observable<Question[]>;
formGroups: FormGroup[];
constructor(public store: Store, private fb: FormBuilder) {}
ngOnChanges() {
this.formGroups = [];
for (const answer of this.answers) {
if (this.formGroups)
this.formGroups.push(
this.fb.group({
result: [answer?.result],
responsible: [answer?.responsible],
documentation: [answer?.documentation],
procedure: [answer?.procedure],
reason: [answer?.reason],
proof: [answer?.proof],
annotation: [answer?.annotation],
}),
);
}
}
onSave() {
for (const [i, a] of this.answers.entries()) {
const formGroup = this.formGroups[i];
const answer: Answer = {
...a,
proof: formGroup.get('proof').value,
result: formGroup.get('result').value,
documentation: formGroup.get('documentation').value,
procedure: formGroup.get('procedure').value,
reason: formGroup.get('reason').value,
annotation: formGroup.get('annotation').value,
responsible: formGroup.get('responsible').value,
};
this.store.dispatch(new UpdateAnswer(answer));
}
}
}
<header class="mt-1 header-container-1">
<h5 data-cy="faccrit">
Basisfragen
</h5>
<button status="primary" hero (click)="onSave()" nbButton data-cy="save">
<nb-icon icon="save-outline"></nb-icon>
speichern
</button>
</header>
<nb-accordion [id]="answer.questionId" class="mt-2" *ngFor="let answer of answers; let i = index">
<nb-accordion-item expanded class="mb-2" data-cy="question-accordeon-item">
<nb-accordion-item-header data-cy="question-card-header">{{ (questions$ | async | questionById: answer.questionId)?.textDe }} </nb-accordion-item-header>
<nb-accordion-item-body>
<form [formGroup]="formGroups[i]" class="container-interview-form" data-cy="question-form">
<div class="container-checkboxes">
<nb-checkbox formControlName="result" data-cy="question-result">Ergebnis</nb-checkbox>
<nb-checkbox formControlName="responsible" data-cy="question-responsible">Verantwortlicher</nb-checkbox>
<nb-checkbox formControlName="documentation" data-cy="question-documentation">Dokumentation</nb-checkbox>
<nb-checkbox formControlName="procedure" data-cy="question-strategy">Vorgehen</nb-checkbox>
</div>
<div class="container-inputs-item-1">
<label class="label">Begründung</label>
<textarea formControlName="reason" spellcheck="false" fullWidth nbInput data-cy="question-reason"></textarea>
</div>
<div class="container-inputs-item-2">
<label class="label">Bemerkung</label>
<textarea formControlName="annotation" spellcheck="false" fullWidth nbInput data-cy="question-note"></textarea>
</div>
<div class="container-inputs-item-3">
<label class="label">Nachweis</label>
<textarea formControlName="proof" spellcheck="false" fullWidth nbInput data-cy="question-certificate"></textarea>
</div>
</form>
</nb-accordion-item-body>
</nb-accordion-item>
</nb-accordion>
@import '../../../../sass/utils';
.header-container-1 {
display: flex;
justify-content: space-between;
}
.container-checkboxes {
grid-row: 1 / 3;
display: grid;
}
.container-inputs-item-1 {
grid-column: 2 / 4;
}
.container-inputs-item-2 {
grid-column: 2 / 3;
}
.container-inputs-item-3 {
grid-column: 3 / 4;
}
.container-interview-form {
display: grid;
grid-template-columns: auto 1fr 1fr;
gap: 20px;
}
Legend
Html element with directive