Compare revisions

        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,

      [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)"

    >

        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 ||

      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,

      };

      [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 ?'

            : 'Quels publics spécifiques peuvent être accueillis dans cette structure ?'

        }}

      </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">

  <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 publicOthers.modules"

          *ngFor="let choice of languageAndIlliteracy.modules"

          [ngClass]="{ selectedChoice: true }"

        [extraClass]="isInArray(choice.id, 'publicOthers') ? 'selected' : ''"

          [extraClass]="isInArray(choice.id, 'languageAndIlliteracy') ? 'selected' : ''"

          [style]="buttonTypeEnum.CheckButton"

          [text]="choice.name"

        (action)="updateChoicePublic(choice.id, 'publicOthers')"

          (action)="updateChoicePublic(choice.id, 'languageAndIlliteracy')"

        ></app-button>

      </div>

    </div>

  <div *ngIf="age">

    <div *ngIf="handicaps">

      <div class="title">

      <h4>Âge</h4>

        <h4>Handicaps</h4>

      </div>

      <div class="btn-grid">

        <app-button

        *ngFor="let choice of age.modules"

          *ngFor="let choice of handicaps.modules"

          [ngClass]="{ selectedChoice: true }"

        [extraClass]="isInArray(choice.id, 'age') ? 'selected' : ''"

          [extraClass]="isInArray(choice.id, 'handicaps') ? 'selected' : ''"

          [style]="buttonTypeEnum.CheckButton"

          [text]="choice.name"

        (action)="updateChoicePublic(choice.id, 'age')"

          (action)="updateChoicePublic(choice.id, 'handicaps')"

        ></app-button>

      </div>

    </div>

  <div *ngIf="languageAndIlliteracy">

    <div *ngIf="publicOthers">

      <div class="title">

      <h4>Langue et illettrisme</h4>

      <p>Facultatif</p>

        <h4>Autre</h4>

      </div>

      <div class="btn-grid">

        <app-button

        *ngFor="let choice of languageAndIlliteracy.modules"

          *ngFor="let choice of publicOthers.modules"

          [ngClass]="{ selectedChoice: true }"

        [extraClass]="isInArray(choice.id, 'languageAndIlliteracy') ? 'selected' : ''"

          [extraClass]="isInArray(choice.id, 'publicOthers') ? 'selected' : ''"

          [style]="buttonTypeEnum.CheckButton"

          [text]="choice.name"

        (action)="updateChoicePublic(choice.id, 'languageAndIlliteracy')"

          (action)="updateChoicePublic(choice.id, 'publicOthers')"

        ></app-button>

      </div>

    </div>

  </ng-container>

  <div *ngIf="handicaps">

  <ng-container *ngIf="isMandatoryFields">

    <div *ngIf="age">

      <div class="title">

      <h4>Handicaps</h4>

      <p>Facultatif</p>

        <h4>Âge</h4>

      </div>

      <div class="btn-grid">

        <app-button

        *ngFor="let choice of handicaps.modules"

          *ngFor="let choice of age.modules"

          [ngClass]="{ selectedChoice: true }"

        [extraClass]="isInArray(choice.id, 'handicaps') ? 'selected' : ''"

          [extraClass]="isInArray(choice.id, 'age') ? 'selected' : ''"

          [style]="buttonTypeEnum.CheckButton"

          [text]="choice.name"

        (action)="updateChoicePublic(choice.id, 'handicaps')"

          (action)="updateChoicePublic(choice.id, 'age')"

        ></app-button>

      </div>

    </div>

  </ng-container>

</form>

  @Input() handicaps: Category;

  @Input() publicOthers: Category;

  @Input() isEditMode: boolean;

  @Input() isMandatoryFields = true;

  @Output() updateChoice = new EventEmitter<any>();

  @Output() validateForm = new EventEmitter<any>();

  structurePmr,

  structureWebAndSocialNetwork,

  structurePublicTarget,

  structurePublicTargetOptional,

  structureDigitalHelpingAccompaniment,

  structureDigitalHelpingAccompanimentOther,

  structureTrainingType,

    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 {

          <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="

          </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">

      <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

            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>

  <!-- 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 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" fxLayout="row" fxLayoutAlign="none baseline">

              <h4 fxFlex="30%">{{ day.key | day }}</h4>

              <div class="opening-time w100" fxLayout="column" fxLayoutAlign="none baseline">

          <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">

                    de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}

                  </p>

                </div>

                <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">

}

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 {

  }

}

.structure-details-container > .structure-details-block {

.subtitle {

    @include lato-bold-16;

    margin-bottom: 10px;

  @include lato-bold-14;

  margin-bottom: 8px;

  color: $grey-3;

}

}

.structure-details-container > .structure-details-block ~ .structure-details-block {

  padding: 24px 0 0 0;

}

.bold-info {

  @include lato-bold-16;

  @include lato-bold-14;

}

@media print {

}

.mobile-column {

  p {

    margin: 0;

  }

  @media #{$tablet} {

    flex-direction: row;

  }

    flex-direction: column;

  }

}

.tclStop p {

.tclStop {

  margin-bottom: 4px;

  .line:not(:empty):not(:last-child):after {

    content: ',\00a0';

  }

  p {

    margin-top: 0;

  margin-bottom: 0.2rem;

  }

}

.timeContainer {

  flex: 1;

  box-sizing: border-box;

  max-width: 50%;

}

.mb4 {

  margin-bottom: 4px;

}

.mb20 {

  margin-bottom: 20px;

}

  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;

    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;

  @each $sizename, $size in $sizes {

    &.icon-#{$sizename} {

      height: $size;

      width: $size;

    }

  &.icon-112 {

    height: 112px;

    width: 112px;

  }

  &.validation {

    height: 36px;

      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',

  }

}

.flex {

  &.row {

    flex-direction: row;

  }

  &.row-wrap {

    flex-flow: row wrap;

  }

  &.column {

    flex-direction: column;

  }

  box-sizing: border-box;

  display: flex;

}

// PRINT

@media print {