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

fix search. move create button to different element

Browse Source
This commit is contained in:
Lone Iversen
2024-05-08 15:40:56 +02:00
parent e7c6d89e37
commit 94092f242d
4 changed files with 93 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/index.ts
View File

@@ -1 +1,2 @@
export * from './media-picker-folder-path.element.js';
export * from './media-picker-create-item.element.js';

87
src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-create-item.element.ts Normal file
View File

@@ -0,0 +1,87 @@
import { css, html, customElement, state, repeat, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { type UmbAllowedMediaTypeModel, UmbMediaTypeStructureRepository } from '@umbraco-cms/backoffice/media-type';
@customElement('umb-media-picker-create-item')
export class UmbMediaPickerCreateItemElement extends UmbLitElement {
#mediaTypeStructure = new UmbMediaTypeStructureRepository(this); // used to get allowed media items
private _mediaTypeUnique: string | null = null;
@property()
public set mediaTypeUnique(value: string | null) {
this._mediaTypeUnique = value;
this.#getAllowedMediaTypes();
}
public get mediaTypeUnique() {
return this._mediaTypeUnique;
}
@state()
private _popoverOpen = false;
@state()
private _allowedMediaTypes: Array<UmbAllowedMediaTypeModel> = [];
async #getAllowedMediaTypes() {
const { data: allowedMediaTypes } = await this.#mediaTypeStructure.requestAllowedChildrenOf(this._mediaTypeUnique);
this._allowedMediaTypes = allowedMediaTypes?.items ?? [];
}
#onPopoverToggle(event: ToggleEvent) {
this._popoverOpen = event.newState === 'open';
}
render() {
return html`
<uui-button
popovertarget="collection-action-menu-popover"
label=${this.localize.term('actions_create')}
color="default"
look="outline">
${this.localize.term('actions_create')}
<uui-symbol-expand .open=${this._popoverOpen}></uui-symbol-expand>
</uui-button>
<uui-popover-container
id="collection-action-menu-popover"
placement="bottom-start"
@toggle=${this.#onPopoverToggle}>
<umb-popover-layout>
<uui-scroll-container>
${!this._allowedMediaTypes.length
? html`<div id="not-allowed">${this.localize.term('mediaPicker_notAllowed')}</div>`
: repeat(
this._allowedMediaTypes,
(item) => item.unique,
(item) =>
html`<uui-menu-item
label=${item.name}
@click=${() =>
alert(
'TODO: Open workspace (create) from modal. You can drop the files into this modal for now.',
)}>
<umb-icon slot="icon" name=${item.icon ?? 'icon-circle-dotted'}></umb-icon>
</uui-menu-item>`,
)}
</uui-scroll-container>
</umb-popover-layout>
</uui-popover-container>
`;
}
static styles = [
css`
#not-allowed {
padding: var(--uui-size-space-3);
}
`,
];
}
export default UmbMediaPickerCreateItemElement;
declare global {
interface HTMLElementTagNameMap {
'umb-media-picker-create-item': UmbMediaPickerCreateItemElement;
}
}

8
src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.ts
View File

@@ -2,21 +2,17 @@ import type { UmbMediaPathModel } from '../types.js';
import type { UmbMediaDetailModel } from '../../../types.js';
import { UmbMediaDetailRepository } from '../../../repository/index.js';
import { UmbMediaTreeRepository } from '../../../tree/media-tree.repository.js';
import type { UmbMediaPickerModalData, UmbMediaPickerModalValue } from '../media-picker-modal.token.js';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
import { css, html, customElement, state, repeat, property } from '@umbraco-cms/backoffice/external/lit';
import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
import { UmbId } from '@umbraco-cms/backoffice/id';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { getUmbracoFolderUnique } from '@umbraco-cms/backoffice/media-type';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
const root = { name: 'Media', unique: null };
@customElement('umb-media-picker-folder-path')
export class UmbMediaPickerFolderPathElement extends UmbModalBaseElement<
UmbMediaPickerModalData,
UmbMediaPickerModalValue
> {
export class UmbMediaPickerFolderPathElement extends UmbLitElement {
#mediaTreeRepository = new UmbMediaTreeRepository(this); // used to get file structure
#mediaDetailRepository = new UmbMediaDetailRepository(this); // used to create folders

80
src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts
View File

@@ -1,9 +1,4 @@
import {
type UmbMediaItemModel,
UmbMediaItemRepository,
UmbMediaUrlRepository,
UmbMediaDetailRepository,
} from '../../repository/index.js';
import { type UmbMediaItemModel, UmbMediaItemRepository, UmbMediaUrlRepository } from '../../repository/index.js';
import { UmbMediaTreeRepository } from '../../tree/media-tree.repository.js';
import type { UmbMediaCardItemModel } from './types.js';
import type { UmbMediaPickerFolderPathElement } from './components/media-picker-folder-path.element.js';
@@ -12,7 +7,6 @@ import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
import { css, html, customElement, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
import { mime } from '@umbraco-cms/backoffice/external/mime';
import { type UmbAllowedMediaTypeModel, UmbMediaTypeStructureRepository } from '@umbraco-cms/backoffice/media-type';
@customElement('umb-media-picker-modal')
export class UmbMediaPickerModalElement extends UmbModalBaseElement<UmbMediaPickerModalData, UmbMediaPickerModalValue> {
@@ -37,14 +31,6 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<UmbMediaPick
@state()
private _selectableNonImages = true;
@state()
private _allowedMediaTypes: Array<UmbAllowedMediaTypeModel> = [];
@state()
_popoverOpen = false;
#mediaTypeStructure = new UmbMediaTypeStructureRepository(this);
connectedCallback(): void {
super.connectedCallback();
this._selectableNonImages = this.data?.selectableNonImages ?? true;
@@ -61,7 +47,6 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<UmbMediaPick
this.#mediaItemsCurrentFolder = await this.#mapMediaUrls(data?.items ?? []);
this.#filterMediaItems();
this.#getAllowedMediaTypes();
}
async #mapMediaUrls(items: Array<UmbMediaItemModel>): Promise<Array<UmbMediaCardItemModel>> {
@@ -118,11 +103,7 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<UmbMediaPick
}
// Map urls for search results as we are going to show for all folders (as long they aren't trashed).
this._mediaFilteredList = await this.#mapMediaUrls(
data.filter((found) => {
found.isTrashed ? false : false;
}),
);
this._mediaFilteredList = await this.#mapMediaUrls(data.filter((found) => found.isTrashed === false));
}
#onSearch(e: UUIInputEvent) {
@@ -170,7 +151,7 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<UmbMediaPick
#renderToolbar() {
return html`<div id="toolbar">
${this.#renderDropdown()}
<umb-media-picker-create-item .mediaTypeUnique=${null}></umb-media-picker-create-item>
<div id="search">
<uui-input
label=${this.localize.term('general_search')}
@@ -188,58 +169,6 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<UmbMediaPick
// Where should this be placed, without it looking terrible?
// <uui-checkbox @change=${() => (this._searchOnlyThisFolder = !this._searchOnlyThisFolder)} label=${this.localize.term('general_excludeFromSubFolders')}></uui-checkbox>
#onPopoverToggle(event: ToggleEvent) {
this._popoverOpen = event.newState === 'open';
}
async #getAllowedMediaTypes() {
let mediaType: string | null = null;
if (this._currentPath) {
const { data: media } = await this.#mediaItemRepository.requestItems([this._currentPath]);
mediaType = media?.[0].mediaType.unique ?? null;
}
const { data: allowedMediaTypes } = await this.#mediaTypeStructure.requestAllowedChildrenOf(mediaType);
this._allowedMediaTypes = allowedMediaTypes?.items ?? [];
}
#renderDropdown() {
return html`
<uui-button
popovertarget="collection-action-menu-popover"
label=${this.localize.term('actions_create')}
color="default"
look="outline">
${this.localize.term('actions_create')}
<uui-symbol-expand .open=${this._popoverOpen}></uui-symbol-expand>
</uui-button>
<uui-popover-container
id="collection-action-menu-popover"
placement="bottom-start"
@toggle=${this.#onPopoverToggle}>
<umb-popover-layout>
<uui-scroll-container>
${!this._allowedMediaTypes.length
? html`<div id="not-allowed">${this.localize.term('mediaPicker_notAllowed')}</div>`
: repeat(
this._allowedMediaTypes,
(item) => item.unique,
(item) =>
html`<uui-menu-item
label=${item.name}
@click=${() =>
alert(
'TODO: Open workspace (create) from modal. You can drop the files into this modal for now.',
)}>
<umb-icon slot="icon" name=${item.icon ?? 'icon-circle-dotted'}></umb-icon>
</uui-menu-item>`,
)}
</uui-scroll-container>
</umb-popover-layout>
</uui-popover-container>
`;
}
#renderCard(item: UmbMediaCardItemModel) {
return html`
<uui-card-media
@@ -289,9 +218,6 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<UmbMediaPick
grid-template-rows: repeat(auto-fill, 200px);
gap: var(--uui-size-space-5);
}
#not-allowed {
padding: var(--uui-size-space-3);
}
`,
];
}