diff --git a/src/app/annuaire/result-list/result-list.component.html b/src/app/annuaire/result-list/result-list.component.html
index 268fe8c9a229483ce6f9245ff09f55f9c9f15728..e17e80351a49f1a6336d1fbab7c5ec1ace7c05f3 100644
--- a/src/app/annuaire/result-list/result-list.component.html
+++ b/src/app/annuaire/result-list/result-list.component.html
@@ -2,12 +2,7 @@
<div class="userNumber">
{{ userList.length }} utilisateur(s)<span *ngIf="showPagination"> sur {{ totalUserResult }} </span>
</div>
- <div
- class="singleUser"
- [ngClass]="{ singleResult: userList.length == 1 }"
- *ngFor="let user of userList; let index = index"
- (click)="goToUser(user._id)"
- >
+ <div class="singleUser" *ngFor="let user of userList; let index = index" (click)="goToUser(user._id)">
<div class="avatar-container">
<app-svg-icon class="avatar" [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-40'"></app-svg-icon>
</div>
diff --git a/src/app/annuaire/result-list/result-list.component.scss b/src/app/annuaire/result-list/result-list.component.scss
index 6558b66bf6c6f3bb5e33b29d0b99f7fec9e3f342..7b757dfc83a72a7c31dc7da271864fe54ed67460 100644
--- a/src/app/annuaire/result-list/result-list.component.scss
+++ b/src/app/annuaire/result-list/result-list.component.scss
@@ -19,7 +19,7 @@
.userNumber {
font-size: 0.875rem;
color: $grey-3;
- margin: 1rem 0.75rem;
+ padding: 1rem 0.75rem;
}
&.empty {
padding-bottom: 2rem;
@@ -91,9 +91,9 @@
.singleUser {
display: flex;
align-items: center;
+ gap: 0.5rem;
height: 65px;
padding: 0.75rem;
- border-bottom: solid 1px $grey-8;
box-sizing: border-box;
cursor: pointer;
transition: all 300ms ease;
@@ -104,6 +104,9 @@
&:hover {
background: $grey-8;
}
+ &:not(:last-child) {
+ border-bottom: solid 1px $grey-8;
+ }
.avatar-container {
width: 40px;
height: 44px;
@@ -111,7 +114,6 @@
background: $grey-8;
}
.identity {
- margin: 0 0.5rem;
max-width: 330px;
p {
margin: 0;
@@ -128,7 +130,4 @@
color: $grey-3;
}
}
- .singleResult {
- border-bottom: none;
- }
}
diff --git a/src/app/form/footer-form/footer-form.component.ts b/src/app/form/footer-form/footer-form.component.ts
index 45f2ba576838cb3048ddabd090f431c4113af6eb..647983d32997deec8047801ca479e5ebcb0430a2 100644
--- a/src/app/form/footer-form/footer-form.component.ts
+++ b/src/app/form/footer-form/footer-form.component.ts
@@ -46,7 +46,6 @@ export class FooterFormComponent implements OnChanges {
private authService: AuthService,
public utils: Utils,
private router: Router,
- private profileService: ProfileService,
private newsletterService: NewsletterService
) {}
public goToNextPage(): void {
@@ -96,13 +95,6 @@ export class FooterFormComponent implements OnChanges {
return this.form.value.categories.baseSkills.length > 0 || this.form.value.categories.advancedSkills.length > 0;
}
- /**
- * Check if trainings are selected in order to ask for pricing
- */
- public isOtherAccompanimentSelected(): boolean {
- return this.form.value.categories?.onlineProcedures.find((el) => el === 'autres') ? true : false;
- }
-
public prevPage(): void {
if (!this.isEditMode && this.currentForm === formType.structure) {
if (this.currentStep === structureFormStep.structureType) {
@@ -118,7 +110,7 @@ export class FooterFormComponent implements OnChanges {
return;
}
if (this.currentStep === structureFormStep.structureTrainingType) {
- if (this.isOtherAccompanimentSelected()) {
+ if (this.utils.isOtherAccompanimentSelected(this.form)) {
this.changeCurrentStep.emit(structureFormStep.structureDigitalHelpingAccompanimentOther);
} else {
this.changeCurrentStep.emit(structureFormStep.structureDigitalHelpingAccompaniment);
@@ -177,7 +169,7 @@ export class FooterFormComponent implements OnChanges {
}
// Check if trainings are selected in order to ask for pricing
if (this.currentStep === structureFormStep.structureDigitalHelpingAccompaniment) {
- if (this.isOtherAccompanimentSelected()) {
+ if (this.utils.isOtherAccompanimentSelected(this.form)) {
this.changeCurrentStep.emit(structureFormStep.structureDigitalHelpingAccompanimentOther);
} else {
this.changeCurrentStep.emit(structureFormStep.structureTrainingType);
diff --git a/src/app/form/form-view/form-view.component.scss b/src/app/form/form-view/form-view.component.scss
index 55162cad9f47953fb2d0404dea766230896d53c4..119f921dffb84abdab9414cbfe87261766788c2d 100644
--- a/src/app/form/form-view/form-view.component.scss
+++ b/src/app/form/form-view/form-view.component.scss
@@ -14,7 +14,7 @@
max-width: 980px;
width: 100%;
height: 100%;
- margin: 1rem auto;
+ margin: 0 auto;
overflow-y: auto;
color: $grey-1;
background: $white;
diff --git a/src/app/form/form-view/form-view.component.ts b/src/app/form/form-view/form-view.component.ts
index 68e2abb9b46630cc43cd1bf78b98ff24c28e17bd..206b57ad2e17bfaccd7f052405aa1b3378b56a0f 100644
--- a/src/app/form/form-view/form-view.component.ts
+++ b/src/app/form/form-view/form-view.component.ts
@@ -14,6 +14,7 @@ import { StructureService } from '../../services/structure.service';
import { MustMatch } from '../../shared/validator/form';
import { CustomRegExp } from '../../utils/CustomRegExp';
import { formUtils } from '../../utils/formUtils';
+import { Utils } from '../../utils/utils';
import { stepType } from '../step.type';
import { accountFormStep } from './account-form/accountFormStep.enum';
import { formType } from './formType.enum';
@@ -78,13 +79,14 @@ export class FormViewComponent implements OnInit, AfterViewInit {
public isRegisterNewMember: boolean = false;
constructor(
- private router: Router,
- private route: ActivatedRoute,
+ private cdRef: ChangeDetectorRef,
+ private notificationService: NotificationService,
+ private personalOfferService: PersonalOfferService,
private profileService: ProfileService,
+ private route: ActivatedRoute,
+ private router: Router,
private structureService: StructureService,
- private personalOfferService: PersonalOfferService,
- private notificationService: NotificationService,
- private cdRef: ChangeDetectorRef
+ private utils: Utils
) {}
ngAfterViewInit(): void {
@@ -363,6 +365,9 @@ export class FormViewComponent implements OnInit, AfterViewInit {
});
}
public async saveStructureForm(): Promise<void> {
+ if (!this.utils.isOtherAccompanimentSelected(this.structureForm)) {
+ this.structureForm.get('otherDescription').setValue(null);
+ }
const user = await this.profileService.getProfile();
const newStructure = new Structure(this.structureForm.value);
newStructure.hours = this.hoursForm.value;
@@ -383,6 +388,7 @@ export class FormViewComponent implements OnInit, AfterViewInit {
this.isPageValid = false;
this.currentPage = step;
}
+
public async saveEditedStructure() {
this.structureService.editStructure(this.getCurrentChanges(this.currentPage), this.structure._id).subscribe(() => {
this.notificationService.showSuccess('Vos modifications ont bien été prises en compte.', '');
@@ -442,16 +448,16 @@ export class FormViewComponent implements OnInit, AfterViewInit {
publicOthers: this.structureForm.get('categories').get('publicOthers').value,
},
};
- case structureFormStep.structureDigitalHelpingAccompanimentOther:
- return {
- otherDescription: this.structureForm.get('otherDescription').value,
- };
case structureFormStep.structureDigitalHelpingAccompaniment:
return {
categories: {
onlineProcedures: this.structureForm.get('categories').get('onlineProcedures').value,
},
};
+ case structureFormStep.structureDigitalHelpingAccompanimentOther:
+ return {
+ otherDescription: this.structureForm.get('otherDescription').value,
+ };
case structureFormStep.structureTrainingType:
return {
categories: {
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 2c9f96348ada6e1439595aee88687f1a748c4596..44fa546ddfea3676708789afb4d65ae409c50622 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
@@ -6,7 +6,7 @@
.progressBar {
height: #{$progressBar-height};
max-width: 980px;
- margin: 16px auto 8px auto;
+ margin: 16px auto;
@media #{$tablet} {
margin: 0px 4px;
diff --git a/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.scss b/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.scss
index b7ee3eca8ae8c361ee4b962f491c0549d2772ac3..77a2378d53c240c4719d5ff6562eaa9ea3257c7e 100644
--- a/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.scss
+++ b/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.scss
@@ -7,6 +7,10 @@
width: 380px;
}
+h2 {
+ margin-top: 0;
+}
+
.search {
width: 380px;
border-radius: 20px;
diff --git a/src/app/form/form-view/structure-form/structure-labels/structure-labels.component.html b/src/app/form/form-view/structure-form/structure-labels/structure-labels.component.html
index 0e8d8d61351a4540b1b92ef64511161e84de3ad3..ccedeba64e51cef4704524bdc261e7262665990b 100644
--- a/src/app/form/form-view/structure-form/structure-labels/structure-labels.component.html
+++ b/src/app/form/form-view/structure-form/structure-labels/structure-labels.component.html
@@ -14,7 +14,7 @@
</div>
<div class="labelsQualifications" *ngIf="labelsQualifications" fxLayout="row wrap" fxLayoutAlign="flex-start">
<app-checkbox-form
- *ngFor="let module of labelsQualifications.modules"
+ *ngFor="let module of labelsQualifications.modules.sort()"
[isChecked]="isInArray(module.id, 'labelsQualifications')"
[text]="module.name"
[iconSvg]="module.id"
diff --git a/src/app/form/form-view/structure-form/structure-training-price/structure-training-price.component.html b/src/app/form/form-view/structure-form/structure-training-price/structure-training-price.component.html
index ee96a0686229e6593a8f03e033cc173df791d1c9..00fd54c586a4553fa965b90262af733bc9e5b382 100644
--- a/src/app/form/form-view/structure-form/structure-training-price/structure-training-price.component.html
+++ b/src/app/form/form-view/structure-form/structure-training-price/structure-training-price.component.html
@@ -8,7 +8,7 @@
[icon]="'arrowBack'"
></app-svg-icon>
<div class="titleContent">
- <h3>Ces formations sont-elles gratuites ?</h3>
+ <h3>Ces accompagnements sont-ils gratuits ?</h3>
</div>
</div>
<app-radio-form
diff --git a/src/app/form/form-view/structure-form/structure-training-type/structure-training-type.component.html b/src/app/form/form-view/structure-form/structure-training-type/structure-training-type.component.html
index 0bc958a8d795b6796293d5bd79ee3470dc38eb6a..0863dd5c03bf3712fc8dbb826a6636007fe0e0a5 100644
--- a/src/app/form/form-view/structure-form/structure-training-type/structure-training-type.component.html
+++ b/src/app/form/form-view/structure-form/structure-training-type/structure-training-type.component.html
@@ -8,7 +8,7 @@
[icon]="'arrowBack'"
></app-svg-icon>
<div class="titleContent">
- <h3>Quelles formations au numérique proposez-vous ?</h3>
+ <h3>Quels accompagnements au numérique proposez-vous ?</h3>
<p>Facultatif</p>
</div>
</div>
diff --git a/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.html b/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.html
index bc20327aa0cd7479a96a884aea838ec792fea042..0cd01afb084a7309785e9925766e513bbdc38776 100644
--- a/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.html
+++ b/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.html
@@ -8,7 +8,7 @@
[icon]="'arrowBack'"
></app-svg-icon>
<div class="titleContent">
- <h3>Le wifi est-il proposé en accès libre ?</h3>
+ <h3>Proposez-vous du wifi en accès libre ?</h3>
</div>
</div>
<app-radio-form
diff --git a/src/app/form/orientation-form-view/online-demarch/online-demarch/online-demarch.component.html b/src/app/form/orientation-form-view/online-demarch/online-demarch/online-demarch.component.html
index 2f68bfcb8b3039c073e5c7a488826bce1b3195da..adc5a7c7488e6430d7a49e9b7ea63d3f68f70e4e 100644
--- a/src/app/form/orientation-form-view/online-demarch/online-demarch/online-demarch.component.html
+++ b/src/app/form/orientation-form-view/online-demarch/online-demarch/online-demarch.component.html
@@ -1,16 +1,14 @@
<h2>Quelle démarche en ligne le bénéficiaire a-t-il besoin de réaliser ?</h2>
-<div fxLayout="column" fxLayoutGap="32px">
- <div class="btn-grid">
- <span *ngFor="let module of accompanimentType">
- <app-button
- [ngClass]="{ selectedChoice: true }"
- [extraClass]="isSelectedModule(module.id) ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="module.name"
- (action)="handleClick(module)"
- ></app-button>
- </span>
- </div>
+<div class="btn-grid btnContainer">
+ <span *ngFor="let module of accompanimentType">
+ <app-button
+ [ngClass]="{ selectedChoice: true }"
+ [extraClass]="isSelectedModule(module.id) ? 'selected' : ''"
+ [style]="buttonTypeEnum.CheckButton"
+ [text]="module.name"
+ (action)="handleClick(module)"
+ ></app-button>
+ </span>
</div>
<app-modal-confirmation
[openned]="showStrangersModal"
diff --git a/src/app/form/orientation-form-view/online-demarch/online-demarch/online-demarch.component.scss b/src/app/form/orientation-form-view/online-demarch/online-demarch/online-demarch.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7fbf06166a3d6c63b979703b6d0a02c3b46fcc2a
--- /dev/null
+++ b/src/app/form/orientation-form-view/online-demarch/online-demarch/online-demarch.component.scss
@@ -0,0 +1,5 @@
+@import '../../../../../assets/scss/buttons';
+
+.btnContainer {
+ max-width: 600px;
+}
diff --git a/src/app/form/orientation-form-view/online-demarch/online-demarch/online-demarch.component.ts b/src/app/form/orientation-form-view/online-demarch/online-demarch/online-demarch.component.ts
index 00af38f552f33883644d3696ebc71be127691823..a26ff40e3a94f333b0c281f5d7985a6e020e7a38 100644
--- a/src/app/form/orientation-form-view/online-demarch/online-demarch/online-demarch.component.ts
+++ b/src/app/form/orientation-form-view/online-demarch/online-demarch/online-demarch.component.ts
@@ -9,6 +9,7 @@ import { SearchService } from '../../../../structure-list/services/search.servic
@Component({
selector: 'app-online-demarch',
templateUrl: './online-demarch.component.html',
+ styleUrls: ['./online-demarch.component.scss'],
})
export class OnlineDemarchComponent implements OnInit {
@Input() form: UntypedFormGroup;
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.html b/src/app/form/orientation-form-view/orientation-form-view.component.html
index 56f059add0bc089a321bb5c3b0cff6dbaad472d9..a9a486c905ae1135b282436fba34534144ecf813 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.html
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.html
@@ -1,6 +1,6 @@
<div class="orientation">
<app-progress-bar [currentPage]="currentStep"></app-progress-bar>
- <div class="content">
+ <div class="container">
<app-needs-selection
*ngIf="currentStep === null"
[form]="orientationForm"
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.scss b/src/app/form/orientation-form-view/orientation-form-view.component.scss
index 6954931a97737deafc776664f77a38768ddea9ed..f064af2feb3700b14943ca80fb9e87a2d5b559fa 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.scss
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.scss
@@ -3,11 +3,15 @@
@import '../../../assets/scss/layout';
@import '../../../assets//scss/typography';
+::ng-deep h2 {
+ margin-top: 0;
+}
+
.orientation {
height: 100%;
display: flex;
flex-direction: column;
- .content {
+ .container {
box-sizing: border-box;
max-width: 980px;
width: 100%;
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.ts b/src/app/form/orientation-form-view/orientation-form-view.component.ts
index 10e1646d7a16049f54bad9512baeef75bb2d8539..38eb7458d7c54eda7c1111359e45396a7b389247 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.ts
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.ts
@@ -61,7 +61,9 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
this.validatePage(true);
switch (needType) {
case needsType.onlineDemarch:
- if (!this.onlineDemarchForm) this.onlineDemarchForm = this.orientationUtils.createOnlineDemarchForm();
+ if (!this.onlineDemarchForm) {
+ this.onlineDemarchForm = this.orientationUtils.createOnlineDemarchForm();
+ }
break;
// case needsType.equipmentBuy:
// this.equipmentBuyForm = this.orientationUtils.createOnlineDemarchForm();
@@ -91,7 +93,8 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
}
window.print();
setTimeout(() => {
- this.router.navigateByUrl('/acteurs');
+ this.onlineDemarchForm = this.orientationUtils.createOnlineDemarchForm();
+ this.currentStep = 0;
}, 100);
});
}
diff --git a/src/app/models/structure.model.ts b/src/app/models/structure.model.ts
index 2913e411214e4bd42e70662d9439b050fee103e0..77850a04df8571acab13e9c71de92e2ef683c42f 100644
--- a/src/app/models/structure.model.ts
+++ b/src/app/models/structure.model.ts
@@ -15,7 +15,7 @@ export class Structure {
public numero: string = null;
public createdAt: string = null;
public updatedAt: string = null;
- public toBeDeletedAt: string = null;
+ public toBeDeletedAt?: string = null;
public structureName: string = null;
public structureType: StructureType = null;
public description: string = null;
diff --git a/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.html b/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.html
index af05c37846ed506dc5297c93bd01ed9365ba8567..f17e6343245ccf739b0ea2061325b218c38021f4 100644
--- a/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.html
+++ b/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.html
@@ -1,18 +1,16 @@
<div class="structureMember">
- <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFill>
- <app-svg-icon
- class="avatar hide-on-mobile"
- [type]="'avatar'"
- [icon]="'defaultAvatar'"
- [iconClass]="'icon-40'"
- ></app-svg-icon>
- <div class="nameJobSection" fxLayout="column" fxLayoutAlign="start start">
- <a routerLink="/profile/{{ member._id }}" class="name">{{ member.name }} {{ member.surname }}</a>
- <p class="jobEmployer">{{ getJobEmployer() }}</p>
- </div>
- <div fxLayout="column" fxLayoutAlign="space-between start" fxLayoutGap="4px">
- <p>{{ member.phone }}</p>
- <a class="email" href="mailto:{{ member.email }}">{{ member.email }}</a>
- </div>
+ <app-svg-icon
+ class="avatar hide-on-mobile"
+ [type]="'avatar'"
+ [icon]="'defaultAvatar'"
+ [iconClass]="'icon-40'"
+ ></app-svg-icon>
+ <div class="nameJobSection">
+ <a routerLink="/profile/{{ member._id }}" class="name">{{ member.name }} {{ member.surname }}</a>
+ <p class="jobEmployer">{{ getJobEmployer() }}</p>
+ </div>
+ <div class="contact">
+ <p>{{ member.phone }}</p>
+ <a class="email" href="mailto:{{ member.email }}">{{ member.email }}</a>
</div>
</div>
diff --git a/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.scss b/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.scss
index f559d1d63a761a23491bfa63b764658bcb44dc7a..d08d5b6357d3f0d6fafa2701eebcf52c45c50811 100644
--- a/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.scss
+++ b/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.scss
@@ -5,6 +5,9 @@
.structureMember {
@include lato-regular-14;
+ display: flex;
+ align-items: center;
+ gap: 8px;
.avatar {
display: flex;
@@ -15,11 +18,6 @@
p {
margin: 0;
- &.jobEmployer {
- display: flex;
- height: 34px;
- align-items: center;
- }
}
a {
&.name {
@@ -32,6 +30,14 @@
}
}
+ .contanct,
+ .nameJobSection {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
.nameJobSection {
width: 50%;
}
diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
index 007aec27d0fade26bf6a29c93faa003ee5f1e033..d55d298d25356d1dfd305a5c0ed9667fcf55c552 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
+++ b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
@@ -462,7 +462,7 @@
</div>
<div class="content">
<app-no-information *ngIf="structure.categories.labelsQualifications.length === 0"></app-no-information>
- <div *ngFor="let labels of structure.categories.labelsQualifications">
+ <div *ngFor="let labels of structure.categories.labelsQualifications.sort()">
<app-logo-card [name]="labels"></app-logo-card>
</div>
</div>
diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.ts b/src/app/profile/structure-edition-summary/structure-edition-summary.component.ts
index 22dc57c7e95c7e0322424cb4cf2a048d34dbaa2f..97016fecebfd9473a0d714e65258c450db554c14 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.ts
+++ b/src/app/profile/structure-edition-summary/structure-edition-summary.component.ts
@@ -132,9 +132,7 @@ export class StructureEditionSummaryComponent implements OnInit {
}
public containsDigitalHelp(): boolean {
- return (
- this.structure.categoriesDisplay.onlineProcedures?.length > 0
- );
+ return this.structure.categoriesDisplay.onlineProcedures?.length > 0;
}
public getDigitalHelpLabel(digitalHelp: Demarches): string {
@@ -145,9 +143,7 @@ export class StructureEditionSummaryComponent implements OnInit {
return this.structure.categories.baseSkills?.length > 0;
}
public isAdvancedSkills(): boolean {
- return (
- this.structure.categories.advancedSkills?.length > 0
- );
+ return this.structure.categories.advancedSkills?.length > 0;
}
public containsDigitalLearning(): boolean {
diff --git a/src/app/profile/structure-members-management/structure-members-management.component.html b/src/app/profile/structure-members-management/structure-members-management.component.html
index e6e0fe7db00aa0c7f09408935f3e58fafc6404f1..22f8fa16a2c290ac06ced0f7e2329183dfe143a0 100644
--- a/src/app/profile/structure-members-management/structure-members-management.component.html
+++ b/src/app/profile/structure-members-management/structure-members-management.component.html
@@ -1,76 +1,69 @@
<div class="content-container full-screen">
<div class="container members-management">
- <div class="header">
- <div fxLayout="row" fxLayoutAlign="space-between center" fxFill>
- <div fxLayout="row" fxLayoutAlign="start center" class="headerBack">
- <app-svg-icon [iconClass]="'backArrow'" [type]="'ico'" [icon]="'arrowBack'" (click)="goBack()"></app-svg-icon>
- <h1>
- Gérer les membres de <span>{{ structure.structureName }}</span>
- </h1>
+ <div class="headerContainer">
+ <div class="header">
+ <app-svg-icon [iconClass]="'backArrow'" [type]="'ico'" [icon]="'arrowBack'" (click)="goBack()"></app-svg-icon>
+ <h1>
+ Gérer les membres de <span>{{ structure.structureName }}</span>
+ </h1>
+ </div>
+ <app-button
+ [style]="buttonTypeEnum.Secondary"
+ [text]="'Ajouter un membre'"
+ (click)="addMemberModalOpenned = true"
+ tabindex="0"
+ ></app-button>
+ </div>
+
+ <div *ngIf="structureWithOwners && tempUsers" class="membersList">
+ <div *ngFor="let member of structureWithOwners.owners" class="member-card">
+ <div class="user">
+ <app-svg-icon
+ class="avatar hide-on-mobile"
+ [type]="'avatar'"
+ [icon]="'defaultAvatar'"
+ [iconClass]="'icon-40'"
+ ></app-svg-icon>
+ <div class="info-member">
+ <a routerLink="/profile/{{ member._id }}" class="member">{{ member.name }} {{ member.surname }}</a>
+ <p class="job" *ngIf="displayJobEmployer(member)">{{ displayJobEmployer(member) }}</p>
+ </div>
</div>
<app-button
+ class="button-member"
[style]="buttonTypeEnum.Secondary"
- [text]="'Ajouter un membre'"
- (click)="addMemberModalOpenned = true"
+ [text]="'Exclure ce membre'"
+ (click)="memberToExclude = member; excludeModalOpenned = true"
tabindex="0"
></app-button>
</div>
- </div>
- <div *ngIf="structureWithOwners && tempUsers">
- <div fxLayout="column" fxLayoutGap="16px" fxLayoutAlign="baseline baseline">
- <div *ngFor="let member of structureWithOwners.owners" class="member-card">
- <div fxLayout="row" fxLayoutAlign="space-between center" fxFill>
- <div fxLayout="row" fxLayoutAlign="start center" class="user">
- <app-svg-icon
- class="avatar"
- [type]="'avatar'"
- [icon]="'defaultAvatar'"
- [iconClass]="'icon-40'"
- ></app-svg-icon>
- <div class="info-member">
- <p class="member">{{ displayMemberName(member) }}</p>
- <p class="job" *ngIf="displayJobEmployer(member)">{{ displayJobEmployer(member) }}</p>
- </div>
- </div>
- <app-button
- class="button-member"
- [style]="buttonTypeEnum.Secondary"
- [text]="'Exclure ce membre'"
- (click)="memberToExclude = member; excludeModalOpenned = true"
- tabindex="0"
- ></app-button>
+ <div *ngFor="let member of tempUsers" class="member-card">
+ <div class="user">
+ <app-svg-icon
+ class="avatar hide-on-mobile"
+ [type]="'avatar'"
+ [icon]="'defaultAvatar'"
+ [iconClass]="'icon-40'"
+ ></app-svg-icon>
+ <div class="info-member">
+ <p class="member">{{ member.email }}</p>
</div>
</div>
- <div *ngFor="let member of tempUsers" class="member-card">
- <div fxLayout="row" fxLayoutAlign="space-between center" fxFill class="card-container">
- <div fxLayout="row" fxLayoutAlign="start center" class="user">
- <app-svg-icon
- class="avatar"
- [type]="'avatar'"
- [icon]="'defaultAvatar'"
- [iconClass]="'icon-40'"
- ></app-svg-icon>
- <div class="info-member">
- <p class="member">{{ member.email }}</p>
- </div>
- </div>
- <div fxLayout="row" fxLayoutAlign="start center" class="pendingContainer">
- <div class="info-pendingStructure">
- <app-svg-icon class="check-icon" [type]="'ico'" [icon]="'check'"></app-svg-icon>
- <p class="text">Demande de rattachement envoyée le {{ member.updatedAt | date: 'dd/MM/YYYY' }}</p>
- </div>
- <app-button
- [style]="buttonTypeEnum.Secondary"
- [text]="'Annuler la demande'"
- (click)="tempUserToCancel = member; cancelAddTempUserModalOpenned = true"
- tabindex="0"
- ></app-button>
- </div>
+ <div fxLayout="row" fxLayoutAlign="start center" class="pendingContainer">
+ <div class="info-pendingStructure">
+ <app-svg-icon class="check-icon" [type]="'ico'" [icon]="'check'"></app-svg-icon>
+ <p class="text">Demande de rattachement envoyée le {{ member.updatedAt | date: 'dd/MM/YYYY' }}</p>
</div>
+ <app-button
+ [style]="buttonTypeEnum.Secondary"
+ [text]="'Annuler la demande'"
+ (click)="tempUserToCancel = member; cancelAddTempUserModalOpenned = true"
+ tabindex="0"
+ ></app-button>
</div>
- <div *ngIf="!tempUsers.length && !structureWithOwners.owners.length">
- Aucun membre trouvé dans cette structure.
- </div>
+ </div>
+ <div *ngIf="!tempUsers.length && !structureWithOwners.owners.length">
+ Aucun membre trouvé dans cette structure.
</div>
</div>
</div>
diff --git a/src/app/profile/structure-members-management/structure-members-management.component.scss b/src/app/profile/structure-members-management/structure-members-management.component.scss
index d0dbc5e75385ac44432e50ad0c3b9f63decfb8e1..5fc515bb483951f466b4e8e7d455eaad30561850 100644
--- a/src/app/profile/structure-members-management/structure-members-management.component.scss
+++ b/src/app/profile/structure-members-management/structure-members-management.component.scss
@@ -9,62 +9,86 @@
background: $white;
border-radius: 8px;
border: 1px solid $grey-6;
- .header {
- margin-bottom: 2rem;
- }
- .headerBack {
- cursor: pointer;
- span {
- color: $red;
- }
- }
- h1 {
- @include lato-regular-24;
- color: $grey-1;
- cursor: initial;
- }
-
- .member-card {
- width: 100%;
+ .headerContainer {
display: flex;
- justify-content: center;
+ justify-content: space-between;
align-items: center;
- .user {
- margin-right: 1rem;
- }
- .avatar {
- background-color: $grey-8;
- border-radius: 4px;
+ margin-bottom: 2rem;
+
+ @media #{$large-phone} {
+ display: block;
}
- .info-member {
- margin-left: 1rem;
- p {
- margin: 0;
- }
- .member {
- @include lato-bold-14;
- }
- .job {
- @include lato-regular-14;
+
+ .header {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ h1 {
+ @include lato-regular-24;
+ color: $grey-1;
+ cursor: initial;
+ span {
+ color: $red;
+ }
}
}
- .info-pendingStructure {
+ }
+
+ .membersList {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ .member-card {
+ width: 100%;
display: flex;
- margin-right: 1rem;
- max-width: 200px;
- p {
- margin: 0;
+ justify-content: space-between;
+ align-items: center;
+
+ .user {
+ display: flex;
+ gap: 8px;
+
+ .avatar {
+ background-color: $grey-8;
+ border-radius: 4px;
+ }
+ .info-member {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ p {
+ margin: 0;
+ @include lato-regular-14;
+ }
+ .member {
+ @include lato-bold-14;
+ color: $black;
+ }
+ }
}
- .text {
- @include lato-regular-13;
- color: $grey-3;
- margin-left: 3px;
+
+ .info-pendingStructure {
+ display: flex;
+ margin-right: 1rem;
+ max-width: 200px;
+ p {
+ margin: 0;
+ }
+ ::ng-deep svg {
+ color: $grey-3;
+ }
+ .text {
+ @include lato-regular-13;
+ color: $grey-3;
+ margin-left: 3px;
+ }
}
- }
- .card-container {
+
@media #{$large-phone} {
flex-direction: column !important;
align-items: flex-start !important;
+ gap: 8px;
}
}
}
diff --git a/src/app/profile/structures-management/structures-management.component.html b/src/app/profile/structures-management/structures-management.component.html
index 5b343bc1bc8cb7e286b576b6e44397c9a52327e9..0b5302e275fa8f1e66cbe1535d07d268698fe752 100644
--- a/src/app/profile/structures-management/structures-management.component.html
+++ b/src/app/profile/structures-management/structures-management.component.html
@@ -15,53 +15,45 @@
></app-button>
</div>
</div>
- <div *ngIf="structures">
- <div fxLayoutGap="16px" fxLayout="column" fxFill>
- <ng-container *ngIf="structures">
- <div *ngFor="let elt of structures" class="structureCard">
- <div class="structureCardContent" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
- <div class="structureDetails" fxLayout="column" fxLayoutAlign="space-between start">
- <p class="structureName">{{ elt.structure.structureName }}</p>
- <p class="structureLocation">{{ elt.structure.address.commune }}</p>
- </div>
- <div class="warningContainer">
- <div *ngIf="isBeingDeleted(elt.structure)" class="deleteInProgress">
- <app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'"></app-svg-icon>
- <span>Suppression en cours</span>
- </div>
- </div>
- <div class="buttons" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="12px">
- <app-button
- [type]="'button'"
- [text]="'Quitter la structure'"
- [style]="buttonTypeEnum.SecondaryWide"
- (click)="selectedStructure = elt.structure; leaveModalOpenned = true"
- ></app-button>
- <app-button
- *ngIf="!isBeingDeleted(elt.structure)"
- class="deleteAction"
- [type]="'button'"
- [text]="'Supprimer la structure'"
- [style]="buttonTypeEnum.SecondaryWide"
- routerLink="./"
- [routerLinkActive]="'active'"
- (click)="selectedStructure = elt.structure; deleteModalOpenned = true"
- ></app-button>
+ <div *ngIf="structures" class="structuresList">
+ <div *ngFor="let elt of structures" class="structureCard">
+ <div class="structureDetails">
+ <p class="structureName">{{ elt.structure.structureName }}</p>
+ <p class="structureLocation">{{ elt.structure.address.commune }}</p>
+ </div>
+ <div *ngIf="isBeingDeleted(elt.structure)" class="deleteInProgress">
+ <app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'"></app-svg-icon>
+ <span>Suppression le {{ elt.structure.toBeDeletedAt | date: 'shortDate' }}</span>
+ </div>
+ <div class="buttons" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="12px">
+ <app-button
+ [type]="'button'"
+ [text]="'Quitter la structure'"
+ [style]="buttonTypeEnum.SecondaryWide"
+ (click)="selectedStructure = elt.structure; leaveModalOpenned = true"
+ ></app-button>
+ <app-button
+ *ngIf="!isBeingDeleted(elt.structure)"
+ class="deleteAction"
+ [type]="'button'"
+ [text]="'Supprimer la structure'"
+ [style]="buttonTypeEnum.SecondaryWide"
+ routerLink="./"
+ [routerLinkActive]="'active'"
+ (click)="selectedStructure = elt.structure; deleteModalOpenned = true"
+ ></app-button>
- <app-button
- *ngIf="isBeingDeleted(elt.structure)"
- class="deleteAction"
- [type]="'button'"
- [text]="'Annuler la suppression'"
- [style]="buttonTypeEnum.SecondaryWide"
- routerLink="./"
- [routerLinkActive]="'active'"
- (click)="selectedStructure = elt.structure; cancelDeleteModalOpenned = true"
- ></app-button>
- </div>
- </div>
- </div>
- </ng-container>
+ <app-button
+ *ngIf="isBeingDeleted(elt.structure)"
+ class="deleteAction"
+ [type]="'button'"
+ [text]="'Annuler la suppression'"
+ [style]="buttonTypeEnum.SecondaryWide"
+ routerLink="./"
+ [routerLinkActive]="'active'"
+ (click)="selectedStructure = elt.structure; cancelDeleteModalOpenned = true"
+ ></app-button>
+ </div>
</div>
</div>
<app-custom-modal
@@ -69,13 +61,20 @@
[openned]="leaveModalOpenned"
[content]="'Souhaitez-vous quitter cette structure ?'"
[hideTitle]="true"
+ [customValidationButton]="'Oui'"
+ [customCancelButton]="'Non'"
(closed)="leaveStructure(selectedStructure, $event)"
></app-custom-modal>
<app-custom-modal
*ngIf="deleteModalOpenned"
[openned]="deleteModalOpenned"
[content]="'Souhaitez-vous supprimer cette structure ?'"
+ [contentLight]="
+ 'Si vous êtes le seul membre de cette structure, celle-ci est supprimée immédiatement. Si plusieurs membres sont présents dans cette structure, ils seront avertis et auront jusqu\'à 5 semaines pour s\'opposer à la suppression.'
+ "
[hideTitle]="true"
+ [customValidationButton]="'Oui'"
+ [customCancelButton]="'Non'"
(closed)="deleteStructure(selectedStructure, $event)"
></app-custom-modal>
<app-custom-modal
@@ -83,6 +82,8 @@
[openned]="cancelDeleteModalOpenned"
[content]="'Souhaitez-vous annuler la suppression de cette structure ?'"
[hideTitle]="true"
+ [customValidationButton]="'Oui'"
+ [customCancelButton]="'Non'"
(closed)="cancelDelete(selectedStructure, $event)"
></app-custom-modal>
</div>
diff --git a/src/app/profile/structures-management/structures-management.component.scss b/src/app/profile/structures-management/structures-management.component.scss
index 7796be699d37df2b36cd7d48de1e01faba50e33a..39cd36cc79c72e23a76220985c48b5911c0fe080 100644
--- a/src/app/profile/structures-management/structures-management.component.scss
+++ b/src/app/profile/structures-management/structures-management.component.scss
@@ -6,7 +6,9 @@
margin: 1rem auto;
max-width: 980px;
padding: 2rem;
- background: $white;
+ border-radius: 8px;
+ border: 1px solid $grey-6;
+ background-color: $white;
.header {
margin-bottom: 2rem;
}
@@ -22,17 +24,29 @@
cursor: initial;
}
- .structureCard {
- padding: 5px 6px;
- border-bottom: 1px solid $grey-8;
- overflow: hidden;
- .structureCardContent {
+ .structuresList {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ .structureCard {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 1rem;
+ padding: 6px 0;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid #f8f8f8;
+ }
+
@media #{$phone} {
flex-wrap: wrap;
}
.structureDetails {
- width: 45%;
- margin-bottom: 8px;
+ width: 35%;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
@media #{$phone} {
width: initial;
}
@@ -48,18 +62,16 @@
}
}
}
- .warningContainer {
- width: 8rem;
- .deleteInProgress {
+
+ .deleteInProgress {
+ @include lato-regular-13;
+ display: flex;
+ gap: 8px;
+ color: $orange-warning;
+ span {
display: flex;
- color: $orange-warning;
- padding-bottom: 5px;
- span {
- max-width: 6.875rem;
- }
- ::ng-deep svg {
- margin-right: 8px;
- }
+ align-items: center;
+ width: 6rem;
}
}
.buttons {
diff --git a/src/app/profile/structures-management/structures-management.component.ts b/src/app/profile/structures-management/structures-management.component.ts
index a409d2c4625edce0b770a2ffc425ef726beffb92..0a24f08b1e1bcf7ac2c9051bfa871a449721c475 100644
--- a/src/app/profile/structures-management/structures-management.component.ts
+++ b/src/app/profile/structures-management/structures-management.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
import { forkJoin, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Structure } from '../../models/structure.model';
@@ -20,14 +21,15 @@ export class StructuresManagementComponent implements OnInit {
public selectedStructure: string;
public deleteInProgress: boolean;
public buttonTypeEnum = ButtonType;
- public leaveModalOpenned: boolean = false;
- public deleteModalOpenned: boolean = false;
- public cancelDeleteModalOpenned: boolean = false;
+ public leaveModalOpenned = false;
+ public deleteModalOpenned = false;
+ public cancelDeleteModalOpenned = false;
constructor(
+ private notificationService: NotificationService,
private profileService: ProfileService,
- private structureService: StructureService,
- private notificationService: NotificationService
+ private router: Router,
+ private structureService: StructureService
) {}
ngOnInit(): void {
@@ -38,6 +40,12 @@ export class StructuresManagementComponent implements OnInit {
history.back();
}
+ private shouldRedirect(structures: StructureWithOwners[] | Observable<any>[]): void {
+ if (!structures.length) {
+ this.router.navigate(['/profile']);
+ }
+ }
+
private getStructures(): void {
const structures$: Observable<any>[] = [];
this.structures = [];
@@ -51,6 +59,9 @@ export class StructuresManagementComponent implements OnInit {
)
);
});
+
+ this.shouldRedirect(structures$);
+
forkJoin(structures$).subscribe(() => {
this.structures.sort((a, b) => a.structure.structureName.localeCompare(b.structure.structureName));
});
@@ -69,10 +80,11 @@ export class StructuresManagementComponent implements OnInit {
this.structureService.removeOwnerFromStructure(this.userProfile._id, structure._id).subscribe(
() => {
this.structures = this.structures.filter((obj) => obj.structure._id !== structure._id);
- this.notificationService.showSuccess(`Vous avez bien quitté ${structure.structureName}`, '');
+ this.notificationService.showSuccess(`Vous avez bien quitté ${structure.structureName}`);
+ this.shouldRedirect(this.structures);
},
() => {
- this.notificationService.showError('Une erreur est survenue, veuillez réessayer.', '');
+ this.notificationService.showError('Une erreur est survenue, veuillez réessayer.');
}
);
}
@@ -82,6 +94,9 @@ export class StructuresManagementComponent implements OnInit {
this.deleteModalOpenned = false;
if (shouldDelete) {
this.structureService.delete(structure._id).subscribe((res) => {
+ if (!res.toBeDeletedAt) {
+ this.notificationService.showSuccess(`La structure ${res.structureName} a bien été supprimée`);
+ }
this.getUserAndStructures();
});
}
diff --git a/src/app/shared/components/custom-modal/custom-modal.component.html b/src/app/shared/components/custom-modal/custom-modal.component.html
index 34f4b756c202311033c5aba4a49e0de72f4c5d3d..d2afe6490203988934b185021813017232411b9e 100644
--- a/src/app/shared/components/custom-modal/custom-modal.component.html
+++ b/src/app/shared/components/custom-modal/custom-modal.component.html
@@ -9,17 +9,18 @@
<h3 *ngIf="!hideTitle && customTitle">{{ customTitle }}</h3>
<h3 *ngIf="!hideTitle && !customTitle">ATTENTION</h3>
<p [ngClass]="{ mainText: hideTitle }">{{ content }}</p>
+ <p *ngIf="contentLight" class="light">{{ contentLight }}</p>
</div>
</div>
<div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="8px">
<app-button
(action)="closeModal(false)"
- [text]="customCancelButton ? customCancelButton : 'Annuler'"
+ [text]="customCancelButton || 'Annuler'"
[style]="buttonTypeEnum.modalSecondary"
></app-button>
<app-button
(action)="closeModal(true)"
- [text]="customValidationButton ? customValidationButton : 'Valider'"
+ [text]="customValidationButton || 'Valider'"
[style]="buttonTypeEnum.modalPrimary"
></app-button>
</div>
diff --git a/src/app/shared/components/custom-modal/custom-modal.component.scss b/src/app/shared/components/custom-modal/custom-modal.component.scss
index 6c682cc2ca925b6d91c6b1fb49a499dc5dae9e89..08f5ac3c2dff7c493d2d47ff98c6210a6f526f72 100644
--- a/src/app/shared/components/custom-modal/custom-modal.component.scss
+++ b/src/app/shared/components/custom-modal/custom-modal.component.scss
@@ -28,6 +28,9 @@
p {
text-align: center;
margin: 10px;
+ &.light {
+ @include lato-regular-13;
+ }
}
p.mainText {
@include lato-regular-18;
diff --git a/src/app/shared/components/custom-modal/custom-modal.component.ts b/src/app/shared/components/custom-modal/custom-modal.component.ts
index c5401d3bcc47542f52ee2be986c2ad503ad2c6eb..5c3cc6d03bc7f51306997fd7a065475812604a01 100644
--- a/src/app/shared/components/custom-modal/custom-modal.component.ts
+++ b/src/app/shared/components/custom-modal/custom-modal.component.ts
@@ -9,6 +9,7 @@ import { ButtonType } from '../button/buttonType.enum';
export class CustomModalComponent {
@Input() public openned: boolean;
@Input() public content: string;
+ @Input() public contentLight?: string;
@Input() public hideTitle?: boolean;
@Input() public customTitle?: string;
@Input() public customValidationButton?: string;
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
index f3347b767def225d5d990fdcdedfb3f17da38a6e..af194b4c1da4fe4ecdb6043837656f0b98181f90 100644
--- 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
@@ -1,94 +1,92 @@
-<div class="container">
- <div class="boutonSection" fxLayout="column" fxLayoutGap="8px">
- <div fxLayout="column" class="collapse" [ngClass]="{ notCollapsed: !showPublic }">
- <div class="collapseHeader" fxLayoutAlign="flex-start center" fxLayout="row" (click)="togglePublic()">
- <div class="svgContainer">
- <svg aria-hidden="true">
- <use [attr.xlink:href]="'assets/ico/sprite.svg#' + structureTypeIconEnum.public"></use>
- </svg>
- </div>
- <div class="titleCollapse">
- {{ structureTypeCategoryEnum.public }}
- </div>
- <div class="logo">
- <svg class="show" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#show'"></use>
- </svg>
- <svg class="hide" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#hide'"></use>
- </svg>
- </div>
+<div class="typeContainer">
+ <div class="collapse" [ngClass]="{ notCollapsed: !showPublic }">
+ <div class="collapseHeader" (click)="togglePublic()">
+ <div class="svgContainer">
+ <svg aria-hidden="true">
+ <use [attr.xlink:href]="'assets/ico/sprite.svg#' + structureTypeIconEnum.public"></use>
+ </svg>
</div>
- <div *ngIf="showPublic" class="btn-grid">
- <span *ngFor="let type of publicTypes">
- <app-button
- [extraClass]="type._id == pickedTypeId ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="getStructureTypeLabel(type.value)"
- (action)="pickStructureType(type._id)"
- ></app-button>
- </span>
+ <div class="titleCollapse">
+ {{ structureTypeCategoryEnum.public }}
</div>
+ <div class="logo">
+ <svg class="show" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#show'"></use>
+ </svg>
+ <svg class="hide" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#hide'"></use>
+ </svg>
+ </div>
+ </div>
+ <div *ngIf="showPublic" class="btn-grid">
+ <span *ngFor="let type of publicTypes">
+ <app-button
+ [extraClass]="type._id == pickedTypeId ? 'selected' : ''"
+ [style]="buttonTypeEnum.CheckButton"
+ [text]="getStructureTypeLabel(type.value)"
+ (action)="pickStructureType(type._id)"
+ ></app-button>
+ </span>
</div>
- <div fxLayout="column" class="collapse" [ngClass]="{ notCollapsed: !showPrivate }">
- <div class="collapseHeader" fxLayoutAlign="flex-start center" fxLayout="row" (click)="togglePrivate()">
- <div class="svgContainer">
- <svg aria-hidden="true">
- <use [attr.xlink:href]="'assets/ico/sprite.svg#' + structureTypeIconEnum.private"></use>
- </svg>
- </div>
- <div class="titleCollapse">
- {{ structureTypeCategoryEnum.private }}
- </div>
- <div class="logo">
- <svg class="show" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#show'"></use>
- </svg>
- <svg class="hide" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#hide'"></use>
- </svg>
- </div>
+ </div>
+ <div class="collapse" [ngClass]="{ notCollapsed: !showPrivate }">
+ <div class="collapseHeader" (click)="togglePrivate()">
+ <div class="svgContainer">
+ <svg aria-hidden="true">
+ <use [attr.xlink:href]="'assets/ico/sprite.svg#' + structureTypeIconEnum.private"></use>
+ </svg>
+ </div>
+ <div class="titleCollapse">
+ {{ structureTypeCategoryEnum.private }}
</div>
- <div *ngIf="showPrivate" class="btn-grid">
- <span *ngFor="let type of privateTypes">
- <app-button
- [extraClass]="type._id == pickedTypeId ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="getStructureTypeLabel(type.value)"
- (action)="pickStructureType(type._id)"
- ></app-button>
- </span>
+ <div class="logo">
+ <svg class="show" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#show'"></use>
+ </svg>
+ <svg class="hide" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#hide'"></use>
+ </svg>
</div>
</div>
- <div fxLayout="column" class="collapse" [ngClass]="{ notCollapsed: !showPrivateLucrative }">
- <div class="collapseHeader" fxLayoutAlign="flex-start center" fxLayout="row" (click)="togglePrivateLucrative()">
- <div class="svgContainer">
- <svg aria-hidden="true">
- <use [attr.xlink:href]="'assets/ico/sprite.svg#' + structureTypeIconEnum.privateLucrative"></use>
- </svg>
- </div>
- <div class="titleCollapse">
- {{ structureTypeCategoryEnum.privateLucrative }}
- </div>
- <div class="logo">
- <svg class="show" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#show'"></use>
- </svg>
- <svg class="hide" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#hide'"></use>
- </svg>
- </div>
+ <div *ngIf="showPrivate" class="btn-grid">
+ <span *ngFor="let type of privateTypes">
+ <app-button
+ [extraClass]="type._id == pickedTypeId ? 'selected' : ''"
+ [style]="buttonTypeEnum.CheckButton"
+ [text]="getStructureTypeLabel(type.value)"
+ (action)="pickStructureType(type._id)"
+ ></app-button>
+ </span>
+ </div>
+ </div>
+ <div class="collapse" [ngClass]="{ notCollapsed: !showPrivateLucrative }">
+ <div class="collapseHeader" (click)="togglePrivateLucrative()">
+ <div class="svgContainer">
+ <svg aria-hidden="true">
+ <use [attr.xlink:href]="'assets/ico/sprite.svg#' + structureTypeIconEnum.privateLucrative"></use>
+ </svg>
</div>
- <div *ngIf="showPrivateLucrative" class="btn-grid">
- <span *ngFor="let type of privateLucrativeTypes">
- <app-button
- [extraClass]="type._id == pickedTypeId ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="getStructureTypeLabel(type.value)"
- (action)="pickStructureType(type._id)"
- ></app-button>
- </span>
+ <div class="titleCollapse">
+ {{ structureTypeCategoryEnum.privateLucrative }}
</div>
+ <div class="logo">
+ <svg class="show" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#show'"></use>
+ </svg>
+ <svg class="hide" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#hide'"></use>
+ </svg>
+ </div>
+ </div>
+ <div *ngIf="showPrivateLucrative" class="btn-grid">
+ <span *ngFor="let type of privateLucrativeTypes">
+ <app-button
+ [extraClass]="type._id == pickedTypeId ? 'selected' : ''"
+ [style]="buttonTypeEnum.CheckButton"
+ [text]="getStructureTypeLabel(type.value)"
+ (action)="pickStructureType(type._id)"
+ ></app-button>
+ </span>
</div>
</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
index a4f00dd7ef946d38423dc3cc5c3f3d42a15b2423..0d606be805cd97ce018dde24d9a62fe04c3662c7 100644
--- 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
@@ -3,141 +3,71 @@
@import '../../../../assets/scss/shapes';
@import '../../../../assets/scss/breakpoint';
-button {
- outline: none;
- border: none;
-}
-.selectedChoice {
- background: $green-1 !important;
- color: $white;
-}
-.selectedType {
- .btnText {
- color: $primary-color;
- }
- .containerBtn {
- background: none !important;
- border-color: $primary-color;
- }
-}
-.boutonSection {
- padding-top: 9px;
- border-radius: 6px 6px 0px 0px;
- .btnText {
- min-height: 36px;
- @include lato-bold-14;
- margin-bottom: 12px;
- }
+.typeContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
- button {
- background: none;
- max-width: 114px;
- }
- .containerBtn {
- @include background-hash($grey-2);
- padding: 0 0 4px 5px;
+ .collapse {
+ border: 1px solid $grey-5;
border-radius: 4px;
- cursor: pointer;
- border: 1px solid $grey-4;
- .btn {
- background: $white;
- height: 53px;
- width: 35px;
- color: $primary-color;
- padding: 3px 16px 0px 12px;
- display: table-cell;
- vertical-align: middle;
- border-radius: 4px;
- @include btn-bold;
- &.withIcon {
- color: $black;
- height: 36px;
+ @media #{$small-phone} {
+ width: 95% !important;
+ }
+ @media #{$tablet} {
+ width: 296px;
+ }
+ &.notCollapsed {
+ background: $grey-8;
+ .logo {
+ .hide {
+ display: none;
+ }
+ .show {
+ display: block;
+ }
}
}
- }
-}
-
-.collapse {
- border: 1px solid $grey-5;
- border-radius: 4px;
- @media #{$small-phone} {
- width: 95% !important;
- }
- @media #{$tablet} {
- width: 296px;
- }
- &.notCollapsed {
- background: $grey-8;
- .logo {
- .hide {
- display: none;
+ .collapseHeader {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ height: 65px;
+ padding: 0 16px 0 8px;
+ cursor: pointer;
+ .titleCollapse {
+ width: 100%;
+ @include lato-bold-14;
+ color: $grey-1;
}
- .show {
- display: block;
+ .svgContainer {
+ height: 52px;
+ width: 52px;
+ }
+ .logo {
+ height: 24px;
+ width: 24px;
+ svg {
+ width: 100%;
+ height: 100%;
+ fill: $grey-1;
+ }
}
}
- }
- .btn-grid {
- padding: 0px 15px 19px 12px;
- user-select: none;
- }
- .collapseHeader {
- height: 65px;
- padding: 0 16px 0 8px;
- cursor: pointer;
- .titleCollapse {
- width: 100%;
- @include lato-bold-14;
- color: $grey-1;
- }
- .svgContainer {
- height: 52px;
- width: 52px;
- margin-right: 8px;
- }
- }
- .logo {
- height: 24px;
- width: 24px;
- svg {
- width: 100%;
- height: 100%;
- fill: $grey-1;
- }
- }
- .logo,
- .titleCollapse {
- .hide {
- display: block;
- }
- .show {
- display: none;
+
+ .btn-grid {
+ padding: 0px 1rem 1rem;
+ user-select: none;
}
- }
-}
-.tags {
- padding: 8px;
- button {
- background: $grey-8;
- border-radius: 20px;
- margin: 4px;
- max-width: 100%;
- height: 40px;
- padding: 0 13px;
- @include lato-bold-14;
- outline: none;
- border: none;
- cursor: pointer;
- &.selectedChoice {
- background: $green-1 !important;
- color: $white;
+ .logo,
+ .titleCollapse {
+ .hide {
+ display: block;
+ }
+ .show {
+ display: none;
+ }
}
}
- svg {
- width: 20px;
- height: 10px;
- margin-right: 4px;
- stroke: $grey-8;
- }
}
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.html b/src/app/shared/components/training-type-picker/training-type-picker.component.html
index 1ca4604085a9db27db860a3e4bab5e7aef9b3469..f08373e7ce604d1c03c2c0f36a405708a601dec2 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.html
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.html
@@ -1,48 +1,43 @@
-<div class="container">
- <div class="boutonSection" *ngFor="let categorie of categories" fxLayout="column" fxLayoutGap="8px">
- <ng-container>
- <div fxLayout="column" class="collapse" [ngClass]="{ notCollapsed: !isCategorieExpanded(categorie.id) }">
- <div
- class="collapseHeader"
- fxLayoutAlign="flex-start center"
- fxLayout="row"
- (click)="toggleCollapse(categorie.id); $event.stopPropagation()"
- >
- <label class="checkbox">
- <input
- type="checkbox"
- [checked]="getCategoryCheckboxStatus(categorie) === 'checked'"
- (change)="pickAllCategory(categorie, $event.target.checked); $event.stopPropagation()"
- />
- <span
- class="customCheck customCheckPrimary"
- [ngClass]="{ halfCheck: getCategoryCheckboxStatus(categorie) === 'halfChecked' }"
- ></span>
- </label>
-
- <div class="titleCollapse">
- {{ categorie.name }}
- </div>
- <div class="logo">
- <svg class="show" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#show'"></use>
- </svg>
- <svg class="hide" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#hide'"></use>
- </svg>
- </div>
- </div>
- <div *ngIf="isCategorieExpanded(categorie.id)" class="inputSection btn-grid">
- <ng-container *ngFor="let module of categorie.modules">
- <app-button
- [extraClass]="isModulePicked(categorie, module) ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="module.name"
- (action)="pickChoice(categorie, module)"
- ></app-button>
- </ng-container>
- </div>
+<div class="trainingContainer">
+ <div
+ class="boutonSection"
+ *ngFor="let categorie of categories"
+ [ngClass]="{ notCollapsed: !isCategorieExpanded(categorie.id) }"
+ >
+ <div class="collapseHeader" (click)="toggleCollapse(categorie.id); $event.stopPropagation()">
+ <label class="checkbox">
+ <input
+ type="checkbox"
+ [checked]="getCategoryCheckboxStatus(categorie) === 'checked'"
+ (change)="pickAllCategory(categorie, $event.target.checked); $event.stopPropagation()"
+ />
+ <span
+ class="customCheck customCheckPrimary"
+ [ngClass]="{ halfCheck: getCategoryCheckboxStatus(categorie) === 'halfChecked' }"
+ ></span>
+ </label>
+ <div class="titleCollapse">
+ {{ categorie.name }}
+ </div>
+ <div class="logo">
+ <svg class="show" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#show'"></use>
+ </svg>
+ <svg class="hide" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#hide'"></use>
+ </svg>
</div>
- </ng-container>
+ </div>
+
+ <div *ngIf="isCategorieExpanded(categorie.id)" class="inputSection btn-grid">
+ <ng-container *ngFor="let module of categorie.modules">
+ <app-button
+ [extraClass]="isModulePicked(categorie, module) ? 'selected' : ''"
+ [style]="buttonTypeEnum.CheckButton"
+ [text]="module.name"
+ (action)="pickChoice(categorie, module)"
+ ></app-button>
+ </ng-container>
+ </div>
</div>
</div>
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.scss b/src/app/shared/components/training-type-picker/training-type-picker.component.scss
index 4cf4a16600febd21322c9e2545f78b746ac442a8..60e1f4e1c6e452b8047880cfb4228c87346d9d70 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.scss
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.scss
@@ -4,86 +4,16 @@
@import '../../../../assets/scss/breakpoint';
@import '../../../../assets/scss/buttons';
-button {
- outline: none;
- border: none;
-}
-
-.tags {
- padding: 8px;
- width: calc(100% + 2px);
- margin-left: -16px;
- height: 100%;
- button {
- background: $grey-8;
- text-align: center;
- border-radius: 20px;
- margin: 4px;
- max-width: 100%;
- white-space: nowrap;
- height: 40px;
- padding: 0 28px;
- cursor: pointer;
- outline: none;
- border: none;
- @include lato-bold-14;
- &.selectedChoice {
- background: $green-1 !important;
- color: $white;
- }
- svg {
- width: 20px;
- height: 10px;
- margin-right: 4px;
- stroke: $grey-8;
- }
- }
+.trainingContainer {
+ padding-bottom: 0.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
}
.boutonSection {
- padding-top: 9px;
- border-radius: 6px 6px 0px 0px;
- .btnText {
- min-height: 36px;
- @include lato-bold-14;
- margin-bottom: 12px;
- }
- .checkbox {
- width: 2.25rem;
- margin-top: 0.2rem;
- }
-
- button {
- background: none;
- max-width: 114px;
- }
- .containerBtn {
- @include background-hash($grey-2);
- padding: 0 0 4px 5px;
- border-radius: 4px;
- cursor: pointer;
- border: 1px solid $grey-4;
- .btn {
- background: $white;
- height: 53px;
- width: 35px;
- color: $primary-color;
- padding: 3px 16px 0px 12px;
- display: table-cell;
- vertical-align: middle;
- border-radius: 4px;
- @include btn-bold;
- &.withIcon {
- color: $black;
- height: 36px;
- }
- }
- }
-}
-
-.collapse {
border-radius: 4px;
- box-sizing: border-box;
border: 1px solid $grey-5;
+ box-sizing: border-box;
@media #{$small-phone} {
width: 95% !important;
}
@@ -106,40 +36,38 @@ button {
}
}
.inputSection {
- padding: 0px 15px 19px 12px;
+ padding: 0px 1rem 1rem;
svg {
border-right: 0;
padding-left: 16px;
}
}
.collapseHeader {
+ display: flex;
+ align-items: center;
height: 65px;
- padding: 0 15px 0 12px;
+ padding: 0 1rem;
cursor: pointer;
+
+ .checkbox {
+ width: 2.25rem;
+ margin-top: 0.2rem;
+ }
.titleCollapse {
width: 100%;
@include lato-bold-14;
color: $grey-1;
}
- .svgContainer {
- height: 48px;
- width: 48px;
+ .logo {
+ height: 24px;
+ width: 24px;
svg {
- margin-right: 8px;
- stroke: $grey-1;
+ width: 100%;
+ height: 100%;
fill: $grey-1;
}
}
}
- .logo {
- height: 24px;
- width: 24px;
- svg {
- width: 100%;
- height: 100%;
- fill: $grey-1;
- }
- }
.logo,
.titleCollapse {
.hide {
diff --git a/src/app/utils/utils.ts b/src/app/utils/utils.ts
index a96c73a323448bca453e8487b634488b2ce96cf3..91796462d946d8bd47e0a4cd705fbc0985212709 100644
--- a/src/app/utils/utils.ts
+++ b/src/app/utils/utils.ts
@@ -156,4 +156,11 @@ export class Utils {
});
return structure;
}
+
+ /**
+ * Check if trainings are selected in order to ask for pricing or reset field "autres"
+ */
+ public isOtherAccompanimentSelected(structureForm: UntypedFormGroup): boolean {
+ return Boolean(structureForm.value.categories?.onlineProcedures.find((el) => el === 'autres'));
+ }
}