ec.components documentation
  1. Components
  2. EntryActionbarComponent

File

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

Extends

ActionbarComponent

Implements

OnInit

Metadata

providers { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EntryActionbarComponent), multi: true, }
selector ec-entry-actionbar
template 
selectTemplate

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(sdk: SdkService, resourceConfig: ResourceConfig, elementRef: ElementRef, cdr: ChangeDetectorRef, modelConfig: ModelConfigService)
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:34
Parameters :
Name Type Optional
sdk SdkService No
resourceConfig ResourceConfig No
elementRef ElementRef No
cdr ChangeDetectorRef No
modelConfig ModelConfigService No

Inputs

config
Type : CrudConfig<EntryResource>
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:33

The config that should be merged into the generated config

focusEvent
Type : EventEmitter<boolean>
Default value : new EventEmitter()
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:28

The event that focuses the input

model
Type : string
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:30

The model to pick from, alternative to field with model property set.

actions
Type : Action[]
Inherited from ActionbarComponent
Defined in ActionbarComponent:33
config
Type : ActionbarConfig
Default value : { label: 'title', identifier: 'id', fields: { title: {}, }, }
Inherited from ActionbarComponent
Defined in ActionbarComponent:26
root
Default value : 'ROOT'
Inherited from ActionbarComponent
Defined in ActionbarComponent:25
config
Type : ListConfig<T>
Inherited from SelectComponent
Defined in SelectComponent:48

Configuration Object for List

disabled
Type : ListConfig<T>
Inherited from SelectComponent
Defined in SelectComponent:50

If true, the input will be disabled

focusEvent
Type : EventEmitter<boolean>
Default value : new EventEmitter()
Inherited from SelectComponent
Defined in SelectComponent:76

Event emitter to focus input

formControl
Type : FormControl
Inherited from SelectComponent
Defined in SelectComponent:88

The formControl that is used.

list
Type : List<T>
Inherited from SelectComponent
Defined in SelectComponent:70

The Instance of the List

placeholder
Type : string
Inherited from SelectComponent
Defined in SelectComponent:56

Input placeholder

selection
Type : Selection<T>
Inherited from SelectComponent
Defined in SelectComponent:54

The used selection

solo
Type : boolean
Inherited from SelectComponent
Defined in SelectComponent:74

Wether or not the selection should be solo

value
Type : Array<T> | T
Inherited from SelectComponent
Defined in SelectComponent:52

The visible items

values
Type : Array<T>
Inherited from SelectComponent
Defined in SelectComponent:72

Available Items

Outputs

add
Type : EventEmitter<Item<T>>
Inherited from SelectComponent
Defined in SelectComponent:64

Emits when an item is being added

changed
Type : EventEmitter<Selection<T>>
Inherited from SelectComponent
Defined in SelectComponent:58

Event emitter on item selection

enter
Type : EventEmitter<SelectComponent<T>>
Inherited from SelectComponent
Defined in SelectComponent:66

Emits the query when enter is pressed

enterPressed
Type : Subject<string>
Inherited from SelectComponent
Defined in SelectComponent:68

Subject that is nexted when enter is pressed

itemClick
Type : EventEmitter<Item<T>>
Inherited from SelectComponent
Defined in SelectComponent:60

Event emitter on selected item click

remove
Type : EventEmitter<Item<T>>
Inherited from SelectComponent
Defined in SelectComponent:62

Emits when an item is being removed

Methods

filterDropdownList
filterDropdownList(listComponent: ListComponent, query)
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:125
Parameters :
Name Type Optional
listComponent ListComponent<any> No
query No
Returns : any
getEntryAction
getEntryAction(entry: EntryResource | LiteEntryResource)
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:54
Parameters :
Name Type Optional
entry EntryResource | LiteEntryResource No
Returns : { id: any; title: any; }
Async getModelActions
getModelActions()
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:68
Returns : Promise<Action[]>
getNextPageAction
getNextPageAction(entryList)
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:97
Parameters :
Name Optional
entryList No
Returns : { id: string; title: string; select: boolean; action: () => any; }
Async loadEntryActions
loadEntryActions(model, filterOptions: object)
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:78
Parameters :
Name Type Optional Default value
model No
filterOptions object No {}
Returns : any
Async loadModelActions
loadModelActions()
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:61
Returns : any
ngOnInit
ngOnInit()
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:46
Returns : void
writeValue
writeValue(value)
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:118
Parameters :
Name Optional
value No
Returns : void
currentActions
currentActions()
Inherited from ActionbarComponent
Defined in ActionbarComponent:79
Returns : {}
currentID
currentID()
Inherited from ActionbarComponent
Defined in ActionbarComponent:67
Returns : any
getPath
getPath()
Inherited from ActionbarComponent
Defined in ActionbarComponent:107
Returns : any
Async loadActions
loadActions(actions, addToStack)
Inherited from ActionbarComponent
Defined in ActionbarComponent:83
Parameters :
Name Optional Default value
actions No
addToStack No true
Returns : any
loadActionsBefore
loadActionsBefore()
Inherited from ActionbarComponent
Defined in ActionbarComponent:56
Returns : void
ngOnInit
ngOnInit()
Inherited from ActionbarComponent
Defined in ActionbarComponent:63
Returns : void
reset
reset()
Inherited from ActionbarComponent
Defined in ActionbarComponent:74
Returns : void
activate
activate(e)
Inherited from SelectComponent
Defined in SelectComponent:283
Parameters :
Name Optional
e No
Returns : void
addItem
addItem(item: Item)
Inherited from SelectComponent
Defined in SelectComponent:166

Adds the given ite, emits add output if observed

Parameters :
Name Type Optional
item Item<any> No
Returns : void
cancelDrag
cancelDrag(item, e, target)
Inherited from SelectComponent
Defined in SelectComponent:276

is called when the drag stops in any kind of way.

Parameters :
Name Optional Default value
item No
e No
target No e.target
Returns : void
canRemove
canRemove()
Inherited from SelectComponent
Defined in SelectComponent:298
Returns : boolean
Public clickItem
clickItem(item, e?)
Inherited from SelectComponent
Defined in SelectComponent:203

Is called when a selected item is clicked

Parameters :
Name Optional
item No
e Yes
Returns : void
filterDropdownList
filterDropdownList(listComponent: ListComponent, query)
Inherited from SelectComponent
Defined in SelectComponent:360
Parameters :
Name Type Optional
listComponent ListComponent<any> No
query No
Returns : void
focus
focus(e)
Inherited from SelectComponent
Defined in SelectComponent:219
Parameters :
Name Optional
e No
Returns : void
focusSearchbar
focusSearchbar()
Inherited from SelectComponent
Defined in SelectComponent:229
Returns : void
getArray
getArray(value)
Inherited from SelectComponent
Defined in SelectComponent:175
Parameters :
Name Optional
value No
Returns : any
getParentTree
getParentTree(el, tree: [])
Inherited from SelectComponent
Defined in SelectComponent:103
Parameters :
Name Type Optional Default value
el No
tree [] No []
Returns : any
handleKey
handleKey(e, list)
Inherited from SelectComponent
Defined in SelectComponent:302
Parameters :
Name Optional
e No
list No
Returns : void
hasSoloSelection
hasSoloSelection()
Inherited from SelectComponent
Defined in SelectComponent:225
Returns : boolean
initSelection
initSelection()
Inherited from SelectComponent
Defined in SelectComponent:119

creates the collection from the config

Returns : void
Public listItemClicked
listItemClicked(item, list?)
Inherited from SelectComponent
Defined in SelectComponent:210

Select handler. Toggles selection.

Parameters :
Name Optional
item No
list Yes
Returns : void
ngOnChanges
ngOnChanges()
Inherited from SelectComponent
Defined in SelectComponent:114
Returns : void
ngOnInit
ngOnInit()
Inherited from SelectComponent
Defined in SelectComponent:110
Returns : void
onChange
onChange()
Inherited from SelectComponent
Defined in SelectComponent:236

Fires on selection change. Hides dropdown if solo

Returns : void
onDragStart
onDragStart(item, e, target)
Inherited from SelectComponent
Defined in SelectComponent:257

is called when an element is dragged by the user. hides element in selection

Parameters :
Name Optional Default value
item No
e No
target No e.target
Returns : void
onDrop
onDrop(e)
Inherited from SelectComponent
Defined in SelectComponent:264

called when the element is dropped. moves item in selection.

Parameters :
Name Optional
e No
Returns : void
preventDefault
preventDefault(e)
Inherited from SelectComponent
Defined in SelectComponent:292
Parameters :
Name Optional
e No
Returns : void
registerOnChange
registerOnChange(fn)
Inherited from SelectComponent
Defined in SelectComponent:250

registers change method. (handled by angular)

Parameters :
Name Optional
fn No
Returns : void
registerOnTouched
registerOnTouched()
Inherited from SelectComponent
Defined in SelectComponent:254
Returns : void
removeItem
removeItem(item: Item, e?)
Inherited from SelectComponent
Defined in SelectComponent:153

Removes the given item from selection

Parameters :
Name Type Optional
item Item<any> No
e Yes
Returns : void
setDisabledState
setDisabledState(isDisabled)
Inherited from SelectComponent
Defined in SelectComponent:371
Parameters :
Name Optional
isDisabled No
Returns : void
use
use(value, event)
Inherited from SelectComponent
Defined in SelectComponent:180

Uses the given value as selection items

Parameters :
Name Optional Default value
value No
event No true
Returns : void
useConfig
useConfig(config: ListConfig)
Inherited from SelectComponent
Defined in SelectComponent:196

Initializes either with values, collection or list. Creates Selection with config.

Parameters :
Name Type Optional Default value
config ListConfig<T> No {}
Returns : void
writeValue
writeValue(value: any)
Inherited from SelectComponent
Defined in SelectComponent:148

Called when the model changes

Parameters :
Name Type Optional
value any No
Returns : void

Properties

Public cdr
Type : ChangeDetectorRef
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:40
Public elementRef
Type : ElementRef
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:39
entrySelectActions
Type : Action[]
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:25
lightModel
Type : any
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:34
Public modelConfig
Type : ModelConfigService
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:41
Public resourceConfig
Type : ResourceConfig
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:38
Public sdk
Type : SdkService
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:37
selectedEntries
Defined in packages/data/src/lib/entry-actionbar/entry-actionbar.component.ts:26
actionStack
Type : literal type
Default value : {}
Inherited from ActionbarComponent
Defined in ActionbarComponent:34
Public cdr
Type : ChangeDetectorRef
Inherited from ActionbarComponent
Defined in ActionbarComponent:36
Public elementRef
Type : ElementRef
Inherited from ActionbarComponent
Defined in ActionbarComponent:36
Public cdr
Type : ChangeDetectorRef
Inherited from SelectComponent
Defined in SelectComponent:90
dragged
Type : Item<T>
Inherited from SelectComponent
Defined in SelectComponent:46

the current dragged element

dropdown
Type : PopComponent
Decorators :
@ViewChild('dropdown', {static: true})
Inherited from SelectComponent
Defined in SelectComponent:78

The selection dropdown

dropdownList
Type : ListComponent<any>
Decorators :
@ViewChild(ListComponent, {static: true})
Inherited from SelectComponent
Defined in SelectComponent:82

The list in the dropdown

dropdownLoader
Type : LoaderComponent
Decorators :
@ViewChild('dropdownLoader', {static: true})
Inherited from SelectComponent
Defined in SelectComponent:80

The loader inside the dropdown

Public elementRef
Type : ElementRef
Inherited from SelectComponent
Defined in SelectComponent:90
propagateChange
Default value : () => {...}
Inherited from SelectComponent
Defined in SelectComponent:248

Propagates formControl/ngModel changes

searchbar
Type : SearchbarComponent
Decorators :
@ViewChild(SearchbarComponent)
Inherited from SelectComponent
Defined in SelectComponent:84

The nested searchbar

toggleItem
Type : Subject<Item<T>>
Default value : new Subject()
Inherited from SelectComponent
Defined in SelectComponent:86

Subject that is nexted when an item is being selected (clicked or entered on) 

import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, Input, OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Item } from '@ec.components/core';
import { ModelConfigService } from '../model-config/model-config.service';
import { Action, ActionbarComponent, ListComponent, selectTemplate } from '@ec.components/ui';
import EntryResource from 'ec.sdk/lib/resources/publicAPI/EntryResource';
import LiteEntryResource from 'ec.sdk/lib/resources/publicAPI/LiteEntryResource';
import { CrudConfig } from '../crud/crud-config.interface';
import { ResourceConfig } from '../resource-config/resource-config.service';
import { SdkService } from '../sdk/sdk.service';

@Component({
  selector: 'ec-entry-actionbar',
  template: selectTemplate,
  /* encapsulation: ViewEncapsulation.None, */
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => EntryActionbarComponent),
      multi: true,
    },
  ],
})
export class EntryActionbarComponent extends ActionbarComponent implements OnInit {
  entrySelectActions: Action[];
  selectedEntries;
  /** The event that focuses the input */
  @Input() focusEvent: EventEmitter<boolean> = new EventEmitter();
  /** The model to pick from, alternative to field with model property set. */
  @Input() model: string;
  /** The config that should be merged into the generated config */
  // tslint:disable-next-line:no-input-rename
  @Input('config') crudConfig: CrudConfig<EntryResource>;
  lightModel: any;

  constructor(
    public sdk: SdkService,
    public resourceConfig: ResourceConfig,
    public elementRef: ElementRef,
    public cdr: ChangeDetectorRef,
    public modelConfig: ModelConfigService,
  ) {
    super(elementRef, cdr);
  }

  ngOnInit() {
    if (!this.model) {
      this.loadModelActions();
    } else {
      this.loadEntryActions(this.model);
    }
  }

  getEntryAction(entry: EntryResource | LiteEntryResource) {
    return {
      id: entry._id,
      title: entry._entryTitle,
    };
  }

  async loadModelActions() {
    delete this.model;
    this.placeholder = 'Select Model...';
    const modelActions = await this.getModelActions();
    this.loadActions(modelActions);
  }

  async getModelActions(): Promise<Action[]> {
    await this.sdk.ready;
    return this.sdk.api.models.map((model) => ({
      id: 'model',
      select: false,
      title: model.title,
      action: () => this.loadEntryActions(model.title),
    }));
  }

  async loadEntryActions(model, filterOptions = {}) {
    this.model = model;
    this.lightModel = await this.modelConfig.getLightModel(this.model);
    const entryList = await this.sdk.api.entryList(model, filterOptions);
    const entryActions: any[] = entryList.getAllItems().map((entry) => this.getEntryAction(entry));
    this.placeholder = 'Select Entry from "' + model + '"...';
    entryActions.unshift({
      id: 'select-another-model',
      title: 'Select another model...',
      select: false,
      action: () => this.loadModelActions(),
    });
    const nextPageAction = this.getNextPageAction(entryList);
    if (nextPageAction) {
      entryActions.push(nextPageAction);
    }
    this.loadActions(entryActions);
  }

  getNextPageAction(entryList) {
    if (entryList.hasNextLink()) {
      return {
        id: 'load-next-page',
        title: 'Load More...',
        select: false,
        action: async () => {
          const nextPage = await entryList.followNextLink();
          const entryActions: any[] = nextPage.getAllItems().map((entry) => this.getEntryAction(entry));
          const allActions = (this.currentActions() || []).filter(a => a.id !== 'load-next-page').concat(entryActions);
          const nextPageAction = this.getNextPageAction(nextPage);
          if (nextPageAction) {
            allActions.push(nextPageAction);
          }
          this.loadActions(allActions);

        }
      };
    }
  }

  writeValue(value) {
    if (!value) {
      value = [];
    }
    this.selection?.replaceWith(value.map((liteEntry) => new Item(this.getEntryAction(liteEntry), this.config)));
  }

  filterDropdownList(listComponent: ListComponent<any>, query) {
    if (this.lightModel && this.model) {
      this.loadEntryActions(this.model, { [this.lightModel.titleField]: { search: query } }); // title: { search: query }
    } else {
      return super.filterDropdownList(listComponent, query);
    }
  }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""