Skip to content
Snippets Groups Projects
Commit 4852abb8 authored by Rémi PAILHAREY's avatar Rémi PAILHAREY :fork_knife_plate:
Browse files

feat(carto): updated behavior to join structure from structure details page

parent cf66348e
No related branches found
No related tags found
4 merge requests!418V2.1.0,!400V2.0,!249Feat/us140 join structure,!230V2.0
Showing
with 253 additions and 20 deletions
...@@ -177,6 +177,19 @@ const routes: Routes = [ ...@@ -177,6 +177,19 @@ const routes: Routes = [
footerOutletRoute, footerOutletRoute,
], ],
}, },
{
path: 'join/:id',
children: [
{
path: '',
canActivate: [AuthGuard],
component: StructureJoinComponent,
resolve: {
structure: StructureResolver,
},
},
],
},
{ {
path: 'reset-password', path: 'reset-password',
children: [ children: [
......
...@@ -54,7 +54,6 @@ import { PersonalOfferGuard } from './guards/personalOffer.guard'; ...@@ -54,7 +54,6 @@ import { PersonalOfferGuard } from './guards/personalOffer.guard';
PersonalOfferAccompanimentComponent, PersonalOfferAccompanimentComponent,
PersonalOfferTrainingTypeComponent, PersonalOfferTrainingTypeComponent,
PersonalOfferOtherStructureChoiceComponent, PersonalOfferOtherStructureChoiceComponent,
InformationStepComponent,
AccountFormComponent, AccountFormComponent,
ProfileEmployerSelectionComponent, ProfileEmployerSelectionComponent,
ProfileJobSelectionComponent, ProfileJobSelectionComponent,
......
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
background-color: $grey-6; background-color: $grey-6;
border-radius: 7px; border-radius: 7px;
} }
&::-webkit-progress-value { &::-webkit-progress-value,
&::-moz-progress-bar {
background-color: $primary-color; background-color: $primary-color;
border-radius: 12px; border-radius: 12px;
} }
......
...@@ -25,6 +25,7 @@ export class LoginComponent implements OnInit { ...@@ -25,6 +25,7 @@ export class LoginComponent implements OnInit {
public isWelcome = false; public isWelcome = false;
public userId: string; public userId: string;
public token: string; public token: string;
public returnUrl: string;
public structure: Structure; public structure: Structure;
public verificationSuccess = false; public verificationSuccess = false;
public verificationIssue = false; public verificationIssue = false;
...@@ -56,6 +57,10 @@ export class LoginComponent implements OnInit { ...@@ -56,6 +57,10 @@ export class LoginComponent implements OnInit {
} }
}); });
this.activatedRoute.queryParams.subscribe((params) => {
this.returnUrl = params.returnUrl;
});
// login form // login form
this.loginForm = this.formBuilder.group({ this.loginForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]], email: ['', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]],
...@@ -88,7 +93,11 @@ export class LoginComponent implements OnInit { ...@@ -88,7 +93,11 @@ export class LoginComponent implements OnInit {
if (this.isWelcome) { if (this.isWelcome) {
this.router.navigateByUrl('form/profile'); this.router.navigateByUrl('form/profile');
} else { } else {
this.router.navigateByUrl('news'); if (this.returnUrl) {
this.router.navigateByUrl(this.returnUrl);
} else {
this.router.navigateByUrl('news');
}
} }
}, },
() => { () => {
......
...@@ -10,11 +10,13 @@ import { HourPickerComponent } from './hour-picker/hour-picker.component'; ...@@ -10,11 +10,13 @@ import { HourPickerComponent } from './hour-picker/hour-picker.component';
import { CopyPasteComponent } from './hour-picker/copy-paste/copy-paste.component'; import { CopyPasteComponent } from './hour-picker/copy-paste/copy-paste.component';
import { RadioFormComponent } from './radio-form/radio-form.component'; import { RadioFormComponent } from './radio-form/radio-form.component';
import { ModalConfirmationComponent } from './modal-confirmation/modal-confirmation.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 { StructureOptionsModalComponent } from './structure-options-modal/structure-options-modal.component';
import { ModalOptionsComponent } from './modal-options/modal-options.component'; import { ModalOptionsComponent } from './modal-options/modal-options.component';
import { TextInputModalComponent } from './text-input-modal/text-input-modal.component'; import { TextInputModalComponent } from './text-input-modal/text-input-modal.component';
import { PasswordFormComponent } from './password-form/password-form.component'; import { PasswordFormComponent } from './password-form/password-form.component';
import { TrainingTypePickerComponent } from './training-type-picker/training-type-picker.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 // tslint:disable-next-line: max-line-length
export { export {
...@@ -51,9 +53,11 @@ export const SharedComponents = [ ...@@ -51,9 +53,11 @@ export const SharedComponents = [
CopyPasteComponent, CopyPasteComponent,
RadioFormComponent, RadioFormComponent,
ModalConfirmationComponent, ModalConfirmationComponent,
ModalJoinConfirmationComponent,
StructureOptionsModalComponent, StructureOptionsModalComponent,
ModalOptionsComponent, ModalOptionsComponent,
TextInputModalComponent, TextInputModalComponent,
PasswordFormComponent, PasswordFormComponent,
TrainingTypePickerComponent, TrainingTypePickerComponent,
InformationStepComponent,
]; ];
<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>
@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;
}
}
}
}
}
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();
});
});
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);
}
}
<div fxLayout="column" class="content-container full-screen"> <ng-container *ngIf="!structureName">
<div class="section-container" fxLayout="column" fxLayoutAlign="center center"> <div fxLayout="column" class="content-container full-screen">
<h1>Validation de la demande de rattachement</h1> <div class="section-container" fxLayout="column" fxLayoutAlign="center center">
<p>Merci de patienter...</p> <h1>Validation de la demande de rattachement</h1>
<p>Merci de patienter...</p>
</div>
</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>
@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;
}
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router'; 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 { StructureService } from '../services/structure.service';
import { ButtonType } from '../shared/components/button/buttonType.enum';
@Component({ @Component({
selector: 'app-structure-join', selector: 'app-structure-join',
templateUrl: './structure-join.component.html', templateUrl: './structure-join.component.html',
styleUrls: ['./structure-join.component.scss'],
}) })
export class StructureJoinComponent implements OnInit { 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 { 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) => { this.route.queryParamMap.subscribe((params) => {
if ( if (
params.get('id') && params.get('id') &&
params.get('userId') && params.get('userId') &&
(params.get('status') === 'true' || params.get('status') === 'false') (params.get('status') === 'true' || params.get('status') === 'false') &&
!this.structureName
) { ) {
this.structureService this.structureService
.validateStructureJoin(params.get('id'), params.get('userId'), params.get('status') === 'true' ? true : false) .validateStructureJoin(params.get('id'), params.get('userId'), params.get('status') === 'true' ? true : false)
...@@ -29,4 +52,8 @@ export class StructureJoinComponent implements OnInit { ...@@ -29,4 +52,8 @@ export class StructureJoinComponent implements OnInit {
} }
}); });
} }
previousUrl() {
this.routerListener.goToPreviousUrl();
}
} }
...@@ -500,13 +500,14 @@ ...@@ -500,13 +500,14 @@
(closed)="claimStructure($event)" (closed)="claimStructure($event)"
></app-modal-confirmation> ></app-modal-confirmation>
<app-modal-confirmation <app-join-modal-confirmation
[openned]="joinModalOpenned" [openned]="joinModalOpenned"
[content]=" [title]="'Travaillez-vous ici&nbsp;?'"
'Voulez-vous vraiment rejoindre cette structure&nbsp;? Une demande sera envoyée aux membres pour validation' [primaryContent]="'Un message sera envoyé à un administrateur de la structure'"
" [secondaryContent]="structure.structureName"
(closed)="joinStructure($event)" [customConfirmationText]="'Rejoindre la structure'"
></app-modal-confirmation> (closed)="joinStructure($event)"
></app-join-modal-confirmation>
<app-text-input-modal <app-text-input-modal
[openned]="structureErrorModalOpenned" [openned]="structureErrorModalOpenned"
......
...@@ -230,7 +230,7 @@ export class StructureDetailsComponent implements OnInit { ...@@ -230,7 +230,7 @@ export class StructureDetailsComponent implements OnInit {
if (this.userIsLoggedIn()) { if (this.userIsLoggedIn()) {
this.toggleJoinModal(); this.toggleJoinModal();
} else { } 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 { public handleModify(): void {
...@@ -272,6 +272,7 @@ export class StructureDetailsComponent implements OnInit { ...@@ -272,6 +272,7 @@ export class StructureDetailsComponent implements OnInit {
this.isClaimed = true; this.isClaimed = true;
}); });
}); });
this.router.navigate(['join', this.structure._id]);
} }
} }
......
...@@ -614,7 +614,7 @@ ...@@ -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"/> <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"/> <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"/> <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> </svg>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment