⚡ sync answers

src/app/config/PollConfig.ts

@@ -20,17 +20,19 @@ export class PollConfig {
     // date specific poll
     allowSeveralHours = false;
     dateList: DateOption[] = [];
-    answers: string[] = [];
+    answers: any = [{
+        id: 0,
+        text: 'réponse de démo 1'
+    },
 
-    addAnswer() {
-        this.answers.push('');
-    }
+        {
+            id: 1,
+            text: 'réponse 2'
+        },
+        {
+            id: 2,
+            text: 'la réponse D'
+        }];
 
-    removeAnswer(answer: string) {
-        const indexFound = this.answers.indexOf(answer);
-        if (indexFound !== -1) {
-            this.answers.splice(indexFound);
-        }
-    }
 
 }

src/app/form-container/form-container.component.html

@@ -46,7 +46,7 @@
 		</div>
 
 		<a
-					[routerLink]="'/step/kind'"
+					[routerLink]="'/step/answers'"
 					class="btn striked"
 					i18n="start_form">
 			C'est parti

src/app/pages/answers/answers.component.html

@@ -1,15 +1,27 @@
-<h1 i18n>
-	Choisir les propositions
-</h1>
-<p class="subtitle" i18n>
-	vous pouvez utiliser la syntaxe markdown
-</p>
-<ol
-			*ngFor="let answer of config.answers"
-			class="anwser">
-	<li>
-		<input type="text" [(ngModel)]="answer" (keydown)="addWhenEnterKey($event)">
-		<button (click)="config.removeAnswer(answer)">X</button>
-	</li>
-</ol>
-<a [routerLink]="'/step/recapitulatif'" class="btn btn-block">Voyons ce que ça donne</a>
+<div class="answers">
+
+	<h1 i18n>
+		Choisir les propositions
+	</h1>
+	<p class="subtitle" i18n>
+		vous pouvez utiliser la syntaxe markdown
+	</p>
+	<ol>
+		<li #answers *ngFor="let answer of config.answers; index as i;trackBy trackFunction"
+					class="anwser">
+			<input
+						type="text"
+						[(ngModel)]="answer.text"
+						placeholder="réponse"
+			>
+			<button (click)="config.answers.splice(i,1)">X</button>
+		</li>
+	</ol>
+	<button
+				class="btn-outline btn-block"
+				(click)="config.answers.push({id:config.answers.length+1,text:''})">
+		Ajouter
+	</button>
+	<a [routerLink]="'/step/recapitulatif'" class="btn btn-block">Voyons ce que ça donne</a>
+
+</div>

src/app/pages/answers/answers.component.ts

@@ -9,18 +9,25 @@ import {ConfigService} from '../../config.service';
 })
 export class AnswersComponent extends BaseComponent implements OnInit {
 
+    private answerList=[];
+
     constructor(config: ConfigService) {
         super(config);
+        this.answerList = this.config.answers;
     }
 
     // todo, manage validation of each page in a common way
     ngOnInit() {
     }
 
+    trackFunction(index: number, item: any): number { return item.id; }
+
     // 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();
         }
+        return;
     }
 }

src/app/ui/navigation/navigation.component.html

@@ -1,64 +1,43 @@
-<div class="choices">
+<nav class="choices">
 
 	<a
-				class="btn btn-primary"
+
 				[routerLink]="'/step/date'">
 		Aller aux dates
 	</a>
 	<a
-				class="btn btn-primary"
+
 				[routerLink]="'/step/answers'">
 		Réponses
 	</a>
 	<a
-				class="btn btn-primary"
+
 				[routerLink]="'/step/visibility'">
 		Visibilité
 	</a>
 	<a
-				class="btn btn-primary"
+
 				[routerLink]="'/step/answers'">
 		Base
 	</a>
 	<a
-				class="btn btn-primary"
+
 				[routerLink]="'/step/pictures'">
 		Images
 	</a>
 	<a
-				class="btn btn-primary"
+
 				[routerLink]="'/step/resume'">
 		Résumé
 	</a>
 	<a
-				class="btn btn-primary"
+
 				[routerLink]="'/step/kind'">
 		Aller aux options classiques
 	</a>
 	<a
-				class="btn btn-primary"
+
 				[routerLink]="'/home'">
 		Accueil
 	</a>
-	<br>
-	<button
-				(click)="nextPage()"
-				[disabled]="!formIsValid"
-				class="btn btn-primary next"
-	>
-    <span i18n>
-    précédent
-    </span>
-		<i class="fa fa-arrow-right"></i>
-	</button>
-	<button
-				(click)="nextPage()"
-				[disabled]="!formIsValid"
-				class="btn btn-primary next"
-	>
-    <span i18n>
-    suivant
-    </span>
-		<i class="fa fa-arrow-right"></i>
-	</button>
-</div>
+</nav>

src/assets/_global_layout.scss

@@ -1,12 +1,4 @@
-input, textarea,
-select {
-  @extend .funky-box;
-}
-
-textarea {
-  border-left: 3px solid $main_color_strong;
-}
-
+// form inputs
 .funky-box {
   background: $light;
   padding: 1em;
@@ -19,6 +11,17 @@ textarea {
   }
 }
 
+input, textarea,
+select {
+  @extend .funky-box;
+}
+
+textarea {
+  margin-top: 1em;
+  border-left: 3px solid $main_color_strong;
+}
+
+
 // buttons
 .btn {
   display: inline-block;
@@ -31,14 +34,31 @@ textarea {
   min-height: 1.5rem;
 }
 
+.btn-block {
+  display: block;
+}
+
 a {
   text-decoration: none;
+
+  nav & {
+    display: inline-block;
+    margin: 0.5em;
+    @extend .btn-outline, .btn;
+    color: #000;
+  }
 }
 
 .home_link {
   text-decoration: none;
 }
 
-.striked {
-  background: linear-gradient($main_color, $main_color_strong);
+.btn-outline {
+  background: $light;
+  border: solid 1px $main_color_strong;
+}
+
+.striked {
+  @extend .btn-outline;
+  color: $main_color_strong;
 }