yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/document-collection-ui' into feature/document-create-collection-action

Browse Source
This commit is contained in:
Jacob Overgaard
2024-02-12 13:33:24 +01:00
committed by GitHub
parent 42cec3e2dc 2a7f9e99e0
commit 4975da638f
5 changed files with 175 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/manifests.ts
View File

@@ -1,6 +1,7 @@
import { UMB_DOCUMENT_COLLECTION_REPOSITORY_ALIAS } from './repository/index.js';
import { manifests as collectionActionManifests } from './action/manifests.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';
@@ -19,4 +20,5 @@ export const manifests = [
collectionManifest,
...collectionActionManifests,
...collectionRepositoryManifests,
...collectionViewManifests,
];

106
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts Normal file
View File

@@ -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<UmbDocumentTreeItemModel> = [];
@state()
private _selection: Array<string | null> = [];
@state()
private _loading = false;
#collectionContext?: UmbDefaultCollectionContext<UmbDocumentTreeItemModel, UmbDocumentCollectionFilterModel>;
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`
<div id="document-grid">
${repeat(
this._items,
(item) => item.unique,
(item) => this.#renderCard(item),
)}
</div>
`;
}
#renderCard(item: UmbDocumentTreeItemModel) {
return html`
<uui-card-content-node
.name=${item.name ?? 'Unnamed Document'}
selectable
?select-only=${this._selection.length > 0}
?selected=${this.#collectionContext?.selection.isSelected(item.unique ?? '')}
@open=${() => this._handleOpenCard(item.unique ?? '')}
@selected=${() => this.#onSelect(item)}
@deselected=${() => this.#onDeselect(item)}>
<uui-icon slot="icon" name=${item.documentType.icon}></uui-icon>
</uui-card-content-node>
`;
}
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;
}
}

1
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/index.ts Normal file
View File

@@ -0,0 +1 @@
export { UMB_DOCUMENT_GRID_COLLECTION_VIEW_ALIAS, UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS } from './manifests.js';

45
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/manifests.ts Normal file
View File

@@ -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];

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

@@ -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<string | null> = [];
private _collectionContext?: UmbDefaultCollectionContext<UmbDocumentTreeItemModel, any>;
private _collectionContext?: UmbDefaultCollectionContext<UmbDocumentTreeItemModel, UmbDocumentCollectionFilterModel>;
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? */