Shvaika Dmytro
11 months ago
committed by
GitHub
GitHub
24 changed files with 1500 additions and 127 deletions
@ -0,0 +1,146 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2025 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. |
||||
|
|
||||
|
--> |
||||
|
<div class="flex flex-col gap-3"> |
||||
|
<div class="tb-form-panel stroked no-padding no-gap arguments-table flex flex-col" [class.arguments-table-with-error]="errorText"> |
||||
|
<table mat-table [dataSource]="dataSource" class="overflow-hidden bg-transparent" matSort |
||||
|
[matSortActive]="sortOrder.property" [matSortDirection]="sortOrder.direction" matSortDisableClear> |
||||
|
<ng-container [matColumnDef]="'name'"> |
||||
|
<mat-header-cell mat-sort-header *matHeaderCellDef class="!w-1/3 xs:!w-1/2"> |
||||
|
<div tbTruncateWithTooltip>{{ 'common.name' | translate }}</div> |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let geofenceZone" class="argument-name-cell w-1/3 xs:w-1/2"> |
||||
|
<div class="flex items-center"> |
||||
|
<div tbTruncateWithTooltip class="flex-1">{{ geofenceZone.name }}</div> |
||||
|
<tb-copy-button class="copy-argument-name" |
||||
|
[copyText]="geofenceZone.name" |
||||
|
tooltipText="{{ 'calculated-fields.copy-zone-group-name' | translate }}" |
||||
|
tooltipPosition="above" |
||||
|
icon="content_copy"/> |
||||
|
</div> |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<ng-container [matColumnDef]="'entityType'"> |
||||
|
<mat-header-cell mat-sort-header *matHeaderCellDef class="entity-type-header w-1/5 xs:hidden"> |
||||
|
{{ 'entity.entity-type' | translate }} |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let geofenceZone" class="w-1/5 xs:hidden"> |
||||
|
<div tbTruncateWithTooltip> |
||||
|
@if (geofenceZone.refEntityId?.entityType === ArgumentEntityType.Tenant) { |
||||
|
{{ 'calculated-fields.argument-current-tenant' | translate }} |
||||
|
} @else if (geofenceZone.refDynamicSourceConfiguration?.type === ArgumentEntityType.RelationQuery) { |
||||
|
{{ 'calculated-fields.argument-relation-query' | translate }} |
||||
|
} @else if (geofenceZone.refEntityId?.id) { |
||||
|
{{ entityTypeTranslations.get(geofenceZone.refEntityId.entityType).type | translate }} |
||||
|
} @else { |
||||
|
{{ 'calculated-fields.argument-current' | translate }} |
||||
|
} |
||||
|
</div> |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<ng-container [matColumnDef]="'target'"> |
||||
|
<mat-header-cell *matHeaderCellDef class="w-1/4 xs:hidden"> |
||||
|
{{ 'calculated-fields.target-zone' | translate }} |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let geofenceZone" class="w-1/4 xs:hidden"> |
||||
|
<div tbTruncateWithTooltip> |
||||
|
@if (geofenceZone.refEntityId?.id && geofenceZone.refEntityId?.entityType !== ArgumentEntityType.Tenant) { |
||||
|
<a [attr.aria-label]="'calculated-fields.open-details-page' | translate" |
||||
|
[routerLink]="getEntityDetailsPageURL(geofenceZone.refEntityId.id, geofenceZone.refEntityId.entityType)"> |
||||
|
{{ entityNameMap.get(geofenceZone.refEntityId.id) ?? '' }} |
||||
|
</a> |
||||
|
} |
||||
|
</div> |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container [matColumnDef]="'key'"> |
||||
|
<mat-header-cell mat-sort-header *matHeaderCellDef class="w-1/4 xs:w-1/3"> |
||||
|
{{ 'calculated-fields.perimeter-key' | translate }} |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let geofenceZone" class="w-1/4 xs:w-1/3"> |
||||
|
<mat-chip class="tb-chip-row-ellipsis"> |
||||
|
<div tbTruncateWithTooltip class="key-text">{{ geofenceZone.perimeterKeyName }}</div> |
||||
|
</mat-chip> |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container [matColumnDef]="'reportStrategy'"> |
||||
|
<mat-header-cell mat-sort-header *matHeaderCellDef class="w-1/4 lt-md:hidden"> |
||||
|
{{ 'calculated-fields.report-strategy' | translate }} |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let geofenceZone" class="w-1/4 lt-md:hidden"> |
||||
|
<div tbTruncateWithTooltip>{{ GeofencingReportStrategyTranslations.get(geofenceZone.reportStrategy) | translate }}</div> |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container matColumnDef="actions" stickyEnd> |
||||
|
<mat-header-cell *matHeaderCellDef class="w-20 min-w-20"/> |
||||
|
<mat-cell *matCellDef="let geofenceZone;"> |
||||
|
<div class="tb-form-table-row-cell-buttons flex w-20 min-w-20"> |
||||
|
<button type="button" |
||||
|
mat-icon-button |
||||
|
#button |
||||
|
(click)="manageZone($event, button, geofenceZone)" |
||||
|
[matTooltip]="'action.edit' | translate" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon [matBadgeHidden]="geofenceZone.refEntityId?.id !== NULL_UUID" |
||||
|
matBadgeColor="warn" |
||||
|
matBadgeSize="small" |
||||
|
matBadge="*"> |
||||
|
edit |
||||
|
</mat-icon> |
||||
|
</button> |
||||
|
<button type="button" |
||||
|
mat-icon-button |
||||
|
(click)="onDelete($event, geofenceZone)" |
||||
|
[matTooltip]="'action.delete' | translate" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>delete</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<mat-header-row class="mat-row-select" |
||||
|
*matHeaderRowDef="['name', 'entityType', 'target', 'key', 'reportStrategy', 'actions']"></mat-header-row> |
||||
|
<mat-row *matRowDef="let argument; columns: ['name', 'entityType', 'target', 'key', 'reportStrategy', 'actions']"></mat-row> |
||||
|
</table> |
||||
|
<div [class.!hidden]="(dataSource.isEmpty() | async) === false" |
||||
|
class="tb-prompt flex flex-1 items-end justify-center"> |
||||
|
{{ 'calculated-fields.no-zone-configured' | translate }} |
||||
|
</div> |
||||
|
@if (errorText) { |
||||
|
<tb-error noMargin [error]="errorText | translate" class="flex h-9 items-center pl-3"/> |
||||
|
} |
||||
|
</div> |
||||
|
<div class="flex h-9 justify-between"> |
||||
|
<button type="button" |
||||
|
mat-stroked-button |
||||
|
color="primary" |
||||
|
#button |
||||
|
(click)="manageZone($event, button)" |
||||
|
[disabled]="maxArgumentsPerCF > 0 && zoneGroupsFormArray.length >= maxArgumentsPerCF"> |
||||
|
{{ 'calculated-fields.add-zone-group' | translate }} |
||||
|
</button> |
||||
|
@if (maxArgumentsPerCF && zoneGroupsFormArray.length >= maxArgumentsPerCF) { |
||||
|
<div class="tb-form-hint tb-primary-fill max-args-warning flex items-center gap-2"> |
||||
|
<mat-icon>warning</mat-icon> |
||||
|
<span>{{ 'calculated-fields.hint.max-geofencing-zone' | translate }}</span> |
||||
|
</div> |
||||
|
} |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,76 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2025 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. |
||||
|
*/ |
||||
|
:host { |
||||
|
.arguments-table { |
||||
|
min-height: 108px; |
||||
|
|
||||
|
&-with-error { |
||||
|
min-height: 150px; |
||||
|
} |
||||
|
|
||||
|
.mat-mdc-table { |
||||
|
table-layout: fixed; |
||||
|
} |
||||
|
|
||||
|
.key-text { |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.copy-argument-name { |
||||
|
visibility: hidden; |
||||
|
transition: visibility 0.1s; |
||||
|
} |
||||
|
|
||||
|
.argument-name-cell:hover { |
||||
|
.copy-argument-name { |
||||
|
visibility: visible; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.max-args-warning { |
||||
|
.mat-icon { |
||||
|
color: #FAA405; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-form-table-row-cell-buttons { |
||||
|
--mat-badge-legacy-small-size-container-size: 8px; |
||||
|
--mat-badge-small-size-container-overlap-offset: -5px; |
||||
|
--mat-badge-small-size-text-size: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.arguments-table:not(.arguments-table-with-error) { |
||||
|
.mdc-data-table__row:last-child .mat-mdc-cell { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.arguments-table { |
||||
|
.mat-mdc-header-row.mat-row-select .mat-mdc-header-cell.entity-type-header { |
||||
|
padding: 0 28px 0 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.copy-argument-name { |
||||
|
.mat-icon { |
||||
|
font-size: 16px; |
||||
|
padding: 4px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,307 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2025 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 { |
||||
|
AfterViewInit, |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
DestroyRef, |
||||
|
forwardRef, |
||||
|
Input, |
||||
|
Renderer2, |
||||
|
ViewChild, |
||||
|
ViewContainerRef, |
||||
|
} from '@angular/core'; |
||||
|
import { |
||||
|
ControlValueAccessor, |
||||
|
FormBuilder, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
ValidationErrors, |
||||
|
Validator, |
||||
|
} from '@angular/forms'; |
||||
|
import { |
||||
|
ArgumentEntityType, |
||||
|
CalculatedFieldGeofencing, |
||||
|
CalculatedFieldGeofencingValue, |
||||
|
CalculatedFieldType, |
||||
|
GeofencingReportStrategyTranslations, |
||||
|
} from '@shared/models/calculated-field.models'; |
||||
|
import { MatButton } from '@angular/material/button'; |
||||
|
import { TbPopoverService } from '@shared/components/popover.service'; |
||||
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
||||
|
import { EntityId } from '@shared/models/id/entity-id'; |
||||
|
import { EntityType, entityTypeTranslations } from '@shared/models/entity-type.models'; |
||||
|
import { getEntityDetailsPageURL, isEqual } from '@core/utils'; |
||||
|
import { TbPopoverComponent } from '@shared/components/popover.component'; |
||||
|
import { TbTableDatasource } from '@shared/components/table/table-datasource.abstract'; |
||||
|
import { EntityService } from '@core/http/entity.service'; |
||||
|
import { MatSort } from '@angular/material/sort'; |
||||
|
import { getCurrentAuthState } from '@core/auth/auth.selectors'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { forkJoin, Observable } from 'rxjs'; |
||||
|
import { NULL_UUID } from '@shared/models/id/has-uuid'; |
||||
|
import { BaseData } from '@shared/models/base-data'; |
||||
|
import { |
||||
|
CalculatedFieldGeofencingZoneGroupsPanelComponent |
||||
|
} from '@home/components/calculated-fields/components/panel/calculated-field-geofencing-zone-groups-panel.component'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-calculated-field-geofencing-zone-groups-table', |
||||
|
templateUrl: './calculated-field-geofencing-zone-groups-table.component.html', |
||||
|
styleUrls: [`calculated-field-geofencing-zone-groups-table.component.scss`], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => CalculatedFieldGeofencingZoneGroupsTableComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => CalculatedFieldGeofencingZoneGroupsTableComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
], |
||||
|
}) |
||||
|
export class CalculatedFieldGeofencingZoneGroupsTableComponent implements ControlValueAccessor, Validator, AfterViewInit { |
||||
|
|
||||
|
@Input() entityId: EntityId; |
||||
|
@Input() tenantId: string; |
||||
|
@Input() entityName: string; |
||||
|
|
||||
|
@ViewChild(MatSort, { static: true }) sort: MatSort; |
||||
|
|
||||
|
errorText = ''; |
||||
|
zoneGroupsFormArray = this.fb.array<CalculatedFieldGeofencingValue>([]); |
||||
|
entityNameMap = new Map<string, string>(); |
||||
|
sortOrder = { direction: 'asc', property: '' }; |
||||
|
dataSource = new CalculatedFieldZoneDatasource(); |
||||
|
|
||||
|
readonly GeofencingReportStrategyTranslations = GeofencingReportStrategyTranslations; |
||||
|
readonly entityTypeTranslations = entityTypeTranslations; |
||||
|
readonly ArgumentEntityType = ArgumentEntityType; |
||||
|
readonly maxArgumentsPerCF = getCurrentAuthState(this.store).maxArgumentsPerCF - 2; |
||||
|
readonly NULL_UUID = NULL_UUID; |
||||
|
|
||||
|
private popoverComponent: TbPopoverComponent<CalculatedFieldGeofencingZoneGroupsPanelComponent>; |
||||
|
private propagateChange: (zonesObj: Record<string, CalculatedFieldGeofencing>) => void = () => {}; |
||||
|
|
||||
|
constructor( |
||||
|
private fb: FormBuilder, |
||||
|
private popoverService: TbPopoverService, |
||||
|
private viewContainerRef: ViewContainerRef, |
||||
|
private cd: ChangeDetectorRef, |
||||
|
private renderer: Renderer2, |
||||
|
private entityService: EntityService, |
||||
|
private destroyRef: DestroyRef, |
||||
|
private store: Store<AppState> |
||||
|
) { |
||||
|
this.zoneGroupsFormArray.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => { |
||||
|
this.updateDataSource(value); |
||||
|
this.propagateChange(this.getZonesObject(value)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
this.sort.sortChange.asObservable().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => { |
||||
|
this.sortOrder.property = this.sort.active; |
||||
|
this.sortOrder.direction = this.sort.direction; |
||||
|
this.updateDataSource(this.zoneGroupsFormArray.value); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: (zonesObj: Record<string, CalculatedFieldGeofencing>) => void): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(_): void {} |
||||
|
|
||||
|
validate(): ValidationErrors | null { |
||||
|
this.updateErrorText(); |
||||
|
return this.errorText ? { zonesFormArray: false } : null; |
||||
|
} |
||||
|
|
||||
|
onDelete($event: Event, zone: CalculatedFieldGeofencingValue): void { |
||||
|
$event.stopPropagation(); |
||||
|
const index = this.zoneGroupsFormArray.controls.findIndex(control => isEqual(control.value, zone)); |
||||
|
this.zoneGroupsFormArray.removeAt(index); |
||||
|
this.zoneGroupsFormArray.markAsDirty(); |
||||
|
} |
||||
|
|
||||
|
manageZone($event: Event, matButton: MatButton, zone = {} as CalculatedFieldGeofencingValue): void { |
||||
|
$event?.stopPropagation(); |
||||
|
if (this.popoverComponent && !this.popoverComponent.tbHidden) { |
||||
|
this.popoverComponent.hide(); |
||||
|
} |
||||
|
const trigger = matButton._elementRef.nativeElement; |
||||
|
if (this.popoverService.hasPopover(trigger)) { |
||||
|
this.popoverService.hidePopover(trigger); |
||||
|
} else { |
||||
|
const index = this.zoneGroupsFormArray.controls.findIndex(control => isEqual(control.value, zone)); |
||||
|
const isExists = index !== -1; |
||||
|
const ctx = { |
||||
|
index, |
||||
|
zone, |
||||
|
entityId: this.entityId, |
||||
|
calculatedFieldType: CalculatedFieldType.GEOFENCING, |
||||
|
buttonTitle: isExists ? 'action.apply' : 'action.add', |
||||
|
tenantId: this.tenantId, |
||||
|
entityName: this.entityName, |
||||
|
usedNames: this.zoneGroupsFormArray.value.map(({ name }) => name).filter(name => name !== zone.name), |
||||
|
}; |
||||
|
this.popoverComponent = this.popoverService.displayPopover({ |
||||
|
trigger, |
||||
|
renderer: this.renderer, |
||||
|
componentType: CalculatedFieldGeofencingZoneGroupsPanelComponent, |
||||
|
hostView: this.viewContainerRef, |
||||
|
preferredPlacement: isExists ? ['left', 'leftTop', 'leftBottom'] : ['topRight', 'right', 'rightTop'], |
||||
|
context: ctx, |
||||
|
isModal: true |
||||
|
}); |
||||
|
this.popoverComponent.tbComponentRef.instance.geofencingDataApplied.subscribe(({ entityName, ...value }) => { |
||||
|
this.popoverComponent.hide(); |
||||
|
if (entityName) { |
||||
|
this.entityNameMap.set(value.refEntityId.id, entityName); |
||||
|
} |
||||
|
if (isExists) { |
||||
|
this.zoneGroupsFormArray.at(index).setValue(value); |
||||
|
} else { |
||||
|
this.zoneGroupsFormArray.push(this.fb.control(value)); |
||||
|
} |
||||
|
this.cd.markForCheck(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateDataSource(value: CalculatedFieldGeofencingValue[]): void { |
||||
|
const sortedValue = this.sortData(value); |
||||
|
this.dataSource.loadData(sortedValue); |
||||
|
} |
||||
|
|
||||
|
private updateErrorText(): void { |
||||
|
if (this.zoneGroupsFormArray.controls.some(control => control.value.refEntityId?.id === NULL_UUID)) { |
||||
|
this.errorText = 'calculated-fields.hint.geofencing-entity-not-found'; |
||||
|
} else if (!this.zoneGroupsFormArray.controls.length) { |
||||
|
this.errorText = 'calculated-fields.hint.geofencing-empty'; |
||||
|
} else { |
||||
|
this.errorText = ''; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private getZonesObject(value: CalculatedFieldGeofencingValue[]): Record<string, CalculatedFieldGeofencing> { |
||||
|
return value.reduce((acc, zoneValue) => { |
||||
|
const { name, ...zone } = zoneValue as CalculatedFieldGeofencingValue; |
||||
|
acc[name] = zone; |
||||
|
return acc; |
||||
|
}, {} as Record<string, CalculatedFieldGeofencing>); |
||||
|
} |
||||
|
|
||||
|
writeValue(zonesObj: Record<string, CalculatedFieldGeofencing>): void { |
||||
|
this.zoneGroupsFormArray.clear(); |
||||
|
this.populateZonesFormArray(zonesObj); |
||||
|
this.updateEntityNameMap(this.zoneGroupsFormArray.value); |
||||
|
} |
||||
|
|
||||
|
getEntityDetailsPageURL(id: string, type: EntityType): string { |
||||
|
return getEntityDetailsPageURL(id, type); |
||||
|
} |
||||
|
|
||||
|
private populateZonesFormArray(zonesObj: Record<string, CalculatedFieldGeofencing>): void { |
||||
|
Object.keys(zonesObj).forEach(key => { |
||||
|
const value: CalculatedFieldGeofencingValue = { |
||||
|
...zonesObj[key], |
||||
|
name: key |
||||
|
}; |
||||
|
this.zoneGroupsFormArray.push(this.fb.control(value), { emitEvent: false }); |
||||
|
}); |
||||
|
this.zoneGroupsFormArray.updateValueAndValidity(); |
||||
|
} |
||||
|
|
||||
|
private updateEntityNameMap(values: CalculatedFieldGeofencingValue[]): void { |
||||
|
const entitiesByType = values.reduce((acc, { refEntityId = {}}) => { |
||||
|
if (refEntityId.id && refEntityId.entityType !== ArgumentEntityType.Tenant) { |
||||
|
const { id, entityType } = refEntityId as EntityId; |
||||
|
acc[entityType] = acc[entityType] ?? []; |
||||
|
acc[entityType].push(id); |
||||
|
} |
||||
|
return acc; |
||||
|
}, {} as Record<EntityType, string[]>); |
||||
|
const tasks = Object.entries(entitiesByType).map(([entityType, ids]) => |
||||
|
this.entityService.getEntities(entityType as EntityType, ids) |
||||
|
); |
||||
|
if (!tasks.length) { |
||||
|
return; |
||||
|
} |
||||
|
this.fetchEntityNames(tasks, values); |
||||
|
} |
||||
|
|
||||
|
private fetchEntityNames(tasks: Observable<BaseData<EntityId>[]>[], values: CalculatedFieldGeofencingValue[]): void { |
||||
|
forkJoin(tasks as Observable<BaseData<EntityId>[]>[]) |
||||
|
.pipe(takeUntilDestroyed(this.destroyRef)) |
||||
|
.subscribe((result: Array<BaseData<EntityId>>[]) => { |
||||
|
result.forEach((entities: BaseData<EntityId>[]) => entities.forEach((entity: BaseData<EntityId>) => this.entityNameMap.set(entity.id.id, entity.name))); |
||||
|
let updateTable = false; |
||||
|
values.forEach(({ refEntityId }) => { |
||||
|
if (refEntityId?.id && !this.entityNameMap.has(refEntityId.id) && refEntityId.entityType !== ArgumentEntityType.Tenant) { |
||||
|
updateTable = true; |
||||
|
const control = this.zoneGroupsFormArray.controls.find(control => control.value.refEntityId?.id === refEntityId.id); |
||||
|
const value = control.value; |
||||
|
value.refEntityId.id = NULL_UUID; |
||||
|
control.setValue(value, { emitEvent: false }); |
||||
|
} |
||||
|
}); |
||||
|
if (updateTable) { |
||||
|
this.zoneGroupsFormArray.updateValueAndValidity(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private getSortValue(zone: CalculatedFieldGeofencingValue, column: string): string { |
||||
|
switch (column) { |
||||
|
case 'entityType': |
||||
|
if (zone.refEntityId?.entityType === ArgumentEntityType.Tenant) { |
||||
|
return 'calculated-fields.argument-current-tenant'; |
||||
|
} else if (zone.refDynamicSourceConfiguration.type === ArgumentEntityType.RelationQuery) { |
||||
|
return 'calculated-fields.argument-relation-query'; |
||||
|
} else if (zone.refEntityId?.id) { |
||||
|
return entityTypeTranslations.get((zone.refEntityId)?.entityType as unknown as EntityType).type; |
||||
|
} else { |
||||
|
return 'calculated-fields.argument-current'; |
||||
|
} |
||||
|
case 'key': |
||||
|
return zone.perimeterKeyName; |
||||
|
case 'reportStrategy': |
||||
|
return GeofencingReportStrategyTranslations.get(zone.reportStrategy); |
||||
|
default: |
||||
|
return zone.name; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private sortData(data: CalculatedFieldGeofencingValue[]): CalculatedFieldGeofencingValue[] { |
||||
|
return data.sort((a, b) => { |
||||
|
const valA = this.getSortValue(a, this.sortOrder.property) ?? ''; |
||||
|
const valB = this.getSortValue(b, this.sortOrder.property) ?? ''; |
||||
|
return (this.sortOrder.direction === 'asc' ? 1 : -1) * valA.localeCompare(valB); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
class CalculatedFieldZoneDatasource extends TbTableDatasource<CalculatedFieldGeofencingValue> { |
||||
|
constructor() { |
||||
|
super(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,224 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2025 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. |
||||
|
|
||||
|
--> |
||||
|
<div class="w-full max-w-xl" [formGroup]="geofencingFormGroup"> |
||||
|
<div class="tb-form-panel no-border no-padding mb-2"> |
||||
|
<div class="tb-form-panel-title">{{ 'calculated-fields.geofencing-zone-groups-settings' | translate }}</div> |
||||
|
<div class="tb-form-panel no-border no-padding"> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width tb-required">{{ 'calculated-fields.name' | translate }}</div> |
||||
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput autocomplete="new-name" name="value" formControlName="name" maxlength="255" placeholder="{{ 'action.set' | translate }}"/> |
||||
|
@if (geofencingFormGroup.get('name').touched && geofencingFormGroup.get('name').hasError('required')) { |
||||
|
<mat-icon matSuffix |
||||
|
matTooltipPosition="above" |
||||
|
matTooltipClass="tb-error-tooltip" |
||||
|
[matTooltip]="'calculated-fields.hint.name-required' | translate" |
||||
|
class="tb-error"> |
||||
|
warning |
||||
|
</mat-icon> |
||||
|
} @else if (geofencingFormGroup.get('name').touched && geofencingFormGroup.get('name').hasError('duplicateName')) { |
||||
|
<mat-icon matSuffix |
||||
|
matTooltipPosition="above" |
||||
|
matTooltipClass="tb-error-tooltip" |
||||
|
[matTooltip]="'calculated-fields.hint.name-duplicate' | translate" |
||||
|
class="tb-error"> |
||||
|
warning |
||||
|
</mat-icon> |
||||
|
} @else if (geofencingFormGroup.get('name').touched && geofencingFormGroup.get('name').hasError('pattern')) { |
||||
|
<mat-icon matSuffix |
||||
|
matTooltipPosition="above" |
||||
|
matTooltipClass="tb-error-tooltip" |
||||
|
[matTooltip]="'calculated-fields.hint.name-pattern' | translate" |
||||
|
class="tb-error"> |
||||
|
warning |
||||
|
</mat-icon> |
||||
|
} @else if (geofencingFormGroup.get('name').touched && geofencingFormGroup.get('name').hasError('maxlength')) { |
||||
|
<mat-icon matSuffix |
||||
|
matTooltipPosition="above" |
||||
|
matTooltipClass="tb-error-tooltip" |
||||
|
[matTooltip]="'calculated-fields.hint.name-max-length' | translate" |
||||
|
class="tb-error"> |
||||
|
warning |
||||
|
</mat-icon> |
||||
|
} @else if (geofencingFormGroup.get('name').touched && geofencingFormGroup.get('name').hasError('forbiddenName')) { |
||||
|
<mat-icon matSuffix |
||||
|
matTooltipPosition="above" |
||||
|
matTooltipClass="tb-error-tooltip" |
||||
|
[matTooltip]="'calculated-fields.hint.name-forbidden' | translate" |
||||
|
class="tb-error"> |
||||
|
warning |
||||
|
</mat-icon> |
||||
|
} |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<ng-container [formGroup]="refEntityIdFormGroup"> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width">{{ 'entity.entity-type' | translate }}</div> |
||||
|
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="entityType"> |
||||
|
@for (type of argumentEntityTypes; track type) { |
||||
|
<mat-option [value]="type">{{ ArgumentEntityTypeTranslations.get(type) | translate }}</mat-option> |
||||
|
} |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
@if (ArgumentEntityTypeParamsMap.has(entityType)) { |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width tb-required">{{ ArgumentEntityTypeParamsMap.get(entityType).title | translate }}</div> |
||||
|
<tb-entity-autocomplete class="flex flex-1" |
||||
|
#entityAutocomplete |
||||
|
formControlName="id" |
||||
|
inlineField |
||||
|
[placeholder]="'action.set' | translate" |
||||
|
[required]="true" |
||||
|
[entityType]="ArgumentEntityTypeParamsMap.get(entityType).entityType" |
||||
|
(entityChanged)="entityNameSubject.next($event?.name)"/> |
||||
|
</div> |
||||
|
} |
||||
|
</ng-container> |
||||
|
<ng-container [formGroup]="refDynamicSourceFormGroup"> |
||||
|
<div class="tb-form-panel stroked" *ngIf="entityType === ArgumentEntityType.RelationQuery"> |
||||
|
<mat-expansion-panel class="tb-settings" expanded> |
||||
|
<mat-expansion-panel-header>{{ 'calculated-fields.relation-query' | translate }}*</mat-expansion-panel-header> |
||||
|
|
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width">{{ 'calculated-fields.direction' | translate }}</div> |
||||
|
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="direction"> |
||||
|
@for (direction of GeofencingDirectionList; track direction) { |
||||
|
<mat-option [value]="direction">{{ GeofencingDirectionTranslations.get(direction) | translate }}</mat-option> |
||||
|
} |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width tb-required">{{ 'calculated-fields.relation-type' | translate }}</div> |
||||
|
<tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)" |
||||
|
additionalClass="tb-suffix-show-on-hover" |
||||
|
class="flex-1" |
||||
|
appearance="outline" |
||||
|
panelWidth="" |
||||
|
required |
||||
|
[errorText]="'calculated-fields.hint.relation-type-required' | translate" |
||||
|
formControlName="relationType"> |
||||
|
</tb-string-autocomplete> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width tb-required">{{ 'calculated-fields.relation-level' | translate }}</div> |
||||
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" step="1" min="0" formControlName="maxLevel" placeholder="{{ 'action.set' | translate }}"/> |
||||
|
@if (refDynamicSourceFormGroup.get('maxLevel').touched && refDynamicSourceFormGroup.get('maxLevel').hasError('required')) { |
||||
|
<mat-icon matSuffix |
||||
|
matTooltipPosition="above" |
||||
|
matTooltipClass="tb-error-tooltip" |
||||
|
[matTooltip]="'calculated-fields.hint.relation-level-required' | translate" |
||||
|
class="tb-error"> |
||||
|
warning |
||||
|
</mat-icon> |
||||
|
} @else if (refDynamicSourceFormGroup.get('maxLevel').touched && refDynamicSourceFormGroup.get('maxLevel').hasError('min')) { |
||||
|
<mat-icon matSuffix |
||||
|
matTooltipPosition="above" |
||||
|
matTooltipClass="tb-error-tooltip" |
||||
|
[matTooltip]="'calculated-fields.hint.relation-level-min' | translate" |
||||
|
class="tb-error"> |
||||
|
warning |
||||
|
</mat-icon> |
||||
|
} @else if (refDynamicSourceFormGroup.get('maxLevel').touched && refDynamicSourceFormGroup.get('maxLevel').hasError('max')) { |
||||
|
<mat-icon matSuffix |
||||
|
matTooltipPosition="above" |
||||
|
matTooltipClass="tb-error-tooltip" |
||||
|
[matTooltip]="'calculated-fields.hint.relation-level-max' | translate: {max: maxRelationLevelPerCfArgument}" |
||||
|
class="tb-error"> |
||||
|
warning |
||||
|
</mat-icon> |
||||
|
} |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row" [class.!hidden]="!(this.refDynamicSourceFormGroup.get('maxLevel').value > 1)"> |
||||
|
<mat-slide-toggle class="mat-slide margin" formControlName="fetchLastLevelOnly"> |
||||
|
{{ 'calculated-fields.fetch-last-available-level' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
</mat-expansion-panel> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
<ng-container> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{'calculated-fields.hint.perimeter-attribute-key' | translate}}"> |
||||
|
{{ 'calculated-fields.perimeter-attribute-key' | translate }} |
||||
|
</div> |
||||
|
<tb-entity-key-autocomplete class="flex-1" formControlName="perimeterKeyName" [dataKeyType]="DataKeyType.attribute" [entityFilter]="entityFilter"/> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'calculated-fields.hint.report-strategy' | translate}}">{{ 'calculated-fields.report-strategy' | translate }}</div> |
||||
|
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="reportStrategy"> |
||||
|
@for (strategy of GeofencingReportStrategyList; track strategy) { |
||||
|
<mat-option [value]="strategy">{{ GeofencingReportStrategyTranslations.get(strategy) | translate }}</mat-option> |
||||
|
} |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
<div class="tb-form-panel stroked"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="createRelationsWithMatchedZones" (click)="$event.stopPropagation()"> |
||||
|
<div tb-hint-tooltip-icon="{{ 'calculated-fields.hint.create-relation-with-matched-zones' | translate }}"> |
||||
|
{{ 'calculated-fields.create-relation-with-matched-zones' | translate }} |
||||
|
</div> |
||||
|
</mat-slide-toggle> |
||||
|
<div class="tb-form-row" [class.!hidden]="!geofencingFormGroup.get('createRelationsWithMatchedZones').value"> |
||||
|
<div class="fixed-title-width">{{ 'calculated-fields.direction' | translate }}</div> |
||||
|
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="direction"> |
||||
|
@for (direction of GeofencingDirectionList; track direction) { |
||||
|
<mat-option [value]="direction">{{ GeofencingDirectionTranslations.get(direction) | translate }}</mat-option> |
||||
|
} |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row" [class.!hidden]="!geofencingFormGroup.get('createRelationsWithMatchedZones').value"> |
||||
|
<div class="fixed-title-width tb-required">{{ 'calculated-fields.relation-type' | translate }}</div> |
||||
|
<tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)" |
||||
|
additionalClass="tb-suffix-show-on-hover" |
||||
|
class="flex-1" |
||||
|
appearance="outline" |
||||
|
panelWidth="" |
||||
|
required |
||||
|
[errorText]="'calculated-fields.hint.relation-type-required' | translate" |
||||
|
formControlName="relationType"> |
||||
|
</tb-string-autocomplete> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="flex justify-end gap-2"> |
||||
|
<button mat-button |
||||
|
color="primary" |
||||
|
type="button" |
||||
|
(click)="cancel()"> |
||||
|
{{ 'action.cancel' | translate }} |
||||
|
</button> |
||||
|
<button mat-raised-button |
||||
|
color="primary" |
||||
|
type="button" |
||||
|
(click)="saveZone()" |
||||
|
[disabled]="geofencingFormGroup.invalid || !geofencingFormGroup.dirty"> |
||||
|
{{ buttonTitle | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,51 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2025 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'; |
||||
|
|
||||
|
$panel-width: 520px; |
||||
|
|
||||
|
:host { |
||||
|
display: flex; |
||||
|
width: $panel-width; |
||||
|
max-width: 100%; |
||||
|
max-height: 80vh; |
||||
|
|
||||
|
.fixed-title-width { |
||||
|
@media #{$mat-xs} { |
||||
|
min-width: 120px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.limit-field-row { |
||||
|
@media screen and (max-width: $panel-width) { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.fixed-title-width { |
||||
|
align-self: flex-start; |
||||
|
padding-top: 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.time-interval-field { |
||||
|
.advanced-input { |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,291 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2025 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 { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, output, ViewChild } from '@angular/core'; |
||||
|
import { TbPopoverComponent } from '@shared/components/popover.component'; |
||||
|
import { FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms'; |
||||
|
import { charsWithNumRegex, oneSpaceInsideRegex } from '@shared/models/regex.constants'; |
||||
|
import { |
||||
|
ArgumentEntityType, |
||||
|
ArgumentEntityTypeParamsMap, |
||||
|
ArgumentEntityTypeTranslations, |
||||
|
CalculatedFieldGeofencing, |
||||
|
CalculatedFieldGeofencingValue, |
||||
|
CalculatedFieldType, |
||||
|
GeofencingDirectionTranslations, |
||||
|
GeofencingReportStrategy, |
||||
|
GeofencingReportStrategyTranslations, |
||||
|
getCalculatedFieldCurrentEntityFilter |
||||
|
} from '@shared/models/calculated-field.models'; |
||||
|
import { debounceTime, delay, distinctUntilChanged, filter, map } from 'rxjs/operators'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { EntityId } from '@shared/models/id/entity-id'; |
||||
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
||||
|
import { EntityFilter } from '@shared/models/query/query.models'; |
||||
|
import { AliasFilterType } from '@shared/models/alias.models'; |
||||
|
import { BehaviorSubject, merge, Observable, of } from 'rxjs'; |
||||
|
import { getCurrentAuthState } from '@core/auth/auth.selectors'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { EntityAutocompleteComponent } from '@shared/components/entity/entity-autocomplete.component'; |
||||
|
import { NULL_UUID } from '@shared/models/id/has-uuid'; |
||||
|
import { EntitySearchDirection } from '@shared/models/relation.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-calculated-field-geofencing-zone-groups-panel', |
||||
|
templateUrl: './calculated-field-geofencing-zone-groups-panel.component.html', |
||||
|
styleUrls: ['./calculated-field-geofencing-zone-groups-panel.component.scss'] |
||||
|
}) |
||||
|
export class CalculatedFieldGeofencingZoneGroupsPanelComponent implements OnInit, AfterViewInit { |
||||
|
|
||||
|
@Input() buttonTitle: string; |
||||
|
@Input() zone: CalculatedFieldGeofencing; |
||||
|
@Input() entityId: EntityId; |
||||
|
@Input() tenantId: string; |
||||
|
@Input() entityName: string; |
||||
|
@Input() calculatedFieldType: CalculatedFieldType; |
||||
|
@Input() usedNames: string[]; |
||||
|
|
||||
|
@ViewChild('entityAutocomplete') entityAutocomplete: EntityAutocompleteComponent; |
||||
|
|
||||
|
geofencingDataApplied = output<CalculatedFieldGeofencingValue>(); |
||||
|
|
||||
|
readonly maxRelationLevelPerCfArgument = getCurrentAuthState(this.store).maxRelationLevelPerCfArgument; |
||||
|
|
||||
|
geofencingFormGroup = this.fb.group({ |
||||
|
name: ['', [Validators.required, this.uniqNameRequired(), this.forbiddenNameValidator(), Validators.pattern(charsWithNumRegex), Validators.maxLength(255)]], |
||||
|
refEntityId: this.fb.group({ |
||||
|
entityType: [ArgumentEntityType.Current], |
||||
|
id: [''] |
||||
|
}), |
||||
|
refDynamicSourceConfiguration: this.fb.group({ |
||||
|
direction: [EntitySearchDirection.TO], |
||||
|
relationType: ['', [Validators.required]], |
||||
|
maxLevel: [1, [Validators.required, Validators.min(1), Validators.max(this.maxRelationLevelPerCfArgument)]], |
||||
|
fetchLastLevelOnly: [false], |
||||
|
}), |
||||
|
perimeterKeyName: ['', [Validators.pattern(oneSpaceInsideRegex)]], |
||||
|
reportStrategy: [GeofencingReportStrategy.REPORT_TRANSITION_EVENTS_AND_PRESENCE_STATUS], |
||||
|
createRelationsWithMatchedZones: [false], |
||||
|
direction: [EntitySearchDirection.TO], |
||||
|
relationType: ['', [Validators.required]] |
||||
|
}); |
||||
|
|
||||
|
entityFilter: EntityFilter; |
||||
|
entityNameSubject = new BehaviorSubject<string>(null); |
||||
|
|
||||
|
readonly ArgumentEntityType = ArgumentEntityType; |
||||
|
readonly argumentEntityTypes = Object.values(ArgumentEntityType) as ArgumentEntityType[]; |
||||
|
readonly ArgumentEntityTypeTranslations = ArgumentEntityTypeTranslations; |
||||
|
readonly DataKeyType = DataKeyType; |
||||
|
readonly ArgumentEntityTypeParamsMap = ArgumentEntityTypeParamsMap; |
||||
|
readonly GeofencingReportStrategyList = Object.values(GeofencingReportStrategy) as Array<GeofencingReportStrategy>; |
||||
|
readonly GeofencingReportStrategyTranslations = GeofencingReportStrategyTranslations; |
||||
|
readonly GeofencingDirectionList = Object.values(EntitySearchDirection) as Array<EntitySearchDirection>; |
||||
|
readonly GeofencingDirectionTranslations = GeofencingDirectionTranslations; |
||||
|
|
||||
|
private currentEntityFilter: EntityFilter; |
||||
|
|
||||
|
constructor( |
||||
|
private fb: FormBuilder, |
||||
|
private cd: ChangeDetectorRef, |
||||
|
private popover: TbPopoverComponent<CalculatedFieldGeofencingZoneGroupsPanelComponent>, |
||||
|
private store: Store<AppState> |
||||
|
) { |
||||
|
|
||||
|
this.observeMaxLevelChanges(); |
||||
|
this.observeEntityFilterChanges(); |
||||
|
this.observeEntityTypeChanges(); |
||||
|
this.observeUpdatePosition(); |
||||
|
this.observeCreateRelationZonesChanges(); |
||||
|
} |
||||
|
|
||||
|
get entityType(): ArgumentEntityType { |
||||
|
return this.geofencingFormGroup.get('refEntityId').get('entityType').value; |
||||
|
} |
||||
|
|
||||
|
get refEntityIdFormGroup(): FormGroup { |
||||
|
return this.geofencingFormGroup.get('refEntityId') as FormGroup; |
||||
|
} |
||||
|
|
||||
|
get refDynamicSourceFormGroup(): FormGroup { |
||||
|
return this.geofencingFormGroup.get('refDynamicSourceConfiguration') as FormGroup; |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.geofencingFormGroup.patchValue(this.zone, {emitEvent: false}); |
||||
|
if (this.zone.refDynamicSourceConfiguration?.type) { |
||||
|
this.refEntityIdFormGroup.get('entityType').setValue(this.zone.refDynamicSourceConfiguration.type, {emitEvent: false}); |
||||
|
} |
||||
|
this.validateFetchLastLevelOnly(this.zone?.refDynamicSourceConfiguration?.maxLevel); |
||||
|
this.validateDirectionAndRelationType(this.zone?.createRelationsWithMatchedZones); |
||||
|
this.validateRefDynamicSourceConfiguration(this.zone?.refEntityId?.entityType || this.zone?.refDynamicSourceConfiguration?.type); |
||||
|
|
||||
|
this.currentEntityFilter = getCalculatedFieldCurrentEntityFilter(this.entityName, this.entityId); |
||||
|
this.updateEntityFilter(this.zone.refEntityId?.entityType); |
||||
|
} |
||||
|
|
||||
|
fetchOptions(searchText: string): Observable<Array<string>> { |
||||
|
const search = searchText ? searchText?.toLowerCase() : ''; |
||||
|
return of(['Contains', 'Manages']).pipe(map(name => name?.filter(option => option.toLowerCase().includes(search)))); |
||||
|
} |
||||
|
|
||||
|
private observeMaxLevelChanges(): void { |
||||
|
this.refDynamicSourceFormGroup.get('maxLevel').valueChanges |
||||
|
.pipe(takeUntilDestroyed()) |
||||
|
.subscribe(value => this.validateFetchLastLevelOnly(value)); |
||||
|
} |
||||
|
|
||||
|
private observeCreateRelationZonesChanges(): void { |
||||
|
this.geofencingFormGroup.get('createRelationsWithMatchedZones').valueChanges |
||||
|
.pipe(takeUntilDestroyed()) |
||||
|
.subscribe(value => this.validateDirectionAndRelationType(value)); |
||||
|
} |
||||
|
|
||||
|
private validateFetchLastLevelOnly(maxLevel = 1): void { |
||||
|
if (maxLevel > 1) { |
||||
|
this.refDynamicSourceFormGroup.get('fetchLastLevelOnly').enable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.refDynamicSourceFormGroup.get('fetchLastLevelOnly').disable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private validateDirectionAndRelationType(createRelation = false): void { |
||||
|
if (createRelation) { |
||||
|
this.geofencingFormGroup.get('direction').enable({emitEvent: false}); |
||||
|
this.geofencingFormGroup.get('relationType').enable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.geofencingFormGroup.get('direction').disable({emitEvent: false}); |
||||
|
this.geofencingFormGroup.get('relationType').disable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private validateRefDynamicSourceConfiguration(type: ArgumentEntityType = ArgumentEntityType.Current): void { |
||||
|
if (type === ArgumentEntityType.RelationQuery) { |
||||
|
this.refDynamicSourceFormGroup.enable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.refDynamicSourceFormGroup.disable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
if (this.zone.refEntityId?.id === NULL_UUID) { |
||||
|
this.entityAutocomplete.selectEntityFormGroup.get('entity').markAsTouched(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
saveZone(): void { |
||||
|
const value = this.geofencingFormGroup.value as CalculatedFieldGeofencingValue; |
||||
|
const argumentType = value.refEntityId.entityType; |
||||
|
switch (argumentType) { |
||||
|
case ArgumentEntityType.Current: |
||||
|
delete value.refEntityId; |
||||
|
break; |
||||
|
case ArgumentEntityType.RelationQuery: |
||||
|
delete value.refEntityId; |
||||
|
value.refDynamicSourceConfiguration.type = ArgumentEntityType.RelationQuery; |
||||
|
break; |
||||
|
case ArgumentEntityType.Tenant: |
||||
|
value.refEntityId.id = this.tenantId; |
||||
|
break |
||||
|
default: |
||||
|
value.entityName = this.entityNameSubject.value; |
||||
|
} |
||||
|
this.geofencingDataApplied.emit(value); |
||||
|
} |
||||
|
|
||||
|
cancel(): void { |
||||
|
this.popover.hide(); |
||||
|
} |
||||
|
|
||||
|
private updateEntityFilter(entityType: ArgumentEntityType = ArgumentEntityType.Current): void { |
||||
|
let entityFilter: EntityFilter; |
||||
|
switch (entityType) { |
||||
|
case ArgumentEntityType.Current: |
||||
|
case ArgumentEntityType.RelationQuery: |
||||
|
entityFilter = this.currentEntityFilter; |
||||
|
break; |
||||
|
case ArgumentEntityType.Tenant: |
||||
|
entityFilter = { |
||||
|
type: AliasFilterType.singleEntity, |
||||
|
singleEntity: { |
||||
|
id: this.tenantId, |
||||
|
entityType: EntityType.TENANT |
||||
|
}, |
||||
|
}; |
||||
|
break; |
||||
|
default: |
||||
|
entityFilter = { |
||||
|
type: AliasFilterType.singleEntity, |
||||
|
singleEntity: this.geofencingFormGroup.get('refEntityId').value as unknown as EntityId, |
||||
|
}; |
||||
|
} |
||||
|
this.entityFilter = entityFilter; |
||||
|
this.cd.markForCheck(); |
||||
|
} |
||||
|
|
||||
|
private observeEntityFilterChanges(): void { |
||||
|
merge( |
||||
|
this.refEntityIdFormGroup.get('entityType').valueChanges, |
||||
|
this.refEntityIdFormGroup.get('id').valueChanges.pipe(filter(Boolean)), |
||||
|
) |
||||
|
.pipe(debounceTime(50), takeUntilDestroyed()) |
||||
|
.subscribe(() => this.updateEntityFilter(this.entityType)); |
||||
|
} |
||||
|
|
||||
|
private observeEntityTypeChanges(): void { |
||||
|
this.refEntityIdFormGroup.get('entityType').valueChanges |
||||
|
.pipe(distinctUntilChanged(), takeUntilDestroyed()) |
||||
|
.subscribe(type => { |
||||
|
this.geofencingFormGroup.get('refEntityId').get('id').setValue(''); |
||||
|
const isEntityWithId = type !== ArgumentEntityType.Tenant && type !== ArgumentEntityType.Current && type !== ArgumentEntityType.RelationQuery; |
||||
|
this.geofencingFormGroup.get('refEntityId') |
||||
|
.get('id')[isEntityWithId ? 'enable' : 'disable'](); |
||||
|
if (!isEntityWithId) { |
||||
|
this.entityNameSubject.next(null); |
||||
|
} |
||||
|
this.validateRefDynamicSourceConfiguration(type); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private uniqNameRequired(): ValidatorFn { |
||||
|
return (control: FormControl) => { |
||||
|
const newName = control.value.trim().toLowerCase(); |
||||
|
const isDuplicate = this.usedNames?.some(name => name.toLowerCase() === newName); |
||||
|
|
||||
|
return isDuplicate ? { duplicateName: true } : null; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
private forbiddenNameValidator(): ValidatorFn { |
||||
|
return (control: FormControl) => { |
||||
|
const trimmedValue = control.value.trim().toLowerCase(); |
||||
|
const forbiddenNames = ['ctx', 'e', 'pi']; |
||||
|
return forbiddenNames.includes(trimmedValue) ? { forbiddenName: true } : null; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
private observeUpdatePosition(): void { |
||||
|
merge( |
||||
|
this.refEntityIdFormGroup.get('entityType').valueChanges, |
||||
|
this.geofencingFormGroup.get('createRelationsWithMatchedZones').valueChanges |
||||
|
) |
||||
|
.pipe(delay(50), takeUntilDestroyed()) |
||||
|
.subscribe(() => this.popover.updatePosition()); |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue