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

a good first version of very by culture toggle for property editor settings

Browse Source
This commit is contained in:
Niels Lyngsø
2023-09-06 19:50:14 +02:00
committed by Jacob Overgaard
parent 567b5475ac
commit 47fbfe62e3
8 changed files with 66 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts
View File

@@ -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;
}

45
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
View File

@@ -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()}
</div>
<hr />
${this.#renderVariationControls()}
<div class="container">
<b style="margin-bottom: var(--uui-size-space-3)">Appearance</b>
<div id="appearances">${this.#renderAlignLeftIcon()} ${this.#renderAlignTopIcon()}</div>
@@ -277,13 +296,13 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
<uui-toggle
@change=${this.#onMandatoryChange}
id="mandatory"
value=${this._returnData.validation?.mandatory}
.checked=${this._returnData.validation?.mandatory ?? false}
slot="editor"></uui-toggle>
</div>
${this._returnData.validation?.mandatory
? html`<uui-input
name="mandatory-message"
value=${this._returnData.validation?.mandatoryMessage}
value=${this._returnData.validation?.mandatoryMessage ?? ''}
@change=${this.#onMandatoryMessageChange}
style="margin-top: var(--uui-size-space-1)"
id="mandatory-message"
@@ -312,6 +331,24 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
: nothing} `;
}
#renderVariationControls() {
return this._ownerDocumentType?.variesByCulture || this._ownerDocumentType?.variesBySegment ?
html`
<div class="container">
<b>Variation</b>
${this._ownerDocumentType?.variesByCulture ? this.#renderVaryByCulture() : ''}
</div>
<hr />`
: '';
}
#renderVaryByCulture() {
return html`<uui-toggle
@change=${this.#onVaryByCultureChange}
.checked=${this._returnData.variesByCulture ?? false}
label="Vary by culture"></uui-toggle>
`;
}
static styles = [
UmbTextStyles,
css`

5
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
View File

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

2
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts
View File

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

2
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/document-type.store.ts
View File

@@ -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<DocumentTypeResponseModel> {
/**
* Creates an instance of UmbDocumentTypeStore.
* @param {UmbControllerHostElement} host

3
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export * from './document-type.repository.js'
export * from './document-type.store.js'
export * from './document-type.tree.store.js'

11
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts
View File

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

6
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts
View File

@@ -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);