ngx-axis-appforge 0.0.0

package/core/base/base-menu.ts

@@ -0,0 +1,22 @@
+import { Directive, inject, ViewChild } from '@angular/core';
+import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
+import { AXIS_DESIGN_OPTIONS_NODE_FOR_MENU } from '../share/tokens';
+import { OptionsNode } from '../models/options-node';
+
+@Directive()
+export abstract class BaseMenu {
+
+    private readonly contextMenuService: NzContextMenuService = inject(NzContextMenuService);
+    readonly optionsNodes: { current: OptionsNode, parent?: OptionsNode } = inject(AXIS_DESIGN_OPTIONS_NODE_FOR_MENU);
+
+    @ViewChild("menu", { static: true })
+    menu!: NzDropdownMenuComponent;
+
+    onChange: any;
+
+    contextMenu(e: MouseEvent): void {
+        e.preventDefault();
+        e.stopPropagation();
+        this.contextMenuService.create(e, this.menu);
+    }
+}

package/core/base/base.ts

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

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

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

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

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

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