Added nicer select component
This commit is contained in:
parent
dd35643915
commit
0701388c7e
|
@ -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,
|
||||
|
|
|
@ -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>
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
11
frontend/src/app/partials/select/select.component.html
Normal file
11
frontend/src/app/partials/select/select.component.html
Normal file
|
@ -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>
|
104
frontend/src/app/partials/select/select.component.ts
Normal file
104
frontend/src/app/partials/select/select.component.ts
Normal file
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
Loading…
Reference in a new issue