From 648cf4ec8b7d4a5cd1dce4a89edfd41dbd20c3a7 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 20 Feb 2024 11:01:06 +0100 Subject: [PATCH] rename to variant picker and display variant information --- .../src/packages/documents/documents/index.ts | 1 + .../documents/documents/modals/index.ts | 3 +- .../documents/modals/language-picker/index.ts | 1 - .../documents/documents/modals/manifests.ts | 8 ++--- .../document-variant-picker-modal.element.ts} | 29 ++++++++++--------- .../document-variant-picker-modal.token.ts} | 15 +++++----- .../documents/modals/variant-picker/index.ts | 1 + .../src/packages/documents/documents/types.ts | 5 ++-- .../workspace/document-workspace.context.ts | 24 +++++++-------- 9 files changed, 43 insertions(+), 44 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/language-picker/index.ts rename src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/{language-picker/document-language-picker-modal.element.ts => variant-picker/document-variant-picker-modal.element.ts} (80%) rename src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/{language-picker/document-language-picker-modal.token.ts => variant-picker/document-variant-picker-modal.token.ts} (50%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/variant-picker/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts index 500b000e79..80990995f5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts @@ -9,6 +9,7 @@ export * from './components/index.js'; export * from './entity.js'; export * from './entity-actions/index.js'; export * from './conditions/index.js'; +export * from './modals/index.js'; export { UMB_DOCUMENT_TREE_ALIAS } from './tree/index.js'; export { UMB_CONTENT_MENU_ALIAS } from './menu.manifests.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts index 10b774e558..6db24e7b9a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts @@ -1,2 +1 @@ -export * from './manifests.js'; -export * from './language-picker/index.js'; +export * from './variant-picker/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/language-picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/language-picker/index.ts deleted file mode 100644 index 452e8ee73e..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/language-picker/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './document-language-picker-modal.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/manifests.ts index 121e704d7b..758fbc4314 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/manifests.ts @@ -1,13 +1,13 @@ import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry'; -export const UMB_DOCUMENT_LANGUAGE_PICKER_MODAL_ALIAS = 'Umb.Modal.DocumentLanguagePicker'; +export const UMB_DOCUMENT_VARIANT_PICKER_MODAL_ALIAS = 'Umb.Modal.DocumentVariantPicker'; const modals: Array = [ { type: 'modal', - alias: UMB_DOCUMENT_LANGUAGE_PICKER_MODAL_ALIAS, - name: 'Document Language Picker Modal', - js: () => import('./language-picker/document-language-picker-modal.element.js'), + alias: UMB_DOCUMENT_VARIANT_PICKER_MODAL_ALIAS, + name: 'Document Variant Picker Modal', + js: () => import('./variant-picker/document-variant-picker-modal.element.js'), }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/language-picker/document-language-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/variant-picker/document-variant-picker-modal.element.ts similarity index 80% rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/language-picker/document-language-picker-modal.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/variant-picker/document-variant-picker-modal.element.ts index 15f22ad226..0ff930e242 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/language-picker/document-language-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/variant-picker/document-variant-picker-modal.element.ts @@ -1,7 +1,8 @@ +import { UmbDocumentVariantState } from '../../types.js'; import type { - UmbDocumentLanguagePickerModalValue, - UmbDocumentLanguagePickerModalData, -} from './document-language-picker-modal.token.js'; + UmbDocumentVariantPickerModalValue, + UmbDocumentVariantPickerModalData, +} from './document-variant-picker-modal.token.js'; import { UmbLanguageCollectionRepository } from '@umbraco-cms/backoffice/language'; import type { UmbLanguageItemModel } from '@umbraco-cms/backoffice/language'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; @@ -10,9 +11,9 @@ import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; @customElement('umb-document-language-picker-modal') -export class UmbDocumentLanguagePickerModalElement extends UmbModalBaseElement< - UmbDocumentLanguagePickerModalData, - UmbDocumentLanguagePickerModalValue +export class UmbDocumentVariantPickerModalElement extends UmbModalBaseElement< + UmbDocumentVariantPickerModalData, + UmbDocumentVariantPickerModalValue > { @state() private _languages: Array = []; @@ -92,21 +93,21 @@ export class UmbDocumentLanguagePickerModalElement extends UmbModalBaseElement< return html`

${this.localize.term(this.#subtitle)}

${repeat( - this.#filteredLanguages, - (item) => item.unique, + this.data?.variants ?? [], + (item) => item.culture, (item) => html` this.#selectionManager.select(item.unique)} - @deselected=${() => this.#selectionManager.deselect(item.unique)} - ?selected=${this.#selectionManager.isSelected(item.unique)}> + @selected=${() => this.#selectionManager.select(item.culture)} + @deselected=${() => this.#selectionManager.deselect(item.culture)} + ?selected=${this.#selectionManager.isSelected(item.culture)}>
${item.name}
${this.localize.term( - this.data?.publishedVariants.includes(item.unique) ? 'content_published' : 'content_unpublished', + item.state === UmbDocumentVariantState.PUBLISHED ? 'content_published' : 'content_unpublished', )}
@@ -141,10 +142,10 @@ export class UmbDocumentLanguagePickerModalElement extends UmbModalBaseElement< ]; } -export default UmbDocumentLanguagePickerModalElement; +export default UmbDocumentVariantPickerModalElement; declare global { interface HTMLElementTagNameMap { - 'umb-document-language-picker-modal': UmbDocumentLanguagePickerModalElement; + 'umb-document-language-picker-modal': UmbDocumentVariantPickerModalElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/language-picker/document-language-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/variant-picker/document-variant-picker-modal.token.ts similarity index 50% rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/language-picker/document-language-picker-modal.token.ts rename to src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/variant-picker/document-variant-picker-modal.token.ts index 3d646a8f33..ca51c9da11 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/language-picker/document-language-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/variant-picker/document-variant-picker-modal.token.ts @@ -1,21 +1,22 @@ -import { UMB_DOCUMENT_LANGUAGE_PICKER_MODAL_ALIAS } from '../manifests.js'; +import { UMB_DOCUMENT_VARIANT_PICKER_MODAL_ALIAS } from '../manifests.js'; +import type { UmbDocumentVariantModel } from '../../types.js'; import type { UmbLanguageItemModel } from '@umbraco-cms/backoffice/language'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; -export interface UmbDocumentLanguagePickerModalData { +export interface UmbDocumentVariantPickerModalData { filter?: (language: UmbLanguageItemModel) => boolean; type: 'save' | 'publish' | 'schedule' | 'unpublish'; - publishedVariants: Array; + variants: Array; } -export interface UmbDocumentLanguagePickerModalValue { +export interface UmbDocumentVariantPickerModalValue { selection: Array; } export const UMB_DOCUMENT_LANGUAGE_PICKER_MODAL = new UmbModalToken< - UmbDocumentLanguagePickerModalData, - UmbDocumentLanguagePickerModalValue ->(UMB_DOCUMENT_LANGUAGE_PICKER_MODAL_ALIAS, { + UmbDocumentVariantPickerModalData, + UmbDocumentVariantPickerModalValue +>(UMB_DOCUMENT_VARIANT_PICKER_MODAL_ALIAS, { modal: { type: 'dialog', size: 'small', diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/variant-picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/variant-picker/index.ts new file mode 100644 index 0000000000..1c69ee726c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/variant-picker/index.ts @@ -0,0 +1 @@ +export * from './document-variant-picker-modal.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/types.ts index 04fb86e3e8..b9a34927e6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/types.ts @@ -1,6 +1,7 @@ import type { UmbDocumentEntityType } from './entity.js'; import type { UmbVariantModel } from '@umbraco-cms/backoffice/variant'; -import type { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; +import { DocumentVariantStateModel as UmbDocumentVariantState } from '@umbraco-cms/backoffice/external/backend-api'; +export { UmbDocumentVariantState }; export interface UmbDocumentDetailModel { documentType: { @@ -18,7 +19,7 @@ export interface UmbDocumentDetailModel { } export interface UmbDocumentVariantModel extends UmbVariantModel { - state: DocumentVariantStateModel | null; + state: UmbDocumentVariantState | null; publishDate: string | null; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts index aa014dca2a..8f28d274f5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts @@ -3,7 +3,7 @@ import { UmbDocumentPropertyDataContext } from '../property-dataset-context/docu import { UMB_DOCUMENT_ENTITY_TYPE } from '../entity.js'; import { UmbDocumentDetailRepository } from '../repository/index.js'; import type { UmbDocumentDetailModel } from '../types.js'; -import { type UmbDocumentLanguagePickerModalData, UMB_DOCUMENT_LANGUAGE_PICKER_MODAL } from '../modals/index.js'; +import { type UmbDocumentVariantPickerModalData, UMB_DOCUMENT_LANGUAGE_PICKER_MODAL } from '../modals/index.js'; import { UmbDocumentPublishingRepository } from '../repository/publishing/index.js'; import { UMB_DOCUMENT_WORKSPACE_ALIAS } from './manifests.js'; import { UmbVariantId } from '@umbraco-cms/backoffice/variant'; @@ -186,25 +186,22 @@ export class UmbDocumentWorkspaceContext } } - async #selectVariants(type: UmbDocumentLanguagePickerModalData['type']): Promise { + async #selectVariants(type: UmbDocumentVariantPickerModalData['type']): Promise { const currentData = this.getData(); if (!currentData) throw new Error('Data is missing'); - const availableVariants = currentData.variants; + const variants = currentData.variants; // If there is only one variant, we don't need to select anything. - if (availableVariants.length === 1) { - // TODO: Apply this when the server returns all variants - //return [UmbVariantId.Create(availableVariants[0])]; + if (variants.length === 1) { + return [UmbVariantId.Create(variants[0])]; } if (!this.#modalManagerContext) throw new Error('Modal manager context is missing'); - const modalData: UmbDocumentLanguagePickerModalData = { + const modalData: UmbDocumentVariantPickerModalData = { type, - publishedVariants: availableVariants - .filter((x) => x.state === DocumentVariantStateModel.PUBLISHED) - .map((x) => x.culture?.toLowerCase() ?? ''), + variants, // TODO: Filter out variants that do not have any changes unless it is the current variant. }; const activeVariants = this.splitView.getActiveVariants(); @@ -221,13 +218,12 @@ export class UmbDocumentWorkspaceContext const selectedVariants = result.selection.map((x) => x?.toLowerCase() ?? ''); // Match the result to the available variants. - const variantIds = availableVariants - .filter((x) => selectedVariants.includes(x.culture!)) - .map((x) => UmbVariantId.Create(x)); + const variantIds = variants.filter((x) => selectedVariants.includes(x.culture!)).map((x) => UmbVariantId.Create(x)); + return variantIds; } - async #createOrSave(type: UmbDocumentLanguagePickerModalData['type']): Promise { + async #createOrSave(type: UmbDocumentVariantPickerModalData['type']): Promise { const data = this.getData(); if (!data) throw new Error('Data is missing'); if (!data.unique) throw new Error('Unique is missing');