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/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..d4579cd483 --- /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/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'; + +@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; + } +} 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]; 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? */