ec.components documentation
  1. Components
  2. TagSelectComponent

File

packages/data/src/lib/files/tag-select/tag-select.component.ts

Extends

ResourceSelectComponent

Implements

OnInit OnChanges

Metadata

selector ec-tag-select
templateUrl ../../resource-select/resource-select.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(resourceConfig: ResourceConfig, auth: AuthService, elementRef: ElementRef, symbol: SymbolService, cdr: ChangeDetectorRef, sdk: SdkService)
Defined in packages/data/src/lib/files/tag-select/tag-select.component.ts:17
Parameters :
Name Type Optional
resourceConfig ResourceConfig No
auth AuthService No
elementRef ElementRef No
symbol SymbolService No
cdr ChangeDetectorRef No
sdk SdkService No

Inputs

api
Type : Core
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:59

The api to use

config
Type : CrudConfig<Resource>
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:66

The config that should be merged into the generated config

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

The event that focuses the input

formControl
Type : FormControl
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:53

The formControl that is used.

relation
Type : string
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:57

The relation of the resource.

solo
Type : boolean
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:63

Wether or not the selection should be solo

value
Type : Array<Resource>
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:55

The value that should be prefilled

config
Type : ListConfig<T>
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:48

Configuration Object for List

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

If true, the input will be disabled

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

Event emitter to focus input

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

The formControl that is used.

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

The Instance of the List

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

Input placeholder

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

The used selection

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

Wether or not the selection should be solo

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

The visible items

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

Available Items

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 ResourceSelectComponent
Defined in ResourceSelectComponent:64

Emits when an item is being added

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

Event emitter on item selection

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

Emits the query when enter is pressed

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

Subject that is nexted when enter is pressed

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

Event emitter on selected item click

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

Emits when an item is being removed

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

init
init()
Defined in packages/data/src/lib/files/tag-select/tag-select.component.ts:68
Returns : void
useConfig
useConfig(config: object)
Defined in packages/data/src/lib/files/tag-select/tag-select.component.ts:35
Parameters :
Name Type Optional Default value
config object No {}
Returns : void
clickItem
clickItem(item, e)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:157

Is called when a selected item is clicked. Either outputs itemClick (if subscribed) or opens the edit pop if puttable.

Parameters :
Name Optional
item No
e No
Returns : any
defaultPlaceholder
defaultPlaceholder()
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:122
Returns : any
editItem
editItem(item: Item, e)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:226

Is called when a selected item has been clicked.

Parameters :
Name Type Optional
item Item<Resource> No
e No
Returns : void
focusSearchbar
focusSearchbar()
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:243
Returns : void
formSubmitted
formSubmitted(form: Form)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:204

Is called when the nested resource-form has been saved. Selects the fresh resource and clears the form

Parameters :
Name Type Optional
form Form<EntryResource> No
Returns : void
Public hasMethod
hasMethod(method: string)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:175

Returns true if the given method is part of the methods array (or if there is no methods array)

Parameters :
Name Type Optional
method string No
Returns : boolean
init
init()
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:180

Inits the select with api, relation and config setup

Returns : void
ngOnChanges
ngOnChanges()
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:99
Returns : void
ngOnInit
ngOnInit()
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:95
Returns : void
onChange
onChange()
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:235
Returns : void
pasteValue
pasteValue(e)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:214
Parameters :
Name Optional
e No
Returns : void
togglePop
togglePop(e?, noFocus)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:103
Parameters :
Name Optional Default value
e Yes
noFocus No false
Returns : void
useConfig
useConfig(config: CrudConfig)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:130

Calls super.useConfig and then creates special dropdownConfig with just entryTitle as field

Parameters :
Name Type Optional Default value
config CrudConfig<Resource> No {}
Returns : void
useMethods
useMethods(methods)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:169
Parameters :
Name Optional
methods No
Returns : void
activate
activate(e)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:283
Parameters :
Name Optional
e No
Returns : void
addItem
addItem(item: Item)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent: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 ResourceSelectComponent
Defined in ResourceSelectComponent: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 ResourceSelectComponent
Defined in ResourceSelectComponent:298
Returns : boolean
Public clickItem
clickItem(item, e?)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent: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 ResourceSelectComponent
Defined in ResourceSelectComponent:360
Parameters :
Name Type Optional
listComponent ListComponent<any> No
query No
Returns : void
focus
focus(e)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:219
Parameters :
Name Optional
e No
Returns : void
focusSearchbar
focusSearchbar()
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:229
Returns : void
getArray
getArray(value)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:175
Parameters :
Name Optional
value No
Returns : any
getParentTree
getParentTree(el, tree: [])
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:103
Parameters :
Name Type Optional Default value
el No
tree [] No []
Returns : any
handleKey
handleKey(e, list)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:302
Parameters :
Name Optional
e No
list No
Returns : void
hasSoloSelection
hasSoloSelection()
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:225
Returns : boolean
initSelection
initSelection()
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:119

creates the collection from the config

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

Select handler. Toggles selection.

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

Fires on selection change. Hides dropdown if solo

Returns : void
onDragStart
onDragStart(item, e, target)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent: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 ResourceSelectComponent
Defined in ResourceSelectComponent:264

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

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

registers change method. (handled by angular)

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

Removes the given item from selection

Parameters :
Name Type Optional
item Item<any> No
e Yes
Returns : void
setDisabledState
setDisabledState(isDisabled)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:371
Parameters :
Name Optional
isDisabled No
Returns : void
use
use(value, event)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent: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 ResourceSelectComponent
Defined in ResourceSelectComponent: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 ResourceSelectComponent
Defined in ResourceSelectComponent:148

Called when the model changes

Parameters :
Name Type Optional
value any No
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/files/tag-select/tag-select.component.ts:24
config
Type : CrudConfig<any>
Defined in packages/data/src/lib/files/tag-select/tag-select.component.ts:17
Public elementRef
Type : ElementRef
Defined in packages/data/src/lib/files/tag-select/tag-select.component.ts:22
placeholder
Default value : this.symbol.resolve('tag-select.placeholder')
Defined in packages/data/src/lib/files/tag-select/tag-select.component.ts:16
relation
Type : string
Default value : 'tags'
Defined in packages/data/src/lib/files/tag-select/tag-select.component.ts:15
Public sdk
Type : SdkService
Defined in packages/data/src/lib/files/tag-select/tag-select.component.ts:25
Public symbol
Type : SymbolService
Defined in packages/data/src/lib/files/tag-select/tag-select.component.ts:23
Public cdr
Type : ChangeDetectorRef
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:85
Public config
Type : CrudConfig<Resource>
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:61

The config that is being generated.

Protected control
Type : FormControl
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:51

The form control that is used

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

The crud pop with the list to select from

dropdownConfig
Type : CrudConfig<Resource>
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:76

The config of the dropdown pop

dropdownList
Type : ResourceListComponent
Decorators :
@ViewChild('dropdownList')
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:70

The nested resource list in the dropdown

Public elementRef
Type : ElementRef
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:83
Protected group
Type : FormGroup
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:49

The form group that is used

Protected item
Type : Item<any>
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:47

The item that is targeted by the input

resourceListPop
Type : ResourceListPopComponent
Decorators :
@ViewChild(ResourceListPopComponent, {static: true})
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:74

The nested resource list pop

resourcePop
Type : ResourcePopComponent
Decorators :
@ViewChild(ResourcePopComponent)
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:72

The nested resource pop for editing and creating

Public symbol
Type : SymbolService
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:84
Public cdr
Type : ChangeDetectorRef
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:90
dragged
Type : Item<T>
Inherited from ResourceSelectComponent
Defined in ResourceSelectComponent:46

the current dragged element

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

The selection dropdown

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

The list in the dropdown

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

The loader inside the dropdown

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

Propagates formControl/ngModel changes

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

The nested searchbar

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

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

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 { Component, OnInit, ChangeDetectorRef, ElementRef, OnChanges } from '@angular/core';
import { ResourceSelectComponent } from '../../resource-select/resource-select.component';
import { SymbolService } from '@ec.components/ui';
import { ResourceConfig } from '../../resource-config/resource-config.service';
import { SdkService } from '../../sdk/sdk.service';
import { Item } from '@ec.components/core';
import { AuthService } from '../../auth/auth.service';
import { CrudConfig } from '../../crud/crud-config.interface';

@Component({
  selector: 'ec-tag-select',
  templateUrl: '../../resource-select/resource-select.component.html',
})
export class TagSelectComponent extends ResourceSelectComponent implements OnInit, OnChanges {
  relation = 'tags';
  placeholder = this.symbol.resolve('tag-select.placeholder');
  config: CrudConfig<any>;

  constructor(
    protected resourceConfig: ResourceConfig,
    protected auth: AuthService,
    public elementRef: ElementRef,
    public symbol: SymbolService,
    public cdr: ChangeDetectorRef,
    public sdk: SdkService,
  ) {
    super(resourceConfig, auth, elementRef, symbol, cdr);
    this.enterPressed.asObservable().subscribe((s) => {
      this.selection.add(new Item({ tag: this.searchbar.query }, this.config));
      this.searchbar.clear();
      this.dropdownList.list.clearFilter();
    });
  }

  useConfig(config = {}) {
    super.useConfig(config);
    this.config = {
      label: 'tag',
      identifier: 'tag',
      methods: ['get'],
      defaultFilter: false,
      disableHeader: true,
      disableListPop: true,
      disableCreatePop: true,
      fields: {
        tag: {
          view: 'string',
        },
      },
      dropdownFields: {
        tag: {
          view: 'string',
        },
      },
    };
    this.dropdownConfig = {
      disableHeader: true,
      label: 'tag',
      identifier: 'tag',
      fields: {
        tag: {
          view: 'string',
        },
      },
    };
  }

  init() {
    this.sdk.ready.then(() => {
      this.api = this.sdk.api;
      super.init();
    });
  }
}

<div class="ec-resource-select">
  <div class="ec-select" [class.ec-select_solo]="solo" [class.is-empty]="selection?.isEmpty()"
    (click)="togglePop($event)" [class.has-searchbar]="!config?.disableSearchbar">
    <ul class="ec-select-selection">
      <li *ngIf="config?.disableSearchbar&&selection.isEmpty()">
        <span class="ec-select__placeholder">
          {{placeholder||defaultPlaceholder()}}
        </span>
      </li>
      <li *ngFor="let selected of selection?.items">
        <span [class.ec-select-selected]="!solo" [class.ec-select-selected_solo]="solo"
          (click)="clickItem(selected, $event)">
          {{selected.display()}}
          <a (click)="removeItem(selected,$event);" *ngIf="!config?.disableRemove&&!disabled">&times;</a>
        </span>
      </li>
      <li *ngIf="!config?.disableSearchbar" class="ec-select__searchbar">
        <ec-searchbar [disabled]="disabled" [focusEvent]="focusEvent" [autofocus]="false" [property]="config?.label||dropdownConfig?.label"
          [placeholder]="placeholder||defaultPlaceholder()" (pasted)="pasteValue($event)"
          (keypressed)="handleKey($event,dropdownList)" (focus)="focus($event)"
          (queryChanged)="filterDropdownList(dropdownList,$event)"></ec-searchbar>
      </li>
    </ul>
    <ec-pop class="ec-select-options" #dropdown [hideOnClickOutside]="true">
      <ec-loader class="ec-loader loader is-local" #dropdownLoader></ec-loader>
      <ec-resource-list (changed)="searchbar.updatedList($event)" #dropdownList *ngIf="dropdown.activated"
        [relation]="relation" [api]="api" [config]="dropdownConfig" [selection]="selection" [loader]="dropdownLoader"
        (columnClicked)="listItemClicked($event,dropdownList)"></ec-resource-list>
    </ec-pop>
  </div>
  <ec-resource-list-pop (pasted)="pasteValue($event)" (columnClicked)="listItemClicked($event)" #resourceListPop
    [api]="api" [relation]="relation" [config]="config" [selection]="selection"></ec-resource-list-pop>
  <ec-resource-pop #resourcePop [api]="api" [relation]="relation" [config]="config" (submitted)="formSubmitted($event)"
    (deleted)="removeItem($event)" *ngIf="config"></ec-resource-pop>
  <nav class="ec-resource-select__controls">
    <a (click)="editItem(selection?.items[0],$event)" class="btn btn_clear btn_square"
      *ngIf="solo&&hasMethod('put')&&!selection?.isEmpty()">
      <ec-icon name="edit"></ec-icon>
    </a>
    <a (click)="resourcePop.create()" class="btn btn_clear btn_square" *ngIf="!disabled&&!config?.disableCreatePop&&hasMethod('post')">
      <ec-icon name="add"></ec-icon>
    </a>
    <a (click)="resourceListPop.show($event)" class="btn btn_clear btn_square" *ngIf="!config?.disableListPop&&hasMethod('get')&&!disabled">
      <ec-icon name="search"></ec-icon>
    </a>
  </nav>
</div>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""