feat: reduce url display for structure details, change phone display and small fixes

src/app/shared/components/logo-card/logo-card.component.html

 <div fxLayout="column" fxLayoutAlign="center center" *ngIf="name">
   <img [src]="'assets/logos/' + getLogoKey(name) + '.svg'" [alt]="'logo ' + name" />
-  <p>{{ name }}</p>
+  <p>{{ getName(name) }}</p>
 </div>

src/app/shared/components/logo-card/logo-card.component.ts

@@ -17,6 +17,15 @@ export class LogoCardComponent implements OnInit {
 
   ngOnInit(): void {}
 
+  // Get the custom or default name from a demarche.
+  public getName(demarche: string): string {
+    switch (demarche) {
+      case Demarches.caf:
+        return 'Caf';
+      default:
+        return demarche;
+    }
+  }
   public getLogoKey(demarche: string): string {
     switch (demarche) {
       case Demarches.caf:

src/app/shared/pipes/index.ts

 import { DayPipe } from './day.pipe';
+import { PhonePipe } from './phone.pipe';
+import { UrlPipe } from './url.pipe';
 
-export { DayPipe };
+export { DayPipe, PhonePipe, UrlPipe };
 
 // tslint:disable-next-line:variable-name
-export const SharedPipes = [DayPipe];
+export const SharedPipes = [DayPipe, PhonePipe, UrlPipe];

src/app/shared/pipes/phone.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'phone' })
+export class PhonePipe implements PipeTransform {
+  transform(value: string): string {
+    //Remove dot and space from the phone string and add space in each 2 numbers
+    const regexArray = value.replace(/\s|\./g, '').match(/.{1,2}/g);
+    return regexArray.join(' ');
+  }
+}

src/app/shared/pipes/url.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'url' })
+export class UrlPipe implements PipeTransform {
+  transform(value: string): string {
+    const valueSplitted = value.split('/');
+    if (value.includes('//')) {
+      value = valueSplitted[2];
+    } else {
+      value = valueSplitted[0];
+    }
+    return value;
+  }
+}

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

@@ -10,7 +10,7 @@
           <h2 class="bold">{{ structure.nomDeVotreStructure }}</h2>
           <h3>{{ structure.typeDeStructure }}</h3>
         </div>
-        <div fxLayout="column" fxLayoutAlign="end">
+        <div class="btnPrint" fxLayout="column" fxLayoutAlign="end">
           <app-button
             class="hide-on-print"
             [type]="'button'"
@@ -22,7 +22,7 @@
         </div>
       </div>
       <div fxLayout="row">
-        <div fxLayout="column" fxFlex="60%">
+        <div fxLayout="column" fxFlex="50%">
           <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
             <app-structure-opening-status
               class="hide-on-print"
@@ -36,21 +36,26 @@
           </div>
           <div *ngIf="structure.siteWeb" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
             <app-svg-icon [type]="'ico'" [icon]="'web'"></app-svg-icon>
-            <a target="_blank" rel="noopener noreferrer" [href]="structure.siteWeb">{{ structure.siteWeb }}</a>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              [href]="structure.siteWeb.includes('http') ? structure.siteWeb : 'http://' + structure.siteWeb"
+              >{{ structure.siteWeb | url }}</a
+            >
           </div>
           <div *ngIf="structure.telephone" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
             <app-svg-icon [type]="'ico'" [icon]="'tel'"></app-svg-icon>
-            <p>{{ structure.telephone }}</p>
+            <p>{{ structure.telephone | phone }}</p>
           </div>
         </div>
-        <div fxLayout="column" fxFlex="40%">
+        <div fxLayout="column" fxFlex="50%">
           <div *ngIf="structure.courriel" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
             <app-svg-icon [type]="'ico'" [icon]="'email'"></app-svg-icon>
             <a [href]="'mailto:' + structure.courriel">{{ structure.courriel }}</a>
           </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.derniereModification | date: 'mediumDate' }}</p>
+            <p>Mise à jour le {{ structure.derniereModification | date: 'mediumDate' }}</p>
           </div>
         </div>
       </div>
@@ -112,7 +117,7 @@
     </div>
     <!-- Openning Hours -->
     <div fxLayout="row" class="w-100">
-      <div fxFlex="70%">
+      <div fxFlex="50%">
         <h3 class="subtitle">Horaires d’ouverture au public :</h3>
         <div fxLayout="column">
           <div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
@@ -131,7 +136,7 @@
         </div>
       </div>
       <!-- modalitesDacces -->
-      <div fxFlex="30%">
+      <div fxFlex="50%">
         <h3 class="subtitle">Accès</h3>
         <div
           *ngFor="let acces of structure.modalitesDacces"

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

@@ -5,6 +5,7 @@
 @import '../../../../assets/scss/layout';
 
 .structrue-details-container {
+  border-right: solid 1px $grey-4;
   background-color: $white;
   z-index: $structure-details-z-index;
   position: absolute;
@@ -15,10 +16,13 @@
   height: calc(100vh - #{$header-height} - #{$footer-height});
   padding: 10px 24px;
   overflow: auto;
+  .btnPrint {
+    margin-right: 75px;
+  }
 }
 
 .structrue-details-container > .structure-details-block {
-  padding: 0px 68px 24px 0;
+  padding: 0px 0px 24px 0;
   border-bottom: 1px dashed $grey-2;
   .subtitle {
     text-transform: uppercase;
@@ -27,7 +31,7 @@
 }
 
 .structrue-details-container > .structure-details-block ~ .structure-details-block {
-  padding: 24px 68px 24px 0;
+  padding: 24px 0;
 }
 
 .structure-details-block:last-child {