From 05867d0e76ca2d4508516b96699163bc31aa8bee Mon Sep 17 00:00:00 2001
From: Guilhem CARRON <gcarron@grandlyon.com>
Date: Thu, 17 Nov 2022 10:16:27 +0000
Subject: [PATCH] feat(orientation): add language selection
---
.../enums/hotlineMediationSteps.enum.ts | 1 +
.../enums/preferredLanguages.enum.ts | 5 +++
.../mediation-recap.component.html | 6 +++
.../mediation-recap.component.ts | 2 +
.../multi-radio-form.component.html | 4 +-
.../multi-radio-form.component.scss | 3 ++
.../multi-radio-form.component.ts | 1 +
.../interfaces/onlineMediation.interface.ts | 1 +
.../mediation-hours-selection.component.html | 2 +-
.../mediation-hours-selection.component.scss | 19 ++++++----
.../mediation-hours-selection.component.ts | 12 +++---
...ediation-language-selection.component.html | 8 ++++
...ediation-language-selection.component.scss | 0
.../mediation-language-selection.component.ts | 38 +++++++++++++++++++
.../onlineDemarch-form.component.html | 5 +++
.../orientation.module.ts | 2 +
src/app/utils/orientationUtils.ts | 5 +++
17 files changed, 98 insertions(+), 16 deletions(-)
create mode 100644 src/app/form/orientation-form-view/enums/preferredLanguages.enum.ts
create mode 100644 src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.html
create mode 100644 src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.scss
create mode 100644 src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.ts
diff --git a/src/app/form/orientation-form-view/enums/hotlineMediationSteps.enum.ts b/src/app/form/orientation-form-view/enums/hotlineMediationSteps.enum.ts
index 48f34d6f6..b7911a36d 100644
--- a/src/app/form/orientation-form-view/enums/hotlineMediationSteps.enum.ts
+++ b/src/app/form/orientation-form-view/enums/hotlineMediationSteps.enum.ts
@@ -1,5 +1,6 @@
export enum HotlineMediationSteps {
mediationBeneciaryInfo,
mediationHoursSelection,
+ mediationLanguageSelection,
mediationRecap,
}
diff --git a/src/app/form/orientation-form-view/enums/preferredLanguages.enum.ts b/src/app/form/orientation-form-view/enums/preferredLanguages.enum.ts
new file mode 100644
index 000000000..2cb1b0bff
--- /dev/null
+++ b/src/app/form/orientation-form-view/enums/preferredLanguages.enum.ts
@@ -0,0 +1,5 @@
+export enum PreferredLanguages {
+ french = 'Français',
+ english = 'Anglais',
+ arabic = 'Arabe',
+}
diff --git a/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.html b/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.html
index e1b104b02..6d31783ec 100644
--- a/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.html
+++ b/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.html
@@ -21,6 +21,12 @@
<div *ngFor="let need of needs">{{ need.displayText }}</div>
</div>
</div>
+ <div fxLayout="row">
+ <div class="labels" fxFlex="20%">Langue souhaitée</div>
+ <div class="infos" fxFlex="80%">
+ <div>{{ language }}</div>
+ </div>
+ </div>
<div *ngIf="comment" fxLayout="row">
<div class="labels" fxFlex="20%">Précisions</div>
<div class="infos" fxFlex="80%">
diff --git a/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.ts b/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.ts
index 2ebbc4389..b27873b73 100644
--- a/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.ts
+++ b/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.ts
@@ -20,6 +20,7 @@ export class MediationRecapComponent implements OnInit {
public comment: string;
public beneficiary: any;
public date: any;
+ public language: string;
ngOnInit(): void {
this.checkValidation.emit();
@@ -55,5 +56,6 @@ export class MediationRecapComponent implements OnInit {
day: this.form.get('dateSlot').value.day,
hours: this.form.get('dateSlot').value.hours.replace('-', ' et '),
};
+ this.language = this.form.get('preferredLanguage').value;
}
}
diff --git a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.html b/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.html
index 10392772e..bd152d4ca 100644
--- a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.html
+++ b/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.html
@@ -1,8 +1,8 @@
<div [fxLayout]="'column'" [fxLayoutGap]="'8px'" fxLayoutAlign="center left" class="radiocard">
<button
- *ngFor="let item of items; let index = index"
+ *ngFor="let item of items"
(click)="selectItem(item.key)"
- [ngClass]="{ selected: selectedItem == item.key }"
+ [ngClass]="{ selected: selectedItem == item.key, smallWidth: smallWidth }"
>
<div class="checkmark">
<svg *ngIf="selectedItem === item.key" class="validate" aria-hidden="true">
diff --git a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss b/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss
index 5617385e8..9507fa3a9 100644
--- a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss
+++ b/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss
@@ -57,5 +57,8 @@
top: -3px;
}
}
+ &.smallWidth {
+ width: 300px;
+ }
}
}
diff --git a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.ts b/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.ts
index 3710befc0..8c8215930 100644
--- a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.ts
+++ b/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.ts
@@ -9,6 +9,7 @@ import { INeedItem } from '../../../../utils/orientationUtils';
export class MultiRadioFormComponent implements OnInit {
@Input() items: INeedItem[];
@Input() selected: any;
+ @Input() smallWidth: boolean = false;
@Input() displayIcon = false;
@Output() handleSelect = new EventEmitter<any>();
diff --git a/src/app/form/orientation-form-view/interfaces/onlineMediation.interface.ts b/src/app/form/orientation-form-view/interfaces/onlineMediation.interface.ts
index b3fc7ed8c..fd27e71f0 100644
--- a/src/app/form/orientation-form-view/interfaces/onlineMediation.interface.ts
+++ b/src/app/form/orientation-form-view/interfaces/onlineMediation.interface.ts
@@ -4,4 +4,5 @@ export interface IOnlineMediation {
phone: string;
onlineDemarcheType: string[];
dateSlot: { day: string; hours: string };
+ preferredLanguage: string;
}
diff --git a/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.html b/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.html
index 2c017e6de..f21e35da9 100644
--- a/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.html
+++ b/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.html
@@ -4,7 +4,7 @@
<div *ngFor="let slot of timeSlots" class="slot">
<div class="day">{{ slot.day }}</div>
<button class="time" [ngClass]="{ selected: isSelected(slot) }" (click)="selectHour(slot)">
- {{ slot.hours }}
+ <span *ngFor="let str of slot.hours.split(' ')">{{ str }}</span>
</button>
</div>
</div>
diff --git a/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.scss b/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.scss
index 4e8abea4e..76465d2fc 100644
--- a/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.scss
+++ b/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.scss
@@ -4,19 +4,17 @@
.subtitle {
color: $grey-3;
- text-transform: uppercase;
- @include lato-regular-14;
+ @include lato-bold-14;
}
.container {
display: flex;
- justify-content: center;
align-items: center;
gap: 0.5rem;
margin: 1.5rem 0;
flex-wrap: wrap;
+ max-width: 600px;
.slot {
transition: all 300ms ease;
- border-right: solid 1px $red;
padding-right: 0.5rem;
height: 85px;
&:last-child {
@@ -31,18 +29,25 @@
@include lato-regular-13;
color: $grey-3;
text-align: center;
- margin-bottom: 1rem;
+ margin-bottom: 0.5rem;
}
.time {
cursor: pointer;
- width: 125px;
- height: 37px;
+ width: 73px;
+ height: 71px;
text-align: center;
border: 1px solid $grey-1;
border-radius: 4px;
color: $grey-1;
@include lato-regular-14;
background: $white;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ span {
+ display: block;
+ }
&.selected {
background: $green-1 !important;
color: $white;
diff --git a/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.ts b/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.ts
index a0f68516a..6c1788d46 100644
--- a/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.ts
+++ b/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.ts
@@ -12,12 +12,12 @@ export class MediationHoursSelectionComponent implements OnInit {
@Output() checkValidation = new EventEmitter<any>();
public selected: string;
public timeSlots = [
- { day: 'Lundi', hours: '15h00-17h00' },
- { day: 'Mardi', hours: '15h00-17h00' },
- { day: 'Mercredi', hours: '15h00-17h00' },
- { day: 'Jeudi', hours: '15h00-19h00' },
- { day: 'Vendredi', hours: '15h00-17h00' },
- { day: 'Samedi', hours: '10h00-12h00' },
+ { day: 'Lundi', hours: '15h00 - 17h00' },
+ { day: 'Mardi', hours: '15h00 - 17h00' },
+ { day: 'Mercredi', hours: '15h00 - 17h00' },
+ { day: 'Jeudi', hours: '15h00 - 19h00' },
+ { day: 'Vendredi', hours: '15h00 - 17h00' },
+ { day: 'Samedi', hours: '10h00 - 12h00' },
];
ngOnInit(): void {
this.checkValidation.emit();
diff --git a/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.html b/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.html
new file mode 100644
index 000000000..017627a72
--- /dev/null
+++ b/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.html
@@ -0,0 +1,8 @@
+<h2>Dans quelle langue le bénéficiaire souhaite-t-il être rappelé ?</h2>
+
+<app-multi-radio-form
+ [items]="languages"
+ [selected]="selected"
+ (handleSelect)="handleSelect($event)"
+ [smallWidth]="true"
+></app-multi-radio-form>
diff --git a/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.scss b/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.ts b/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.ts
new file mode 100644
index 000000000..9b320ff54
--- /dev/null
+++ b/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.ts
@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { PreferredLanguages } from '../../enums/preferredLanguages.enum';
+
+@Component({
+ selector: 'app-mediation-language-selection',
+ templateUrl: './mediation-language-selection.component.html',
+ styleUrls: ['./mediation-language-selection.component.scss'],
+})
+export class MediationLanguageSelectionComponent implements OnInit {
+ @Input() form: UntypedFormGroup;
+ @Output() checkValidation = new EventEmitter<any>();
+ public selected: string;
+ public languages: any[] = [
+ {
+ title: 'Français',
+ key: PreferredLanguages.french,
+ },
+ {
+ title: 'Anglais',
+ key: PreferredLanguages.english,
+ },
+ {
+ title: 'Arabe',
+ key: PreferredLanguages.arabic,
+ },
+ ];
+ ngOnInit(): void {
+ this.selected = this.form.get('preferredLanguage').value;
+ this.checkValidation.emit();
+ }
+
+ public handleSelect(event: string): void {
+ this.selected = event;
+ this.form.get('preferredLanguage').patchValue(event);
+ this.checkValidation.emit();
+ }
+}
diff --git a/src/app/form/orientation-form-view/online-demarch/onlineDemarch-form.component.html b/src/app/form/orientation-form-view/online-demarch/onlineDemarch-form.component.html
index ff066744b..d74e1d4b0 100644
--- a/src/app/form/orientation-form-view/online-demarch/onlineDemarch-form.component.html
+++ b/src/app/form/orientation-form-view/online-demarch/onlineDemarch-form.component.html
@@ -38,6 +38,11 @@
[form]="form"
(checkValidation)="checkValidation()"
></app-mediation-hours-selection>
+ <app-mediation-language-selection
+ *ngIf="currentStep === HotlineMediationStepsEnum.mediationLanguageSelection"
+ [form]="form"
+ (checkValidation)="checkValidation()"
+ ></app-mediation-language-selection>
<app-mediation-recap
*ngIf="currentStep === HotlineMediationStepsEnum.mediationRecap"
[form]="form"
diff --git a/src/app/form/orientation-form-view/orientation.module.ts b/src/app/form/orientation-form-view/orientation.module.ts
index 82829af4e..fde07106c 100644
--- a/src/app/form/orientation-form-view/orientation.module.ts
+++ b/src/app/form/orientation-form-view/orientation.module.ts
@@ -24,6 +24,7 @@ import { OrientationRoutingModule } from './orientation-routing.module';
import { OrientationCommentsComponent } from './orientation-structure-list/orientation-comments/orientation-comments.component';
import { OrientationStructureAddressComponent } from './orientation-structure-list/orientation-structure-address/orientation-structure-address.component';
import { OrientationStructureListComponent } from './orientation-structure-list/orientation-structure-list.component';
+import { MediationLanguageSelectionComponent } from './online-demarch/mediation-language-selection/mediation-language-selection.component';
import { SelectComponent } from './global-components/select/select.component';
@NgModule({
@@ -50,6 +51,7 @@ import { SelectComponent } from './global-components/select/select.component';
OrientationCommentsComponent,
EquipmentAccessComponent,
BaseSkillsChoiceComponent,
+ MediationLanguageSelectionComponent,
SelectComponent,
],
imports: [OrientationRoutingModule, CartoModule, SharedModule],
diff --git a/src/app/utils/orientationUtils.ts b/src/app/utils/orientationUtils.ts
index 7b1df3af6..d7e06f343 100644
--- a/src/app/utils/orientationUtils.ts
+++ b/src/app/utils/orientationUtils.ts
@@ -5,6 +5,7 @@ import { HotlineMediationSteps } from '../form/orientation-form-view/enums/hotli
import { NeedsType } from '../form/orientation-form-view/enums/needs.enum';
import { OnlineDemarchesCommonSteps } from '../form/orientation-form-view/enums/onlineDemarchesCommonSteps.enum';
import { OnlineDemarchesMeetingSteps } from '../form/orientation-form-view/enums/onlineDemarchesMeetingSteps.enum';
+import { PreferredLanguages } from '../form/orientation-form-view/enums/preferredLanguages.enum';
import { StructuresListSteps } from '../form/orientation-form-view/enums/structuresListSteps.enum';
import { FiltersForm } from '../form/orientation-form-view/interfaces/filtersForm.interface';
import { OnlineDemarchesForm } from '../form/orientation-form-view/interfaces/onlineDemarchesForm.interface';
@@ -68,6 +69,7 @@ export class OrientationUtils {
surname: new UntypedFormControl('', [Validators.required, Validators.pattern(CustomRegExp.TEXT_WITHOUT_NUMBER)]),
phone: new UntypedFormControl('', [Validators.required, Validators.pattern(CustomRegExp.PHONE)]),
dateSlot: new UntypedFormControl(null, Validators.required),
+ preferredLanguage: new UntypedFormControl(PreferredLanguages.french, Validators.required),
});
}
@@ -133,6 +135,9 @@ export class OrientationUtils {
pagesValidation[HotlineMediationSteps.mediationHoursSelection] = {
valid: form.get('dateSlot').value !== null,
};
+ pagesValidation[HotlineMediationSteps.mediationLanguageSelection] = {
+ valid: true,
+ };
pagesValidation[HotlineMediationSteps.mediationRecap] = {
valid: true,
};
--
GitLab