From 9e7ac440c05604f14148abe2cff3093e7df2ced1 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 22 Feb 2024 16:05:44 +0000
Subject: [PATCH] Document Collection Views: Added `sortOrder` support

---
 .../document-grid-collection-view.element.ts  | 22 ++++++++++++++-----
 .../documents/collection/views/index.ts       |  4 +++-
 .../document-table-collection-view.element.ts | 17 ++++++++++++--
 3 files changed, 35 insertions(+), 8 deletions(-)

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 b4bd4e4d44..d53b20bb48 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
@@ -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>
 		`;
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
index cfb5b835ad..cd713ce848 100644
--- 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
@@ -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':
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 64048fe5f0..70a08a5ae7 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
@@ -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),
 					};
 				}) ?? [];