From 03b9383cddf6c635c22df39990bc7466aa1b16b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20BRISON?=
<ext.sopra.jbrison@grandlyon.com>
Date: Fri, 27 Nov 2020 10:43:22 +0100
Subject: [PATCH] feat: reduce url display for structure details, change phone
display and small fixes
---
.../logo-card/logo-card.component.html | 2 +-
.../logo-card/logo-card.component.ts | 9 ++++++++
src/app/shared/pipes/index.ts | 6 ++++--
src/app/shared/pipes/phone.pipe.ts | 10 +++++++++
src/app/shared/pipes/url.pipe.ts | 14 +++++++++++++
.../structure-details.component.html | 21 ++++++++++++-------
.../structure-details.component.scss | 8 +++++--
7 files changed, 57 insertions(+), 13 deletions(-)
create mode 100644 src/app/shared/pipes/phone.pipe.ts
create mode 100644 src/app/shared/pipes/url.pipe.ts
diff --git a/src/app/shared/components/logo-card/logo-card.component.html b/src/app/shared/components/logo-card/logo-card.component.html
index 3cc35f78f..1ca599427 100644
--- a/src/app/shared/components/logo-card/logo-card.component.html
+++ b/src/app/shared/components/logo-card/logo-card.component.html
@@ -1,4 +1,4 @@
<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>
diff --git a/src/app/shared/components/logo-card/logo-card.component.ts b/src/app/shared/components/logo-card/logo-card.component.ts
index 5f13e6fd4..5bc731433 100644
--- a/src/app/shared/components/logo-card/logo-card.component.ts
+++ b/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:
diff --git a/src/app/shared/pipes/index.ts b/src/app/shared/pipes/index.ts
index a00b240b7..21bf9cf7e 100644
--- a/src/app/shared/pipes/index.ts
+++ b/src/app/shared/pipes/index.ts
@@ -1,6 +1,8 @@
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];
diff --git a/src/app/shared/pipes/phone.pipe.ts b/src/app/shared/pipes/phone.pipe.ts
new file mode 100644
index 000000000..af1e964f7
--- /dev/null
+++ b/src/app/shared/pipes/phone.pipe.ts
@@ -0,0 +1,10 @@
+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(' ');
+ }
+}
diff --git a/src/app/shared/pipes/url.pipe.ts b/src/app/shared/pipes/url.pipe.ts
new file mode 100644
index 000000000..65cc2c562
--- /dev/null
+++ b/src/app/shared/pipes/url.pipe.ts
@@ -0,0 +1,14 @@
+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;
+ }
+}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 15e99c896..1aa231d3c 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/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"
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index 5e622e077..7013d4f1d 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.scss
+++ b/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 {
--
GitLab