@acorex/components 5.1.2 → 5.1.6

package/src/lib/property-editor/editors/time-editor/time.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AXValidationModule } from '../../../validation/validation.module';
+import { AXTimePickerModule } from '../../../time-picker/time-picker.module';
+import { AXTimePropertyEditorComponent } from './time.editor';
+
+
+
+
+@NgModule({
+    declarations: [AXTimePropertyEditorComponent],
+    imports: [CommonModule, FormsModule, AXTimePickerModule, AXValidationModule],
+    exports: [AXTimePropertyEditorComponent],
+    providers: []
+})
+export class AXTimePropertyEditorModule {
+    constructor() {
+    }
+}

package/src/lib/property-editor/property-editor-renderer.directive.ts

@@ -0,0 +1,165 @@
+import { Directive, ViewContainerRef, ComponentFactoryResolver, Input, Output, EventEmitter, KeyValueDiffer, KeyValueDiffers } from '@angular/core';
+import { AXProperyEditorComponent, AXProperyEditorValueChangeEvent, AXPropertyConfig } from './property-editor.class';
+import { AXEventService, AXObjectUtil, AXRenderService, getPropByPath, setPropByPath } from '@acorex/core';
+import { Subscription } from 'rxjs';
+import { AXValidationFormComponent } from '../validation/validation-form.component';
+
+@Directive({
+  selector: '[ax-property-editor-renderer]'
+})
+export class AXPropertyEditorRendererDirective {
+  private instance: AXProperyEditorComponent<any>;
+
+  @Input()
+  property: AXPropertyConfig;
+
+  @Input()
+  validationForm: AXValidationFormComponent;
+
+  private _context: any = {};
+  @Input()
+  public get context(): any {
+    return this._context;
+  }
+  public set context(v: any) {
+    this._context = v;
+  }
+
+  @Input()
+  host: any;
+
+  @Input()
+  groupId: any;
+
+  @Output()
+  onValueChange: EventEmitter<AXProperyEditorValueChangeEvent> = new EventEmitter<AXProperyEditorValueChangeEvent>();
+
+  private subscription: Subscription;
+
+  constructor(
+    private target: ViewContainerRef,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private renderService: AXRenderService,
+    private eventService: AXEventService
+  ) {}
+
+  clear() {
+    if (this.instance?.value) {
+      this.instance.value = null;
+    }
+  }
+
+  ngOnInit(): void {
+    this.createComponent();
+  }
+
+  createComponent() {
+    this.renderService.findLoadedComponentByRoute(this.property.property.editorClass).then((c) => {
+      if (c) {
+        const factory = this.componentFactoryResolver.resolveComponentFactory(c.component);
+        const cmpRef = this.target.createComponent(factory);
+        this.instance = cmpRef.instance as AXProperyEditorComponent<any>;
+        this.subscription = this.instance.valueChange.subscribe((value) => {
+          this.property.value = value;
+          this.onValueChange.emit(this.property);
+          if (this.property?.property?.name) {
+            setTimeout(() => {
+              this.eventService.broadcast(`props-${this.groupId}-${this.property.property.name}`, this.property);
+            }, 0);
+          }
+        }) as any;
+        this.watchChanges();
+        this.assignProps();
+        this.instance.value = this.property.value;
+
+        // this.instance.onRenderCompleted.subscribe(() => {
+
+        // });
+
+        if (this.validationForm) {
+          this.instance.validatableComponentRegistered.subscribe((v) => {
+            this.validationForm.addWidget(v);
+          });
+        }
+      }
+    });
+  }
+
+  private watchChanges() {
+    const varsRegx = /((\$\{[a-zA-Z_0-9]+\})+)/gm;
+    const varNameRegx = /[a-zA-Z_0-9]+/gm;
+    const options = this.property.property.editorOptions;
+    if (!options) {
+      return;
+    }
+    for (const p in options) {
+      if (options.hasOwnProperty(p)) {
+        const opt = options[p];
+        const vars = typeof opt === 'string' ? opt?.match(varsRegx) : [];
+        // bind the props
+        if (vars?.length) {
+          vars.forEach((v) => {
+            const path = v.match(varNameRegx)?.length ? v.match(varNameRegx)[0] : null;
+            if (path) {
+              this.eventService.on(`props-${this.groupId}-${path}`, (e: AXPropertyConfig) => {
+                let execCode = opt.slice();
+                const params = {};
+                vars.forEach((vv) => {
+                  const p2 = vv.match(varNameRegx)?.length ? vv.match(varNameRegx)[0] : null;
+                  params[p2] = AXObjectUtil.deepCopy(this.context[p2]) || null;
+                  execCode = execCode.replace(vv, `__params__.${p2}`);
+                });
+
+                const func = new Function('__params__', `try { return ${execCode}} catch(e){  return null;  }`);
+                const val = func(params);
+
+                const keys = p.split('.');
+                const prop = Object.assign({}, this.instance[keys[0]]);
+                if (keys.length > 1) {
+                  this.instance[keys[0]] = setPropByPath(prop, p, val);
+                } else {
+                  setPropByPath(this.instance, p, val);
+                }
+              });
+            }
+          });
+        }
+        // else {
+        //    this.assignProps();
+        // }
+      }
+    }
+  }
+
+  private assignProps() {
+    const options = this.property.property.editorOptions;
+    if (!options) {
+      return;
+    }
+    const varsRegx = /((\$\{[a-zA-Z_0-9]+\})+)/gm;
+    for (const p in options) {
+      if (options.hasOwnProperty(p)) {
+        const opt = options[p];
+        const vars = typeof opt === 'string' ? opt?.match(varsRegx) : [];
+        if (vars?.length) {
+          continue;
+        } else {
+          const val = typeof opt === 'function' ? opt({ data: this.context, host: this.host }, this.property) : opt;
+          if (val instanceof Promise) {
+            val.then((v) => {
+              setPropByPath(this.instance, p, val);
+            });
+          } else {
+            setPropByPath(this.instance, p, val);
+          }
+        }
+      }
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+}

package/src/lib/property-editor/property-editor.class.ts

@@ -0,0 +1,178 @@
+import { Input, Output, EventEmitter, ChangeDetectorRef, Directive } from '@angular/core';
+import { Subject } from 'rxjs';
+import { AXValidatableComponent } from '../base/element.class';
+
+export type AXDataType = 'string' | 'number' | 'date' | 'boolean' | 'object';
+export type AXControlType = 'textbox' | 'numberbox' | 'datePicker' | 'switch' | 'custom';
+
+export interface AXPropertyDef {
+  name: string;
+  title: string;
+  hint?: string;
+  defaultValue?: any;
+  editorClass: any;
+  editorOptions?: any;
+  visible?: boolean | (() => boolean);
+  order?: number;
+  row?: number;
+  col?: number | AXPropertyColDef;
+  filterOptions?: FilterModel;
+  uniqueNumber?: number;
+}
+
+export interface FilterModel {
+  operator?: any;
+  filters?: FiltersModel[];
+  truncateDate?: boolean;
+  joinType?: string;
+  ignoreCase?: boolean;
+  logic?: 'and' | 'or';
+  advance?: boolean;
+}
+
+export interface FiltersModel {
+  name?: string;
+  value?: string;
+  field?: string;
+  filterOptions: FilterModel;
+}
+export interface AXPropertyColDef {
+  lg?: number;
+  md?: number;
+  sm?: number;
+  xs?: number;
+}
+
+export interface AXPropertyEditorDef {
+  title: string;
+  hint?: string;
+  defaultValue?: any;
+  editorClass: any;
+  editorOptions?: any;
+  visible?: boolean | (() => boolean);
+  order?: number;
+}
+
+export interface AXPropertyConfig {
+  property: AXPropertyDef;
+  value: any;
+}
+
+export interface AXProperyEditorValueChangeEvent {
+  property: AXPropertyDef;
+  value: any;
+}
+
+@Directive()
+export abstract class AXProperyEditorComponent<T> {
+  readonly: boolean = false;
+
+  private _initiated: boolean = false;
+  private _valueBound: boolean = false;
+
+  public get initiated(): boolean {
+    return this._initiated && this._valueBound;
+  }
+
+  validatableComponentRegistered: Subject<AXValidatableComponent> = new Subject<AXValidatableComponent>();
+
+  registerForValidationForm(component?: AXValidatableComponent) {
+    this.validatableComponentRegistered.next(component);
+  }
+
+  @Output()
+  valueChange: EventEmitter<T> = new EventEmitter<T>();
+
+  @Output()
+  onRenderCompleted: EventEmitter<void> = new EventEmitter<void>();
+
+  private _value: T;
+  @Input()
+  public get value(): T {
+    return this._value;
+  }
+
+  public set value(v: T) {
+    if (v !== this._value) {
+      this._value = v;
+      this.valueChange.emit(v);
+      this.cdr.detectChanges();
+      //TODO: find better solution
+      setTimeout(() => {
+        this._valueBound = true;
+      }, 100);
+    }
+  }
+
+  constructor(protected cdr: ChangeDetectorRef) {
+    this.onRenderCompleted.subscribe(() => {
+      this._initiated = true;
+    });
+  }
+
+  uid: string;
+
+  handleValueChange(v: T) {
+    this.value = v;
+  }
+}
+
+export class AXPropertyDecorator {
+  cls: any;
+  property: string;
+  options: any;
+
+  constructor(cls: any, property: string, options: any) {
+    this.cls = cls;
+    this.property = property;
+    this.options = options;
+  }
+}
+
+// @dynamic
+export class AXPropertyDecorators {
+  private static REGISTRY = new Array<AXPropertyDecorator>();
+
+  static register(cls: string, property: string, options?: any) {
+    const item = AXPropertyDecorators.REGISTRY.find((c) => c.cls === cls && c.property === property);
+    if (item) {
+      item.options = options;
+    } else {
+      AXPropertyDecorators.REGISTRY.push(new AXPropertyDecorator(cls, property, options));
+    }
+  }
+
+  static has(cls: string, property: string): boolean {
+    return AXPropertyDecorators.REGISTRY.some((c) => c.cls === cls && c.property === property);
+  }
+
+  static get(cls: string, property: string): AXPropertyDecorator {
+    return AXPropertyDecorators.REGISTRY.find((c) => c.cls === cls && c.property === property);
+  }
+
+  static isValid(property: string): boolean {
+    if (property) {
+      return AXPropertyDecorators.REGISTRY.some((c) => c.property === property);
+    }
+    return false;
+  }
+
+  static getProperties(target: any): AXPropertyDecorator[] {
+    const list: AXPropertyDecorator[] = [];
+    const p: any[] = Array<any>();
+    let superClass = Object.getPrototypeOf(target);
+    while (superClass.constructor.name !== 'Object') {
+      p.push(superClass.constructor);
+      superClass = Object.getPrototypeOf(superClass);
+    }
+    list.push(...AXPropertyDecorators.REGISTRY.filter((c) => p.includes(c.cls.constructor)));
+    return list;
+  }
+}
+
+export function propertyEditor(options: AXPropertyEditorDef) {
+  return (target: any, key: string) => {
+    (options as any).name = key;
+    AXPropertyDecorators.register(target, key, options);
+  };
+}

package/src/lib/property-editor/property-editor.module.ts

@@ -0,0 +1,115 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { AXCheckBoxPropertyEditorComponent } from './editors/check-editor/check-editor';
+import { AXCheckPropertyEditorModule } from './editors/check-editor/check.module';
+import { AXColorPropertyEditorComponent } from './editors/color-editor/color.editor';
+import { AXColorPropertyEditorModule } from './editors/color-editor/color.module';
+import { ColumnPropertyEditorComponent } from './editors/column-editor/column.editor';
+import { AXColumnPropertyEditorModule } from './editors/column-editor/column.module';
+import { AXConditionalColorPropertyEditorComponent } from './editors/conditional-color-editor/conditional-color.editor';
+import { AXConditionalColorPropertyEditorModule } from './editors/conditional-color-editor/conditional-color.module';
+import { AXDatePropertyEditorComponent } from './editors/date-editor/date.editor';
+import { AXDatePropertyEditorModule } from './editors/date-editor/date.module';
+import { AXNumberBoxPropertyEditorComponent } from './editors/number-editor/number.editor';
+import { AXNumberBoxPropertyEditorModule } from './editors/number-editor/number.module';
+import { AXRangePropertyEditorComponent } from './editors/range-editor/range.editor';
+import { AXRangePropertyEditorModule } from './editors/range-editor/range.module';
+import { AXSearchBarSelectBoxEditorComponent } from './editors/searchbar-selectbox-editor/searchbar-selectbox-editor';
+import { AXSelectBoxPropertyEditorComponent } from './editors/selectbox-editor/selectbox.editor';
+import { AXSelectBoxPropertyEditorModule } from './editors/selectbox-editor/selectbox.module';
+import { AXSelectionListPropertyEditorComponent } from './editors/selection-editor/selection-editor';
+import { AXSelectionPropertyEditorModule } from './editors/selection-editor/selection.module';
+import { AXSwitchPropertyEditorComponent } from './editors/switch-editor/number.editor';
+import { AXSwitchPropertyEditorModule } from './editors/switch-editor/number.module';
+import { AXTextPropertyEditorComponent } from './editors/text-editor/text.editor';
+import { AXTextPropertyEditorModule } from './editors/text-editor/text.module';
+import { AXTextareaPropertyEditorComponent } from './editors/textarea-editor/textarea.editor';
+import { AXTextareaPropertyEditorModule } from './editors/textarea-editor/textarea.module';
+import { AXTimePropertyEditorComponent } from './editors/time-editor/time.editor';
+import { AXTimePropertyEditorModule } from './editors/time-editor/time.module';
+import { AXPropertyEditorRendererDirective } from './property-editor-renderer.directive';
+
+const WDIGET_MODULES = [
+  AXNumberBoxPropertyEditorModule,
+  AXTextPropertyEditorModule,
+  AXSelectBoxPropertyEditorModule,
+  AXRangePropertyEditorModule,
+  AXColorPropertyEditorModule,
+  AXConditionalColorPropertyEditorModule,
+  AXColumnPropertyEditorModule,
+  AXSwitchPropertyEditorModule,
+  AXDatePropertyEditorModule,
+  AXTimePropertyEditorModule,
+  AXTimePropertyEditorModule,
+  AXTextareaPropertyEditorModule,
+  AXCheckPropertyEditorModule,
+  AXSelectionPropertyEditorModule
+];
+
+@NgModule({
+  imports: [
+    WDIGET_MODULES,
+    RouterModule.forChild([
+      {
+        path: 'ax/editors/selection',
+        component: AXSelectionListPropertyEditorComponent
+      },
+      {
+        component: AXCheckBoxPropertyEditorComponent,
+        path: 'ax/editors/check'
+      },
+      {
+        component: AXTextPropertyEditorComponent,
+        path: 'ax/editors/text'
+      },
+      {
+        component: AXTextareaPropertyEditorComponent,
+        path: 'ax/editors/textarea'
+      },
+      {
+        component: AXSelectBoxPropertyEditorComponent,
+        path: 'ax/editors/select'
+      },
+      {
+        component: AXSearchBarSelectBoxEditorComponent,
+        path: 'ax/editors/selectBox'
+      },
+      {
+        component: AXNumberBoxPropertyEditorComponent,
+        path: 'ax/editors/number'
+      },
+      {
+        component: AXRangePropertyEditorComponent,
+        path: 'ax/editors/range'
+      },
+      {
+        component: AXConditionalColorPropertyEditorComponent,
+        path: 'ax/editors/conditional-color'
+      },
+      {
+        component: AXColorPropertyEditorComponent,
+        path: 'ax/editors/color'
+      },
+      {
+        component: AXSwitchPropertyEditorComponent,
+        path: 'ax/editors/switch'
+      },
+      {
+        component: ColumnPropertyEditorComponent,
+        path: 'ax/editors/column'
+      },
+      {
+        component: AXDatePropertyEditorComponent,
+        path: 'ax/editors/date'
+      },
+      {
+        component: AXTimePropertyEditorComponent,
+        path: 'ax/editors/time'
+      }
+    ])
+  ],
+  exports: [AXPropertyEditorRendererDirective],
+  declarations: [AXPropertyEditorRendererDirective],
+  providers: []
+})
+export class AXProppertyEditorModule {}

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

@@ -0,0 +1,68 @@
+<div class="header">
+    <div class="condition" *ngIf="parent">
+        <div class="text {{parent.condition}}">
+            <span>{{parent.condition }}</span>
+        </div>
+    </div>
+    <div class="handler">
+        <i class="far fa-grip-lines-vertical"></i>
+    </div>
+
+    <div class="detail {{group.condition}}" (click)="changeDetailMode()">
+        <div class="collapsed" *ngIf="collapsed;else expandedTemplate">
+            {{group.queryString}}
+        </div>
+        <ng-template #expandedTemplate>
+            <div class="expanded">
+                <strong>{{group.condition == 'OR' ? 'یکی از' : 'همه' }} <span>شرایط زیر برقرار باشد</span> </strong>
+            </div>
+        </ng-template>
+    </div>
+    <div class="buttons-list">
+        <div class="button remove" *ngIf="parent && mode=='new'" (click)="handleRemoveClick()">
+            <i class="far fa-times ax-danger-color"></i>
+        </div>
+        <div class="button edit" *ngIf="mode=='new'" (click)="handleChangeClick()">
+            <i class="far fa-retweet ax-danger-color"></i>
+        </div>
+    </div>
+</div>
+<div class="rules" *ngIf="!collapsed">
+    <!-- <ax-validation-form #form> -->
+
+    <div *ngFor="let item of group.items" class="group-item">
+        <ng-container *ngIf="item.condition;else ruleTemplate">
+            <ax-query-group (groupRuleChanged)="ruleChanged($event)" [mode]="mode" [group]="item" [fields]="fields"
+                [parent]="group">
+            </ax-query-group>
+        </ng-container>
+        <ng-template #ruleTemplate>
+            <ax-query-rule #queryRule (ruleChanged)="ruleChanged($event)" [mode]="mode"
+                (onRuleDelete)="ruleDelete($event)" [rule]="item" [fields]="fields" [parent]="group">
+            </ax-query-rule>
+        </ng-template>
+    </div>
+    <!-- </ax-validation-form> -->
+    <div class="group-item" *ngIf="mode=='new'">
+        <div class="ax-query-rule">
+            <div class="condition">
+            </div>
+            <div class="handler">
+                <i class="far fa-grip-lines-vertical"></i>
+            </div>
+            <div class="add-rule" (click)="addRule()" *ngIf="mode=='new'">
+                <i class="far fa-plus"></i>&nbsp;&nbsp;<span>شرط</span>
+            </div>
+            <div class="add-group" (click)="addGroup()" *ngIf="!showGroupCondition && mode=='new'">
+                <i class="far fa-plus"></i>&nbsp;&nbsp;<span>گروه</span>
+            </div>
+            <div *ngIf="showGroupCondition && mode=='new'" class="add-condition OR" (click)="addGroupOR()">
+                <i class="far fa-plus"></i>&nbsp;&nbsp;<span>OR</span>
+            </div>
+            <div *ngIf="showGroupCondition && mode=='new'" class="add-condition AND" (click)="addGroupAND()">
+                <i class="far fa-plus"></i>&nbsp;&nbsp;<span>AND</span>
+            </div>
+
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,122 @@
+import { Component, OnInit, Input, ViewEncapsulation, Output, EventEmitter, ViewChild } from '@angular/core';
+import { AXValidationFormComponent } from '../validation/validation-form.component';
+import { AXQueryBuilderRuleComponent } from './query-builder-rule.component';
+import { AXQueryBuilderGroup, AXQueryBuilderGroupEvent, AXQueryBuilderRuleEvent, AXQueryBuilderRule } from './query-builder.class';
+import { AXQueryBuilderService } from './query-builder.service';
+@Component({
+  selector: 'ax-query-group',
+  templateUrl: 'query-builder-group.component.html',
+  host: { class: 'ax ax-query-group' },
+  encapsulation: ViewEncapsulation.None
+})
+export class AXQueryBuilderGroupComponent implements OnInit {
+  @ViewChild('queryRule') queryRule: AXQueryBuilderRuleComponent;
+  @ViewChild(AXValidationFormComponent) form: AXValidationFormComponent;
+  @Input()
+  group: AXQueryBuilderGroup;
+
+  collapsed: boolean = false;
+
+  @Input()
+  parent: AXQueryBuilderGroup;
+
+  @Input()
+  fields: any[] = [];
+
+  @Input()
+  mode: 'new' | 'edit' = 'new';
+
+  //ruleIsEditing: boolean = true;
+
+  @Output()
+  groupRuleChanged: EventEmitter<AXQueryBuilderGroupEvent> = new EventEmitter<AXQueryBuilderGroupEvent>();
+
+  showGroupCondition: boolean = false;
+
+  constructor(private qs: AXQueryBuilderService) {}
+
+  ngOnInit() {}
+
+  ruleDelete(e: AXQueryBuilderRuleEvent) {
+    this.group.items = this.group.items.filter((c) => c !== e.items);
+    this.ruleChanged(null);
+  }
+  handleRemoveClick() {
+    this.parent.items = this.parent.items.filter((c) => c !== this.group);
+    this.groupRuleChanged.emit({ groups: this.group, component: this });
+  }
+  saveRule() {
+    // this.form.validate().then(c => {
+    // });
+    // return this.queryRule.saveRule();
+  }
+  addRule() {
+    const item: AXQueryBuilderRule = new AXQueryBuilderRule();
+    if (this.fields.length > 0) {
+      //  item.caption = this.fields[0].caption;
+      // item.dataType = this.fields[0].dataType;
+      //  item.dataField = this.fields[0].dataField;
+    } else {
+    }
+    item.operator = 'equal';
+
+    if (item.dataType === 'string') {
+      item.value = '';
+    }
+    if (item.dataType === 'number') {
+      item.value = 0;
+    }
+
+    if (this.group.items == undefined) {
+      this.group.items = [];
+    }
+    this.group.items.push(item);
+    this.ruleChanged(null);
+  }
+  addGroup() {
+    this.showGroupCondition = true;
+  }
+  addGroupOR() {
+    this.makeGroup('OR');
+  }
+  addGroupAND() {
+    this.makeGroup('AND');
+  }
+  makeGroup(_condition) {
+    let r: AXQueryBuilderGroup = new AXQueryBuilderGroup();
+    r.condition = _condition;
+    r.items = [];
+    r.queryString = '';
+    if (this.group.items == undefined) {
+      this.group.items = [];
+    }
+    this.group.items.push(r);
+    this.showGroupCondition = false;
+    this.ruleChanged(null);
+  }
+  changeDetailMode() {
+    //if (this.parent) {
+    this.collapsed = !this.collapsed;
+    //  this.ruleIsEditing = false;
+    //}
+  }
+
+  handleChangeClick() {
+    if (this.group.condition == 'OR') {
+      this.group.condition = 'AND';
+    } else {
+      this.group.condition = 'OR';
+    }
+    this.ruleChanged(null);
+  }
+
+  ruleChanged(e) {
+    ;
+    // this.group.queryString = this.qs.getQueryString(this.group, 'simple');
+    this.qs.getQueryStringSimple(this.group).then((c) => {
+      this.group.queryString = c;
+      this.group.queryStringElastic = this.qs.getQueryString(this.group, 'elastic');
+      this.groupRuleChanged.emit({ groups: this.group, component: this });
+    });
+  }
+}