Core

Install Angular Auxiliary Library.

npm install @weplanx/ng

WpxService

• Weplanx Assisted Management Services

• Public

  • assets string Assets loading address, default /assets

  • upload AsyncSubject<UploadOption> Upload configuration status

  • scripts Map<string, AsyncSubject<void>> Script loading status

Set Assets

• setAssets(v: string): void

  • v string Local or remote path

For example: the assets path is the address https://cdn.xxx.com of CDN distribution, add in app.component.ts

@Component({
  selector: 'app-root',
  template: ` <router-outlet></router-outlet> `
})
export class AppComponent implements OnInit {
  constructor(
    private app: AppService,
    private wpx: WpxService,
    private icon: NzIconService
  ) {}

  ngOnInit(): void {
    this.app.ping().subscribe(() => {
      console.debug('XSRF:ok');
    });
    this.icon.changeAssetsSource(environment.cdn);
    this.wpx.setAssets(environment.cdn);
  }
}

Set Upload

• setUpload(v: UploadOption): void

  • v UploadOption Upload configuration

    • UploadOption

      • type string platform

      • url string url

      • limit number Upload size limit

Just get it from the backend

@Component({
  selector: 'app-root',
  template: ` <router-outlet></router-outlet> `
})
export class AppComponent implements OnInit {
  constructor(
    private app: AppService,
    private wpx: WpxService,
    private icon: NzIconService
  ) {}

  ngOnInit(): void {
    this.app.getUploadOption().subscribe(v => {
      this.wpx.setUpload(v);
    });
  }
}

Create Model

• setModel<T>(key: string, api: WpxApi<T>): WpxModel<T>

  • key string Index, which automatically associates IndexedDB

  • api WpxApi<T> Common API

Initialize a WpxModel

@Component({
  selector: 'app-admin-users',
  templateUrl: './users.component.html'
})
export class UsersComponent implements OnInit {
  model!: WpxModel<User>;

  constructor(
    private wpx: WpxService,
    public users: UsersService
  ) {}

  ngOnInit(): void {
    this.model = this.wpx.setModel<User>('users', this.users);
    this.model.ready().subscribe(() => {
      this.getData();
    });
  }

  getData(refresh = false): void {
    if (refresh) {
      this.model.page = 1;
    }
    this.model.fetch({}).subscribe(() => {
      console.debug('fetch:ok');
    });
  }
}

Set Locale

• setLocale(id: string): void

  • id string identification

    • zh-Hans Simplified Chinese

    • en-US American English

Load Script

• loadScript(key: string, url: string, plugins: string[]): void

  • key string script identity

  • url string script url

  • plugins string[] plugins url of script

Example: import external UMD script

@Component({
  selector: 'app-root',
  template: ` <router-outlet></router-outlet> `
})
export class AppComponent implements OnInit {
  constructor(
    private app: AppService,
    private wpx: WpxService,
    private icon: NzIconService
  ) {}

  ngOnInit(): void {
    this.wpx.loadScript('cropperjs', 'https://cdn.jsdelivr.net/npm/cropperjs@1.6.0/dist/cropper.min.js', []);
    this.wpx.loadScript('editorjs', 'https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.27.2/dist/editorjs.umd.min.js', [
      'https://cdn.jsdelivr.net/npm/@editorjs/paragraph@2.10.0/dist/bundle.min.js',
      'https://cdn.jsdelivr.net/npm/@editorjs/header@2.7.0/dist/bundle.min.js',
      'https://cdn.jsdelivr.net/npm/@editorjs/delimiter@1.3.0/dist/bundle.min.js',
      'https://cdn.jsdelivr.net/npm/@editorjs/underline@1.1.0/dist/bundle.min.js',
      'https://cdn.jsdelivr.net/npm/@editorjs/nested-list@1.3.0/dist/nested-list.min.js',
      'https://cdn.jsdelivr.net/npm/@editorjs/checklist@1.5.0/dist/bundle.min.js',
      'https://cdn.jsdelivr.net/npm/@editorjs/table@2.2.2/dist/table.min.js',
      'https://cdn.jsdelivr.net/npm/@editorjs/quote@2.5.0/dist/bundle.min.js',
      'https://cdn.jsdelivr.net/npm/@editorjs/code@2.8.0/dist/bundle.min.js',
      'https://cdn.jsdelivr.net/npm/@editorjs/marker@1.3.0/dist/bundle.min.js',
      'https://cdn.jsdelivr.net/npm/@editorjs/inline-code@1.4.0/dist/bundle.min.js'
    ]);
  }
}

Get Values

• getValues(keys?: string[]): Observable<R>

  • keys string[] configuration keys

Update Values

• setValues(update: R): Observable<R>

  • update R Update data

Delete Values

• deleteValue(key: string): Observable<R>

  • key string configuration key

Transaction

• transaction(): Observable<TransactionResult>

Commit Transaction

• commit(txn: string): Observable<void>

  • txn string Transaction ID

Get COS Pre-signed

• cosPresigned(): Observable<R>

Get COS Picture Info

• cosImageInfo(url: string): Observable<WpxImageInfo>

  • url string Image object

WpxStoreService

• Local storage based on IndexedDB

Set

• set<T>(key: string, value: T): Observable<void>

Get

• get<T>(key: string): Observable<T | undefined>

Remove

• remove(key: string): Observable<void>

Clear

• clear(): Observable<R>

WpxApi<T>

• Universal API abstract class

Create

• create(doc: T, options?: CreateOption<T>): Observable<R>

  • doc T data

  • options CreateOption<T>

    • xdata XData doc format conversion

    • txn string transaction ID

BulkCreate

• bulkCreate(docs: T[], options?: CreateOption<T>): Observable<R>

  • docs T[] array data

  • options CreateOption<T>

    • xdata XData docs.$ format conversion

    • txn string transaction ID

Size

• size(filter: Filter<T>, options?: FilterOption<T>): Observable<number>

  • filter Filter<T>

  • options FilterOption<T>

    • xfilter XFilter<T> filter format conversion

Exists

• exists(filter: Filter<T>, options?: FilterOption<T>): Observable<boolean>

  • filter Filter<T>

  • options FilterOption<T>

    • xfilter XFilter<T> filter format conversion

Find

• find(filter: Filter<T>, options?: FindOption<T>): Observable<FindResult<T>>

  • filter Filter<T>

  • options FindOption<T>

    • keys Array<keyof AnyDto<T>> projection

    • sort Sort<T> sort

    • page number page index

    • pagesize number page size

    • xfilter XFilter<T> filter format conversion

FindOne

• findOne(filter: Filter<T>, options?: FindOneOption<T>): Observable<AnyDto<T>>

  • filter Filter<T>

  • options FindOneOption<T>

    • keys Array<keyof AnyDto<T>> projection

    • xfilter XFilter<T> filter format conversion

FindById

• findById(id: string, options?: FindByIdOption<T>): Observable<AnyDto<T>>

  • id string

  • options FindByIdOption<T>

    • keys Array<keyof AnyDto<T>> projection

Update

• update(filter: Filter<T>, update: Update<T>, options?: UpdateOption<T>): Observable<R>

  • filter Filter<T>

  • update Update<T> update data

  • options UpdateOption<T>

    • xfilter XFilter<T> filter format conversion

    • xdata XData update format conversion

    • txn string transaction ID

UpdateById

• updateById(id: string, update: Update<T>, options?: UpdateOneByIdOption<T>): Observable<R>

  • id string

  • update Update<T> update data

  • options UpdateOneByIdOption<T>

    • xdata XData update format conversion

    • txn string transaction ID

Replace

• replace(id: string, doc: T, options?: ReplaceOption<T>): Observable<R>

  • id string

  • doc T data

  • options ReplaceOption<T>

    • xdata XData update format conversion

    • txn string transaction ID

Delete

• delete(id: string, options?: DeleteOption<T>): Observable<R>

  • id string

  • options DeleteOption<T>

    • txn string transaction ID

BulkDelete

• bulkDelete(filter: Filter<T>, options?: BulkDeleteOption<T>): Observable<R>

  • filter Filter<T>

  • options BulkDeleteOption<T>

    • xfilter XFilter<T> filter format conversion

    • txn string transaction ID

Sort

• sort(key: string, values: string[], options?: SortOption<T>): Observable<R>

  • key string Sort field

  • values string[] ID array, array index is sorted

  • options SortOption<T>

    • txn string transaction ID

WpxItems<T>

• Universal tuple abstract class

• Public

  • data T[]

  • loading bool load state

  • searchText string keyword search text

  • checked boolean whether all are selected

  • indeterminate boolean whether to select part

  • selection Map<string, T> selected value

Check

• setSelection(data: T): void

  • data T

Uncheck

• removeSelection(id: string): void

  • id string

Checked All

• setCurrentSelections(checked: boolean): void

  • checked boolean

WpxModel<T>

• Universal data model abstract class

• Public

  • data signal<AnyDto<T>[]>

  • dataFilter AnyDto<T>[] not disabled data

  • loading signal<boolean> load state

  • total number data total

  • page number model page index

  • pagesize number model page size

  • advanced signal<NzDrawerRef | null> search panel

  • searchText string keyword search text

  • keywords Any[]

  • checked boolean whether all are selected

  • indeterminate boolean whether to select part

  • selection Map<string, T> selected value

Ready

• ready(xfilter?: XFilter): Observable<R>

  • xfilter XFilter default filter formatting

Fetch Data

• fetch(search?: Filter<T>, sort?: Sort<T>): Observable<FindResult<T>>

  • search Filter<T> custom filter

  • sort Sort<T> custom sort

Check

• setSelection(data: T): void

  • data T

Uncheck

• removeSelection(id: string): void

  • id string

Checked All

• setCurrentSelections(checked: boolean): void

  • checked boolean