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

Merge remote-tracking branch 'origin/main' into feature/validation-take-2

Browse Source
This commit is contained in:
Niels Lyngsø
2024-03-27 12:59:54 +01:00
parent a0a3bec48f f9b6a94ff0
commit 4d96e9d3fc
13 changed files with 203 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Umbraco.Web.UI.Client/package-lock.json generated
View File

@@ -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",

21
src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts
View File

@@ -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() {

7
src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts
View File

@@ -14,6 +14,7 @@ export interface UmbCollectionConfiguration {
unique?: string;
dataTypeId?: string;
allowedEntityBulkActions?: UmbCollectionBulkActionPermissions;
layouts?: Array<UmbCollectionLayoutConfiguration>;
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;

8
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
View File

@@ -70,16 +70,16 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
${this.renderSearchbar()}
<hr />
<uui-color-swatches
.value="${this._modalValue?.color ?? ''}"
.value=${this._currentAlias}
label="Color switcher for icons"
@change="${this.#onColorChange}">
@change=${this.#onColorChange}>
${
// TODO: Missing translation for the color aliases.
this._colorList.map(
(color) => html`
<uui-color-swatch
label="${color.alias}"
title="${color.alias}"
label=${color.alias}
title=${color.alias}
value=${color.alias}
style="--uui-swatch-color: var(${color.varName})"></uui-color-swatch>
`,

221
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
View File

@@ -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<LayoutConfig>;
value?: Array<UmbCollectionLayoutConfig>;
@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`<div id="layout-wrapper">
${this.value
? repeat(
this.value,
(layout, index) => '' + layout.name + layout.icon,
(layout, index) =>
html` <div class="layout-item">
<uui-icon name="icon-navigation"></uui-icon> ${layout.isSystem
? this.renderSystemFieldRow(layout, index)
: this.renderCustomFieldRow(layout, index)}
</div>`,
)
: ''}
if (!this.value) return nothing;
return html`
<div id="layout-wrapper">
${repeat(
this.value,
(layout, index) => '' + index + layout.name + layout.icon,
(layout, index) => this.#renderLayout(layout, index),
)}
</div>
<uui-button
id="add"
label=${this.localize.term('general_add')}
look="placeholder"
@click=${this.#onAdd}></uui-button>`;
<umb-input-manifest extension-type="collectionView" @change=${this.#onAdd}></umb-input-manifest>
`;
}
#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`
<div class="layout-item">
<uui-icon name="icon-navigation"></uui-icon>
if (parts.length === 2) {
const [icon, color] = parts;
const varName = extractUmbColorVariable(color.replace('color-', ''));
return { icon, color: varName };
} else {
const [icon] = parts;
return { icon };
}
}
<uui-button compact look="outline" label="pick icon" @click=${() => this.#onIconChange(icon, index)}>
${when(
icon.color,
() => html`<uui-icon name=${ifDefined(icon.icon)} style="color:var(${varName})"></uui-icon>`,
() => html`<uui-icon name=${ifDefined(icon.icon)}></uui-icon>`,
)}
</uui-button>
renderSystemFieldRow(layout: LayoutConfig, index: number) {
const icon = this.#iconReader(layout.icon ?? '');
<uui-input
label="name"
value=${ifDefined(layout.name)}
placeholder="Enter a label..."
@change=${(e: UUIInputEvent) => this.#onChangeLabel(e, index)}></uui-input>
return html` <uui-button compact disabled label="Icon" look="outline">
<uui-icon name=${ifDefined(icon.icon)}></uui-icon>
</uui-button>
${index}
<span><strong>${ifDefined(layout.name)}</strong> <small>(system field)</small></span>
<uui-checkbox
?checked=${layout.selected}
label="Show"
@change=${(e: UUIBooleanInputEvent) => this.#onChangeSelected(e, index)}>
</uui-checkbox>`;
}
<div class="alias">
<code>${layout.collectionView}</code>
</div>
renderCustomFieldRow(layout: LayoutConfig, index: number) {
const icon = this.#iconReader(layout.icon ?? '');
return html`<uui-button compact look="outline" label="pick icon" @click=${() => this.#onIconChange(index)}>
${icon.color
? html`<uui-icon name=${icon.icon} style="color:var(${icon.color})"></uui-icon>`
: html`<uui-icon name=${icon.icon}></uui-icon>`}
</uui-button>
${index}
<uui-input
label="name"
value=${ifDefined(layout.name)}
placeholder="Name..."
@change=${(e: UUIInputEvent) => this.#onChangeName(e, index)}></uui-input>
<uui-input
label="path"
value=${ifDefined(layout.path)}
placeholder="Layout path..."
@change=${(e: UUIInputEvent) => this.#onChangePath(e, index)}></uui-input>
<uui-button
label=${this.localize.term('actions_remove')}
look="secondary"
@click=${() => this.#onRemove(index)}></uui-button>`;
<div class="actions">
<uui-button
label=${this.localize.term('general_remove')}
look="secondary"
@click=${() => this.#onRemove(index)}></uui-button>
</div>
</div>
`;
}
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;
}
`,
];

2
src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/manifests.ts
View File

@@ -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,
];

25
src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/manifests.ts Normal file
View File

@@ -0,0 +1,25 @@
import type { ManifestWorkspaceView } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array<ManifestWorkspaceView> = [
{
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',
},
],
},
];

43
src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/collection/document-workspace-view-collection.element.ts → src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/workspace-view-collection.element.ts
View File

@@ -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<UmbCollectionBulkActionPermissions>('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`<umb-collection alias="Umb.Collection.Document" .config=${this._config}></umb-collection>`;
if (this._loading) return nothing;
return html`<umb-collection .alias=${this._collectionAlias} .config=${this._config}></umb-collection>`;
}
}
export default UmbDocumentWorkspaceViewCollectionElement;
export default UmbWorkspaceViewCollectionElement;
declare global {
interface HTMLElementTagNameMap {
'umb-document-workspace-view-collection': UmbDocumentWorkspaceViewCollectionElement;
'umb-workspace-view-collection': UmbWorkspaceViewCollectionElement;
}
}

10
src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts
View File

@@ -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}`);
},
});
}

21
src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts
View File

@@ -25,27 +25,6 @@ const workspace: ManifestWorkspaces = {
};
const workspaceViews: Array<ManifestWorkspaceView> = [
{
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',

21
src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts
View File

@@ -17,27 +17,6 @@ const workspace: ManifestWorkspaces = {
};
const workspaceViews: Array<ManifestWorkspaceView> = [
{
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',

82
src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts
View File

@@ -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<UmbCollectionBulkActionPermissions>('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`<umb-collection .alias=${UMB_MEDIA_COLLECTION_ALIAS} .config=${this._config}></umb-collection>`;
}
}
export default UmbMediaWorkspaceViewCollectionElement;
declare global {
interface HTMLElementTagNameMap {
'umb-media-workspace-view-collection': UmbMediaWorkspaceViewCollectionElement;
}
}

6
src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/manifests.ts
View File

@@ -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',