@acorex/components 5.1.2 → 5.1.6

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);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,220 @@
+import { AXBaseComponent } from '../base/element.class';
+import { Component, Input, Output, EventEmitter, ElementRef, ViewEncapsulation, ViewChild } from '@angular/core';
+import { AXTranslator, AXHtmlUtil } from '@acorex/core';
+import { AXQueryBuilderGroup, AXQueryBuilderGroupEvent, AXQueryBuilderGroupItem } from './query-builder.class';
+import { AXQueryBuilderGroupComponent } from './query-builder-group.component';
+import { AXToastService } from '../toast/toast.service';
+
+@Component({
+  selector: 'ax-query-builder',
+  templateUrl: './query-builder.component.html',
+  styleUrls: ['./query-builder.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class AXQueryBuilderComponent extends AXBaseComponent {
+  @ViewChild('queryGroup') queryGroup: AXQueryBuilderGroupComponent;
+
+  @Input()
+  query: AXQueryBuilderGroup;
+
+  @Input()
+  mode: 'new' | 'edit' = 'new';
+
+  rootGroup: AXQueryBuilderGroup = new AXQueryBuilderGroup();
+
+  ngOnInit(): void {
+    this.rootGroup.condition = this.query.condition ? this.query.condition : 'AND';
+    this.rootGroup.items = this.query.items ? this.query.items : [];
+  }
+
+  constructor(private ref: ElementRef, private toast: AXToastService) {
+    super();
+  }
+
+  @Input()
+  fields: any[] = [];
+
+  // @Input()
+  // mode: 'immediate' | 'click' = 'click';
+
+  @Output()
+  onRuleChanged: EventEmitter<AXQueryBuilderGroupEvent> = new EventEmitter<AXQueryBuilderGroupEvent>();
+
+  saved: boolean = false;
+
+  public getQueryBuilder() {
+    return { groups: this.rootGroup };
+  }
+
+  ruleChanged(e) {
+    this.onRuleChanged.emit({ component: this, groups: this.rootGroup });
+  }
+
+  public saveRule() {
+    /// return this.queryGroup.saveRule();
+    return new Promise((resolve, reject) => {
+      this.saved = true;
+      for (let i = 0; i < this.rootGroup.items.length; i++) {
+        if (this.saved == true) {
+          this.findNullValue(this.rootGroup.items[i]);
+        }
+      }
+      if (this.saved == true) {
+        resolve(this.rootGroup);
+      } else {
+        reject();
+      }
+    });
+  }
+
+  findNullValue(gr) {
+    if (this.saved == true) {
+      if (gr.condition) {
+        for (let i = 0; i < gr.items.length; i++) {
+          this.findNullValue(gr.items[i]);
+        }
+      } else {
+        if (gr.onDemandLabel == '????|') {
+          this.saved = false;
+          this.toast.error('لطفا نام متغیر های مورد نیاز را کامل کنید');
+        }
+      }
+    }
+  }
+
+  // selectionFieldsChanged(e, rules: AXQueryBuilderRule) {
+  //
+  //     rules.dataField = e.selectedItems[0].dataField;
+  //     rules.caption = e.selectedItems[0].caption;
+  //     rules.dataType = e.selectedItems[0].dataType;
+
+  //     // TO DO chack dataType For Def operator and Value
+  //     if (rules.dataType == 'string') {
+  //         rules.operator = this.operatorStringItem[0].id;
+  //         rules.value = 'null';
+  //     }
+  //     if (rules.dataType == 'number') {
+  //         rules.operator = this.operatorNumberItem[0].id;
+  //         rules.value = '0';
+  //     }
+
+  //     this.onRuleChanged.emit({ groups: this.rootGroup, queryString: this.getQueryDisplay(), component: this, htmlElement: this.ref.nativeElement })
+  // }
+
+  // selectionOparatorChanged(e, rules: AXQueryBuilderRule) {
+  //     rules.operator = e.selectedItems[0].id;
+  // }
+
+  // provideDataFields = (e) => {
+  //     return new Promise((resolve) => {
+  //         resolve(this.fields);
+  //     });
+  // }
+
+  // provideDataOperatorString = (e) => {
+  //     return new Promise((resolve) => {
+  //         resolve(this.operatorStringItem);
+  //     });
+  // }
+  // provideDataOperatorNumber = (e) => {
+  //     return new Promise((resolve) => {
+  //         resolve(this.operatorNumberItem);
+  //     });
+  // }
+
+  // private getQueryDisplay(gr = this.list, _condition = this.list[0].condition) {
+  //     var cap: string = '(';
+
+  //     for (let j = 0; j < gr.length; j++) {
+  //         if (j > 0) {
+  //             cap = cap + _condition;
+  //         }
+  //         cap = cap + " ( ";
+  //         for (let i = 0; i < gr[j].items.length; i++) {
+  //             if (gr[j].items[i].value && gr[j].items[i].operator && gr[j].items[i].caption || ((gr[j].items[i].operator == "is-empty" || gr[j].items[i].operator == "is-not-empty") && gr[j].items[i].caption)) {
+  //                 var opr: string;
+  //                 if (gr[j].items[i].dataType == "number" || gr[j].items[i].dataType == "date" || gr[j].items[i].dataType == "dateTime") {
+  //                     let d = this.operatorNumberItem.filter(c => c.id == gr[j].items[i].operator);
+  //                     opr = d[0].text;
+  //                 } else {
+  //                     let d = this.operatorStringItem.filter(c => c.id == gr[j].items[i].operator);
+  //                     opr = d[0].text;
+  //                 }
+  //                 if ((gr[j].items[i].operator == "is-empty" || gr[j].items[i].operator == "is-not-empty")) {
+
+  //                     if (i === gr[j].items.length - 1) {
+  //                         cap = cap + " " + "[" + gr[j].items[i].caption + "]";
+  //                     } else {
+  //                         cap = cap + " " + "[" + gr[j].items[i].caption + "]" + " " + opr + " " + gr[j].condition;
+  //                     }
+  //                 } else {
+  //                     var val: string;
+
+  //                     if (gr[j].items[i].dataType == 'date') {
+  //                         // val = moment(item.value).locale('fa').format('YYYY/MM/DD');
+  //                     } else if (gr[j].items[i].dataType == 'dateTime') {
+  //                         // val = moment(item.value).locale('fa').format('HH:mm YYYY/MM/DD');
+  //                     } else {
+  //                         val = gr[j].items[i].value;
+  //                     }
+  //                     if (i === gr[j].items.length - 1) {
+  //                         cap = cap + " " + "[" + gr[j].items[i].caption + "]" + " " + opr + " " + val
+  //                     } else {
+  //                         cap = cap + " " + "[" + gr[j].items[i].caption + "]" + " " + opr + " " + val + " " + gr[j].condition
+  //                     }
+
+  //                 }
+  //             }
+  //         }
+
+  //         if (gr[j].groups && gr[j].groups.length > 0) {
+  //             let c = this.getQueryDisplay(gr[j].groups, gr[j].condition);
+  //             if (c != "( ) ") {
+  //                 if (gr[j].items.length > 0 || j > 0) {
+  //                     cap = cap + " " + gr[j].condition + " " + c + " ";
+  //                 } else {
+  //                     cap = cap + " " + c + " ";
+  //                 }
+
+  //             }
+  //         }
+
+  //         cap = cap + " ) ";
+  //     };
+
+  //     cap = cap + " ) ";
+  //     return cap;
+  // }
+
+  // deleteGroup(groupOut: AXQueryBuilderGroup, groupIn: AXQueryBuilderGroup) {
+  //     groupOut.items = groupOut.items.filter(c => c.id != groupIn.id);
+  // }
+
+  // deleteRule1(group: AXQueryBuilderGroup, rule: AXQueryBuilderRule) {
+  //     group.items = group.items.filter(c => c.id != rule.id);
+  // }
+
+  // addRule(group: AXQueryBuilderGroup) {
+  //     const item: AXQueryBuilderRule = new AXQueryBuilderRule();
+  //     group.items.push(item);
+  // }
+
+  // addGroupAND(group: AXQueryBuilderGroup) {
+  //     this.addGroupOnClick(group);
+  //     group.condition = "AND";
+  // }
+  // addGroupOR(group: AXQueryBuilderGroup) {
+  //     this.addGroupOnClick(group);
+  //     group.condition = "OR";
+  // }
+
+  // addGroupOnClick(groups: AXQueryBuilderGroup) {
+  //     let r: AXQueryBuilderGroup = new AXQueryBuilderGroup();
+  //     r.condition = "";
+  //     r.items = [];
+  //     if (groups.items == undefined) {
+  //         groups.items = [];
+  //     }
+  //     groups.items.push(r);
+  // }
+}

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

@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core';
+import { AXQueryBuilderComponent } from './query-builder.component';
+import { AXButtonModule } from '../button/button.module';
+import { CommonModule } from '@angular/common';
+import { AXPanelBoxModule } from '../panel-box/panel-box.module';
+import { AXSelectBoxModule } from '../selectbox/selectbox.module';
+import { AXTextBoxModule } from '../textbox/textbox.module';
+import { AXQueryBuilderRuleComponent } from './query-builder-rule.component';
+import { AXQueryBuilderGroupComponent } from './query-builder-group.component';
+import { AXTranslatorModule } from '@acorex/core';
+import { AXNumberBoxModule } from '../number-box/number-box.module';
+import { AXDataSourceModule } from '../data-source/datasource.module';
+import { AXFormGroupModule } from '../form-group/form-group.module';
+import { AXQueryBuilderPopupComponent } from './query-builder-popup/query-builder-popup.component';
+import { AXLabelModule } from '../label/label.module';
+import { AXCheckBoxModule } from '../checkbox/checkbox.module';
+import { AXValidationModule } from '../validation/validation.module';
+import { AXQueryBuilderService } from './query-builder.service';
+import { AXDatePickerModule } from '../date-picker/date-picker.module';
+
+const MODUELS = [
+    CommonModule,
+    AXButtonModule,
+    AXPanelBoxModule,
+    AXSelectBoxModule,
+    AXDataSourceModule,
+    AXTextBoxModule,
+    AXNumberBoxModule,
+    AXFormGroupModule,
+    AXTranslatorModule,
+    AXLabelModule,
+    AXCheckBoxModule,
+    AXValidationModule,
+    AXDatePickerModule
+]
+
+@NgModule({
+    declarations: [AXQueryBuilderComponent, AXQueryBuilderGroupComponent, AXQueryBuilderRuleComponent, AXQueryBuilderPopupComponent],
+    imports: [MODUELS],
+    exports: [AXQueryBuilderComponent],
+    providers: [AXQueryBuilderService]
+})
+
+export class AXQueryBuilderModule { }