BaseListComponent

BaseListComponent

This is a base class which implements the logic required to fetch and manipulate a list of data from a query which returns a PaginatedList type.

Example

@Component({
  selector: 'my-entity-list',
  templateUrl: './my-entity-list.component.html',
  styleUrls: ['./my-entity-list.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyEntityListComponent extends BaseListComponent<GetMyEntityList.Query, GetMyEntityList.Items> {
  constructor(
    private dataService: DataService,
    router: Router,
    route: ActivatedRoute,
  ) {
    super(router, route);
    super.setQueryFn(
      (...args: any[]) => this.dataService.query<GetMyEntityList.Query>(GET_MY_ENTITY_LIST),
      data => data.myEntities,
    );
  }
}

The template for the component will typically use the DataTableComponent to display the results.

Example

<vdr-action-bar>
  <vdr-ab-right>
    <a class="btn btn-primary" [routerLink]="['./create']" *vdrIfPermissions="['CreateSettings', 'CreateTaxRate']">
      <clr-icon shape="plus"></clr-icon>
      Create new my entity
    </a>
  </vdr-ab-right>
</vdr-action-bar>

<vdr-data-table
  [items]="items$ | async"
  [itemsPerPage]="itemsPerPage$ | async"
  [totalItems]="totalItems$ | async"
  [currentPage]="currentPage$ | async"
  (pageChange)="setPageNumber($event)"
  (itemsPerPageChange)="setItemsPerPage($event)"
>
  <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
  <vdr-dt-column></vdr-dt-column>
  <ng-template let-myEntity="item">
    <td class="left align-middle">{{ myEntity.name }}</td>
    <td class="right align-middle">
      <vdr-table-row-action
        iconShape="edit"
        [label]="'common.edit' | translate"
        [linkTo]="['./', myEntity.id]"
      ></vdr-table-row-action>
    </td>
  </ng-template>
</vdr-data-table>

Signature

class BaseListComponent<ResultType, ItemType, VariableType = any> implements OnInit, OnDestroy {
  result$: Observable<ResultType>;
  items$: Observable<ItemType[]>;
  totalItems$: Observable<number>;
  itemsPerPage$: Observable<number>;
  currentPage$: Observable<number>;
  protected protected destroy$ = new Subject<void>();
  constructor(router: Router, route: ActivatedRoute)
  setQueryFn(listQueryFn: ListQueryFn<ResultType>, mappingFn: MappingFn<ItemType, ResultType>, onPageChangeFn?: OnPageChangeFn<VariableType>, defaults?: { take: number; skip: number }) => ;
  setPageNumber(page: number) => ;
  setItemsPerPage(perPage: number) => ;
  refresh() => ;
  protected setQueryParam(hash: { [key: string]: any }, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => ;
  protected setQueryParam(key: string, value: any, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => ;
  protected setQueryParam(keyOrHash: string | { [key: string]: any }, valueOrOptions?: any, maybeOptions?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => ;
}

Implements

  • OnInit
  • OnDestroy

Members

result$

property
type:
Observable<ResultType>

items$

property
type:
Observable<ItemType[]>

totalItems$

property
type:
Observable<number>

itemsPerPage$

property
type:
Observable<number>

currentPage$

property
type:
Observable<number>

destroy$

protected property
type:

constructor

method
type:
(router: Router, route: ActivatedRoute) => BaseListComponent

setQueryFn

method
type:
(listQueryFn: ListQueryFn<ResultType>, mappingFn: MappingFn<ItemType, ResultType>, onPageChangeFn?: OnPageChangeFn<VariableType>, defaults?: { take: number; skip: number }) =>
Sets the fetch function for the list being implemented.

setPageNumber

method
type:
(page: number) =>
Sets the current page number in the url.

setItemsPerPage

method
type:
(perPage: number) =>
Sets the number of items per page in the url.

refresh

method
type:
() =>
Re-fetch the current page of results.

setQueryParam

protected method
type:
(hash: { [key: string]: any }, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) =>

setQueryParam

protected method
type:
(key: string, value: any, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) =>

setQueryParam

protected method
type:
(keyOrHash: string | { [key: string]: any }, valueOrOptions?: any, maybeOptions?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) =>