Skip to content

Commit 7c0b5b7

Browse files
nielslyngsoeCopilot
nielslyngsoe
and
Copilot
authored
Collections: Stop opening items in modals (#20384)
* remove use of modals in collections * add parent path to support absolute path generation * add note * Update src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts Co-authored-by: Copilot <[email protected]> --------- Co-authored-by: Copilot <[email protected]>
1 parent 7bcef5f commit 7c0b5b7

File tree

7 files changed

+27
-113
lines changed

7 files changed

+27
-113
lines changed

‎src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ export class UmbDefaultCollectionContext<
113113
}
114114

115115
setupView(viewElement: UmbControllerHost) {
116+
// TODO: Consider to remove this one as well:
116117
new UmbModalRouteRegistrationController(viewElement, UMB_WORKSPACE_MODAL)
117118
.addAdditionalPath('entity/:entityType')
118119
.onSetup((params) => {

‎src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/action/create-document-collection-action.element.ts‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../document-collection.context-token.js';
21
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../workspace/constants.js';
32
import { UMB_CREATE_DOCUMENT_WORKSPACE_PATH_PATTERN } from '../../paths.js';
43
import { UMB_DOCUMENT_ENTITY_TYPE, UMB_DOCUMENT_ROOT_ENTITY_TYPE } from '../../entity.js';
@@ -8,16 +7,12 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
87
import type { ManifestCollectionAction } from '@umbraco-cms/backoffice/collection';
98
import type { UmbAllowedDocumentTypeModel } from '@umbraco-cms/backoffice/document-type';
109
import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
11-
import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
1210

1311
@customElement('umb-create-document-collection-action')
1412
export class UmbCreateDocumentCollectionActionElement extends UmbLitElement {
1513
@state()
1614
private _allowedDocumentTypes: Array<UmbAllowedDocumentTypeModel> = [];
1715

18-
@state()
19-
private _workspacePathBuilder?: UmbModalRouteBuilder;
20-
2116
@state()
2217
private _documentUnique?: UmbEntityUnique;
2318

@@ -43,12 +38,6 @@ export class UmbCreateDocumentCollectionActionElement extends UmbLitElement {
4338
this._documentTypeUnique = documentTypeUnique;
4439
});
4540
});
46-
47-
this.consumeContext(UMB_DOCUMENT_COLLECTION_CONTEXT, (collectionContext) => {
48-
this.observe(collectionContext?.workspacePathBuilder, (builder) => {
49-
this._workspacePathBuilder = builder;
50-
});
51-
});
5241
}
5342

5443
override async firstUpdated() {
@@ -73,14 +62,14 @@ export class UmbCreateDocumentCollectionActionElement extends UmbLitElement {
7362
}
7463

7564
#getCreateUrl(item: UmbAllowedDocumentTypeModel) {
76-
return item.unique && this._workspacePathBuilder
77-
? this._workspacePathBuilder({ entityType: UMB_DOCUMENT_ENTITY_TYPE }) +
78-
UMB_CREATE_DOCUMENT_WORKSPACE_PATH_PATTERN.generateLocal({
79-
parentEntityType: this._documentUnique ? UMB_DOCUMENT_ENTITY_TYPE : UMB_DOCUMENT_ROOT_ENTITY_TYPE,
80-
parentUnique: this._documentUnique ?? 'null',
81-
documentTypeUnique: item.unique,
82-
})
83-
: '';
65+
if (!item.unique) {
66+
throw new Error('Item unique is missing');
67+
}
68+
return UMB_CREATE_DOCUMENT_WORKSPACE_PATH_PATTERN.generateAbsolute({
69+
parentEntityType: this._documentUnique ? UMB_DOCUMENT_ENTITY_TYPE : UMB_DOCUMENT_ROOT_ENTITY_TYPE,
70+
parentUnique: this._documentUnique ?? 'null',
71+
documentTypeUnique: item.unique,
72+
});
8473
}
8574

8675
override render() {

‎src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,13 @@ import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel }
44
import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit';
55
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
66
import type { UmbDefaultCollectionContext, UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection';
7-
import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
87
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
98

109
import '@umbraco-cms/backoffice/ufm';
1110
import './document-grid-collection-card.element.js';
1211

1312
@customElement('umb-document-grid-collection-view')
1413
export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
15-
@state()
16-
private _workspacePathBuilder?: UmbModalRouteBuilder;
17-
1814
@state()
1915
private _items: Array<UmbDocumentCollectionItemModel> = [];
2016

@@ -32,13 +28,6 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
3228
this.consumeContext(UMB_DOCUMENT_COLLECTION_CONTEXT, (collectionContext) => {
3329
this.#collectionContext = collectionContext;
3430
collectionContext?.setupView(this);
35-
this.observe(
36-
collectionContext?.workspacePathBuilder,
37-
(builder) => {
38-
this._workspacePathBuilder = builder;
39-
},
40-
'observePath',
41-
);
4231
this.#observeCollectionContext();
4332
});
4433
}
@@ -76,12 +65,9 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
7665
}
7766

7867
#getEditUrl(item: UmbDocumentCollectionItemModel) {
79-
return item.unique && this._workspacePathBuilder
80-
? this._workspacePathBuilder({ entityType: item.entityType }) +
81-
UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN.generateLocal({
82-
unique: item.unique,
83-
})
84-
: '';
68+
return UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN.generateAbsolute({
69+
unique: item.unique,
70+
});
8571
}
8672

8773
override render() {

‎src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { css, customElement, html, state } from '@umbraco-cms/backoffice/externa
66
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
77
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
88
import type { UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection';
9-
import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
109
import type {
1110
UmbTableColumn,
1211
UmbTableConfig,
@@ -24,9 +23,6 @@ import './column-layouts/document-table-column-state.element.js';
2423

2524
@customElement('umb-document-table-collection-view')
2625
export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
27-
@state()
28-
private _workspacePathBuilder?: UmbModalRouteBuilder;
29-
3026
@state()
3127
private _userDefinedProperties?: Array<UmbCollectionColumnConfiguration>;
3228

@@ -70,16 +66,6 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
7066
this.consumeContext(UMB_DOCUMENT_COLLECTION_CONTEXT, (collectionContext) => {
7167
this.#collectionContext = collectionContext;
7268
collectionContext?.setupView(this);
73-
this.observe(
74-
collectionContext?.workspacePathBuilder,
75-
(builder) => {
76-
this._workspacePathBuilder = builder;
77-
if (this.#collectionContext) {
78-
this.#createTableItems(this.#collectionContext.getItems());
79-
}
80-
},
81-
'observePath',
82-
);
8369
this.#observeCollectionContext();
8470
});
8571
}
@@ -148,13 +134,9 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
148134
};
149135
}
150136

151-
const editPath =
152-
item.unique && this._workspacePathBuilder
153-
? this._workspacePathBuilder({ entityType: item.entityType }) +
154-
UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN.generateLocal({
155-
unique: item.unique,
156-
})
157-
: '';
137+
const editPath = UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN.generateAbsolute({
138+
unique: item.unique,
139+
});
158140

159141
return {
160142
columnAlias: column.alias,

‎src/Umbraco.Web.UI.Client/src/packages/media/media/collection/action/create-media-collection-action.element.ts‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { UMB_MEDIA_COLLECTION_CONTEXT } from '../media-collection.context-token.js';
21
import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../constants.js';
32
import { UMB_CREATE_MEDIA_WORKSPACE_PATH_PATTERN } from '../../paths.js';
43
import { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE } from '../../entity.js';
@@ -8,16 +7,12 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
87
import type { ManifestCollectionAction } from '@umbraco-cms/backoffice/collection';
98
import type { UmbAllowedMediaTypeModel } from '@umbraco-cms/backoffice/media-type';
109
import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
11-
import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
1210

1311
@customElement('umb-create-media-collection-action')
1412
export class UmbCreateMediaCollectionActionElement extends UmbLitElement {
1513
@state()
1614
private _allowedMediaTypes: Array<UmbAllowedMediaTypeModel> = [];
1715

18-
@state()
19-
private _workspacePathBuilder?: UmbModalRouteBuilder;
20-
2116
@state()
2217
private _mediaUnique?: UmbEntityUnique;
2318

@@ -44,12 +39,6 @@ export class UmbCreateMediaCollectionActionElement extends UmbLitElement {
4439
this._mediaTypeUnique = mediaTypeUnique;
4540
});
4641
});
47-
48-
this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (collectionContext) => {
49-
this.observe(collectionContext?.workspacePathBuilder, (builder) => {
50-
this._workspacePathBuilder = builder;
51-
});
52-
});
5342
}
5443

5544
override async firstUpdated() {
@@ -71,14 +60,14 @@ export class UmbCreateMediaCollectionActionElement extends UmbLitElement {
7160
}
7261

7362
#getCreateUrl(item: UmbAllowedMediaTypeModel) {
74-
return item.unique && this._workspacePathBuilder
75-
? this._workspacePathBuilder({ entityType: UMB_MEDIA_ENTITY_TYPE }) +
76-
UMB_CREATE_MEDIA_WORKSPACE_PATH_PATTERN.generateLocal({
77-
parentEntityType: this._mediaUnique ? UMB_MEDIA_ENTITY_TYPE : UMB_MEDIA_ROOT_ENTITY_TYPE,
78-
parentUnique: this._mediaUnique ?? 'null',
79-
mediaTypeUnique: item.unique,
80-
})
81-
: '';
63+
if (!item.unique) {
64+
throw new Error('Item does not have a unique identifier');
65+
}
66+
return UMB_CREATE_MEDIA_WORKSPACE_PATH_PATTERN.generateAbsolute({
67+
parentEntityType: this._mediaUnique ? UMB_MEDIA_ENTITY_TYPE : UMB_MEDIA_ROOT_ENTITY_TYPE,
68+
parentUnique: this._mediaUnique ?? 'null',
69+
mediaTypeUnique: item.unique,
70+
});
8271
}
8372

8473
override render() {

‎src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/grid/media-grid-collection-view.element.ts‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,11 @@ import { css, customElement, html, ifDefined, repeat, state } from '@umbraco-cms
77
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
88
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
99
import { UmbFileDropzoneItemStatus } from '@umbraco-cms/backoffice/dropzone';
10-
import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
1110

1211
import '@umbraco-cms/backoffice/imaging';
1312

1413
@customElement('umb-media-grid-collection-view')
1514
export class UmbMediaGridCollectionViewElement extends UmbLitElement {
16-
@state()
17-
private _workspacePathBuilder?: UmbModalRouteBuilder;
18-
1915
@state()
2016
private _items: Array<UmbMediaCollectionItemModel> = [];
2117

@@ -29,13 +25,6 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement {
2925
this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (collectionContext) => {
3026
this.#collectionContext = collectionContext;
3127
collectionContext?.setupView(this);
32-
this.observe(
33-
collectionContext?.workspacePathBuilder,
34-
(builder) => {
35-
this._workspacePathBuilder = builder;
36-
},
37-
'observePath',
38-
);
3928
this.#observeCollectionContext();
4029
});
4130
}
@@ -69,12 +58,7 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement {
6958
}
7059

7160
#getEditUrl(item: UmbMediaCollectionItemModel) {
72-
return item.unique && this._workspacePathBuilder
73-
? this._workspacePathBuilder({ entityType: item.entityType }) +
74-
UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN.generateLocal({
75-
unique: item.unique,
76-
})
77-
: '';
61+
return UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN.generateAbsolute({ unique: item.unique });
7862
}
7963

8064
override render() {

‎src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/media-table-collection-view.element.ts‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,12 @@ import type {
1616
} from '@umbraco-cms/backoffice/components';
1717

1818
import './column-layouts/media-table-column-name.element.js';
19-
import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
2019

2120
@customElement('umb-media-table-collection-view')
2221
export class UmbMediaTableCollectionViewElement extends UmbLitElement {
2322
@state()
2423
private _userDefinedProperties?: Array<UmbCollectionColumnConfiguration>;
2524

26-
@state()
27-
private _workspacePathBuilder?: UmbModalRouteBuilder;
28-
2925
@state()
3026
private _items?: Array<UmbMediaCollectionItemModel>;
3127

@@ -60,14 +56,6 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement {
6056
this.#collectionContext = collectionContext;
6157
this.#observeCollectionContext();
6258
collectionContext?.setupView(this);
63-
this.observe(
64-
collectionContext?.workspacePathBuilder,
65-
(builder) => {
66-
this._workspacePathBuilder = builder;
67-
this.#createTableItems();
68-
},
69-
'observePath',
70-
);
7159
});
7260
}
7361

@@ -127,7 +115,6 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement {
127115
this._tableItems = [];
128116

129117
if (this._items === undefined) return;
130-
if (this._workspacePathBuilder === undefined) return;
131118

132119
if (this._tableColumns.length === 0) {
133120
this.#createTableHeadings();
@@ -150,13 +137,9 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement {
150137
};
151138
}
152139

153-
const editPath =
154-
item.unique && this._workspacePathBuilder
155-
? this._workspacePathBuilder({ entityType: item.entityType }) +
156-
UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN.generateLocal({
157-
unique: item.unique,
158-
})
159-
: '';
140+
const editPath = UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN.generateAbsolute({
141+
unique: item.unique,
142+
});
160143

161144
return {
162145
columnAlias: column.alias,

0 commit comments

Comments
 (0)