framadate-responsive/src/app/pages/answers/answers.component.ts

100 lines
2.6 KiB
TypeScript
Raw Normal View History

2020-01-20 15:01:56 +01:00
import {AfterViewInit, ChangeDetectorRef, Component, Inject, OnChanges, OnInit} from '@angular/core';
2019-08-10 17:41:01 +02:00
import {BaseComponent} from '../base-page/base.component';
2019-12-03 17:20:57 +01:00
import {ConfigService} from '../../services/config.service';
2019-08-10 17:41:01 +02:00
2019-08-10 21:00:05 +02:00
import {DOCUMENT} from '@angular/common';
2019-08-10 17:41:01 +02:00
@Component({
selector: 'framadate-answers',
templateUrl: './answers.component.html',
styleUrls: ['./answers.component.scss']
})
2020-01-20 15:01:56 +01:00
export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges {
allAnswersAreValid = false;
2019-08-10 17:41:01 +02:00
answerList = [];
currentHeader: any = "";
display: boolean;
2019-08-10 18:14:00 +02:00
2019-08-11 16:21:49 +02:00
constructor(public config: ConfigService,
2019-08-10 21:00:05 +02:00
@Inject(DOCUMENT) private document: any,
private cd: ChangeDetectorRef) {
2019-08-10 17:41:01 +02:00
super(config);
2019-08-10 18:14:00 +02:00
this.answerList = this.config.answers;
2019-08-10 17:41:01 +02:00
}
// todo, manage validation of each page in a common way
ngOnInit() {
}
2020-01-20 15:01:56 +01:00
ngOnChanges() {
this.checkValidAnswers();
}
checkValidAnswers() {
this.allAnswersAreValid = true;
this.config.answers.forEach(answer => {
if (!answer.text.length) {
this.allAnswersAreValid = false;
return;
}
});
}
ngAfterViewInit() {
2020-01-20 15:01:56 +01:00
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,
2020-01-20 13:38:57 +01:00
text: '',
2020-02-19 17:12:54 +01:00
url: '',
2020-01-20 13:38:57 +01:00
file: '',
2020-02-19 17:12:54 +01:00
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) {
2019-08-10 21:00:05 +02:00
const AnswersDomToFocus = this.document.querySelectorAll('.answers .answer');
const dom = AnswersDomToFocus[i];
2019-08-10 21:00:05 +02:00
if (dom.focus) {
dom.focus();
}
if (dom.select) {
dom.select();
}
}
2019-08-10 18:14:00 +02:00
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);
2019-08-10 17:41:01 +02:00
}
}
2020-01-16 15:35:11 +01:00
showModalForPictureOfAnswer(answer) {
// TODO
2020-01-20 13:38:57 +01:00
this.currentHeader = answer;
this.display = true;
// this.config.todo();
2020-01-16 15:35:11 +01:00
}
2019-08-10 17:41:01 +02:00
}