From 793dfa030c441c4190006b52eaad67cd432c06b9 Mon Sep 17 00:00:00 2001
From: Maxime Vergez <85738261+mvergez@users.noreply.github.com>
Date: Tue, 25 Apr 2023 16:56:15 +0200
Subject: [PATCH] style(front): no data support & line return (#58)

When no data is available: show a message
When the displayed option is too long: line break
---
 .../option-list-btn/option-list-btn.component.css     | 10 ++++++++++
 .../option-list-btn/option-list-btn.component.html    | 11 +++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/option-list-btn/option-list-btn.component.css b/frontend/app/components/option-list-btn/option-list-btn.component.css
index af550605f..1719de53b 100644
--- a/frontend/app/components/option-list-btn/option-list-btn.component.css
+++ b/frontend/app/components/option-list-btn/option-list-btn.component.css
@@ -9,3 +9,13 @@
 ::ng-deep.mat-form-field.btn-menu {
   display: block;
 }
+
+
+.mat-option{
+  word-wrap:break-word !important;
+  white-space:normal !important;
+}
+
+::ng-deep.mat-option-text{
+  line-height:normal !important;
+}
\ No newline at end of file
diff --git a/frontend/app/components/option-list-btn/option-list-btn.component.html b/frontend/app/components/option-list-btn/option-list-btn.component.html
index a82dd2548..2c6446578 100644
--- a/frontend/app/components/option-list-btn/option-list-btn.component.html
+++ b/frontend/app/components/option-list-btn/option-list-btn.component.html
@@ -6,10 +6,13 @@
         <mat-form-field class="btn-menu">
             <input type="text" [placeholder]="placeholder" aria-label="Number" matInput [formControl]="form"
                 [matAutocomplete]="auto" />
-            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
-                <mat-option *ngFor="let option of optionList" [value]="option">
-                    {{ option.label }}
-                </mat-option>
+            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" classList="width-mat">
+                <mat-option *ngIf="optionList?.length == 0; else elseBlock" disabled>Aucun protocole n'est disponible pour ce type de site</mat-option>
+                <ng-template #elseBlock>
+                    <mat-option *ngFor="let option of optionList" [value]="option">
+                        {{ option.label }}
+                    </mat-option>
+                </ng-template>
             </mat-autocomplete>
         </mat-form-field>
         <div>