Document Collection Views: Added sortOrder support

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

@@ -18,6 +18,9 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
 	@state()
 	private _selection: Array<string | null> = [];
 
+	@state()
+	private _skip: number = 0;
+
 	@state()
 	private _userDefinedProperties?: Array<UmbCollectionColumnConfiguration>;
 
@@ -50,6 +53,14 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
 			(selection) => (this._selection = selection),
 			'umbCollectionSelectionObserver',
 		);
+
+		this.observe(
+			this.#collectionContext.pagination.skip,
+			(skip) => {
+				this._skip = skip;
+			},
+			'umbCollectionSkipObserver',
+		);
 	}
 
 	// TODO: How should we handle url stuff? [?]
@@ -84,13 +95,14 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
 				${repeat(
 					this._items,
 					(item) => item.unique,
-					(item) => this.#renderCard(item),
+					(item, index) => this.#renderCard(index, item),
 				)}
 			</div>
 		`;
 	}
 
-	#renderCard(item: UmbDocumentCollectionItemModel) {
+	#renderCard(index: number, item: UmbDocumentCollectionItemModel) {
+		const sortOrder = this._skip + index;
 		return html`
 			<uui-card-content-node
 				.name=${item.name ?? 'Unnamed Document'}
@@ -101,7 +113,7 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
 				@selected=${() => this.#onSelect(item)}
 				@deselected=${() => this.#onDeselect(item)}>
 				<uui-icon slot="icon" name=${item.icon}></uui-icon>
-				${this.#renderState(item)} ${this.#renderProperties(item)}
+				${this.#renderState(item)} ${this.#renderProperties(sortOrder, item)}
 			</uui-card-content-node>
 		`;
 	}
@@ -132,14 +144,14 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
 		}
 	}
 
-	#renderProperties(item: UmbDocumentCollectionItemModel) {
+	#renderProperties(sortOrder: number, item: UmbDocumentCollectionItemModel) {
 		if (!this._userDefinedProperties) return;
 		return html`
 			<ul>
 				${repeat(
 					this._userDefinedProperties,
 					(column) => column.alias,
-					(column) => html`<li><span>${column.header}:</span> ${getPropertyValueByAlias(item, column.alias)}</li>`,
+					(column) => html`<li><span>${column.header}:</span> ${getPropertyValueByAlias(sortOrder, item, column.alias)}</li>`,
 				)}
 			</ul>
 		`;

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/index.ts

@@ -2,7 +2,7 @@ import type { UmbDocumentCollectionItemModel } from '../types.js';
 
 export { UMB_DOCUMENT_GRID_COLLECTION_VIEW_ALIAS, UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS } from './manifests.js';
 
-export function getPropertyValueByAlias(item: UmbDocumentCollectionItemModel, alias: string) {
+export function getPropertyValueByAlias(sortOrder: number, item: UmbDocumentCollectionItemModel, alias: string) {
 	switch (alias) {
 		case 'createDate':
 			return item.createDate.toLocaleString();
@@ -14,6 +14,8 @@ export function getPropertyValueByAlias(item: UmbDocumentCollectionItemModel, al
 			return item.creator;
 		case 'published':
 			return item.state !== 'Draft' ? 'True' : 'False';
+		case 'sortOrder':
+			return sortOrder;
 		case 'updateDate':
 			return item.updateDate.toLocaleString();
 		case 'updater':

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

@@ -59,6 +59,9 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
 	@state()
 	private _selection: Array<string> = [];
 
+	@state()
+	private _skip: number = 0;
+
 	#collectionContext?: UmbDefaultCollectionContext<UmbDocumentCollectionItemModel, UmbDocumentCollectionFilterModel>;
 
 	constructor() {
@@ -97,6 +100,14 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
 			},
 			'umbCollectionSelectionObserver',
 		);
+
+		this.observe(
+			this.#collectionContext.pagination.skip,
+			(skip) => {
+				this._skip = skip;
+			},
+			'umbCollectionSkipObserver',
+		);
 	}
 
 	#createTableHeadings() {
@@ -115,14 +126,16 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
 	}
 
 	#createTableItems(items: Array<UmbDocumentCollectionItemModel>) {
-		this._tableItems = items.map((item) => {
+		this._tableItems = items.map((item, rowIndex) => {
 			if (!item.unique) throw new Error('Item id is missing.');
 
+			const sortOrder = this._skip + rowIndex;
+
 			const data =
 				this._tableColumns?.map((column) => {
 					return {
 						columnAlias: column.alias,
-						value: column.elementName ? item : getPropertyValueByAlias(item, column.alias),
+						value: column.elementName ? item : getPropertyValueByAlias(sortOrder, item, column.alias),
 					};
 				}) ?? [];