Added nicer select component

frontend/src/app/app.module.ts

@@ -26,6 +26,7 @@ import { DomainsComponent } from './pages/domains/domains.component';
 import { PasswordComponent } from './pages/password/password.component';
 import { EditSlaveComponent } from './pages/edit-slave/edit-slave.component';
 import { EditAuthComponent } from './pages/edit-auth/edit-auth.component';
+import { SelectComponent } from './partials/select/select.component';
 
 @NgModule({
   declarations: [
@@ -44,7 +45,8 @@ import { EditAuthComponent } from './pages/edit-auth/edit-auth.component';
     PagingComponent,
     PagesizeComponent,
     EditSlaveComponent,
-    EditAuthComponent
+    EditAuthComponent,
+    SelectComponent
   ],
   imports: [
     BrowserModule,

frontend/src/app/pages/domains/domains.component.html

@@ -20,12 +20,7 @@
                             <div class="form-inline">
                                 <span>Name</span>
                                 <app-sort field="type" [activeFields]="sortField" (sort)="onSortEvent($event)"></app-sort>
-                                <select class="form-control form-control-sm" [formControl]="typeFilter">
-                                    <option value="">No filter...</option>
-                                    <option value="MASTER">MASTER</option>
-                                    <option value="NATIVE">NATIVE</option>
-                                    <option value="SLAVE">SLAVE</option>
-                                </select>
+                                <app-select [options]="typeFilterOptions" [formControl]="typeFilter"></app-select>
                             </div>
                         </th>
                         <th class="w-15 align-middle">
@@ -48,7 +43,6 @@
                 </tbody>
             </table>
         </div>
-
     </div>
 </div>
 <app-paging [pagingInfo]="pagingInfo" [pageWidth]="3" (pageChange)="onPageChange($event)"></app-paging>

frontend/src/app/pages/domains/domains.component.ts

@@ -28,6 +28,7 @@ export class DomainsComponent implements OnInit {
 
     public searchInput: FormControl;
     public typeFilter: FormControl;
+    public typeFilterOptions = ['MASTER', 'NATIVE', 'SLAVE'];
 
     constructor(private domains: DomainsOperation, public gs: StateService, private modal: ModalService, private router: Router) { }
 
@@ -35,7 +36,7 @@ export class DomainsComponent implements OnInit {
         this.searchInput = new FormControl('');
         this.searchInput.valueChanges.debounceTime(500).subscribe(() => this.loadData());
 
-        this.typeFilter = new FormControl('');
+        this.typeFilter = new FormControl(null);
         this.typeFilter.valueChanges.subscribe(() => this.loadData());
 
         this.loadData();
@@ -44,7 +45,7 @@ export class DomainsComponent implements OnInit {
     public async loadData() {
         const sortStr = this.sortField !== '' ? this.sortField + '-' + this.sortOrder : null;
         const searchStr = this.searchInput.value !== '' ? this.searchInput.value : null;
-        const typeFilter = this.typeFilter.value !== '' ? this.typeFilter.value : null;
+        const typeFilter = this.typeFilter.value;
 
         const res = await this.domains.getList(this.pageRequested, this.gs.pageSize, searchStr, sortStr, typeFilter);
 

frontend/src/app/partials/modal-container/modal-container.component.html

@@ -8,7 +8,7 @@
                 <p>{{options.body}}</p>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-default" (click)="onDismis()">{{options.dismisText}}</button>
+                <button type="button" class="btn btn-secondary" (click)="onDismis()">{{options.dismisText}}</button>
                 <button type="button" class="btn" [ngClass]="'btn-' + options.acceptClass" (click)="onAccept()">{{options.acceptText}}</button>
             </div>
         </div>

frontend/src/app/partials/select/select.component.html

@@ -0,0 +1,11 @@
+<div class="dropdown">
+    <button class="btn btn-sm dropdown-toggle no-shadow" (click)="toggleOpen()" [class.disabled]="!enabled">
+        {{ buttonText() }}
+    </button>
+    <div class="dropdown-menu" [class.show]="open">
+        <span class="dropdown-item cursor-pointer" (click)="reset()">Clear</span>
+        <div class="dropdown-divider"></div>
+        <span *ngFor="let option of options" [class.active]="isActive(option)" class="dropdown-item cursor-pointer"
+            (click)="onClick(option)">{{ option }}</span>
+    </div>
+</div>

frontend/src/app/partials/select/select.component.ts

@@ -0,0 +1,104 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+    selector: 'app-select',
+    templateUrl: './select.component.html',
+    styleUrls: ['./select.component.scss'],
+    providers: [{
+        provide: NG_VALUE_ACCESSOR,
+        multi: true,
+        useExisting: forwardRef(() => SelectComponent)
+    }]
+})
+export class SelectComponent implements OnInit, ControlValueAccessor {
+
+    @Input() options: Array<string> = [];
+    @Input() emptyText = 'Choose..';
+    @Input() multiple = false;
+
+    public open = false;
+
+    public selections: Array<string> = [];
+
+    public enabled = true;
+
+    private onChange = (_: any) => { };
+    private onTouch = () => { };
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+    public toggleOpen() {
+        this.open = !this.open;
+        this.onTouch();
+    }
+
+    public onClick(item) {
+        if (this.multiple !== false) {
+            if (this.selections.includes(item)) {
+                this.selections = this.selections.filter((i) => i !== item);
+            } else {
+                this.selections.push(item);
+            }
+        } else {
+            this.selections = [item];
+            this.open = false;
+        }
+
+        this.emitValueChange();
+    }
+
+    public emitValueChange() {
+        if (this.multiple !== false) {
+            this.onChange(this.selections.length === 0 ? null : this.selections);
+        } else {
+            this.onChange(this.selections.length === 0 ? null : this.selections[0]);
+        }
+    }
+
+    public isActive(item) {
+        return this.selections.includes(item);
+    }
+
+    public buttonText() {
+        if (this.selections.length === 0) {
+            return this.emptyText;
+        } else {
+            return this.selections.join(',');
+        }
+    }
+
+    public reset() {
+        this.selections = [];
+        this.open = false;
+        this.emitValueChange();
+    }
+
+    public writeValue(obj: any): void {
+        console.log('input obj ' + JSON.stringify(obj));
+        console.log(obj);
+        if (obj === null) {
+            this.selections = [];
+        } else if (obj instanceof Array) {
+            this.selections = obj;
+        } else {
+            this.selections = [obj.toString()];
+        }
+    }
+
+    public registerOnChange(fn: any): void {
+        this.onChange = fn;
+    }
+
+    public registerOnTouched(fn: any): void {
+        this.onTouch = fn;
+    }
+
+    public setDisabledState(isDisabled: boolean): void {
+        this.enabled = !isDisabled;
+    }
+
+}