From 30b3619d175d5d895e5f2b0e4bcbd3aec3ace2ff Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 21 Feb 2024 09:27:07 +0000 Subject: [PATCH] Removes the Media "collection-view" folder Moves/combines the components to/with the "media/collections/views" folder/files. --- .../collection-view-media-test.element.ts | 19 -- .../media/media/collection-view/manifests.ts | 59 ------ .../media-grid-collection-view.element.ts | 183 ------------------ .../media-table-collection-view.element.ts | 139 ------------- .../src/packages/media/media/manifests.ts | 2 - 5 files changed, 402 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/collection-view-media-test.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/manifests.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-grid-collection-view.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-table-collection-view.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/collection-view-media-test.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/collection-view-media-test.element.ts deleted file mode 100644 index 5f7e819253..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/collection-view-media-test.element.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit'; - -@customElement('umb-collection-view-media-test') -export class UmbCollectionViewMediaTestElement extends LitElement { - render() { - return html`umb-collection-view-media-test`; - } - - static styles = [UmbTextStyles, css``]; -} - -export default UmbCollectionViewMediaTestElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-collection-view-media-test': UmbCollectionViewMediaTestElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/manifests.ts deleted file mode 100644 index 8c740473ba..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/manifests.ts +++ /dev/null @@ -1,59 +0,0 @@ -import type { ManifestCollectionView } from '@umbraco-cms/backoffice/extension-registry'; - -export const manifests: Array = [ - { - type: 'collectionView', - alias: 'Umb.CollectionView.MediaGrid', - name: 'Media Grid Collection View', - js: () => import('./media-grid-collection-view.element.js'), - weight: 300, - meta: { - label: 'Grid', - icon: 'icon-grid', - pathName: 'grid', - }, - conditions: [ - { - alias: 'Umb.Condition.WorkspaceEntityType', - match: 'media', - }, - ], - }, - { - type: 'collectionView', - alias: 'Umb.CollectionView.MediaTable', - name: 'Media Table Collection View', - js: () => import('./media-table-collection-view.element.js'), - weight: 200, - meta: { - label: 'Table', - icon: 'icon-box', - pathName: 'table', - }, - conditions: [ - { - alias: 'Umb.Condition.WorkspaceEntityType', - match: 'media', - }, - ], - }, - { - type: 'collectionView', - alias: 'Umb.CollectionView.Test', - name: 'Test', - elementName: 'umb-collection-view-media-test', - js: () => import('./collection-view-media-test.element.js'), - weight: 100, - meta: { - label: 'Test', - icon: 'icon-newspaper', - pathName: 'test', - }, - conditions: [ - { - alias: 'Umb.Condition.WorkspaceEntityType', - match: 'media', - }, - ], - }, -]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-grid-collection-view.element.ts deleted file mode 100644 index 1507ce353f..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-grid-collection-view.element.ts +++ /dev/null @@ -1,183 +0,0 @@ -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; -import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbUniqueTreeItemModel } from '@umbraco-cms/backoffice/tree'; - -@customElement('umb-media-grid-collection-view') -export class UmbMediaGridCollectionViewElement extends UmbLitElement { - @state() - private _mediaItems?: Array; - - @state() - private _selection: Array = []; - - private _collectionContext?: UmbDefaultCollectionContext; - - constructor() { - super(); - document.addEventListener('dragenter', this._handleDragEnter.bind(this)); - document.addEventListener('dragleave', this._handleDragLeave.bind(this)); - document.addEventListener('drop', this._handleDrop.bind(this)); - this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => { - this._collectionContext = instance; - this._observeCollectionContext(); - }); - } - - disconnectedCallback(): void { - super.disconnectedCallback(); - document.removeEventListener('dragenter', this._handleDragEnter.bind(this)); - document.removeEventListener('dragleave', this._handleDragLeave.bind(this)); - document.removeEventListener('drop', this._handleDrop.bind(this)); - } - - private _handleDragEnter() { - this.toggleAttribute('dragging', true); - } - - private _handleDragLeave() { - this.toggleAttribute('dragging', false); - } - - private _handleDrop(e: DragEvent) { - e.preventDefault(); - this.toggleAttribute('dragging', false); - } - - private _observeCollectionContext() { - if (!this._collectionContext) return; - - this.observe(this._collectionContext.items, (mediaItems) => { - this._mediaItems = [...mediaItems].sort((a, b) => (a.hasChildren === b.hasChildren ? 0 : a ? -1 : 1)); - }); - - this.observe(this._collectionContext.selection.selection, (selection) => { - this._selection = selection; - }); - } - - private _handleOpenItem(mediaItem: UmbUniqueTreeItemModel) { - //TODO: Fix when we have dynamic routing - history.pushState(null, '', 'section/media/media/edit/' + mediaItem.unique); - } - - private _handleSelect(mediaItem: UmbUniqueTreeItemModel) { - if (mediaItem.unique) { - this._collectionContext?.selection.select(mediaItem.unique); - } - } - - private _handleDeselect(mediaItem: UmbUniqueTreeItemModel) { - if (mediaItem.unique) { - this._collectionContext?.selection.deselect(mediaItem.unique); - } - } - - private _isSelected(mediaItem: UmbUniqueTreeItemModel) { - if (mediaItem.unique) { - return this._selection.includes(mediaItem.unique); - } - return false; - } - - private _renderMediaItem(item: UmbUniqueTreeItemModel) { - const name = item.name || ''; - //TODO: fix the file extension when media items have a file extension. - return html` 0} - ?selected=${this._isSelected(item)} - @open=${() => this._handleOpenItem(item)} - @selected=${() => this._handleSelect(item)} - @deselected=${() => this._handleDeselect(item)} - class="media-item" - .fileExt=${item.hasChildren ? '' : 'image'} - name=${name}>`; - } - - render() { - return html` - console.log(e)} - label="Drop files here" - accept=""> -
- ${this._mediaItems - ? repeat( - this._mediaItems, - (file, index) => (file.unique || '') + index, - (file) => this._renderMediaItem(file), - ) - : ''} -
- `; - } - - static styles = [ - UmbTextStyles, - css` - :host { - display: flex; - flex-direction: column; - box-sizing: border-box; - position: relative; - height: 100%; - width: 100%; - padding: var(--uui-size-space-3) var(--uui-size-space-6); - } - :host([dragging]) #dropzone { - opacity: 1; - pointer-events: all; - } - [dropzone] { - opacity: 0; - } - #dropzone { - opacity: 0; - pointer-events: none; - display: block; - position: absolute; - inset: 0px; - z-index: 100; - backdrop-filter: opacity(1); /* Removes the built in blur effect */ - border-radius: var(--uui-border-radius); - overflow: clip; - border: 1px solid var(--uui-color-focus); - } - #dropzone:after { - content: ''; - display: block; - position: absolute; - inset: 0; - border-radius: var(--uui-border-radius); - background-color: var(--uui-color-focus); - opacity: 0.2; - } - #media-folders { - margin-bottom: var(--uui-size-space-5); - } - #media-folders, - #media-files { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - grid-template-rows: repeat(auto-fill, 200px); - gap: var(--uui-size-space-5); - } - .media-item img { - object-fit: contain; - } - `, - ]; -} - -export default UmbMediaGridCollectionViewElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-media-grid-collection-view': UmbMediaGridCollectionViewElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-table-collection-view.element.ts deleted file mode 100644 index e5b08d02c2..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-table-collection-view.element.ts +++ /dev/null @@ -1,139 +0,0 @@ -import type { UmbMediaDetailModel } from '../index.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import type { - UmbTableColumn, - UmbTableConfig, - UmbTableDeselectedEvent, - UmbTableElement, - UmbTableItem, - UmbTableOrderedEvent, - UmbTableSelectedEvent, -} from '@umbraco-cms/backoffice/components'; -import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; -import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; - -@customElement('umb-media-table-collection-view') -export class UmbMediaTableCollectionViewElement extends UmbLitElement { - @state() - private _mediaItems?: Array; - - @state() - private _tableConfig: UmbTableConfig = { - allowSelection: true, - }; - - @state() - private _tableColumns: Array = [ - { - name: 'Name', - alias: 'mediaName', - }, - ]; - - @state() - private _tableItems: Array = []; - - @state() - private _selection: Array = []; - - private _collectionContext?: UmbDefaultCollectionContext; - - constructor() { - super(); - this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => { - this._collectionContext = instance; - this._observeCollectionContext(); - }); - } - - private _observeCollectionContext() { - if (!this._collectionContext) return; - - this.observe(this._collectionContext.items, (nodes) => { - this._mediaItems = nodes; - this._createTableItems(this._mediaItems); - }); - - this.observe(this._collectionContext.selection.selection, (selection) => { - this._selection = selection; - }); - } - - private _createTableItems(mediaItems: Array) { - // TODO: this should use the MediaDetails type, but for now that results in type errors. - // TODO: I guess the type error will go away when we get an entity based MediaDetails model instead of tree based. - this._tableItems = mediaItems.map((item) => { - return { - id: item.id, - data: [ - { - columnAlias: 'mediaName', - value: item.name || 'Untitled', - }, - ], - }; - }); - } - - private _handleSelect(event: UmbTableSelectedEvent) { - event.stopPropagation(); - const table = event.target as UmbTableElement; - const selection = table.selection; - this._collectionContext?.selection.setSelection(selection); - } - - private _handleDeselect(event: UmbTableDeselectedEvent) { - event.stopPropagation(); - const table = event.target as UmbTableElement; - const selection = table.selection; - this._collectionContext?.selection.setSelection(selection); - } - - private _handleOrdering(event: UmbTableOrderedEvent) { - const table = event.target as UmbTableElement; - const orderingColumn = table.orderingColumn; - const orderingDesc = table.orderingDesc; - console.log(`fetch media items, order column: ${orderingColumn}, desc: ${orderingDesc}`); - } - - render() { - return html` - - `; - } - - static styles = [ - UmbTextStyles, - css` - :host { - display: block; - box-sizing: border-box; - height: 100%; - width: 100%; - padding: var(--uui-size-space-3) var(--uui-size-space-6); - } - - /* TODO: Should we have embedded padding in the table component? */ - umb-table { - padding: 0; /* To fix the embedded padding in the table component. */ - } - `, - ]; -} - -export default UmbMediaTableCollectionViewElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-media-table-collection-view': UmbMediaTableCollectionViewElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts index 93efcc6c58..44a95593c8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts @@ -1,4 +1,3 @@ -import { manifests as collectionViewManifests } from './collection-view/manifests.js'; import { manifests as collectionManifests } from './collection/manifests.js'; import { manifests as entityActionsManifests } from './entity-actions/manifests.js'; import { manifests as entityBulkActionsManifests } from './entity-bulk-actions/manifests.js'; @@ -10,7 +9,6 @@ import { manifests as userPermissionManifests } from './user-permissions/manifes import { manifests as workspaceManifests } from './workspace/manifests.js'; export const manifests = [ - ...collectionViewManifests, ...collectionManifests, ...entityActionsManifests, ...entityBulkActionsManifests,