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
naturalsolutions · Sep 7, 2023 · 793dfa0 · 793dfa0
1 parent f8f7a9a
commit 793dfa0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 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
@@ -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;
+}
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
@@ -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>