yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use repository in media picker

Browse Source
This commit is contained in:
Mads Rasmussen
2023-02-08 21:39:22 +01:00
parent 10a0c0e347
commit a3c462976e
1 changed files with 15 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
View File

@@ -4,13 +4,9 @@ import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../core/modal';
import {
MediaTreeItem,
UmbMediaTreeStore,
UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN,
} from '../../../../backoffice/media/media/media.tree.store';
import { UmbMediaRepository } from '../../../media/media/repository/media.repository';
import { UmbLitElement } from '@umbraco-cms/element';
import type { FolderTreeItem } from '@umbraco-cms/backend-api';
import type { EntityTreeItem, FolderTreeItem } from '@umbraco-cms/backend-api';
import type { UmbObserverController } from '@umbraco-cms/observable-api';
@customElement('umb-input-media-picker')
@@ -89,11 +85,11 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
}
@state()
private _items?: Array<MediaTreeItem>;
private _items?: Array<EntityTreeItem>;
private _modalService?: UmbModalService;
private _mediaStore?: UmbMediaTreeStore;
private _pickedItemsObserver?: UmbObserverController<FolderTreeItem>;
private _repository = new UmbMediaRepository(this);
constructor() {
super();
@@ -109,26 +105,29 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
() => !!this.max && this._selectedKeys.length > this.max
);
this.consumeContext(UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN, (instance) => {
this._mediaStore = instance;
this._observePickedMedias();
});
this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => {
this._modalService = instance;
});
}
connectedCallback(): void {
super.connectedCallback();
this._observePickedMedias();
}
protected getFormElement() {
return undefined;
}
private _observePickedMedias() {
private async _observePickedMedias() {
this._pickedItemsObserver?.destroy();
if (!this._mediaStore) return;
// TODO: consider changing this to the list data endpoint when it is available
this._pickedItemsObserver = this.observe(this._mediaStore.getTreeItems(this._selectedKeys), (items) => {
const { asObservable } = await this._repository.requestTreeItems(this._selectedKeys);
if (!asObservable) return;
this._pickedItemsObserver = this.observe(asObservable(), (items) => {
this._items = items;
});
}
@@ -163,7 +162,6 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
private _setSelection(newSelection: Array<string>) {
this.selectedKeys = newSelection;
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
console.log(this._items);
}
render() {