Merge branch 'dev' into 'master'

Dev

See merge request !156

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { AboutComponent } from './about/about.component';
-import { FormComponent } from './form/form.component';
+import { FormComponent } from './form/structure-form/form.component';
 import { AdminGuard } from './guards/admin.guard';
 import { AuthGuard } from './guards/auth.guard';
 import { DeactivateGuard } from './guards/deactivate.guard';
@@ -15,9 +15,16 @@ import { StructureDetailsComponent } from './structure-list/components/structure
 import { StructureListComponent } from './structure-list/structure-list.component';
 import { UserVerificationComponent } from './user-verification/user-verification.component';
 import { NewsletterSubscriptionComponent } from './newsletter-subscription/newsletter-subscription.component';
+import { OrientationFormComponent } from './form/orientation-form/orientation-form.component';
+import { StructureListPrintComponent } from './form/orientation-form/component/structure-list-print/structure-list-print.component';
 
 const routes: Routes = [
   { path: 'print', outlet: 'print', children: [{ path: 'structure', component: StructureDetailsComponent }] },
+  { path: 'print', outlet: 'print', children: [{ path: 'structures', component: StructureListPrintComponent }] },
+  {
+    path: 'orientation',
+    component: OrientationFormComponent,
+  },
   {
     path: 'acteurs',
     component: CartoComponent,

src/app/app.module.ts

@@ -19,7 +19,7 @@ import { StructureOpeningStatusComponent } from './structure-list/components/str
 import { ModalFilterComponent } from './structure-list/components/modal-filter/modal-filter.component';
 import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
 import { AboutComponent } from './about/about.component';
-import { FormComponent } from './form/form.component';
+import { FormComponent } from './form/structure-form/form.component';
 import { UserVerificationComponent } from './user-verification/user-verification.component';
 import { AuthGuard } from './guards/auth.guard';
 import { CustomHttpInterceptor } from './config/http-interceptor';
@@ -34,6 +34,10 @@ import { TempUserResolver } from './resolvers/temp-user.resolver';
 import { StructureJoinComponent } from './structure-join/structure-join.component';
 import { RouterListenerService } from './services/routerListener.service';
 import { NewsletterSubscriptionComponent } from './newsletter-subscription/newsletter-subscription.component';
+import { OrientationFormComponent } from './form/orientation-form/orientation-form.component';
+import { StructureDetailPrintComponent } from './form/orientation-form/component/structure-detail-print/structure-detail-print.component';
+import { StructureListPrintComponent } from './form/orientation-form/component/structure-list-print/structure-list-print.component';
+import { StructurePrintHeaderComponent } from './form/orientation-form/component/structure-print-header/structure-print-header.component';
 
 @NgModule({
   declarations: [
@@ -56,6 +60,10 @@ import { NewsletterSubscriptionComponent } from './newsletter-subscription/newsl
     FooterFormComponent,
     StructureJoinComponent,
     NewsletterSubscriptionComponent,
+    OrientationFormComponent,
+    StructureDetailPrintComponent,
+    StructureListPrintComponent,
+    StructurePrintHeaderComponent,
   ],
   imports: [BrowserModule, HttpClientModule, AppRoutingModule, SharedModule, MapModule],
   providers: [

src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html

+<div class="structrue-details-container" *ngIf="structure">
+  <!-- Header info -->
+  <div fxLayout="row" class="structure-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="8px">
+    <div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
+      <div fxLayout="column" class="no-margin" fxLayoutAlign="space-between start">
+        <h2 class="bold">{{ structure.structureName }}</h2>
+      </div>
+      <div fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="typeInformationHeader" fxLayout="column">
+          <h3>{{ structure.getLabelTypeStructure() }}</h3>
+        </div>
+      </div>
+      <div fxLayout="row" class="mobile-column">
+        <div fxLayout="column" fxFlex="50%">
+          <div *ngIf="structure.address" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon>
+            <p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>
+          </div>
+          <div *ngIf="structure.website" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'web'" [title]="'Site web'"></app-svg-icon>
+            <a
+              target="_blank"
+              class="custom-link"
+              rel="noopener noreferrer"
+              [href]="structure.website.includes('http') ? structure.website : 'http://' + structure.website"
+              >{{ structure.website | url }}</a
+            >
+          </div>
+          <div *ngIf="structure.hasSocialNetwork()" fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'network'"></app-svg-icon>
+            <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="8px">
+              <a
+                *ngIf="structure.facebook"
+                target="_blank"
+                class="custom-link"
+                rel="noopener noreferrer"
+                [href]="'http://' + structure.facebook"
+              >
+                <app-svg-icon [type]="'ico'" [icon]="'facebook'" [title]="'Facebook'"></app-svg-icon
+              ></a>
+              <a
+                *ngIf="structure.twitter"
+                target="_blank"
+                class="custom-link"
+                rel="noopener noreferrer"
+                [href]="'http://' + structure.twitter"
+              >
+                <app-svg-icon [type]="'ico'" [icon]="'twitter'" [title]="'Twitter'"></app-svg-icon
+              ></a>
+              <a
+                *ngIf="structure.instagram"
+                target="_blank"
+                class="custom-link"
+                rel="noopener noreferrer"
+                [href]="'http://' + structure.instagram"
+              >
+                <app-svg-icon [type]="'ico'" [icon]="'instagram'" [title]="'Instagram'"></app-svg-icon
+              ></a>
+              <a
+                *ngIf="structure.linkedin"
+                target="_blank"
+                class="custom-link"
+                rel="noopener noreferrer"
+                [href]="'http://' + structure.linkedin"
+              >
+                <app-svg-icon [type]="'ico'" [icon]="'linkedin'" [title]="'Linkedin'"></app-svg-icon
+              ></a>
+            </div>
+          </div>
+          <div *ngIf="structure.contactPhone" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'"></app-svg-icon>
+            <p>{{ structure.contactPhone | phone }}</p>
+          </div>
+        </div>
+        <div fxLayout="column" fxFlex="50%">
+          <div
+            *ngIf="structure.contactMail && structure.contactMail !== 'unknown@unknown.com'"
+            fxLayout="row"
+            fxLayoutAlign="none center"
+            fxLayoutGap="13px"
+          >
+            <app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'" [title]="'Email'"></app-svg-icon>
+            <p>{{ structure.contactMail }}</p>
+          </div>
+          <div *ngIf="structure.hasPassNumeric()" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'pass'" [title]="'Pass numérique'"></app-svg-icon>
+            <p>agréé Pass Numérique</p>
+          </div>
+          <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'calendar'"></app-svg-icon>
+            <p>Mise à jour le {{ structure.updatedAt | date: 'mediumDate' }}</p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        {{ structure.description }}
+      </div>
+      <div class="info">
+        {{ structure.lockdownActivity }}
+      </div>
+    </div>
+  </div>
+  <!-- Accueil -->
+  <div
+    *ngIf="structure.accessModality.length > 0 || structure.hours.hasData() || structure.remoteAccompaniment"
+    fxLayout="column"
+    class="structure-details-block"
+    fxLayoutAlign="baseline baseline"
+    fxLayoutGap="20px"
+  >
+    <!-- Opening Hours -->
+    <div fxLayout="row" class="w-100 mobile-column">
+      <div *ngIf="structure.hours.hasData()" fxFlex="50%">
+        <h3 class="subtitle">Horaires d’ouverture au public</h3>
+        <div fxLayout="column">
+          <div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
+            <div *ngIf="day.value.open">
+              <h4>{{ day.key | day }}</h4>
+              <div class="opening-time" fxLayout="row" fxLayoutAlign="none flex-end">
+                <div *ngFor="let timeRange of day.value.time; let isFirst = first">
+                  <p *ngIf="isFirst">de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}</p>
+                  <p *ngIf="!isFirst && timeRange.opening">
+                    et de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- accessModality -->
+      <div *ngIf="structure.accessModality.length > 0" fxFlex="40%">
+        <h3 class="subtitle">Accès transports en commun</h3>
+        <div fxLayout="column">
+          <div *ngFor="let tclStop of tclStopPoints">
+            <div fxLayout="row wrap" fxLayoutGap="5px">
+              <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>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div *ngIf="structure.exceptionalClosures" class="bold-info">
+      <h3 class="subtitle">Précisions sur les horaires</h3>
+      <p>{{ structure.exceptionalClosures }}</p>
+    </div>
+    <div *ngIf="structure.remoteAccompaniment" class="bold-info">
+      <h3>Cette structure propose un accompagnement à distance.</h3>
+    </div>
+  </div>
+</div>

src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss

+@import '../../../../../assets/scss/icons';
+@import '../../../../../assets/scss/color';
+@import '../../../../../assets/scss/typography';
+@import '../../../../../assets/scss/z-index';
+@import '../../../../../assets/scss/layout';
+@import '../../../../../assets/scss/breakpoint';
+
+a {
+  padding: unset;
+}
+
+.structrue-details-container {
+  border-right: solid 1px $grey-4;
+  page-break-after: always;
+  background-color: $white;
+  top: 0;
+  left: 0;
+  max-width: 980px;
+  width: 100%;
+  margin-bottom: 50px;
+  padding: 10px 24px;
+  @media #{$tablet} {
+    width: calc(100% - 2 * 24px);
+    position: fixed;
+    height: 100%;
+    .printButton {
+      display: none !important;
+    }
+  }
+  .printButton {
+    margin-right: 75px;
+  }
+}
+
+.structrue-details-container > .structure-details-block {
+  padding: 0px 0px 24px 0;
+  border-bottom: 1px dashed $grey-2;
+  .subtitle {
+    text-transform: uppercase;
+    @include cn-bold-16;
+    margin-bottom: 10px;
+    color: $grey-3;
+  }
+}
+
+.structrue-details-container > .structure-details-block ~ .structure-details-block {
+  padding: 24px 0;
+}
+
+.structure-details-block:last-child {
+  border-bottom: none;
+}
+
+.opening-time {
+  p {
+    margin: 0 5px 12px 0;
+  }
+}
+.typeInformationHeader {
+  color: $grey-3;
+}
+h2 {
+  margin-top: 0;
+  margin-bottom: 5px;
+  @include cn-regular-26;
+}
+h3 {
+  margin: 0 0 8px 0;
+  @include cn-regular-16;
+}
+h4 {
+  margin-left: 0;
+  margin-bottom: 0;
+  margin-top: 4px;
+  @include cn-regular-14;
+  color: $grey-2;
+  text-transform: uppercase;
+}
+p,
+.custom-link {
+  @include cn-regular-16;
+  margin-top: 9px;
+  margin-bottom: 9px;
+  &.no-margin {
+    margin-top: unset;
+    margin-bottom: unset;
+  }
+  &.no-margin-bottom {
+    margin-bottom: unset;
+  }
+}
+
+.bold-info {
+  @include cn-bold-16;
+}
+
+@media print {
+  .structrue-details-container {
+    background-color: unset;
+    z-index: unset;
+    position: unset;
+    top: unset;
+    left: unset;
+    max-width: unset;
+    width: unset;
+    height: unset;
+    padding: unset;
+    overflow: hidden;
+    border-right: 0;
+  }
+
+  .hide-on-print {
+    display: none !important;
+  }
+}
+
+.info {
+  color: $ram-hover-principal;
+}
+
+.wrapper {
+  width: 100%;
+  display: grid;
+  gap: 20px 30px;
+  grid-template-columns: 1fr 1fr;
+}
+
+.tags-cloud {
+  font-style: normal;
+  justify-content: center;
+  align-items: center;
+  height: 25px;
+  border-radius: 20px;
+  padding: 5px 15px;
+  color: white;
+  border-style: none;
+  margin-top: 15px;
+  background: #348899;
+}

src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Structure } from '../../../../models/structure.model';
+import * as _ from 'lodash';
+import { TclService } from '../../../../services/tcl.service';
+import { TclStopPoint } from '../../../../models/tclStopPoint.model';
+import { AuthService } from '../../../../services/auth.service';
+import { AccessModality } from '../../../../structure-list/enum/access-modality.enum';
+import { PublicCategorie } from '../../../../structure-list/enum/public.enum';
+@Component({
+  selector: 'app-structure-detail-print',
+  templateUrl: './structure-detail-print.component.html',
+  styleUrls: ['./structure-detail-print.component.scss'],
+})
+export class StructureDetailPrintComponent implements OnInit {
+  @Input() public structure: Structure;
+  @Output() public closeDetails: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() public dataReady: EventEmitter<boolean> = new EventEmitter<boolean>();
+  public accessModality = AccessModality;
+  public tclStopPoints: TclStopPoint[] = [];
+
+  constructor(private tclService: TclService, private authService: AuthService) {}
+
+  async ngOnInit(): Promise<void> {
+    // GetTclStopPoints
+    this.getTclStopPoints();
+    const index = this.structure.proceduresAccompaniment.indexOf('autres');
+    if (index > -1) {
+      this.structure.proceduresAccompaniment.splice(index, 1);
+    }
+  }
+
+  public userIsLoggedIn(): boolean {
+    return this.authService.isLoggedIn();
+  }
+
+  public getAccessLabel(accessModality: AccessModality): string {
+    switch (accessModality) {
+      case AccessModality.free:
+        return 'Accès libre';
+      case AccessModality.meeting:
+        return 'Sur rendez-vous';
+      case AccessModality.meetingOnly:
+        return 'Uniquement sur RDV';
+      case AccessModality.numeric:
+        return 'Téléphone / Visio';
+      default:
+        return null;
+    }
+  }
+
+  public getPublicLabel(tagetPublic: PublicCategorie): string {
+    switch (tagetPublic) {
+      case PublicCategorie.young:
+        return 'Jeunes (16 - 25 ans)';
+      case PublicCategorie.adult:
+        return 'Adultes';
+      case PublicCategorie.elderly:
+        return 'Séniors (+ de 65 ans)';
+      case PublicCategorie.all:
+        return 'Tout public';
+      case PublicCategorie.under16Years:
+        return 'Moins de 16 ans';
+      case PublicCategorie.women:
+        return 'Uniquement femmes';
+      default:
+        return null;
+    }
+  }
+
+  public getTclStopPoints(): void {
+    this.tclService.getTclStopPointBycoord(this.structure.getLon(), this.structure.getLat()).subscribe((res) => {
+      this.tclStopPoints = res;
+    });
+  }
+}

src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.html

+<app-structure-print-header
+  class="multi-print"
+  [beneficiaryNeedCommentary]="beneficiaryNeedCommentary"
+  [beneficiaryName]="beneficiaryName"
+  [structureAccompaniment]="structureAccompaniment"
+  [beneficiaryPassNumeric]="beneficiaryPassNumeric"
+  [contactAccompaniment]="contactAccompaniment"
+  [filters]="filters"
+></app-structure-print-header>
+<div class="multi-print" *ngFor="let structure of structures">
+  <app-structure-detail-print [structure]="structure"></app-structure-detail-print>
+</div>

src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.scss

+.list-to-print {
+  height: 600px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.multi-print {
+  ::ng-deep {
+    .structrue-details-container {
+      page-break-after: always;
+      height: 100%;
+    }
+    .print-header {
+      page-break-after: always;
+      height: 100%;
+    }
+  }
+}

src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { Structure } from '../../../../models/structure.model';
+import * as _ from 'lodash';
+import { ActivatedRoute } from '@angular/router';
+import { PrintService } from '../../../../shared/service/print.service';
+import { Filter } from '../../../../structure-list/models/filter.model';
+import Module from 'module';
+@Component({
+  selector: 'app-structure-list-print',
+  templateUrl: './structure-list-print.component.html',
+  styleUrls: ['./structure-list-print.component.scss'],
+})
+export class StructureListPrintComponent implements OnInit {
+  @Input() public structures: Structure[];
+  @Input() public filters: Filter[];
+  @Input() public beneficiaryNeedCommentary: string;
+  @Input() public beneficiaryName: string;
+  @Input() public structureAccompaniment: string;
+  @Input() public beneficiaryPassNumeric: boolean;
+  @Input() public contactAccompaniment: string;
+
+  constructor(private printService: PrintService, private route: ActivatedRoute) {}
+
+  async ngOnInit(): Promise<void> {}
+}

src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html

+<div class="print-header" fxLayout="column">
+  <div class="header-print" fxLayout="row" fxLayoutAlign="space-between center">
+    <h3>Fiche d'orientation</h3>
+    <h4 class="typeInformationHeader">{{ date }}</h4>
+  </div>
+
+  <!-- Name -->
+  <div *ngIf="beneficiaryName">
+    <p class="bold">{{ beneficiaryName }}</p>
+  </div>
+
+  <!-- Accompaniment -->
+  <div *ngIf="structureAccompaniment">
+    <div class="typeInformationHeader">Orienté par</div>
+    <div class="contactAccompaniment" fxLayout="row" fxLayoutAlign="space-between center">
+      <div class="bold">{{ structureAccompaniment }}</div>
+      <!-- Contact -->
+      <div class="bold" *ngIf="contactAccompaniment">{{ contactAccompaniment }}</div>
+    </div>
+  </div>
+
+  <!-- Needs -->
+  <div *ngIf="equipments.length > 0">
+    <p class="typeInformationHeader">Besoins en matériel</p>
+    <div fxLayout="row wrap" fxLayoutGap="16px">
+      <div *ngFor="let equipmentTag of equipments" class="tags-cloud" fxLayout="row">
+        {{ equipmentTag.text ? equipmentTag.text : equipmentTag.value }}
+      </div>
+    </div>
+  </div>
+  <div *ngIf="formations.length > 0">
+    <p class="typeInformationHeader">Besoins en formation</p>
+    <div fxLayout="row wrap" fxLayoutGap="16px">
+      <div *ngFor="let formationTag of formations" class="tags-cloud" fxLayout="row">
+        {{ formationTag.text ? formationTag.text : formationTag.value }}
+      </div>
+    </div>
+  </div>
+  <div *ngIf="assistances.length > 0">
+    <p class="typeInformationHeader">Besoins d'accompagnement</p>
+    <div fxLayout="row wrap" fxLayoutGap="16px">
+      <div *ngFor="let assistanceTag of assistances" class="tags-cloud" fxLayout="row">
+        {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }}
+      </div>
+    </div>
+  </div>
+  <div *ngIf="specificNeeds.length > 0">
+    <div class="typeInformationHeader">Besoins spécifiques'</div>
+    <div fxLayout="row wrap" fxLayoutGap="16px">
+      <div *ngFor="let specificNeed of specificNeeds" class="tags-cloud" fxLayout="row">
+        {{ specificNeed.text ? specificNeed.text : specificNeed.value }}
+      </div>
+    </div>
+  </div>
+
+  <!-- Pass Numeric -->
+  <div *ngIf="beneficiaryPassNumeric" class="inputRow" fxLayout="row" fxLayoutGap="13px">
+    <app-svg-icon [type]="'ico'" [icon]="'passNumeric'"></app-svg-icon>
+    <p class="bold">Pass Numérique</p>
+  </div>
+
+  <!-- Comments -->