/* * Squidex Headless CMS * * @license * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core'; import { AssetDto, AssetsState, LocalStoreService, Query, Settings, StatefulComponent } from '@app/shared/internal'; interface State { // The selected assets. selectedAssets: { [id: string]: AssetDto }; // The number of selected items. selectionCount: number; // True, when rendering the assets as list. isListView: boolean; } @Component({ selector: 'sqx-assets-selector', styleUrls: ['./assets-selector.component.scss'], templateUrl: './assets-selector.component.html', changeDetection: ChangeDetectionStrategy.OnPush }) export class AssetsSelectorComponent extends StatefulComponent implements OnInit { @Output() public select = new EventEmitter>(); constructor(changeDector: ChangeDetectorRef, public readonly assetsState: AssetsState, public readonly localStore: LocalStoreService ) { super(changeDector, { selectedAssets: {}, selectionCount: 0, isListView: localStore.getBoolean(Settings.Local.ASSETS_MODE) }); } public ngOnInit() { this.assetsState.load(); } public reload() { this.assetsState.load(true); } public search(query: Query) { this.assetsState.search(query); } public emitComplete() { this.select.emit([]); } public emitSelect() { this.select.emit(Object.values(this.snapshot.selectedAssets)); } public selectTags(tags: ReadonlyArray) { this.assetsState.selectTags(tags); } public selectAsset(asset: AssetDto) { this.next(s => { const selectedAssets = { ...s.selectedAssets }; if (selectedAssets[asset.id]) { delete selectedAssets[asset.id]; } else { selectedAssets[asset.id] = asset; } const selectionCount = Object.keys(selectedAssets).length; return { ...s, selectedAssets, selectionCount }; }); } public changeView(isListView: boolean) { this.next(s => ({ ...s, isListView })); this.localStore.setBoolean(Settings.Local.ASSETS_MODE, isListView); } }