diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json index ffa016c188..303bf66e74 100644 --- a/src/Umbraco.Web.UI.Client/package-lock.json +++ b/src/Umbraco.Web.UI.Client/package-lock.json @@ -10141,9 +10141,9 @@ "dev": true }, "node_modules/cookie": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", - "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", "dev": true, "engines": { "node": ">= 0.6" @@ -11760,9 +11760,9 @@ } }, "node_modules/express": { - "version": "4.18.3", - "resolved": "https://registry.npmjs.org/express/-/express-4.18.3.tgz", - "integrity": "sha512-6VyCijWQ+9O7WuVMTRBTl+cjNNIzD5cY5mQ1WM8r/LEkI2u8EYpOotESNwzNlyCn3g+dmjKYI6BmNneSr/FSRw==", + "version": "4.19.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", + "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==", "dev": true, "dependencies": { "accepts": "~1.3.8", @@ -11770,7 +11770,7 @@ "body-parser": "1.20.2", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.5.0", + "cookie": "0.6.0", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts index 3bacd4e26a..087dd2e362 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts @@ -1,10 +1,10 @@ import { UMB_DEFAULT_COLLECTION_CONTEXT, UmbDefaultCollectionContext } from './collection-default.context.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; +import type { UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; import type { UmbRoute } from '@umbraco-cms/backoffice/router'; const manifest: UmbBackofficeManifestKind = { @@ -30,8 +30,8 @@ export class UmbCollectionDefaultElement extends UmbLitElement { constructor() { super(); - this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => { - this.#collectionContext = instance; + this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (context) => { + this.#collectionContext = context; this.#observeCollectionRoutes(); }); } @@ -44,10 +44,13 @@ export class UmbCollectionDefaultElement extends UmbLitElement { #observeCollectionRoutes() { if (!this.#collectionContext) return; - this.observe(this.#collectionContext.view.routes, (routes) => { - this._routes = routes; - }), - 'umbCollectionRoutesObserver'; + this.observe( + this.#collectionContext.view.routes, + (routes) => { + this._routes = routes; + }, + 'umbCollectionRoutesObserver', + ); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts index a83bebffbb..f35fb988fb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts @@ -14,6 +14,7 @@ export interface UmbCollectionConfiguration { unique?: string; dataTypeId?: string; allowedEntityBulkActions?: UmbCollectionBulkActionPermissions; + layouts?: Array; orderBy?: string; orderDirection?: string; pageSize?: number; @@ -31,6 +32,12 @@ export interface UmbCollectionColumnConfiguration { nameTemplate?: string; } +export interface UmbCollectionLayoutConfiguration { + icon?: string; + name: string; + collectionView: string; +} + export interface UmbCollectionContext { setConfig(config: UmbCollectionConfiguration): void; getConfig(): UmbCollectionConfiguration | undefined; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts index 9e28e70b4e..91fbb6af8e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts @@ -70,16 +70,16 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement + @change=${this.#onColorChange}> ${ // TODO: Missing translation for the color aliases. this._colorList.map( (color) => html` `, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts index 7863ff037b..40f7d221dd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts @@ -1,18 +1,28 @@ -import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; -import { html, customElement, property, repeat, css, ifDefined } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIBooleanInputEvent, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import { + html, + customElement, + property, + repeat, + css, + ifDefined, + nothing, + when, +} from '@umbraco-cms/backoffice/external/lit'; import { extractUmbColorVariable } from '@umbraco-cms/backoffice/resources'; -import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; -import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; +import type { UmbInputManifestElement } from '@umbraco-cms/backoffice/components'; +import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -interface LayoutConfig { +interface UmbCollectionLayoutConfig { icon?: string; - isSystem?: boolean; name?: string; - path?: string; + collectionView?: string; + isSystem?: boolean; selected?: boolean; } @@ -24,14 +34,41 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { + // TODO: [LK] Add sorting. + @property({ type: Array }) - value?: Array; + value?: Array; @property({ type: Object, attribute: false }) public config?: UmbPropertyEditorConfigCollection; - #onAdd() { - this.value = [...(this.value ?? []), { isSystem: false, icon: 'icon-stop', selected: true }]; + async #focusNewItem() { + await this.updateComplete; + const input = this.shadowRoot?.querySelector('.layout-item:last-of-type > uui-input') as UUIInputElement; + input.focus(); + } + + #onAdd(event: { target: UmbInputManifestElement }) { + const manifest = event.target.value; + + this.value = [ + ...(this.value ?? []), + { + icon: manifest?.icon, + name: manifest?.label, + collectionView: manifest?.value, + }, + ]; + + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + + this.#focusNewItem(); + } + + #onChangeLabel(e: UUIInputEvent, index: number) { + const values = [...(this.value ?? [])]; + values[index] = { ...values[index], name: e.target.value as string }; + this.value = values; this.dispatchEvent(new UmbPropertyValueChangeEvent()); } @@ -42,34 +79,9 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement this.dispatchEvent(new UmbPropertyValueChangeEvent()); } - #onChangePath(e: UUIInputEvent, index: number) { - const values = [...(this.value ?? [])]; - values[index] = { ...values[index], path: e.target.value as string }; - this.value = values; - this.dispatchEvent(new UmbPropertyValueChangeEvent()); - } - - #onChangeName(e: UUIInputEvent, index: number) { - const values = [...(this.value ?? [])]; - values[index] = { ...values[index], name: e.target.value as string }; - this.value = values; - this.dispatchEvent(new UmbPropertyValueChangeEvent()); - } - - #onChangeSelected(e: UUIBooleanInputEvent, index: number) { - const values = [...(this.value ?? [])]; - values[index] = { ...values[index], selected: e.target.checked }; - this.value = values; - this.dispatchEvent(new UmbPropertyValueChangeEvent()); - } - - async #onIconChange(index: number) { - // This is not begin used? [NL] - //const icon = this.#iconReader((this.value ? this.value[index].icon : undefined) ?? ''); - - // TODO: send icon data to modal + async #onIconChange(icon: typeof UMB_ICON_PICKER_MODAL.VALUE, index: number) { const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); - const modal = modalManager.open(this, UMB_ICON_PICKER_MODAL); + const modal = modalManager.open(this, UMB_ICON_PICKER_MODAL, { value: icon }); const picked = await modal?.onSubmit(); if (!picked) return; @@ -79,81 +91,59 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement this.dispatchEvent(new UmbPropertyValueChangeEvent()); } + #parseIcon(iconString: string | undefined): typeof UMB_ICON_PICKER_MODAL.VALUE { + const [icon, color] = iconString?.split(' ') ?? []; + return { icon, color: color?.replace('color-', '') }; + } + render() { - return html`
- ${this.value - ? repeat( - this.value, - (layout, index) => '' + layout.name + layout.icon, - (layout, index) => - html`
- ${layout.isSystem - ? this.renderSystemFieldRow(layout, index) - : this.renderCustomFieldRow(layout, index)} -
`, - ) - : ''} + if (!this.value) return nothing; + return html` +
+ ${repeat( + this.value, + (layout, index) => '' + index + layout.name + layout.icon, + (layout, index) => this.#renderLayout(layout, index), + )}
- `; + + `; } - #iconReader(iconString: string): { icon: string; color?: string } { - if (!iconString) return { icon: '' }; + #renderLayout(layout: UmbCollectionLayoutConfig, index: number) { + const icon = this.#parseIcon(layout.icon); + const varName = icon.color ? extractUmbColorVariable(icon.color) : undefined; - const parts = iconString.split(' '); + return html` +
+ - if (parts.length === 2) { - const [icon, color] = parts; - const varName = extractUmbColorVariable(color.replace('color-', '')); - return { icon, color: varName }; - } else { - const [icon] = parts; - return { icon }; - } - } + this.#onIconChange(icon, index)}> + ${when( + icon.color, + () => html``, + () => html``, + )} + - renderSystemFieldRow(layout: LayoutConfig, index: number) { - const icon = this.#iconReader(layout.icon ?? ''); + this.#onChangeLabel(e, index)}> - return html` - - - ${index} - ${ifDefined(layout.name)} (system field) - this.#onChangeSelected(e, index)}> - `; - } +
+ ${layout.collectionView} +
- renderCustomFieldRow(layout: LayoutConfig, index: number) { - const icon = this.#iconReader(layout.icon ?? ''); - - return html` this.#onIconChange(index)}> - ${icon.color - ? html`` - : html``} - - ${index} - this.#onChangeName(e, index)}> - this.#onChangePath(e, index)}> - this.#onRemove(index)}>`; +
+ this.#onRemove(index)}> +
+
+ `; } static styles = [ @@ -163,7 +153,7 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement display: flex; flex-direction: column; gap: 1px; - margin-bottom: var(--uui-size-3); + margin-bottom: var(--uui-size-1); } .layout-item { @@ -174,12 +164,23 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement padding: var(--uui-size-3) var(--uui-size-6); } - .layout-item > :last-child { - margin-left: auto; + .layout-item > uui-icon { + flex: 0 0 var(--uui-size-6); } - #add { - width: 100%; + .layout-item > uui-button { + flex: 0 0 var(--uui-size-10); + } + + .layout-item > uui-input, + .layout-item > .alias { + flex: 1; + } + + .layout-item > .actions { + flex: 0 0 auto; + display: flex; + justify-content: flex-end; } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/manifests.ts index db2a31585c..4624c1bb72 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/manifests.ts @@ -1,9 +1,11 @@ import { manifests as workspaceActionManifests } from './workspace-action/manifests.js'; import { manifests as workspaceActionMenuItemManifests } from './workspace-action-menu-item/manifests.js'; import { manifests as workspaceBreadcrumbManifests } from './workspace-breadcrumb/manifests.js'; +import { manifests as workspaceViewManifests } from './workspace-collection/manifests.js'; export const manifests = [ ...workspaceActionManifests, ...workspaceActionMenuItemManifests, ...workspaceBreadcrumbManifests, + ...workspaceViewManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/manifests.ts new file mode 100644 index 0000000000..e2e24b46d8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/manifests.ts @@ -0,0 +1,25 @@ +import type { ManifestWorkspaceView } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'workspaceView', + alias: 'Umb.WorkspaceView.Collection', + name: 'Workspace Collection View', + element: () => import('./workspace-view-collection.element.js'), + weight: 300, + meta: { + label: 'Collection', + pathname: 'collection', + icon: 'icon-grid', + }, + conditions: [ + { + alias: 'Umb.Condition.WorkspaceAlias', + oneOf: ['Umb.Workspace.Document', 'Umb.Workspace.Media'], + }, + { + alias: 'Umb.Condition.WorkspaceHasCollection', + }, + ], + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/collection/document-workspace-view-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/workspace-view-collection.element.ts similarity index 64% rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/collection/document-workspace-view-collection.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/workspace-view-collection.element.ts index 47f4fff704..8a80c96069 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/collection/document-workspace-view-collection.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/workspace-view-collection.element.ts @@ -1,20 +1,23 @@ -import type { - UmbCollectionBulkActionPermissions, - UmbCollectionConfiguration, -} from '../../../../../core/collection/types.js'; +import type { UmbCollectionBulkActionPermissions, UmbCollectionConfiguration } from '../../../collection/types.js'; import { customElement, html, nothing, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type'; import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; -import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document'; +import { UMB_COLLECTION_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type'; import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; -@customElement('umb-document-workspace-view-collection') -export class UmbDocumentWorkspaceViewCollectionElement extends UmbLitElement implements UmbWorkspaceViewElement { +@customElement('umb-workspace-view-collection') +export class UmbWorkspaceViewCollectionElement extends UmbLitElement implements UmbWorkspaceViewElement { + @state() + private _loading = true; + @state() private _config?: UmbCollectionConfiguration; + @state() + private _collectionAlias?: string; + @state() private _documentUnique?: string; @@ -26,16 +29,16 @@ export class UmbDocumentWorkspaceViewCollectionElement extends UmbLitElement imp } async #observeConfig() { - this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (workspaceContext) => { - this.observe(workspaceContext.unique, (unique) => { - this._documentUnique = unique; - }); + this.consumeContext(UMB_COLLECTION_WORKSPACE_CONTEXT, (workspaceContext) => { + this._collectionAlias = workspaceContext.getCollectionAlias(); + this._documentUnique = workspaceContext.getUnique() ?? ''; + this.observe( workspaceContext.structure.ownerContentType, - async (documentType) => { - if (!documentType || !documentType.collection) return; + async (contentType) => { + if (!contentType || !contentType.collection) return; - const dataTypeUnique = documentType.collection.unique; + const dataTypeUnique = contentType.collection.unique; if (dataTypeUnique) { await this.#dataTypeDetailRepository.requestByUnique(dataTypeUnique); @@ -44,12 +47,13 @@ export class UmbDocumentWorkspaceViewCollectionElement extends UmbLitElement imp (dataType) => { if (!dataType) return; this._config = this.#mapDataTypeConfigToCollectionConfig(dataType); + this._loading = false; }, '_observeConfigDataType', ); } }, - '_observeConfigDocumentType', + '_observeConfigContentType', ); }); } @@ -59,6 +63,7 @@ export class UmbDocumentWorkspaceViewCollectionElement extends UmbLitElement imp return { unique: this._documentUnique, allowedEntityBulkActions: config?.getValueByAlias('bulkActionPermissions'), + layouts: config?.getValueByAlias('layouts'), orderBy: config?.getValueByAlias('orderBy') ?? 'updateDate', orderDirection: config?.getValueByAlias('orderDirection') ?? 'asc', pageSize: Number(config?.getValueByAlias('pageSize')) ?? 50, @@ -68,15 +73,15 @@ export class UmbDocumentWorkspaceViewCollectionElement extends UmbLitElement imp } render() { - if (!this._config?.unique) return nothing; - return html``; + if (this._loading) return nothing; + return html``; } } -export default UmbDocumentWorkspaceViewCollectionElement; +export default UmbWorkspaceViewCollectionElement; declare global { interface HTMLElementTagNameMap { - 'umb-document-workspace-view-collection': UmbDocumentWorkspaceViewCollectionElement; + 'umb-workspace-view-collection': UmbWorkspaceViewCollectionElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts index bca7f3c99b..2f4b916f6e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts @@ -98,8 +98,14 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement { routes.push({ path: '', resolve: () => { - // Retrieve the current app language variant id from the context and redirect to the correct route. - history.pushState({}, '', `${this.#workspaceRoute}/${this.#appCulture}/${this.#variants![0].unique}`); + const route = routes.find((route) => route.path === this.#appCulture); + + if (!route) { + history.pushState({}, '', `${this.#workspaceRoute}/${routes[routes.length - 2].path}`); + return; + } + + history.pushState({}, '', `${this.#workspaceRoute}/${route?.path}`); }, }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts index 344e7ac8b7..dbd1616e94 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts @@ -25,27 +25,6 @@ const workspace: ManifestWorkspaces = { }; const workspaceViews: Array = [ - { - type: 'workspaceView', - alias: 'Umb.WorkspaceView.Document.Collection', - name: 'Document Workspace Collection View', - element: () => import('./views/collection/document-workspace-view-collection.element.js'), - weight: 300, - meta: { - label: 'Documents', - pathname: 'collection', - icon: 'icon-grid', - }, - conditions: [ - { - alias: 'Umb.Condition.WorkspaceAlias', - match: workspace.alias, - }, - { - alias: 'Umb.Condition.WorkspaceHasCollection', - }, - ], - }, { type: 'workspaceView', alias: 'Umb.WorkspaceView.Document.Edit', diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts index c94ee5f8a7..3f9e5c9c0e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts @@ -17,27 +17,6 @@ const workspace: ManifestWorkspaces = { }; const workspaceViews: Array = [ - { - type: 'workspaceView', - alias: 'Umb.WorkspaceView.Media.Collection', - name: 'Media Workspace Collection View', - element: () => import('./views/collection/media-workspace-view-collection.element.js'), - weight: 300, - meta: { - label: 'Collection', - pathname: 'collection', - icon: 'icon-grid', - }, - conditions: [ - { - alias: 'Umb.Condition.WorkspaceAlias', - match: workspace.alias, - }, - { - alias: 'Umb.Condition.WorkspaceHasCollection', - }, - ], - }, { type: 'workspaceView', alias: 'Umb.WorkspaceView.Media.Edit', diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts deleted file mode 100644 index a8d12c291f..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { customElement, html, nothing, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type'; -import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; -import { UMB_MEDIA_COLLECTION_ALIAS, UMB_MEDIA_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/media'; -import type { - UmbCollectionBulkActionPermissions, - UmbCollectionConfiguration, -} from '@umbraco-cms/backoffice/collection'; -import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type'; -import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; - -@customElement('umb-media-workspace-view-collection') -export class UmbMediaWorkspaceViewCollectionElement extends UmbLitElement implements UmbWorkspaceViewElement { - @state() - private _config?: UmbCollectionConfiguration; - - @state() - private _mediaUnique?: string; - - #dataTypeDetailRepository = new UmbDataTypeDetailRepository(this); - - constructor() { - super(); - this.#observeConfig(); - } - - async #observeConfig() { - this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (workspaceContext) => { - this.observe(workspaceContext.unique, (unique) => { - this._mediaUnique = unique; - }); - this.observe( - workspaceContext.structure.ownerContentType, - async (mediaType) => { - if (!mediaType || !mediaType.collection) return; - - const dataTypeUnique = mediaType.collection.unique; - - if (dataTypeUnique) { - await this.#dataTypeDetailRepository.requestByUnique(dataTypeUnique); - this.observe( - await this.#dataTypeDetailRepository.byUnique(dataTypeUnique), - (dataType) => { - if (!dataType) return; - this._config = this.#mapDataTypeConfigToCollectionConfig(dataType); - }, - '_observeConfigDataType', - ); - } - }, - '_observeConfigMediaType', - ); - }); - } - - #mapDataTypeConfigToCollectionConfig(dataType: UmbDataTypeDetailModel): UmbCollectionConfiguration { - const config = new UmbPropertyEditorConfigCollection(dataType.values); - return { - unique: this._mediaUnique, - allowedEntityBulkActions: config?.getValueByAlias('bulkActionPermissions'), - orderBy: config?.getValueByAlias('orderBy') ?? 'updateDate', - orderDirection: config?.getValueByAlias('orderDirection') ?? 'asc', - pageSize: Number(config?.getValueByAlias('pageSize')) ?? 50, - useInfiniteEditor: config?.getValueByAlias('useInfiniteEditor') ?? false, - userDefinedProperties: config?.getValueByAlias('includeProperties'), - }; - } - - render() { - if (!this._config?.unique) return nothing; - return html``; - } -} - -export default UmbMediaWorkspaceViewCollectionElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-media-workspace-view-collection': UmbMediaWorkspaceViewCollectionElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/manifests.ts index bcdccca167..f65daedc51 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/manifests.ts @@ -7,7 +7,7 @@ const tableCollectionView: ManifestCollectionView = { type: 'collectionView', alias: UMB_COLLECTION_VIEW_USER_TABLE, name: 'User Table Collection View', - js: () => import('./table/user-table-collection-view.element.js'), + element: () => import('./table/user-table-collection-view.element.js'), meta: { label: 'Table', icon: 'icon-list', @@ -26,8 +26,8 @@ export const UMB_COLLECTION_VIEW_USER_GRID = 'Umb.CollectionView.User.Grid'; const gridCollectionView: ManifestCollectionView = { type: 'collectionView', alias: UMB_COLLECTION_VIEW_USER_GRID, - name: 'User Table Collection View', - js: () => import('./grid/user-grid-collection-view.element.js'), + name: 'User Grid Collection View', + element: () => import('./grid/user-grid-collection-view.element.js'), weight: 200, meta: { label: 'Grid',