@acorex/components 5.1.2 → 5.1.6

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

@@ -0,0 +1,188 @@
+import { AXQueryBuilderGroup, AXQueryBuilderStringType } from './query-builder.class';
+import { Injectable } from '@angular/core';
+import { AXPopupService } from '../popup/popup.service';
+import { AXQueryBuilderPopupComponent } from './query-builder-popup/query-builder-popup.component';
+import { AXToastService } from '../toast/toast.service';
+import { AXDateTime } from '@acorex/core';
+@Injectable({ providedIn: 'root' })
+export class AXQueryBuilderService {
+  constructor(private popup: AXPopupService, private toast: AXToastService) { }
+  canOpen: boolean = false;
+  canRun: boolean = false;
+  public runQuery(group: AXQueryBuilderGroup, provideData) {
+    return new Promise((resolve) => {
+      this.canOpen = false;
+      for (let i = 0; i < group.items.length; i++) {
+        this.getNoValueRule(group.items[i]);
+      }
+      if (this.canOpen) {
+        this.canRun = true;
+        for (let i = 0; i < group.items.length; i++) {
+          if (this.canRun == true) {
+            this.findNullValue(group.items[i]);
+          }
+        }
+        if (this.canRun) {
+          this.popup.open(AXQueryBuilderPopupComponent, { data: { group: group, provideData: provideData }, title: 'دریافت مقادیر' }).then((c) => {
+            resolve(c);
+          });
+        }
+      } else {
+        resolve(group);
+      }
+    });
+  }
+
+  findNullValue(gr) {
+    if (this.canRun == true) {
+      if (gr.condition) {
+        for (let i = 0; i < gr.items.length; i++) {
+          this.findNullValue(gr.items[i]);
+        }
+      } else {
+        if (gr.onDemandLabel == '????|') {
+          this.canRun = false;
+          this.toast.error('لطفا نام متغیر های مورد نیاز را کامل کنید');
+        }
+      }
+    }
+  }
+
+  private getNoValueRule(gr) {
+    // for (let i = 0; i < gr.items.length; i++) {
+    if (gr.condition) {
+      for (let i = 0; i < gr.items.length; i++) {
+        this.getNoValueRule(gr.items[i]);
+      }
+    } else {
+      if (gr.onDemandLabel?.indexOf('????') == 0) {
+        this.canOpen = true;
+      }
+    }
+
+    //  }
+  }
+
+  async getQueryStringSimple(group: AXQueryBuilderGroup) {
+    return new Promise<string>(async (resolve, reject) => {
+      var query: string;
+      if (group.items.length > 0) {
+        query = ' ( ';
+      }
+      var id = 0;
+      for await (const iterator of group.items) {
+        const item: any = group.items[id];
+
+        if (item.condition) {
+          await this.getQueryStringSimple(item).then((c) => {
+            query = query + c;
+          });
+        } else {
+          let codeOperator: string = null;
+          switch (item.operator) {
+            case 'equal':
+              codeOperator = '==';
+              break;
+            case 'not-equal':
+              codeOperator = '!=';
+              break;
+            case 'not-null':
+              codeOperator = '!= null';
+              break;
+            case 'null':
+              codeOperator = '== null';
+              break;
+            case 'gt':
+              codeOperator = '>';
+              break;
+            case 'gte':
+              codeOperator = '>=';
+              break;
+            case 'lt':
+              codeOperator = '<';
+              break;
+            case 'lte':
+              codeOperator = '<=';
+              break;
+            case 'contains':
+              codeOperator = item.operator;
+              break;
+            case 'start-with':
+              codeOperator = item.operator;
+              break;
+            case 'end-with':
+              codeOperator = item.operator;
+              break;
+            default:
+              codeOperator = item.operator;
+              break;
+          }
+          if (item.dataType == 'datetime' && item.text && item.text != '' && item.text != null) {
+            query = query + ' ' + item.caption + ' ' + codeOperator + ' (' + AXDateTime.convert(item.text, 'jalali') + ')';
+          } else if (item.dataType != 'datetime') {
+            query = query + ' ' + item.caption + ' ' + codeOperator + ' ' + item.text;
+          }
+
+        }
+        if (id !== group.items.length - 1 && query != ' ( ') {
+          query = query + ' ' + group.condition;
+        }
+        id += 1;
+      }
+      if (group.items.length > 0) {
+        query = query + ' ) ';
+      }
+      resolve(query);
+    });
+  }
+
+  public getQueryString(group: AXQueryBuilderGroup, type: AXQueryBuilderStringType): string {
+    let query = '';
+    switch (type) {
+      case 'simple':
+        if (group.items.length > 0) {
+          query = ' ( ';
+        }
+        for (let i = 0; i < group.items.length; i++) {
+          const item = group.items[i];
+          if (item instanceof AXQueryBuilderGroup) {
+            query = query + item.queryString;
+          } else {
+            query = query + ' ' + item.caption + ' ' + item.operator + ' ' + item.value;
+          }
+          if (i !== group.items.length - 1 && query != ' ( ') {
+            query = query + ' ' + group.condition;
+          }
+        }
+        if (group.items.length > 0) {
+          query = query + ' ) ';
+        }
+        break;
+
+      case 'elastic':
+        if (group.items.length > 0) {
+          query = ' ( ';
+        }
+        for (let i = 0; i < group.items.length; i++) {
+          const item = group.items[i];
+          if (item instanceof AXQueryBuilderGroup) {
+            query = query + item.queryStringElastic;
+          } else {
+            query = query + ' ' + item.dataField + ' ' + item.operator + ' ' + item.value;
+          }
+          if (i !== group.items.length - 1 && query != ' ( ') {
+            query = query + ' ' + group.condition;
+          }
+        }
+        if (group.items.length > 0) {
+          query = query + ' ) ';
+        }
+
+        break;
+      case 'sql':
+        break;
+    }
+
+    return query;
+  }
+}

package/src/lib/search-bar/search-bar.component.html

@@ -0,0 +1,31 @@
+<div class="d-flex align-items-center">
+    <ax-button #searchBtnTarget end icon="far fa-sliders-h icon" [selected]="_filterItems.length ? true:false"
+        [type]=" _filterItems.length ? 'primary':'primary outline'" [disabled]="disabled" [size]="size" [tabIndex]="-1"
+        (click)="handleButtonClick()"> {{'common.search' | trans}} <span *ngIf="_filterItems.length"
+            class="search-count">{{_filterItems.length}}</span></ax-button>
+</div>
+
+<ax-popover #searchPop [target]="searchBtnTarget"
+    [position]="{originX:'center',originY:'bottom',overlayX:'center',overlayY:'top',offsetY:50,offsetX:10}">
+    <div class="panel-box ax-dropdown-container-bordered" [ngStyle]="{'width' : popoverWidth }">
+        <ax-validation-form #form>
+            <ng-container *ngFor="let item of _items">
+                <div class="row">
+                    <ng-container *ngFor="let prop of item.items">
+                        <div *ngIf="prop.property.visible != false" class="{{renderCol(prop.property.col)}}">
+                            <div>
+                                <ax-label>{{prop.property.title}}</ax-label>
+                                <ng-container ax-property-editor-renderer [validationForm]="form" [property]="prop"
+                                    [context]="_context" (onValueChange)="handleValueChange($event)"></ng-container>
+                            </div>
+                        </div>
+                    </ng-container>
+                </div>
+            </ng-container>
+            <div class="footer-button">
+                <ax-button (click)="search()">{{'common.search' | trans}}</ax-button>
+                <ax-button type="blank danger" (click)="clear()">{{'dataGrid.clearFilter' | trans}}</ax-button>
+            </div>
+        </ax-validation-form>
+    </div>
+</ax-popover>

package/src/lib/search-bar/search-bar.component.scss

@@ -0,0 +1,24 @@
+.panel-box {
+    padding: 1rem;
+
+    .footer-button {
+        margin-top: 1rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+}
+
+.search-count {
+    background: rgb(255 255 255 / 20%);
+    border-radius: 50%;
+    color: var(--ax-white-color);
+    padding: 0.125rem;
+    width: 1.75rem;
+    height: 1.75rem;
+    font-size: 0.875rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-inline-start: 0.5rem;
+}

package/src/lib/search-bar/search-bar.component.ts

@@ -0,0 +1,250 @@
+import { AXConfig, AXDateTime } from '@acorex/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import * as _ from 'lodash';
+import { AXElementSize } from '../base/element.class';
+import { AXPopoverComponent } from '../popover/popover.component';
+import { AXPropertyEditorRendererDirective } from '../property-editor/property-editor-renderer.directive';
+import { AXPropertyColDef, AXPropertyConfig, AXProperyEditorValueChangeEvent, FilterModel } from '../property-editor/property-editor.class';
+import { AXValidationFormComponent } from '../validation/validation-form.component';
+
+export interface FilterTextItemsModel {
+  name: string;
+  title: string;
+  value: any;
+  textValue: string;
+  filterOptions?: FilterModel;
+  component: AXPropertyConfig;
+  uniqueNumber?: number;
+}
+
+@Component({
+  selector: 'ax-search-bar',
+  templateUrl: './search-bar.component.html',
+  styleUrls: ['./search-bar.component.scss']
+})
+export class AXSearchBarComponent {
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  @ViewChild('searchPop') searchPopover: AXPopoverComponent;
+  @ViewChildren(AXPropertyEditorRendererDirective) _editors: QueryList<AXPropertyEditorRendererDirective>;
+  @ViewChild(AXValidationFormComponent) form: AXValidationFormComponent;
+
+  @Input()
+  size: AXElementSize = 'md';
+
+  @Input()
+  disabled: boolean = false;
+
+  @Input()
+  fitParent: boolean = false;
+
+  @Input()
+  popoverWidth: string = '60%';
+
+  @Input()
+  rtl: boolean = AXConfig.get('layout.rtl');
+
+  @Input()
+  loadOnInit: boolean = false;
+
+  @Input()
+  public set items(v: AXPropertyConfig[]) {
+    this._defultValueCount = v.filter((x) => x.value);
+    v.forEach((el) => {
+      el.property.uniqueNumber = Math.random();
+      if (el.value != null) {
+        this._filterItems.push({
+          name: el.property.name,
+          title: el.property.title,
+          textValue: this._handleTextValue(el),
+          value: el.value ? this._handleDefultVlaue(el) : null,
+          component: el
+        });
+      }
+    });
+    this._items = _.chain(v)
+      .groupBy((x) => x.property.row)
+      .map((value, key) => ({ row: key, items: value }))
+      .value();
+  }
+
+  @Output()
+  onValueChange: EventEmitter<any> = new EventEmitter();
+
+  @Output()
+  onSearchValue: EventEmitter<FilterTextItemsModel[]> = new EventEmitter();
+
+  _items: any[] = [];
+  _filterItems: FilterTextItemsModel[] = [];
+  _filterItemsClone: FilterTextItemsModel[] = [];
+  _defultValueCount: any = [];
+  _context: any = {};
+  _isEmitted: boolean = false;
+  public clearItem(name: string) {
+    this._editors.find((x) => x.property.property.name === name).clear();
+  }
+
+  public refresh() {
+    this.loadOnInit = true;
+    this._defultValueCount = [];
+    this._filterItems = [];
+    this._filterItemsClone = [];
+    this.items = this._items[0].items;
+    this.cdr.detectChanges();
+  }
+
+  handleButtonClick() {
+    this.searchPopover.open();
+  }
+
+  async handleValueChange(e: AXProperyEditorValueChangeEvent) {
+    await this._handleInitVlaue(e);
+    this.onValueChange.emit(e);
+  }
+
+  handleItemRemoveClick(item: FilterTextItemsModel) {
+    this._editors.forEach((e) => {
+      if (e.property.property.name == item.name) {
+        e.clear();
+      }
+    });
+    this._filterItems = this._filterItems.filter((el) => el.name != item.name);
+  }
+
+  public search() {
+    this.form.validate().then((c) => {
+      if (c.result) {
+        this._filterItems = JSON.parse(JSON.stringify(this._filterItemsClone.filter((el) => el.value != null && el.value != '')));
+        this.searchPopover.close();
+        this.onSearchValue.emit(this._filterItems);
+      }
+    });
+  }
+
+  clear() {
+    this._editors.forEach((e) => {
+      e.clear();
+    });
+    this._filterItems = [];
+    this._filterItemsClone = [];
+    this.searchPopover.close();
+    this.onSearchValue.emit(this._filterItems);
+  }
+
+  renderCol(e: number | AXPropertyColDef) {
+    let className: string[] = [];
+    if (typeof e == 'number') {
+      className.push(`col-${e}`);
+    } else {
+      for (const key in e) {
+        switch (key) {
+          case 'lg':
+            className.push(`col-lg-${e[key]}`);
+            break;
+          case 'md':
+            className.push(`col-md-${e[key]}`);
+            break;
+          case 'sm':
+            className.push(`col-sm-${e[key]}`);
+            break;
+          case 'xs':
+            className.push(`col-xs-${e[key]}`);
+            break;
+        }
+      }
+    }
+    return className.toString().replace(/,/g, ' ');
+  }
+
+  _handleShowTitleSelected(item) {
+    if (item.title) {
+      return item.title + ':';
+    }
+  }
+
+  _handleShowValueSelected(item) {
+    if (item.component.property.editorClass === 'ax/editors/check') {
+      return item.component.property.editorOptions.label;
+    } else {
+      return item.textValue;
+    }
+  }
+
+  private _handleTextValue(dataItem: any) {
+    let text = '';
+    if (Array.isArray(dataItem.value)) {
+      if (dataItem.value.length) {
+        dataItem.value.forEach((element, index) => {
+          text +=
+            index === dataItem.value.length - 1
+              ? element[dataItem.property.editorOptions.textField]
+              : element[dataItem.property.editorOptions.textField] + ',';
+        });
+      }
+      return text;
+    } else if (dataItem.property.editorClass === 'ax/editors/date') {
+      if (dataItem.value) {
+        return new AXDateTime(dataItem.value, 'jalali').format('yyyy/MM/DD');
+      } else {
+        return;
+      }
+    } else {
+      return;
+    }
+  }
+
+  private async _handleDefultVlaue(dataItem: any) {
+    await this._handleInitVlaue(dataItem);
+    this._filterItems = JSON.parse(JSON.stringify(this._filterItemsClone.filter((el) => el.value != null && el.value != '')));
+    if (this._filterItems.length === this._defultValueCount.length && this.loadOnInit && !this._isEmitted) {
+      this._isEmitted = true;
+      this.onSearchValue.emit(this._filterItems);
+    }
+  }
+
+  private async _handleInitVlaue(e) {
+    let value = [];
+    let text: any = [];
+    if (e.property.editorOptions?.valueField && e.value != null) {
+      if (e.property.editorOptions.returnAllData) {
+        value = e.value;
+        text = await this._handleTextValue(e);
+      } else if (e.property.editorOptions?.mode == 'multiple') {
+        e.value.forEach((element) => {
+          value.push(element[e.property.editorOptions.valueField]);
+          text.push(element[e.property.editorOptions.textField]);
+        });
+      } else {
+        if (e.value.length) {
+          value = e.value[0][e.property.editorOptions.valueField];
+          text = e.value[0][e.property.editorOptions.textField];
+        }
+      }
+    } else {
+      value = e.value;
+      text = e.value;
+    }
+    const findEl = this._filterItemsClone.find((el) => el.uniqueNumber == e.property.uniqueNumber);
+    if (findEl) {
+      findEl.value = value;
+      findEl.textValue = e.property.editorClass === 'ax/editors/date' ? new AXDateTime(text, 'jalali').format('yyyy/MM/DD') : text;
+    } else if (e.value != null) {
+      this._filterItemsClone.push({
+        name: e.property.name,
+        title: e.property.title,
+        uniqueNumber: e.property.uniqueNumber,
+        value,
+        textValue: e.property.editorClass === 'ax/editors/date' ? new AXDateTime(text, 'jalali').format('yyyy/MM/DD') : text,
+        component: e,
+        filterOptions: {
+          filters: e.property?.filterOptions?.filters ? e.property.filterOptions.filters : [],
+          logic: e.property?.filterOptions?.logic ? e.property.filterOptions.logic : 'and',
+          ignoreCase: e.property?.filterOptions?.ignoreCase ? e.property.filterOptions.ignoreCase : true,
+          joinType: e.property?.filterOptions?.joinType ? e.property.filterOptions.joinType : 'INNER',
+          operator: e.property?.filterOptions?.operator ? e.property.filterOptions.operator : null,
+          truncateDate: e.property?.filterOptions?.truncateDate ? e.property.filterOptions.truncateDate : true
+        }
+      });
+    }
+  }
+}

package/src/lib/search-bar/search-bar.module.ts

@@ -0,0 +1,33 @@
+import { AXTranslatorModule } from '@acorex/core';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AXButtonModule } from '../button/button.module';
+import { AXDropdownModule } from '../dropdown/dropdown.module';
+import { AXFormGroupModule } from '../form-group/form-group.module';
+import { AXLabelModule } from '../label/label.module';
+import { AXPopoverModule } from '../popover/popover.module';
+import { AXProppertyEditorModule } from '../property-editor/property-editor.module';
+import { AXTextBoxModule } from '../textbox/textbox.module';
+import { AXValidationModule } from '../validation/validation.module';
+import { AXSearchBarComponent } from './search-bar.component';
+
+@NgModule({
+  declarations: [AXSearchBarComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    AXDropdownModule,
+    AXButtonModule,
+    AXTextBoxModule,
+    AXProppertyEditorModule,
+    AXFormGroupModule,
+    AXLabelModule,
+    AXTranslatorModule,
+    AXValidationModule,
+    AXPopoverModule
+  ],
+  exports: [AXSearchBarComponent],
+  providers: []
+})
+export class AXSearchBarModule {}

package/src/lib/searchbox/searchbox.component.html

@@ -0,0 +1,25 @@
+<div class="ax form-item" [class.disabled]="disabled" [attr.id]="uid">
+    <div class="ax items-wrapper">
+        <ng-content select="[start]">
+        </ng-content>
+    </div>
+    <div class="content" #content>
+        <div class="ax input form-control {{size}}" [class.disabled]="disabled" [class.readonly]="readonly"
+            [class.icon]="icon">
+            <input #input type="text" class="ax {{size}}" [(ngModel)]="value"
+                (input)="onSearchChanged($event.target.value)" [placeholder]="placeholder" [readonly]="readonly"
+                [disabled]="disabled" [ngClass]="setTextAlign()" [class.clear]="value && allowClear"
+                (focus)="handleInputFocus($event)" (blur)="handleInputBlur($event)" (keyup)="handleKeyEvent($event)"
+                (keydown)="handleKeyEvent($event)">
+            <i class="{{icon}}" *ngIf="icon"></i>
+        </div>
+    </div>
+    <div class="ax items-wrapper">
+        <ax-button [size]="size" *ngIf="value && allowClear" icon="far fa-times" type="danger blank" (click)="clear()"  [tabIndex]="-1">
+        </ax-button>
+        <ax-button [size]="size" type="light blank" icon="far fa-search" end (click)="click($event)"  [tabIndex]="-1">
+        </ax-button>
+        <ng-content select="[end]">
+        </ng-content>
+    </div>
+</div>

package/src/lib/searchbox/searchbox.component.ts

@@ -0,0 +1,85 @@
+import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectorRef, ElementRef, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { Observable } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { AXBaseTextComponent } from '../base/element.class';
+import { AXBaseEvent, AXValueEvent } from '../base/events.class';
+
+
+@Component({
+  selector: 'ax-search-box',
+  templateUrl: './searchbox.component.html',
+  host: { style:'width: 100%' },
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AXSearchBoxComponent extends AXBaseTextComponent {
+
+  @Output()
+  public textChanged: EventEmitter<AXValueEvent<any>> = new EventEmitter<AXValueEvent<any>>();
+  @Output()
+  onButtonClick: EventEmitter<AXValueEvent<any>> = new EventEmitter<AXValueEvent<any>>();
+
+  @Input()
+  placeholder: string = 'جستجو ...';
+
+  constructor(protected cdr: ChangeDetectorRef, ref: ElementRef) {
+    super(cdr, ref);
+  }
+
+  private _text: string;
+  @Input()
+  public get text(): string {
+    return this._text;
+  }
+  public set text(v: string) {
+    if (v !== this._text) {
+      const old = this._text;
+      this._text = v;
+      this.textChanged.emit({
+        component: this,
+        value: v,
+        oldValue: old
+      });
+    }
+  }
+
+  ngOnInit() {
+    this.value = '';
+    this.text = '';
+  }
+
+  onSearchChanged(text: string) {
+    if (!this.searchChangeObserver) {
+      Observable.create(observer => {
+
+        this.searchChangeObserver = observer;
+      })
+        .pipe(debounceTime(this.delay))
+        .pipe(distinctUntilChanged())
+        .subscribe(c => {
+          this.text = c;
+          this.value = c;
+        });
+    }
+
+    this.searchChangeObserver.next(text);
+  }
+
+  @Input()
+  delay: number = 500;
+
+  private searchChangeObserver: any;
+
+  handleKeyEvent(e: KeyboardEvent) {
+    //  this.searchChangeObserver.next(this.text);
+    this.onkey.emit(e);
+  }
+
+  click(e: MouseEvent) {
+    this.onButtonClick.emit({
+      component: this,
+      htmlElement: this.ref.nativeElement,
+      value: this.text
+    });
+    // this.searchChangeObserver.next(this.text);
+  }
+}

package/src/lib/searchbox/searchbox.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXSearchBoxComponent } from './searchbox.component';
+import { AXTextBoxModule } from '../textbox/textbox.module';
+import { AXButtonModule } from '../button/button.module';
+import { AXFormGroupModule } from '../form-group/form-group.module';
+import { AXTranslatorModule } from '@acorex/core';
+import { FormsModule } from '@angular/forms';
+
+
+@NgModule({
+  declarations: [AXSearchBoxComponent],
+  imports: [CommonModule, AXTextBoxModule, AXButtonModule, AXFormGroupModule, AXTranslatorModule, FormsModule],
+  exports: [AXSearchBoxComponent],
+  providers: []
+})
+export class AXSearchBoxModule { }