ngx-axis-appforge 0.0.2 → 0.0.3

package/core/base/base.ts

@@ -1,143 +0,0 @@
-import { AfterViewInit, Directive, HostBinding, inject, Injector, isSignal, OnDestroy, WritableSignal } from "@angular/core";
-import { merge, Observable, of, Subscription } from "rxjs";
-import { ScopeDirective } from "../directives/scope";
-import { EventsHandlerService } from "../share/events-handler.service";
-import { BaseOptions } from "../models/base.options";
-import { EventHandlerOptions } from "../models/event.options";
-import { TriggeEventsOptions } from "../models/trigge-events.options";
-import { loadScripts } from "../utils/scripts-loader";
-
-@Directive()
-export abstract class Base<T extends BaseOptions> implements OnDestroy, AfterViewInit {
-
-    onAfterViewInit?: Function;
-    injector = inject(Injector);
-    isDesign = false;
-    protected options!: T;
-    private eventsService = inject(EventsHandlerService)
-    private scope: ScopeDirective | null = inject(ScopeDirective, { optional: true });
-    private _sub: { [tag: string]: Subscription[] } = { "default": [] };
-
-    @HostBinding('style')
-    get style() {
-        return this.options.style()
-    }
-
-    ngAfterViewInit(): void {
-        this.onAfterViewInit?.();
-    }
-
-    async preloadImports(optionsConfig: any): Promise<void> {
-        const imports = new Set<string>();
-        Object.entries(optionsConfig).forEach(([key, value]) => {
-            if (key.startsWith("$")) {
-                ((value as any).imports as any[]).forEach(i => imports.add(i));
-            }
-        });
-        await Promise.all(Array.from(imports.values()).map(i => loadScripts(i)));
-    }
-
-    bindWithConfig(optionsConfig: any, config?: { options?: any, snapshot?: boolean, tag?: string, tempDataSource?: any }): void {
-        let options = config?.options ?? this.options;
-        let snapshot = config?.snapshot ?? false;
-        if (!snapshot) {
-            this.unsubscribe([options?.tag]);
-        }
-        if (this.scope && !snapshot) {
-            this.addAllSubscribe(this.scope.bindOptions(optionsConfig, options!, config?.tempDataSource), options?.tag ?? "bindWithConfig");
-        } else {
-            if (this.scope && snapshot) {
-                optionsConfig = this.scope.snapshotOptions(optionsConfig, config?.tempDataSource);
-            }
-            for (const en of Object.entries(options!)) {
-                const value = optionsConfig[en[0]];
-                if (value !== undefined) {
-                    if (isSignal(en[1])) {
-                        (en[1] as WritableSignal<any>).set(value);
-                    } else {
-                        (options as any)[en[0]] = value;
-                    }
-                }
-            }
-        }
-    }
-
-    unsubscribeAll() {
-        Object.values(this._sub).forEach(srr => srr.forEach(s => s.unsubscribe()));
-        this._sub = { "default": [] };
-    }
-
-    unsubscribe(tags: string[]) {
-        Object.keys(this._sub)
-            .filter(tag => tags.includes(tag))
-            .forEach(tag => {
-                this._sub[tag].forEach(s => s.unsubscribe());
-                delete this._sub[tag];
-            });
-    }
-
-    addSubscribe(sub: Subscription, tag: string = "default") {
-        if (!this._sub[tag]) {
-            this._sub[tag] = [];
-        }
-        this._sub[tag].push(sub);
-    }
-
-    addAllSubscribe(subs: Subscription[], tag: string = "default") {
-        if (!this._sub[tag]) {
-            this._sub[tag] = [];
-        }
-        this._sub[tag] = this._sub[tag].concat(subs);
-    }
-
-    onEvents?(e: EventHandlerOptions<any>): Observable<boolean> | undefined;
-
-    hasEventHandler(trigger: string, triggeEvents?: TriggeEventsOptions): boolean {
-        const te = triggeEvents ?? this.options.triggeEvents();
-        return !!te?.[trigger]?.length;
-    }
-
-    triggeEvents(trigger: string, tempDataSource?: any, triggeEvents?: TriggeEventsOptions, scope?: ScopeDirective): Observable<boolean> {
-        scope ??= this.scope ?? undefined;
-        const te = triggeEvents ?? this.options.triggeEvents();
-        if (te && te[trigger]) {
-            return merge(...te[trigger].filter(e => !scope?.snapshotField(e, "disabled", tempDataSource)).map(e => {
-                if (scope) {
-                    e = scope.snapshotOptions(e, tempDataSource);
-                }
-                e.tempDataSource = tempDataSource;
-                return this.triggeEvent(e, scope);
-            }));
-        }
-        return of(true);
-    }
-
-    triggeEvent(e: EventHandlerOptions<unknown>, scope?: ScopeDirective): Observable<boolean> {
-        scope ??= this.scope ?? undefined;
-        console.log("triggeEvent", e);
-        e.ref = this;
-        let obs: Observable<boolean> | undefined;
-        switch (e.target) {
-            case "component":
-                if (e.id) {
-                    obs = (scope)?.findInstance(e.id)?.onEvents?.(e);
-                }
-                break;
-            case "service":
-                obs = this.eventsService.onEvents(e);
-                break;
-            case "scope":
-                obs = scope?.onEvents(e);
-                break;
-        }
-        return obs ?? of(true);
-    }
-
-    getScope(): ScopeDirective | null {
-        return this.scope;
-    }
-
-    ngOnDestroy(): void {
-        this.unsubscribeAll();
-    }
-}

package/core/base/design-builder.ts

@@ -1,8 +0,0 @@
-import { ComponentRef } from "@angular/core";
-import { ScopeDirective } from "../directives/scope";
-
-export class DesignBuilder {
-
-    constructor(public buildElement: (ref: ComponentRef<any>, options: any) => void, public buildScope: (scope: ScopeDirective) => void) { }
-
-}

package/core/base/funfield-base.ts

@@ -1,106 +0,0 @@
-import { inject } from "@angular/core";
-import { FormBuilder, UntypedFormGroup } from "@angular/forms";
-import { FunFieldValue } from "../share/fun-field/fun-field";
-import { copy } from "../utils/object.utils";
-import { FunFieldOptions } from "../models/fun-field.options";
-import { updateAndValidAll } from "../utils/form.util";
-
-export abstract class FunFieldBase {
-
-    private orivalue: any;
-    protected readonly fb = inject(FormBuilder);
-    abstract fg: UntypedFormGroup;
-    protected funFields: FunFieldOptions = {};
-
-    reset(value?: any) {
-        this.orivalue = value;
-        this.fg.patchValue(this.buildFunField(value), { emitEvent: false });
-    }
-
-    getValue(): any {
-        return this.recoverFunField(this.fg.value);
-    }
-
-    valid(): boolean {
-        return updateAndValidAll(this.fg);
-    }
-
-    buildFunField(obj: any, funFields?: FunFieldOptions): any {
-        funFields ??= this.funFields;
-        const cloneObj = obj ? copy(obj) : {};
-        if (funFields) {
-            Object.keys(funFields).forEach(f => {
-                let value;
-                if (funFields[f].child) {
-                    if (Array.isArray(cloneObj[f])) {
-                        value = cloneObj[f].map(item => this.buildFunField(item, funFields[f].child));
-                    } else {
-                        value = this.buildFunField(cloneObj[f], funFields[f].child);
-                    }
-                } else {
-                    value = {
-                        funMode: cloneObj.hasOwnProperty(`$${f}`),
-                        originValue: undefined,
-                        fnValue: {
-                            fn: "return undefined;"
-                        }
-                    };
-                    if (value.funMode) {
-                        value.fnValue = cloneObj[`$${f}`];
-                        if (typeof (cloneObj[`$${f}`]) == "string") {
-                            value.fnValue = {
-                                fn: cloneObj[`$${f}`]
-                            }
-                        }
-                        delete cloneObj[`$${f}`];
-                    } else {
-                        if (cloneObj[f] !== undefined) {
-                            value.originValue = cloneObj[f];
-                        } else {
-                            value.originValue = funFields[f].defaultValue;
-                        }
-                        value.fnValue = {
-                            fn: `return ${JSON.stringify(value.originValue)}`
-                        };
-                    }
-                }
-                cloneObj[f] = value;
-            });
-        }
-        return cloneObj;
-    }
-
-    recoverFunField(obj: any, funFields?: FunFieldOptions, oriObj?: any) {
-        funFields ??= this.funFields;
-        oriObj ??= this.orivalue ?? {};
-        const cloneObj = obj ? copy(obj) : {};
-        const cloneOriObj = copy(oriObj);
-        if (obj && funFields) {
-            Object.keys(funFields).forEach(k => {
-                const f: FunFieldValue = cloneObj[k];
-                if (f) {
-                    if (funFields[k].child) {
-                        if (Array.isArray(cloneObj[k])) {
-                            cloneObj[k] = cloneObj[k].map((item, i) => this.recoverFunField(item, funFields[k].child, cloneOriObj[k][i]));
-                        } else {
-                            cloneObj[k] = this.recoverFunField(cloneObj[k], funFields[k].child, cloneOriObj[k] ?? {});
-                        }
-                        delete cloneObj[`$${k}`];
-                    } else {
-                        if (f.funMode) {
-                            cloneObj[`$${k}`] = f.fnValue;
-                            delete cloneObj[k];
-                        } else {
-                            cloneObj[k] = f.originValue;
-                            delete cloneObj[`$${k}`];
-                        }
-                    }
-                    delete cloneOriObj[k];
-                    delete cloneOriObj[`$${k}`];
-                }
-            });
-        }
-        return Object.assign({}, cloneOriObj, cloneObj)
-    }
-
-}

package/core/base/funfield-value-base.ts

@@ -1,53 +0,0 @@
-import { Directive, model, OnDestroy, OnInit } from "@angular/core";
-import { ControlValueAccessor } from "@angular/forms";
-import { Subscription } from "rxjs";
-import { FunFieldBase } from "./funfield-base";
-import { updateAndValidAll } from "../utils/form.util";
-
-@Directive()
-export abstract class FunFieldValueBase extends FunFieldBase implements OnInit, OnDestroy, ControlValueAccessor {
-
-    public onChange: any;
-    protected readonly value = model<any>();
-    protected readonly formValue = model<any>();
-    private sub!: Subscription;
-    protected sendInitValue = false;
-
-    writeValue(value: any): void {
-        this.value.set(value);
-        this.reset(value);
-    }
-
-    registerOnChange(fn: any): void {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn: any): void {
-    }
-
-    override reset(value?: any): void {
-        super.reset(value);
-        this.formValue.set(this.fg.value);
-    }
-
-    ngOnInit(): void {
-        this.formValue.set(this.fg.value);
-        if (this.sendInitValue) {
-            this.value.set(this.recoverFunField(this.fg.value));
-            this.onChange?.(this.value());
-        }
-        this.sub = this.fg.valueChanges.subscribe(v => {
-            this.formValue.set(v);
-            if (updateAndValidAll(this.fg)) {
-                this.value.set(this.recoverFunField(v));
-                this.onChange?.(this.value());
-            } else {
-                console.log("invalid", v)
-            }
-        });
-    }
-
-    ngOnDestroy(): void {
-        this.sub.unsubscribe();
-    }
-
-}

package/core/base/value-access.ts

@@ -1,70 +0,0 @@
-import { ControlValueAccessor } from "@angular/forms";
-import { Base } from "./base";
-import { Directive, effect, inject, model } from "@angular/core";
-import { Observable, of } from "rxjs";
-import { EventHandlerOptions } from "../models/event.options";
-import { ValueAccessOptions } from "../models/value-access.options";
-import { AXIS_FORMITEM_REGISTE_VALUE_ACCESS_TOKEN } from "../share/tokens";
-import { RegisteValueAccessOptions } from "../models/form-registe.options";
-
-@Directive()
-export abstract class ValueAccess<T extends ValueAccessOptions> extends Base<T> implements ControlValueAccessor {
-
-    constructor() {
-        super();
-        effect(() => {
-            if (this.options.initValue() !== undefined) {
-                this.setInitValue(this.options.initValue());
-            }
-        })
-    }
-
-    protected readonly value = model<any>(undefined);
-    private readonly registe = inject(AXIS_FORMITEM_REGISTE_VALUE_ACCESS_TOKEN, { optional: true });
-
-    setInitValue(value: any) {
-        this.registValueAccess({
-            initValue: value,
-        });
-        this.value.set(value);
-        if (value !== undefined && this.options.emitInitEvent()) {
-            this.triggeEvents("valueChange", { value: value });
-        }
-    }
-
-    onChange?: (value: any) => void;
-    onTouched?: (value: any) => {};
-    writeValue(value: any): void {
-        this.value.set(value);
-        if (value !== undefined) {
-            this.triggeEvents("valueChange", { value: value });
-        }
-    }
-    registerOnChange(fn: any): void {
-        this.onChange = (value) => {
-            this.triggeEvents("valueChange", { value: value });
-            fn?.(value);
-        };
-    }
-    registerOnTouched(fn: any): void {
-        this.onTouched = fn;
-    }
-
-    override onEvents(e: EventHandlerOptions<any>): Observable<boolean> | undefined {
-        const obs = super.onEvents?.(e);
-        if (obs) {
-            return obs;
-        }
-        switch (e.name) {
-            case "setValue":
-                this.writeValue(e.data?.data);
-                return of(true);
-        }
-        return undefined;
-    }
-
-    protected registValueAccess(opt: RegisteValueAccessOptions): void {
-        this.registe?.(opt);
-    }
-
-}

package/core/directives/dynamic.ts

@@ -1,216 +0,0 @@
-import { Directive, effect, forwardRef, input, OnDestroy, Type, ViewContainerRef, inject, ComponentRef, Injector } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ScopeDirective } from './scope';
-import { Observable, Subscription } from 'rxjs';
-import { Base } from '../base/base';
-import { ValueAccess } from '../base/value-access';
-import { BaseOptions } from '../models/base.options';
-import { ValueAccessOptions } from '../models/value-access.options';
-import { AXIS_COMPONENTS_LOADER_TOKEN, AXIS_CURRENT_USER_PERMISSIONS_TOKEN, AXIS_FORM_REGISTE_CONTROL_TOKEN, AXIS_FORMITEM_REGISTE_VALUE_ACCESS_TOKEN } from '../share/tokens';
-import { DesignBuilder } from '../base/design-builder';
-import { EventHandlerOptions } from '../models/event.options';
-
-const DynamicComponentsMap = new Map<string, Type<any>>();
-
-@Directive({
-  selector: '[axisDynamic]',
-  exportAs: 'axisDynamic',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => DynamicDirective),
-      multi: true
-    },
-  ]
-})
-export class DynamicDirective implements ControlValueAccessor, OnDestroy {
-
-  readonly axisDynamic = input.required<any>();
-  readonly standalone = input(false);
-  readonly isDesign = input(false);
-
-  private component?: string;
-  private sub?: Subscription;
-  private id?: string;
-  private readonly injector = inject(Injector);
-  private _designBuilder = inject(DesignBuilder, { optional: true });
-  private loader = inject(AXIS_COMPONENTS_LOADER_TOKEN);
-  readonly currentUserPermissions = inject(AXIS_CURRENT_USER_PERMISSIONS_TOKEN, { optional: true });
-  private container = inject(ViewContainerRef);
-  private _scope = inject(ScopeDirective, { optional: true });
-  private ref?: ComponentRef<Base<BaseOptions>>;
-
-  private get scope(): ScopeDirective | null {
-    return this.standalone() ? null : this._scope;
-  }
-
-  private get designBuilder(): DesignBuilder | null {
-    return !this.standalone() || this.isDesign() ? this._designBuilder : null;
-  }
-
-  private get valueInstance(): ValueAccess<ValueAccessOptions> | undefined {
-    if (this.ref?.instance && this.ref.instance instanceof ValueAccess) {
-      return this.ref.instance;
-    }
-    return undefined;
-  }
-
-  onChange?: (value: any) => {};
-  onTouched?: (value: any) => {};
-  triggeEvent?: (e: EventHandlerOptions<any>) => Observable<boolean>;
-  onEvents?: (e: EventHandlerOptions<any>) => Observable<boolean> | undefined;
-  value: any;
-
-  constructor() {
-    effect(() => {
-      if (!this.axisDynamic()?.component) {
-        this.destoryInstance();
-        return;
-      }
-      this.sub?.unsubscribe();
-      if (!this.hasPermission() && !this.designBuilder) {
-        return;
-      }
-      let inuse = this.axisDynamic().inuse;
-      if (this.scope) {
-        const io = this.scope.dynamicField(this.axisDynamic(), "inuse");
-        if (io.init !== undefined) {
-          inuse = io.init;
-        }
-        if (io.obs) {
-          this.sub = io.obs.subscribe(inuse => {
-            if (inuse) {
-              if (this.id != this.axisDynamic().id) {
-                if (this.id) {
-                  this.scope!.unRegistInstance(this.id);
-                }
-                this.id = this.axisDynamic().id;
-              }
-              this.render();
-            } else {
-              this.destoryInstance();
-            }
-          });
-        }
-      }
-      if (inuse) {
-        if (this.id != this.axisDynamic().id) {
-          this.id = this.axisDynamic().id;
-        }
-        this.render();
-      } else {
-        this.destoryInstance();
-      }
-    })
-  }
-
-  private hasPermission(): boolean {
-    const { requiredPermissions } = this.axisDynamic();
-    if (!requiredPermissions?.length) {
-      return true;
-    }
-    return (requiredPermissions as string[]).every(permission => this.currentUserPermissions?.includes(permission));
-  }
-
-  private async render() {
-    if (this.axisDynamic()?.component && (!this.component || this.component != this.axisDynamic().component)) {
-      this.component = this.axisDynamic().component;
-      let componentType: Type<any> | undefined;
-      if (DynamicComponentsMap.has(this.component!)) {
-        componentType = DynamicComponentsMap.get(this.component!);
-      } else {
-        try {
-          componentType = await this.loader.loadComponent(this.component!);
-          DynamicComponentsMap.set(this.component!, componentType!);
-        } catch (error) {
-          console.error(error);
-        }
-      }
-      await this.scope?.preloadImports(this.axisDynamic());
-      this.container.clear();
-      this.ref = this.container.createComponent<Base<BaseOptions>>(componentType!, { injector: this.buildInjector() });
-      this.onEvents = this.ref.instance.onEvents?.bind(this.ref.instance);
-      this.triggeEvent = this.ref.instance.triggeEvent?.bind(this.ref.instance);
-      this.scope?.registInstance(this.axisDynamic().id, this.ref.instance)
-      this.ref.instance?.bindWithConfig(this.axisDynamic());
-      this.valueInstance?.registerOnChange(this.onChange);
-      this.valueInstance?.registerOnTouched(this.onTouched);
-      if (this.value !== undefined) {
-        this.valueInstance?.writeValue(this.value);
-      }
-      if (this.designBuilder) {
-        this.ref.instance.isDesign = true;
-        this.ref.instance!.onAfterViewInit = () => {
-          this.designBuilder!.buildElement(this.ref!, this.axisDynamic());
-        }
-      }
-    } else {
-      this.ref?.instance?.bindWithConfig(this.axisDynamic());
-      this.designBuilder?.buildElement(this.ref!, this.axisDynamic());
-    }
-  }
-
-  private buildInjector(): Injector | undefined {
-    if (this.standalone()) {
-      return Injector.create({
-        providers: [
-          {
-            provide: ScopeDirective,
-            useValue: null
-          },
-          {
-            provide: DynamicDirective,
-            useValue: null
-          },
-          {
-            provide: DesignBuilder,
-            useValue: this.isDesign() ? this.designBuilder : null
-          }, {
-            provide: AXIS_FORM_REGISTE_CONTROL_TOKEN,
-            useValue: null
-          }, {
-            provide: AXIS_FORMITEM_REGISTE_VALUE_ACCESS_TOKEN,
-            useValue: null
-          }
-        ],
-        parent: this.injector
-      });
-    }
-    return this.injector;
-  }
-
-  forceRender(): void {
-    this.component = undefined;
-    this.id = undefined;
-    this.render();
-  }
-
-  writeValue(value: any): void {
-    this.valueInstance?.writeValue(value);
-    this.value = value;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-    this.valueInstance?.registerOnChange(fn);
-  }
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-    this.valueInstance?.registerOnTouched(fn);
-  }
-
-  destoryInstance() {
-    if (this.id) {
-      this.scope?.unRegistInstance(this.id);
-      this.id = undefined;
-    }
-    this.component = undefined;
-    this.container.clear();
-  }
-
-  ngOnDestroy(): void {
-    this.sub?.unsubscribe();
-    this.destoryInstance();
-  }
-
-}