Ekaterina Chantsova
2 years ago
12 changed files with 263 additions and 36 deletions
@ -0,0 +1,27 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<section [formGroup]="timeintervalFormGroup"> |
||||
|
<mat-form-field class="flex flex-1" [subscriptSizing]="subscriptSizing" [appearance]="appearance"> |
||||
|
<mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label> |
||||
|
<mat-select formControlName="intervals" multiple> |
||||
|
<mat-option *ngFor="let interval of intervals" [value]="interval.value"> |
||||
|
{{ interval.name | translate:interval.translateParams }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
@ -0,0 +1,25 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2024 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
@import '../../../../scss/constants'; |
||||
|
|
||||
|
:host { |
||||
|
|
||||
|
@media #{$mat-xs} { |
||||
|
min-width: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,147 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component, forwardRef, Input, OnInit } from '@angular/core'; |
||||
|
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
import { TimeService } from '@core/services/time.service'; |
||||
|
import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field'; |
||||
|
import { coerceBoolean, coerceNumber } from '@shared/decorators/coercion'; |
||||
|
import { Interval, TimeInterval } from '@shared/models/time/time.models'; |
||||
|
import { isDefined } from '@core/utils'; |
||||
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-time-intervals-list', |
||||
|
templateUrl: './time-intervals-list.component.html', |
||||
|
styleUrls: ['./time-intervals-list.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => TimeIntervalsListComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class TimeIntervalsListComponent implements OnInit, ControlValueAccessor { |
||||
|
|
||||
|
@Input() |
||||
|
@coerceNumber() |
||||
|
min: number; |
||||
|
|
||||
|
@Input() |
||||
|
@coerceNumber() |
||||
|
max: number; |
||||
|
|
||||
|
@Input() predefinedName: string; |
||||
|
|
||||
|
@Input() |
||||
|
@coerceBoolean() |
||||
|
setAllIfEmpty = false; |
||||
|
|
||||
|
@Input() |
||||
|
@coerceBoolean() |
||||
|
returnEmptyIfAllSet = false; |
||||
|
|
||||
|
@Input() |
||||
|
@coerceBoolean() |
||||
|
useCalendarIntervals = false; |
||||
|
|
||||
|
@Input() disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
subscriptSizing: SubscriptSizing = 'fixed'; |
||||
|
|
||||
|
@Input() |
||||
|
appearance: MatFormFieldAppearance = 'fill'; |
||||
|
|
||||
|
intervals: Array<TimeInterval>; |
||||
|
|
||||
|
timeintervalFormGroup: FormGroup; |
||||
|
|
||||
|
private modelValue: Array<Interval>; |
||||
|
private rendered = false; |
||||
|
private propagateChangeValue: any; |
||||
|
|
||||
|
private propagateChange = (value: any) => { |
||||
|
this.propagateChangeValue = value; |
||||
|
}; |
||||
|
|
||||
|
constructor(private timeService: TimeService, |
||||
|
private fb: FormBuilder) { |
||||
|
this.timeintervalFormGroup = this.fb.group({ |
||||
|
intervals: [ [] ] |
||||
|
}); |
||||
|
this.timeintervalFormGroup.get('intervals').valueChanges.pipe( |
||||
|
takeUntilDestroyed() |
||||
|
).subscribe(() => this.updateView()); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.updateIntervalsList(); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
if (isDefined(this.propagateChangeValue)) { |
||||
|
this.propagateChange(this.propagateChangeValue); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.timeintervalFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.timeintervalFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(intervals: Array<Interval>): void { |
||||
|
this.modelValue = intervals; |
||||
|
this.rendered = true; |
||||
|
this.setIntervals(this.modelValue); |
||||
|
} |
||||
|
|
||||
|
private updateIntervalsList() { |
||||
|
this.intervals = this.timeService.getIntervals(this.min, this.max, this.useCalendarIntervals); |
||||
|
} |
||||
|
|
||||
|
private setIntervals(intervals: Array<Interval>) { |
||||
|
this.timeintervalFormGroup.get('intervals').patchValue( |
||||
|
(this.setAllIfEmpty && !intervals?.length) ? this.intervals : intervals, |
||||
|
{emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
private updateView() { |
||||
|
if (!this.rendered) { |
||||
|
return; |
||||
|
} |
||||
|
let value: Array<Interval>; |
||||
|
const intervals: Array<Interval> = this.timeintervalFormGroup.get('intervals').value; |
||||
|
|
||||
|
if (!this.returnEmptyIfAllSet || intervals.length < this.intervals.length) { |
||||
|
value = intervals; |
||||
|
} else { |
||||
|
value = []; |
||||
|
} |
||||
|
this.modelValue = value; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue