-
+ ${
+ this._indexData.healthStatus === HealthStatus.UNHEALTHY
+ ? html``
+ : html``
+ }
${this._indexData.healthStatus}
@@ -174,8 +176,8 @@ export class UmbDashboardExamineIndexElement extends UmbLitElement {
}
private renderIndexSearch() {
- if (!this._indexData || !this._indexData.isHealthy) return nothing;
- return html`
`;
+ if (!this._indexData || this._indexData.healthStatus !== HealthStatus.HEALTHY) return nothing;
+ return html`
`;
}
private renderPropertyList() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts
index 8b204624a5..483d0099ce 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { Index, IndexerResource, Searcher, SearcherResource } from '@umbraco-cms/backend-api';
+import { HealthStatus, Index, IndexerResource, Searcher, SearcherResource } from '@umbraco-cms/backend-api';
import { UmbLitElement } from '@umbraco-cms/element';
import { tryExecuteAndNotify } from '@umbraco-cms/resources';
@@ -111,10 +111,11 @@ export class UmbDashboardExamineOverviewElement extends UmbLitElement {
-
+ ${
+ index.healthStatus === HealthStatus.UNHEALTHY
+ ? html``
+ : html``
+ }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
index 2a4f399099..05f27c3337 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, nothing } from 'lit';
import { customElement, state, query, property } from 'lit/decorators.js';
-import { UmbModalService } from '../../../../../core/modal';
+import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../core/modal';
import { SearchResult, SearcherResource, Field } from '@umbraco-cms/backend-api';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -120,13 +120,13 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement {
constructor() {
super();
- this.consumeContext('umbModalService', (instance) => {
+ this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => {
this._modalService = instance;
});
}
private _onNameClick() {
- // TODO:
+ // TODO:
alert('TODO: Open workspace for ' + this.searcherName);
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
index 5995c9aea8..c91b095df2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
@@ -3,7 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { UmbModalService } from '../../../../core/modal';
+import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../core/modal';
import { PublishedCacheResource } from '@umbraco-cms/backend-api';
import { tryExecuteAndNotify } from '@umbraco-cms/resources';
@@ -43,8 +43,8 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
constructor() {
super();
- this.consumeAllContexts(['umbModalService'], (instances) => {
- this._modalService = instances['umbModalService'];
+ this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (_instance) => {
+ this._modalService = _instance;
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts
index 140e3b94f7..81f1eee017 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts
@@ -32,11 +32,7 @@ export class UmbDashboardTelemetryElement extends UmbLitElement {
constructor() {
super();
- }
-
- async connectedCallback() {
- super.connectedCallback();
- await this._setup();
+ this._setup();
}
private async _setup() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/data-type.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/data-type.store.ts
index 78e5d881e6..7ffda6749a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/data-type.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/data-type.store.ts
@@ -3,6 +3,7 @@ import { UmbDataStoreBase } from '../../../core/stores/store';
import type { DataTypeDetails } from '@umbraco-cms/models';
import { DataTypeResource, FolderTreeItem } from '@umbraco-cms/backend-api';
import { tryExecuteAndNotify } from '@umbraco-cms/resources';
+import { UmbContextToken } from '@umbraco-cms/context-api';
const isDataTypeDetails = (dataType: DataTypeDetails | FolderTreeItem): dataType is DataTypeDetails => {
return (dataType as DataTypeDetails).data !== undefined;
@@ -13,7 +14,7 @@ const isDataTypeDetails = (dataType: DataTypeDetails | FolderTreeItem): dataType
export type UmbDataTypeStoreItemType = DataTypeDetails | FolderTreeItem;
// TODO: research how we write names of global consts.
-export const STORE_ALIAS = 'umbDataTypeStore';
+export const STORE_ALIAS = 'UmbDataTypeStore';
/**
* @export
@@ -124,3 +125,5 @@ export class UmbDataTypeStore extends UmbDataStoreBase
return this.items.pipe(map((items) => items.filter((item) => item.parentKey === key)));
}
}
+
+export const UMB_DATA_TYPE_STORE_CONTEXT_TOKEN = new UmbContextToken(STORE_ALIAS);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/actions/delete/action-data-type-delete.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/actions/delete/action-data-type-delete.element.ts
index 7bd5b8270e..612ba06807 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/actions/delete/action-data-type-delete.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/actions/delete/action-data-type-delete.element.ts
@@ -1,8 +1,8 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { UmbModalService } from '../../../../../../core/modal';
-import { UmbDataTypeStore } from '../../../data-type.store';
+import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../../core/modal';
+import { UmbDataTypeStore, UMB_DATA_TYPE_STORE_CONTEXT_TOKEN } from '../../../data-type.store';
import UmbTreeItemActionElement from '../../../../../shared/components/tree/action/tree-item-action.element';
@customElement('umb-tree-action-data-type-delete')
@@ -15,11 +15,11 @@ export default class UmbTreeActionDataTypeDeleteElement extends UmbTreeItemActio
connectedCallback(): void {
super.connectedCallback();
- this.consumeContext('umbModalService', (modalService: UmbModalService) => {
+ this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => {
this._modalService = modalService;
});
- this.consumeContext('umbDataTypeStore', (dataTypeStore: UmbDataTypeStore) => {
+ this.consumeContext(UMB_DATA_TYPE_STORE_CONTEXT_TOKEN, (dataTypeStore) => {
this._dataTypeStore = dataTypeStore;
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts
index 373e3bf1e9..488465a362 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts
@@ -1,3 +1,4 @@
+import { STORE_ALIAS } from '../data-type.store';
import type { ManifestTree, ManifestTreeItemAction } from '@umbraco-cms/models';
const tree: ManifestTree = {
@@ -6,7 +7,7 @@ const tree: ManifestTree = {
name: 'Data Types Tree',
weight: 100,
meta: {
- storeAlias: 'umbDataTypeStore',
+ storeAlias: STORE_ALIAS,
},
};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.context.ts
index 4cb8181c25..678d491b39 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.context.ts
@@ -1,5 +1,9 @@
import { UmbWorkspaceContentContext } from '../../../shared/components/workspace/workspace-content/workspace-content.context';
-import type { UmbDataTypeStore, UmbDataTypeStoreItemType } from 'src/backoffice/settings/data-types/data-type.store';
+import {
+ UmbDataTypeStore,
+ UmbDataTypeStoreItemType,
+ UMB_DATA_TYPE_STORE_CONTEXT_TOKEN,
+} from 'src/backoffice/settings/data-types/data-type.store';
import type { DataTypeDetails } from '@umbraco-cms/models';
import { UmbControllerHostInterface } from '@umbraco-cms/controller';
import { appendToFrozenArray } from '@umbraco-cms/observable-api';
@@ -21,16 +25,19 @@ export class UmbWorkspaceDataTypeContext extends UmbWorkspaceContentContext<
UmbDataTypeStore
> {
constructor(host: UmbControllerHostInterface) {
- super(host, DefaultDataTypeData, 'umbDataTypeStore', 'dataType');
+ super(host, DefaultDataTypeData, UMB_DATA_TYPE_STORE_CONTEXT_TOKEN.toString(), 'dataType');
}
public setPropertyValue(alias: string, value: unknown) {
-
// TODO: make sure to check that we have a details model? otherwise fail? 8This can be relevant if we use the same context for tree actions?
- const entry = {alias: alias, value: value};
+ const entry = { alias: alias, value: value };
- const newDataSet = appendToFrozenArray((this._data.getValue() as DataTypeDetails).data, entry, x => x.alias === alias);
+ const newDataSet = appendToFrozenArray(
+ (this._data.getValue() as DataTypeDetails).data,
+ entry,
+ (x) => x.alias === alias
+ );
- this.update({data: newDataSet});
+ this.update({ data: newDataSet });
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts
index c4eb4ee119..3ad679fa59 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts
@@ -1,7 +1,7 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { UmbModalService } from '../../../../../../core/modal';
+import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../../core/modal';
import { UmbWorkspaceDataTypeContext } from '../../data-type-workspace.context';
import { UmbLitElement } from '@umbraco-cms/element';
import type { DataTypeDetails } from '@umbraco-cms/models';
@@ -46,9 +46,13 @@ export class UmbDataTypeWorkspaceViewEditElement extends UmbLitElement {
constructor() {
super();
- this.consumeAllContexts(['umbWorkspaceContext', 'umbModalService'], (result) => {
- this._workspaceContext = result['umbWorkspaceContext'];
- this._modalService = result['umbModalService'];
+ this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (_instance) => {
+ this._modalService = _instance;
+ });
+
+ // TODO: Figure out if this is the best way to consume a context or if it could be strongly typed using UmbContextToken
+ this.consumeContext('umbWorkspaceContext', (_instance) => {
+ this._workspaceContext = _instance;
this._observeDataType();
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.element.ts
index 5180894c9a..fa4ecf1bf8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.element.ts
@@ -18,7 +18,8 @@ export class UmbWorkspaceViewDataTypeInfoElement extends UmbLitElement {
constructor() {
super();
- this.consumeContext('umbWorkspaceContext', (dataTypeContext) => {
+ // TODO: Figure out if this is the best way to consume the context or if it can be strongly typed with an UmbContextToken
+ this.consumeContext('umbWorkspaceContext', (dataTypeContext) => {
this._workspaceContext = dataTypeContext;
this._observeDataType();
});
@@ -28,11 +29,11 @@ export class UmbWorkspaceViewDataTypeInfoElement extends UmbLitElement {
if (!this._workspaceContext) return;
this.observe(this._workspaceContext.data.pipe(distinctUntilChanged()), (dataType) => {
- if(!dataType) return;
+ if (!dataType) return;
// TODO: handle if model is not of the type wanted.
// TODO: Make method to identify wether data is of type DataTypeDetails
- this._dataType = (dataType as DataTypeDetails);
+ this._dataType = dataType as DataTypeDetails;
});
}
@@ -46,13 +47,11 @@ export class UmbWorkspaceViewDataTypeInfoElement extends UmbLitElement {
${this._dataType?.key}
-
+
${this._dataType?.propertyEditorModelAlias}
-
+
${this._dataType?.propertyEditorUIAlias}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts
index 06a4912dbb..0ffc2e1b27 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts
@@ -1,8 +1,17 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
+import { UMB_NOTIFICATION_SERVICE_CONTEXT_TOKEN } from 'src/core/notification';
+
+import { UmbLitElement } from '@umbraco-cms/element';
@customElement('umb-language-workspace')
-export class UmbLanguageWorkspaceElement extends LitElement {
+export class UmbLanguageWorkspaceElement extends UmbLitElement {
+ constructor() {
+ super();
+ this.consumeContext(UMB_NOTIFICATION_SERVICE_CONTEXT_TOKEN, (service) => {
+ service.peek('positive', { data: { message: 'Language Workspace' } });
+ });
+ }
render() {
return html` Language Workspace
`;
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-delete.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-delete.element.ts
index 6cf38a66e0..1001bfbbdd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-delete.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-delete.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
-import type { UmbCollectionContext } from '../collection.context';
+import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from '../collection.context';
import type { ManifestCollectionBulkAction } from '@umbraco-cms/models';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -18,7 +18,7 @@ export class UmbCollectionBulkActionDeleteElement extends UmbLitElement {
constructor() {
super();
- this.consumeContext('umbCollectionContext', (context) => {
+ this.consumeContext(UMB_COLLECTION_CONTEXT_TOKEN, (context) => {
this._collectionContext = context;
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts
index 83121e2ee2..1d85b374b5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts
@@ -1,7 +1,7 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
-import type { UmbCollectionContext } from './collection.context';
+import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from './collection.context';
import type { MediaDetails } from '@umbraco-cms/models';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -36,7 +36,7 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement {
constructor() {
super();
- this.consumeContext('umbCollectionContext', (instance) => {
+ this.consumeContext(UMB_COLLECTION_CONTEXT_TOKEN, (instance) => {
this._collectionContext = instance;
this._observeCollectionContext();
});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts
index a312ccadf0..8a23c626b1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts
@@ -1,13 +1,12 @@
import { ContentTreeItem } from '@umbraco-cms/backend-api';
import { UmbTreeDataStore } from '@umbraco-cms/stores/store';
import { UmbControllerHostInterface } from '@umbraco-cms/controller';
-import { UmbContextConsumerController } from '@umbraco-cms/context-api';
+import { UmbContextToken, UmbContextConsumerController } from '@umbraco-cms/context-api';
import { UniqueBehaviorSubject, UmbObserverController } from '@umbraco-cms/observable-api';
export class UmbCollectionContext<
DataType extends ContentTreeItem,
StoreType extends UmbTreeDataStore = UmbTreeDataStore
> {
-
private _host: UmbControllerHostInterface;
private _entityKey: string | null;
@@ -60,14 +59,18 @@ export class UmbCollectionContext<
this._dataObserver?.destroy();
if (this._entityKey) {
- this._dataObserver = new UmbObserverController(this._host, this._store.getTreeItemChildren(this._entityKey), (nodes) => {
- if(nodes) {
- this.#data.next(nodes);
+ this._dataObserver = new UmbObserverController(
+ this._host,
+ this._store.getTreeItemChildren(this._entityKey),
+ (nodes) => {
+ if (nodes) {
+ this.#data.next(nodes);
+ }
}
- });
+ );
} else {
this._dataObserver = new UmbObserverController(this._host, this._store.getTreeRoot(), (nodes) => {
- if(nodes) {
+ if (nodes) {
this.#data.next(nodes);
}
});
@@ -107,3 +110,7 @@ export class UmbCollectionContext<
this.#data.unsubscribe();
}
}
+
+export const UMB_COLLECTION_CONTEXT_TOKEN = new UmbContextToken>(
+ UmbCollectionContext.name
+);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.element.ts
index 20bf799c50..4812e18d3a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.element.ts
@@ -4,7 +4,7 @@ import { customElement, state, property } from 'lit/decorators.js';
import { map } from 'rxjs';
import './collection-selection-actions.element';
import './collection-toolbar.element';
-import type { UmbCollectionContext } from './collection.context';
+import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from './collection.context';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
import type { ManifestCollectionView, MediaDetails } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
@@ -53,7 +53,7 @@ export class UmbCollectionElement extends UmbLitElement {
constructor() {
super();
- this.consumeContext('umbCollectionContext', (instance) => {
+ this.consumeContext(UMB_COLLECTION_CONTEXT_TOKEN, (instance) => {
this._collectionContext = instance;
this._observeCollectionContext();
});
@@ -85,7 +85,7 @@ export class UmbCollectionElement extends UmbLitElement {
private _createRoutes(views: ManifestCollectionView[] | null) {
this._routes = [];
- if(views) {
+ if (views) {
this._routes = views.map((view) => {
return {
path: `${view.meta.pathName}`,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.element.ts
index 697fa88192..97719a81ea 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.element.ts
@@ -4,7 +4,10 @@ import { customElement, state } from 'lit/decorators.js';
import '../collection.element';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { UmbMediaStore, UmbMediaStoreItemType } from 'src/backoffice/media/media/media.store';
-import { UmbCollectionContext } from 'src/backoffice/shared/collection/collection.context';
+import {
+ UmbCollectionContext,
+ UMB_COLLECTION_CONTEXT_TOKEN,
+} from 'src/backoffice/shared/collection/collection.context';
import type { ManifestDashboardCollection } from '@umbraco-cms/models';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -37,7 +40,7 @@ export class UmbDashboardCollectionElement extends UmbLitElement {
const manifestMeta = this.manifest.meta as any;
this._entityType = manifestMeta.entityType as string;
this._collectionContext = new UmbCollectionContext(this, null, manifestMeta.storeAlias);
- this.provideContext('umbCollectionContext', this._collectionContext);
+ this.provideContext(UMB_COLLECTION_CONTEXT_TOKEN, this._collectionContext);
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts
index 52d943758a..794cdb6f6a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
-import type { UmbCollectionContext } from '../collection.context';
+import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from '../collection.context';
import type { MediaDetails } from '@umbraco-cms/models';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -77,8 +77,7 @@ export class UmbCollectionViewsMediaGridElement extends UmbLitElement {
document.addEventListener('dragenter', this._handleDragEnter.bind(this));
document.addEventListener('dragleave', this._handleDragLeave.bind(this));
document.addEventListener('drop', this._handleDrop.bind(this));
- this.consumeContext('umbCollectionContext', (instance) => {
- console.log('umbCollectionContext', instance);
+ this.consumeContext(UMB_COLLECTION_CONTEXT_TOKEN, (instance) => {
this._collectionContext = instance;
this._observeCollectionContext();
});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-table.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-table.element.ts
index 069e3c8c9e..258a0a7465 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-table.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-table.element.ts
@@ -1,25 +1,66 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import type { UmbCollectionContext } from '../collection.context';
+import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from '../collection.context';
import type { MediaDetails } from '@umbraco-cms/models';
import { UmbLitElement } from '@umbraco-cms/element';
+import {
+ UmbTableColumn,
+ UmbTableConfig,
+ UmbTableDeselectedEvent,
+ UmbTableElement,
+ UmbTableItem,
+ UmbTableOrderedEvent,
+ UmbTableSelectedEvent,
+} from '../../components/table';
@customElement('umb-collection-view-media-table')
export class UmbCollectionViewMediaTableElement extends UmbLitElement {
- static styles = [UUITextStyles, css``];
+ static styles = [
+ UUITextStyles,
+ 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. */
+ }
+ `,
+ ];
@state()
private _mediaItems?: Array;
@state()
- private _selection?: Array;
+ private _tableConfig: UmbTableConfig = {
+ allowSelection: true,
+ };
+
+ @state()
+ private _tableColumns: Array = [
+ {
+ name: 'Name',
+ alias: 'mediaName',
+ },
+ ];
+
+ @state()
+ private _tableItems: Array = [];
+
+ @state()
+ private _selection: Array = [];
private _collectionContext?: UmbCollectionContext;
constructor() {
super();
- this.consumeContext('umbCollectionContext', (instance) => {
+ this.consumeContext(UMB_COLLECTION_CONTEXT_TOKEN, (instance) => {
this._collectionContext = instance;
this._observeCollectionContext();
});
@@ -30,6 +71,7 @@ export class UmbCollectionViewMediaTableElement extends UmbLitElement {
this.observe(this._collectionContext.data, (nodes) => {
this._mediaItems = nodes;
+ this._createTableItems(this._mediaItems);
});
this.observe(this._collectionContext.selection, (selection) => {
@@ -37,17 +79,55 @@ export class UmbCollectionViewMediaTableElement extends UmbLitElement {
});
}
+ 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 {
+ key: item.key,
+ icon: item.icon,
+ 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?.setSelection(selection);
+ }
+
+ private _handleDeselect(event: UmbTableDeselectedEvent) {
+ event.stopPropagation();
+ const table = event.target as UmbTableElement;
+ const selection = table.selection;
+ this._collectionContext?.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`umb-collection-view-media-table
-
-
Selected Media Items:
-
- ${this._selection?.map((key) => {
- const mediaItem = this._mediaItems?.find((item) => item.key === key);
- return html`- ${mediaItem?.name}
`;
- })}
-
-
`;
- };
+ `
+ )}
+ `;
+ }
private _renderRowCell(column: UmbTableColumn, item: UmbTableItem) {
- return html`
${this._renderCellContent(column, item)}
`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.stories.ts
index 329ae94aea..b26be13e10 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.stories.ts
@@ -72,6 +72,7 @@ const items: Array
= [
const config: UmbTableConfig = {
allowSelection: true,
+ hideIcon: false,
};
export const AAAOverview: Story = () =>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts
index 773916db86..a738d06b5f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts
@@ -1,7 +1,13 @@
import { customElement, property, state } from 'lit/decorators.js';
-import { UmbSectionContext } from '../../section/section.context';
-import { UmbTreeContextMenuPageService } from '../context-menu/tree-context-menu-page.service';
-import { UmbTreeContextMenuService } from '../context-menu/tree-context-menu.service';
+import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../../section/section.context';
+import {
+ UmbTreeContextMenuPageService,
+ UMB_TREE_CONTEXT_MENU_PAGE_SERVICE_CONTEXT_TOKEN,
+} from '../context-menu/tree-context-menu-page.service';
+import {
+ UmbTreeContextMenuService,
+ UMB_TREE_CONTEXT_MENU_SERVICE_CONTEXT_TOKEN,
+} from '../context-menu/tree-context-menu.service';
import type { Entity, ManifestTreeItemAction, ManifestTree } from '@umbraco-cms/models';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -28,17 +34,17 @@ export default class UmbTreeItemActionElement extends UmbLitElement {
connectedCallback() {
super.connectedCallback();
- this.consumeContext('umbSectionContext', (sectionContext) => {
+ this.consumeContext(UMB_SECTION_CONTEXT_TOKEN, (sectionContext) => {
this._sectionContext = sectionContext;
this._observeActiveTree();
this._observeActiveTreeItem();
});
- this.consumeContext('umbTreeContextMenuService', (treeContextMenuService: UmbTreeContextMenuService) => {
+ this.consumeContext(UMB_TREE_CONTEXT_MENU_SERVICE_CONTEXT_TOKEN, (treeContextMenuService) => {
this._treeContextMenuService = treeContextMenuService;
});
- this.consumeContext('umbTreeContextMenuPageService', (actionPageService: UmbTreeContextMenuPageService) => {
+ this.consumeContext(UMB_TREE_CONTEXT_MENU_PAGE_SERVICE_CONTEXT_TOKEN, (actionPageService) => {
this._actionPageService = actionPageService;
this._observeEntity();
});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts
index 59a5991fa4..9ef5edbae1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts
@@ -2,7 +2,7 @@ import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { map } from 'rxjs';
-import { UmbSectionContext } from '../../section/section.context';
+import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../../section/section.context';
import type { Entity, ManifestTreeItemAction, ManifestTree } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -41,7 +41,7 @@ export class UmbTreeContextMenuPageActionListElement extends UmbLitElement {
constructor() {
super();
- this.consumeContext('umbSectionContext', (sectionContext) => {
+ this.consumeContext(UMB_SECTION_CONTEXT_TOKEN, (sectionContext) => {
this._sectionContext = sectionContext;
this._observeActiveTree();
this._observeActiveTreeItem();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts
index 5804c1b483..36bcd4bc21 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts
@@ -2,8 +2,10 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, nothing, PropertyValueMap } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import UmbTreeItemActionElement, { ActionPageEntity } from '../action/tree-item-action.element';
+import { UmbTreeContextMenuService } from './tree-context-menu.service';
import { UmbLitElement } from '@umbraco-cms/element';
import { UniqueBehaviorSubject } from '@umbraco-cms/observable-api';
+import { UmbContextToken } from '@umbraco-cms/context-api';
// TODO: Refactor this, its not a service and the data should be handled by a context api.
@customElement('umb-tree-context-menu-page-service')
@@ -21,7 +23,7 @@ export class UmbTreeContextMenuPageService extends UmbLitElement {
connectedCallback() {
super.connectedCallback();
- this.provideContext('umbTreeContextMenuPageService', this);
+ this.provideContext(UMB_TREE_CONTEXT_MENU_PAGE_SERVICE_CONTEXT_TOKEN, this);
this.openFreshPage('umb-tree-context-menu-page-action-list');
}
@@ -64,6 +66,10 @@ export class UmbTreeContextMenuPageService extends UmbLitElement {
}
}
+export const UMB_TREE_CONTEXT_MENU_PAGE_SERVICE_CONTEXT_TOKEN = new UmbContextToken(
+ UmbTreeContextMenuService.name
+);
+
declare global {
interface HTMLElementTagNameMap {
'umb-tree-context-menu-page-service': UmbTreeContextMenuPageService;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu.service.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu.service.ts
index f21f2d833a..5b6e322682 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu.service.ts
@@ -3,6 +3,7 @@ import { css, html, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { ActionPageEntity } from '../action/tree-item-action.element';
import { UmbLitElement } from '@umbraco-cms/element';
+import { UmbContextToken } from '@umbraco-cms/context-api';
@customElement('umb-tree-context-menu-service')
export class UmbTreeContextMenuService extends UmbLitElement {
@@ -56,7 +57,7 @@ export class UmbTreeContextMenuService extends UmbLitElement {
connectedCallback() {
super.connectedCallback();
- this.provideContext('umbTreeContextMenuService', this);
+ this.provideContext(UMB_TREE_CONTEXT_MENU_SERVICE_CONTEXT_TOKEN, this);
}
public open(entity: ActionPageEntity) {
@@ -92,6 +93,10 @@ export class UmbTreeContextMenuService extends UmbLitElement {
}
}
+export const UMB_TREE_CONTEXT_MENU_SERVICE_CONTEXT_TOKEN = new UmbContextToken(
+ UmbTreeContextMenuService.name
+);
+
declare global {
interface HTMLElementTagNameMap {
'umb-tree-context-menu-service': UmbTreeContextMenuService;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
index 8ec0dffd7e..83d7affd20 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
@@ -4,9 +4,12 @@ import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { map, Observable } from 'rxjs';
import { repeat } from 'lit/directives/repeat.js';
-import { UmbSectionContext } from '../section/section.context';
+import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section/section.context';
import type { UmbTreeContextBase } from './tree.context';
-import { UmbTreeContextMenuService } from './context-menu/tree-context-menu.service';
+import {
+ UmbTreeContextMenuService,
+ UMB_TREE_CONTEXT_MENU_SERVICE_CONTEXT_TOKEN,
+} from './context-menu/tree-context-menu.service';
import type { Entity } from '@umbraco-cms/models';
import { UmbTreeDataStore } from '@umbraco-cms/stores/store';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -82,13 +85,13 @@ export class UmbTreeItem extends UmbLitElement {
this._store = store;
});
- this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => {
+ this.consumeContext(UMB_SECTION_CONTEXT_TOKEN, (sectionContext) => {
this._sectionContext = sectionContext;
this._observeSection();
this._observeActiveTreeItem();
});
- this.consumeContext('umbTreeContextMenuService', (treeContextMenuService: UmbTreeContextMenuService) => {
+ this.consumeContext(UMB_TREE_CONTEXT_MENU_SERVICE_CONTEXT_TOKEN, (treeContextMenuService) => {
this._treeContextMenuService = treeContextMenuService;
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts
index 11a83671bf..dc605c8d92 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts
@@ -54,10 +54,14 @@ export class UmbVariantSelectorElement extends UmbLitElement {
constructor() {
super();
- this.consumeContext('umbWorkspaceContext', (instance) => {
- this._workspaceContext = instance;
- this._observeWorkspace();
- });
+ // TODO: Figure out how to get the magic string for the workspace context.
+ this.consumeContext>>(
+ 'umbWorkspaceContext',
+ (instance) => {
+ this._workspaceContext = instance;
+ this._observeWorkspace();
+ }
+ );
}
private async _observeWorkspace() {
@@ -68,7 +72,6 @@ export class UmbVariantSelectorElement extends UmbLitElement {
});
}
-
// TODO. find a way where we don't have to do this for all workspaces.
private _handleInput(event: UUIInputEvent) {
if (event instanceof UUIInputEvent) {
@@ -95,31 +98,35 @@ export class UmbVariantSelectorElement extends UmbLitElement {
return html`
- ${this._content && this._content.variants?.length > 0
- ? html`
-
-
- English (United States)
-
-
-
- `
- : nothing}
+ ${
+ this._content && this._content.variants?.length > 0
+ ? html`
+
+
+ English (United States)
+
+
+
+ `
+ : nothing
+ }
- ${this._content && this._content.variants?.length > 0
- ? html`
-
-
-
- `
- : nothing}
+ ${
+ this._content && this._content.variants?.length > 0
+ ? html`
+
+
+
+ `
+ : nothing
+ }
`;
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
index 37e20d25ff..4bf94b6d3c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
@@ -1,19 +1,9 @@
-import { UmbWorkspaceContentContext } from "../workspace/workspace-content/workspace-content.context";
-import type { DataTypeDetails } from "@umbraco-cms/models";
-import { UmbControllerHostInterface } from "src/core/controller/controller-host.mixin";
-import { createObservablePart, UniqueBehaviorSubject } from "src/core/observable-api/unique-behavior-subject";
-import { UmbContextProviderController } from "src/core/context-api/provide/context-provider.controller";
-import { UmbContextConsumerController } from "src/core/context-api/consume/context-consumer.controller";
-
-
-
-
-
-
-
-
-
-
+import { UmbWorkspaceContentContext } from '../workspace/workspace-content/workspace-content.context';
+import type { DataTypeDetails } from '@umbraco-cms/models';
+import { UmbControllerHostInterface } from 'src/core/controller/controller-host.mixin';
+import { createObservablePart, UniqueBehaviorSubject } from 'src/core/observable-api/unique-behavior-subject';
+import { UmbContextProviderController } from 'src/core/context-api/provide/context-provider.controller';
+import { UmbContextConsumerController } from 'src/core/context-api/consume/context-consumer.controller';
// If we get this from the server then we can consider using TypeScripts Partial<> around the model from the Management-API.
export type WorkspacePropertyData