Implemented more list-view columns

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-items-listview/dnn-rm-items-listview.scss

@@ -1,18 +1,34 @@
 :host {
   display: block;
+  margin-right: 1em;
 }
 
 table{
+  width: 100%;
+  border-collapse: collapse;
   thead{
     font-weight: bold;
+    tr{
+      border-bottom: 2px solid lightgray;
+    }
   }
   tbody{
-    td{
-      &:first-child{
-        img{
-          height: 2.5em;
-          display: block;
-          margin: 0 auto;
+    tr{
+      border-bottom: 1px solid lightgray;
+      td{
+        &:first-child{
+          img{
+            height: 2.5em;
+            display: block;
+            margin: 0 auto;
+          }
+        }
+        .date{
+          display: flex;
+          flex-direction: column;
+        }
+        &.size{
+          text-align: right;
         }
       }
     }

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-items-listview/dnn-rm-items-listview.tsx

@@ -8,6 +8,30 @@ import state from "../../store/store";
 })
 export class DnnRmItemsListview {
 
+  private getLocalDateString(dateString: string) {
+    const date = new Date(dateString);
+    return <div class="date">
+      <span>{date.toLocaleDateString()}</span>
+      <span>{date.toLocaleTimeString()}</span>
+    </div>
+  }
+
+  private getFileSize(fileSize: number) {
+    if (fileSize == undefined || fileSize == undefined){
+      return "";
+    }
+
+    if (fileSize < 1024){
+      return fileSize.toString() + " B";
+    }
+
+    if (fileSize < 1048576 ){
+      return Math.round(fileSize / 1024).toString() + " KB";
+    }
+
+    return Math.round(fileSize / 3221225472).toString() + " MB";
+  }
+
   render() {
     return (
       <Host>
@@ -17,20 +41,25 @@ export class DnnRmItemsListview {
               <tr>
                 <td></td>
                 <td>{state.localization?.Name}</td>
+                <td>{state.localization?.Created}</td>
+                <td>{state.localization?.LastModified}</td>
+                <td>{state.localization?.Size}</td>
               </tr>
             </thead>
             <tbody>
               {state.currentItems.items?.map(item =>
                 <tr>
                   <td><img src={item.iconUrl} /></td>
                   <td>{item.itemName}</td>
-                </tr>  
+                  <td>{this.getLocalDateString(item.createdOn)}</td>
+                  <td>{this.getLocalDateString(item.modifiedOn)}</td>
+                  <td class="size">{this.getFileSize(item.fileSize)}</td>
+                </tr>
               )}
             </tbody>
           </table>
         }
       </Host>
     );
   }
-
 }

DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/services/ItemsClient.ts

@@ -98,4 +98,10 @@ export interface Item{
     thumbnailAvailable?: boolean | undefined;
     /** The relative url to the item thumbnail. */
     thumbnailUrl?: string;
+    /** And ISO 8601 string representing the created date of the item. */
+    createdOn: string;
+    /** And ISO 8601 string representing the last modified date of the item. */
+    modifiedOn: string;
+    /** The size of the file (only available for file Items) */
+    fileSize?: number,
 }

DNN Platform/Modules/ResourceManager/Services/ItemsController.cs

@@ -560,7 +560,9 @@ private object GetItemViewModel(object item)
                     isFolder = true,
                     itemId = folder.FolderID,
                     itemName = folder.FolderName,
-                    iconUrl = GetFolderIconUrl(this.PortalSettings.PortalId, folder.FolderMappingID),
+                    iconUrl = GetFolderIconUrl(this.PortalSettings.PortalId, folder.FolderMappingID),
+                    createdOn = folder.CreatedOnDate,
+                    modifiedOn = folder.LastModifiedOnDate,
                 };
             }
 
@@ -574,7 +576,10 @@ private object GetItemViewModel(object item)
                 path = FileManager.Instance.GetUrl(file),
                 iconUrl = GetFileIconUrl(file.Extension),
                 thumbnailAvailable = thumbnailsManager.ThumbnailAvailable(file.FileName),
-                thumbnailUrl = thumbnailsManager.ThumbnailUrl(this.ActiveModule.ModuleID, file.FileId, 110, 110),
+                thumbnailUrl = thumbnailsManager.ThumbnailUrl(this.ActiveModule.ModuleID, file.FileId, 110, 110),
+                createdOn = file.CreatedOnDate,
+                modifiedOn = file.LastModifiedOnDate,
+                fileSize = file.Size,
             };
         }