From 626f51ef4a051fb2f17ec348d45d349849827a74 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Thu, 21 Jan 2021 18:49:52 +0100
Subject: [PATCH] fix(form) : add typePicker component
---
src/app/shared/components/index.ts | 4 +-
.../structure-type-picker.component.html | 28 ++++++
.../structure-type-picker.component.scss | 93 ++++++++++++++++++
.../structure-type-picker.component.spec.ts | 25 +++++
.../structure-type-picker.component.ts | 76 ++++++++++++++
src/assets/form/sprite.svg | 98 +++++++++++++++++++
src/assets/scss/_color.scss | 2 +
7 files changed, 325 insertions(+), 1 deletion(-)
create mode 100644 src/app/shared/components/structure-type-picker/structure-type-picker.component.html
create mode 100644 src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
create mode 100644 src/app/shared/components/structure-type-picker/structure-type-picker.component.spec.ts
create mode 100644 src/app/shared/components/structure-type-picker/structure-type-picker.component.ts
create mode 100644 src/assets/form/sprite.svg
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index e4d55982f..997f98dda 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -7,7 +7,7 @@ import { SvgIconComponent } from './svg-icon/svg-icon.component';
import { ValidatorFormComponent } from './validator-form/validator-form.component';
import { CreateAccountFormComponent } from './create-account-form/create-account-form.component';
import { AddressAutocompleteComponent } from './address-autocomplete/address-autocomplete.component';
-
+import { StructureTypePickerComponent } from './structure-type-picker/structure-type-picker.component';
// tslint:disable-next-line: max-line-length
export {
LogoCardComponent,
@@ -19,6 +19,7 @@ export {
SignInModalComponent,
CreateAccountFormComponent,
AddressAutocompleteComponent,
+ StructureTypePickerComponent,
};
// tslint:disable-next-line:variable-name
@@ -32,4 +33,5 @@ export const SharedComponents = [
SignInModalComponent,
CreateAccountFormComponent,
AddressAutocompleteComponent,
+ StructureTypePickerComponent,
];
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.html b/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
new file mode 100644
index 000000000..ef6bd1290
--- /dev/null
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
@@ -0,0 +1,28 @@
+<div class="container" fxLayout="column">
+ <div fxLayout="row" fxLayoutAlign="space-between start">
+ <div class="boutonSection" [ngClass]="{ selectedType: type.name == pickedType }" *ngFor="let type of type_data">
+ <button (click)="pickType(type.name)">
+ <div class="containerBtn">
+ <div class="btn">
+ <svg aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#' + type.logo"></use>
+ </svg>
+ </div>
+ </div>
+ </button>
+ <div class="btnText" fxLayoutAlign="center center">{{ type.name }}</div>
+ </div>
+ </div>
+ <div *ngIf="pickedType" class="tags">
+ <button
+ *ngFor="let choice of getChoices(pickedType)"
+ (click)="pickChoice(choice)"
+ [ngClass]="{ selectedChoice: choice == pickedChoice }"
+ >
+ <svg *ngIf="choice == pickedChoice" class="validate" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#validateVector'"></use>
+ </svg>
+ {{ choice }}
+ </button>
+ </div>
+</div>
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss b/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
new file mode 100644
index 000000000..8d154d670
--- /dev/null
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
@@ -0,0 +1,93 @@
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/shapes';
+
+.container {
+ height: 100%;
+}
+button {
+ outline: none;
+ border: none;
+}
+.tags {
+ background: $grey-6;
+ padding: 15px;
+ width: calc(100% + 2px);
+ margin-left: -16px;
+ height: 100%;
+ button {
+ background: $white;
+ border-radius: 20px;
+ margin: 4px;
+ max-width: 100%;
+ white-space: nowrap;
+ height: 40px;
+ padding: 0 28px;
+ @include cn-bold-14;
+ }
+}
+.selectedChoice {
+ background: $green-1 !important;
+ color: $white;
+}
+.selectedType {
+ background: $grey-6;
+ .btnText {
+ color: $secondary-color;
+ }
+}
+.boutonSection {
+ text-align: center;
+ width: 99px;
+ padding-top: 9px;
+ border-radius: 6px 6px 0px 0px;
+ .btnText {
+ min-height: 36px;
+ @include cn-bold-14;
+ margin-bottom: 12px;
+ }
+ button {
+ background: none;
+ max-width: 114px;
+ &:focus {
+ .containerBtn {
+ background: none;
+ border-color: $secondary-color;
+ }
+ }
+ }
+ .containerBtn {
+ @include background-hash;
+ padding: 0 0 4px 5px;
+ border-radius: 4px;
+ cursor: pointer;
+ border: 1px solid $grey-4;
+ .btn {
+ background: $white;
+ height: 53px;
+ width: 35px;
+ color: $secondary-color;
+ padding: 3px 16px 0px 12px;
+ display: table-cell;
+ vertical-align: middle;
+ border-radius: 4px;
+ @include btn-bold;
+ &.withIcon {
+ color: $black;
+ height: 36px;
+ }
+ }
+ }
+}
+
+svg {
+ width: 28px;
+ height: 40px;
+ fill: $secondary-color;
+ stroke: $secondary-color;
+ &.validate {
+ width: 13px;
+ height: 10px;
+ margin-left: -17px;
+ }
+}
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.spec.ts b/src/app/shared/components/structure-type-picker/structure-type-picker.component.spec.ts
new file mode 100644
index 000000000..58cc33e78
--- /dev/null
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StructureTypePickerComponent } from './structure-type-picker.component';
+
+describe('StructureTypePickerComponent', () => {
+ let component: StructureTypePickerComponent;
+ let fixture: ComponentFixture<StructureTypePickerComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ StructureTypePickerComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(StructureTypePickerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts b/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts
new file mode 100644
index 000000000..cea43c01f
--- /dev/null
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts
@@ -0,0 +1,76 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-structure-type-picker',
+ templateUrl: './structure-type-picker.component.html',
+ styleUrls: ['./structure-type-picker.component.scss'],
+})
+export class StructureTypePickerComponent implements OnInit {
+ public pickedType: string;
+ @Input() public pickedChoice?: string;
+ @Output() selectedType: EventEmitter<string> = new EventEmitter<string>();
+
+ public type_data = [
+ {
+ name: 'Publique',
+ logo: 'typeStructure_public',
+ choices: [
+ 'Mairie',
+ 'CAF',
+ 'CCAS',
+ 'Maison de la métropole',
+ 'CARSAT',
+ 'Médiathèque/Bibliothèque',
+ 'Pôle Emploi',
+ 'Préfecture',
+ 'BIJ/PIJ',
+ ],
+ },
+ {
+ name: 'Privée à but non lucratif',
+ logo: 'typeStructure_private',
+ choices: [
+ 'Association',
+ 'Centre socio-culturel',
+ 'MJC / Cyberbase',
+ 'PIMMS',
+ 'Structure information jeunesse (SIJ)',
+ 'Missions locales ',
+ ],
+ },
+ {
+ name: 'Privée à but lucratif',
+ logo: 'typeStructure_privateLucratif',
+ choices: ['Structure de formation', "Structure d'insertion"],
+ },
+ ];
+ constructor() {}
+
+ ngOnInit() {
+ if (this.pickedChoice) {
+ this.pickedType = this.getType(this.pickedChoice);
+ }
+ }
+
+ getType(nameChoice: string): string {
+ return this.type_data.filter((type) => {
+ if (type.choices.includes(nameChoice)) {
+ return type.name;
+ }
+ })[0].name;
+ }
+ getChoices(nameType: string): string[] {
+ return this.type_data.filter((type) => {
+ if (type.name == nameType) {
+ return type.choices;
+ }
+ })[0].choices;
+ }
+ pickType(type: string): void {
+ this.pickedType = type;
+ }
+ pickChoice(choice: string): void {
+ this.pickedChoice = choice;
+ this.selectedType.emit(choice);
+ }
+}
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
new file mode 100644
index 000000000..8667fa4a7
--- /dev/null
+++ b/src/assets/form/sprite.svg
@@ -0,0 +1,98 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+<symbol id="typeStructure_public" viewBox="0 0 28 31" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0002 6.44446L25.6668 13.4445H2.3335L14.0002 6.44446Z" stroke="none"/>
+<path d="M2.3335 13.4445H25.6668V14C25.6668 14.5523 25.2191 15 24.6668 15H3.3335C2.78121 15 2.3335 14.5523 2.3335 14V13.4445Z" stroke="none"/>
+<path d="M2.3335 26.6667H25.6668V28.2222H2.3335V26.6667Z" stroke="none"/>
+<path d="M0 29H28V30.5556H0V29Z" stroke="none"/>
+<rect x="4.6665" y="15.7778" width="2.33333" height="10.1111" stroke="none"/>
+<rect x="10.1113" y="15.7778" width="2.33333" height="10.1111" stroke="none"/>
+<rect x="15.5557" y="15.7778" width="2.33333" height="10.1111" stroke="none"/>
+<rect x="21" y="15.7778" width="2.33333" height="10.1111" stroke="none"/>
+<path d="M13.667 7.22222L13.667 1" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+<path d="M13.667 1.44444C13.667 1.44444 13.2781 1 12.5003 1C11.7225 1 11.3337 1.44444 11.3337 1.44444V4.11111C11.3337 4.11111 11.7225 3.66667 12.5003 3.66667C13.2781 3.66667 13.667 4.11111 13.667 4.11111V1.44444Z" stroke="none"/>
+<path d="M11.3335 4.44447C11.3335 4.44447 10.9446 4.88892 10.1668 4.88892C9.38905 4.88892 9.00016 4.44447 9.00016 4.44447V1.7778C9.00016 1.7778 9.38905 2.22225 10.1668 2.22225C10.9446 2.22225 11.3335 1.7778 11.3335 1.7778V4.44447Z" stroke="none"/>
+</symbol>
+
+<symbol id="validateVector" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.00002 5.81818L5.8889 9L12 2" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+
+<symbol id="typeStructure_private" viewBox="0 0 20 45" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.56201 15.4203L16.562 10V43H3.56201V15.4203Z" stroke="none"/>
+<rect x="0.562012" y="44" width="19" height="1" stroke="none"/>
+<path d="M7.06201 0L7.56201 15H6.56201L7.06201 0Z" stroke="none"/>
+<rect x="5.56201" y="17" width="4" height="1" fill="white" stroke="none"/>
+<rect x="10.562" y="17" width="4" height="1" fill="white" stroke="none"/>
+<rect x="3.56201" y="17" width="1" height="1" fill="white" stroke="none"/>
+<rect x="3.56201" y="19" width="1" height="1" fill="white" stroke="none"/>
+<rect x="3.56201" y="21" width="1" height="1" fill="white" stroke="none"/>
+<rect x="3.56201" y="23" width="1" height="1" fill="white" stroke="none"/>
+<rect x="3.56201" y="25" width="1" height="1" fill="white" stroke="none"/>
+<rect x="3.56201" y="27" width="1" height="1" fill="white" stroke="none"/>
+<rect x="3.56201" y="29" width="1" height="1" fill="white" stroke="none"/>
+<rect x="3.56201" y="31" width="1" height="1" fill="white" stroke="none"/>
+<rect x="3.56201" y="33" width="1" height="1" fill="white" stroke="none"/>
+<rect x="3.56201" y="35" width="1" height="1" fill="white" stroke="none"/>
+<rect x="3.56201" y="37" width="1" height="1" fill="white" stroke="none"/>
+<rect x="3.56201" y="39" width="1" height="1" fill="white" stroke="none"/>
+<rect x="15.562" y="17" width="1" height="1" fill="white" stroke="none"/>
+<rect x="15.562" y="19" width="1" height="1" fill="white" stroke="none"/>
+<rect x="15.562" y="21" width="1" height="1" fill="white" stroke="none"/>
+<rect x="15.562" y="23" width="1" height="1" fill="white" stroke="none"/>
+<rect x="15.562" y="25" width="1" height="1" fill="white" stroke="none"/>
+<rect x="15.562" y="27" width="1" height="1" fill="white" stroke="none"/>
+<rect x="15.562" y="29" width="1" height="1" fill="white" stroke="none"/>
+<rect x="15.562" y="31" width="1" height="1" fill="white" stroke="none"/>
+<rect x="15.562" y="33" width="1" height="1" fill="white" stroke="none"/>
+<rect x="15.562" y="35" width="1" height="1" fill="white" stroke="none"/>
+<rect x="15.562" y="37" width="1" height="1" fill="white" stroke="none"/>
+<rect x="15.562" y="39" width="1" height="1" fill="white" stroke="none"/>
+<rect x="5.56201" y="19" width="4" height="1" fill="white" stroke="none"/>
+<rect x="10.562" y="19" width="4" height="1" fill="white" stroke="none"/>
+<rect x="5.56201" y="21" width="4" height="1" fill="white" stroke="none"/>
+<rect x="10.562" y="21" width="4" height="1" fill="white" stroke="none"/>
+<rect x="5.56201" y="23" width="4" height="1" fill="white" stroke="none"/>
+<rect x="10.562" y="23" width="4" height="1" fill="white" stroke="none"/>
+<rect x="5.56201" y="25" width="4" height="1" fill="white" stroke="none"/>
+<rect x="10.562" y="25" width="4" height="1" fill="white" stroke="none"/>
+<rect x="5.56201" y="27" width="4" height="1" fill="white" stroke="none"/>
+<rect x="10.562" y="27" width="4" height="1" fill="white" stroke="none"/>
+<rect x="5.56201" y="29" width="4" height="1" fill="white" stroke="none"/>
+<rect x="10.562" y="29" width="4" height="1" fill="white" stroke="none"/>
+<rect x="5.56201" y="31" width="4" height="1" fill="white" stroke="none"/>
+<rect x="10.562" y="31" width="4" height="1" fill="white" stroke="none"/>
+<rect x="5.56201" y="33" width="4" height="1" fill="white" stroke="none"/>
+<rect x="10.562" y="33" width="4" height="1" fill="white" stroke="none"/>
+<rect x="5.56201" y="35" width="4" height="1" fill="white" stroke="none"/>
+<rect x="10.562" y="35" width="4" height="1" fill="white" stroke="none"/>
+<rect x="5.56201" y="37" width="4" height="1" fill="white" stroke="none"/>
+<rect x="10.562" y="37" width="4" height="1" fill="white" stroke="none"/>
+<rect x="5.56201" y="39" width="4" height="1" fill="white" stroke="none"/>
+<rect x="10.562" y="39" width="4" height="1" fill="white" stroke="none"/>
+</symbol>
+
+<symbol id="typeStructure_privateLucratif" viewBox="0 0 20 25" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.12402 8H16.124V23H3.12402V8Z" stroke="none"/>
+<path d="M9.79077 10.5L9.79077 1" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.79077 1.44444C9.79077 1.44444 9.40188 1 8.6241 1C7.84633 1 7.45744 1.44444 7.45744 1.44444V4.11111C7.45744 4.11111 7.84633 3.66667 8.6241 3.66667C9.40188 3.66667 9.79077 4.11111 9.79077 4.11111V1.44444Z" stroke="none"/>
+<path d="M7.45728 4.44444C7.45728 4.44444 7.06839 4.88889 6.29061 4.88889C5.51283 4.88889 5.12394 4.44444 5.12394 4.44444V1.77777C5.12394 1.77777 5.51283 2.22222 6.29061 2.22222C7.06839 2.22222 7.45728 1.77777 7.45728 1.77777V4.44444Z" stroke="none"/>
+<rect x="0.124023" y="24" width="19" height="1" stroke="none"/>
+<rect x="4.12402" y="11" width="2" height="1" fill="white" stroke="none"/>
+<rect x="7.12402" y="11" width="2" height="1" fill="white" stroke="none"/>
+<rect x="10.124" y="11" width="2" height="1" fill="white" stroke="none"/>
+<rect x="13.124" y="11" width="2" height="1" fill="white" stroke="none"/>
+<rect x="4.12402" y="14" width="2" height="1" fill="white" stroke="none"/>
+<rect x="7.12402" y="14" width="2" height="1" fill="white" stroke="none"/>
+<rect x="10.124" y="14" width="2" height="1" fill="white" stroke="none"/>
+<rect x="13.124" y="14" width="2" height="1" fill="white" stroke="none"/>
+<rect x="4.12402" y="17" width="2" height="1" fill="white" stroke="none"/>
+<rect x="7.12402" y="17" width="2" height="1" fill="white" stroke="none"/>
+<rect x="10.124" y="17" width="2" height="1" fill="white" stroke="none"/>
+<rect x="13.124" y="17" width="2" height="1" fill="white" stroke="none"/>
+<rect x="4.12402" y="20" width="2" height="1" fill="white" stroke="none"/>
+<rect x="7.12402" y="20" width="2" height="1" fill="white" stroke="none"/>
+<rect x="10.124" y="20" width="2" height="1" fill="white" stroke="none"/>
+<rect x="13.124" y="20" width="2" height="1" fill="white" stroke="none"/>
+</symbol>
+
+</svg>
\ No newline at end of file
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 2e5b3fbe2..2d06d3c11 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -8,6 +8,8 @@ $grey-2: #4f4f4f;
$grey-3: #828282;
$grey-4: #bdbdbd;
$grey-6: #f2f2f2;
+/* form colors */
+$green-1: #47c562;
/* Status colors */
$green: #41c29c;
$red: #f98181;
--
GitLab