update value for scheduling

src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/schedule-modal/document-schedule-modal.element.ts

@@ -1,12 +1,11 @@
+import { UmbDocumentVariantLanguagePickerElement } from '../shared/document-variant-language-picker.element.js';
 import { UmbDocumentVariantState, type UmbDocumentVariantOptionModel } from '../../types.js';
 import type { UmbDocumentScheduleModalData, UmbDocumentScheduleModalValue } from './document-schedule-modal.token.js';
-import { css, customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
-import type { ScheduleRequestModel } from '@umbraco-cms/backoffice/external/backend-api';
-
-import '../shared/document-variant-language-picker.element.js';
+import type { UmbInputDateElement } from '@umbraco-cms/backoffice/components';
 
 @customElement('umb-document-schedule-modal')
 export class UmbDocumentScheduleModalElement extends UmbModalBaseElement<
@@ -14,11 +13,26 @@ export class UmbDocumentScheduleModalElement extends UmbModalBaseElement<
 	UmbDocumentScheduleModalValue
 > {
 	#selectionManager = new UmbSelectionManager<string>(this);
-	#schedule?: ScheduleRequestModel;
 
 	@state()
 	_options: Array<UmbDocumentVariantOptionModel> = [];
 
+	@state()
+	_selection: UmbDocumentScheduleModalValue['selection'] = [];
+
+	constructor() {
+		super();
+		this.observe(
+			this.#selectionManager.selection,
+			(selection) => {
+				this._selection = selection.map((unique) => {
+					return { unique, schedule: {} };
+				});
+			},
+			'_selection',
+		);
+	}
+
 	firstUpdated() {
 		this.#configureSelectionManager();
 	}
@@ -36,9 +50,9 @@ export class UmbDocumentScheduleModalElement extends UmbModalBaseElement<
 		let selected = this.value?.selection ?? [];
 
 		// Filter selection based on options:
-		selected = selected.filter((s) => this._options.some((o) => o.unique === s));
+		selected = selected.filter((s) => this._options.some((o) => o.unique === s.unique));
 
-		this.#selectionManager.setSelection(selected);
+		this.#selectionManager.setSelection(selected.map((s) => s.unique));
 
 		// Additionally select mandatory languages:
 		this._options.forEach((variant) => {
@@ -49,7 +63,7 @@ export class UmbDocumentScheduleModalElement extends UmbModalBaseElement<
 	}
 
 	#submit() {
-		this.value = { selection: this.#selectionManager.getSelection(), schedule: this.#schedule };
+		this.value = { selection: this._selection };
 		this.modalContext?.submit();
 	}
 
@@ -57,14 +71,27 @@ export class UmbDocumentScheduleModalElement extends UmbModalBaseElement<
 		this.modalContext?.reject();
 	}
 
+	#isSelected(unique: string) {
+		return this._selection.some((s) => s.unique === unique);
+	}
+
 	render() {
 		return html`<umb-body-layout headline=${this.localize.term('general_scheduledPublishing')}>
 			<p id="subtitle">
-				<umb-localize key="content_languagesToSchedule">Which languages would you like to schedule?</umb-localize>
+				${when(
+					this._options.length > 1,
+					() => html`
+						<umb-localize key="content_languagesToSchedule">Which languages would you like to schedule?</umb-localize>
+					`,
+					() => html`
+						<umb-localize key="content_schedulePublishHelp">
+							Select the date and time to publish and/or unpublish the content item.
+						</umb-localize>
+					`,
+				)}
 			</p>
-			<umb-document-variant-language-picker
-				.selectionManager=${this.#selectionManager}
-				.variantLanguageOptions=${this._options}></umb-document-variant-language-picker>
+
+			${this.#renderOptions()}
 
 			<div slot="actions">
 				<uui-button label=${this.localize.term('general_close')} @click=${this.#close}></uui-button>
@@ -77,6 +104,56 @@ export class UmbDocumentScheduleModalElement extends UmbModalBaseElement<
 		</umb-body-layout> `;
 	}
 
+	#renderOptions() {
+		return repeat(
+			this._options,
+			(option) => option.unique,
+			(option) => html`
+				<uui-menu-item
+					selectable
+					label=${option.variant?.name ?? option.language.name}
+					@selected=${() => this.#selectionManager.select(option.unique)}
+					@deselected=${() => this.#selectionManager.deselect(option.unique)}
+					?selected=${this.#isSelected(option.unique)}>
+					<uui-icon slot="icon" name="icon-globe"></uui-icon>
+					${UmbDocumentVariantLanguagePickerElement.renderLabel(option)}
+				</uui-menu-item>
+				${when(this.#isSelected(option.unique), () => this.#renderPublishDateInput(option.unique))}
+			`,
+		);
+	}
+
+	#renderPublishDateInput(unique: string) {
+		return html`<div class="publish-date">
+			<umb-input-date
+				@change=${(e: Event) => this.#onFromDateChange(e, unique)}
+				label=${this.localize.term('general_publishDate')}></umb-input-date>
+			<umb-input-date
+				@change=${(e: Event) => this.#onToDateChange(e, unique)}
+				label=${this.localize.term('general_publishDate')}></umb-input-date>
+		</div>`;
+	}
+
+	#onFromDateChange(e: Event, unique: string) {
+		const variant = this._selection.find((s) => s.unique === unique);
+		if (variant) {
+			variant.schedule = {
+				...variant.schedule,
+				publishTime: (e.target as UmbInputDateElement).value.toString(),
+			};
+		}
+	}
+
+	#onToDateChange(e: Event, unique: string) {
+		const variant = this._selection.find((s) => s.unique === unique);
+		if (variant) {
+			variant.schedule = {
+				...variant.schedule,
+				unpublishTime: (e.target as UmbInputDateElement).value.toString(),
+			};
+		}
+	}
+
 	static styles = [
 		UmbTextStyles,
 		css`
@@ -85,6 +162,21 @@ export class UmbDocumentScheduleModalElement extends UmbModalBaseElement<
 				width: 400px;
 				max-width: 90vw;
 			}
+
+			.label {
+				padding: 0.5rem 0;
+			}
+			.label-status {
+				font-size: 0.8rem;
+			}
+
+			.publish-date {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				gap: 1rem;
+				margin: 0.5rem 0;
+			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/schedule-modal/document-schedule-modal.token.ts

@@ -1,12 +1,17 @@
-import type { UmbDocumentVariantPickerData, UmbDocumentVariantPickerValue } from '../types.js';
+import type { UmbDocumentVariantPickerData } from '../types.js';
 import { UMB_DOCUMENT_SCHEDULE_MODAL_ALIAS } from '../manifests.js';
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 import type { ScheduleRequestModel } from '@umbraco-cms/backoffice/external/backend-api';
 
+export interface UmbDocumentScheduleSelectionModel {
+	unique: string;
+	schedule?: ScheduleRequestModel | null;
+}
+
 export interface UmbDocumentScheduleModalData extends UmbDocumentVariantPickerData {}
 
-export interface UmbDocumentScheduleModalValue extends UmbDocumentVariantPickerValue {
-	schedule?: ScheduleRequestModel;
+export interface UmbDocumentScheduleModalValue {
+	selection: Array<UmbDocumentScheduleSelectionModel>;
 }
 
 export const UMB_DOCUMENT_SCHEDULE_MODAL = new UmbModalToken<