File

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

Extends

ResourceActionbarComponent

Implements

OnInit

Metadata

selector ec-api-actionbar
template
selectTemplate

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(notificationService: NotificationsService, sdk: SdkService, resourceConfig: ResourceConfig, elementRef: ElementRef, cdr: ChangeDetectorRef)
Parameters :
Name Type Optional
notificationService NotificationsService No
sdk SdkService No
resourceConfig ResourceConfig No
elementRef ElementRef No
cdr ChangeDetectorRef No

Inputs

actions
Type : Action[]
Default value : [ { id: 'data', title: 'Datamanager', action: (item, actionbar) => this.loadResourceListActions({ api: this.sdk.datamanager, relation: 'dataManager', actionbar, action: (dm) => { this.sdk.useDatamanager(dm.shortID); actionbar.loadActions([ this.resourceAction({ actionbar, title: 'Models', relation: 'model', api: dm, action: (model) => actionbar.loadActions([ { id: 'entry', title: 'Entries', action: () => { this.sdk.api.entryList(model.title).then((entryList) => { const actions = entryList.getAllItems().map((listEntry) => { return { title: listEntry._entryTitle, id: listEntry.id, data: listEntry, action: (entryItem) => { const path = this.getPath().join('/'); this.openInEditor(path); }, }; }); actionbar.loadActions(actions); }); }, }, { id: 'edit', title: 'Edit Model', action: () => { const path = this.getPath().join('/'); this.openInEditor(path); }, }, ]), }), this.resourceAction({ actionbar, title: 'Asset Group', relation: 'assetGroup', path: 'asset-group', api: dm, action: () => this.openCurrentPath(), }), this.resourceAction({ actionbar, title: 'Datamanager Accounts', relation: 'dmAccount', api: dm, action: () => this.openCurrentPath(), }), { title: 'Edit', id: 'edit', action: () => this.openCurrentPath(), }, ]); }, }), }, { id: 'accounts', title: 'Account Server', action: (item, actionbar) => this.loadApiRelationActions(this.sdk.accounts, actionbar, () => this.openCurrentPath()), }, ]
actions
Type : Action[]
actions
Type : Action[]
Inherited from ActionbarComponent
config
Type : ActionbarConfig
Default value : { label: 'title', identifier: 'id', fields: { title: {}, }, }
Inherited from ActionbarComponent
root
Default value : 'ROOT'
Inherited from ActionbarComponent
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>
select
Type : EventEmitter<Item<Action>>
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

loadApiRelationActions
loadApiRelationActions(api: Core, actionbar: ActionbarComponent, action?: ActionFunction)
Parameters :
Name Type Optional Default value
api Core No
actionbar ActionbarComponent No this
action ActionFunction Yes
Returns : void
ngOnInit
ngOnInit()
Returns : void
openCurrentPath
openCurrentPath()
Returns : void
openInEditor
openInEditor(path, env: string)
Parameters :
Name Type Optional Default value
path No
env string No 'stage'
Returns : void
filterDropdownList
filterDropdownList(listComponent: ListComponent, query)
Parameters :
Name Type Optional
listComponent ListComponent<any> No
query No
Returns : any
getResourceListActions
getResourceListActions(listResource: ListResource, relation: string, action?: ActionFunction)
Parameters :
Name Type Optional
listResource ListResource No
relation string No
action ActionFunction Yes
Returns : Action[]
loadResourceListActions
loadResourceListActions(state: ResourceActionbarState, stack)
Parameters :
Name Type Optional Default value
state ResourceActionbarState No this.state
stack No true
Returns : Promise<Action[]>
ngOnInit
ngOnInit()
Returns : void
reload
reload()
Returns : void
resourceAction
resourceAction(undefined: literal type)
Parameters :
Name Type Optional
literal type No
Returns : { id: string; title: string; add: boolean; action: () => any; }
currentActions
currentActions()
Inherited from ActionbarComponent
Returns : {}
currentID
currentID()
Inherited from ActionbarComponent
Returns : any
getPath
getPath()
Inherited from ActionbarComponent
Returns : any
Async loadActions
loadActions(actions, addToStack)
Inherited from ActionbarComponent
Parameters :
Name Optional Default value
actions No
addToStack No true
Returns : any
loadActionsBefore
loadActionsBefore()
Inherited from ActionbarComponent
Returns : void
ngOnInit
ngOnInit()
Inherited from ActionbarComponent
Returns : void
reset
reset()
Inherited from ActionbarComponent
Returns : void
activate
activate(e)
Inherited from SelectComponent
Parameters :
Name Optional
e No
Returns : void
addItem
addItem(item: Item)
Inherited from SelectComponent

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

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
Returns : boolean
Public clickItem
clickItem(item, e?)
Inherited from SelectComponent

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
Parameters :
Name Type Optional
listComponent ListComponent<any> No
query No
Returns : void
focus
focus(e)
Inherited from SelectComponent
Parameters :
Name Optional
e No
Returns : void
focusSearchbar
focusSearchbar()
Inherited from SelectComponent
Returns : void
getArray
getArray(value)
Inherited from SelectComponent
Parameters :
Name Optional
value No
Returns : any
getParentTree
getParentTree(el, tree: [])
Inherited from SelectComponent
Parameters :
Name Type Optional Default value
el No
tree [] No []
Returns : any
handleKey
handleKey(e, list)
Inherited from SelectComponent
Parameters :
Name Optional
e No
list No
Returns : void
hasSoloSelection
hasSoloSelection()
Inherited from SelectComponent
Returns : boolean
initSelection
initSelection()
Inherited from SelectComponent

creates the collection from the config

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

Select handler. Toggles selection.

Parameters :
Name Optional
item No
list Yes
Returns : void
ngOnChanges
ngOnChanges()
Inherited from SelectComponent
Returns : void
ngOnInit
ngOnInit()
Inherited from SelectComponent
Returns : void
onChange
onChange()
Inherited from SelectComponent

Fires on selection change. Hides dropdown if solo

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

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

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

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

registers change method. (handled by angular)

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

Removes the given item from selection

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

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

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

Called when the model changes

Parameters :
Name Type Optional
value any No
Returns : void

Properties

Public cdr
Type : ChangeDetectorRef
Public elementRef
Type : ElementRef
Public notificationService
Type : NotificationsService
Public resourceConfig
Type : ResourceConfig
Public sdk
Type : SdkService
Public cdr
Type : ChangeDetectorRef
Public elementRef
Type : ElementRef
Public notificationService
Type : NotificationsService
Public resourceConfig
Type : ResourceConfig
Public sdk
Type : SdkService
state
Type : ResourceActionbarState
actionStack
Type : literal type
Default value : {}
Inherited from ActionbarComponent
Public cdr
Type : ChangeDetectorRef
Inherited from ActionbarComponent
Public elementRef
Type : ElementRef
Inherited from ActionbarComponent
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

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 { Action, ActionbarComponent, ActionFunction, NotificationsService, selectTemplate } from '@ec.components/ui';
import Core from 'ec.sdk/lib/Core';
import { ResourceConfig } from '../resource-config/resource-config.service';
import { SdkService } from '../sdk/sdk.service';
import { ResourceActionbarComponent } from './resource-actionbar.component';

@Component({
  selector: 'ec-api-actionbar',
  template: selectTemplate,
})
export class ApiActionbarComponent extends ResourceActionbarComponent implements OnInit {
  @Input() actions: Action[] = [
    {
      id: 'data',
      title: 'Datamanager',
      action: (item, actionbar) =>
        this.loadResourceListActions({
          api: this.sdk.datamanager,
          relation: 'dataManager',
          actionbar,
          action: (dm) => {
            this.sdk.useDatamanager(dm.shortID);
            actionbar.loadActions([
              this.resourceAction({
                actionbar,
                title: 'Models',
                relation: 'model',
                api: dm,
                action: (model) =>
                  actionbar.loadActions([
                    {
                      id: 'entry',
                      title: 'Entries',
                      action: () => {
                        this.sdk.api.entryList(model.title).then((entryList) => {
                          const actions = entryList.getAllItems().map((listEntry) => {
                            return {
                              title: listEntry._entryTitle,
                              id: listEntry.id,
                              data: listEntry,
                              action: (entryItem) => {
                                const path = this.getPath().join('/');
                                this.openInEditor(path);
                              },
                            };
                          });
                          actionbar.loadActions(actions);
                        });
                      },
                    },
                    {
                      id: 'edit',
                      title: 'Edit Model',
                      action: () => {
                        const path = this.getPath().join('/');
                        this.openInEditor(path);
                      },
                    },
                  ]),
              }),
              this.resourceAction({
                actionbar,
                title: 'Asset Group',
                relation: 'assetGroup',
                path: 'asset-group',
                api: dm,
                action: () => this.openCurrentPath(),
              }),
              this.resourceAction({
                actionbar,
                title: 'Datamanager Accounts',
                relation: 'dmAccount',
                api: dm,
                action: () => this.openCurrentPath(),
              }),
              {
                title: 'Edit',
                id: 'edit',
                action: () => this.openCurrentPath(),
              },
            ]);
          },
        }),
    },
    {
      id: 'accounts',
      title: 'Account Server',
      action: (item, actionbar) =>
        this.loadApiRelationActions(this.sdk.accounts, actionbar, () => this.openCurrentPath()),
    },
  ];

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

  loadApiRelationActions(api: Core, actionbar: ActionbarComponent = this, action?: ActionFunction) {
    const actions = Object.keys(api.getAvailableRelations()).map((relationName) => ({
      id: relationName,
      title: relationName,
      relation: relationName,
      action: (item) => {
        this.loadResourceListActions({ api, relation: relationName, actionbar, action });
      },
    }));
    actionbar.loadActions(actions);
  }

  openCurrentPath() {
    const path = this.getPath().join('/');
    this.openInEditor(path);
  }

  openInEditor(path, env = 'stage') {
    window.open(`https://localhost:4200/${env}/${path}`, '_blank');
  }

  ngOnInit() {
    this.loadActions(this.actions);
  }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""