@acorex/components 4.1.4 → 4.2.0

package/src/lib/query-builder/query-builder-rule.component.ts

@@ -0,0 +1,353 @@
+import { Component, OnInit, Input, ViewEncapsulation, Output, EventEmitter, ViewChild } from '@angular/core';
+import { AXQueryBuilderRule, AXQueryBuilderGroup, AXQueryBuilderRuleEvent, AXQueryBuilderControl } from './query-builder.class';
+import { AXTranslator } from '@acorex/core';
+import { AXSelectBoxComponent } from '../selectbox/selectbox.component';
+import { AXTextBoxComponent } from '../textbox/textbox.component';
+import { AXValidationFormComponent } from '../validation/validation-form.component';
+
+@Component({
+  selector: 'ax-query-rule',
+  templateUrl: 'query-builder-rule.component.html',
+  host: { class: 'ax ax-query-rule' },
+  encapsulation: ViewEncapsulation.None
+})
+export class AXQueryBuilderRuleComponent implements OnInit {
+  @ViewChild('selectBox') selectBox: AXSelectBoxComponent;
+  @ViewChild('selectBoxValue') selectBoxValue: AXSelectBoxComponent;
+
+  @ViewChild('selectBoxBoolean') selectBoxBoolean: AXSelectBoxComponent;
+
+  @ViewChild('textBoxNameValue') textBoxNameValue: AXTextBoxComponent;
+  @ViewChild(AXValidationFormComponent) form: AXValidationFormComponent;
+  @Input()
+  isEditing: boolean = true;
+
+  @Input()
+  rule: AXQueryBuilderRule;
+
+  @Input()
+  parent: AXQueryBuilderGroup;
+
+  @Input()
+  mode: 'new' | 'edit' = 'new';
+
+  @Input()
+  fields: any[] = [];
+
+  @Output()
+  onRuleDelete: EventEmitter<AXQueryBuilderRuleEvent> = new EventEmitter<AXQueryBuilderRuleEvent>();
+
+  @Output()
+  ruleChanged: EventEmitter<AXQueryBuilderRuleEvent> = new EventEmitter<AXQueryBuilderRuleEvent>();
+
+  showValue: boolean = false;
+
+  isOnDemandLabel: boolean = false;
+
+  showSelectBox: boolean = true;
+  showOperatorSelectBox: boolean = true;
+  constructor() {}
+
+  ngOnInit() {}
+
+  ngAfterViewInit(): void {
+    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
+    //Add 'implements AfterViewInit' to the class.
+    if (this.rule.onDemandLabel) {
+      this.isOnDemandLabel = true;
+    }
+  }
+  provideDataBoolean = (e) => {
+    return new Promise((resolve) => {
+      resolve([
+        {
+          value: 'true',
+          text: AXTranslator.get('queryBuilder.true')
+        },
+        {
+          value: 'false',
+          text: AXTranslator.get('queryBuilder.false')
+        }
+      ]);
+    });
+  };
+
+  saveRule() {
+    this.form.validate().then((c) => {});
+  }
+
+  provideDataOperator = (e) => {
+    return new Promise((resolve) => {
+      if (this.rule.dataType === 'string') {
+        if (this.rule && this.rule.control && this.rule.control.type && this.rule.control.type == 'selectBox') {
+          if (this.rule.control.options.mode == 'multiple') {
+            resolve([
+              {
+                value: 'contains',
+                text: AXTranslator.get('queryBuilder.contains')
+              },
+              {
+                value: 'not-contains',
+                text: AXTranslator.get('queryBuilder.not-contains')
+              },
+              {
+                value: 'contains-all',
+                text: AXTranslator.get('queryBuilder.contains-all')
+              },
+              {
+                value: 'null',
+                text: AXTranslator.get('queryBuilder.null')
+              },
+              {
+                value: 'not-null',
+                text: AXTranslator.get('queryBuilder.not-null')
+              }
+            ]);
+          } else {
+            resolve([
+              {
+                value: 'equal',
+                text: AXTranslator.get('queryBuilder.equal')
+              },
+              {
+                value: 'not-equal',
+                text: AXTranslator.get('queryBuilder.not-equal')
+              },
+              {
+                value: 'null',
+                text: AXTranslator.get('queryBuilder.null')
+              },
+              {
+                value: 'not-null',
+                text: AXTranslator.get('queryBuilder.not-null')
+              }
+            ]);
+          }
+        } else {
+          resolve([
+            {
+              value: 'equal',
+              text: AXTranslator.get('queryBuilder.equal')
+            },
+            {
+              value: 'contains',
+              text: AXTranslator.get('queryBuilder.contains')
+            },
+            {
+              value: 'start-with',
+              text: AXTranslator.get('queryBuilder.start-with')
+            },
+            {
+              value: 'end-with',
+              text: AXTranslator.get('queryBuilder.end-with')
+            },
+            {
+              value: 'not-equal',
+              text: AXTranslator.get('queryBuilder.not-equal')
+            },
+            {
+              value: 'null',
+              text: AXTranslator.get('queryBuilder.null')
+            },
+            {
+              value: 'not-null',
+              text: AXTranslator.get('queryBuilder.not-null')
+            }
+          ]);
+        }
+      }
+      if (this.rule.dataType === 'number') {
+        resolve([
+          {
+            value: 'equal',
+            text: AXTranslator.get('queryBuilder.equal')
+          },
+          {
+            value: 'gt',
+            text: AXTranslator.get('queryBuilder.greater-than')
+          },
+          {
+            value: 'gte',
+            text: AXTranslator.get('queryBuilder.greater-than-equal')
+          },
+          {
+            value: 'lt',
+            text: AXTranslator.get('queryBuilder.less-than')
+          },
+          {
+            value: 'lte',
+            text: AXTranslator.get('queryBuilder.less-than-equal')
+          },
+          {
+            value: 'not-equal',
+            text: AXTranslator.get('queryBuilder.not-equal')
+          },
+          {
+            value: 'null',
+            text: AXTranslator.get('queryBuilder.null')
+          },
+          {
+            value: 'not-null',
+            text: AXTranslator.get('queryBuilder.not-null')
+          }
+        ]);
+      }
+      if (this.rule.dataType === 'boolean') {
+        resolve([
+          {
+            value: 'equal',
+            text: AXTranslator.get('queryBuilder.equal')
+          },
+          {
+            value: 'null',
+            text: AXTranslator.get('queryBuilder.null')
+          },
+          {
+            value: 'not-null',
+            text: AXTranslator.get('queryBuilder.not-null')
+          }
+        ]);
+      }
+      resolve([]);
+    });
+  };
+
+  handleEditClick() {
+    this.isEditing = true;
+  }
+
+  handleCommitClick() {
+    this.isEditing = false;
+    this.ruleChanged.emit({ items: this.rule, component: this });
+  }
+  handleRemoveClick() {
+    this.onRuleDelete.emit({ items: this.rule, component: this });
+  }
+  captionChange(e) {
+    if (e.selectedItems[0]) {
+      this.rule.caption = e.selectedItems[0].caption;
+      this.rule.dataField = e.selectedItems[0].dataField;
+      this.rule.dataType = e.selectedItems[0].dataType;
+      this.rule.control = e.selectedItems[0].control || new AXQueryBuilderControl();
+      this.rule.dataFieldItem[0] = e.selectedItems[0];
+    }
+
+    if (this.selectBox) {
+      if (this.rule.control.type === 'selectBox' && this.rule.control.options.mode == 'multiple') {
+        this.rule.operator = 'contains';
+      } else {
+        this.rule.operator = 'equal';
+      }
+      this.selectBox.refresh();
+    }
+
+    this.showOperatorSelectBox = false;
+    setTimeout(() => {
+      this.showOperatorSelectBox = true;
+    }, 20);
+
+    this.rule.value = null;
+    this.rule.valueItem = [];
+    this.rule.text = '';
+
+    if (this.rule.control.type === 'selectBox' && this.selectBoxValue) {
+      this.showSelectBox = false;
+      setTimeout(() => {
+        this.showSelectBox = true;
+        this.selectBoxValue.refresh();
+      }, 20);
+    }
+    if (this.rule.control.type == 'boolean') {
+      this.selectBoxBoolean.refresh();
+    }
+    this.ruleChanged.emit({ component: this, items: this.rule });
+  }
+
+  operatorChange(e) {
+    this.rule.operator = e[0].value;
+    this.ruleChanged.emit({ component: this, items: this.rule });
+
+    if (e[0].value !== 'null' && e[0].value !== 'not-null') {
+      this.showValue = true;
+    } else {
+      this.showValue = false;
+      this.rule.value = '';
+      this.rule.text = '';
+      this.rule.valueItem = [];
+      this.rule.onDemandLabel = '';
+    }
+  }
+  valueChange(e) {
+    // this.rule.text = e.value == undefined ? e[0].value : (e.value == null ? '' : e.value);
+
+    this.rule.text = e[0] ? (e[0].value == null ? '' : e[0].value) : e.value == null ? '' : e.value;
+    this.rule.onDemandLabel = '';
+    this.ruleChanged.emit({ component: this, items: this.rule });
+  }
+  onDemandLabelChange(e) {
+    // this.rule.onDemandLabel = e.value == undefined ? '????|' + e[0].value : '????|' + e.value;
+    this.rule.onDemandLabel = e[0] ? '????|' + (e[0].value == null ? '' : e[0].value) : '????|' + (e.value == null ? '' : e.value);
+    this.rule.value = '';
+    this.rule.text = '';
+    this.rule.valueItem = [];
+
+    this.ruleChanged.emit({ component: this, items: this.rule });
+  }
+  valueBooleanChange(e) {
+    // this.rule.text = e.value == undefined ? e[0].value : (e.value == null ? '' : e.value);
+    this.rule.text = e[0] ? (e[0].value == null ? '' : e[0].value) : e.value == null ? '' : e.value;
+    this.rule.value = e.value == undefined ? e[0].value : e.value;
+    this.rule.onDemandLabel = '';
+    this.ruleChanged.emit({ component: this, items: this.rule });
+  }
+  getOnDemandName(v) {
+    return v ? v.split('|')[1] : '';
+  }
+  selectedItemsChange(e) {
+    let n = this.getOption('textField');
+
+    if (this.rule.control.options.mode === 'single') {
+      this.rule.text = e[0][n];
+      if (this.rule && this.rule.control.options.valueField) {
+        this.rule.value = e[0][this.rule.control.options.valueField];
+      } else {
+        this.rule.value = e[0].value;
+      }
+      this.rule.valueItem[0] = e[0];
+    } else {
+      this.rule.text = e.map((x) => x[n]).join('- ');
+      const THAT = this;
+      if (THAT.rule && THAT.rule.control.options.valueField) {
+        THAT.rule.value = e.map(function (item) {
+          return item[THAT.rule.control.options.valueField];
+        });
+      } else {
+        this.rule.value = e.map(function (item) {
+          return item.value;
+        });
+      }
+      this.rule.valueItem = e;
+    }
+
+    this.ruleChanged.emit({ component: this, items: this.rule });
+    this.rule.onDemandLabel = '';
+  }
+  onDemandLabel(e) {
+    // if (e.value && (this.rule.onDemandLabel == '????|' || this.rule.onDemandLabel === undefined || this.rule.onDemandLabel === null || this.rule.onDemandLabel === '')) {
+    //   this.textBoxNameValue.focus();
+    // }
+    if (e.value == false) {
+      this.rule.onDemandLabel = '';
+    }
+    this.isOnDemandLabel = e.value;
+  }
+  getProvideData = (e) => {
+    if (this.rule && this.rule.control.options && this.rule.control.options.dataSource) {
+      return this.rule.control.options.dataSource({ ...e, optionsData: { ...this.rule.control.options } });
+    }
+  };
+
+  getOption(name: string) {
+    return this.rule.control.options ? this.rule.control.options[name] : null;
+  }
+}

package/src/lib/query-builder/query-builder.class.ts

@@ -0,0 +1,53 @@
+import { AXDataEvent } from '../base/events.class';
+import { AXTranslator } from '@acorex/core';
+
+export type AXQueryBuilderDataType = 'string' | 'number' | 'date' | 'time' | 'datetime' | 'boolean';
+export type AXQueryBuilderGroupItem = AXQueryBuilderGroup | AXQueryBuilderRule;
+export type AXQueryBuilderControlType = 'textBox' | 'selectBox' | 'numberBox' | 'dataPicker' | 'lov' | 'boolean';
+export type AXQueryBuilderStringType = 'simple' | 'sql' | 'sodoco' | 'elastic';
+
+export class AXQueryBuilderControl {
+  type: AXQueryBuilderControlType = 'textBox';
+  options: any = {};
+}
+
+export class AXQueryBuilderRule {
+  dataField: string;
+  caption: string;
+  dataType: AXQueryBuilderDataType;
+  control: AXQueryBuilderControl;
+  operator: string;
+  value?: any;
+  text?: string;
+  dataFieldItem: any;
+  valueItem?: any;
+  onDemandLabel?: string;
+}
+
+export class AXQueryBuilderGroup {
+  items: AXQueryBuilderGroupItem[];
+  condition: string;
+  queryString: string;
+  queryStringElastic:string
+}
+export class AXQueryBuilderField {
+  caption: string;
+  dataField: string;
+  dataType: AXQueryBuilderDataType;
+  default?: any;
+  options?: any;
+}
+
+export class AXQueryBuilderRuleEvent extends AXDataEvent<AXQueryBuilderRuleEvent> {
+  items: AXQueryBuilderRule;
+}
+
+export class AXQueryBuilderGroupEvent extends AXDataEvent<AXQueryBuilderGroupEvent> {
+  items?: AXQueryBuilderRule;
+  groups: AXQueryBuilderGroup;
+}
+
+export class AXQueryBuilderPopup {
+  name: string;
+  type: string;
+}

package/src/lib/query-builder/query-builder.component.html

@@ -0,0 +1,3 @@
+<ax-query-group #queryGroup [mode]="mode" [group]="rootGroup" [fields]="fields"
+    (groupRuleChanged)="ruleChanged($event)">
+</ax-query-group>

package/src/lib/query-builder/query-builder.component.scss

@@ -0,0 +1,286 @@
+.ax-query-group {
+    display: flex;
+    flex-direction: column;
+    margin: 5px;
+    padding-inline-start: 0px;
+
+    .add-buttons {
+        display: flex;
+        margin: 5px;
+        flex-direction: row;
+
+        .handler {
+            display: flex;
+            align-items: center;
+            background-color: var(--ax-primary-trans-light-color);
+            color: var(--ax-primary-color);
+            padding: 5px;
+            cursor: move;
+            border: 1px solid var(--ax-primary-trans-light-color);
+
+            border-start-start-radius: 4px;
+            border-end-start-radius: 4px;
+        }
+    }
+
+    .buttons-list {
+        margin-inline-start: 10px;
+        display: flex;
+        align-items: center;
+
+        .button {
+            cursor: pointer;
+            margin-inline-end: 0.5em;
+            width: 2.3em;
+            height: 2.3em;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50px;
+            position: relative;
+            ax-check-box{
+                opacity: 0;
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                z-index: 1;
+                left: 0;
+                top: 0;
+            }
+        }
+        .variable{
+            color: var(--ax-warning-color);
+            background: var(--ax-warning-trans-light-color);
+            &.active-button{
+                background: var(--ax-warning-light-color);
+                color: var(--ax-white-color);
+                opacity: 0.7;
+            }
+        }
+        .commit {
+            color: var(--ax-success-color);
+            background: var(--ax-success-trans-light-color);
+        }
+        .remove {
+            color: var(--ax-danger-color);
+            background: var(--ax-danger-trans-light-color);
+        }
+        .edit {
+            color: var(--ax-primary-color);
+            background: var(--ax-primary-trans-light-color);
+        }
+    }
+
+    .group-item {
+        transition: all 0.5s;
+        .condition {
+            width: 40px;
+            display: flex;
+            align-items: center;
+            background: linear-gradient(
+                180deg,
+                rgba(2, 0, 36, 0) 49%,
+                var(--ax-gray-light-color) 49%,
+                var(--ax-gray-light-color) 55%,
+                rgba(0, 212, 255, 0) 50%
+            );
+
+            .text {
+                margin-inline-start: -50%;
+                border-radius: 50%;
+                width: 35px;
+                height: 35px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                &.OR {
+                    background: var(--ax-warning-color);
+                    color: var(--ax-warning-fore-color);
+                }
+
+                &.AND {
+                    background: var(--ax-success-color);
+                    color: var(--ax-success-fore-color);
+                }
+            }
+        }
+    }
+
+    .header {
+        display: flex;
+        flex-direction: row;
+
+        .handler {
+            display: flex;
+            align-items: center;
+            background-color: var(--ax-light-light-color);
+            color: var(--ax-light-fore-color);
+            padding: 5px;
+            cursor: move;
+            border: 1px solid var(--ax-light-light-color);
+
+
+            border-start-start-radius: 4px;
+            border-end-start-radius: 4px;
+        }
+
+        .caption {
+            padding:  0.5rem;
+            background-color: var(--ax-gray-trans-light-color);
+            color: var(--ax-gray-dark-color);
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .detail {
+            padding:  0.5rem;
+            background-color: var(--ax-gray-trans-light-color);
+            border-right: none;
+
+            border-start-end-radius:4px;
+            border-end-end-radius: 4px;
+            cursor: pointer;
+
+            &.OR {
+                background-color: var(--ax-warning-trans-light-color);
+            }
+
+            &.AND {
+                background-color: var(--ax-success-trans-light-color);
+            }
+        }
+    }
+
+    .rules {
+        margin-inline-start: 10px;
+        border-inline-start: 2px solid var(--ax-gray-light-color);
+
+        .rules {
+            margin-inline-start: 48px;
+        }
+    }
+
+    .ax-query-rule {
+        display: flex;
+        margin: 5px;
+        flex-direction: row;
+        transition: all 0.5s;
+        .handler {
+            display: flex;
+            align-items: center;
+            background-color: var(--ax-light-light-color);
+            color: var(--ax-light-fore-color);
+            padding: 0.5em;
+            cursor: move;
+            border: 1px solid var(--ax-light-light-color);
+
+            border-start-start-radius: 4px;
+            border-end-start-radius: 4px;
+        }
+
+        .caption {
+            padding:  0.5rem;
+            background-color: var(--ax-gray-trans-light-color);
+            border: 1px solid var(--ax-gray-light-color);
+            color: #333;
+            font-weight: bold;
+            &.editable {
+                width: 200px;
+            }
+            cursor: pointer;
+        }
+
+        .operator {
+            border-top: 1px solid var(--ax-gray-light-color);
+            border-bottom: 1px solid var(--ax-gray-light-color);
+            background-color: var(--ax-gray-trans-light-color);
+            padding:  0.5rem;
+            &.editable {
+                width: 200px;
+            }
+            .text {
+                color: var(--ax-primary-color);
+                font-weight: bold;
+                text-decoration: underline dashed;
+                cursor: pointer;
+            }
+            &.radius{
+                border-top-left-radius: 4px;
+                border-bottom-left-radius: 4px;
+                border: 1px solid var(--ax-gray-light-color);
+                border-right: none;
+            }
+        }
+
+        .value {
+            padding:  0.5rem;
+            background-color: var(--ax-light-light-color);
+            color: #000;
+            border: 1px solid var(--ax-gray-light-color);
+            border-right: none;
+            border-start-end-radius: 4px;
+            border-end-end-radius: 4px;
+            cursor: pointer;
+            &.editable {
+                width: 200px;
+            }
+        }
+
+        .add-rule {
+            border-top: 1px dashed var(--ax-gray-light-color);
+            border-bottom: 1px dashed var(--ax-gray-light-color);
+            color: var(--ax-gray-dark-color);
+            padding:  0.5rem;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .add-rule:hover {
+            background-color: var(--ax-gray-light-color);
+        }
+        .add-group:hover {
+            background-color: var(--ax-gray-light-color);
+        }
+        .add-group {
+            border-top: 1px dashed var(--ax-gray-light-color);
+            border-bottom: 1px dashed var(--ax-gray-light-color);
+            color: var(--ax-gray-dark-color);
+            padding:  0.5rem;
+
+            border: 1px dashed var(--ax-gray-light-color);
+            border-top-left-radius: 4px;
+            border-bottom-left-radius: 4px;
+            cursor: pointer;
+        }
+        .add-condition {
+            border-top: 1px dashed var(--ax-gray-light-color);
+            border-bottom: 1px dashed var(--ax-gray-light-color);
+            color: var(--ax-gray-dark-color);
+            padding:  0.5rem;
+
+            border: 1px dashed var(--ax-gray-light-color);
+            border-top-left-radius: 4px;
+            border-bottom-left-radius: 4px;
+            cursor: pointer;
+            &.OR {
+                background-color: var(--ax-warning-trans-light-color);
+                color: var(--ax-warning-dark-color);
+            }
+
+            &.AND {
+                background-color: var(--ax-success-trans-light-color);
+                color: var(--ax-success-dark-color);
+            }
+        }
+        .add-condition:hover {
+            &.OR {
+                background-color: var(--ax-warning-trans-light-color);
+                color: var(--ax-warning-dark-color);
+            }
+
+            &.AND {
+                background-color: var(--ax-success-trans-light-color);
+                color: var(--ax-success-dark-color);
+            }
+        }
+    }
+}