fix: (core)loading spinner for select (#1587)

* added changed icon * changed to boolean * add rotation * dissalowing selection if loading * change icon to spinner * reput dropdown and clickable feature * fix color for spinner * removed blue * add implimentation of designers for loading spinner * resolved conflicts * add busy-indicator * add busy indicator to select
SAP · Jan 7, 2020 · 094ac5f · 094ac5f
1 parent 982fd89
commit 094ac5f
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 83 deletions.
diff --git a/...e/component-docs/select/examples/select-basic-example/select-basic-example.component.html b/...e/component-docs/select/examples/select-basic-example/select-basic-example.component.html
@@ -1,28 +1,42 @@
-<p>Selected Value: {{this.selectOneValue}}</p>
-<fd-select [(value)]="selectOneValue"
-           placeholder="Select an option...">
-    <fd-option value="apple">Apple</fd-option>
-    <fd-option value="pineapple">Pineapple</fd-option>
-    <fd-option value="tomato">Tomato</fd-option>
-    <fd-option value="strawberry">Strawberry</fd-option>
+<p>Selected Value: {{ this.selectOneValue }}</p>
+
+<fd-select [(value)]="selectOneValue" [loading]="true" placeholder="Select an option...">
+    <div *ngFor="let fruit of emptyValues">
+        <fd-option value="fruit">{{ fruit }}</fd-option>
+    </div>
+</fd-select>
+
+<fd-select
+    class="fd-select-example"
+    [(value)]="selectOneValue"
+    [loading]="values == null"
+    placeholder="Select an option..."
+>
+    <div *ngFor="let fruit of values">
+        <fd-option value="fruit">{{ fruit }}</fd-option>
+    </div>
 </fd-select>
 
-<fd-select class="fd-select-example"
-           [(value)]="selectTwoValue"
-           [compact]="true"
-           placeholder="Compact select">
-    <fd-option value="apple">Apple</fd-option>
-    <fd-option value="pineapple">Pineapple</fd-option>
-    <fd-option value="tomato">Tomato</fd-option>
-    <fd-option value="strawberry">Strawberry</fd-option>
+<fd-select
+    class="fd-select-example"
+    [(value)]="selectTwoValue"
+    [loading]="values == null"
+    [compact]="true"
+    placeholder="Compact select"
+>
+    <div *ngFor="let fruit of values">
+        <fd-option value="fruit">{{ fruit }}</fd-option>
+    </div>
 </fd-select>
 
-<fd-select class="fd-select-example"
-           [(value)]="selectThreeValue"
-           [disabled]="true"
-           placeholder="Disabled select">
-    <fd-option value="apple">Apple</fd-option>
-    <fd-option value="pineapple">Pineapple</fd-option>
-    <fd-option value="tomato">Tomato</fd-option>
-    <fd-option value="strawberry">Strawberry</fd-option>
+<fd-select
+    class="fd-select-example"
+    [(value)]="selectThreeValue"
+    [loading]="values == null"
+    [disabled]="true"
+    placeholder="Disabled select"
+>
+    <div *ngFor="let fruit of values">
+        <fd-option value="fruit">{{ fruit }}</fd-option>
+    </div>
 </fd-select>
diff --git a/...ore/component-docs/select/examples/select-basic-example/select-basic-example.component.ts b/...ore/component-docs/select/examples/select-basic-example/select-basic-example.component.ts
@@ -6,11 +6,11 @@ import { Component } from '@angular/core';
     styleUrls: ['select-basic-example.component.scss']
 })
 export class SelectBasicExampleComponent {
-
     selectOneValue: string;
 
     selectTwoValue: string;
 
     selectThreeValue: string;
-
+    emptyValues: string[]
+    values: string[] = ['Apple', 'Pineapple', 'Tomato', 'Strawberry'];
 }
diff --git a/...cs/select/examples/select-programmatic-example/select-programmatic-example.component.html b/...cs/select/examples/select-programmatic-example/select-programmatic-example.component.html
@@ -15,3 +15,4 @@
 </fd-select>
 
 
+
diff --git a/libs/core/src/lib/busy-indicator/busy-indicator.component.ts b/libs/core/src/lib/busy-indicator/busy-indicator.component.ts
@@ -11,7 +11,7 @@ export class BusyIndicatorComponent {
 
   /** Whether to display the loading indicator animation. */
   @Input()
-  loading: boolean = false;
+  loading: boolean;
 
   /** The size of the loading indicator, default will be medium */
   @Input()

diff --git a/libs/core/src/lib/select/select.component.html b/libs/core/src/lib/select/select.component.html
@@ -1,30 +1,43 @@
-<fd-popover [(isOpen)]="isOpen"
-            (isOpenChange)="isOpenChangeHandle($event)"
-            [options]="popperOptions"
-            [fillControlMode]="fillControlMode"
-            [appendTo]="appendTo"
-            class="fd-select-popover-custom">
+<fd-popover
+    [(isOpen)]="isOpen"
+    (isOpenChange)="isOpenChangeHandle($event)"
+    [options]="popperOptions"
+    [fillControlMode]="fillControlMode"
+    [appendTo]="appendTo"
+    class="fd-select-popover-custom"
+    [disabled]="disabled || loading"
+>
     <fd-popover-control>
         <ng-container *ngIf="triggerTemplate">
             <ng-container *ngTemplateOutlet="triggerTemplate; context: {$implicit: this}"></ng-container>
         </ng-container>
-        <ng-container *ngIf="!triggerTemplate">
-            <button class="fd-select-button-custom fd-button"
-                    aria-haspopup="true"
-                    [attr.aria-expanded]="isOpen"
-                    [disabled]="disabled"
-                    [ngClass]="{'fd-button--compact':  compact,
-                    'fd-button--noborder':  selectType === 'noborder',
-                    'fd-button--splitborder':  selectType === 'splitborder'}">
-                <fd-icon *ngIf="glyph" size="m" [glyph]="glyph" class="fd-template-icon" style="margin-top: 3px; margin-right: 12px">
+        <div *ngIf="!triggerTemplate" [ngClass]="{ loading: loading }">
+            <button
+                class="fd-select-button-custom"
+                fd-button
+                aria-haspopup="true"
+                [attr.aria-expanded]="isOpen"
+                [disabled]="disabled || loading"
+                [ngClass]="{
+                    'fd-button--compact': compact,
+                    'fd-button--noborder': selectType === 'noborder',
+                    'fd-button--splitborder': selectType === 'splitborder'
+                }"
+            >
+                <fd-icon
+                    *ngIf="glyph"
+                    size="m"
+                    [glyph]="glyph"
+                    class="fd-template-icon"
+                    style="margin-top: 3px; margin-right: 12px"
+                >
                 </fd-icon>
-                <span class="fd-select-text-custom">{{triggerValue}}</span>
+                <span class="fd-select-text-custom">{{ triggerValue }}</span>
             </button>
-        </ng-container>
+            <fd-busy-indicator *ngIf="loading" [size]="'m'" [loading]="true"></fd-busy-indicator>
+        </div>
     </fd-popover-control>
-    <fd-popover-body
-        class="fd-select-popover-body-custom"
-        [style.maxHeight]="maxHeight || (calculatedMaxHeight + 'px')">
+    <fd-popover-body class="fd-select-popover-body-custom" [style.maxHeight]="maxHeight || calculatedMaxHeight + 'px'">
         <fd-menu>
             <ul fd-menu-list>
                 <ng-content></ng-content>

diff --git a/libs/core/src/lib/select/select.component.scss b/libs/core/src/lib/select/select.component.scss
@@ -21,7 +21,7 @@
         width: 100%;
         border-color: var(--sapUiFieldBorderColor, #89919a);
         color: var(--sapUiFieldTextColor, #32363a);
-        border-radius: var(--sapField_BorderCornerRadius, .125rem);
+        border-radius: var(--sapField_BorderCornerRadius, 0.125rem);
 
         &::after {
             font-family: 'SAP-icons';
@@ -87,16 +87,16 @@
             border: transparent;
         }
         &.fd-button--splitborder {
-            border:1px solid;
+            border: 1px solid;
             border-color: var(--sapUiFieldBorderColor, #89919a);
-            &::after{
-                    border-left-style: solid;
-                    border-left-width: 1px;
-                    height: -webkit-fill-available;
-                    border-color: var(--sapUiFieldBorderColor, #89919a);
+            &::after {
+                border-left-style: solid;
+                border-left-width: 1px;
+                height: -webkit-fill-available;
+                border-color: var(--sapUiFieldBorderColor, #89919a);
             }
             &:hover {
-                    border-color: var(--sapUiFieldHoverBorderColor, #0854a0);
+                border-color: var(--sapUiFieldHoverBorderColor, #0854a0);
             }
         }
     }
@@ -115,8 +115,18 @@
 }
 
 // truncation of the overflowing component text
-.fd-dropdown_truncation{
+.fd-dropdown_truncation {
     overflow: hidden;
     text-overflow: ellipsis;
     margin-right: auto;
 }
+
+fd-busy-indicator {
+    position: absolute;
+}
+
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/libs/core/src/lib/select/select.component.ts b/libs/core/src/lib/select/select.component.ts
@@ -1,12 +1,22 @@
 import {
-    AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef,
+    AfterContentInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
     ContentChildren,
-    EventEmitter, forwardRef, HostBinding, HostListener,
-    Input, OnChanges, OnDestroy,
+    EventEmitter,
+    forwardRef,
+    HostBinding,
+    HostListener,
+    Input,
+    OnChanges,
+    OnInit,
+    OnDestroy,
     Output,
-    QueryList, SimpleChanges, TemplateRef,
-    ViewEncapsulation
+    QueryList,
+    SimpleChanges,
+    TemplateRef,
+    ViewEncapsulation,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { OptionComponent } from './option/option.component';
@@ -34,12 +44,11 @@ type SelectType = 'noborder' | 'splitborder';
     ],
     host: {
         '[class.fd-select-custom]': 'true',
-        'role': 'listbox',
+        role: 'listbox'
     },
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SelectComponent implements OnChanges, AfterContentInit, OnDestroy, ControlValueAccessor {
-
+export class SelectComponent implements OnChanges, AfterContentInit, OnInit, OnDestroy, ControlValueAccessor {
     /** @hidden */
     @HostBinding('class.fd-dropdown')
     fdDropdownClass: boolean = true;
@@ -74,11 +83,11 @@ export class SelectComponent implements OnChanges, AfterContentInit, OnDestroy,
 
     /** Select type defines the border type of the select button. */
     @Input()
-    selectType: SelectType ;
-    
+    selectType: SelectType;
+
     /** Glyph to add icon in the select component. */
     @Input()
-    glyph: string ;
+    glyph: string;
 
     /** Popper.js options of the popover. */
     @Input()
@@ -117,16 +126,16 @@ export class SelectComponent implements OnChanges, AfterContentInit, OnDestroy,
      */
     @Input()
     unselectMissingOption: boolean = true;
+    /** If user wants to disable clicking when the content has not yet loaded and apply the three dots. */
+    @Input() loading: boolean = false;
 
     /** Event emitted when the popover open state changes. */
     @Output()
-    readonly isOpenChange: EventEmitter<boolean>
-        = new EventEmitter<boolean>();
+    readonly isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>();
 
     /** Event emitted when the selected value of the select changes. */
     @Output()
-    readonly valueChange: EventEmitter<any>
-        = new EventEmitter<any>();
+    readonly valueChange: EventEmitter<any> = new EventEmitter<any>();
 
     /** @hidden */
     calculatedMaxHeight: number;
@@ -149,14 +158,12 @@ export class SelectComponent implements OnChanges, AfterContentInit, OnDestroy,
     }) as Observable<OptionComponent>;
 
     /** @hidden */
-    onChange: Function = () => {};
+    onChange: Function = () => { };
 
     /** @hidden */
-    onTouched: Function = () => {};
+    onTouched: Function = () => { };
 
-    constructor (
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
+    constructor(private changeDetectorRef: ChangeDetectorRef) { }
 
     /** @hidden */
     isOpenChangeHandle(isOpen: boolean): void {
@@ -177,9 +184,12 @@ export class SelectComponent implements OnChanges, AfterContentInit, OnDestroy,
         }
     }
 
+    ngOnInit() {
+        // console.log(this.loading);
+    }
+
     /** @hidden */
     ngAfterContentInit(): void {
-
         // If the observable state changes, reset the options and initialize selection.
         this.options.changes.pipe(startWith(null), takeUntil(this.destroy$)).subscribe(() => {
             this.resetOptions();
@@ -258,13 +268,13 @@ export class SelectComponent implements OnChanges, AfterContentInit, OnDestroy,
     /** @hidden */
     @HostListener('keydown', ['$event'])
     keydownHandler(event: KeyboardEvent): void {
-        switch (event.key) {
-            case ('ArrowUp'): {
+        switch (event.code) {
+            case 'ArrowUp': {
                 event.preventDefault();
                 this.decrementFocused();
                 break;
             }
-            case ('ArrowDown'): {
+            case 'ArrowDown': {
                 event.preventDefault();
                 this.incrementFocused();
                 break;
@@ -375,7 +385,6 @@ export class SelectComponent implements OnChanges, AfterContentInit, OnDestroy,
 
     /** Method that focuses the next option in the list, or the first one if the last one is currently focused. */
     private incrementFocused(): void {
-
         // Get active focused element
         const activeElement = document.activeElement;
 
@@ -402,7 +411,6 @@ export class SelectComponent implements OnChanges, AfterContentInit, OnDestroy,
 
     /** Method that focuses the previous option in the list, or the last one if the last one is currently focused. */
     private decrementFocused(): void {
-
         // Get active focused element
         const activeElement = document.activeElement;
 
@@ -442,5 +450,4 @@ export class SelectComponent implements OnChanges, AfterContentInit, OnDestroy,
             this.onChange(undefined);
         });
     }
-
 }
diff --git a/libs/core/src/lib/select/select.module.ts b/libs/core/src/lib/select/select.module.ts
@@ -6,6 +6,8 @@ import { MenuModule } from '../menu/menu.module';
 import { CommonModule } from '@angular/common';
 import { ButtonModule } from '../button/button.module';
 import { IconModule } from '../icon/icon.module';
+import { LoadingSpinnerModule } from '../loading-spinner/loading-spinner.module';
+import { BusyIndicatorModule } from '../busy-indicator/busy-indicator.module';
 
 @NgModule({
     declarations: [
@@ -17,11 +19,13 @@ import { IconModule } from '../icon/icon.module';
         OptionComponent
     ],
     imports: [
+        BusyIndicatorModule,
         CommonModule,
         PopoverModule,
         MenuModule,
         ButtonModule,
-        IconModule
+        IconModule,
+        LoadingSpinnerModule
     ]
 })
 export class SelectModule { }