From 835458f9af41d0ea1320b098f172debc2abf4478 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Wed, 20 Jan 2021 18:59:43 +0100
Subject: [PATCH] fix(form) : fix pages + add validation checked svg + add
input style
---
src/app/form/form.component.html | 49 ++++++++++++++------------------
src/app/form/form.component.scss | 17 +++++++++++
src/app/form/form.component.ts | 7 ++++-
src/assets/form/checked.svg | 4 +++
4 files changed, 49 insertions(+), 28 deletions(-)
create mode 100644 src/assets/form/checked.svg
diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index 2b11b64d3..ff8043be8 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -305,24 +305,6 @@
<li><span>les horaires d’ouverture</span></li>
- <li><span>la liste des ateliers que vous dispensez (optionnel)</span></li>
- </ul>
- </div>
- <div>
- <ul>
- <li><span>les coordonnées de votre structure</span></li>
-
- <li><span>les horaires d’ouverture</span></li>
-
- <li><span>la liste des ateliers que vous dispensez (optionnel)</span></li>
- </ul>
- </div>
- <div>
- <ul>
- <li><span>les coordonnées de votre structure</span></li>
-
- <li><span>les horaires d’ouverture</span></li>
-
<li><span>la liste des ateliers que vous dispensez (optionnel)</span></li>
</ul>
</div>
@@ -331,18 +313,31 @@
<div *ngIf="currentPage == 2" class="page">
<h3>Qui êtes-vous ?</h3>
<p>Ces informations ne seront pas visibles sur la plateforme</p>
- <div class="form-group">
+ <div class="form-group" fxLayout="column">
<label for="surname">Nom</label>
- <input type="text" (input)="setValidationsForm()" formControlName="surname" class="form-control" />
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input type="text" (input)="setValidationsForm()" formControlName="surname" class="form-control" />
+ <img *ngIf="accountForm.get('surname').valid" src="../../assets/form/checked.svg" alt="logo checked" />
+ </div>
+ </div>
+ <div class="form-group" fxLayout="column">
+ <label for="name">Prénom</label>
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input type="text" (input)="setValidationsForm()" formControlName="name" class="form-control" />
+ <img *ngIf="accountForm.get('name').valid" src="../../assets/form/checked.svg" alt="logo checked" />
+ </div>
</div>
- <div class="form-group">
+ <div class="form-group" fxLayout="column">
<label for="phone">Téléphone</label>
- <input
- type="text"
- formControlName="phone"
- class="form-control"
- (input)="modifyPhoneInput(accountForm, 'phone', $event.target.value)"
- />
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input
+ type="text"
+ formControlName="phone"
+ class="form-control phone"
+ (input)="modifyPhoneInput(accountForm, 'phone', $event.target.value)"
+ />
+ <img *ngIf="accountForm.get('phone').valid" src="../../assets/form/checked.svg" alt="logo checked" />
+ </div>
</div>
</div>
</form>
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index de317e588..07934258b 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -173,3 +173,20 @@
min-width: 26px;
}
}
+.form-group {
+ margin-bottom: 26px;
+}
+input {
+ margin-top: 4px;
+ background: $grey-6;
+ padding: 8px;
+ height: 40px;
+ border: 1px solid $grey-4;
+ box-sizing: border-box;
+ border-radius: 4px;
+ width: 296px;
+ @include cn-regular-14;
+ &.phone {
+ width: 205px;
+ }
+}
diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
index c61887530..1cb1ffce2 100644
--- a/src/app/form/form.component.ts
+++ b/src/app/form/form.component.ts
@@ -304,7 +304,12 @@ export class FormComponent implements OnInit {
public setValidationsForm(): void {
this.pagesValidation[0] = { valid: true };
this.pagesValidation[1] = { valid: true };
- this.pagesValidation[2] = { valid: this.accountForm.get('surname').valid && this.accountForm.get('phone').valid };
+ this.pagesValidation[2] = {
+ valid:
+ this.accountForm.get('surname').valid &&
+ this.accountForm.get('name').valid &&
+ this.accountForm.get('phone').valid,
+ };
this.updatePageValid();
}
diff --git a/src/assets/form/checked.svg b/src/assets/form/checked.svg
new file mode 100644
index 000000000..991694b27
--- /dev/null
+++ b/src/assets/form/checked.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="13" cy="13" r="13" fill="#47C562"/>
+<path d="M8 13.8182L11.8889 17L18 10" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--
GitLab