ec.components documentation
  1. Components
  2. ActionbarComponent

File

packages/ui/src/lib/actionbar/actionbar.component.ts

Extends

SelectComponent

Implements

OnInit

Metadata

selector ec-actionbar
template 
selectTemplate

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(elementRef: ElementRef, cdr: ChangeDetectorRef)
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts:34
Parameters :
Name Type Optional
elementRef ElementRef No
cdr ChangeDetectorRef No

Inputs

actions
Type : Action[]
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts:33
config
Type : ActionbarConfig
Default value : { label: 'title', identifier: 'id', fields: { title: {}, }, }
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts:26
root
Default value : 'ROOT'
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts: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

currentActions
currentActions()
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts:79
Returns : {}
currentID
currentID()
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts:67
Returns : any
getPath
getPath()
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts:107
Returns : any
Async loadActions
loadActions(actions, addToStack)
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts:83
Parameters :
Name Optional Default value
actions No
addToStack No true
Returns : any
loadActionsBefore
loadActionsBefore()
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts:56
Returns : void
ngOnInit
ngOnInit()
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts:63
Returns : void
reset
reset()
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts: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

actionStack
Type : literal type
Default value : {}
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts:34
Public cdr
Type : ChangeDetectorRef
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts:36
Public elementRef
Type : ElementRef
Defined in packages/ui/src/lib/actionbar/actionbar.component.ts: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, Input, OnInit } from '@angular/core';
import { Item, List, ListConfig } from '@ec.components/core';
import { SelectComponent } from '../select/select.component';
import { selectTemplate } from '../select/select.component.html';

export type ActionFunction = (item?: Item<Action> | any, actionbar?: ActionbarComponent) => any;

export interface Action {
  title: string;
  id: string;
  path?: string;
  data?: any;
  select?: boolean;
  action?: ActionFunction;
  children?: List<Action>;
}

export interface ActionbarConfig extends ListConfig<Action> {}

@Component({
  selector: 'ec-actionbar',
  template: selectTemplate,
})
export class ActionbarComponent extends SelectComponent<Action> implements OnInit {
  @Input() root = 'ROOT'; // id of root stack item
  @Input() config: ActionbarConfig = {
    label: 'title',
    identifier: 'id',
    fields: {
      title: {},
    },
  };
  @Input() actions: Action[];
  actionStack: { [id: string]: Action[] } = {};

  constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
    super(elementRef, cdr);
    this.add.subscribe((item) => {
      if (item.getBody().select !== false) {
        this.selection.add(item);
      }
      if (item.getBody().action) {
        item.getBody().action(item, this);
      }
      if (item.getBody().children) {
        this.loadActions(item.getBody().children);
      }
      // this.searchbar.clear();
    });
    this.remove.subscribe((item) => {
      this.selection.remove(item);
      this.loadActionsBefore();
    });
  }

  loadActionsBefore() {
    const actionsBefore = this.actionStack[this.currentID()];
    if (actionsBefore) {
      this.loadActions(actionsBefore);
    }
  }

  ngOnInit() {
    this.loadActions(this.actions);
  }

  currentID() {
    if (!this.selection || this.selection.isEmpty()) {
      return this.root;
    }
    return this.selection.items[this.selection.items.length - 1].id();
  }

  reset() {
    this.selection.removeAll();
    this.loadActions(this.actionStack[this.currentID()]);
  }

  currentActions() {
    return this.actionStack[this.currentID()];
  }

  async loadActions(actions, addToStack = true) {
    let resolved;
    if (typeof actions === 'function') {
      resolved = await Promise.resolve(actions(this.actionStack, this));
    } else {
      resolved = [].concat(actions);
    }
    if (addToStack) {
      this.actionStack[this.currentID()] = actions;
    }
    this.list = new List(resolved, { size: 1000, ...this.config });
    if (resolved.length > this.list.config) {
      console.warn('actions exceed list size...');
    }
    if (!this.selection) {
      this.initSelection();
    }
    setTimeout(() => {
      if (this.dropdownList) {
        this.dropdownList.focusFirst();
      }
    });
  }

  getPath() {
    return this.selection.getValue();
  }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""