@acorex/components 6.5.28 → 6.5.29

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

@@ -1,20 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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

@@ -1,178 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,68 +0,0 @@
-<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

@@ -1,122 +0,0 @@
-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 });
-    });
-  }
-}