Skip to content
Snippets Groups Projects
Commit 626f51ef authored by Jérémie BRISON's avatar Jérémie BRISON
Browse files

fix(form) : add typePicker component

parent 126c32dc
No related branches found
No related tags found
3 merge requests!68Recette,!67Dev,!66Fix/form design create structure
Hide whitespace changes
Inline Side-by-side
Showing
with 325 additions and 1 deletion
src/app/shared/components/index.ts
+ 3
− 1
View file @ 626f51ef
......@@ -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,
];
src/app/shared/components/structure-type-picker/structure-type-picker.component.html 0 → 100644
+ 28
− 0
View file @ 626f51ef
<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>
src/app/shared/components/structure-type-picker/structure-type-picker.component.scss 0 → 100644
+ 93
− 0
View file @ 626f51ef
@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;
}
}
src/app/shared/components/structure-type-picker/structure-type-picker.component.spec.ts 0 → 100644
+ 25
− 0
View file @ 626f51ef
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();
});
});
src/app/shared/components/structure-type-picker/structure-type-picker.component.ts 0 → 100644
+ 76
− 0
View file @ 626f51ef
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);
}
}
src/assets/form/sprite.svg 0 → 100644
+ 98
− 0
View file @ 626f51ef
<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
src/assets/scss/_color.scss
+ 2
− 0
View file @ 626f51ef
......@@ -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;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment