File

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

Description

Shows assets of a selection and is able to pick new ones from a crud list. https://components.entrecode.de/assets/asset-select?e=1

Extends

SelectComponent

Implements

OnInit

Metadata

encapsulation	`ViewEncapsulation.None`
providers	`{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AssetSelectComponent), multi: true, }`
selector	`ec-asset-select`
templateUrl	`./asset-select.component.html`

Index

Constructor

constructor(fileService: FileService, resourceConfig: ResourceConfig, notificationService: NotificationsService, sdk: SdkService, symbol: SymbolService, elementRef: ElementRef, cdr: ChangeDetectorRef)

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:73

Parameters :

Name	Type	Optional
fileService	`FileService`	No
resourceConfig	`ResourceConfig`	No
notificationService	`NotificationsService`	No
sdk	`SdkService`	No
symbol	`SymbolService`	No
elementRef	`ElementRef`	No
cdr	`ChangeDetectorRef`	No

Inputs

assetGroupID
Type : `string`
Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:59
The assetGroupID that should be picked from. If empty, legacy assets are used

config
Type : `CrudConfig<DMAssetResource \| PublicAssetResource>`
Default value : `{}`
Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:61
Configuration Object for List

custom
Type : `boolean`
Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:49
If true, a pop will open that can be used to rename files before upload

forceGroup
Default value : `false`
Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:57
If true, the asset group cannot be changed

formControl
Type : `FormControl`
Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:43
The formControl that is used.

item
Type : `Item<any>`
Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:53
The used item

placeholder
Type : `string`
Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:51
Custom Placeholder

readOnly
Default value : `false`
Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:55
If true, the selection cannot be changed and no uploads can be made.

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

containsNewAssets

containsNewAssets()

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:100

Returns : any

containsOldAssets

containsOldAssets()

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:103

Returns : boolean

getAssetGroupID

getAssetGroupID()

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:107

Returns : any

groupReady

groupReady()

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:158

Returns : string

initConfig

initConfig()

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:116

Returns : CrudConfig<DMAssetResource | PublicAssetResource>

onChange

onChange()

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:169

On Change check if solo, if true, close pop

Returns : void

setGroup

setGroup(group)

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:87

Parameters :

Name	Optional
group	No

Returns : void

writeValue

writeValue(value: any)

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:163

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/asset-select/asset-select.component.ts:82

Protected control

Type : FormControl

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:47

The form control that is used

Public dmAssetConfig

Default value : Object.assign({}, this.resourceConfig.get('dmAsset'))

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:65

config for new assets

Public elementRef

Type : ElementRef

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:81

Public fileService

Type : FileService

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:76

Public focusEvent

Type : EventEmitter<boolean>

Default value : new EventEmitter()

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:73

The event that focuses the url input

Protected group

Type : FormGroup

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:45

The form group that is used

Public legacyAssetConfig

Default value : Object.assign({}, this.resourceConfig.get('legacyAsset'), { forceGroup: true })

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:67

config for legacy assets

Public notificationService

Type : NotificationsService

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:78

pop

Type : AssetListPopComponent

Decorators :


                                @ViewChild(AssetListPopComponent)

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:63

The asset selection pop

Public resourceConfig

Type : ResourceConfig

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:77

Public sdk

Type : SdkService

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:79

showUrlInput

Default value : false

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:71

Wether or not the url input should be visible

Public symbol

Type : SymbolService

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:80

urlsToUpload

Type : string

Default value : ''

Defined in packages/data/src/lib/files/asset-select/asset-select.component.ts:69

The Url to upload from

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,
  ViewChild,
  ViewEncapsulation,
} from '@angular/core';
import { FormControl, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Item } from '@ec.components/core';
import { NotificationsService, SelectComponent, SymbolService } from '@ec.components/ui';
import DMAssetResource from 'ec.sdk/lib/resources/publicAPI/DMAssetResource';
import PublicAssetResource from 'ec.sdk/lib/resources/publicAPI/PublicAssetResource';
import { CrudConfig } from '../../crud/crud-config.interface';
import { ResourceConfig } from '../../resource-config/resource-config.service';
import { SdkService } from '../../sdk/sdk.service';
import { AssetListPopComponent } from '../asset-list-pop/asset-list-pop.component';
import { FileService } from '../file.service';

/** Shows assets of a selection and is able to pick new ones from a crud list.
 * <example-url>https://components.entrecode.de/assets/asset-select?e=1</example-url>
 */
@Component({
  selector: 'ec-asset-select',
  templateUrl: './asset-select.component.html',
  encapsulation: ViewEncapsulation.None,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AssetSelectComponent),
      multi: true,
    },
  ],
})
export class AssetSelectComponent extends SelectComponent<DMAssetResource | PublicAssetResource> implements OnInit {
  /** The formControl that is used. */
  @Input() formControl: FormControl;
  /** The form group that is used */
  protected group: FormGroup;
  /** The form control that is used */
  protected control: FormControl;
  /** If true, a pop will open that can be used to rename files before upload */
  @Input() custom: boolean;
  /** Custom Placeholder */
  @Input() placeholder: string;
  /** The used item */
  @Input() item: Item<any>;
  /** If true, the selection cannot be changed and no uploads can be made. */
  @Input() readOnly = false;
  /** If true, the asset group cannot be changed */
  @Input() forceGroup = false;
  /** The assetGroupID that should be picked from. If empty, legacy assets are used */
  @Input() assetGroupID: string;
  /** Configuration Object for List */
  @Input() config: CrudConfig<DMAssetResource | PublicAssetResource> = {};
  /** The asset selection pop */
  @ViewChild(AssetListPopComponent) pop: AssetListPopComponent;
  /** config for new assets */
  public dmAssetConfig = Object.assign({}, this.resourceConfig.get('dmAsset'));
  /** config for legacy assets */
  public legacyAssetConfig = Object.assign({}, this.resourceConfig.get('legacyAsset'), { forceGroup: true });
  /** The Url to upload from */
  urlsToUpload = '';
  /** Wether or not the url input should be visible */
  showUrlInput = false;
  /** The event that focuses the url input */
  public focusEvent: EventEmitter<boolean> = new EventEmitter();

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

  setGroup(group) {
    if (!group) {
      return;
    }
    let config;
    if (group === 'legacyAsset') {
      config = Object.assign({}, this.legacyAssetConfig);
    }
    config = Object.assign({}, this.initConfig());
    this.assetGroupID = group;
    this.useConfig(config);
  }

  containsNewAssets() {
    return this.value && this.fileService.isNewAsset(this.value);
  }
  containsOldAssets() {
    return this.value && !this.fileService.isNewAsset(this.value, true);
  }

  getAssetGroupID() {
    if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {
      return 'legacyAsset';
    } else if (Array.isArray(this.value)) {
      return this.value[0].assetGroupID || 'legacyAsset';
    }
    return this.value.assetGroupID;
  }

  initConfig(): CrudConfig<DMAssetResource | PublicAssetResource> {
    let config = {};
    if (!this.formControl) {
      this.formControl = new FormControl(this.value || []);
    }
    if (this.containsOldAssets() && this.containsNewAssets()) {
      console.error('Mixed Content!', this.formControl.value);
      return;
    }
    if (this.assetGroupID === 'null') {
      delete this.assetGroupID;
    }
    const isOldAssetGroupID = this.fileService.isOldAssetGroupID(this.assetGroupID);
    if (this.containsNewAssets() || !isOldAssetGroupID) {
      if (isOldAssetGroupID) {
        this.notificationService.emit({
          title: 'Falsche Assets',
          type: 'error',
          sticky: true,
          message: `ALARM: asset picker hat neues asset aber assetGroupID "${this.assetGroupID}".
          Bitte füge im model die assetGroupID "${this.getAssetGroupID()}" als validation des feldes hinzu`,
        });
      }
      config = this.dmAssetConfig;
      this.assetGroupID = this.assetGroupID || this.getAssetGroupID();
    } else if (this.containsOldAssets() || isOldAssetGroupID) {
      // legacy assets
      if (!isOldAssetGroupID) {
        this.notificationService.emit({
          title: 'Falsche Assets',
          type: 'error',
          sticky: true,
          message: `ALARM: asset picker hat altes asset aber assetGroupID "${this.assetGroupID}".
          Entweder asset entfernen oder validation rausnehmen.`,
        });
      }
      config = this.legacyAssetConfig;
      this.assetGroupID = 'legacyAsset';
    }
    return Object.assign(config, { solo: !!this.solo, size: 24 });
  }

  groupReady() {
    return this.assetGroupID;
  }

  /** Called when the model changes */
  writeValue(value: any) {
    this.value = value;
    this.useConfig(this.initConfig());
    this.use(value, false);
  }
  /** On Change check if solo, if true, close pop */
  onChange() {
    super.onChange();
    if (this.config.solo && this.pop) {
      this.pop.hide();
    }
  }
}

<div
  *ngIf="selection"
  class="ec-asset-select ec-dropzone"
  (ecDropzone)="uploadSelect?.uploader?.uploadFiles($event.dataTransfer.files, $event)"
  [disabled]="readOnly"
  [class.ec-asset-select_solo]="solo"
  [class.empty]="!selection?.items?.length"
>
  <div class="ec-dropzone__info">drop to upload</div>
  <ec-upload-select
    [custom]="config?.customUpload"
    #uploadSelect
    (uploaded)="fileService.selectUpload($event, selection)"
    (browse)="assetListPop.show()"
    [config]="config"
    [readOnly]="readOnly"
    [assetGroupID]="assetGroupID"
    [options]="config?.fileOptions"
  ></ec-upload-select>
  <div *ngIf="selection.items.length" class="ec-asset-selected">
    <ul class="ec-asset-selected__items" data-grid="small-gutter" dndDropzone (dndDrop)="onDrop($event)">
      <li
        *ngFor="let selected of selection.items"
        class="ec-asset-selected__item"
        data-col="3@sm"
        [dndDisableIf]="solo || config?.disableDrag"
        [class.is-dragged]="selected === dragged"
        dndEffectAllowed="move"
        [dndDraggable]="selected.id()"
        (dndStart)="onDragStart(selected, $event, item)"
        (dndCanceled)="cancelDrag(selected, $event, item)"
        (dndEnd)="cancelDrag(selected, $event, item)"
        #item
      >
        <div class="ec-asset-card">
          <img [src]="selected.resolve('thumb')" />
          <nav class="ec-asset-card-controls">
            <a
              (click)="selection.remove(selected)"
              class="ec-asset-card-controls__remove"
              *ngIf="!readOnly && !config?.disableRemove"
            >
              <ec-icon name="close"></ec-icon>
            </a>
          </nav>
        </div>
      </li>
      <li dndPlaceholderRef class="ec-asset-selected__item" data-col="3@sm">
        <div class="ec-asset-card">
          <div class="drag-placeholder"></div>
        </div>
      </li>
    </ul>
  </div>
  <ec-asset-list-pop
    (groupChanged)="setGroup($event)"
    [assetGroupID]="assetGroupID"
    (columnClicked)="listItemClicked($event)"
    [config]="config"
    [selection]="selection"
    [active]="config?.nestedPopActive"
    #assetListPop
  ></ec-asset-list-pop>
</div>

Legend

Html element

Component

Html element with directive

File

Description

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Constructor

Inputs

Outputs

Methods

Properties

result-matching ""

No results matching ""