Add the editing mode of "complex rule nesting" to support "threshold …

…rules"
apache · Jul 19, 2024 · f5a76e7 · f5a76e7
1 parent 9b70ca1
commit f5a76e7
Show file tree

Hide file tree

Showing 5 changed files with 12,182 additions and 12,024 deletions.
diff --git a/web-app/package.json b/web-app/package.json
@@ -56,7 +56,7 @@
     "@delon/mock": "17.3.1",
     "@delon/theme": "17.3.1",
     "@delon/util": "17.3.1",
-    "@kerwin612/ngx-query-builder": "0.6.3",
+    "@kerwin612/ngx-query-builder": "0.6.4",
     "ajv": "8.12.0",
     "ajv-formats": "2.1.1",
     "angular-tag-cloud-module": "17.0.1",

diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
@@ -265,7 +265,7 @@
               </nz-collapse-panel>
             </nz-collapse>
           </div>
-          <div *ngIf="!isExpr" id="rule" class="br-4" style="margin-top: 5px; padding: 5px; background: ghostwhite">
+          <div *ngIf="!isExpr" id="rule" class="br-4" style="margin-top: 5px; background: ghostwhite">
             <ngx-query-builder [classNames]="qbClassNames" [config]="qbConfig" [formControl]="qbFormCtrl">
               <ng-container *querySwitchGroup="let rule; let onChange = onChange">
                 <nz-radio-group

diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.less b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.less
@@ -0,0 +1,49 @@
+::ng-deep {
+
+  .row {
+    margin-top: 6px;
+
+    .ruleset {
+      border: 1px solid #CCC;
+    }
+  }
+
+  .ruleset-invalid {
+    border: none!important;
+
+    .ruleset {
+      border: 1px solid #ff4d4f !important;
+    }
+
+    >p {
+      margin: 0!important;
+      color: #ff4d4f !important;
+    }
+  }
+
+  .ruleset {
+    min-width: 400px;
+    overflow-x: auto;
+    padding: 6px 8px;
+  }
+
+  .rule {
+    display: flex;
+    gap: 10px;
+    min-width: 300px;
+    overflow-x: auto;
+    padding: 6px 8px;
+    border: 1px solid #CCC;
+
+    .q-rule-content {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .q-rule-actions {
+      flex-shrink: 0;
+    }
+  }
+}
diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
@@ -43,7 +43,8 @@ const AVAILABILITY = 'availability';
 
 @Component({
   selector: 'app-alert-setting',
-  templateUrl: './alert-setting.component.html'
+  templateUrl: './alert-setting.component.html',
+  styleUrls: ['./alert-setting.component.less']
 })
 export class AlertSettingComponent implements OnInit {
   constructor(
@@ -73,7 +74,12 @@ export class AlertSettingComponent implements OnInit {
   switchExportTypeModalFooter: ModalButtonOptions[] = [
     { label: this.i18nSvc.fanyi('common.button.cancel'), type: 'default', onClick: () => (this.isSwitchExportTypeModalVisible = false) }
   ];
-  qbClassNames: QueryBuilderClassNames = {};
+  qbClassNames: QueryBuilderClassNames = {
+    row: 'row',
+    rule: 'br-4 rule',
+    ruleSet: 'br-4 ruleset',
+    invalidRuleSet: 'br-4 ruleset-invalid'
+  };
   qbConfig: QueryBuilderConfig = {
     levelLimit: 3,
     rulesLimit: 5,
@@ -496,6 +502,14 @@ export class AlertSettingComponent implements OnInit {
     };
   }
 
+  private filterEmptyRules(ruleset: RuleSet): RuleSet | Rule {
+    if (ruleset.rules.length === 1 && (ruleset.rules[0] as RuleSet).rules) {
+      return ruleset.rules[0];
+    } else {
+      return ruleset;
+    }
+  }
+
   private expr2ruleset(expr: string): RuleSet {
     let ruleset = { rules: [] as any[], condition: 'and' };
     let current = ruleset;
@@ -513,7 +527,7 @@ export class AlertSettingComponent implements OnInit {
         i += 2;
       } else if (expr[i] === ')') {
         let parent = stack.pop();
-        parent.rules.push(current);
+        parent.rules.push(this.filterEmptyRules(current));
         current = parent;
         i++;
       } else {
@@ -538,7 +552,7 @@ export class AlertSettingComponent implements OnInit {
         i++;
       }
     }
-    return ruleset;
+    return this.filterEmptyRules(ruleset) as RuleSet;
   }
 
   getOperatorLabelByType = (operator: string) => {