forked from tykayn/funky-framadate-front
⚡ ability to add a new answer and focus
This commit is contained in:
parent
d413774d3b
commit
488b9f677a
@ -8,9 +8,10 @@
|
||||
</p>
|
||||
<ol>
|
||||
<li #answers *ngFor="let answer of config.answers; index as i;trackBy trackFunction"
|
||||
class="anwser">
|
||||
class="answer-item">
|
||||
<input
|
||||
type="text"
|
||||
class="answer"
|
||||
[(ngModel)]="answer.text"
|
||||
placeholder="réponse"
|
||||
>
|
||||
@ -19,7 +20,7 @@
|
||||
</ol>
|
||||
<button
|
||||
class="btn-outline btn-block"
|
||||
(click)="config.answers.push({id:config.answers.length+1,text:''})">
|
||||
(click)="addAnswer()">
|
||||
Ajouter
|
||||
</button>
|
||||
<a [routerLink]="'/step/recapitulatif'" class="btn btn-block">Voyons ce que ça donne</a>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
|
||||
import {BaseComponent} from '../base-page/base.component';
|
||||
import {ConfigService} from '../../config.service';
|
||||
|
||||
@ -11,7 +11,8 @@ export class AnswersComponent extends BaseComponent implements OnInit {
|
||||
|
||||
private answerList = [];
|
||||
|
||||
constructor(config: ConfigService) {
|
||||
constructor(config: ConfigService,
|
||||
private cd: ChangeDetectorRef) {
|
||||
super(config);
|
||||
this.answerList = this.config.answers;
|
||||
}
|
||||
@ -20,13 +21,26 @@ export class AnswersComponent extends BaseComponent implements OnInit {
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
trackFunction(index: number, item: any): number { return item.id; }
|
||||
trackFunction(index: number, item: any): number {
|
||||
return item.id;
|
||||
}
|
||||
|
||||
addAnswer() {
|
||||
this.config.answers.push(
|
||||
{
|
||||
id: this.config.answers.length + 1,
|
||||
text: ''
|
||||
});
|
||||
this.cd.detectChanges(); // to refresh the view before focusing on the new input
|
||||
const AnswersDomToFocus = document.querySelectorAll('.answers .answer');
|
||||
AnswersDomToFocus[AnswersDomToFocus.length - 1].focus();
|
||||
}
|
||||
|
||||
// add a new answer on the press of ENTER in an input
|
||||
addWhenEnterKey(event) {
|
||||
console.log('event', event);
|
||||
if (event.keyCode === 13) {
|
||||
this.config.addAnswer();
|
||||
this.addAnswer();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
@ -1,3 +1,5 @@
|
||||
<h1 i18n>
|
||||
Images
|
||||
</h1>
|
||||
<a [routerLink]="'/step/visibility'" class="btn btn-block">ok</a>
|
||||
|
||||
|
@ -3,5 +3,8 @@
|
||||
</h1>
|
||||
<section>
|
||||
TODO
|
||||
<pre>
|
||||
{{config |json}}
|
||||
</pre>
|
||||
</section>
|
||||
<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>
|
||||
|
@ -36,6 +36,9 @@ textarea {
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: 1.25em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
|
Loading…
Reference in New Issue
Block a user