From 988d7bcc33e543846d727a240f9fed35ac0679e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 15 Mar 2024 09:13:22 +0100 Subject: [PATCH 1/4] use the app language context culture as the default variant to open. --- .../document-workspace-editor.element.ts | 61 ++++++++++++------- 1 file changed, 40 insertions(+), 21 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts index 2d7715adba..872de5a5dd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts @@ -5,6 +5,8 @@ import { customElement, state, css, html } from '@umbraco-cms/backoffice/externa import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbRoute, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; +import { jsonStringComparison } from '@umbraco-cms/backoffice/observable-api'; +import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language'; // TODO: This seem fully identical with Media Workspace Editor, so we can refactor this to a generic component. [NL] @customElement('umb-document-workspace-editor') @@ -13,51 +15,65 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement { // TODO: Refactor: when having a split view/variants context token, we can rename the split view/variants component to a generic and make this component generic as well. [NL] private splitViewElement = new UmbDocumentWorkspaceSplitViewElement(); + #appLanguage?: typeof UMB_APP_LANGUAGE_CONTEXT.TYPE; #workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE; + #workspaceRoute?: string; + #appCulture?: string; + #variants?: Array; + @state() _routes?: Array; constructor() { super(); + this.consumeContext(UMB_APP_LANGUAGE_CONTEXT, (instance) => { + this.#appLanguage = instance; + this.observe(this.#appLanguage.appLanguageCulture, (appCulture) => { + this.#appCulture = appCulture; + this.#generateRoutes(); + }); + }); + this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (instance) => { this.#workspaceContext = instance; - this.#observeVariants(); + this.observe( + this.#workspaceContext.variantOptions, + (variants) => { + this.#variants = variants; + this.#generateRoutes(); + }, + '_observeVariants', + ); }); } - #observeVariants() { - if (!this.#workspaceContext) return; - // TODO: the variantOptions observable is like too broad as this will be triggered then there is any change in the variant options, we need to only update routes when there is a relevant change to them. [NL] - this.observe(this.#workspaceContext.variantOptions, (options) => this._generateRoutes(options), '_observeVariants'); - } - - private _handleVariantFolderPart(index: number, folderPart: string) { + #handleVariantFolderPart(index: number, folderPart: string) { const variantSplit = folderPart.split('_'); const culture = variantSplit[0]; const segment = variantSplit[1]; this.#workspaceContext?.splitView.setActiveVariant(index, culture, segment); } - private async _generateRoutes(options: Array) { - if (!options || options.length === 0) return; + async #generateRoutes() { + if (!this.#variants || !this.#appCulture) return; // Generate split view routes for all available routes const routes: Array = []; // Split view routes: - options.forEach((variantA) => { - options.forEach((variantB) => { + this.#variants.forEach((variantA) => { + this.#variants!.forEach((variantB) => { routes.push({ - // TODO: When implementing Segments, be aware if using the unique is URL Safe... [NL] + // TODO: When implementing Segments, be aware if using the unique still is URL Safe, cause its most likely not... [NL] path: variantA.unique + '_&_' + variantB.unique, component: this.splitViewElement, setup: (_component, info) => { // Set split view/active info.. const variantSplit = info.match.fragments.consumed.split('_&_'); variantSplit.forEach((part, index) => { - this._handleVariantFolderPart(index, part); + this.#handleVariantFolderPart(index, part); }); }, }); @@ -65,15 +81,15 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement { }); // Single view: - options.forEach((variant) => { + this.#variants.forEach((variant) => { routes.push({ - // TODO: When implementing Segments, be aware if using the unique is URL Safe... [NL] + // TODO: When implementing Segments, be aware if using the unique still is URL Safe, cause its most likely not... [NL] path: variant.unique, component: this.splitViewElement, setup: (_component, info) => { // cause we might come from a split-view, we need to reset index 1. this.#workspaceContext?.splitView.removeActiveVariant(1); - this._handleVariantFolderPart(0, info.match.fragments.consumed); + this.#handleVariantFolderPart(0, info.match.fragments.consumed); }, }); }); @@ -82,17 +98,19 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement { // Using first single view as the default route for now (hence the math below): routes.push({ path: '', - redirectTo: routes[options.length * options.length]?.path, + resolve: () => { + // Retrieve the current app language variant id from the context and redirect to the correct route. + history.pushState({}, '', `${this.#workspaceRoute}/${this.#appCulture}/${this.#variants![0].unique}`); + }, }); } const oldValue = this._routes; // is there any differences in the amount ot the paths? [NL] - // TODO: if we make a memorization function as the observer, we can avoid this check and avoid the whole build of routes. [NL] if (oldValue && oldValue.length === routes.length) { // is there any differences in the paths? [NL] - const hasDifferences = oldValue.some((route, index) => route.path !== routes[index].path); + const hasDifferences = !jsonStringComparison(oldValue, routes); if (!hasDifferences) return; } this._routes = routes; @@ -100,7 +118,8 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement { } private _gotWorkspaceRoute = (e: UmbRouterSlotInitEvent) => { - this.#workspaceContext?.splitView.setWorkspaceRoute(e.target.absoluteRouterPath); + this.#workspaceRoute = e.target.absoluteRouterPath; + this.#workspaceContext?.splitView.setWorkspaceRoute(this.#workspaceRoute); }; render() { From 60df8c001157d7eab0fcefb277482a674f2f3ad8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 18 Mar 2024 20:12:53 +0100 Subject: [PATCH 2/4] revert change --- .../documents/workspace/document-workspace-editor.element.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts index 872de5a5dd..08f12fe554 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts @@ -56,7 +56,7 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement { this.#workspaceContext?.splitView.setActiveVariant(index, culture, segment); } - async #generateRoutes() { + #generateRoutes() { if (!this.#variants || !this.#appCulture) return; // Generate split view routes for all available routes @@ -106,11 +106,12 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement { } const oldValue = this._routes; + console.log('Test', oldValue === routes); // is there any differences in the amount ot the paths? [NL] if (oldValue && oldValue.length === routes.length) { // is there any differences in the paths? [NL] - const hasDifferences = !jsonStringComparison(oldValue, routes); + const hasDifferences = oldValue.some((route, index) => route.path !== routes[index].path); if (!hasDifferences) return; } this._routes = routes; From 78f133ccdf4a95958fe66f3eafdccce5ab405493 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 18 Mar 2024 20:15:44 +0100 Subject: [PATCH 3/4] remove log --- .../documents/workspace/document-workspace-editor.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts index 08f12fe554..92c2fb6e68 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts @@ -106,7 +106,6 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement { } const oldValue = this._routes; - console.log('Test', oldValue === routes); // is there any differences in the amount ot the paths? [NL] if (oldValue && oldValue.length === routes.length) { From 0a30cc2e2c99b0b2bd0f280326aa9fcc12d34199 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 18 Mar 2024 20:15:58 +0100 Subject: [PATCH 4/4] remove import --- .../documents/workspace/document-workspace-editor.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts index 92c2fb6e68..bca7f3c99b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts @@ -5,7 +5,6 @@ import { customElement, state, css, html } from '@umbraco-cms/backoffice/externa import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbRoute, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; -import { jsonStringComparison } from '@umbraco-cms/backoffice/observable-api'; import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language'; // TODO: This seem fully identical with Media Workspace Editor, so we can refactor this to a generic component. [NL]