From 47fbfe62e3474df02a40b79e2add5597a89effdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 6 Sep 2023 19:50:14 +0200 Subject: [PATCH] a good first version of very by culture toggle for property editor settings --- ...nt-type-property-structure-helper.class.ts | 2 +- .../property-settings-modal.element.ts | 45 +++++++++++++++++-- .../token/property-settings-modal.token.ts | 5 ++- .../documents/document-types/index.ts | 2 + .../repository/document-type.store.ts | 2 +- .../document-types/repository/index.ts | 3 ++ ...-workspace-view-edit-properties.element.ts | 11 ++++- ...pe-workspace-view-edit-property.element.ts | 6 ++- 8 files changed, 66 insertions(+), 10 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts index b7f19d1d10..3de8a340b6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts @@ -29,7 +29,7 @@ export class UmbContentTypePropertyStructureHelper { this.#propertyStructure.sortBy((a, b) => ((a as any).sortOrder ?? 0) - ((b as any).sortOrder ?? 0)); } - public getOwnerDocumentTypes() { + get ownerDocumentTypes() { return this.#structure?.documentTypes; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts index 549f5d301f..c7603d99f0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts @@ -8,6 +8,7 @@ import { PropertyValueMap, css, html, nothing, customElement, state } from '@umb import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UmbPropertySettingsModalResult, UmbPropertySettingsModalData } from '@umbraco-cms/backoffice/modal'; import { generateAlias } from '@umbraco-cms/backoffice/utils'; +import { UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/document-type'; // TODO: Could base take a token to get its types?. // TODO: Missing a workspace context... unless this should not be a workspace any way. @customElement('umb-property-settings-modal') @@ -43,12 +44,24 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< @state() private _aliasLocked = true; + @state() + protected _ownerDocumentType?: UmbPropertySettingsModalResult; + @state() protected _returnData!: UmbPropertySettingsModalResult; connectedCallback(): void { super.connectedCallback(); - this._returnData = JSON.parse(JSON.stringify(this.data)); + + // TODO: This is actually not good enough, we need to be able to get to the DOCUMENT_WORKSPACE_CONTEXT, so we can have a look at the draft/runtime version of the document. Otherwise 'Vary by culture' is first updated when saved. + this.consumeContext(UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN, (instance) => { + this.observe(instance.byId(this.data?.documentTypeId), (documentType) => { + this._ownerDocumentType = documentType; + this.requestUpdate('_ownerDocumentType'); + }, '_observeDocumentType'); + }); + + this._returnData = JSON.parse(JSON.stringify(this.data?.propertyData ?? {})); this._returnData.validation ??= {}; @@ -105,7 +118,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< if (!this._aliasLocked) { this._returnData.alias = alias; } else { - this._returnData.alias = this.data?.alias; + this._returnData.alias = this.data?.propertyData?.alias; } this.requestUpdate('_returnData'); } @@ -177,6 +190,11 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< this.requestUpdate('_returnData'); } + #onVaryByCultureChange(event: UUIBooleanInputEvent) { + this._returnData.variesByCulture = event.target.checked; + this.requestUpdate('_returnData'); + } + // TODO: This would conceptually be a Property Editor Workspace, should be changed at one point in the future. // For now this is hacky made available by giving the element an fixed alias. // This would allow for workspace views and workspace actions. @@ -226,6 +244,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< ${this.#renderCustomValidation()}
+ ${this.#renderVariationControls()}
Appearance
${this.#renderAlignLeftIcon()} ${this.#renderAlignTopIcon()}
@@ -277,13 +296,13 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
${this._returnData.validation?.mandatory ? html` + Variation + ${this._ownerDocumentType?.variesByCulture ? this.#renderVaryByCulture() : ''} + +
` + : ''; + } + #renderVaryByCulture() { + return html` + `; + } + static styles = [ UmbTextStyles, css` diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts index 9681fb5edc..e19b23161f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts @@ -1,7 +1,10 @@ import { PropertyTypeModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; -export type UmbPropertySettingsModalData = PropertyTypeModelBaseModel; +export type UmbPropertySettingsModalData = { + documentTypeId: string; + propertyData: PropertyTypeModelBaseModel +}; export type UmbPropertySettingsModalResult = PropertyTypeModelBaseModel; export const UMB_PROPERTY_SETTINGS_MODAL = new UmbModalToken< diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts index bc8d60f4ec..875da8e50e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts @@ -1,5 +1,7 @@ import './components/index.js'; +export * from './repository/index.js'; + export const DOCUMENT_TYPE_ROOT_ENTITY_TYPE = 'document-type-root'; export const DOCUMENT_TYPE_ENTITY_TYPE = 'document-type'; export const DOCUMENT_TYPE_FOLDER_ENTITY_TYPE = 'document-type-folder'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/document-type.store.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/document-type.store.ts index 478934315a..5e9abda97d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/document-type.store.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/document-type.store.ts @@ -10,7 +10,7 @@ import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api * @extends {UmbStoreBase} * @description - Data Store for Document Types */ -export class UmbDocumentTypeStore extends UmbStoreBase { +export class UmbDocumentTypeStore extends UmbStoreBase { /** * Creates an instance of UmbDocumentTypeStore. * @param {UmbControllerHostElement} host diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/index.ts new file mode 100644 index 0000000000..bac7074196 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/index.ts @@ -0,0 +1,3 @@ +export * from './document-type.repository.js' +export * from './document-type.store.js' +export * from './document-type.tree.store.js' diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts index 49c68bca7e..2d77e819c7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts @@ -104,7 +104,14 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL) .addAdditionalPath('new-property') .onSetup(async () => { - return (await this._propertyStructureHelper.createPropertyScaffold(this._containerId)) ?? false; + + const documentTypeId = this._ownerDocumentTypes?.find( + (types) => types.containers?.find((containers) => containers.id === this.containerId), + )?.id; + if(documentTypeId === undefined) return false; + const propertyData = await this._propertyStructureHelper.createPropertyScaffold(this._containerId); + if(propertyData === undefined) return false; + return {propertyData, documentTypeId}; }) .onSubmit((result) => { this.#addProperty(result); @@ -116,7 +123,7 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle connectedCallback(): void { super.connectedCallback(); - const doctypes = this._propertyStructureHelper.getOwnerDocumentTypes(); + const doctypes = this._propertyStructureHelper.ownerDocumentTypes; if (!doctypes) return; this.observe( doctypes, diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts index abe4098cc3..a980b612f7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts @@ -86,7 +86,11 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { this.#modalRegistration = new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL) .addUniquePaths(['propertyId']) .onSetup(() => { - return this.property ?? false; + const documentTypeId = this.ownerDocumentTypeId; + if(documentTypeId === undefined) return false; + const propertyData = this.property; + if(propertyData === undefined) return false; + return {propertyData, documentTypeId}; }) .onSubmit((result) => { this._partialUpdate(result);