⚡ erasable inputs on first config screen ok

src/app/app.component.ts

@@ -1,6 +1,7 @@
-import {Component} from '@angular/core';
+import {Component, Inject} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
 import {Router} from '@angular/router';
+import {DOCUMENT} from "@angular/common";
 
 @Component({
     selector: 'app-root',
@@ -21,6 +22,7 @@ export class AppComponent {
     private step: string;
 
     constructor(private translate: TranslateService,
+                @Inject(DOCUMENT) private document,
                 private route: Router) {
         this.translate.setDefaultLang(this.currentLang);
         this.detectCurrentTabOnRouteChange();
@@ -29,6 +31,7 @@ export class AppComponent {
 
     detectCurrentTabOnRouteChange() {
         this.route.events.subscribe((event: any) => {
+            this.scrollGoToTop();
 
             if (event.url) {
 
@@ -68,4 +71,8 @@ export class AppComponent {
     toggleMenu() {
         this.menuVisible = !this.menuVisible;
     }
+
+    scrollGoToTop() {
+        this.document.documentElement.scrollTop = 0;
+    }
 }

src/app/pages/create-or-retrieve/create-or-retrieve.component.html

@@ -28,7 +28,7 @@
         >
             <label
                 class="description"
-                for="email"
+                for="sendemail"
                 i18n
             >
                 <i class='fa fa-envelope' ></i >
@@ -38,7 +38,7 @@
                 [(ngModel)]="config.myEmail"
                 class='input'
                 autofocus="autofocus"
-                id="email"
+                id="sendemail"
                 name="mail"
                 required="required"
                 type="email"
@@ -47,6 +47,7 @@
                 [disabled]="!config.myEmail || !config.myEmail.length"
                 [ngClass]="{'btn--primary': config.myEmail}"
                 class="btn btn--full"
+                id='sendemailbutton'
                 i18n-value="'config.find_button'|translate"
                 type="submit"
             />

src/app/pages/dates/dates.component.html

@@ -37,24 +37,32 @@
     {{"dates.add_interval"|translate}}
 </button >
 
-
 <button
     (click)="emptyAll()"
     class="btn btn-warning"
     id="empty_button"
 >{{"dates.empty"|translate}}
 </button >
-<section *ngIf="showDateInterval" class="date-interval">
+<section
+    *ngIf="showDateInterval"
+    class="date-interval" >
     <!--    TODO à mettre en popup-->
     <hr >
     <h2 > {{"dates.add_interval"|translate}}</h2 >
     <p >
         {{"dates.interval_propose"|translate}}
-        <input (change)="countDays()" [(ngModel)]="startDateInterval" type="date">
+        <input
+            (change)="countDays()"
+            [(ngModel)]="startDateInterval"
+            type="date" >
         {{"dates.interval_span"|translate}}
-        <input (change)="countDays()" [(ngModel)]="endDateInterval" type="date">
+        <input
+            (change)="countDays()"
+            [(ngModel)]="endDateInterval"
+            type="date" >
     </p >
-    <button (click)="addIntervalOfDates()"
+    <button
+        (click)="addIntervalOfDates()"
         class="btn btn-block" >
         {{"dates.interval_button"|translate}}
         {{intervalDays}}
@@ -91,7 +99,10 @@
                 name="timeChoices_{{id}}"
                 type="name"
             >
-            <button (click)="config.timeList.splice(id, 1)" class="btn btn-warning">X</button>
+            <button
+                (click)="config.timeList.splice(id, 1)"
+                class="btn btn-warning" >X
+            </button >
         </div >
     </div >
     <hr >
@@ -147,7 +158,13 @@
 
 <a
     [routerLink]="'/step/end'"
-    class="btn btn-block"
+    class="btn btn--full btn--primary"
 >
     C'est parfait!
 </a >
+<a
+    [routerLink]="'/step/home'"
+    class="prev"
+>
+    Retour
+</a >

src/app/pages/home/home.component.html

@@ -42,6 +42,7 @@
             placeholder="{{'creation.choose_title_placeholder'|translate}}"
             type="name"
         >
+        <framadate-erasable-input [(inputModel)]="config.title" ></framadate-erasable-input >
     </div >
 
     <div >
@@ -55,6 +56,7 @@
             placeholder="{{'creation.name_placeholder'|translate}}"
             type="name"
         >
+        <framadate-erasable-input [(inputModel)]="config.myName" ></framadate-erasable-input >
     </div >
 
     <div >
@@ -64,6 +66,7 @@
             i18n
         >
             {{"creation.description"|translate}}:
+            <framadate-erasable-input [(inputModel)]="config.description" ></framadate-erasable-input >
         </label >
         <br >
         <textarea

src/app/ui/erasable-input/erasable-input.component.html

@@ -1,3 +1,6 @@
-<button class="erase" (click)="eraseInput()">
+<button
+    class="erase btn btn--warning"
+    [disabled]='!inputModel'
+    (click)="eraseInput()" >
     <i class="fa fa-times" ></i >
 </button >

src/app/ui/erasable-input/erasable-input.component.ts

@@ -14,7 +14,6 @@ export class ErasableInputComponent implements OnInit {
     }
 
     set inputModel(val) {
-        // this.inputModel = val;
     }
 
     constructor() {
@@ -25,7 +24,7 @@ export class ErasableInputComponent implements OnInit {
 
     eraseInput() {
         this.inputModel = '';
-        this.inputModelChange.emit(this.inputModel);
+        this.inputModelChange.emit('');
     }
 
 }