From 3ada66ac5f36c38502556f18982954d2526cce0e Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Mon, 20 Jan 2020 15:15:06 +0100
Subject: [PATCH] :zap: erasable inputs on first config screen ok

---
 src/app/app.component.ts                      |   9 +-
 .../create-or-retrieve.component.html         |   5 +-
 src/app/pages/dates/dates.component.html      | 121 ++++++++++--------
 src/app/pages/home/home.component.html        |   3 +
 .../erasable-input.component.html             |   9 +-
 .../erasable-input.component.ts               |   3 +-
 6 files changed, 90 insertions(+), 60 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 07b7058d..80ecc37f 100644
--- a/src/app/app.component.ts
+++ b/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;
+    }
 }
diff --git a/src/app/pages/create-or-retrieve/create-or-retrieve.component.html b/src/app/pages/create-or-retrieve/create-or-retrieve.component.html
index 4ebcb54b..c6cd6ed0 100644
--- a/src/app/pages/create-or-retrieve/create-or-retrieve.component.html
+++ b/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"
             />
diff --git a/src/app/pages/dates/dates.component.html b/src/app/pages/dates/dates.component.html
index 9ac26db3..6c2dbae8 100644
--- a/src/app/pages/dates/dates.component.html
+++ b/src/app/pages/dates/dates.component.html
@@ -1,25 +1,25 @@
-<div i18n>
+<div i18n >
     {{"dates.title"|translate}}
-</div>
+</div >
 
-<div>
-    <label for="multi_hours">
-		<span>
+<div >
+    <label for="multi_hours" >
+		<span >
             {{"dates.hours_different"|translate}}
-		</span>
+		</span >
         <select
             [(ngModel)]="config.allowSeveralHours"
             id="multi_hours"
             name="multi_hours"
         >
-            <option value="true">{{"dates.multiple.different"|translate}}</option>
-            <option value="false">{{"dates.multiple.identical"|translate}}</option>
-        </select>
-        <span i18n>
+            <option value="true" >{{"dates.multiple.different"|translate}}</option >
+            <option value="false" >{{"dates.multiple.identical"|translate}}</option >
+        </select >
+        <span i18n >
             {{"dates.hours_each_day"|translate}}
-		</span>
-    </label>
-</div>
+		</span >
+    </label >
+</div >
 
 <button
     (click)="addDate()"
@@ -27,7 +27,7 @@
     id="add_date_button"
 >
     {{"dates.add"|translate}}
-</button>
+</button >
 <button
     (click)="showDateInterval = !showDateInterval "
     [ngClass]="{active: showDateInterval}"
@@ -35,40 +35,48 @@
     id="toggle_interval_button"
 >
     {{"dates.add_interval"|translate}}
-</button>
-
+</button >
 
 <button
     (click)="emptyAll()"
     class="btn btn-warning"
     id="empty_button"
 >{{"dates.empty"|translate}}
-</button>
-<section *ngIf="showDateInterval" class="date-interval">
+</button >
+<section
+    *ngIf="showDateInterval"
+    class="date-interval" >
     <!--    TODO à mettre en popup-->
-    <hr>
-    <h2> {{"dates.add_interval"|translate}}</h2>
-    <p>
+    <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">
-    </p>
-    <button (click)="addIntervalOfDates()"
-            class="btn btn-block">
+        <input
+            (change)="countDays()"
+            [(ngModel)]="endDateInterval"
+            type="date" >
+    </p >
+    <button
+        (click)="addIntervalOfDates()"
+        class="btn btn-block" >
         {{"dates.interval_button"|translate}}
         {{intervalDays}}
         {{"dates.interval_button_dates"|translate}}
-    </button>
-    <hr>
-</section>
-<div class="dates-list">
-    <span class="count-dates">
+    </button >
+    <hr >
+</section >
+<div class="dates-list" >
+    <span class="count-dates" >
     {{config.timeList.length}}
-    </span>
-    <span class="count-dates-txt">
+    </span >
+    <span class="count-dates-txt" >
 		{{"dates.count_time"|translate}}
-	</span>
+	</span >
     <button
         (click)="addTime()"
         *ngIf="config.allowSeveralHours=='false'"
@@ -76,7 +84,7 @@
         id="add_time_button"
     >
         {{"dates.add_time"|translate}}
-    </button>
+    </button >
 
     <div
         *ngIf="'false'==config.allowSeveralHours"
@@ -91,16 +99,19 @@
                 name="timeChoices_{{id}}"
                 type="name"
             >
-            <button (click)="config.timeList.splice(id, 1)" class="btn btn-warning">X</button>
-        </div>
-    </div>
-    <hr>
-    <span class="count-dates">
+            <button
+                (click)="config.timeList.splice(id, 1)"
+                class="btn btn-warning" >X
+            </button >
+        </div >
+    </div >
+    <hr >
+    <span class="count-dates" >
     {{config.dateList.length}}
-    </span>
-    <span>
+    </span >
+    <span >
 		{{"dates.count_dates"|translate}}
-	</span>
+	</span >
     <div
         *ngFor="let choice of config.dateList; index as id"
         class="date-choice"
@@ -114,14 +125,14 @@
             (click)="config.dateList.splice(id, 1)"
             class="btn btn-warning"
         >X
-        </button>
+        </button >
         <button
             (click)="addTimeToDate(choice, id)"
             *ngIf="config.allowSeveralHours=='true'"
             class="btn btn-primary"
         >
             {{"dates.add_time"|translate}}
-        </button>
+        </button >
         <div
             *ngIf="'true'==config.allowSeveralHours"
             class="several-times"
@@ -139,15 +150,21 @@
                     (click)="choice.timeList.splice(idTime, 1)"
                     class="btn btn-warning"
                 >X
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
+                </button >
+            </div >
+        </div >
+    </div >
+</div >
 
 <a
     [routerLink]="'/step/end'"
-    class="btn btn-block"
+    class="btn btn--full btn--primary"
 >
     C'est parfait!
-</a>
+</a >
+<a
+    [routerLink]="'/step/home'"
+    class="prev"
+>
+    Retour
+</a >
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 3a9d7523..a1c7c2df 100644
--- a/src/app/pages/home/home.component.html
+++ b/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
diff --git a/src/app/ui/erasable-input/erasable-input.component.html b/src/app/ui/erasable-input/erasable-input.component.html
index 6c3edeef..9098b675 100644
--- a/src/app/ui/erasable-input/erasable-input.component.html
+++ b/src/app/ui/erasable-input/erasable-input.component.html
@@ -1,3 +1,6 @@
-<button class="erase" (click)="eraseInput()">
-    <i class="fa fa-times"></i>
-</button>
+<button
+    class="erase btn btn--warning"
+    [disabled]='!inputModel'
+    (click)="eraseInput()" >
+    <i class="fa fa-times" ></i >
+</button >
diff --git a/src/app/ui/erasable-input/erasable-input.component.ts b/src/app/ui/erasable-input/erasable-input.component.ts
index 8a07326c..e8246c14 100644
--- a/src/app/ui/erasable-input/erasable-input.component.ts
+++ b/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('');
     }
 
 }