From d139d616e3bd405e75fd772f5709bd37edbc35b9 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 8 Feb 2024 15:11:44 +0000 Subject: [PATCH 1/4] Amends to Document Collection Table View --- .../document-table-collection-view.element.ts | 41 ++++++++++--------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts index d5631db653..10934791d3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts @@ -1,7 +1,9 @@ +import type { UmbDocumentCollectionFilterModel } from '../../types.js'; import type { UmbDocumentTreeItemModel } from '../../../tree/types.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; - +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection'; import type { UmbTableColumn, UmbTableConfig, @@ -12,10 +14,8 @@ import type { UmbTableSelectedEvent, } from '@umbraco-cms/backoffice/components'; import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; -import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import './column-layouts/document-table-actions-column-layout.element.js'; +//import './column-layouts/document-table-actions-column-layout.element.js'; @customElement('umb-document-table-collection-view') export class UmbDocumentTableCollectionViewElement extends UmbLitElement { @@ -35,12 +35,12 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { allowSorting: true, }, // TODO: actions should live in an UmbTable element when we have moved the current UmbTable to UUI. - { - name: 'Actions', - alias: 'entityActions', - elementName: 'umb-document-table-actions-column-layout', - width: '80px', - }, + // { + // name: 'Actions', + // alias: 'entityActions', + // elementName: 'umb-document-table-actions-column-layout', + // width: '80px', + // }, ]; @state() @@ -49,7 +49,7 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { @state() private _selection: Array = []; - private _collectionContext?: UmbDefaultCollectionContext; + private _collectionContext?: UmbDefaultCollectionContext; constructor() { super(); @@ -77,17 +77,18 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { if (!item.unique) throw new Error('Item id is missing.'); return { id: item.unique, + icon: item.documentType.icon, data: [ { columnAlias: 'entityName', - value: item.name || 'Untitled', - }, - { - columnAlias: 'entityActions', - value: { - entityType: item.entityType, - }, + value: item.name || 'Unnamed Document', }, + // { + // columnAlias: 'entityActions', + // value: { + // entityType: item.entityType, + // }, + // }, ], }; }); @@ -135,7 +136,7 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { box-sizing: border-box; height: 100%; width: 100%; - padding: var(--uui-size-space-3) var(--uui-size-space-6); + padding: var(--uui-size-space-3) 0; } /* TODO: Should we have embedded padding in the table component? */ From e82c83f3ab7ffdcf8a5821de3b698ac939dcede3 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 8 Feb 2024 15:12:43 +0000 Subject: [PATCH 2/4] [WIP] Adds Document Collection Grid View Largely copied from "src\packages\user\user\collection\views\grid\user-grid-collection-view.element.ts" --- .../document-grid-collection-view.element.ts | 106 ++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts new file mode 100644 index 0000000000..8189c2ab6a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts @@ -0,0 +1,106 @@ +import type { UmbDocumentCollectionFilterModel } from '../../types.js'; +import type { UmbDocumentTreeItemModel } from '../../../tree/types.js'; +import { css, html, nothing, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection'; +import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; + +@customElement('umb-document-grid-collection-view') +export class UmbDocumentGridCollectionViewElement extends UmbLitElement { + @state() + private _items: Array = []; + + @state() + private _selection: Array = []; + + @state() + private _loading = false; + + #collectionContext?: UmbDefaultCollectionContext; + + constructor() { + super(); + + this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => { + this.#collectionContext = instance; + this.observe( + this.#collectionContext.selection.selection, + (selection) => (this._selection = selection), + 'umbCollectionSelectionObserver', + ); + this.observe(this.#collectionContext.items, (items) => (this._items = items), 'umbCollectionItemsObserver'); + }); + } + + //TODO How should we handle url stuff? + private _handleOpenCard(id: string) { + //TODO this will not be needed when cards works as links with href + history.pushState(null, '', 'section/content/workspace/document/edit/' + id); + } + + #onSelect(item: UmbDocumentTreeItemModel) { + this.#collectionContext?.selection.select(item.unique ?? ''); + } + + #onDeselect(item: UmbDocumentTreeItemModel) { + this.#collectionContext?.selection.deselect(item.unique ?? ''); + } + + render() { + if (this._loading) nothing; + return html` +
+ ${repeat( + this._items, + (item) => item.unique, + (item) => this.#renderCard(item), + )} +
+ `; + } + + #renderCard(item: UmbDocumentTreeItemModel) { + return html` + 0} + ?selected=${this.#collectionContext?.selection.isSelected(item.unique ?? '')} + @open=${() => this._handleOpenCard(item.unique ?? '')} + @selected=${() => this.#onSelect(item)} + @deselected=${() => this.#onDeselect(item)}> + + + `; + } + + static styles = [ + UmbTextStyles, + css` + :host { + display: flex; + flex-direction: column; + } + + #document-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: var(--uui-size-space-4); + } + + uui-card-content-node { + width: 100%; + height: 180px; + } + `, + ]; +} + +export default UmbDocumentGridCollectionViewElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-document-grid-collection-view': UmbDocumentGridCollectionViewElement; + } +} From 2012715ef550e1e338de29b1fb4b917e094fb183 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 8 Feb 2024 15:15:20 +0000 Subject: [PATCH 3/4] Adds Document Collection View manifests --- .../documents/collection/manifests.ts | 3 +- .../documents/collection/views/index.ts | 1 + .../documents/collection/views/manifests.ts | 45 +++++++++++++++++++ 3 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/manifests.ts index 8442fa538b..7ac25c175a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/manifests.ts @@ -1,5 +1,5 @@ -import { UMB_DOCUMENT_COLLECTION_REPOSITORY_ALIAS } from './repository/index.js'; import { manifests as collectionRepositoryManifests } from './repository/manifests.js'; +import { manifests as collectionViewManifests } from './views/manifests.js'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const UMB_DOCUMENT_COLLECTION_ALIAS = 'Umb.Collection.Document'; @@ -17,4 +17,5 @@ const collectionManifest: ManifestTypes = { export const manifests = [ collectionManifest, ...collectionRepositoryManifests, + ...collectionViewManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/index.ts new file mode 100644 index 0000000000..87c7ba3b45 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/index.ts @@ -0,0 +1 @@ +export { UMB_DOCUMENT_GRID_COLLECTION_VIEW_ALIAS, UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS } from './manifests.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/manifests.ts new file mode 100644 index 0000000000..511c5984a8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/manifests.ts @@ -0,0 +1,45 @@ +import { UMB_COLLECTION_ALIAS_CONDITION } from '@umbraco-cms/backoffice/collection'; +import type { ManifestCollectionView } from '@umbraco-cms/backoffice/extension-registry'; + +export const UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS = 'Umb.CollectionView.Document.Table'; +export const UMB_DOCUMENT_GRID_COLLECTION_VIEW_ALIAS = 'Umb.CollectionView.Document.Grid'; + +const gridViewManifest: ManifestCollectionView = { + type: 'collectionView', + alias: UMB_DOCUMENT_GRID_COLLECTION_VIEW_ALIAS, + name: 'Document Grid Collection View', + element: () => import('./grid/document-grid-collection-view.element.js'), + weight: 200, + meta: { + label: 'Grid', + icon: 'icon-grid', + pathName: 'grid', + }, + conditions: [ + { + alias: UMB_COLLECTION_ALIAS_CONDITION, + match: 'Umb.Collection.Document', + }, + ], +}; + +const tableViewManifest: ManifestCollectionView = { + type: 'collectionView', + alias: UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS, + name: 'Document Table Collection View', + element: () => import('./table/document-table-collection-view.element.js'), + weight: 201, + meta: { + label: 'Table', + icon: 'icon-list', + pathName: 'table', + }, + conditions: [ + { + alias: UMB_COLLECTION_ALIAS_CONDITION, + match: 'Umb.Collection.Document', + }, + ], +}; + +export const manifests = [gridViewManifest, tableViewManifest]; From ff1e6c368d977548d21cfd971a48dbcd27a6e7b9 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 12 Feb 2024 10:37:27 +0000 Subject: [PATCH 4/4] Corrected namespace import for `UmbLitElement` --- .../views/grid/document-grid-collection-view.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts index 8189c2ab6a..d4579cd483 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts @@ -1,7 +1,7 @@ import type { UmbDocumentCollectionFilterModel } from '../../types.js'; import type { UmbDocumentTreeItemModel } from '../../../tree/types.js'; import { css, html, nothing, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection'; import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';