Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • web-et-numerique/factory/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client
1 result
Show changes
Commits on Source (5)
Showing
with 230 additions and 148 deletions
......@@ -447,6 +447,11 @@ export class FormViewComponent implements OnInit, AfterViewInit {
return {
categories: {
age: this.structureForm.get('categories').get('age').value,
},
};
case structureFormStep.structurePublicTargetOptional:
return {
categories: {
languageAndIlliteracy: this.structureForm.get('categories').get('languageAndIlliteracy').value,
handicaps: this.structureForm.get('categories').get('handicaps').value,
publicOthers: this.structureForm.get('categories').get('publicOthers').value,
......
......@@ -113,9 +113,19 @@
[isEditMode]="isEditMode"
[structureForm]="structureForm"
[age]="age"
(validateForm)="setValidationsForm()"
(updateChoice)="updateChoice($event)"
>
</app-structure-public-target>
</div>
<div *ngIf="currentStep == structureFormStep.structurePublicTargetOptional">
<app-structure-public-target
[isEditMode]="isEditMode"
[structureForm]="structureForm"
[handicaps]="handicaps"
[publicOthers]="publicOthers"
[languageAndIlliteracy]="languageAndIlliteracy"
[isMandatoryFields]="false"
(validateForm)="setValidationsForm()"
(updateChoice)="updateChoice($event)"
>
......
......@@ -68,6 +68,7 @@ export class StructureFormComponent implements OnChanges, OnInit {
this.currentStep === structureFormStep.structureCreationFinishedInfo ||
this.currentStep === structureFormStep.structureHours ||
this.currentStep === structureFormStep.structureTrainingType ||
this.currentStep === structureFormStep.structurePublicTargetOptional ||
this.currentStep === structureFormStep.structureEquipments ||
this.currentStep === structureFormStep.structureLabels ||
this.currentStep === structureFormStep.structureSolidarityMaterial ||
......@@ -194,6 +195,9 @@ export class StructureFormComponent implements OnChanges, OnInit {
this.pagesValidation[structureFormStep.structurePublicTarget] = {
valid: this.structureForm.get('categories').get('age').valid,
};
this.pagesValidation[structureFormStep.structurePublicTargetOptional] = {
valid: true,
};
this.pagesValidation[structureFormStep.structureDigitalHelpingAccompanimentOther] = {
valid: this.structureForm.get('otherDescription').valid,
};
......
......@@ -8,74 +8,84 @@
[icon]="'arrowBack'"
></app-svg-icon>
<div class="titleContent">
<h3>Quel public peut être accueilli dans cette structure&nbsp;?</h3>
<p>Plusieurs choix possibles</p>
<h3>
{{
isMandatoryFields
? 'Quel public peut être accueilli dans cette structure&nbsp;?'
: 'Quels publics spécifiques peuvent être accueillis dans cette structure&nbsp;?'
}}
</h3>
<p>{{ isMandatoryFields ? '' : 'Facultatif - ' }}Plusieurs choix possibles</p>
</div>
</div>
<p class="missing-information" *ngIf="isEditMode && !structureForm.get('categories').get('age').valid">
<app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" class="validationIcon"></app-svg-icon>
<span>Il faut renseigner au moins un champ</span>
</p>
<div *ngIf="publicOthers">
<div class="btn-grid">
<app-button
*ngFor="let choice of publicOthers.modules"
[ngClass]="{ selectedChoice: true }"
[extraClass]="isInArray(choice.id, 'publicOthers') ? 'selected' : ''"
[style]="buttonTypeEnum.CheckButton"
[text]="choice.name"
(action)="updateChoicePublic(choice.id, 'publicOthers')"
></app-button>
<ng-container *ngIf="!isMandatoryFields">
<div *ngIf="languageAndIlliteracy">
<div class="title">
<h4>Langue et illettrisme</h4>
</div>
<div class="btn-grid">
<app-button
*ngFor="let choice of languageAndIlliteracy.modules"
[ngClass]="{ selectedChoice: true }"
[extraClass]="isInArray(choice.id, 'languageAndIlliteracy') ? 'selected' : ''"
[style]="buttonTypeEnum.CheckButton"
[text]="choice.name"
(action)="updateChoicePublic(choice.id, 'languageAndIlliteracy')"
></app-button>
</div>
</div>
</div>
<div *ngIf="age">
<div class="title">
<h4>Âge</h4>
</div>
<div class="btn-grid">
<app-button
*ngFor="let choice of age.modules"
[ngClass]="{ selectedChoice: true }"
[extraClass]="isInArray(choice.id, 'age') ? 'selected' : ''"
[style]="buttonTypeEnum.CheckButton"
[text]="choice.name"
(action)="updateChoicePublic(choice.id, 'age')"
></app-button>
</div>
</div>
<div *ngIf="handicaps">
<div class="title">
<h4>Handicaps</h4>
</div>
<div *ngIf="languageAndIlliteracy">
<div class="title">
<h4>Langue et illettrisme</h4>
<p>Facultatif</p>
<div class="btn-grid">
<app-button
*ngFor="let choice of handicaps.modules"
[ngClass]="{ selectedChoice: true }"
[extraClass]="isInArray(choice.id, 'handicaps') ? 'selected' : ''"
[style]="buttonTypeEnum.CheckButton"
[text]="choice.name"
(action)="updateChoicePublic(choice.id, 'handicaps')"
></app-button>
</div>
</div>
<div class="btn-grid">
<app-button
*ngFor="let choice of languageAndIlliteracy.modules"
[ngClass]="{ selectedChoice: true }"
[extraClass]="isInArray(choice.id, 'languageAndIlliteracy') ? 'selected' : ''"
[style]="buttonTypeEnum.CheckButton"
[text]="choice.name"
(action)="updateChoicePublic(choice.id, 'languageAndIlliteracy')"
></app-button>
</div>
</div>
<div *ngIf="handicaps">
<div class="title">
<h4>Handicaps</h4>
<p>Facultatif</p>
<div *ngIf="publicOthers">
<div class="title">
<h4>Autre</h4>
</div>
<div class="btn-grid">
<app-button
*ngFor="let choice of publicOthers.modules"
[ngClass]="{ selectedChoice: true }"
[extraClass]="isInArray(choice.id, 'publicOthers') ? 'selected' : ''"
[style]="buttonTypeEnum.CheckButton"
[text]="choice.name"
(action)="updateChoicePublic(choice.id, 'publicOthers')"
></app-button>
</div>
</div>
</ng-container>
<div class="btn-grid">
<app-button
*ngFor="let choice of handicaps.modules"
[ngClass]="{ selectedChoice: true }"
[extraClass]="isInArray(choice.id, 'handicaps') ? 'selected' : ''"
[style]="buttonTypeEnum.CheckButton"
[text]="choice.name"
(action)="updateChoicePublic(choice.id, 'handicaps')"
></app-button>
<ng-container *ngIf="isMandatoryFields">
<div *ngIf="age">
<div class="title">
<h4>Âge</h4>
</div>
<div class="btn-grid">
<app-button
*ngFor="let choice of age.modules"
[ngClass]="{ selectedChoice: true }"
[extraClass]="isInArray(choice.id, 'age') ? 'selected' : ''"
[style]="buttonTypeEnum.CheckButton"
[text]="choice.name"
(action)="updateChoicePublic(choice.id, 'age')"
></app-button>
</div>
</div>
</div>
</ng-container>
</form>
......@@ -14,6 +14,7 @@ export class StructurePublicTargetComponent implements OnInit {
@Input() handicaps: Category;
@Input() publicOthers: Category;
@Input() isEditMode: boolean;
@Input() isMandatoryFields = true;
@Output() updateChoice = new EventEmitter<any>();
@Output() validateForm = new EventEmitter<any>();
......
......@@ -12,6 +12,7 @@ export enum structureFormStep {
structurePmr,
structureWebAndSocialNetwork,
structurePublicTarget,
structurePublicTargetOptional,
structureDigitalHelpingAccompaniment,
structureDigitalHelpingAccompanimentOther,
structureTrainingType,
......
......@@ -197,7 +197,7 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
const onlineProcedures: Filter[] = this.onlineDemarchForm.value.onlineDemarcheType.map((module: Module) => {
return new Filter('onlineProcedures', module.id, module.displayText);
});
if (onlineProcedures.length > 0) this.filters.push(onlineProcedures[0]);
if (onlineProcedures.length > 0) this.filters = [...onlineProcedures, ...this.filters];
}
public setFilters(category: string): void {
......
......@@ -300,6 +300,25 @@
<app-missing-information></app-missing-information>
</ng-container>
</div>
</div>
<div class="section publics">
<div class="sectionHeader">
<p>Public spécifique admis</p>
<app-button
class="hide-on-mobile"
[text]="'Modifier'"
[style]="buttonTypeEnum.Secondary"
[extraClass]="'editButton'"
(action)="goToEdit(structureFormStep.structurePublicTargetOptional)"
></app-button>
<app-button
class="hide-on-desktop"
[iconBtn]="'edit'"
[style]="buttonTypeEnum.SecondaryOnlyIcon"
(action)="goToEdit(structureFormStep.structurePublicTargetOptional)"
></app-button>
</div>
<div class="content">
<ng-container
*ngIf="
......@@ -339,6 +358,17 @@
</div>
</ng-container>
</div>
<div class="content">
<ng-container
*ngIf="
structure.categoriesDisplay.languageAndIlliteracy.length === 0 &&
structure.categoriesDisplay.publicOthers.length === 0 &&
structure.categoriesDisplay.handicaps.length === 0
"
>
<app-no-information></app-no-information>
</ng-container>
</div>
</div>
<div class="section proceduresAccompaniment">
......
......@@ -8,11 +8,17 @@
<div class="mobile-column">
<div fxLayout="column" fxFlex="100%">
<div *ngIf="structure.address" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
<app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon>
<app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'" [iconClass]="'icon-22'"></app-svg-icon>
<p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>
</div>
<div *ngIf="structure.contactPhone" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
<app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'"></app-svg-icon>
<div
*ngIf="structure.contactPhone"
fxLayout="row"
fxLayoutAlign="none center"
[iconClass]="'icon-22'"
fxLayoutGap="13px"
>
<app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'" [iconClass]="'icon-22'"></app-svg-icon>
<p>{{ structure.contactPhone | phone }}</p>
</div>
<div
......@@ -21,7 +27,12 @@
fxLayoutAlign="none center"
fxLayoutGap="13px"
>
<app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'" [title]="'Email'"></app-svg-icon>
<app-svg-icon
[type]="'ico'"
[iconClass]="'grey-1 icon-22'"
[icon]="'email'"
[title]="'Email'"
></app-svg-icon>
<p>{{ structure.contactMail }}</p>
</div>
</div>
......@@ -31,50 +42,47 @@
<!-- Accueil -->
<div
*ngIf="tclStopPoints || structure.hours.hasData() || structure.remoteAccompaniment"
fxLayout="column"
class="structure-details-block"
fxLayoutAlign="baseline baseline"
fxLayoutGap="20px"
class="structure-details-block flex column"
>
<!-- Opening Hours -->
<div fxLayout="row" class="w-100 mobile-column">
<div *ngIf="structure.hours.hasData()" fxFlex="60%">
<h3 class="subtitle">Horaires</h3>
<div fxLayout="column">
<div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
<div *ngIf="day.value.open" fxLayout="row" fxLayoutAlign="none baseline">
<h4 fxFlex="30%">{{ day.key | day }}</h4>
<div class="opening-time w100" fxLayout="column" fxLayoutAlign="none baseline">
<div *ngFor="let timeRange of day.value.time">
<p *ngIf="timeRange.opening">
de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}
</p>
</div>
<div class="w-100 mobile-column flex row mb20">
<div *ngIf="structure.hours.hasData()" class="timeContainer">
<h3 class="subtitle">HORAIRES</h3>
<div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
<div *ngIf="day.value.open" class="mb4">
<h4>{{ day.key | day }}</h4>
<div class="opening-time w100">
<div *ngFor="let timeRange of day.value.time">
<p *ngIf="timeRange.opening">{{ timeRange.opening }} - {{ timeRange.closing }}</p>
</div>
</div>
</div>
</div>
</div>
<!-- accessModality -->
<div *ngIf="tclStopPoints.length > 0" fxFlex="40%">
<h3 class="subtitle">Accès</h3>
<div fxLayout="column">
<div *ngFor="let tclStop of tclStopPoints | slice: 0:3">
<div fxLayout="row wrap" fxLayoutGap="5px" class="tclStop">
<p>{{ tclStop.name }}:</p>
<p *ngIf="tclStop.subLines.length > 0">Métro</p>
<p *ngFor="let sub of tclStop.subLines">{{ sub }}</p>
<p *ngIf="tclStop.tramLines.length > 0">Tram</p>
<p *ngFor="let tram of tclStop.tramLines">{{ tram }}</p>
<p *ngIf="tclStop.busLines.length > 0">Bus</p>
<p *ngFor="let bus of tclStop.busLines">{{ bus }}</p>
<div *ngIf="tclStopPoints.length">
<h3 class="subtitle">ACCÈS</h3>
<div class="flex column container">
<div *ngFor="let tclStop of tclStopPoints | slice: 0:3" class="flex column tclStop">
<p>{{ tclStop.name }}</p>
<div class="flex">
<p *ngIf="tclStop.subLines.length" class="bold">Métro&nbsp;:&nbsp;</p>
<p *ngFor="let sub of tclStop.subLines" class="line">{{ sub }}</p>
</div>
<div class="flex">
<p *ngIf="tclStop.tramLines.length" class="bold">Tram&nbsp;:&nbsp;</p>
<p *ngFor="let tram of tclStop.tramLines" class="line">{{ tram }}</p>
</div>
<div class="flex">
<p *ngIf="tclStop.busLines.length" class="bold">Bus&nbsp;:&nbsp;</p>
<p *ngFor="let bus of tclStop.busLines" class="line">{{ bus }}</p>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="structure.exceptionalClosures" class="bold-info">
<h3 class="subtitle">Précisions sur les horaires</h3>
<div *ngIf="structure.exceptionalClosures" class="mb20">
<h3 class="subtitle">PRÉCISIONS SUR LES HORAIRES</h3>
<p>{{ structure.exceptionalClosures }}</p>
</div>
<div *ngIf="structure.remoteAccompaniment" class="bold-info">
......
......@@ -12,19 +12,17 @@ h2 {
}
h3 {
margin: 0 0 8px 0;
@include lato-regular-16;
@include lato-regular-14;
}
h4 {
margin-left: 0;
margin-bottom: 0;
margin-top: 4px;
margin: 0;
@include lato-regular-14;
color: $grey-2;
text-transform: capitalize;
}
p,
.custom-link {
@include lato-regular-16;
@include lato-regular-14;
margin-top: 9px;
margin-bottom: 9px;
&.no-margin {
......@@ -56,12 +54,10 @@ a {
}
}
.structure-details-container > .structure-details-block {
.subtitle {
@include lato-bold-16;
margin-bottom: 10px;
color: $grey-3;
}
.subtitle {
@include lato-bold-14;
margin-bottom: 8px;
color: $grey-3;
}
.structure-details-container > .structure-details-block ~ .structure-details-block {
......@@ -82,7 +78,7 @@ a {
}
.bold-info {
@include lato-bold-16;
@include lato-bold-14;
}
@media print {
......@@ -103,6 +99,9 @@ a {
}
.mobile-column {
p {
margin: 0;
}
@media #{$tablet} {
flex-direction: row;
}
......@@ -122,7 +121,26 @@ a {
flex-direction: column;
}
}
.tclStop p {
margin-top: 0;
margin-bottom: 0.2rem;
.tclStop {
margin-bottom: 4px;
.line:not(:empty):not(:last-child):after {
content: ',\00a0';
}
p {
margin-top: 0;
}
}
.timeContainer {
flex: 1;
box-sizing: border-box;
max-width: 50%;
}
.mb4 {
margin-bottom: 4px;
}
.mb20 {
margin-bottom: 20px;
}
......@@ -5,6 +5,20 @@
align-items: center;
}
$sizes: (
16: 16px,
22: 22px,
26: 26px,
28: 28px,
30: 30px,
32: 32px,
40: 40px,
52: 52px,
75: 75px,
80: 80px,
112: 112px,
);
.icon {
display: inline-block;
height: 2em;
......@@ -13,44 +27,11 @@
width: unset;
height: unset;
}
&.icon-16 {
height: 16px;
width: 16px;
}
&.icon-26 {
height: 26px;
width: 26px;
}
&.icon-28 {
width: 28px;
height: 28px;
}
&.icon-30 {
width: 30px;
height: 30px;
}
&.icon-32 {
width: 32px;
height: 32px;
}
&.icon-52 {
width: 52px;
height: 52px;
}
&.icon-40 {
width: 40px;
height: 40px;
}
&.icon-75 {
width: 4.688em;
}
&.icon-80 {
height: 80px;
width: 80px;
}
&.icon-112 {
height: 112px;
width: 112px;
@each $sizename, $size in $sizes {
&.icon-#{$sizename} {
height: $size;
width: $size;
}
}
&.validation {
height: 36px;
......
......@@ -30,7 +30,7 @@ export class formUtils {
inputs: ['website', 'facebook', 'twitter', 'instagram'],
},
{ step: structureFormStep.structurePublicTarget, name: 'Public admis', inputs: ['publics'] },
{ step: structureFormStep.structurePublicTarget, name: 'Public admis - Optionnel', inputs: ['publics'] },
{
step: structureFormStep.structureDigitalHelpingAccompaniment,
name: 'Aides au numérique',
......
......@@ -294,6 +294,20 @@ button {
}
}
.flex {
&.row {
flex-direction: row;
}
&.row-wrap {
flex-flow: row wrap;
}
&.column {
flex-direction: column;
}
box-sizing: border-box;
display: flex;
}
// PRINT
@media print {
......