|
|
@ -19,8 +19,6 @@ import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Valida |
|
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
|
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
|
|
import { Store } from '@ngrx/store'; |
|
|
import { Store } from '@ngrx/store'; |
|
|
import { AppState } from '@core/core.state'; |
|
|
import { AppState } from '@core/core.state'; |
|
|
import { MatChipList } from '@angular/material/chips'; |
|
|
|
|
|
import { MatAutocomplete } from '@angular/material/autocomplete'; |
|
|
|
|
|
import { Observable } from 'rxjs'; |
|
|
import { Observable } from 'rxjs'; |
|
|
import { filter, map, mergeMap, share, tap } from 'rxjs/operators'; |
|
|
import { filter, map, mergeMap, share, tap } from 'rxjs/operators'; |
|
|
import { ObjectLwM2M } from './profile-config.models'; |
|
|
import { ObjectLwM2M } from './profile-config.models'; |
|
|
@ -43,9 +41,9 @@ import { Direction } from '@shared/models/page/sort-order'; |
|
|
export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, Validators { |
|
|
export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, Validators { |
|
|
|
|
|
|
|
|
private requiredValue: boolean; |
|
|
private requiredValue: boolean; |
|
|
private dirty = false as boolean; |
|
|
private dirty = false; |
|
|
|
|
|
|
|
|
lwm2mObjectListFormGroup: FormGroup; |
|
|
lwm2mListFormGroup: FormGroup; |
|
|
modelValue: Array<number> | null; |
|
|
modelValue: Array<number> | null; |
|
|
objectsList: Array<ObjectLwM2M> = []; |
|
|
objectsList: Array<ObjectLwM2M> = []; |
|
|
filteredObjectsList: Observable<Array<ObjectLwM2M>>; |
|
|
filteredObjectsList: Observable<Array<ObjectLwM2M>>; |
|
|
@ -72,8 +70,6 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V |
|
|
removeList = new EventEmitter<any>(); |
|
|
removeList = new EventEmitter<any>(); |
|
|
|
|
|
|
|
|
@ViewChild('objectInput') objectInput: ElementRef<HTMLInputElement>; |
|
|
@ViewChild('objectInput') objectInput: ElementRef<HTMLInputElement>; |
|
|
@ViewChild('objectAutocomplete') matAutocomplete: MatAutocomplete; |
|
|
|
|
|
@ViewChild('chipList', {static: true}) chipList: MatChipList; |
|
|
|
|
|
|
|
|
|
|
|
private propagateChange = (v: any) => { }; |
|
|
private propagateChange = (v: any) => { }; |
|
|
|
|
|
|
|
|
@ -81,15 +77,15 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V |
|
|
public translate: TranslateService, |
|
|
public translate: TranslateService, |
|
|
private deviceProfileService: DeviceProfileService, |
|
|
private deviceProfileService: DeviceProfileService, |
|
|
private fb: FormBuilder) { |
|
|
private fb: FormBuilder) { |
|
|
this.lwm2mObjectListFormGroup = this.fb.group({ |
|
|
this.lwm2mListFormGroup = this.fb.group({ |
|
|
objectsList: [this.objectsList], |
|
|
objectsList: [this.objectsList], |
|
|
objectLwm2m: [null, this.required ? [Validators.required] : []] |
|
|
objectLwm2m: [null, this.required ? [Validators.required] : []] |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private updateValidators = (): void => { |
|
|
private updateValidators = (): void => { |
|
|
this.lwm2mObjectListFormGroup.get('objectLwm2m').setValidators(this.required ? [Validators.required] : []); |
|
|
this.lwm2mListFormGroup.get('objectLwm2m').setValidators(this.required ? [Validators.required] : []); |
|
|
this.lwm2mObjectListFormGroup.get('objectLwm2m').updateValueAndValidity(); |
|
|
this.lwm2mListFormGroup.get('objectLwm2m').updateValueAndValidity(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
registerOnChange(fn: any): void { |
|
|
registerOnChange(fn: any): void { |
|
|
@ -100,7 +96,7 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
ngOnInit() { |
|
|
ngOnInit() { |
|
|
this.filteredObjectsList = this.lwm2mObjectListFormGroup.get('objectLwm2m').valueChanges |
|
|
this.filteredObjectsList = this.lwm2mListFormGroup.get('objectLwm2m').valueChanges |
|
|
.pipe( |
|
|
.pipe( |
|
|
tap((value) => { |
|
|
tap((value) => { |
|
|
if (value && typeof value !== 'string') { |
|
|
if (value && typeof value !== 'string') { |
|
|
@ -110,21 +106,17 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V |
|
|
} |
|
|
} |
|
|
}), |
|
|
}), |
|
|
filter((value) => typeof value === 'string'), |
|
|
filter((value) => typeof value === 'string'), |
|
|
map((value) => value ? (typeof value === 'string' ? value : value.name) : ''), |
|
|
|
|
|
mergeMap(name => this.fetchListObjects(name)), |
|
|
mergeMap(name => this.fetchListObjects(name)), |
|
|
share() |
|
|
share() |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
ngAfterViewInit = (): void => { |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setDisabledState(isDisabled: boolean): void { |
|
|
setDisabledState(isDisabled: boolean): void { |
|
|
this.disabled = isDisabled; |
|
|
this.disabled = isDisabled; |
|
|
if (isDisabled) { |
|
|
if (isDisabled) { |
|
|
this.lwm2mObjectListFormGroup.disable({emitEvent: false}); |
|
|
this.lwm2mListFormGroup.disable({emitEvent: false}); |
|
|
} else { |
|
|
} else { |
|
|
this.lwm2mObjectListFormGroup.enable({emitEvent: false}); |
|
|
this.lwm2mListFormGroup.enable({emitEvent: false}); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -134,35 +126,22 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V |
|
|
if (value.hasOwnProperty(objectIds) && value[objectIds] != null && value[objectIds].length > 0) { |
|
|
if (value.hasOwnProperty(objectIds) && value[objectIds] != null && value[objectIds].length > 0) { |
|
|
this.modelValue = [...value[objectIds]]; |
|
|
this.modelValue = [...value[objectIds]]; |
|
|
this.objectsList = value.objectsList; |
|
|
this.objectsList = value.objectsList; |
|
|
this.lwm2mObjectListFormGroup.get('objectsList').setValue(this.objectsList); |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.objectsList = []; |
|
|
this.objectsList = []; |
|
|
this.lwm2mObjectListFormGroup.get('objectsList').setValue(this.objectsList); |
|
|
|
|
|
this.modelValue = null; |
|
|
this.modelValue = null; |
|
|
} |
|
|
} |
|
|
|
|
|
this.lwm2mListFormGroup.get('objectsList').setValue(this.objectsList); |
|
|
this.dirty = true; |
|
|
this.dirty = true; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// reset() {
|
|
|
private add(object: ObjectLwM2M): void { |
|
|
// this.objectsList = [];
|
|
|
|
|
|
// this.lwm2mObjectListFormGroup.get('objectsList').setValue(this.objectsList);
|
|
|
|
|
|
// this.modelValue = null;
|
|
|
|
|
|
// if (this.objectInput) {
|
|
|
|
|
|
// this.objectInput.nativeElement.value = '';
|
|
|
|
|
|
// }
|
|
|
|
|
|
// this.lwm2mObjectListFormGroup.get('objectLwm2m').patchValue('', {emitEvent: false});
|
|
|
|
|
|
// this.propagateChange(this.modelValue);
|
|
|
|
|
|
// this.dirty = true;
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
private add = (object: ObjectLwM2M): void => { |
|
|
|
|
|
if (!this.modelValue || this.modelValue.indexOf(object.id) === -1) { |
|
|
if (!this.modelValue || this.modelValue.indexOf(object.id) === -1) { |
|
|
if (!this.modelValue) { |
|
|
if (!this.modelValue) { |
|
|
this.modelValue = []; |
|
|
this.modelValue = []; |
|
|
} |
|
|
} |
|
|
this.modelValue.push(object.id); |
|
|
this.modelValue.push(object.id); |
|
|
this.objectsList.push(object); |
|
|
this.objectsList.push(object); |
|
|
this.lwm2mObjectListFormGroup.get('objectsList').setValue(this.objectsList); |
|
|
this.lwm2mListFormGroup.get('objectsList').setValue(this.objectsList); |
|
|
this.addList.next(this.objectsList); |
|
|
this.addList.next(this.objectsList); |
|
|
} |
|
|
} |
|
|
this.propagateChange(this.modelValue); |
|
|
this.propagateChange(this.modelValue); |
|
|
@ -173,7 +152,7 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V |
|
|
let index = this.objectsList.indexOf(object); |
|
|
let index = this.objectsList.indexOf(object); |
|
|
if (index >= 0) { |
|
|
if (index >= 0) { |
|
|
this.objectsList.splice(index, 1); |
|
|
this.objectsList.splice(index, 1); |
|
|
this.lwm2mObjectListFormGroup.get('objectsList').setValue(this.objectsList); |
|
|
this.lwm2mListFormGroup.get('objectsList').setValue(this.objectsList); |
|
|
index = this.modelValue.indexOf(object.id); |
|
|
index = this.modelValue.indexOf(object.id); |
|
|
this.modelValue.splice(index, 1); |
|
|
this.modelValue.splice(index, 1); |
|
|
this.removeList.next(object); |
|
|
this.removeList.next(object); |
|
|
@ -189,9 +168,11 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V |
|
|
return object ? object.name : undefined; |
|
|
return object ? object.name : undefined; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// @TODO: add support page size
|
|
|
|
|
|
// @TODO: filter for id + name
|
|
|
private fetchListObjects = (searchText?: string): Observable<Array<ObjectLwM2M>> => { |
|
|
private fetchListObjects = (searchText?: string): Observable<Array<ObjectLwM2M>> => { |
|
|
this.searchText = searchText; |
|
|
this.searchText = searchText; |
|
|
const pageLink = new PageLink(10, 0, searchText, { |
|
|
const pageLink = new PageLink(50, 0, searchText, { |
|
|
property: 'name', |
|
|
property: 'name', |
|
|
direction: Direction.ASC |
|
|
direction: Direction.ASC |
|
|
}); |
|
|
}); |
|
|
@ -202,14 +183,14 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V |
|
|
|
|
|
|
|
|
onFocus = (): void => { |
|
|
onFocus = (): void => { |
|
|
if (this.dirty) { |
|
|
if (this.dirty) { |
|
|
this.lwm2mObjectListFormGroup.get('objectLwm2m').updateValueAndValidity({onlySelf: true, emitEvent: true}); |
|
|
this.lwm2mListFormGroup.get('objectLwm2m').updateValueAndValidity({onlySelf: true, emitEvent: true}); |
|
|
this.dirty = false; |
|
|
this.dirty = false; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private clear = (value: string = ''): void => { |
|
|
private clear = (value: string = ''): void => { |
|
|
this.objectInput.nativeElement.value = value; |
|
|
this.objectInput.nativeElement.value = value; |
|
|
this.lwm2mObjectListFormGroup.get('objectLwm2m').patchValue(value, {emitEvent: true}); |
|
|
this.lwm2mListFormGroup.get('objectLwm2m').patchValue(value, {emitEvent: true}); |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
this.objectInput.nativeElement.blur(); |
|
|
this.objectInput.nativeElement.blur(); |
|
|
this.objectInput.nativeElement.focus(); |
|
|
this.objectInput.nativeElement.focus(); |
|
|
|
Vladyslav_Prykhodko
6 years ago