diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js index 484ccb2c7c..8d18e492b2 100644 --- a/src/Umbraco.Web.UI.Client/.storybook/preview.js +++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js @@ -9,7 +9,7 @@ import { initialize, mswDecorator } from 'msw-storybook-addon'; import { setCustomElements } from '@storybook/web-components'; import customElementManifests from '../custom-elements.json'; -import { UmbDataTypeStore } from '../src/backoffice/settings/data-types/data-type.store'; +import { STORE_ALIAS as dataTypeAlias, UmbDataTypeStore } from '../src/backoffice/settings/data-types/data-type.store'; import { UmbDocumentTypeStore } from '../src/backoffice/documents/document-types/document-type.store'; import { UmbIconStore } from '../src/core/stores/icon/icon.store'; import { onUnhandledRequest } from '../src/core/mocks/browser'; @@ -51,7 +51,7 @@ customElements.define('umb-storybook', UmbStoryBookElement); const storybookProvider = (story) => html` ${story()} `; const dataTypeStoreProvider = (story) => html` - ${story()} + ${story()} `; const documentTypeStoreProvider = (story) => html` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts index cd87ab1e28..755dd7c252 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts @@ -19,7 +19,7 @@ import { UmbDictionaryStore } from './translation/dictionary/dictionary.store'; import { UmbDocumentBlueprintStore } from './documents/document-blueprints/document-blueprint.store'; import { UmbSectionStore } from './shared/components/section/section.store'; -import { UmbDataTypeStore } from './settings/data-types/data-type.store'; +import { UmbDataTypeStore, UMB_DATA_TYPE_STORE_CONTEXT_ALIAS } from './settings/data-types/data-type.store'; import { UmbLitElement } from '@umbraco-cms/element'; // Domains @@ -60,7 +60,7 @@ export class UmbBackofficeElement extends UmbLitElement { this.provideContext(UMB_CURRENT_USER_STORE_CONTEXT_ALIAS, new UmbCurrentUserStore()); this.provideContext(UMB_DOCUMENT_STORE_CONTEXT_ALIAS, new UmbDocumentStore(this)); this.provideContext(UMB_MEDIA_STORE_CONTEXT_ALIAS, new UmbMediaStore(this)); - this.provideContext('umbDataTypeStore', new UmbDataTypeStore(this)); + this.provideContext(UMB_DATA_TYPE_STORE_CONTEXT_ALIAS, new UmbDataTypeStore(this)); this.provideContext('umbDocumentTypeStore', new UmbDocumentTypeStore(this)); this.provideContext('umbMediaTypeStore', new UmbMediaTypeStore(this)); this.provideContext('umbMemberTypeStore', new UmbMemberTypeStore(this)); 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..73e886c775 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 { UmbContextAlias } from '@umbraco-cms/context-api'; const isDataTypeDetails = (dataType: DataTypeDetails | FolderTreeItem): dataType is DataTypeDetails => { return (dataType as DataTypeDetails).data !== undefined; @@ -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_ALIAS = new UmbContextAlias(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 ef044b1e84..9d2a90baf5 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 @@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_ALIAS } from '../../../../../../core/modal'; -import { UmbDataTypeStore } from '../../../data-type.store'; +import { UmbDataTypeStore, UMB_DATA_TYPE_STORE_CONTEXT_ALIAS } from '../../../data-type.store'; import UmbTreeItemActionElement from '../../../../../shared/components/tree/action/tree-item-action.element'; @customElement('umb-tree-action-data-type-delete') @@ -19,7 +19,7 @@ export default class UmbTreeActionDataTypeDeleteElement extends UmbTreeItemActio this._modalService = modalService; }); - this.consumeContext('umbDataTypeStore', (dataTypeStore: UmbDataTypeStore) => { + this.consumeContext(UMB_DATA_TYPE_STORE_CONTEXT_ALIAS, (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..394c17f435 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_ALIAS, +} 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_ALIAS.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/shared/components/content-property/content-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/content-property/content-property.element.ts index 233e42ab64..75171d868b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/content-property/content-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/content-property/content-property.element.ts @@ -3,7 +3,7 @@ import { css, html } from 'lit'; import { ifDefined } from 'lit-html/directives/if-defined.js'; import { customElement, property, state } from 'lit/decorators.js'; -import { UmbDataTypeStore } from '../../../settings/data-types/data-type.store'; +import { UmbDataTypeStore, UMB_DATA_TYPE_STORE_CONTEXT_ALIAS } from '../../../settings/data-types/data-type.store'; import type { ContentProperty, DataTypeDetails } from '@umbraco-cms/models'; import '../workspace-property/workspace-property.element'; @@ -30,7 +30,7 @@ export class UmbContentPropertyElement extends UmbLitElement { public set property(value: ContentProperty | undefined) { const oldProperty = this._property; this._property = value; - if(this._property?.dataTypeKey !== oldProperty?.dataTypeKey) { + if (this._property?.dataTypeKey !== oldProperty?.dataTypeKey) { this._observeDataType(this._property?.dataTypeKey); } } @@ -50,7 +50,7 @@ export class UmbContentPropertyElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbDataTypeStore', (instance) => { + this.consumeContext(UMB_DATA_TYPE_STORE_CONTEXT_ALIAS, (instance) => { this._dataTypeStore = instance; this._observeDataType(this._property?.dataTypeKey); }); @@ -60,14 +60,11 @@ export class UmbContentPropertyElement extends UmbLitElement { if (!this._dataTypeStore) return; this._dataTypeObserver?.destroy(); - if(dataTypeKey) { - this._dataTypeObserver = this.observe( - this._dataTypeStore.getByKey(dataTypeKey), - (dataType) => { - this._dataTypeData = dataType?.data; - this._propertyEditorUIAlias = dataType?.propertyEditorUIAlias || undefined; - } - ); + if (dataTypeKey) { + this._dataTypeObserver = this.observe(this._dataTypeStore.getByKey(dataTypeKey), (dataType) => { + this._dataTypeData = dataType?.data; + this._propertyEditorUIAlias = dataType?.propertyEditorUIAlias || undefined; + }); } }