Browse Source

UI: Add calculated fields page actions

pull/14609/head
Vladyslav_Prykhodko 9 months ago
parent
commit
1518aa260b
  1. 2
      ui-ngx/src/app/core/services/menu.models.ts
  2. 57
      ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts
  3. 3
      ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.html
  4. 4
      ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.ts
  5. 12
      ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
  6. 52
      ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.ts
  7. 6
      ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.html
  8. 5
      ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.ts
  9. 6
      ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.html
  10. 5
      ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.ts
  11. 4
      ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html
  12. 3
      ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.ts
  13. 4
      ui-ngx/src/app/modules/home/components/calculated-fields/components/propagation-configuration/propagation-configuration.component.html
  14. 3
      ui-ngx/src/app/modules/home/components/calculated-fields/components/propagation-configuration/propagation-configuration.component.ts
  15. 4
      ui-ngx/src/app/modules/home/components/calculated-fields/components/simple-configuration/simple-configuration.component.html
  16. 5
      ui-ngx/src/app/modules/home/components/calculated-fields/components/simple-configuration/simple-configuration.component.ts
  17. 10
      ui-ngx/src/form.scss

2
ui-ngx/src/app/core/services/menu.models.ts

@ -634,7 +634,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
name: 'entity.type-calculated-fields',
type: 'link',
path: '/calculatedFields',
icon: 'calculate',
icon: 'mdi:plus-minus-variant',
}
],
[

57
ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts

@ -57,7 +57,7 @@ import {
CalculatedFieldTestScriptDialogData
} from './components/public-api';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { getEntityDetailsPageURL, isObject } from '@core/utils';
import { deepClone, getEntityDetailsPageURL, isObject } from '@core/utils';
import { EntityDebugSettingsService } from '@home/components/entity/debug/entity-debug-settings.service';
import { DatePipe } from '@angular/common';
import { UtilsService } from "@core/services/utils.service";
@ -73,7 +73,7 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
readonly tenantId = getCurrentAuthUser(this.store).tenantId;
additionalDebugActionConfig = {
title: this.translate.instant('calculated-fields.see-debug-events'),
action: (calculatedField: CalculatedField) => this.openDebugEventsDialog.call(this, calculatedField),
action: (calculatedField: CalculatedField) => this.openDebugEventsDialog.call(this, null, calculatedField),
};
calculatedFieldFilterConfig: CalculatedFieldsQuery;
@ -96,6 +96,11 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
super();
if (this.pageMode) {
this.headerComponent = CalculatedFieldsHeaderComponent;
this.handleRowClick = ($event, entity) => {
this.editCalculatedField($event, entity);
return true;
};
}
this.tableTitle = this.pageMode ? '' : this.translate.instant('entity.type-calculated-fields');
this.detailsPanelEnabled = false;
@ -152,17 +157,23 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
}
this.cellActionDescriptors.push(
{
name: this.translate.instant('action.copy'),
icon: 'content_copy',
isEnabled: () => true,
onAction: ($event, entity) => this.copyCalculatedField($event, entity),
},
{
name: this.translate.instant('action.export'),
icon: 'file_download',
isEnabled: () => true,
onAction: (event$, entity) => this.exportCalculatedField(event$, entity),
onAction: ($event, entity) => this.exportCalculatedField($event, entity),
},
{
name: this.translate.instant('entity-view.events'),
icon: 'mdi:clipboard-text-clock',
isEnabled: () => true,
onAction: (_, entity) => this.openDebugEventsDialog(entity),
onAction: ($event, entity) => this.openDebugEventsDialog($event, entity),
},
{
name: '',
@ -176,7 +187,7 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
name: this.translate.instant('action.edit'),
icon: 'edit',
isEnabled: () => true,
onAction: (_, entity) => this.editCalculatedField(entity),
onAction: ($event, entity) => this.editCalculatedField($event, entity),
}
);
}
@ -198,14 +209,12 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
}
onOpenDebugConfig($event: Event, calculatedField: CalculatedField): void {
$event?.stopPropagation();
const { debugSettings = {}, id } = calculatedField;
const additionalActionConfig = {
...this.additionalDebugActionConfig,
action: () => this.openDebugEventsDialog(calculatedField)
action: () => this.openDebugEventsDialog($event, calculatedField)
};
if ($event) {
$event.stopPropagation();
}
const { viewContainerRef, renderer } = this.entityDebugSettingsService;
if (!viewContainerRef || !renderer) {
@ -223,7 +232,8 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
}, $event.target as Element);
}
private editCalculatedField(calculatedField: CalculatedField, isDirty = false): void {
private editCalculatedField($event: Event, calculatedField: CalculatedField, isDirty = false): void {
$event?.stopPropagation();
this.getCalculatedFieldDialog(calculatedField, 'action.apply', isDirty)
.subscribe((res) => {
if (res) {
@ -233,13 +243,14 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
}
private getCalculatedFieldDialog(value?: CalculatedField, buttonTitle = 'action.add', isDirty = false): Observable<CalculatedField> {
const entityId = this.entityId || value?.entityId;
return this.dialog.open<CalculatedFieldDialogComponent, CalculatedFieldDialogData, CalculatedField>(CalculatedFieldDialogComponent, {
disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
data: {
value,
buttonTitle,
entityId: this.entityId,
entityId,
tenantId: this.tenantId,
entityName: this.entityName,
ownerId: this.ownerId,
@ -253,7 +264,8 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
.pipe(filter(Boolean));
}
private openDebugEventsDialog(calculatedField: CalculatedField): void {
private openDebugEventsDialog($event: Event, calculatedField: CalculatedField): void {
$event?.stopPropagation();
const debugActionEnabledFn = (event: DebugEvent) => {
return (calculatedField.type === CalculatedFieldType.SCRIPT ||
(calculatedField.type === CalculatedFieldType.PROPAGATION &&
@ -285,12 +297,25 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
}
private exportCalculatedField($event: Event, calculatedField: CalculatedField): void {
if ($event) {
$event.stopPropagation();
}
$event?.stopPropagation();
this.importExportService.exportCalculatedField(calculatedField.id.id);
}
private copyCalculatedField($event: Event, calculatedField: CalculatedField): void {
$event?.stopPropagation();
const copyCalculatedAlarmRule = deepClone(calculatedField);
if (this.pageMode) {
copyCalculatedAlarmRule.entityId = null;
}
delete copyCalculatedAlarmRule.id;
this.getCalculatedFieldDialog(copyCalculatedAlarmRule, 'action.apply', false)
.subscribe((res) => {
if (res) {
this.updateData();
}
});
}
private importCalculatedField(): void {
this.importExportService.openCalculatedFieldImportDialog()
.pipe(
@ -376,7 +401,7 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
filter(Boolean),
tap(expression => {
if (openCalculatedFieldEdit) {
this.editCalculatedField({
this.editCalculatedField(null, {
entityId: this.entityId, ...calculatedField,
configuration: {...calculatedField.configuration, expression} as any
}, true)

3
ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.html

@ -111,6 +111,7 @@
</button>
<button type="button"
mat-icon-button
[disabled]="disable"
(click)="onDelete($event, argument)"
[matTooltip]="'action.delete' | translate"
matTooltipPosition="above">
@ -128,7 +129,7 @@
</div>
<div [class.!hidden]="(dataSource.isEmpty() | async) === false"
[class.required]="!disable"
class="tb-prompt flex flex-1 items-end justify-center text-base required">
class="tb-prompt flex flex-1 items-end justify-center text-base">
{{ 'calculated-fields.no-arguments' | translate }}
</div>
<div class="flex h-9 justify-between">

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.ts

@ -157,6 +157,10 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
return this.errorText ? { argumentsFormArray: false } : null;
}
setDisabledState(isDisabled: boolean): void {
this.disable = isDisabled;
}
onDelete($event: Event, argument: CalculatedFieldArgumentValue): void {
$event.stopPropagation();
const index = this.argumentsFormArray.controls.findIndex(control => isEqual(control.value, argument));

12
ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html

@ -21,6 +21,7 @@
<span class="flex-1"></span>
<div tb-help="calculatedField"></div>
<button mat-icon-button
[disabled]="isLoading"
(click)="cancel()"
type="button">
<mat-icon class="material-icons">close</mat-icon>
@ -49,7 +50,7 @@
</mat-form-field>
<tb-entity-debug-settings-button
formControlName="debugSettings"
[class.mb-5]="fieldFormGroup.get('name').errors && fieldFormGroup.get('name').touched"
style="margin-bottom: 22px"
[entityType]="EntityType.CALCULATED_FIELD"
[additionalActionConfig]="additionalDebugActionConfig"
/>
@ -74,6 +75,7 @@
[placeholder]="'action.set' | translate"
[required]="true"
[entityType]="fieldFormGroup.get('entityId.entityType').value"
(entityChanged)="changeEntity($event)"
/>
}
</div>
@ -93,6 +95,7 @@
@switch (fieldFormGroup.get('type').value) {
@case (CalculatedFieldType.GEOFENCING) {
<tb-geofencing-configuration formControlName="configuration"
[class.tb-form-panel-disabled]="disabledConfiguration"
[entityId]="entityId"
[entityName]="entityName"
[ownerId]="data.ownerId"
@ -101,6 +104,7 @@
}
@case (CalculatedFieldType.PROPAGATION) {
<tb-propagation-configuration formControlName="configuration"
[class.tb-form-panel-disabled]="disabledConfiguration"
[entityId]="entityId"
[entityName]="entityName"
[tenantId]="data.tenantId"
@ -110,6 +114,7 @@
}
@case (CalculatedFieldType.RELATED_ENTITIES_AGGREGATION) {
<tb-related-entities-aggregation-component formControlName="configuration"
[class.tb-form-panel-disabled]="disabledConfiguration"
[entityId]="entityId"
[entityName]="entityName"
[tenantId]="data.tenantId"
@ -118,6 +123,7 @@
}
@case (CalculatedFieldType.ENTITY_AGGREGATION) {
<tb-entity-aggregation-component formControlName="configuration"
[class.tb-form-panel-disabled]="disabledConfiguration"
[entityId]="entityId"
[entityName]="entityName"
[tenantId]="data.tenantId"
@ -125,6 +131,7 @@
}
@default {
<tb-simple-configuration formControlName="configuration"
[class.tb-form-panel-disabled]="disabledConfiguration"
[entityId]="entityId"
[entityName]="entityName"
[ownerId]="data.ownerId"
@ -140,12 +147,13 @@
<button mat-button color="primary"
type="button"
cdkFocusInitial
[disabled]="isLoading"
(click)="cancel()">
{{ 'action.cancel' | translate }}
</button>
<button mat-raised-button color="primary"
(click)="add()"
[disabled]="(isLoading$ | async) || fieldFormGroup.invalid || !fieldFormGroup.dirty">
[disabled]="isLoading || fieldFormGroup.invalid || !fieldFormGroup.dirty">
{{ data.buttonTitle | translate }}
</button>
</div>

52
ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.ts

@ -42,7 +42,7 @@ import { AdditionalDebugActionConfig } from '@home/components/entity/debug/entit
import { deepTrim, isDefined } from '@core/utils';
import { EntityTypeSelectComponent } from '@shared/components/entity/entity-type-select.component';
import { EntityAutocompleteComponent } from '@shared/components/entity/entity-autocomplete.component';
import { EntityService } from '@core/http/entity.service';
import { BaseData } from '@shared/models/base-data';
export interface CalculatedFieldDialogData {
value?: CalculatedField;
@ -82,6 +82,9 @@ export class CalculatedFieldDialogComponent extends DialogComponent<CalculatedFi
entityName = this.data.entityName;
disabledConfiguration = false;
isLoading = false;
readonly EntityType = EntityType;
readonly calculatedFieldsEntityTypeList = calculatedFieldsEntityTypeList;
readonly CalculatedFieldType = CalculatedFieldType;
@ -96,25 +99,25 @@ export class CalculatedFieldDialogComponent extends DialogComponent<CalculatedFi
@Inject(MAT_DIALOG_DATA) public data: CalculatedFieldDialogData,
protected dialogRef: MatDialogRef<CalculatedFieldDialogComponent, CalculatedField>,
private calculatedFieldsService: CalculatedFieldsService,
private entityService: EntityService,
private destroyRef: DestroyRef,
private fb: FormBuilder) {
super(store, router, dialogRef);
this.observeIsLoading();
this.observeType();
this.applyDialogData();
if (!this.entityName) {
if (this.data.isDirty) {
this.fieldFormGroup.markAsDirty();
}
if (!this.data.entityId) {
this.fieldFormGroup.get('entityId.id').valueChanges.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe((entityId) => {
if (entityId && (this.fieldFormGroup.get('entityId.entityType').value === EntityType.DEVICE_PROFILE ||
this.fieldFormGroup.get('entityId.entityType').value === EntityType.ASSET_PROFILE)) {
this.entityService.getEntity(this.fieldFormGroup.get('entityId.entityType').value as EntityType, entityId, {ignoreLoading: true, ignoreErrors: true}).subscribe(
value => {
this.entityName = value.name;
}
)
this.disabledConfiguration = !entityId;
if (this.disabledConfiguration) {
this.fieldFormGroup.get('configuration').disable({emitEvent: false});
} else {
this.fieldFormGroup.get('configuration').enable({emitEvent: false});
}
});
}
@ -130,9 +133,13 @@ export class CalculatedFieldDialogComponent extends DialogComponent<CalculatedFi
add(): void {
if (this.fieldFormGroup.valid) {
this.isLoading = true;
this.calculatedFieldsService.saveCalculatedField({ entityId: this.data.entityId, ...(this.data.value ?? {}), ...this.fromGroupValue})
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(calculatedField => this.dialogRef.close(calculatedField));
.subscribe({
next: calculatedField => this.dialogRef.close(calculatedField),
error: () => this.isLoading = false
});
} else {
this.fieldFormGroup.get('name').markAsTouched();
this.entityTypeSelect?.markAsTouched();
@ -155,6 +162,10 @@ export class CalculatedFieldDialogComponent extends DialogComponent<CalculatedFi
return this.data.getTestScriptDialogFn(this.fromGroupValue, null, false, expression);
}
changeEntity(entity: BaseData<EntityId>): void {
this.entityName = entity.name;
}
get entityId(): EntityId {
return this.data.entityId || this.fieldFormGroup.get('entityId').value;
}
@ -168,19 +179,10 @@ export class CalculatedFieldDialogComponent extends DialogComponent<CalculatedFi
}
this.fieldFormGroup.patchValue({ configuration, type, debugSettings, entityId, ...value }, {emitEvent: false});
setTimeout(() => this.fieldFormGroup.get('type').updateValueAndValidity({onlySelf: true}));
}
private observeIsLoading(): void {
this.isLoading$.pipe(takeUntilDestroyed()).subscribe(loading => {
if (loading) {
this.fieldFormGroup.disable({emitEvent: false});
} else {
this.fieldFormGroup.enable({emitEvent: false});
if (this.data.isDirty) {
this.fieldFormGroup.markAsDirty();
}
}
});
if (!this.data.entityId) {
this.fieldFormGroup.get('configuration').disable({emitEvent: false});
this.disabledConfiguration = true;
}
}
private observeType(): void {

6
ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.html

@ -101,6 +101,7 @@
#button
(click)="manageZone($event, button, geofenceZone)"
[matTooltip]="'action.edit' | translate"
[disabled]="disable"
matTooltipPosition="above">
<mat-icon [matBadgeHidden]="geofenceZone.refEntityId?.id !== NULL_UUID"
matBadgeColor="warn"
@ -112,6 +113,7 @@
<button type="button"
mat-icon-button
(click)="onDelete($event, geofenceZone)"
[disabled]="disable"
[matTooltip]="'action.delete' | translate"
matTooltipPosition="above">
<mat-icon>delete</mat-icon>
@ -128,7 +130,7 @@
}
</div>
<div [class.!hidden]="(dataSource.isEmpty() | async) === false"
class="tb-prompt flex flex-1 items-end justify-center text-base required">
class="tb-prompt flex flex-1 items-end justify-center text-base" [class.required]="!disable">
{{ 'calculated-fields.no-zone-configured' | translate }}
</div>
<div class="flex h-9 justify-between">
@ -137,7 +139,7 @@
color="primary"
#button
(click)="manageZone($event, button)"
[disabled]="maxArgumentsPerCF > 0 && zoneGroupsFormArray.length >= maxArgumentsPerCF">
[disabled]="maxArgumentsPerCF > 0 && zoneGroupsFormArray.length >= maxArgumentsPerCF || disable">
{{ 'calculated-fields.add-zone-group' | translate }}
</button>
@if (maxArgumentsPerCF && zoneGroupsFormArray.length >= maxArgumentsPerCF) {

5
ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.ts

@ -90,6 +90,7 @@ export class CalculatedFieldGeofencingZoneGroupsTableComponent implements Contro
entityNameMap = new Map<string, string>();
sortOrder = { direction: 'asc', property: '' };
dataSource = new CalculatedFieldZoneDatasource();
disable = false;
readonly GeofencingReportStrategyTranslations = GeofencingReportStrategyTranslations;
readonly entityTypeTranslations = entityTypeTranslations;
@ -135,6 +136,10 @@ export class CalculatedFieldGeofencingZoneGroupsTableComponent implements Contro
return this.errorText ? { zonesFormArray: false } : null;
}
setDisabledState(isDisabled: boolean): void {
this.disable = isDisabled;
}
onDelete($event: Event, zone: CalculatedFieldGeofencingValue): void {
$event.stopPropagation();
const index = this.zoneGroupsFormArray.controls.findIndex(control => isEqual(control.value, zone));

6
ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.html

@ -97,6 +97,7 @@
mat-icon-button
#button
(click)="manageMetrics($event, button, metric)"
[disabled]="disable"
[matTooltip]="'action.edit' | translate"
matTooltipPosition="above">
<mat-icon>edit</mat-icon>
@ -104,6 +105,7 @@
<button type="button"
mat-icon-button
(click)="onDelete($event, metric)"
[disabled]="disable"
[matTooltip]="'action.delete' | translate"
matTooltipPosition="above">
<mat-icon>delete</mat-icon>
@ -116,7 +118,7 @@
</table>
</div>
<div [class.!hidden]="(dataSource.isEmpty() | async) === false"
class="tb-prompt flex flex-1 items-end justify-center text-base required">
class="tb-prompt flex flex-1 items-end justify-center text-base" [class.required]="!disable">
{{ 'calculated-fields.metrics.no-metrics-configured' | translate }}
</div>
<div class="flex h-9 justify-between">
@ -125,7 +127,7 @@
color="primary"
#button
(click)="manageMetrics($event, button)"
[disabled]="maxArgumentsPerCF > 0 && metricsFormArray.length >= maxArgumentsPerCF">
[disabled]="maxArgumentsPerCF > 0 && metricsFormArray.length >= maxArgumentsPerCF || disable">
{{ 'calculated-fields.metrics.add-metric' | translate }}
</button>
@if (maxArgumentsPerCF && metricsFormArray.length >= maxArgumentsPerCF) {

5
ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.ts

@ -89,6 +89,7 @@ export class CalculatedFieldMetricsTableComponent implements OnInit, ControlValu
metricsFormArray = this.fb.array<CalculatedFieldAggMetricValue>([]);
sortOrder = { direction: 'asc' as SortDirection, property: '' };
dataSource = new CalculatedFieldMetricsDatasource();
disable = false;
displayColumns = ['name', 'function', 'filter', 'valueSource', 'actions'];
@ -141,6 +142,10 @@ export class CalculatedFieldMetricsTableComponent implements OnInit, ControlValu
return this.errorText ? { metricsFormArray: false } : null;
}
setDisabledState(isDisabled: boolean): void {
this.disable = isDisabled;
}
onDelete($event: Event, metric: CalculatedFieldAggMetricValue): void {
$event.stopPropagation();
const index = this.metricsFormArray.controls.findIndex(control => isEqual(control.value, metric));

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html

@ -78,7 +78,7 @@
<mat-expansion-panel-header class="flex flex-row flex-wrap">
<mat-panel-title>
<div class="flex flex-1 flex-row items-center justify-between xs:flex-col xs:items-start xs:gap-3">
<div class="tb-form-panel-title" style="color: var(--mat-expansion-header-text-color)" tb-hint-tooltip-icon="{{ 'calculated-fields.output-strategy.hint.strategy' | translate }}">
<div class="tb-form-panel-title" [style.color]="disabled ? 'var(--mdc-outlined-text-field-disabled-input-text-color)' : 'var(--mat-expansion-header-text-color)'" tb-hint-tooltip-icon="{{ 'calculated-fields.output-strategy.hint.strategy' | translate }}">
{{ 'calculated-fields.output-strategy.strategy' | translate }}
</div>
<tb-toggle-select formControlName="type" selectMediaBreakpoint="xs" disablePagination appearance="fill" (click)="$event.stopPropagation()">
@ -90,7 +90,7 @@
</mat-panel-title>
</mat-expansion-panel-header>
@if (outputForm.get('strategy.type').value === OutputStrategyType.IMMEDIATE) {
<div class="tb-form-panel stroked">
<div class="tb-form-panel stroked" [class.disabled]="disabled">
<div class="tb-form-panel-title" translate>calculated-fields.output-strategy.processing-parameters</div>
@if (outputForm.get('type').value === OutputType.Timeseries) {
<mat-slide-toggle class="mat-slide" formControlName="saveTimeSeries">

3
ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.ts

@ -78,6 +78,8 @@ export class CalculatedFieldOutputComponent implements ControlValueAccessor, Val
@Input({required: true})
entityId: EntityId;
disabled = false;
readonly outputTypes = Object.values(OutputType) as OutputType[];
readonly OutputType = OutputType;
readonly AttributeScope = AttributeScope;
@ -171,6 +173,7 @@ export class CalculatedFieldOutputComponent implements ControlValueAccessor, Val
registerOnTouched(_: any): void { }
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
if (isDisabled) {
this.outputForm.disable({emitEvent: false});
} else {

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/propagation-configuration/propagation-configuration.component.html

@ -80,7 +80,7 @@
matTooltip="{{ 'calculated-fields.test-expression-function' | translate }}"
matTooltipPosition="above"
class="tb-mat-32"
[disabled]="propagateConfiguration.get('arguments').invalid"
[disabled]="propagateConfiguration.get('arguments').invalid || disabled"
(click)="onTestScript()">
<mat-icon class="material-icons" color="primary">bug_report</mat-icon>
</button>
@ -89,7 +89,7 @@
<button mat-button mat-raised-button color="primary"
type="button"
(click)="onTestScript()"
[disabled]="propagateConfiguration.get('arguments').invalid">
[disabled]="propagateConfiguration.get('arguments').invalid || disabled">
{{ 'calculated-fields.test-expression-function' | translate }}
</button>
</div>

3
ui-ngx/src/app/modules/home/components/calculated-fields/components/propagation-configuration/propagation-configuration.component.ts

@ -88,6 +88,8 @@ export class PropagationConfigurationComponent implements ControlValueAccessor,
output: this.fb.control<CalculatedFieldOutput>(defaultCalculatedFieldOutput),
});
disabled = false;
readonly ScriptLanguage = ScriptLanguage;
readonly CalculatedFieldType = CalculatedFieldType;
readonly OutputType = OutputType;
@ -142,6 +144,7 @@ export class PropagationConfigurationComponent implements ControlValueAccessor,
registerOnTouched(_: any): void { }
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
if (isDisabled) {
this.propagateConfiguration.disable({emitEvent: false});
} else {

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/simple-configuration/simple-configuration.component.html

@ -72,7 +72,7 @@
matTooltip="{{ 'calculated-fields.test-script-function' | translate }}"
matTooltipPosition="above"
class="tb-mat-32"
[disabled]="simpleConfiguration.get('arguments').invalid"
[disabled]="simpleConfiguration.get('arguments').invalid || disabled"
(click)="onTestScript()">
<mat-icon class="material-icons" color="primary">bug_report</mat-icon>
</button>
@ -81,7 +81,7 @@
<button mat-button mat-raised-button color="primary"
type="button"
(click)="onTestScript()"
[disabled]="simpleConfiguration.get('arguments').invalid">
[disabled]="simpleConfiguration.get('arguments').invalid || disabled">
{{ 'calculated-fields.test-script-function' | translate }}
</button>
</div>

5
ui-ngx/src/app/modules/home/components/calculated-fields/components/simple-configuration/simple-configuration.component.ts

@ -104,6 +104,8 @@ export class SimpleConfigurationComponent implements ControlValueAccessor, Valid
map(argumentsObj => getCalculatedFieldArgumentsHighlights(argumentsObj))
);
disabled = false;
private propagateChange: (config: SimpeConfiguration) => void = () => { };
constructor(private fb: FormBuilder) {
@ -127,7 +129,7 @@ export class SimpleConfigurationComponent implements ControlValueAccessor, Valid
for (const propName of Object.keys(changes)) {
const change = changes[propName];
if (change.currentValue !== change.previousValue) {
if (propName === 'isScript') {
if (propName === 'isScript' && !this.disabled) {
this.updatedFormWithScript();
if (!change.firstChange) {
this.simpleConfiguration.updateValueAndValidity();
@ -163,6 +165,7 @@ export class SimpleConfigurationComponent implements ControlValueAccessor, Valid
}
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
if (isDisabled) {
this.simpleConfiguration.disable({emitEvent: false});
} else {

10
ui-ngx/src/form.scss

@ -107,6 +107,9 @@
}
}
}
&.disabled {
color: var(--mdc-outlined-text-field-disabled-input-text-color);
}
.mat-expansion-panel {
&.tb-settings {
box-shadow: none;
@ -160,6 +163,13 @@
}
}
.tb-form-panel-disabled {
color: var(--mdc-outlined-text-field-disabled-input-text-color);
.tb-form-panel {
color: var(--mdc-outlined-text-field-disabled-input-text-color);
}
}
.tb-form-panel-title {
font-weight: 500;
font-size: 16px;

Loading…
Cancel
Save