File

packages/data/src/lib/entry-list/entry-list.component.ts

Description

The EntryListComponent is a thin holder of an EntryList instance. It extends the ListComponent https://components.entrecode.de/entries/entry-list?e=1

Extends

ResourceListComponent

Implements

OnDestroy

Metadata

changeDetection	`ChangeDetectionStrategy.OnPush`
selector	`ec-entry-list`
template	`listTemplate`

Index

Constructor

constructor(loaderService: LoaderService, sdk: SdkService, notificationService: NotificationsService, modelConfig: ModelConfigService, crud: EntryService, symbol: SymbolService, resourceService: ResourceService, listConfig: ListConfigService, cdr: ChangeDetectorRef, route: ActivatedRoute)

Defined in packages/data/src/lib/entry-list/entry-list.component.ts:27

The constructor will just call super of List

Parameters :

Name	Type	Optional
loaderService	`LoaderService`	No
sdk	`SdkService`	No
notificationService	`NotificationsService`	No
modelConfig	`ModelConfigService`	No
crud	`EntryService`	No
symbol	`SymbolService`	No
resourceService	`ResourceService`	No
listConfig	`ListConfigService`	No
cdr	`ChangeDetectorRef`	No
route	`ActivatedRoute`	No

Inputs

model
Type : `string`
Defined in packages/data/src/lib/entry-list/entry-list.component.ts:25
The model whose entries should be shown.

api
Type : `Core`
Inherited from `ResourceListComponent`
Defined in `ResourceListComponent:44`
The API Connector that possesses the resource list, see https://entrecode.github.io/ec.sdk/#api-connectors

listResource
Type : `ListResource`
Inherited from `ResourceListComponent`
Defined in `ResourceListComponent:36`
If listResource input is set, the given ListResource will be used directly and loading will be skipped.

loader
Type : `LoaderComponent`
Inherited from `ResourceListComponent`
Defined in `ResourceListComponent:48`
The loader that should be shown while the list is loaded.

loadWhen
Type : `boolean`
Inherited from `ResourceListComponent`
Defined in `ResourceListComponent:40`
If set to false, the list will wait for the flag to turn true before loading.

relation
Type : `string`
Inherited from `ResourceListComponent`
Defined in `ResourceListComponent:46`
The name of the resource. If given, the generic ListResource loading will be used (api.resourceList)

solo
Type : `boolean`
Inherited from `ResourceListComponent`
Defined in `ResourceListComponent:38`
If true, only one item is selectable next

autoFocusFirst
Default value : `false`
Inherited from `ListComponent`
Defined in `ListComponent:58`
If true, the first item in the list will always be focused after changed

collection
Type : `Collection<T>`
Inherited from `ListComponent`
Defined in `ListComponent:42`
The used collection

config
Type : `ListConfig<T>`
Inherited from `ListComponent`
Defined in `ListComponent:38`

items
Type : `Array<T>`
Inherited from `ListComponent`
Defined in `ListComponent:40`
The visible items

list
Type : `List<T>`
Inherited from `ListComponent`
Defined in `ListComponent:52`
The Instance of the List

pagination
Type : `Pagination<T>`
Inherited from `ListComponent`
Defined in `ListComponent:54`
Pagination that should be used

paginationConfig
Type : `PaginationConfig`
Inherited from `ListComponent`
Defined in `ListComponent:56`
Custom PaginationConfig

selection
Type : `Selection<T>`
Inherited from `ListComponent`
Defined in `ListComponent:44`
The used selection

solo
Type : `boolean`
Inherited from `ListComponent`
Defined in `ListComponent:46`
If true, only one item is selectable next

Outputs

changed
Type : `EventEmitter<List<T>>`
Inherited from `ListComponent`
Defined in `ListComponent:62`
emits after the list changed

columnClicked
Type : `EventEmitter<Item<T>>`
Inherited from `ListComponent`
Defined in `ListComponent:48`
Event emitter on item selection

selected
Type : `EventEmitter<Selection<T>>`
Inherited from `ListComponent`
Defined in `ListComponent:50`
Event emitter on selection change

Methods

createList

createList()

Defined in packages/data/src/lib/entry-list/entry-list.component.ts:65

Returns : Promise<EntryList>

initFilter

initFilter()

Defined in packages/data/src/lib/entry-list/entry-list.component.ts:52

Returns : void

ngOnDestroy

ngOnDestroy()

Defined in packages/data/src/lib/entry-list/entry-list.component.ts:83

Returns : void

Protected createList

createList()

Inherited from ResourceListComponent

Defined in ResourceListComponent:71

The method to create the list

Returns : Promise | ResourceList

filter

filter(property: string, value: any)

Inherited from ResourceListComponent

Defined in ResourceListComponent:133

This method will filter the list by a given property value and optional operator.

Parameters :

Name	Type	Optional
property	`string`	No
value	`any`	No

Returns : Promise<any>

initFilterQuery

initFilterQuery(fieldFilter: (property: string,value: any) => void)

Inherited from ResourceListComponent

Defined in ResourceListComponent:137

Parameters :

Name	Type	Optional
fieldFilter	`function`	No

Returns : void

ngOnChanges

ngOnChanges(changes?)

Inherited from ResourceListComponent

Defined in ResourceListComponent:124

When changing the model or the config, the list will update

Parameters :

Name	Optional
changes	Yes

Returns : void

ngOnDestroy

ngOnDestroy()

Inherited from ResourceListComponent

Defined in ResourceListComponent:88

Returns : void

update

update()

Inherited from ResourceListComponent

Defined in ResourceListComponent:92

Creates/Updates the list and subscribes Observables.

Returns : void

columnClick

columnClick(item)

Inherited from ListComponent

Defined in ListComponent:104

Column click handler. Triggers select.emit(item) with fallback to selection.toggle

Parameters :

Name	Optional
item	No

Returns : any

filter

filter(property, value)

Inherited from ListComponent

Defined in ListComponent:162

Filters the list

Parameters :

Name	Optional
property	No
value	No

Returns : void

focusFirst

focusFirst()

Inherited from ListComponent

Defined in ListComponent:130

Returns : void

focusNext

focusNext()

Inherited from ListComponent

Defined in ListComponent:136

Selects the next item

Returns : void

focusPrev

focusPrev()

Inherited from ListComponent

Defined in ListComponent:149

Selects the previous item

Returns : void

init

init(list: List)

Inherited from ListComponent

Defined in ListComponent:77

Parameters :

Name	Type	Optional
list	`List<T>`	No

Returns : void

ngOnChanges

ngOnChanges(changes?)

Inherited from ListComponent

Defined in ListComponent:68

Changing items or collection will trigger reconstructing the list with the new items. Changing the selection will reconstruct the selection

Parameters :

Name	Optional
changes	Yes

Returns : void

selectIndex

selectIndex(index: number)

Inherited from ListComponent

Defined in ListComponent:123

Selects the item with the given index

Parameters :

Name	Type	Optional
index	`number`	No

Returns : void

showHeader

showHeader()

Inherited from ListComponent

Defined in ListComponent:112

Decides if the header should be visible or not

Returns : any

Properties

Public cdr

Type : ChangeDetectorRef

Defined in packages/data/src/lib/entry-list/entry-list.component.ts:39

config

Type : ListConfig<EntryResource>

Default value : {}

Defined in packages/data/src/lib/entry-list/entry-list.component.ts:27

Overrides the Config of ResourceList with a ListConfig containing an EntryResource

Public listConfig

Type : ListConfigService

Defined in packages/data/src/lib/entry-list/entry-list.component.ts:38

Public route

Type : ActivatedRoute

Decorators :


                                @Optional()

Defined in packages/data/src/lib/entry-list/entry-list.component.ts:40

Public cdr

Type : ChangeDetectorRef

Inherited from ResourceListComponent

Defined in ResourceListComponent:58

list

Type : ResourceList

Inherited from ResourceListComponent

Defined in ResourceListComponent:42

The instance of an EntryList

Public listConfig

Type : ListConfigService

Inherited from ResourceListComponent

Defined in ResourceListComponent:57

resourceConfig

Type : ResourceConfig

Inherited from ResourceListComponent

Defined in ResourceListComponent:34

Public route

Type : ActivatedRoute

Decorators :


                                @Optional()

Inherited from ResourceListComponent

Defined in ResourceListComponent:59

Public cdr

Type : ChangeDetectorRef

Inherited from ListComponent

Defined in ListComponent:64

config

Type : ListConfig<T>

Default value : {}

Inherited from ListComponent

Defined in ListComponent:33

The current list config

focusItem

Type : Item<T>

Inherited from ListComponent

Defined in ListComponent:60

Current focus

isLoading

Default value : false

Inherited from ListComponent

Defined in ListComponent:36

Config input for List

Public listConfig

Type : ListConfigService

Inherited from ListComponent

Defined in ListComponent:64

ec-entry-list

Related Doc:

Entry Lists load multiple entries from a model and display them in a paginated list. It supports load error notifications, loader, filtering, sorting and automatic reloading + many customizations.

Default Usage

<ec-entry-list model="muffin"></ec-entry-list>

The above snippet will either consume the config for muffin in ModelConfigService, or if no config is found, generate one from the model schema.

Passing a Config

The following snippet will assign the given config to the model/schema config:

<ec-entry-list model="muffin" [config]="muffinListConfig"></ec-entry-list>

columnClicked output

You can react to column clicks via the columnClicked output:

<ec-entry-list model="muffin" (columnClicked)="select($event)"></ec-entry-list>

select(item) {
    console.log('entry',item.getBody(),item.id());
}

Seperated header/items/pagination markup

If you need a seperation of the list-header -items and -pagination, you can use the sub components of list.component:

<ec-list-header [list]="dealList?.list"></ec-list-header>
<!-- -->
<ec-entry-list model="deal" #dealList (columnClicked)="select($event)"
    [selection]="dealSelection"
    [config]="{disableHeader: true, hidePagination: true}"></ec-entry-list>
<!-- -->
<ec-pagination [pagination]="dealList?.list?.pagination"></ec-pagination>

Create Custom Cells via transform methods

If you want to custom cell values that do not require a custom markup, you can use transforms

display

The display transform method is used to display the value (say what?). It is called from inside ec-output, which is used in list-cells and form readOnly fields. You can change the display behaviour like this:

this.modelConfig.set('muffin', {
    fields: {
        amazement_factor: {
            display: (value, item) => {
                if(value===10) {
                    return 'AMAZING!';
                } else if(value > 7) {
                    return 'amazing';
                }
                return 'not so amazing';
            }
        }
    }
});

group

You can use grouping to get a clearer outline over sorted data:

this.modelConfig.set('muffin', {
    fields: {
        amazement_factor: {
            group: (value, item) => {
                if(value===10) {
                    return 'AMAZING!';
                } else if(value > 7) {
                    return 'amazing';
                }
                return 'not so amazing';
            }
        }
    }
});

The syntax is the same as for display but the result is used as a group label when the property is sorted.

resolve

The value that is passed to the transform methods like display, group etc. can be changed beforehand with the resolve method. NOTE: the params are different than for the transform methods:

this.modelConfig.set('muffin', {
    fields: {
        amazement_factor: {
            resolve: (body, item) => {
                if(body.amazement_factor === -1) {
                    return 0;
                }
                return body.amazement_factor;
            }
        }
    }
});

this will also affect your forms!

pseudo properties via resolve

You can also define pseudo properties, meaning properties that do not exist on the original object:

this.modelConfig.set('muffin', {
    fields: {
        ranking: {
            resolve: (body, item) => body.amazement_factor*body.flavour/body.price
        }
    }
});

This comes in handy when you want to display a often combined value out of multiple values.

NOTE: pseudo properties should not be passed to the backend...

Custom Cells via custom output component

If you want to custom cell values that do require a custom markup, you can use a custom output component:

this.modelConfig.set('muffin', {
    fields: {
        amazement_factor: {
            output: StrongComponent
        }
    }
});

In your strong.component.ts, you can inherit OutputComponent, giving you access to the field and item of your cell:

@Component({
  selector: 'app-strong',
  template: `<strong>{{item.resolve(field.property)}}</strong>`
})
export class StrongComponent extends OutputComponent {}

NOTE: customizing the output component will also change the look of forms using that config, if the property is set readOnly.

Filtering Lists

By default, each column that hosts a filterable property contains a search icon in its header. If the property is filterable is defined either by the field config (filterable) or falls back to the backend types that support filters. The search icon will open a pop with a field type specific filter input inside.

Custom Filtering

If you do not want that (currently pretty clunky) pop filters, you can set filterable to false and manually call list.load with the desired filter:

<a (click)="muffinList.list.load({filter:{amazement_factor:10}})">
    show amazing muffins
</a>
<ec-entry-list #muffinList model="muffin"></ec-entry-list>

Clicking the link will now show all muffins with exactly amazement_factor 10.

Custom filter operators

By default, the entry-list will filter the property by its default filterOperator (see type config). If you want to change the default operator you can set it in the config:

this.modelConfig.set('muffin', {
    fields: {
        amazement_factor: {
            filterOperator: 'from'
        }
    }
});

<a (click)="muffinList.list.load({filter:{amazement_factor:5}})">
    show amazing muffins
</a>
<ec-entry-list #muffinList model="muffin"></ec-entry-list>

If you now click the link, all muffins with amazement_factor>=5 will be loaded.

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, Optional } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ListConfig } from '@ec.components/core';
import { ListConfigService, listTemplate, LoaderService, NotificationsService, SymbolService, componentDestroyed } from '@ec.components/ui';
import EntryResource from 'ec.sdk/lib/resources/publicAPI/EntryResource';
import { takeUntil } from 'rxjs/operators';
import { EntryService } from '../entry/entry.service';
import { ModelConfigService } from '../model-config/model-config.service';
import { ResourceService } from '../resource-config/resource.service';
import { ResourceListComponent } from '../resource-list/resource-list.component';
import { SdkService } from '../sdk/sdk.service';
import { EntryList } from './entry-list';
import { CrudConfig } from '../crud/crud-config.interface';

/** The EntryListComponent is a thin holder of an EntryList instance. It extends the ListComponent
 * <example-url>https://components.entrecode.de/entries/entry-list?e=1</example-url>
 */
@Component({
  selector: 'ec-entry-list',
  template: listTemplate,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EntryListComponent extends ResourceListComponent implements OnDestroy {
  /** The model whose entries should be shown.*/
  @Input() model: string;
  /** Overrides the Config of ResourceList with a ListConfig containing an EntryResource */
  config: ListConfig<EntryResource> = {};

  /** The constructor will just call super of List*/
  constructor(
    protected loaderService: LoaderService,
    protected sdk: SdkService,
    protected notificationService: NotificationsService,
    protected modelConfig: ModelConfigService,
    protected crud: EntryService,
    protected symbol: SymbolService,
    protected resourceService: ResourceService,
    public listConfig: ListConfigService,
    public cdr: ChangeDetectorRef,
    @Optional() public route: ActivatedRoute,
  ) {
    super(loaderService, sdk, notificationService, symbol, resourceService, listConfig, cdr, route);
    /*if (route) {
      route.params.subscribe(({ model }) => {
        if (model) {
          this.model = model;
        }
      })
    }*/
  }

  initFilter() {
    this.initFilterQuery((property, value) => {
      const target = property.split('.');
      const field = this.config.fields[target[1]];
      if (target[0] === this.model && field) {
        return {
          property: target[1],
          value: field.queryFilter ? field.queryFilter(value) : value,
        };
      }
    });
  }

  createList(): Promise<EntryList> {
    if (!this.model) {
      return;
    }
    this.resourceService.change({ relation: `model.${this.model}` })
      .pipe(takeUntil(componentDestroyed(this)))
      .subscribe((update) => {
        this.list.load();
      });
    return this.modelConfig
      .generateConfig(this.model, (this.config || {}).fields)
      .then((config: CrudConfig<EntryResource>) => {
        this.config = Object.assign(this.config || {}, config);
        this.initFilter();
        return new EntryList(this.model, this.config, this.sdk);
      });
  }

  ngOnDestroy() {
  }
}

Legend

Html element

Component

Html element with directive

File

Description

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Constructor

Inputs

Outputs

Methods

Properties

ec-entry-list

Default Usage

Passing a Config

columnClicked output

Seperated header/items/pagination markup

Create Custom Cells via transform methods

display

group

resolve

pseudo properties via resolve

Custom Cells via custom output component

Filtering Lists

Custom Filtering

Custom filter operators

result-matching ""

No results matching ""