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

Last updated 2 years ago

hashtagWpxService

hashtagSet Assets

hashtagSet Upload

hashtagCreate Model

hashtagSet Locale

hashtagLoad Script

hashtagGet Values

hashtagUpdate Values

hashtagDelete Values

hashtagTransaction

hashtagCommit Transaction

hashtagGet COS Pre-signed

hashtagGet COS Picture Info

hashtagWpxStoreService

hashtagSet

hashtagGet

hashtagRemove

hashtagClear

hashtagWpxApi<T>

hashtagCreate

hashtagBulkCreate

hashtagSize

hashtagExists

hashtagFind

hashtagFindOne

hashtagFindById

hashtagUpdate

hashtagUpdateById

hashtagReplace

hashtagDelete

hashtagBulkDelete

hashtagSort

hashtagWpxItems<T>

hashtagCheck

hashtagUncheck

hashtagChecked All

hashtagWpxModel<T>

hashtagReady

hashtagFetch Data

hashtagCheck

hashtagUncheck

hashtagChecked All

WpxService

Set Assets

Set Upload

Create Model

Set Locale

Load Script

Get Values

Update Values

Delete Values

Transaction

Commit Transaction

Get COS Pre-signed

Get COS Picture Info

WpxStoreService

Set

Get

Remove

Clear

WpxApi<T>

Create

BulkCreate

Size

Exists

Find

FindOne

FindById

Update

UpdateById

Replace

Delete

BulkDelete

Sort

WpxItems<T>

Check

Uncheck

Checked All

WpxModel<T>

Ready

Fetch Data

Check

Uncheck

Checked All