Merge pull request #52 from valadas/sort-items

Implemented sorting
valadas · Mar 1, 2022 · b1c68d7 · b1c68d7
2 parents f0c7e2e + f91467f
commit b1c68d7
Show file tree

Hide file tree

Showing 13 changed files with 195 additions and 18 deletions.
diff --git a/DNN Platform/Modules/ResourceManager/App_LocalResources/ResourceManager.resx b/DNN Platform/Modules/ResourceManager/App_LocalResources/ResourceManager.resx
@@ -318,4 +318,22 @@
   <data name="NewLocation.Text" xml:space="preserve">
     <value>New Location</value>
   </data>
+  <data name="SortField_ItemName.Text" xml:space="preserve">
+    <value>Name</value>
+  </data>
+  <data name="SortField_LastModifiedOnDate.Text" xml:space="preserve">
+    <value>Last Modified</value>
+  </data>
+  <data name="SortField_Size.Text" xml:space="preserve">
+    <value>Size</value>
+  </data>
+  <data name="SortField_ParentFolder.Text" xml:space="preserve">
+    <value>Parent Folder</value>
+  </data>
+  <data name="SortField_CreatedOnDate.Text" xml:space="preserve">
+    <value>Date Created</value>
+  </data>
+  <data name="Sort.Text" xml:space="preserve">
+    <value>Sort</value>
+  </data>
 </root>
diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components.d.ts b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components.d.ts
@@ -14,6 +14,9 @@ export namespace Components {
     interface DnnRmActionsBar {
     }
     interface DnnRmFilesPane {
+        /**
+          * Defines how much more pixels to load under the fold.
+         */
         "preloadOffset": number;
     }
     interface DnnRmFolderList {
@@ -131,6 +134,9 @@ declare namespace LocalJSX {
     interface DnnRmActionsBar {
     }
     interface DnnRmFilesPane {
+        /**
+          * Defines how much more pixels to load under the fold.
+         */
         "preloadOffset"?: number;
     }
     interface DnnRmFolderList {

diff --git a/...eManager/ResourceManager.Web/src/components/dnn-resource-manager/dnn-resource-manager.tsx b/...eManager/ResourceManager.Web/src/components/dnn-resource-manager/dnn-resource-manager.tsx
@@ -1,6 +1,7 @@
 import { Component, Host, h, State, Watch, Prop } from '@stencil/core';
 import state from "../../store/store";
 import { LocalizationClient } from "../../services/LocalizationClient";
+import { sortField } from '../../enums/SortField';
 
 const localStorageSplitWidthKey = "dnn-resource-manager-last-folders-width";
 @Component({
@@ -30,9 +31,19 @@ export class DnnResourceManager {
   }
 
   componentWillLoad() {
-    this.localizationClient.getResources()
-    .then(resources => state.localization = resources)
-    .catch(error => console.error(error));
+    return new Promise<void>((resolve, reject) => {
+      this.localizationClient.getResources()
+      .then(resources =>
+      {
+        state.localization = resources;
+        state.sortField = sortField.itemName; 
+        resolve();
+      })
+      .catch(error => {
+        console.error(error);
+        reject();
+      });
+    })
   }
 
   private splitView: HTMLDnnVerticalSplitviewElement;

diff --git a/...urceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.scss b/...urceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.scss
@@ -12,12 +12,46 @@ button{
   border:0;
   padding:0;
   margin:0;
+  cursor: pointer;
   svg{
     fill: var(--dnn-color-primary);
   }
 }
 .right-controls{
+  display: flex;
   margin: 0 1em;
+  gap: 1em;
+  .sort{
+    position: relative;
+    dnn-collapsible{
+      position: absolute;
+      top: 100%;
+      right: 0;
+      background-color: white;;
+      &[expanded]{
+        border: 1px solid lightgray;
+        box-shadow: 2px 2px 4px -2px;
+      }
+      .dropdown{
+        display: flex;
+        flex-direction: column;
+        background-color: white;;
+        button{
+          background-color:transparent;
+          border: none;
+          padding: 0.5em 1em;
+          margin: 0;
+          border-bottom: 1px solid lightgray;
+          white-space: nowrap;
+          svg{
+            height: 1em;
+            width: 1em;
+            margin-right: 0.5em;
+          }
+        }
+      }
+    }
+  }
 }
 dnn-vertical-overflow-menu{
   flex-grow: 1;

diff --git a/...ourceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.tsx b/...ourceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.tsx
@@ -1,12 +1,15 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, Host, h, State } from '@stencil/core';
 import state from '../../store/store';
+import { sortField, SortFieldInfo } from "../../enums/SortField";
 
 @Component({
   tag: 'dnn-rm-actions-bar',
   styleUrl: 'dnn-rm-actions-bar.scss',
   shadow: true,
 })
 export class DnnRmActionsBar {
+
+  @State() sortDropdownExpanded: boolean = false;
 
   private changeLayout(): void {
     if (state.layout == "card"){
@@ -17,6 +20,31 @@ export class DnnRmActionsBar {
     state.layout = "card";
   }
 
+  private renderSortButton(sortOption: SortFieldInfo){
+    return(
+      <button
+        onClick={() =>
+        {
+            state.sortField = sortOption;
+            state.currentItems = {...state.currentItems, items: []};
+            this.sortDropdownExpanded = !this.sortDropdownExpanded;
+        }}
+      >
+        {this.renderRadioButton(state.sortField == sortOption)}
+        <span>{sortOption.localizedName}</span>
+      </button>
+    );
+  }
+
+  private renderRadioButton(checked = false){
+    if (checked){
+      return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
+    }
+    else{
+      return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
+    }
+  }
+
   render() {
     return (
       <Host>
@@ -39,6 +67,23 @@ export class DnnRmActionsBar {
           </button>
         </dnn-vertical-overflow-menu>
         <div class="right-controls">
+          <div class="sort">
+            <button
+              onClick={() => this.sortDropdownExpanded = !this.sortDropdownExpanded}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/></svg>
+              <span>{state.localization.Sort}</span>
+              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>
+            </button>
+            <dnn-collapsible expanded={this.sortDropdownExpanded}>
+              <div class="dropdown">
+                {this.renderSortButton(sortField.itemName)}
+                {this.renderSortButton(sortField.createdOnDate)}
+                {this.renderSortButton(sortField.lastModifiedOnDate)}
+                {this.renderSortButton(sortField.size)}
+              </div>
+            </dnn-collapsible>
+          </div>
           <button
             onClick={() => this.changeLayout()}
           >

diff --git a/...esourceManager/ResourceManager.Web/src/components/dnn-rm-files-pane/dnn-rm-files-pane.tsx b/...esourceManager/ResourceManager.Web/src/components/dnn-rm-files-pane/dnn-rm-files-pane.tsx
@@ -1,15 +1,17 @@
 import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';
 import state from '../../store/store';
 import { ItemsClient } from "../../services/ItemsClient";
+import { Debounce } from '@dnncommunity/dnn-elements';
 @Component({
   tag: 'dnn-rm-files-pane',
   styleUrl: 'dnn-rm-files-pane.scss',
   shadow: true,
 })
 export class DnnRmFilesPane {
 
-  @Prop() preloadOffset: number = 1000;
-
+  /** Defines how much more pixels to load under the fold. */
+  @Prop() preloadOffset: number = 5000;
+
   @Element() el: HTMLDnnRmFilesPaneElement;
 
   private readonly itemsClient: ItemsClient;
@@ -47,6 +49,7 @@ export class DnnRmFilesPane {
     }
   }
 
+  @Debounce(50)
   loadMore() {
     if (state.currentItems.items.length >= state.currentItems.totalCount){
       return;
@@ -56,7 +59,9 @@ export class DnnRmFilesPane {
       this.itemsClient.search(
         state.currentItems.folder.folderId,
         state.itemsSearchTerm,
-        state.lastSearchRequestedPage + 1)
+        state.lastSearchRequestedPage + 1,
+        state.pageSize,
+        state.sortField)
       .then(data => {
         state.lastSearchRequestedPage += 1;
         state.currentItems = {
@@ -69,11 +74,14 @@ export class DnnRmFilesPane {
     else{
       this.itemsClient.getFolderContent(
         state.currentItems.folder.folderId,
-        state.currentItems.items.length)
+        state.currentItems.items.length,
+        state.pageSize,
+        state.sortField)
       .then(data => state.currentItems = {
         ...state.currentItems,
         items: [...state.currentItems.items, ...data.items],
-      });
+      })
+      .catch(() => {}); // On purpose, we want to ignore aborted requests.
     }
   }
 

diff --git a/...er/ResourceManager.Web/src/components/dnn-rm-folder-list-item/dnn-rm-folder-list-item.tsx b/...er/ResourceManager.Web/src/components/dnn-rm-folder-list-item/dnn-rm-folder-list-item.tsx
@@ -60,7 +60,11 @@ export class DnnRmFolderListItem {
   };
 
   private handleFolderClicked(): void {
-    this.itemsClient.getFolderContent(Number.parseInt(this.folder.data.key))
+    this.itemsClient.getFolderContent(
+      Number.parseInt(this.folder.data.key),
+      0,
+      state.pageSize,
+      state.sortField)
     .then(data => state.currentItems = data)
     .catch(error => console.error(error));
   }

diff --git a/...ourceManager/ResourceManager.Web/src/components/dnn-rm-folder-list/dnn-rm-folder-list.tsx b/...ourceManager/ResourceManager.Web/src/components/dnn-rm-folder-list/dnn-rm-folder-list.tsx
@@ -26,7 +26,11 @@ export class DnnRmFolderList {
     .then(data =>
     {
       state.rootFolders = data;
-      this.itemsClient.getFolderContent(Number.parseInt(data.Tree.children[0].data.key))
+      this.itemsClient.getFolderContent(
+        Number.parseInt(data.Tree.children[0].data.key),
+        0,
+        state.pageSize,
+        state.sortField)
       .then(data => state.currentItems = data)
       .catch(error => console.error(error));
     })

diff --git a/...ules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-top-bar/dnn-rm-top-bar.tsx b/...ules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-top-bar/dnn-rm-top-bar.tsx
@@ -17,7 +17,11 @@ export class DnnRmTopBar {
   private handleSearchChanged(e: CustomEvent<any>): void {
     if (e.detail != ""){
       state.itemsSearchTerm = e.detail;
-      this.itemsClient.search(state.currentItems.folder.folderId, e.detail, 0)
+      this.itemsClient.search(
+        state.currentItems.folder.folderId, e.detail,
+        0,
+        state.pageSize,
+        state.sortField)
       .then(data =>{
         state.currentItems = {
           ...state.currentItems,
@@ -30,7 +34,11 @@ export class DnnRmTopBar {
     }
     else
     {
-      this.itemsClient.getFolderContent(state.currentItems.folder.folderId, 0)
+      this.itemsClient.getFolderContent(
+        state.currentItems.folder.folderId,
+        0,
+        state.pageSize,
+        state.sortField)
       .then(data => {
         state.lastSearchRequestedPage = 1;
         state.itemsSearchTerm = undefined;

diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/enums/SortField.ts b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/enums/SortField.ts
@@ -0,0 +1,30 @@
+import state from "../store/store"
+export class SortField{
+    readonly itemName: SortFieldInfo;
+    readonly lastModifiedOnDate: SortFieldInfo;
+    readonly size: SortFieldInfo;
+    readonly parentFolder: SortFieldInfo;
+    readonly createdOnDate: SortFieldInfo;
+
+    constructor(){
+        this.itemName = new SortFieldInfo("ItemName");
+        this.lastModifiedOnDate = new SortFieldInfo("LastModifiedOnDate");
+        this.size = new SortFieldInfo("Size");
+        this.parentFolder = new SortFieldInfo("ParentFolder");
+        this.createdOnDate = new SortFieldInfo("CreatedOnDate");
+    }
+}
+
+export class SortFieldInfo{
+    readonly sortKey: string;
+
+    get localizedName(){
+        return state.localization[`SortField_${this.sortKey}`];
+    }
+
+    constructor(sortKey: string){
+        this.sortKey = sortKey;
+    }
+}
+
+export const sortField = new SortField();
diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/services/ItemsClient.ts b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/services/ItemsClient.ts
@@ -1,4 +1,5 @@
 import { DnnServicesFramework } from "@dnncommunity/dnn-elements";
+import { SortFieldInfo } from "../enums/SortField";
 
 export class ItemsClient{
     private sf: DnnServicesFramework;
@@ -26,10 +27,10 @@ export class ItemsClient{
         folderId: number,
         startIndex = 0,
         numItems = 20,
-        sorting: "ItemName" | "LastModifiedOnDate" | "Size" | "ParentFolder" | "CreatedOnDate" = "ItemName",
+        sorting: SortFieldInfo = new SortFieldInfo("ItemName"),
         groupId = -1){
         return new Promise<GetFolderContentResponse>((resolve, reject) => {
-            const url = `${this.requestUrl}GetFolderContent?folderId=${folderId}&startIndex=${startIndex}&numItems=${numItems}&sorting=${sorting}`;
+            const url = `${this.requestUrl}GetFolderContent?folderId=${folderId}&startIndex=${startIndex}&numItems=${numItems}&sorting=${sorting.sortKey}`;
             const headers = this.sf.getModuleHeaders();
             headers.append("groupId", groupId.toString());
             this.abortController?.abort();
@@ -73,12 +74,12 @@ export class ItemsClient{
         search: string,
         pageIndex: number,
         pageSize = 20,
-        sorting: "ItemName" | "LastModifiedOnDate" | "Size" | "ParentFolder" | "CreatedOnDate" = "ItemName",
+        sorting: SortFieldInfo = new SortFieldInfo("ItemName"),
         culture = "",
         groupId = -1)
     {
         return new Promise<SearchResponse>((resolve, reject) => {
-            const url = `${this.requestUrl}Search?folderId=${folderId}&search=${search}&pageIndex=${pageIndex}&pageSize=${pageSize}&sorting=${sorting}&culture=${culture}`;
+            const url = `${this.requestUrl}Search?folderId=${folderId}&search=${search}&pageIndex=${pageIndex}&pageSize=${pageSize}&sorting=${sorting.sortKey}&culture=${culture}`;
             const headers = this.sf.getModuleHeaders();
             headers.append("groupId", groupId.toString());
             this.abortController?.abort();

diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/services/LocalizationClient.ts b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/services/LocalizationClient.ts
@@ -111,4 +111,10 @@ export interface LocalizedStrings {
     RemoveFolderTypeDialogHeader: String;
     MoveItem: String;
     NewLocation: String;
+    SortField_ItemName: String;
+    SortField_LastModifiedOnDate: String;
+    SortField_Size: String;
+    SortField_ParentFolder: String;
+    SortField_CreatedOnDate: String;
+    Sort: String;
   };
diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/store/store.ts b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/store/store.ts
@@ -1,4 +1,5 @@
 import { createStore } from "@stencil/store";
+import { SortFieldInfo } from "../enums/SortField";
 import { GetFoldersResponse } from "../services/InternalServicesClient";
 import { GetFolderContentResponse } from "../services/ItemsClient";
 import { LocalizedStrings } from "../services/LocalizationClient";
@@ -12,10 +13,11 @@ const { state } = createStore<{
     itemsSearchTerm?: string;
     pageSize: number;
     lastSearchRequestedPage: number;
+    sortField?: SortFieldInfo;
 }>({
     moduleId: -1,
     layout: "list",
-    pageSize: 20,
+    pageSize: 50,
     lastSearchRequestedPage: 1,
 });