Skip to content

Commit 438d99a

Browse files
nielslyngsoenielslyngsoe
committed
re-initialize workspace split view when switching variant
1 parent e25f4a7 commit 438d99a

File tree

11 files changed

+52
-37
lines changed

11 files changed

+52
-37
lines changed

‎src/libs/observable-api/observer.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@ export type ObserverCallback<T> = (value: T) => void;
55

66
export class UmbObserver<T> {
77
#source!: Observable<T>;
8-
#callback!: ObserverCallback<T>;
8+
#callback?: ObserverCallback<T>;
99
#subscription!: Subscription;
1010

1111
constructor(source: Observable<T>, callback?: ObserverCallback<T>) {
1212
this.#source = source;
1313
if (callback) {
14+
this.#callback = callback;
1415
this.#subscription = source.subscribe(callback);
1516
}
1617
}
@@ -44,7 +45,7 @@ export class UmbObserver<T> {
4445

4546
hostConnected() {
4647
// Notice: This will not re-subscribe if this controller was destroyed. Only if the subscription was closed.
47-
if (this.#subscription?.closed) {
48+
if (this.#subscription?.closed && this.#callback) {
4849
this.#subscription = this.#source.subscribe(this.#callback);
4950
}
5051
}

‎src/packages/core/content/workspace/views/edit/content-editor-properties.element.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export class UmbContentWorkspaceViewEditPropertiesElement extends UmbLitElement
4141
);
4242
});
4343
this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (datasetContext) => {
44+
console.log(this, datasetContext)
4445
this.#variantId = datasetContext.getVariantId();
4546
this.#generatePropertyDataPath();
4647
});

‎src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
4949
constructor() {
5050
super();
5151

52+
console.log("workspace editor created.")
53+
5254
new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'workspaceView', null, (workspaceViews) => {
5355
this._workspaceViews = workspaceViews.map((view) => view.manifest);
5456
this._createRoutes();

‎src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import type { ActiveVariant } from '../../controllers/index.js';
2-
import { UMB_WORKSPACE_SPLIT_VIEW_CONTEXT } from './workspace-split-view.context.js';
3-
import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
4-
import { UMB_PROPERTY_DATASET_CONTEXT, isNameablePropertyDatasetContext } from '@umbraco-cms/backoffice/property';
51
import {
62
type UUIInputElement,
73
UUIInputEvent,
84
type UUIPopoverContainerElement,
95
} from '@umbraco-cms/backoffice/external/uui';
106
import { css, html, nothing, customElement, state, query } from '@umbraco-cms/backoffice/external/lit';
11-
import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
127
import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api';
13-
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
148
import type { UmbDocumentWorkspaceContext } from '@umbraco-cms/backoffice/document';
9+
import type { ActiveVariant } from '../../controllers/index.js';
10+
import { UMB_WORKSPACE_SPLIT_VIEW_CONTEXT } from './workspace-split-view.context.js';
11+
import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
12+
import { UMB_PROPERTY_DATASET_CONTEXT, isNameablePropertyDatasetContext } from '@umbraco-cms/backoffice/property';
13+
import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
14+
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
1515

1616
type UmbDocumentVariantOption = {
1717
culture: string | null;

‎src/packages/core/workspace/components/workspace-split-view/workspace-split-view.element.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { css, html, customElement, property, ifDefined } from '@umbraco-cms/backoffice/external/lit';
12
import { UmbWorkspaceSplitViewContext } from './workspace-split-view.context.js';
23
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
3-
import { css, html, customElement, property, ifDefined } from '@umbraco-cms/backoffice/external/lit';
44
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
55

66
// import local components
@@ -34,6 +34,9 @@ export class UmbWorkspaceSplitViewElement extends UmbLitElement {
3434
splitViewContext = new UmbWorkspaceSplitViewContext(this);
3535

3636
override render() {
37+
38+
console.log("workspace split view render")
39+
3740
return html`
3841
<umb-workspace-editor
3942
alias=${this.alias}

‎src/packages/core/workspace/controllers/workspace-split-view-manager.controller.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
21
import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
2+
import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
33

44
export type ActiveVariant = {
55
index: number;
@@ -13,7 +13,7 @@ export type ActiveVariant = {
1313
* @description - Class managing the split view state for a workspace context.
1414
*/
1515
export class UmbWorkspaceSplitViewManager {
16-
#activeVariantsInfo = new UmbArrayState<ActiveVariant>([], (x) => x.index);
16+
#activeVariantsInfo = new UmbArrayState<ActiveVariant>([], (x) => x.index).sortBy((a, b) => (a.index || 0) - (b.index || 0));
1717
public readonly activeVariantsInfo = this.#activeVariantsInfo.asObservable();
1818

1919
private _routeBase?: string;
@@ -25,7 +25,8 @@ export class UmbWorkspaceSplitViewManager {
2525
}
2626

2727
setActiveVariant(index: number, culture: string | null, segment: string | null) {
28-
this.#activeVariantsInfo.appendOne({ index, culture: culture || null, segment: segment || null });
28+
console.log("setActiveVariant", index, culture, segment)
29+
this.#activeVariantsInfo.appendOneAt({ index, culture: culture ?? null, segment: segment ?? null }, index);
2930
}
3031

3132
getActiveVariants() {
@@ -39,7 +40,7 @@ export class UmbWorkspaceSplitViewManager {
3940
}
4041

4142
public activeVariantByIndex(index: number) {
42-
return this.#activeVariantsInfo.asObservablePart((data) => data[index] || undefined);
43+
return this.#activeVariantsInfo.asObservablePart((data) => data.find(x => x.index === index) || undefined);
4344
}
4445

4546
public switchVariant(index: number, variantId: UmbVariantId) {

‎src/packages/documents/document-blueprints/workspace/document-blueprint-workspace-editor.element.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@ import type { UmbRoute, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/r
88

99
@customElement('umb-document-blueprint-workspace-editor')
1010
export class UmbDocumentBlueprintWorkspaceEditorElement extends UmbLitElement {
11-
//
12-
// 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]
13-
private splitViewElement = new UmbDocumentBlueprintWorkspaceSplitViewElement();
1411

1512
#workspaceContext?: typeof UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT.TYPE;
1613

@@ -49,7 +46,7 @@ export class UmbDocumentBlueprintWorkspaceEditorElement extends UmbLitElement {
4946
routes.push({
5047
// TODO: When implementing Segments, be aware if using the unique is URL Safe... [NL]
5148
path: variantA.unique + '_&_' + variantB.unique,
52-
component: this.splitViewElement,
49+
component: UmbDocumentBlueprintWorkspaceSplitViewElement,
5350
setup: (_component, info) => {
5451
// Set split view/active info..
5552
const variantSplit = info.match.fragments.consumed.split('_&_');
@@ -66,7 +63,7 @@ export class UmbDocumentBlueprintWorkspaceEditorElement extends UmbLitElement {
6663
routes.push({
6764
// TODO: When implementing Segments, be aware if using the unique is URL Safe... [NL]
6865
path: variant.unique,
69-
component: this.splitViewElement,
66+
component: UmbDocumentBlueprintWorkspaceSplitViewElement,
7067
setup: (_component, info) => {
7168
// cause we might come from a split-view, we need to reset index 1.
7269
this.#workspaceContext?.splitView.removeActiveVariant(1);

‎src/packages/documents/documents/workspace/document-workspace-editor.element.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import type { UmbDocumentVariantOptionModel } from '../types.js';
2-
import { UmbDocumentWorkspaceSplitViewElement } from './document-workspace-split-view.element.js';
3-
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from './document-workspace.context-token.js';
41
import { customElement, state, css, html } from '@umbraco-cms/backoffice/external/lit';
52
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
63
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
74
import type { UmbRoute, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
85
import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
6+
import type { UmbDocumentVariantOptionModel } from '../types.js';
7+
import { UmbDocumentWorkspaceSplitViewElement } from './document-workspace-split-view.element.js';
8+
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from './document-workspace.context-token.js';
99

1010
// TODO: This seem fully identical with Media Workspace Editor, so we can refactor this to a generic component. [NL]
1111
@customElement('umb-document-workspace-editor')
1212
export class UmbDocumentWorkspaceEditorElement extends UmbLitElement {
1313
//
1414
// 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]
15-
private splitViewElement = new UmbDocumentWorkspaceSplitViewElement();
15+
//private splitViewElement = new UmbDocumentWorkspaceSplitViewElement();
1616

1717
#appLanguage?: typeof UMB_APP_LANGUAGE_CONTEXT.TYPE;
1818
#workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE;
@@ -67,7 +67,7 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement {
6767
routes.push({
6868
// TODO: When implementing Segments, be aware if using the unique still is URL Safe, cause its most likely not... [NL]
6969
path: variantA.unique + '_&_' + variantB.unique,
70-
component: this.splitViewElement,
70+
component: UmbDocumentWorkspaceSplitViewElement,
7171
setup: (_component, info) => {
7272
// Set split view/active info..
7373
const variantSplit = info.match.fragments.consumed.split('_&_');
@@ -84,7 +84,7 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement {
8484
routes.push({
8585
// TODO: When implementing Segments, be aware if using the unique still is URL Safe, cause its most likely not... [NL]
8686
path: variant.unique,
87-
component: this.splitViewElement,
87+
component: UmbDocumentWorkspaceSplitViewElement,
8888
setup: (_component, info) => {
8989
// cause we might come from a split-view, we need to reset index 1.
9090
this.#workspaceContext?.splitView.removeActiveVariant(1);
@@ -110,16 +110,16 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement {
110110
});
111111
}
112112

113-
const oldValue = this._routes;
113+
/*const oldValue = this._routes;
114114
115115
// is there any differences in the amount ot the paths? [NL]
116116
if (oldValue && oldValue.length === routes.length) {
117117
// is there any differences in the paths? [NL]
118118
const hasDifferences = oldValue.some((route, index) => route.path !== routes[index].path);
119119
if (!hasDifferences) return;
120-
}
120+
}*/
121121
this._routes = routes;
122-
this.requestUpdate('_routes', oldValue);
122+
//this.requestUpdate('_routes', oldValue);
123123
}
124124

125125
private _gotWorkspaceRoute = (e: UmbRouterSlotInitEvent) => {

‎src/packages/documents/documents/workspace/document-workspace-split-view.element.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,27 @@ export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
2828
this._workspaceContext.splitView.activeVariantsInfo,
2929
(variants) => {
3030
this._variants = variants;
31+
console.log("______variants: ", variants[0])
3132
},
3233
'_observeActiveVariantsInfo',
3334
);
3435
}
3536

37+
override connectedCallback(): void {
38+
super.connectedCallback();
39+
console.log("connected callback------")
40+
}
41+
42+
override disconnectedCallback(): void {
43+
super.disconnectedCallback();
44+
console.log("DISconnected callback------")
45+
}
46+
47+
override destroy(): void {
48+
super.destroy();
49+
console.log("split view ot destroyed")
50+
}
51+
3652
override render() {
3753
return this._variants
3854
? html`<div id="splitViews">

‎src/packages/media/media/workspace/media-workspace-editor.element.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@ import { customElement, state, css, html } from '@umbraco-cms/backoffice/externa
77
import type { UmbRoute, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
88
@customElement('umb-media-workspace-editor')
99
export class UmbMediaWorkspaceEditorElement extends UmbLitElement {
10-
//
11-
// 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]
12-
private splitViewElement = new UmbMediaWorkspaceSplitViewElement();
1310

1411
@state()
1512
_routes?: Array<UmbRoute>;
@@ -49,7 +46,7 @@ export class UmbMediaWorkspaceEditorElement extends UmbLitElement {
4946
routes.push({
5047
// TODO: When implementing Segments, be aware if using the unique is URL Safe... [NL]
5148
path: variantA.unique + '_&_' + variantB.unique,
52-
component: this.splitViewElement,
49+
component: UmbMediaWorkspaceSplitViewElement,
5350
setup: (_component, info) => {
5451
// Set split view/active info..
5552
const variantSplit = info.match.fragments.consumed.split('_&_');
@@ -66,7 +63,7 @@ export class UmbMediaWorkspaceEditorElement extends UmbLitElement {
6663
routes.push({
6764
// TODO: When implementing Segments, be aware if using the unique is URL Safe... [NL]
6865
path: variant.unique,
69-
component: this.splitViewElement,
66+
component: UmbMediaWorkspaceSplitViewElement,
7067
setup: (_component, info) => {
7168
// cause we might come from a split-view, we need to reset index 1.
7269
this.#workspaceContext?.splitView.removeActiveVariant(1);

0 commit comments

Comments
 (0)