ec.components documentation
  1. Components
  2. ResourceActionbarComponent

File

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

Extends

ActionbarComponent

Implements

OnInit

Metadata

selector ec-resource-actionbar
template 
selectTemplate

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(notificationService: NotificationsService, sdk: SdkService, resourceConfig: ResourceConfig, elementRef: ElementRef, cdr: ChangeDetectorRef)
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:27
Parameters :
Name Type Optional
notificationService NotificationsService No
sdk SdkService No
resourceConfig ResourceConfig No
elementRef ElementRef No
cdr ChangeDetectorRef No

Inputs

actions
Type : Action[]
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:27
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

create
Type : EventEmitter<string>
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:24
select
Type : EventEmitter<Item<Action>>
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:25
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/resource-actionbar/resource-actionbar.component.ts:152
Parameters :
Name Type Optional
listComponent ListComponent<any> No
query No
Returns : any
getResourceListActions
getResourceListActions(listResource: ListResource, relation: string, action?: ActionFunction)
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:54
Parameters :
Name Type Optional
listResource ListResource No
relation string No
action ActionFunction Yes
Returns : Action[]
loadResourceListActions
loadResourceListActions(state: ResourceActionbarState, stack)
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:97
Parameters :
Name Type Optional Default value
state ResourceActionbarState No this.state
stack No true
Returns : Promise<Action[]>
ngOnInit
ngOnInit()
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:39
Returns : void
reload
reload()
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:90
Returns : void
resourceAction
resourceAction(undefined: literal type)
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:127
Parameters :
Name Type Optional
literal type No
Returns : { id: string; title: string; add: boolean; action: () => any; }
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/resource-actionbar/resource-actionbar.component.ts:34
Public elementRef
Type : ElementRef
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:33
Public notificationService
Type : NotificationsService
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:30
Public resourceConfig
Type : ResourceConfig
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:32
Public sdk
Type : SdkService
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:31
state
Type : ResourceActionbarState
Defined in packages/data/src/lib/resource-actionbar/resource-actionbar.component.ts:22
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, Input, OnInit, Output } from '@angular/core';
import { Item } from '@ec.components/core';
import { Action, ActionbarComponent, ActionFunction, ListComponent, NotificationsService, selectTemplate } from '@ec.components/ui';
import Core from 'ec.sdk/lib/Core';
import ListResource from 'ec.sdk/lib/resources/ListResource';
import { ResourceConfig } from '../resource-config/resource-config.service';
import { SdkService } from '../sdk/sdk.service';

export interface ResourceActionbarState {
  api: Core;
  relation: string;
  actionbar: ActionbarComponent;
  action?: ActionFunction;
  options?: Object;
}

@Component({
  selector: 'ec-resource-actionbar',
  template: selectTemplate,
})
export class ResourceActionbarComponent extends ActionbarComponent implements OnInit {
  state: ResourceActionbarState;

  @Output() create: EventEmitter<string> = new EventEmitter();
  @Output() select: EventEmitter<Item<Action>> = new EventEmitter();

  @Input() actions: Action[];

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

  ngOnInit() {
    const state = {
      api: this.sdk.api,
      relation: 'tags',
    };
    const { api, relation } = state;
    this.sdk.ready.then(() => {
      this.loadResourceListActions({
        api,
        relation,
        actionbar: this,
      });
    });
  }

  getResourceListActions(listResource: ListResource, relation: string, action?: ActionFunction): Action[] {
    const actions: Action[] = listResource.getAllItems().map((resource) => {
      const { identifier, label } = this.resourceConfig.get(relation);
      return {
        id: resource[identifier],
        title: resource[label] || '- no title -',
        data: resource,
        path: relation,
        action: (item, bar) => {
          if (action) {
            action(item.getBody().data, bar);
          }
        },
      };
    });
    if (listResource.hasNextLink()) {
      actions.push({
        id: 'next-page',
        title: `Load Page`,
        path: null,
        data: {},
        select: false,
        action: () => {
          listResource.followNextLink().then((list) => {
            const concatted = this.list.items
              .map((i) => i.getBody())
              .filter((i) => i.id !== 'next-page')
              .concat(this.getResourceListActions(list, relation, action));
            this.loadActions(concatted);
          });
        },
      });
    }
    return actions;
  }

  reload() {
    this.loadResourceListActions({
      ...this.state,
      options: {},
    });
  }

  loadResourceListActions(state: ResourceActionbarState = this.state, stack = true): Promise<Action[]> {
    const { api, relation, actionbar, action, options } = state;
    this.state = {
      ...this.state,
      ...state,
    };
    const loading = api
      .resourceList(relation, options)
      .then((list) => {
        return this.getResourceListActions(list, relation, action);
      })
      .then((actions) => {
        if (actions) {
          actionbar.loadActions(actions, stack);
        }
        return actions;
      })
      .catch((error) => {
        this.notificationService.emit({
          title: 'Error while loading Resources',
          error,
        });
      })
      .then((actions) => actions || []);
    if (actionbar.dropdownLoader) {
      actionbar.dropdownLoader.wait(loading);
    }
    return loading;
  }

  resourceAction({
    relation,
    title,
    api,
    action,
    actionbar,
    add,
    path,
  }: {
    relation: string;
    title: string;
    api: Core;
    action?: ActionFunction;
    actionbar?: ActionbarComponent;
    add?: boolean;
    path?: string;
  }) {
    return {
      id: path || relation,
      title: title,
      add,
      action: () => this.loadResourceListActions({ api, relation, actionbar, action }),
    };
  }

  filterDropdownList(listComponent: ListComponent<any>, query) {
    const paths = this.currentActions()
      .map((a) => a.path)
      .filter((value, index, self) => self.indexOf(value) === index)
      .filter((v) => !!v);
    if (!paths.length) {
      return super.filterDropdownList(listComponent, query);
    }
    const { identifier, label } = this.resourceConfig.get(this.state.relation);
    this.loadResourceListActions(
      {
        ...this.state,
        options: {
          [label + '~']: { exact: query },
        },
      },
      false,
    ).then((actions) => {
      if (actions.length === 0) {
        this.loadActions(
          [
            {
              title: `"${query}" erstellen`,
              id: 'createnew',
              select: false,
              action: () => {
                if (this.create.observers.length) {
                  this.create.emit(query);
                } else {
                  const item = new Item(
                    {
                      id: Date.now() + '',
                      title: query,
                    },
                    this.config,
                  );
                  this.addItem(item);
                  this.searchbar.clear();
                  this.reload();
                }
              },
            },
          ],
          false,
        );
      }
    });
  }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""