src/app/structure-list/components/structure-details/structure-details.component.html

@@ -2,7 +2,7 @@
   <div class="structure-details-container">
     <!-- Header info -->
     <div class="structure-details-title" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="space-evenly center">
-      <app-svg-icon [type]="'ico'" [icon]="getStructureTypeIcon()" [iconClass]="'icon-52'"></app-svg-icon>
+      <app-svg-icon [type]="'ico'" [icon]="structure.getTypeStructureIcon()" [iconClass]="'icon-52'"></app-svg-icon>
       <h1 class="bold">{{ structure.structureName }}</h1>
       <div class="ico-close">
         <div (click)="close()" class="ico-close-details"></div>

src/app/structure-list/components/structure-details/structure-details.component.ts

@@ -327,7 +327,4 @@ export class StructureDetailsComponent implements OnInit {
       (this.structure.categoriesDisplay.publicOther && this.structure.categoriesDisplay.publicOther.length !== 0)
     );
   }
-  public getStructureTypeIcon(): string {
-    return this.structure.getTypeStructureIcon();
-  }
 }

src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.html

+<div class="page">
+  <table role="presentation">
+    <thead>
+      <tr>
+        <td>
+          <header>
+            <img class="banner" src="assets/img/resin_print_banner.svg" alt="En-tête Rés'in" />
+          </header>
+        </td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <div class="communeContainer" *ngFor="let commune of this.structuresByCommune | keyvalue">
+            <div class="communeHeader">
+              <img class="markerIcon" src="assets/ico/searchPrintMarker.svg" alt="Icône marker" />
+              <h1>{{ commune.key }}</h1>
+            </div>
+            <hr />
+            <div class="structureList">
+              <div class="structure" *ngFor="let structure of commune.value">
+                <img class="structureIcon" src="assets/ico/searchPrintStructure.svg" alt="Icône structure" />
+                <div class="structureInfos">
+                  <p class="structureName">{{ structure.structureName }}</p>
+                  <p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>
+                  <p *ngIf="structure.contactPhone">{{ structure.contactPhone }}</p>
+                  <p>{{ structure.contactMail }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td>
+          <footer>
+            <a href="https://resin.grandlyon.com">resin.grandlyon.com</a>
+          </footer>
+        </td>
+      </tr>
+    </tfoot>
+  </table>
+</div>

src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.scss

+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+
+.page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .banner {
+    width: 100%;
+  }
+  .communeContainer {
+    break-inside: avoid-page;
+    width: 100%;
+    margin: 0 3.75rem 2rem 3.75rem;
+    .communeHeader {
+      display: flex;
+      gap: 0.25rem;
+      .markerIcon {
+        width: 20px;
+      }
+      h1 {
+        @include lato-regular-15;
+        margin: 0;
+      }
+    }
+    hr {
+      margin: 0.5rem 0;
+    }
+    .structureList {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem 0;
+
+      .structure {
+        display: flex;
+        gap: 5px;
+        width: 50%;
+        .structureIcon {
+          width: 13px;
+        }
+        .structureInfos {
+          border-left: 1px solid $grey-5;
+          padding-left: 5px;
+
+          p {
+            @include lato-regular-10;
+            margin: 0;
+            &.structureName {
+              font-weight: bold;
+            }
+          }
+        }
+      }
+    }
+  }
+  footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    @include lato-bold-14;
+  }
+}
+
+@media print {
+  thead {
+    display: table-header-group;
+  }
+  tfoot {
+    display: table-footer-group;
+  }
+}
+
+@media screen {
+  :host {
+    display: none;
+  }
+}

src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StructureListSearchPrintComponent } from './structure-list-search-print.component';
+
+describe('StructureListSearchPrintComponent', () => {
+  let component: StructureListSearchPrintComponent;
+  let fixture: ComponentFixture<StructureListSearchPrintComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StructureListSearchPrintComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StructureListSearchPrintComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.ts

+import { Component, OnInit } from '@angular/core';
+import { PrintService } from '../../../shared/service/print.service';
+
+@Component({
+  selector: 'app-structure-list-search-print',
+  templateUrl: './structure-list-search-print.component.html',
+  styleUrls: ['./structure-list-search-print.component.scss'],
+})
+export class StructureListSearchPrintComponent implements OnInit {
+  public structuresByCommune: {};
+
+  constructor(private printService: PrintService) {}
+
+  ngOnInit(): void {
+    this.structuresByCommune = this.printService.structures.reduce((communes, structure) => {
+      const commune = communes[structure.address.commune] || [];
+      commune.push(structure);
+      communes[structure.address.commune] = commune;
+      return communes;
+    }, {});
+
+    this.printService.onDataReady();
+  }
+}

src/app/structure-list/components/structure-list-search/structure-list-search.component.ts

@@ -208,18 +208,23 @@ export class StructureListSearchComponent implements OnInit {
         switch (category.theme) {
           case Theme.onlineProcedure:
             this.categoriesAccompaniment.push(category);
+            this.categoriesAccompaniment = this.categoriesAccompaniment.sort((a, b) => a.name.localeCompare(b.name));
             break;
           case Theme.skills:
             this.categoriesTraining.push(category);
+            this.categoriesTraining = this.categoriesTraining.sort((a, b) => a.name.localeCompare(b.name));
             break;
           case Theme.materialAndWifi:
             this.categoriesEquipment.push(category);
+            this.categoriesEquipment = this.categoriesEquipment.sort((a, b) => a.name.localeCompare(b.name));
             break;
           case Theme.public:
             this.categoriesPublic.push(category);
+            this.categoriesPublic = this.categoriesPublic.sort((a, b) => a.name.localeCompare(b.name));
             break;
           default:
             this.categoriesMoreFilters.push(category);
+            this.categoriesMoreFilters = this.categoriesMoreFilters.sort((a, b) => a.name.localeCompare(b.name));
             break;
         }
       });

src/app/structure-list/structure-list.component.html

@@ -5,6 +5,13 @@
       <ng-template ngPluralCase="1">1 structure</ng-template>
       <ng-template ngPluralCase="other">{{ structureList.length }} structures</ng-template>
     </div>
+    <app-button
+      tabindex="0"
+      (action)="print()"
+      [text]="'Imprimer la liste'"
+      [style]="buttonTypeEnum.Secondary"
+      [extraClass]="'small-text'"
+    ></app-button>
     <app-button
       tabindex="0"
       (action)="addStructure()"
@@ -22,6 +29,11 @@
       (hover)="handleCardHover($event)"
       class="structure-card"
     ></app-card>
-    <p *ngIf="structureList && structureList.length <= 0">Il n'y a aucune réponse correspondant à votre recherche</p>
+    <p *ngIf="structureList && structureList.length <= 0 && !isLoading">
+      Il n'y a aucune réponse correspondant à votre recherche
+    </p>
+    <div *ngIf="structureList && structureList.length <= 0 && isLoading" class="loader">
+      <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+    </div>
   </div>
 </div>

src/app/structure-list/structure-list.component.scss

@@ -17,6 +17,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 8px;
   margin: 8px 16px;
   .nbStructuresLabel {
     @include lato-regular-14;
@@ -28,13 +29,3 @@
 ::ng-deep .structure-card:last-child .structure {
   border-bottom: unset !important;
 }
-
-@media print {
-  .listCard {
-    display: none;
-  }
-
-  .hide-on-print {
-    display: none !important;
-  }
-}

src/app/structure-list/structure-list.component.ts

-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { GeoJson } from '../map/models/geojson.model';
 import { Structure } from '../models/structure.model';
 import { AuthService } from '../services/auth.service';
 import { StructureService } from '../services/structure.service';
 import { ButtonType } from '../shared/components/button/buttonType.enum';
+import { PrintService } from '../shared/service/print.service';
 
 @Component({
   selector: 'app-structure-list',
   templateUrl: './structure-list.component.html',
   styleUrls: ['./structure-list.component.scss'],
 })
-export class StructureListComponent implements OnChanges {
+export class StructureListComponent implements OnChanges, OnInit {
   @Input() public structureList: Structure[];
   @Input() public location: GeoJson;
   @Input() public selectedStructure: Structure = new Structure();
@@ -21,12 +22,15 @@ export class StructureListComponent implements OnChanges {
 
   public buttonTypeEnum = ButtonType;
   public structure: Structure;
+  public printMode = false;
+  public isLoading = true;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private structureService: StructureService,
-    private authService: AuthService
+    private authService: AuthService,
+    private printService: PrintService
   ) {
     this.route.queryParams.subscribe((queryParams) => {
       if (queryParams.id) {
@@ -41,6 +45,12 @@ export class StructureListComponent implements OnChanges {
     });
   }
 
+  ngOnInit(): void {
+    if (this.printMode) {
+      this.printService.onDataReady();
+    }
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.selectedStructure && this.selectedStructure) {
       this.showDetails(this.selectedStructure);
@@ -53,6 +63,7 @@ export class StructureListComponent implements OnChanges {
     }
     if (changes.structureList) {
       document.getElementById('listCard').scrollTo(0, 0);
+      this.isLoading = changes.structureList.firstChange;
     }
   }
 
@@ -80,4 +91,8 @@ export class StructureListComponent implements OnChanges {
   public mouseLeave(): void {
     this.displayMapMarkerId.emit(undefined);
   }
+
+  public print() {
+    this.printService.printDocuments('structures-search', this.structureList);
+  }
 }

src/app/utils/formUtils.ts

@@ -125,7 +125,7 @@ export class formUtils {
         handicaps: this.loadArrayForCheckbox(structure.categories.handicaps, false),
         age: this.loadArrayForCheckbox(structure.categories.age, true),
         languageAndIlliteracy: this.loadArrayForCheckbox(structure.categories.languageAndIlliteracy, false),
-        selfServiceMaterial: this.loadArrayForCheckbox(structure.categories.selfServiceMaterial, true),
+        selfServiceMaterial: this.loadArrayForCheckbox(structure.categories.selfServiceMaterial, false),
         publicOthers: this.loadArrayForCheckbox(structure.categories.publicOthers, false),
         equipmentsAndServices: this.loadArrayForCheckbox(structure.categories.equipmentsServices, false),
         baseSkills: new UntypedFormControl(structure.categories.baseSkills),

src/assets/ico/searchPrintMarker.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M12.3519 15.8973C14.9053 13.5588 16.875 11.7548 16.875 8.7963C16.875 4.97377 13.797 1.875 10 1.875C6.20304 1.875 3.125 4.97377 3.125 8.7963C3.125 11.9219 4.72381 13.3564 7.75803 16.0788C8.43459 16.6858 9.18252 17.3569 10 18.125C10.8107 17.3088 11.6062 16.5803 12.3519 15.8973ZM10 11.5046C11.4858 11.5046 12.6902 10.2921 12.6902 8.7963C12.6902 7.30053 11.4858 6.08796 10 6.08796C8.51423 6.08796 7.30978 7.30053 7.30978 8.7963C7.30978 10.2921 8.51423 11.5046 10 11.5046Z"
+        stroke="#DA3635" stroke-width="1.5" stroke-linecap="round" />
+</svg>
\ No newline at end of file

src/assets/ico/searchPrintStructure.svg

+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_10059_198649)">
+        <path
+            d="M1.77283 5.40455L6.55919 1.68182L11.3456 5.40455V11.2546C11.3456 11.5366 11.2335 11.8072 11.034 12.0067C10.8346 12.2061 10.564 12.3182 10.2819 12.3182H2.83646C2.55437 12.3182 2.28383 12.2061 2.08436 12.0067C1.88489 11.8072 1.77283 11.5366 1.77283 11.2546V5.40455Z"
+            stroke="#DA3635" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M4.96375 12.3182V7H8.15465V12.3182" stroke="#DA3635" stroke-width="1.5" stroke-linecap="round"
+            stroke-linejoin="round" />
+    </g>
+    <defs>
+        <clipPath id="clip0_10059_198649">
+            <rect width="13" height="13" fill="white" transform="translate(0 0.5)" />
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file