From 4852abb8284b971fedab2c4c4ded802523405f5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20PAILHAREY?= <rpailharey@grandlyon.com>
Date: Mon, 23 May 2022 12:45:40 +0000
Subject: [PATCH] feat(carto): updated behavior to join structure from
structure details page
---
src/app/app-routing.module.ts | 13 ++++++
src/app/form/form-view/form-view.module.ts | 1 -
.../progress-bar/progress-bar.component.scss | 3 +-
src/app/login/login.component.ts | 11 ++++-
src/app/shared/components/index.ts | 4 ++
.../modal-join-confirmation.component.html | 27 +++++++++++
.../modal-join-confirmation.component.scss | 45 +++++++++++++++++++
.../modal-join-confirmation.component.spec.ts | 24 ++++++++++
.../modal-join-confirmation.component.ts | 21 +++++++++
.../structure-join.component.html | 26 ++++++++---
.../structure-join.component.scss | 45 +++++++++++++++++++
.../structure-join.component.ts | 33 ++++++++++++--
.../structure-details.component.html | 15 ++++---
.../structure-details.component.ts | 3 +-
src/assets/form/sprite.svg | 2 +-
15 files changed, 253 insertions(+), 20 deletions(-)
create mode 100644 src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.html
create mode 100644 src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss
create mode 100644 src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.spec.ts
create mode 100644 src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.ts
create mode 100644 src/app/structure-join/structure-join.component.scss
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 413d300ab..a7e9e8533 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -177,6 +177,19 @@ const routes: Routes = [
footerOutletRoute,
],
},
+ {
+ path: 'join/:id',
+ children: [
+ {
+ path: '',
+ canActivate: [AuthGuard],
+ component: StructureJoinComponent,
+ resolve: {
+ structure: StructureResolver,
+ },
+ },
+ ],
+ },
{
path: 'reset-password',
children: [
diff --git a/src/app/form/form-view/form-view.module.ts b/src/app/form/form-view/form-view.module.ts
index 8d69c26d2..aedd89fb3 100644
--- a/src/app/form/form-view/form-view.module.ts
+++ b/src/app/form/form-view/form-view.module.ts
@@ -54,7 +54,6 @@ import { PersonalOfferGuard } from './guards/personalOffer.guard';
PersonalOfferAccompanimentComponent,
PersonalOfferTrainingTypeComponent,
PersonalOfferOtherStructureChoiceComponent,
- InformationStepComponent,
AccountFormComponent,
ProfileEmployerSelectionComponent,
ProfileJobSelectionComponent,
diff --git a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
index 42bce1cb3..365693e77 100644
--- a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
+++ b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
@@ -20,7 +20,8 @@
background-color: $grey-6;
border-radius: 7px;
}
- &::-webkit-progress-value {
+ &::-webkit-progress-value,
+ &::-moz-progress-bar {
background-color: $primary-color;
border-radius: 12px;
}
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index e71bed030..f8f4facbd 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -25,6 +25,7 @@ export class LoginComponent implements OnInit {
public isWelcome = false;
public userId: string;
public token: string;
+ public returnUrl: string;
public structure: Structure;
public verificationSuccess = false;
public verificationIssue = false;
@@ -56,6 +57,10 @@ export class LoginComponent implements OnInit {
}
});
+ this.activatedRoute.queryParams.subscribe((params) => {
+ this.returnUrl = params.returnUrl;
+ });
+
// login form
this.loginForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]],
@@ -88,7 +93,11 @@ export class LoginComponent implements OnInit {
if (this.isWelcome) {
this.router.navigateByUrl('form/profile');
} else {
- this.router.navigateByUrl('news');
+ if (this.returnUrl) {
+ this.router.navigateByUrl(this.returnUrl);
+ } else {
+ this.router.navigateByUrl('news');
+ }
}
},
() => {
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 17ea2c876..b8449db73 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -10,11 +10,13 @@ import { HourPickerComponent } from './hour-picker/hour-picker.component';
import { CopyPasteComponent } from './hour-picker/copy-paste/copy-paste.component';
import { RadioFormComponent } from './radio-form/radio-form.component';
import { ModalConfirmationComponent } from './modal-confirmation/modal-confirmation.component';
+import { ModalJoinConfirmationComponent } from './modal-join-confirmation/modal-join-confirmation.component';
import { StructureOptionsModalComponent } from './structure-options-modal/structure-options-modal.component';
import { ModalOptionsComponent } from './modal-options/modal-options.component';
import { TextInputModalComponent } from './text-input-modal/text-input-modal.component';
import { PasswordFormComponent } from './password-form/password-form.component';
import { TrainingTypePickerComponent } from './training-type-picker/training-type-picker.component';
+import { InformationStepComponent } from '../../form/form-view/global-components/information-step/information-step.component';
// tslint:disable-next-line: max-line-length
export {
@@ -51,9 +53,11 @@ export const SharedComponents = [
CopyPasteComponent,
RadioFormComponent,
ModalConfirmationComponent,
+ ModalJoinConfirmationComponent,
StructureOptionsModalComponent,
ModalOptionsComponent,
TextInputModalComponent,
PasswordFormComponent,
TrainingTypePickerComponent,
+ InformationStepComponent,
];
diff --git a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.html b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.html
new file mode 100644
index 000000000..55430022d
--- /dev/null
+++ b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.html
@@ -0,0 +1,27 @@
+<div *ngIf="openned" class="modalBackground">
+ <div class="modal">
+ <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
+ <div class="headerModal" fxLayout="row" fxLayoutAlign="space-between center">
+ <div class="empty"></div>
+ <h1>{{ title }}</h1>
+ <svg class="hide" aria-hidden="true" (click)="closeModal(false)">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#close'"></use>
+ </svg>
+ </div>
+ <p class="primaryContent">{{ primaryContent }}</p>
+ <p *ngIf="secondaryContent" class="secondaryContent">{{ secondaryContent }}</p>
+ <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="8px">
+ <app-button
+ (action)="closeModal(false)"
+ [text]="'Annuler'"
+ [style]="buttonTypeEnum.modalSecondary"
+ ></app-button>
+ <app-button
+ (action)="closeModal(true)"
+ [text]="customConfirmationText ? customConfirmationText : 'Confirmer'"
+ [style]="buttonTypeEnum.modalPrimary"
+ ></app-button>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss
new file mode 100644
index 000000000..05b10cb29
--- /dev/null
+++ b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss
@@ -0,0 +1,45 @@
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/shapes';
+@import '../../../../assets/scss/z-index';
+
+.modalBackground {
+ .modal {
+ max-width: 390px;
+ .contentModal {
+ padding: 20px 40px;
+
+ .headerModal {
+ width: 390px;
+ padding: 0 8px;
+ h1 {
+ @include lato-bold-18;
+ margin: 10px 0;
+ }
+ svg,
+ .empty {
+ height: 40px;
+ width: 40px;
+ }
+ svg {
+ cursor: pointer;
+ }
+ }
+ p {
+ @include lato-regular-18;
+ text-align: center;
+ margin: 10px 0;
+ }
+ .secondaryContent {
+ color: $red;
+ margin-top: -10px;
+ }
+ .footerModal {
+ gap: 8px;
+ app-button {
+ flex: 1;
+ }
+ }
+ }
+ }
+}
diff --git a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.spec.ts b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.spec.ts
new file mode 100644
index 000000000..1c3d8c223
--- /dev/null
+++ b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalConfirmationComponent } from './modal-join-confirmation.component';
+
+describe('ModalConfirmationComponent', () => {
+ let component: ModalConfirmationComponent;
+ let fixture: ComponentFixture<ModalConfirmationComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ModalConfirmationComponent],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ModalConfirmationComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.ts b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.ts
new file mode 100644
index 000000000..52c0df7b4
--- /dev/null
+++ b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.ts
@@ -0,0 +1,21 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ButtonType } from '../button/buttonType.enum';
+
+@Component({
+ selector: 'app-join-modal-confirmation',
+ templateUrl: './modal-join-confirmation.component.html',
+ styleUrls: ['./modal-join-confirmation.component.scss'],
+})
+export class ModalJoinConfirmationComponent {
+ @Input() public openned: boolean;
+ @Input() public title: string;
+ @Input() public primaryContent: string;
+ @Input() public secondaryContent?: string;
+ @Input() public customConfirmationText?: string;
+ @Output() closed = new EventEmitter<boolean>();
+ public buttonTypeEnum = ButtonType;
+
+ public closeModal(value: boolean): void {
+ this.closed.emit(value);
+ }
+}
diff --git a/src/app/structure-join/structure-join.component.html b/src/app/structure-join/structure-join.component.html
index 4d51a54ef..df5aca124 100644
--- a/src/app/structure-join/structure-join.component.html
+++ b/src/app/structure-join/structure-join.component.html
@@ -1,6 +1,22 @@
-<div fxLayout="column" class="content-container full-screen">
- <div class="section-container" fxLayout="column" fxLayoutAlign="center center">
- <h1>Validation de la demande de rattachement</h1>
- <p>Merci de patienter...</p>
+<ng-container *ngIf="!structureName">
+ <div fxLayout="column" class="content-container full-screen">
+ <div class="section-container" fxLayout="column" fxLayoutAlign="center center">
+ <h1>Validation de la demande de rattachement</h1>
+ <p>Merci de patienter...</p>
+ </div>
</div>
-</div>
+</ng-container>
+<ng-container *ngIf="structureName">
+ <div class="container">
+ <div class="page">
+ <app-information-step
+ [step]="structureFormStepEnum.mailSentInfo"
+ [formType]="formTypeEnum.structure"
+ [structureName]="structureName"
+ ></app-information-step>
+ </div>
+ <div class="button">
+ <app-button [style]="buttonTypeEnum.Primary" [text]="'Ok'" (action)="previousUrl()"> </app-button>
+ </div>
+ </div>
+</ng-container>
diff --git a/src/app/structure-join/structure-join.component.scss b/src/app/structure-join/structure-join.component.scss
new file mode 100644
index 000000000..a91e8b612
--- /dev/null
+++ b/src/app/structure-join/structure-join.component.scss
@@ -0,0 +1,45 @@
+@import '../../assets/scss/color';
+
+.container {
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 16px 0px 0px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 1;
+}
+
+.page {
+ box-sizing: border-box;
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 0px 32px 48px;
+ gap: 16px;
+
+ width: 1000px;
+ height: 579px;
+
+ /* Basic/White */
+ background: $white;
+
+ /* Grey/6 */
+ border: 1px solid $grey-6;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 1;
+}
+
+.button {
+ margin-top: 16px;
+}
diff --git a/src/app/structure-join/structure-join.component.ts b/src/app/structure-join/structure-join.component.ts
index e4e8d657d..101c22a96 100644
--- a/src/app/structure-join/structure-join.component.ts
+++ b/src/app/structure-join/structure-join.component.ts
@@ -1,20 +1,43 @@
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
+import { formType } from '../form/form-view/formType.enum';
+import { structureFormStep } from '../form/form-view/structure-form/structureFormStep.enum';
+import { RouterListenerService } from '../services/routerListener.service';
import { StructureService } from '../services/structure.service';
-
+import { ButtonType } from '../shared/components/button/buttonType.enum';
@Component({
selector: 'app-structure-join',
templateUrl: './structure-join.component.html',
+ styleUrls: ['./structure-join.component.scss'],
})
export class StructureJoinComponent implements OnInit {
- constructor(private router: Router, private route: ActivatedRoute, private structureService: StructureService) {}
+ public structureName?: string = '';
+ public structureFormStepEnum = structureFormStep;
+ public formTypeEnum = formType;
+ public buttonTypeEnum = ButtonType;
+
+ constructor(
+ private routerListener: RouterListenerService,
+ private router: Router,
+ private route: ActivatedRoute,
+ private structureService: StructureService
+ ) {}
ngOnInit(): void {
+ // Handle structure joining with
+ this.route.data.subscribe((data) => {
+ if (data.structure) {
+ this.structureName = data.structure.structureName;
+ }
+ });
+
+ // Handle structure joining with email
this.route.queryParamMap.subscribe((params) => {
if (
params.get('id') &&
params.get('userId') &&
- (params.get('status') === 'true' || params.get('status') === 'false')
+ (params.get('status') === 'true' || params.get('status') === 'false') &&
+ !this.structureName
) {
this.structureService
.validateStructureJoin(params.get('id'), params.get('userId'), params.get('status') === 'true' ? true : false)
@@ -29,4 +52,8 @@ export class StructureJoinComponent implements OnInit {
}
});
}
+
+ previousUrl() {
+ this.routerListener.goToPreviousUrl();
+ }
}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 11f5e19fb..71e621ba5 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -500,13 +500,14 @@
(closed)="claimStructure($event)"
></app-modal-confirmation>
- <app-modal-confirmation
- [openned]="joinModalOpenned"
- [content]="
- 'Voulez-vous vraiment rejoindre cette structure ? Une demande sera envoyée aux membres pour validation'
- "
- (closed)="joinStructure($event)"
- ></app-modal-confirmation>
+ <app-join-modal-confirmation
+ [openned]="joinModalOpenned"
+ [title]="'Travaillez-vous ici ?'"
+ [primaryContent]="'Un message sera envoyé à un administrateur de la structure'"
+ [secondaryContent]="structure.structureName"
+ [customConfirmationText]="'Rejoindre la structure'"
+ (closed)="joinStructure($event)"
+ ></app-join-modal-confirmation>
<app-text-input-modal
[openned]="structureErrorModalOpenned"
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts
index 76f32d1e2..ad805b9a1 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.ts
+++ b/src/app/structure-list/components/structure-details/structure-details.component.ts
@@ -230,7 +230,7 @@ export class StructureDetailsComponent implements OnInit {
if (this.userIsLoggedIn()) {
this.toggleJoinModal();
} else {
- this.router.navigate(['create-structure'], { state: { newUser: this.structure, isJoin: true } });
+ this.router.navigate(['login'], { queryParams: { returnUrl: `acteurs?id=${this.structure._id}` } });
}
}
public handleModify(): void {
@@ -272,6 +272,7 @@ export class StructureDetailsComponent implements OnInit {
this.isClaimed = true;
});
});
+ this.router.navigate(['join', this.structure._id]);
}
}
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 05cb2231f..91b8f1a80 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -614,7 +614,7 @@
<path d="M26 140H24.5C24.5 140.828 25.1716 141.5 26 141.5V140ZM83.5 87L83.5 85.5L83.5 87ZM103.426 88.0228L103.589 86.5318L103.426 88.0228ZM63.5739 88.0223L63.7373 89.5133L63.5739 88.0223ZM83.5 141.5C84.3284 141.5 85 140.828 85 140C85 139.172 84.3284 138.5 83.5 138.5V141.5ZM63.7373 89.5133C69.4973 88.882 76.0577 88.4999 83.5 88.5L83.5 85.5C75.9551 85.4999 69.2853 85.8873 63.4105 86.5312L63.7373 89.5133ZM83.5 88.5C90.9421 88.5001 97.5024 88.8825 103.262 89.5139L103.589 86.5318C97.7145 85.8878 91.0448 85.5001 83.5 85.5L83.5 88.5ZM27.5 140C27.5 127.476 30.5094 115.481 36.5387 106.319C42.5441 97.1935 51.5563 90.8484 63.7373 89.5133L63.4105 86.5312C50.2549 87.9731 40.4801 94.8727 34.0327 104.67C27.6093 114.43 24.5 127.036 24.5 140H27.5ZM83.5 138.5H26V141.5H83.5V138.5ZM129.642 100.23C123.32 92.8079 114.639 87.743 103.589 86.5318L103.262 89.5139C113.517 90.638 121.509 95.3091 127.358 102.176L129.642 100.23Z" fill="#696969"/>
<circle cx="84.0416" cy="63.4879" r="30.9879" fill="white" stroke="#696969" stroke-width="3" stroke-linejoin="round"/>
<path d="M154.686 93.624C151.223 90.5385 145.919 90.8517 142.842 94.3221L110.73 130.534L93.1433 116.368C89.5313 113.458 84.2499 114.036 81.3486 117.655C78.4489 121.272 79.0227 126.56 82.6326 129.468L106.442 148.646C109.928 151.453 114.998 151.027 117.968 147.678L155.382 105.486C158.458 102.018 158.147 96.7077 154.686 93.624Z" fill="#47C562" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+</symbol>
</svg>
--
GitLab