ngx-axis-appforge 0.0.0

package/core/models/options-node.ts

@@ -0,0 +1,149 @@
+import { Type } from "@angular/core";
+import { FunFieldValueBase } from "../base/funfield-value-base";
+import { BaseMenu } from "../base/base-menu";
+
+export class OptionsNode {
+    constructor(protected config: OptionsNodeConfig) {
+        if (config.parentObj != undefined) {
+            config.rootOptions = undefined;
+        }
+    }
+
+    get id(): string {
+        return this.config.id ?? this.options.id;
+    }
+
+    get parentId(): string | undefined {
+        return this.config.parentId;
+    }
+
+    get scopeId(): string | undefined {
+        return this.config.scopeId;
+    }
+
+    get name(): string | undefined {
+        return this.config.name;
+    }
+
+    get dragType(): string | undefined {
+        return this.config.dragType;
+    }
+
+    get dropType(): string | undefined {
+        return this.config.dropType;
+    }
+
+    get canSetting(): boolean {
+        return this.config.canSetting ?? false;
+    }
+
+    get canDrag(): boolean {
+        return this.config.canDrag ?? false;
+    }
+
+    get childDirection(): "horizontal" | "vertical" {
+        return this.config.childDirection ?? "horizontal";
+    }
+
+    get canDrop(): boolean {
+        return this.config.canDrop ?? false;
+    }
+
+    get dropObj(): any {
+        return this.config.dropObj;
+    }
+
+    get parentObj(): any {
+        return this.config.parentObj;
+    }
+
+    get indexOfParentObj(): number | string | undefined {
+        return this.config.indexOfParentObj;
+    }
+
+    get options(): any {
+        if (this.parentObj != undefined && this.indexOfParentObj != undefined) {
+            return this.parentObj[this.indexOfParentObj];
+        }
+        return this.config.rootOptions;
+    }
+
+    get defaultDropIndex(): number | string | undefined {
+        return this.config.defaultDropIndex;
+    }
+
+    get isRoot(): boolean {
+        return this.config.rootOptions != undefined;
+    }
+
+    get icon(): string | undefined {
+        return this.config.icon;
+    }
+
+    get children(): OptionsNode[] | undefined {
+        return this.config.children;
+    }
+
+    get settingType(): Type<FunFieldValueBase> | undefined {
+        return this.config.settingType;
+    }
+
+    get contextMenu(): Type<BaseMenu> | undefined {
+        return this.config.contextMenu;
+    }
+
+    toElementNode(elements: { element?: HTMLElement, dropElement?: HTMLElement }): ElementNode {
+        return new ElementNode(this.id, elements);
+    }
+
+    updateOptions(options: any): void {
+        if (this.isRoot) {
+            this.config.rootOptions = options;
+        } else {
+            this.parentObj[this.indexOfParentObj!] = options;
+        }
+        if (this.config.updateId) {
+            this.config.id = this.config.updateId(options);
+        }
+    }
+
+    copyWith(config: OptionsNodeConfig): OptionsNode {
+        return new OptionsNode(Object.assign({}, this.config, config));
+    }
+
+    refresh(): void {
+        console.log("refresh", this.id, this.indexOfParentObj, this.parentObj.indexOf(this.options))
+    }
+}
+
+export class ElementNode {
+    constructor(public id: string, elements: { element?: HTMLElement, dropElement?: HTMLElement }) {
+        this.element = elements.element;
+        this.dropElement = elements.dropElement;
+    }
+    element?: HTMLElement;
+    dropElement?: HTMLElement;
+}
+
+interface OptionsNodeConfig {
+    id?: string;
+    updateId?: (newOptions: any) => string;
+    parentId?: string;
+    scopeId?: string;
+    name?: string;
+    canSetting?: boolean;
+    canDrag?: boolean;
+    canDrop?: boolean;
+    childDirection?: "horizontal" | "vertical";
+    dragType?: string;
+    dropType?: string;
+    parentObj?: any;
+    dropObj?: any;
+    indexOfParentObj?: number | string;
+    rootOptions?: any;
+    defaultDropIndex?: number | string;
+    settingType?: Type<FunFieldValueBase>;
+    icon?: string;
+    children?: OptionsNode[];
+    contextMenu?: Type<BaseMenu>;
+}

package/core/models/static-data-source.options.ts

@@ -0,0 +1,4 @@
+export interface StaticDataSourceOptions {
+    name: string;
+    data?: any;
+}

package/core/models/trigge-events.options.ts

@@ -0,0 +1,3 @@
+import { EventHandlerOptions } from './event.options';
+
+export type TriggeEventsOptions = { [trigger: string]: EventHandlerOptions<any>[] };

package/core/models/value-access.options.ts

@@ -0,0 +1,10 @@
+import { signal } from "@angular/core";
+import { BaseOptions } from "./base.options";
+
+export class ValueAccessOptions extends BaseOptions {
+
+    initValue = signal<any>(undefined);
+    emitInitEvent = signal(true);
+    disabled = signal(false);
+    readonly = signal(false);
+}

package/core/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/core/pipes/how-long.pipe.ts

@@ -0,0 +1,69 @@
+import { ChangeDetectorRef, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'axisHowLong', pure: false
+})
+export class HowLongPipe implements PipeTransform {
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  timer?: any;
+
+  lastValue = "";
+
+  date?: Date;
+
+  ngOnDestroy(): void {
+    if (this.timer != undefined) {
+      clearTimeout(this.timer);
+      this.timer = undefined;
+      this.lastValue = "";
+      this.date = undefined;
+    }
+  }
+
+  transform(date?: Date): string | undefined {
+    if (!this.date) {
+      if (date) {
+        this.date = date;
+        let offset = (new Date().getTime() - date.getTime()) / 1000;
+        let sufix = offset > 0 ? "前" : "后";
+        let time = "";
+        offset = Math.floor(Math.abs(offset));
+        let refreshTimer = 0;
+        if (offset < 10) {
+          time = "几秒钟";
+          refreshTimer = 1;
+        } else if (offset < 60) {
+          time = `${offset}秒钟`;
+          refreshTimer = 1;
+        } else if (offset < 3600) {
+          refreshTimer = 60 - (offset % 60);
+          time = `${Math.floor(offset / 60)}分钟`;
+        } else if (offset < 86400) {
+          refreshTimer = 3600 - (offset % 3600);
+          time = `${Math.floor(offset / 3600)}小时`;
+        } else {
+          refreshTimer = 86400 - (offset % 86400);
+          time = `${Math.floor(offset / 86400)}天`;
+        }
+        this.lastValue = `${time}${sufix}`;
+        this.timer = setTimeout(() => {
+          this.ngOnDestroy();
+          this.cdr.markForCheck();
+        }, refreshTimer * 1000);
+      } else {
+        this.lastValue = "";
+      }
+      return this.lastValue;
+    }
+
+    if (date !== this.date) {
+      this.ngOnDestroy();
+      return this.transform(date);
+    }
+
+    return this.lastValue;
+  }
+
+}

package/core/public-api.ts

@@ -0,0 +1,39 @@
+export * from './base/base'
+export * from './base/value-access'
+export * from './base/base-menu'
+export * from './base/funfield-base'
+export * from './base/funfield-value-base'
+export * from './base/design-builder'
+export * from './directives/dynamic'
+export * from './directives/scope'
+export * from './pipes/how-long.pipe'
+export * from './models/base.options'
+export * from './models/value-access.options'
+export * from './models/design-config'
+export * from './models/options-node'
+export * from './models/design-build'
+export * from './models/event-desc'
+export * from './models/design-tree-node'
+export * from './models/data-source.options'
+export * from './models/data.options'
+export * from './models/event.options'
+export * from './models/fun-field.options'
+export * from './models/examples'
+export * from './models/form-registe.options'
+export * from './models/trigge-events.options'
+export * from './models/cmplib'
+export * from './models/event-handler'
+export * from './share/tokens'
+export * from './share/common-menu/common-menu'
+export * from './share/fun-field/fun-field'
+export * from './share/base-design-setting/base-design-setting'
+export * from './share/input-trigger/input-trigger'
+export * from './share/value-design-setting/value-design-setting'
+export * from './share/data-handler/data-handler'
+export * from './share/simple-menu/simple-menu'
+export * from './utils/form-validators'
+export * from './utils/object.utils'
+export * from './utils/components-loader'
+export * from './utils/form.util'
+export * from './utils/code-name.utils'
+export * from './utils/dynamic.util'

package/core/share/api-handler/api-handler.html

@@ -0,0 +1,38 @@
+<form nz-form [formGroup]="fg">
+    <nz-form-item>
+        <nz-form-label nzSpan="6" nzRequired>
+            地址
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="url" [noListen]="noListen()">
+                <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+        <nz-form-label nzSpan="6" nzRequired>
+            请求方式
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="method" [noListen]="noListen()">
+                <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                    <nz-option nzValue="get" nzLabel="GET"></nz-option>
+                    <nz-option nzValue="post" nzLabel="POST"></nz-option>
+                    <nz-option nzValue="put" nzLabel="PUT"></nz-option>
+                    <nz-option nzValue="delete" nzLabel="DELETE"></nz-option>
+                </nz-select>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+        <nz-form-label nzSpan="6">
+            请求数据体
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="body" [noListen]="noListen()">
+                <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}" [standalone]="true"
+                    ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+</form>

package/core/share/api-handler/api-handler.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject, signal } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FunField } from '../fun-field/fun-field';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { DynamicDirective } from '../../directives/dynamic';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { FunFieldValueBase } from '../../base/funfield-value-base';
+import { FormValidators } from '../../utils/form-validators';
+import { FunFieldOptions } from '../../models/fun-field.options';
+import { InputTrigger } from '../input-trigger/input-trigger';
+
+@Component({
+  selector: 'axis-api-handler',
+  imports: [NzFormModule, ReactiveFormsModule, FunField, FormsModule, NzSelectModule, DynamicDirective, NzInputModule, NzSwitchModule, NzRadioModule],
+  templateUrl: './api-handler.html',
+  styleUrl: './api-handler.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ApiHandler),
+      multi: true
+    }
+  ]
+})
+export class ApiHandler extends FunFieldValueBase {
+  readonly noListen = inject(InputTrigger).noListen;
+  override fg: UntypedFormGroup = this.fb.group({
+    url: [undefined, FormValidators.requiredFun],
+    method: [undefined, FormValidators.requiredFun],
+    body: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    url: {
+      defaultValue: "",
+    },
+    method: {
+      defaultValue: "get"
+    },
+    body: {
+      defaultValue: undefined
+    },
+
+  };
+
+  readonly successTipMode = signal(undefined);
+}

package/core/share/array-filter-handler/array-filter-handler.html

@@ -0,0 +1,26 @@
+<form nz-form [formGroup]="fg">
+    <nz-form-item>
+        <nz-form-label nzSpan="6">
+            原数组
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="inputArray" [noListen]="noListen()" #sourceDataFunField>
+                <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}" [standalone]="true"
+                    ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+        <nz-form-label nzSpan="6">
+            过滤对象
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="filterData" [noListen]="noListen()" #filterDataFunField>
+                <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}" [standalone]="true"
+                    ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+    <axis-design-filter-options [sourceDataFields]="sourceDataFields()" [filterDataFields]="filterDataFields()"
+        formControlName="filterOptions"></axis-design-filter-options>
+</form>

package/core/share/array-filter-handler/array-filter-handler.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, ViewChild } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FunField } from '../fun-field/fun-field';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { DynamicDirective } from '../../directives/dynamic';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { FunFieldValueBase } from '../../base/funfield-value-base';
+import { FunFieldOptions } from '../../models/fun-field.options';
+import { FilterOptions } from './input-filter-options/filter-options';
+import { InputTrigger } from '../input-trigger/input-trigger';
+
+@Component({
+  selector: 'axis-array-filter-handler',
+  imports: [NzFormModule, ReactiveFormsModule, FunField, FormsModule, NzSelectModule, DynamicDirective, NzInputModule, NzSwitchModule, NzRadioModule, FilterOptions],
+  templateUrl: './array-filter-handler.html',
+  styleUrl: './array-filter-handler.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ArrayFilterHandler),
+      multi: true
+    }
+  ]
+})
+export class ArrayFilterHandler extends FunFieldValueBase {
+  readonly noListen = inject(InputTrigger).noListen;
+  override fg: UntypedFormGroup = this.fb.group({
+    inputArray: [],
+    filterData: [],
+    filterOptions: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    inputArray: {
+      defaultValue: undefined,
+    },
+    filterData: {
+      defaultValue: undefined,
+    },
+  };
+
+  @ViewChild("sourceDataFunField", { static: true })
+  sourceDataFunField!: FunField;
+  @ViewChild("filterDataFunField", { static: true })
+  filterDataFunField!: FunField;
+
+  readonly sourceDataFields = computed(() => this.buildSourceDataFields())
+  readonly filterDataFields = computed(() => this.buildfilterDataFields())
+
+  private buildSourceDataFields(): string[] {
+    const sourceData = this.sourceDataFunField.computeResult();
+    if (sourceData?.length) {
+      return Object.keys(sourceData[0]);
+    }
+    return [];
+  }
+
+  private buildfilterDataFields(): string[] {
+    return Object.keys(this.filterDataFunField.computeResult() ?? {});
+  }
+}

package/core/share/array-filter-handler/input-filter-options/filter-options.css

@@ -0,0 +1,19 @@
+.item {
+  border: 1px dashed rgba(150, 150, 150, 0.5);
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.desc {
+  font-size: 11px;
+}
+
+.editable-tag {
+  border-style: dashed;
+  cursor: pointer;
+}
+
+nz-tag {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}

package/core/share/array-filter-handler/input-filter-options/filter-options.html

@@ -0,0 +1,57 @@
+<form [formGroup]="fg">
+    <ng-container formArrayName="filters">
+        @for (c of fa.controls; track $index;let index=$index;) {
+        <div class="item" [formGroupName]="index">
+            <div nz-flex nzJustify="space-between">
+                <h4>条件{{index+1}}:</h4>
+                <a nz-button nzType="link" nzSize="small" nzDanger (click)="deleteFilter(index)"><i nz-icon
+                        nzType="delete" nzTheme="outline"></i></a>
+            </div>
+            <div>
+                <span>使用</span>
+                <input nz-input nzVariant="underlined" placeholder="选择字段" style="width: 100px;" nzSize="small"
+                    [nzAutocomplete]="filterDataFieldsAuto" formControlName="field" />
+                <span>字段并通过</span>
+                <nz-select style="width: 103px;" nzVariant="underlined" formControlName="mode" nzSize="small">
+                    <nz-option nzValue="equals" nzLabel="相等"></nz-option>
+                    <nz-option nzValue="startsWith" nzLabel="头部相等"></nz-option>
+                    <nz-option nzValue="endsWith" nzLabel="尾部相等"></nz-option>
+                    <nz-option nzValue="like" nzLabel="模糊匹配"></nz-option>
+                    <nz-option nzValue="equalGreater" nzLabel="大于等于"></nz-option>
+                    <nz-option nzValue="equalLess" nzLabel="小于等于"></nz-option>
+                    <nz-option nzValue="between" nzLabel="两者之间"></nz-option>
+                    <nz-option nzValue="containAll" nzLabel="包含所有"></nz-option>
+                    <nz-option nzValue="containAny" nzLabel="包含任意"></nz-option>
+                </nz-select>
+                <span>的方式匹配以下字段:</span>
+                <nz-select formControlName="effectFields" style="min-width: 120px;" nzSize="small" nzMode="multiple"
+                    nzVariant="underlined" nzShowSearch nzAllowClear [nzDropdownRender]="renderTemplate"
+                    nzPlaceHolder="选择字段" (nzOpenChange)="$event && currentEffectFieldsControl=c">
+                    @for (f of sourceDataChooseFields(); track f) {
+                    <nz-option [nzLabel]="f" [nzValue]="f"></nz-option>
+                    }
+                </nz-select>
+            </div>
+        </div>
+        }
+    </ng-container>
+</form>
+<ng-template #renderTemplate>
+    <div nz-flex nzGap="4px" style="padding: 0 10px;">
+        <input type="text" nz-input nzSize="small" placeholder="其他字段" #inputElement />
+        <a (click)="addField(inputElement.value);inputElement.value=''">
+            <nz-icon nzType="plus" />
+        </a>
+    </div>
+</ng-template>
+<nz-autocomplete #filterDataFieldsAuto nzBackfill [nzWidth]="120">
+    @for (f of filterDataFields(); track f) {
+    <nz-auto-option [nzLabel]="f" [nzValue]="f">
+        {{f}}
+    </nz-auto-option>
+    }
+</nz-autocomplete>
+<a nz-button nzType="link" (click)="createFilter()">
+    <i nz-icon nzType="plus" nzTheme="outline"></i>
+    添加过滤条件
+</a>

package/core/share/array-filter-handler/input-filter-options/filter-options.ts

@@ -0,0 +1,100 @@
+import { ChangeDetectionStrategy, Component, computed, effect, forwardRef, inject, input, model, signal } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormArray, FormBuilder, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { FormValidators } from '../../../utils/form-validators';
+import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+@Component({
+  selector: 'axis-design-filter-options',
+  templateUrl: './filter-options.html',
+  styleUrls: ['./filter-options.css'],
+  imports: [NzSelectModule, NzButtonModule, NzInputModule, NzAutocompleteModule, ReactiveFormsModule, NzTagModule, NzIconModule, NzFlexModule, NzDividerModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FilterOptions),
+      multi: true
+    }
+  ]
+})
+export class FilterOptions implements ControlValueAccessor {
+
+  constructor() {
+    effect(() => {
+      this.onChange?.(this.formValue()?.filters);
+    })
+  }
+
+  onChange: any;
+  readonly value = model<any[]>();
+
+  writeValue(v: any): void {
+    this.value.set(v);
+    if (v?.length) {
+      v.forEach((r: any) => {
+        this.createFilter();
+        r.effectFields?.forEach((f: any) => {
+          if (!this.sourceDataChooseFields().includes(f) && !this.addFields().includes(f)) {
+            this.addFields.set([...this.addFields(), f]);
+          }
+        })
+      });
+    }
+    this.fg.reset({
+      filters: v
+    });
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+  readonly sourceDataFields = input<string[]>([]);
+  readonly sourceDataChooseFields = computed(() => this.sourceDataFields().concat(this.addFields()));
+  readonly filterDataFields = input<string[]>([]);
+  readonly addFields = signal<string[]>([]);
+  private readonly fb = inject(FormBuilder);
+  readonly fg = this.fb.group({
+    filters: this.fb.array([])
+  });
+  readonly formValue = toSignal(this.fg.valueChanges);
+  currentEffectFieldsControl?: AbstractControl;
+
+  get fa(): FormArray {
+    return this.fg.get("filters") as FormArray;
+  };
+
+  createFilter() {
+    this.fa.push(this.fb.group({
+      field: [undefined, FormValidators.required],
+      mode: ["equals", FormValidators.required],
+      effectFields: [[], FormValidators.required],
+    }));
+  }
+
+  deleteFilter(i: number) {
+    this.fa.removeAt(i);
+  }
+
+  addField(field: string) {
+    if (!this.sourceDataChooseFields().includes(field)) {
+      this.addFields.set([...this.addFields(), field]);
+      if (this.currentEffectFieldsControl) {
+        this.currentEffectFieldsControl!.patchValue({ effectFields: [...this.currentEffectFieldsControl!.value.effectFields, field] });
+      }
+    }
+
+  }
+
+}