Allow sort of children by name and create date (#17904)

* Added create date to document and media children endpoints.

* Sort by name or create date for documents and media.

* Fix build issues.

* Only render column headers for sorting if all pages of children are loaded.

* Add indicator and debounce sorting by column headers.

Author: AndyButland

src/Umbraco.Cms.Api.Management/Controllers/Document/Tree/DocumentTreeControllerBase.cs

@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using Umbraco.Cms.Api.Management.Controllers.Tree;
 using Umbraco.Cms.Api.Management.Factories;
@@ -54,6 +54,7 @@ protected override DocumentTreeItemResponseModel MapTreeItemViewModel(Guid? pare
             responseModel.IsProtected = _publicAccessService.IsProtected(entity.Path);
             responseModel.IsTrashed = entity.Trashed;
             responseModel.Id = entity.Key;
+            responseModel.CreateDate = entity.CreateDate;
 
             responseModel.Variants = _documentPresentationFactory.CreateVariantsItemResponseModels(documentEntitySlim);
             responseModel.DocumentType = _documentPresentationFactory.CreateDocumentTypeReferenceResponseModel(documentEntitySlim);

src/Umbraco.Cms.Api.Management/Controllers/Media/Tree/MediaTreeControllerBase.cs

@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using Umbraco.Cms.Api.Management.Controllers.Tree;
 using Umbraco.Cms.Api.Management.Factories;
@@ -50,6 +50,7 @@ protected override MediaTreeItemResponseModel MapTreeItemViewModel(Guid? parentK
         {
             responseModel.IsTrashed = entity.Trashed;
             responseModel.Id = entity.Key;
+            responseModel.CreateDate = entity.CreateDate;
 
             responseModel.Variants = _mediaPresentationFactory.CreateVariantsItemResponseModels(mediaEntitySlim);
             responseModel.MediaType = _mediaPresentationFactory.CreateMediaTypeReferenceResponseModel(mediaEntitySlim);

src/Umbraco.Cms.Api.Management/Controllers/RecycleBin/RecycleBinControllerBase.cs

@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 using Umbraco.Cms.Api.Common.ViewModels.Pagination;
 using Umbraco.Cms.Api.Management.Controllers.Content;
@@ -54,6 +54,7 @@ protected virtual TItem MapRecycleBinViewModel(Guid? parentKey, IEntitySlim enti
         var viewModel = new TItem
         {
             Id = entity.Key,
+            CreateDate = entity.CreateDate,
             HasChildren = entity.HasChildren,
             Parent = parentKey.HasValue
                 ? new ItemReferenceByIdResponseModel

src/Umbraco.Cms.Api.Management/OpenApi.json

@@ -36901,6 +36901,7 @@
       },
       "DocumentRecycleBinItemResponseModel": {
         "required": [
+          "createDate",
           "documentType",
           "hasChildren",
           "id",
@@ -36912,6 +36913,10 @@
             "type": "string",
             "format": "uuid"
           },
+          "createDate": {
+            "type": "string",
+            "format": "date-time"
+          },
           "hasChildren": {
             "type": "boolean"
           },
@@ -37040,6 +37045,7 @@
       },
       "DocumentTreeItemResponseModel": {
         "required": [
+          "createDate",
           "documentType",
           "hasChildren",
           "id",
@@ -37071,6 +37077,10 @@
             "type": "string",
             "format": "uuid"
           },
+          "createDate": {
+            "type": "string",
+            "format": "date-time"
+          },
           "isProtected": {
             "type": "boolean"
           },
@@ -39014,6 +39024,7 @@
       },
       "MediaRecycleBinItemResponseModel": {
         "required": [
+          "createDate",
           "hasChildren",
           "id",
           "mediaType",
@@ -39025,6 +39036,10 @@
             "type": "string",
             "format": "uuid"
           },
+          "createDate": {
+            "type": "string",
+            "format": "date-time"
+          },
           "hasChildren": {
             "type": "boolean"
           },
@@ -39141,6 +39156,7 @@
       },
       "MediaTreeItemResponseModel": {
         "required": [
+          "createDate",
           "hasChildren",
           "id",
           "isTrashed",
@@ -39171,6 +39187,10 @@
             "type": "string",
             "format": "uuid"
           },
+          "createDate": {
+            "type": "string",
+            "format": "date-time"
+          },
           "mediaType": {
             "oneOf": [
               {

src/Umbraco.Cms.Api.Management/ViewModels/RecycleBin/RecycleBinItemResponseModelBase.cs

@@ -1,4 +1,4 @@
-using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations;
 using Umbraco.Cms.Api.Management.ViewModels.Item;
 
 namespace Umbraco.Cms.Api.Management.ViewModels.RecycleBin;
@@ -8,6 +8,8 @@ public abstract class RecycleBinItemResponseModelBase
     [Required]
     public Guid Id { get; set; }
 
+    public DateTimeOffset CreateDate { get; set; }
+
     [Required]
     public bool HasChildren { get; set; }
 

src/Umbraco.Cms.Api.Management/ViewModels/Tree/ContentTreeItemResponseModel.cs

@@ -1,4 +1,4 @@
-namespace Umbraco.Cms.Api.Management.ViewModels.Tree;
+namespace Umbraco.Cms.Api.Management.ViewModels.Tree;
 
 public abstract class ContentTreeItemResponseModel : EntityTreeItemResponseModel
 {
@@ -7,4 +7,6 @@ public abstract class ContentTreeItemResponseModel : EntityTreeItemResponseModel
     public bool IsTrashed { get; set; }
 
     public Guid Id { get; set; }
+
+    public DateTimeOffset CreateDate { get; set; }
 }

src/Umbraco.Web.UI.Client/src/external/backend-api/src/types.gen.ts

@@ -673,6 +673,7 @@ export type DocumentPermissionPresentationModel = {
 
 export type DocumentRecycleBinItemResponseModel = {
     id: string;
+    createDate: string;
     hasChildren: boolean;
     parent?: ((ItemReferenceByIdResponseModel) | null);
     documentType: (DocumentTypeReferenceResponseModel);
@@ -702,6 +703,7 @@ export type DocumentTreeItemResponseModel = {
     noAccess: boolean;
     isTrashed: boolean;
     id: string;
+    createDate: string;
     isProtected: boolean;
     documentType: (DocumentTypeReferenceResponseModel);
     variants: Array<(DocumentVariantItemResponseModel)>;
@@ -1196,6 +1198,7 @@ export type MediaItemResponseModel = {
 
 export type MediaRecycleBinItemResponseModel = {
     id: string;
+    createDate: string;
     hasChildren: boolean;
     parent?: ((ItemReferenceByIdResponseModel) | null);
     mediaType: (MediaTypeReferenceResponseModel);
@@ -1223,6 +1226,7 @@ export type MediaTreeItemResponseModel = {
     noAccess: boolean;
     isTrashed: boolean;
     id: string;
+    createDate: string;
     mediaType: (MediaTypeReferenceResponseModel);
     variants: Array<(VariantItemResponseModel)>;
 };

src/Umbraco.Web.UI.Client/src/mocks/data/document-blueprint/document-blueprint.data.ts

@@ -14,6 +14,7 @@ export const data: Array<UmbMockDocumentBlueprintModel> = [
 		],
 		template: null,
 		id: 'the-simplest-document-id',
+		createDate: '2023-02-06T15:32:05.350038',
 		parent: null,
 		documentType: {
 			id: 'the-simplest-document-type-id',

src/Umbraco.Web.UI.Client/src/mocks/data/document-blueprint/document-blueprint.db.ts

@@ -45,6 +45,7 @@ const treeItemMapper = (model: UmbMockDocumentBlueprintModel): Omit<DocumentTree
 		noAccess: model.noAccess,
 		parent: model.parent,
 		variants: model.variants,
+		createDate: model.createDate,
 	};
 };
 
@@ -62,6 +63,7 @@ const createMockDocumentBlueprintMapper = (request: CreateDocumentRequestModel):
 		},
 		hasChildren: false,
 		id: request.id ? request.id : UmbId.new(),
+		createDate: now,
 		isProtected: false,
 		isTrashed: false,
 		noAccess: false,

src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts

@@ -17,6 +17,7 @@ export const data: Array<UmbMockDocumentModel> = [
 		],
 		template: null,
 		id: 'the-simplest-document-id',
+		createDate: '2023-02-06T15:32:05.350038',
 		parent: null,
 		documentType: {
 			id: 'the-simplest-document-type-id',
@@ -56,6 +57,7 @@ export const data: Array<UmbMockDocumentModel> = [
 		],
 		template: null,
 		id: 'all-property-editors-document-id',
+		createDate: '2023-02-06T15:32:05.350038',
 		parent: null,
 		documentType: {
 			id: 'all-property-editors-document-type-id',
@@ -601,6 +603,7 @@ export const data: Array<UmbMockDocumentModel> = [
 		],
 		template: null,
 		id: 'c05da24d-7740-447b-9cdc-bd8ce2172e38',
+		createDate: '2023-02-06T15:32:05.350038',
 		parent: null,
 		documentType: {
 			id: '29643452-cff9-47f2-98cd-7de4b6807681',
@@ -734,6 +737,7 @@ export const data: Array<UmbMockDocumentModel> = [
 		urls: [],
 		template: null,
 		id: 'fd56a0b5-01a0-4da2-b428-52773bfa9cc4',
+		createDate: '2023-02-06T15:32:05.350038',
 		parent: null,
 		documentType: {
 			id: '29643452-cff9-47f2-98cd-7de4b6807681',
@@ -822,6 +826,7 @@ export const data: Array<UmbMockDocumentModel> = [
 		],
 		template: null,
 		id: 'simple-document-id',
+		createDate: '2023-02-06T15:32:05.350038',
 		parent: null,
 		documentType: {
 			id: 'simple-document-type-id',
@@ -869,6 +874,7 @@ export const data: Array<UmbMockDocumentModel> = [
 		],
 		template: null,
 		id: 'all-rtes-id',
+		createDate: '2023-02-06T15:32:05.350038',
 		parent: null,
 		documentType: {
 			id: 'all-rtes-document-type-id',
@@ -938,6 +944,7 @@ export const data: Array<UmbMockDocumentModel> = [
 		],
 		template: null,
 		id: 'block-editors-document-id',
+		createDate: '2023-02-06T15:32:05.350038',
 		parent: null,
 		documentType: {
 			id: 'block-editors-document-type-id',