@acorex/components 4.2.0 → 4.2.1

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

@@ -1,181 +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() {
-        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;
-}
-
-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,97 +0,0 @@
-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

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