import { AfterViewInit, ChangeDetectorRef, Component, Inject, OnChanges, OnInit } from '@angular/core'; import { BaseComponent } from '../example/base-page/base.component'; import { ConfigService } from '../../services/config.service'; import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-answers', templateUrl: './answers.component.html', styleUrls: ['./answers.component.scss'], }) export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges { allAnswersAreValid = false; answerList = []; currentHeader: any = ''; display: boolean; constructor(public config: ConfigService, @Inject(DOCUMENT) private document: any, private cd: ChangeDetectorRef) { super(config); this.answerList = this.config.answers; } // todo, manage validation of each page in a common way ngOnInit(): void {} ngOnChanges() { this.checkValidAnswers(); } checkValidAnswers() { this.allAnswersAreValid = true; this.config.answers.forEach((answer) => { if (!answer.text.length) { this.allAnswersAreValid = false; return; } }); } ngAfterViewInit() { this.focusOnAnswer(0); this.checkValidAnswers(); } trackFunction(index: number, item: any): number { return item.id; } addAnswer() { this.config.answers.push({ id: this.config.answers.length + 1, text: '', url: '', file: '', literal: '', date_object: null, timeList: [], }); this.cd.detectChanges(); // to refresh the view before focusing on the new input this.focusOnAnswer(this.config.answers.length - 1); } focusOnAnswer(i) { const AnswersDomToFocus = this.document.querySelectorAll('.answers .answer'); const dom = AnswersDomToFocus[i]; if (dom.focus) { dom.focus(); } if (dom.select) { dom.select(); } } navigateOrDelete(event: KeyboardEvent, i) { if (event.ctrlKey && event.key == 'd') { this.config.answers.splice(i, 1); } if (event.key == 'ArrowUp' && i > 0) { this.focusOnAnswer(i - 1); } if (event.key == 'ArrowDown' && i < this.config.answers.length) { this.focusOnAnswer(i + 1); } } showModalForPictureOfAnswer(answer) { // TODO this.currentHeader = answer; this.display = true; // this.config.todo(); } }