Merge branch 'main' into v15/feature/validate-specific-cultures

nielslyngsoe · web-flow · commit cd44bc69e308 · 2024-09-24T09:38:30.000+02:00
diff --git a/src/packages/core/manifests.ts b/src/packages/core/manifests.ts
@@ -10,7 +10,7 @@ import { manifests as extensionManifests } from './extension-registry/manifests.
 import { manifests as iconRegistryManifests } from './icon-registry/manifests.js';
 import { manifests as localizationManifests } from './localization/manifests.js';
 import { manifests as menuManifests } from './menu/manifests.js';
-import { manifests as modalManifests } from './modal/common/manifests.js';
+import { manifests as modalManifests } from './modal/manifests.js';
 import { manifests as pickerManifests } from './picker/manifests.js';
 import { manifests as propertyActionManifests } from './property-action/manifests.js';
 import { manifests as propertyManifests } from './property/manifests.js';
diff --git a/src/packages/core/modal/common/confirm/confirm-modal.controller.ts b/src/packages/core/modal/common/confirm/confirm-modal.controller.ts
@@ -1,5 +1,5 @@
-import { UMB_CONFIRM_MODAL, type UmbConfirmModalData } from '../../token/confirm-modal.token.js';
-import { UMB_MODAL_MANAGER_CONTEXT } from '../../context/modal-manager.context.js';
+import { UMB_MODAL_MANAGER_CONTEXT } from '../../context/index.js';
+import { UMB_CONFIRM_MODAL, type UmbConfirmModalData } from './confirm-modal.token.js';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
diff --git a/src/packages/core/modal/common/confirm/confirm-modal.token.ts b/src/packages/core/modal/common/confirm/confirm-modal.token.ts
@@ -1,4 +1,4 @@
-import { UmbModalToken } from './modal-token.js';
+import { UmbModalToken } from '../../token/index.js';
 import type { TemplateResult } from '@umbraco-cms/backoffice/external/lit';
 
 export interface UmbConfirmModalData {
diff --git a/src/packages/core/modal/common/confirm/index.ts b/src/packages/core/modal/common/confirm/index.ts
@@ -0,0 +1,2 @@
+export * from './confirm-modal.token.js';
+export * from './confirm-modal.controller.js';
diff --git a/src/packages/core/modal/common/confirm/manifests.ts b/src/packages/core/modal/common/confirm/manifests.ts
@@ -0,0 +1,8 @@
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.Confirm',
+		name: 'Confirm Modal',
+		element: () => import('./confirm-modal.element.js'),
+	},
+];
diff --git a/src/packages/core/modal/common/index.ts b/src/packages/core/modal/common/index.ts
@@ -1 +1,3 @@
 export * from './embedded-media/index.js';
+export * from './confirm/index.js';
+export * from './item-picker/index.js';
diff --git a/src/packages/core/modal/common/item-picker/index.ts b/src/packages/core/modal/common/item-picker/index.ts
@@ -0,0 +1 @@
+export * from './item-picker-modal.token.js';
diff --git a/src/packages/core/modal/common/item-picker/item-picker-modal.token.ts b/src/packages/core/modal/common/item-picker/item-picker-modal.token.ts
@@ -1,4 +1,4 @@
-import { UmbModalToken } from './modal-token.js';
+import { UmbModalToken } from '../../token/index.js';
 
 export type UmbItemPickerModalData = {
 	headline: string;
diff --git a/src/packages/core/modal/common/item-picker/manifests.ts b/src/packages/core/modal/common/item-picker/manifests.ts
@@ -0,0 +1,8 @@
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.ItemPicker',
+		name: 'Item Picker Modal',
+		element: () => import('./item-picker-modal.element.js'),
+	},
+];
diff --git a/src/packages/core/modal/common/manifests.ts b/src/packages/core/modal/common/manifests.ts
@@ -1,20 +1,13 @@
+import { manifests as confirmManifests } from './confirm/manifests.js';
+import { manifests as itemPickerManifests } from './item-picker/manifests.js';
+
 export const manifests: Array<UmbExtensionManifest> = [
-	{
-		type: 'modal',
-		alias: 'Umb.Modal.Confirm',
-		name: 'Confirm Modal',
-		element: () => import('./confirm/confirm-modal.element.js'),
-	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.EmbeddedMedia',
 		name: 'Embedded Media Modal',
 		element: () => import('./embedded-media/embedded-media-modal.element.js'),
 	},
-	{
-		type: 'modal',
-		alias: 'Umb.Modal.ItemPicker',
-		name: 'Item Picker Modal',
-		element: () => import('./item-picker/item-picker-modal.element.js'),
-	},
+	...confirmManifests,
+	...itemPickerManifests,
 ];
diff --git a/src/packages/core/modal/index.ts b/src/packages/core/modal/index.ts
@@ -5,4 +5,4 @@ export * from './token/index.js';
 export * from './types.js';
 export * from './component/modal-base.element.js';
 export * from './component/modal.element.js';
-export * from './common/confirm/confirm-modal.controller.js';
+export * from './common/index.js';
diff --git a/src/packages/core/modal/manifests.ts b/src/packages/core/modal/manifests.ts
@@ -0,0 +1,3 @@
+import { manifests as commonManifests } from './common/manifests.js';
+
+export const manifests: Array<UmbExtensionManifest> = [...commonManifests];
diff --git a/src/packages/core/modal/token/index.ts b/src/packages/core/modal/token/index.ts
@@ -1,7 +1,4 @@
 export * from './change-password-modal.token.js';
-export * from './confirm-modal.token.js';
 export * from './embedded-media-modal.token.js';
-export * from './entity-user-permission-settings-modal.token.js';
-export * from './item-picker-modal.token.js';
 export * from './modal-token.js';
 export * from './property-editor-ui-picker-modal.token.js';
diff --git a/src/packages/core/validation/controllers/validation.controller.ts b/src/packages/core/validation/controllers/validation.controller.ts
@@ -219,7 +219,7 @@ export class UmbValidationController extends UmbControllerBase implements UmbVal
 	/**
 	 * Validate this context, all the validators of this context will be validated.
 	 * Notice its a recursive check meaning sub validation contexts also validates their validators.
-	 * @returns succeed {Promise<boolean>} - Returns a promise that resolves to true if the validator succeeded, this depends on the validators and wether forceSucceed is set.
+	 * @returns succeed {Promise<boolean>} - Returns a promise that resolves to true if the validation succeeded.
 	 */
 	async validate(): Promise<void> {
 		// TODO: clear server messages here?, well maybe only if we know we will get new server messages? Do the server messages hook into the system like another validator?
diff --git a/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts b/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts
@@ -4,12 +4,13 @@ import { UMB_DOCUMENT_PICKER_MODAL } from '../../modals/index.js';
 import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
-import { UMB_ENTITY_USER_PERMISSION_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import type { UmbDeselectedEvent } from '@umbraco-cms/backoffice/event';
 import { UmbChangeEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/event';
 import type { ManifestEntityUserPermission } from '@umbraco-cms/backoffice/extension-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UMB_ENTITY_USER_PERMISSION_MODAL } from '@umbraco-cms/backoffice/user-permission';
 
 @customElement('umb-input-document-granular-user-permission')
 export class UmbInputDocumentGranularUserPermissionElement extends UUIFormControlMixin(UmbLitElement, '') {
diff --git a/src/packages/templating/modals/templating-page-field-builder/components/template-field-dropdown-list/template-field-dropdown-list.element.ts b/src/packages/templating/modals/templating-page-field-builder/components/template-field-dropdown-list/template-field-dropdown-list.element.ts
@@ -16,6 +16,11 @@ import type { UUIComboboxEvent, UUIComboboxElement } from '@umbraco-cms/backoffi
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbMediaTypeDetailRepository, UMB_MEDIA_TYPE_PICKER_MODAL } from '@umbraco-cms/backoffice/media-type';
 import { UMB_MODAL_MANAGER_CONTEXT, type UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
+import {
+	UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
+	UmbFormControlMixin,
+	type UmbFormControlValidatorConfig,
+} from '@umbraco-cms/backoffice/validation';
 
 interface FieldPickerValue {
 	alias: string;
@@ -29,19 +34,44 @@ enum FieldType {
 }
 
 @customElement('umb-template-field-dropdown-list')
-export class UmbTemplateFieldDropdownListElement extends UmbLitElement {
+export class UmbTemplateFieldDropdownListElement extends UmbFormControlMixin<
+	FieldPickerValue | undefined,
+	typeof UmbLitElement,
+	undefined
+>(UmbLitElement) {
+	//
+	#requiredValidation?: UmbFormControlValidatorConfig;
+	@property({ type: Boolean })
+	public get required(): boolean | undefined {
+		return undefined;
+	}
+	public set required(value: boolean | undefined) {
+		if (value === true) {
+			this.#requiredValidation ??= this.addValidator(
+				'valueMissing',
+				() => this.requiredMessage,
+				() => !this._value,
+			);
+		} else if (this.#requiredValidation) {
+			this.removeValidator(this.#requiredValidation);
+		}
+	}
+
+	@property({ type: String })
+	requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+
 	@property({ type: Boolean, attribute: 'exclude-media-type', reflect: true })
 	public excludeMediaType = false;
 
 	private _value: FieldPickerValue | undefined;
 	@property({ type: Object })
-	public set value(val: FieldPickerValue | undefined) {
+	public override set value(val: FieldPickerValue | undefined) {
 		const oldVal = this._value;
 		this._value = val;
 		this.requestUpdate('value', oldVal);
 		this.dispatchEvent(new UmbChangeEvent());
 	}
-	public get value(): FieldPickerValue | undefined {
+	public override get value(): FieldPickerValue | undefined {
 		return this._value;
 	}
 
@@ -176,8 +206,8 @@ export class UmbTemplateFieldDropdownListElement extends UmbLitElement {
 		if (this._type !== FieldType.SYSTEM && !this._unique) return;
 		return html`
 			<strong>${this.localize.string(this._uniqueName ?? '')}</strong>
-			<uui-combobox id="value" value=${ifDefined(this.value?.alias)}>
-				<uui-combobox-list @change=${this.#onChangeValue}>
+			<uui-combobox id="value" value=${ifDefined(this.value?.alias)} @change=${this.#onChangeValue}>
+				<uui-combobox-list>
 					${repeat(
 						this._customFields,
 						(field) => field.alias,
diff --git a/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts b/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts
@@ -7,24 +7,35 @@ import type { UmbTemplateFieldDropdownListElement } from './components/template-
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import type { UUIBooleanInputEvent, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
+import type { UUIBooleanInputEvent, UUIButtonState, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
 // import of local components
 import './components/template-field-dropdown-list/index.js';
+import { UmbValidationContext, umbBindToValidation } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-templating-page-field-builder-modal')
 export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseElement<
 	UmbTemplatingPageFieldBuilderModalData,
 	UmbTemplatingPageFieldBuilderModalValue
 > {
-	private _close() {
+	#validation = new UmbValidationContext(this);
+
+	#close() {
 		this.modalContext?.reject();
 	}
 
-	private _submit() {
-		if (!this._field) return;
-		this.value = { output: getUmbracoFieldSnippet(this._field, this._default, this._recursive) };
-		this.modalContext?.submit();
+	async #submit() {
+		this._submitButtonState = 'waiting';
+
+		try {
+			await this.#validation.validate();
+			this._submitButtonState = 'success';
+
+			this.value = { output: getUmbracoFieldSnippet(this._field!, this._default, this._recursive) };
+			this.modalContext?.submit();
+		} catch {
+			this._submitButtonState = 'failed';
+		}
 	}
 
 	@state()
@@ -39,6 +50,9 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
 	@state()
 	private _recursive: boolean = false;
 
+	@state()
+	private _submitButtonState: UUIButtonState;
+
 	/** TODO: Implement "Choose field" */
 
 	#onChangeFieldValue(e: Event) {
@@ -50,12 +64,14 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
 			<umb-body-layout headline=${this.localize.term('template_insert')}>
 				<uui-box>
 					<div>
-						<uui-label for="page-field-value">
-							<umb-localize key="templateEditor_chooseField">Choose field</umb-localize>
-						</uui-label>
-						<umb-template-field-dropdown-list
-							@change=${this.#onChangeFieldValue}
-							exclude-media-type></umb-template-field-dropdown-list>
+						<umb-property-layout orientation="vertical" label=${this.localize.term('templateEditor_chooseField')}>
+							<umb-template-field-dropdown-list
+								slot="editor"
+								required
+								${umbBindToValidation(this)}
+								@change=${this.#onChangeFieldValue}
+								exclude-media-type></umb-template-field-dropdown-list>
+						</umb-property-layout>
 
 						<uui-label for="page-field-default-value">
 							<umb-localize key="templateEditor_defaultValue">Default value</umb-localize>
@@ -85,14 +101,15 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
 				</uui-box>
 				<uui-button
 					slot="actions"
-					@click=${this._close}
+					@click=${this.#close}
 					look="secondary"
 					label=${this.localize.term('general_close')}></uui-button>
 				<uui-button
 					slot="actions"
-					@click=${this._submit}
+					@click=${this.#submit}
 					color="positive"
 					look="primary"
+					.state=${this._submitButtonState}
 					label=${this.localize.term('general_submit')}></uui-button>
 			</umb-body-layout>
 		`;
diff --git a/src/packages/user/user-permission/index.ts b/src/packages/user/user-permission/index.ts
@@ -1,3 +1,4 @@
 export * from './components/index.js';
+export * from './modals/index.js';
 
 export type { UmbUserPermissionModel } from './types.js';
diff --git a/src/packages/user/user-permission/modals/index.ts b/src/packages/user/user-permission/modals/index.ts
@@ -0,0 +1 @@
+export * from './settings/index.js';
diff --git a/src/packages/user/user-permission/modals/manifests.ts b/src/packages/user/user-permission/modals/manifests.ts
@@ -1,8 +1,3 @@
-export const manifests: Array<UmbExtensionManifest> = [
-	{
-		type: 'modal',
-		alias: 'Umb.Modal.EntityUserPermissionSettings',
-		name: 'Entity User Permission Settings Modal',
-		js: () => import('./settings/entity-user-permission-settings-modal.element.js'),
-	},
-];
+import { manifests as settingsManifests } from './settings/manifests.js';
+
+export const manifests: Array<UmbExtensionManifest> = [...settingsManifests];
diff --git a/src/packages/user/user-permission/modals/settings/entity-user-permission-settings-modal.element.ts b/src/packages/user/user-permission/modals/settings/entity-user-permission-settings-modal.element.ts
@@ -1,9 +1,9 @@
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { html, customElement, css, nothing, state } from '@umbraco-cms/backoffice/external/lit';
 import type {
 	UmbEntityUserPermissionSettingsModalData,
 	UmbEntityUserPermissionSettingsModalValue,
-} from '@umbraco-cms/backoffice/modal';
+} from './entity-user-permission-settings-modal.token.js';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, customElement, css, nothing, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import type { UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event';
 
diff --git a/src/packages/user/user-permission/modals/settings/entity-user-permission-settings-modal.token.ts b/src/packages/user/user-permission/modals/settings/entity-user-permission-settings-modal.token.ts
@@ -1,4 +1,4 @@
-import { UmbModalToken } from './modal-token.js';
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbEntityUserPermissionSettingsModalData {
 	unique: string;
diff --git a/src/packages/user/user-permission/modals/settings/index.ts b/src/packages/user/user-permission/modals/settings/index.ts
@@ -0,0 +1 @@
+export * from './entity-user-permission-settings-modal.token.js';
diff --git a/src/packages/user/user-permission/modals/settings/manifests.ts b/src/packages/user/user-permission/modals/settings/manifests.ts
@@ -0,0 +1,8 @@
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.EntityUserPermissionSettings',
+		name: 'Entity User Permission Settings Modal',
+		js: () => import('./entity-user-permission-settings-modal.element.js'),
+	},
+];
diff --git a/src/packages/user/user/workspace/user/components/user-workspace-profile-settings/user-workspace-profile-settings.element.ts b/src/packages/user/user/workspace/user/components/user-workspace-profile-settings/user-workspace-profile-settings.element.ts
@@ -6,6 +6,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import type { UmbUiCultureInputElement } from '@umbraco-cms/backoffice/localization';
+import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-user-workspace-profile-settings')
 export class UmbUserWorkspaceProfileSettingsElement extends UmbLitElement {
@@ -79,6 +80,7 @@ export class UmbUserWorkspaceProfileSettingsElement extends UmbLitElement {
 					@change="${this.#onEmailChange}"
 					required
 					required-message=${this.localize.term('user_emailRequired')}
+					${umbBindToValidation(this)}
 					value=${ifDefined(this._user?.email)}></uui-input>
 			</umb-property-layout>
 		`;
diff --git a/src/packages/user/user/workspace/user/user-workspace.context.ts b/src/packages/user/user/workspace/user/user-workspace.context.ts
@@ -9,6 +9,7 @@ import type { UmbSubmittableWorkspaceContext } from '@umbraco-cms/backoffice/wor
 import { UmbSubmittableWorkspaceContextBase } from '@umbraco-cms/backoffice/workspace';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbValidationContext } from '@umbraco-cms/backoffice/validation';
 
 type EntityType = UmbUserDetailModel;
 
@@ -40,6 +41,8 @@ export class UmbUserWorkspaceContext
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_USER_WORKSPACE_ALIAS);
 
+		this.addValidationContext(new UmbValidationContext(this));
+
 		this.routes.setRoutes([
 			{
 				path: 'edit/:id',

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { UmbModalToken } from './modal-token.js';`
	`1`	`+import { UmbModalToken } from '../../token/index.js';`
`2`	`2`	`import type { TemplateResult } from '@umbraco-cms/backoffice/external/lit';`
`3`	`3`
`4`	`4`	`export interface UmbConfirmModalData {`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from './confirm-modal.token.js';`
	`2`	`+export * from './confirm-modal.controller.js';`
Original file line number	Diff line number	Diff line change
`@@ -1 +1,3 @@`
`1`	`1`	`export * from './embedded-media/index.js';`
	`2`	`+export * from './confirm/index.js';`
	`3`	`+export * from './item-picker/index.js';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export * from './item-picker-modal.token.js';`