UI: Added in device profile alarm rule condition to dynamic mode checkbox inherit from owner

2021-02-11 13:38:18 +02:00 · 2021-02-11 13:38:18 +02:00 · ada0af2a41
commit ada0af2a41
parent d5b28222a3
8 changed files with 43 additions and 11 deletions
--- a/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
@ -16,7 +16,7 @@

 -->
 <div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="booleanFilterPredicateFormGroup">
-  <mat-form-field floatLabel="always" hideRequiredMarker fxFlex="40" class="mat-block">
+  <mat-form-field floatLabel="always" hideRequiredMarker fxFlex="30" class="mat-block">
    <mat-label></mat-label>
    <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
      <mat-option *ngFor="let operation of booleanOperations" [value]="operation">
@ -25,7 +25,7 @@
    </mat-select>
  </mat-form-field>
  <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
-                             fxFlex="60"
+                             fxFlex="70"
                             [valueType]="valueTypeEnum.BOOLEAN"
                             formControlName="value">
  </tb-filter-predicate-value>
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
@ -26,12 +26,12 @@
      <span fxFlex="8"></span>
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex="92">
        <div fxFlex fxLayout="row" fxLayoutGap="8px">
-          <div fxFlex="40" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div fxFlex="30" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
            <label fxFlex translate class="tb-title no-padding">filter.operation.operation</label>
            <label *ngIf="valueType === valueTypeEnum.STRING"
                   translate class="tb-title no-padding" style="min-width: 70px;">filter.ignore-case</label>
          </div>
-          <label fxFlex="60" translate class="tb-title no-padding">filter.value</label>
+          <label fxFlex="70" translate class="tb-title no-padding">filter.value</label>
        </div>
        <label *ngIf="displayUserParameters"
               translate class="tb-title no-padding" style="width: 60px;">filter.user-parameters</label>
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
@ -61,6 +61,15 @@
        </mat-form-field>
        <div class="tb-hint" translate>filter.dynamic-source-type</div>
      </div>
+      <div *ngIf="!allow"
+           [ngClass]="{invisible: !inheritMode}"
+           fxLayout="column"
+           fxLayoutAlign="center center">
+        <mat-checkbox formControlName="inherit"
+                      style="min-width: 35px;"
+        ></mat-checkbox>
+        <div class="tb-hint">Inherit from owner</div>
+      </div>
      <div fxFlex fxLayout="column">
        <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
          <mat-label></mat-label>
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.ts
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.ts
@ -44,6 +44,9 @@ import {
 })
 export class FilterPredicateValueComponent implements ControlValueAccessor, OnInit {

+  private readonly inheritFromSources: DynamicValueSourceType[] = [DynamicValueSourceType.CURRENT_CUSTOMER,
+    DynamicValueSourceType.CURRENT_DEVICE];
+
  @Input() disabled: boolean;

  @Input()
@ -72,6 +75,8 @@ export class FilterPredicateValueComponent implements ControlValueAccessor, OnIn

  dynamicMode = false;

+  inheritMode = false;
+
  allow = true;

  private propagateChange = null;
@ -105,7 +110,8 @@ export class FilterPredicateValueComponent implements ControlValueAccessor, OnIn
      dynamicValue: this.fb.group(
        {
          sourceType: [null],
-          sourceAttribute: [null]
+          sourceAttribute: [null],
+          inherit: [false]
        }
      )
    });
@ -114,6 +120,7 @@ export class FilterPredicateValueComponent implements ControlValueAccessor, OnIn
        if (!sourceType) {
          this.filterPredicateValueFormGroup.get('dynamicValue').get('sourceAttribute').patchValue(null, {emitEvent: false});
        }
+        this.updateInheritValue(sourceType);
      }
    );
    this.filterPredicateValueFormGroup.valueChanges.subscribe(() => {
@ -139,10 +146,13 @@ export class FilterPredicateValueComponent implements ControlValueAccessor, OnIn

  writeValue(predicateValue: FilterPredicateValue<string | number | boolean>): void {
    this.filterPredicateValueFormGroup.get('defaultValue').patchValue(predicateValue.defaultValue, {emitEvent: false});
-    this.filterPredicateValueFormGroup.get('dynamicValue').get('sourceType').patchValue(predicateValue.dynamicValue ?
+    this.filterPredicateValueFormGroup.get('dynamicValue.sourceType').patchValue(predicateValue.dynamicValue ?
      predicateValue.dynamicValue.sourceType : null, {emitEvent: false});
-    this.filterPredicateValueFormGroup.get('dynamicValue').get('sourceAttribute').patchValue(predicateValue.dynamicValue ?
+    this.filterPredicateValueFormGroup.get('dynamicValue.inherit').patchValue(predicateValue.dynamicValue ?
+      predicateValue.dynamicValue.inherit : false, {emitEvent: false});
+    this.filterPredicateValueFormGroup.get('dynamicValue.sourceAttribute').patchValue(predicateValue.dynamicValue ?
      predicateValue.dynamicValue.sourceAttribute : null, {emitEvent: false});
+    this.updateInheritValue(predicateValue?.dynamicValue?.sourceType);
  }

  private updateModel() {
@ -158,4 +168,12 @@ export class FilterPredicateValueComponent implements ControlValueAccessor, OnIn
    this.propagateChange(predicateValue);
  }

+  private updateInheritValue(sourceType: DynamicValueSourceType) {
+    if (this.inheritFromSources.includes(sourceType)) {
+      this.inheritMode = true;
+    } else {
+      this.filterPredicateValueFormGroup.get('dynamicValue.inherit').patchValue(false, {emitEvent: false});
+      this.inheritMode = false;
+    }
+  }
 }
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.scss
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.scss
@ -17,6 +17,10 @@
  .tb-hint {
    padding-bottom: 0;
  }
+
+  .invisible{
+    visibility: hidden;
+  }
 }

 :host ::ng-deep {
--- a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
@ -16,7 +16,7 @@

 -->
 <div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="numericFilterPredicateFormGroup">
-  <mat-form-field floatLabel="always" hideRequiredMarker fxFlex="40" class="mat-block">
+  <mat-form-field floatLabel="always" hideRequiredMarker fxFlex="30" class="mat-block">
    <mat-label></mat-label>
    <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
      <mat-option *ngFor="let operation of numericOperations" [value]="operation">
@ -25,7 +25,7 @@
    </mat-select>
  </mat-form-field>
  <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
-                             fxFlex="60"
+                             fxFlex="70"
                             [valueType]="valueType"
                             formControlName="value">
  </tb-filter-predicate-value>
--- a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
@ -16,7 +16,7 @@

 -->
 <div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="stringFilterPredicateFormGroup">
-  <div fxFlex="40" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+  <div fxFlex="30" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
    <mat-form-field floatLabel="always" hideRequiredMarker fxFlex class="mat-block">
      <mat-label></mat-label>
      <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
@ -29,7 +29,7 @@
    </mat-checkbox>
  </div>
  <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
-                             fxFlex="60"
+                             fxFlex="70"
                             [valueType]="valueTypeEnum.STRING"
                             formControlName="value">
  </tb-filter-predicate-value>
--- a/ui-ngx/src/app/shared/models/query/query.models.ts
+++ b/ui-ngx/src/app/shared/models/query/query.models.ts
@ -285,6 +285,7 @@ export const dynamicValueSourceTypeTranslationMap = new Map<DynamicValueSourceTy
 export interface DynamicValue<T> {
  sourceType: DynamicValueSourceType;
  sourceAttribute: string;
+  inherit?: boolean;
 }

 export interface FilterPredicateValue<T> {