From 07c9598ec368730fa31192bb38f5be47a9816038 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Wed, 20 Jan 2021 13:04:58 +0100
Subject: [PATCH] fix(form) : add progress bar + fix bug scroll page

---
 src/app/form/form.component.html | 17 +++++++-
 src/app/form/form.component.scss | 69 ++++++++++++++++++--------------
 src/app/form/form.component.ts   |  4 ++
 3 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index 32fdc9d60..de9fb691a 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -275,6 +275,16 @@
     <h3>Création de compte</h3>
   </div>
   <div class="content">
+    <div
+      class="progressBar"
+      *ngIf="currentPage != 0"
+      fxLayout="row"
+      fxLayoutAlign="space-between center"
+      fxLayoutGap="20px"
+    >
+      <label for="progressForm">{{ progressStatus | number: '1.0-0' }}% </label>
+      <progress id="progressForm" max="100" [value]="progressStatus"></progress>
+    </div>
     <div *ngIf="currentPage == 0" class="home page" fxLayout="column" fxLayoutAlign="space-between">
       <h2>Ajouter votre structure</h2>
       <img src="../../assets/form/schedule.svg" alt="logo schedule" />
@@ -301,7 +311,12 @@
     </div>
     <div *ngIf="currentPage == 2" class="page"></div>
   </div>
-  <div *ngIf="currentPage != 0" class="footer" fxLayout="row" fxLayoutAlign="space-around center">
+  <div
+    *ngIf="currentPage != 0 && currentPage != nbPagesForm"
+    class="footer"
+    fxLayout="row"
+    fxLayoutAlign="space-around center"
+  >
     <button class="btn previous" (click)="previousPage()"><span class="chevron left"></span>Précédent</button>
     <button class="btn next" (click)="nextPage()">Suivant<span class="chevron right"></span></button>
   </div>
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index ce5df45cb..3f7028be6 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -2,6 +2,7 @@
 @import '../../assets/scss/breakpoint';
 @import '../../assets/scss/color';
 @import '../../assets/scss/typography';
+
 .form {
   position: fixed;
   background: white;
@@ -14,6 +15,9 @@
     height: calc(100vh);
     top: 0;
   }
+  h3 {
+    margin: 0;
+  }
 }
 
 .footer {
@@ -41,12 +45,13 @@
   @media #{$tablet} {
     display: block !important;
   }
-  h3 {
-    margin: 0;
-  }
 }
 .content {
   padding: 0 16px;
+  display: block;
+  overflow-y: auto;
+  height: 100vh;
+
   h2 {
     @include cn-bold-28;
     color: $secondary-color;
@@ -55,39 +60,27 @@
     @include cn-bold-24;
   }
   .page {
-    display: block;
-    height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-height-phone});
-
-    overflow-y: auto;
-    @media #{$tablet} {
-      height: calc(100vh - #{$header-height-phone} - #{$footer-height-phone});
-    }
     &.home {
-      height: calc(100vh - #{$header-height} - #{$footer-height});
-      @media #{$tablet} {
-        // -1px because of border-bottom of Header
-        height: calc(100vh - #{$header-height-phone} - 1px);
-      }
+      height: 100%;
       .btnStart {
         text-align: center;
       }
     }
     &.informations {
       ul {
-        list-style: none;
-        padding: 0;
-        span {
-          padding-top: 2px; // Align text with bullet list
-          position: absolute;
-        }
-        li::before {
-          content: '\2022';
+        padding-left: 24px;
+        li::marker {
           color: $secondary-color;
-          font-weight: bold;
-          display: inline-block;
-          width: 1em;
           font-size: 26px;
         }
+        li > * {
+          vertical-align: text-bottom;
+        }
+        li {
+          @include cn-regular-18;
+          line-height: 24px;
+          margin: 10px 0;
+        }
       }
     }
   }
@@ -97,10 +90,6 @@
   p {
     @include cn-regular-18;
   }
-  li {
-    @include cn-regular-18;
-    line-height: 36px;
-  }
 }
 
 .btn {
@@ -156,3 +145,23 @@
     }
   }
 }
+.progressBar {
+  height: 50px;
+  progress {
+    width: 100%;
+    height: 6px;
+    border-radius: 7px;
+    &::-webkit-progress-bar {
+      background-color: $white;
+    }
+    &::-webkit-progress-value {
+      background-color: $secondary-color;
+      border-radius: 12px;
+    }
+  }
+  label {
+    @include cn-bold-14;
+    color: $secondary-color;
+    min-width: 26px;
+  }
+}
diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
index d841c833c..da44eded2 100644
--- a/src/app/form/form.component.ts
+++ b/src/app/form/form.component.ts
@@ -43,6 +43,8 @@ export class FormComponent implements OnInit {
 
   //New var form
   public currentPage = 0;
+  public progressStatus = 0;
+  public nbPagesForm = 13;
 
   constructor(
     private structureService: StructureService,
@@ -279,8 +281,10 @@ export class FormComponent implements OnInit {
 
   public nextPage(): void {
     this.currentPage++;
+    this.progressStatus += 100 / this.nbPagesForm;
   }
   public previousPage(): void {
     this.currentPage--;
+    this.progressStatus -= 100 / this.nbPagesForm;
   }
 }
-- 
GitLab