@acorex/components 4.1.6 → 4.2.0

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

@@ -0,0 +1,181 @@
+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() {
+        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;
+}
+
+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,97 @@
+import { NgModule } from '@angular/core';
+import { AXTextPropertyEditorModule } from './editors/text-editor/text.module';
+import { AXPropertyEditorRendererDirective } from './property-editor-renderer.directive';
+import { RouterModule } from '@angular/router';
+import { AXTextPropertyEditorComponent } from './editors/text-editor/text.editor';
+import { AXNumberBoxPropertyEditorComponent } from './editors/number-editor/number.editor';
+import { AXNumberBoxPropertyEditorModule } from './editors/number-editor/number.module';
+import { AXSelectBoxPropertyEditorComponent } from './editors/selectbox-editor/selectbox.editor';
+import { AXSelectBoxPropertyEditorModule } from './editors/selectbox-editor/selectbox.module';
+import { AXRangePropertyEditorModule } from './editors/range-editor/range.module';
+import { AXRangePropertyEditorComponent } from './editors/range-editor/range.editor';
+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 { AXSwitchPropertyEditorModule } from './editors/switch-editor/number.module';
+import { AXSwitchPropertyEditorComponent } from './editors/switch-editor/number.editor';
+import { AXDatePropertyEditorModule } from './editors/date-editor/date.module';
+import { AXDatePropertyEditorComponent } from './editors/date-editor/date.editor';
+import { AXTimePropertyEditorModule } from './editors/time-editor/time.module';
+import { AXTimePropertyEditorComponent } from './editors/time-editor/time.editor';
+import { AXTextareaPropertyEditorComponent } from './editors/textarea-editor/textarea.editor';
+import { AXTextareaPropertyEditorModule } from './editors/textarea-editor/textarea.module';
+
+
+const WDIGET_MODULES = [
+    AXNumberBoxPropertyEditorModule,
+    AXTextPropertyEditorModule,
+    AXSelectBoxPropertyEditorModule,
+    AXRangePropertyEditorModule,
+    AXColorPropertyEditorModule,
+    AXConditionalColorPropertyEditorModule,
+    AXColumnPropertyEditorModule,
+    AXSwitchPropertyEditorModule,
+    AXDatePropertyEditorModule,
+    AXTimePropertyEditorModule,
+    AXTimePropertyEditorModule,
+    AXTextareaPropertyEditorModule
+
+];
+
+@NgModule({
+    imports: [
+        WDIGET_MODULES,
+        RouterModule.forChild([
+            {
+                component: AXTextPropertyEditorComponent,
+                path: 'ax/editors/text'
+            },
+            {
+                component: AXTextareaPropertyEditorComponent,
+                path: 'ax/editors/textarea'
+            },
+            {
+                component: AXSelectBoxPropertyEditorComponent,
+                path: 'ax/editors/select'
+            },
+            {
+                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 });
+    });
+  }
+}