From 488b9f677ac9048062304a55f9ad6d6ff5630444 Mon Sep 17 00:00:00 2001
From: tykayn <tykayn@gmail.com>
Date: Sat, 10 Aug 2019 18:31:15 +0200
Subject: [PATCH] :zap: ability to add a new answer and focus

---
 src/app/pages/answers/answers.component.html  |  5 ++--
 src/app/pages/answers/answers.component.ts    | 24 +++++++++++++++----
 .../pages/pictures/pictures.component.html    |  2 ++
 src/app/pages/resume/resume.component.html    |  3 +++
 src/assets/_global_layout.scss                |  3 +++
 5 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/answers/answers.component.html b/src/app/pages/answers/answers.component.html
index 8014ef37..65bbdc4d 100644
--- a/src/app/pages/answers/answers.component.html
+++ b/src/app/pages/answers/answers.component.html
@@ -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>
diff --git a/src/app/pages/answers/answers.component.ts b/src/app/pages/answers/answers.component.ts
index adc9d872..a17b1a15 100644
--- a/src/app/pages/answers/answers.component.ts
+++ b/src/app/pages/answers/answers.component.ts
@@ -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';
 
@@ -9,9 +9,10 @@ import {ConfigService} from '../../config.service';
 })
 export class AnswersComponent extends BaseComponent implements OnInit {
 
-    private answerList=[];
+    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;
     }
diff --git a/src/app/pages/pictures/pictures.component.html b/src/app/pages/pictures/pictures.component.html
index 712bbaa7..5e1fcaf8 100644
--- a/src/app/pages/pictures/pictures.component.html
+++ b/src/app/pages/pictures/pictures.component.html
@@ -1,3 +1,5 @@
 <h1 i18n>
 	Images
 </h1>
+<a [routerLink]="'/step/visibility'" class="btn btn-block">ok</a>
+
diff --git a/src/app/pages/resume/resume.component.html b/src/app/pages/resume/resume.component.html
index c99efdd8..adf36993 100644
--- a/src/app/pages/resume/resume.component.html
+++ b/src/app/pages/resume/resume.component.html
@@ -3,5 +3,8 @@
 </h1>
 <section>
 	TODO
+	<pre>
+		{{config |json}}
+	</pre>
 </section>
 <a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>
diff --git a/src/assets/_global_layout.scss b/src/assets/_global_layout.scss
index 7fa6cfe8..1bd5eafe 100644
--- a/src/assets/_global_layout.scss
+++ b/src/assets/_global_layout.scss
@@ -36,6 +36,9 @@ textarea {
 
 .btn-block {
   display: block;
+  font-weight: 600;
+  font-size: 1.25em;
+  text-align: center;
 }
 
 a {