Merge pull request #76 from kwahn20/sort-cms-docs

CMS Sorting: Add in ability to sort CMS list pages

Author: ricocynthia

projects/lib/src/admin/components/page-list/page-list.component.html

@@ -1,13 +1,9 @@
 <!-- LIST VIEW -->
 <div *ngIf="!selected" class="main-content">
   <div class="d-flex align-items-center justify-content-start p-3">
-    <div class="flex-grow-0 flex-shrink-1 pr-2">
-      <button
-        type="button"
-        (click)="selectPage()"
-        class="btn btn-outline-primary w-100"
-      >
-        New Page
+    <div class="d-flex flex-wrap align-items-center justify-content-between my-3">
+      <button type="button" (click)="selectPage()" class="btn btn-outline-primary">
+          New Page
       </button>
     </div>
     <!-- TODO: enable search/filter once it works better -->
@@ -40,12 +36,58 @@
     <table class="table table-hover page-list-table">
       <thead>
         <tr>
-          <th>Title</th>
-          <th>Created By</th>
-          <th>Date Created</th>
-          <th>Last Updated</th>
+            <th (click)="changeSortStrategy('Title')">Title
+              <fa-layers class="fa-fw">
+                <fa-icon
+                  [icon]="faSortUp"
+                  [ngClass]="{ inactive: sortBy != '!Title' }" 
+                ></fa-icon>
+                <fa-icon
+                  [icon]="faSortDown"
+                  [ngClass]="{ inactive: sortBy != 'Title' }" 
+                ></fa-icon>
+              </fa-layers>
+            </th>
+            <th (click)="changeSortStrategy('Author')">Created By
+              <fa-layers class="fa-fw">
+                <fa-icon
+                  [icon]="faSortUp"
+                  [ngClass]="{ inactive: sortBy != '!Author' }" 
+                ></fa-icon>
+                <fa-icon
+                  [icon]="faSortDown"
+                  [ngClass]="{ inactive: sortBy != 'Author' }" 
+                ></fa-icon>
+              </fa-layers>
+            </th>
+            <th (click)="changeSortStrategy('DateCreated')">Date Created
+              <fa-layers class="fa-fw">
+                <fa-icon
+                  [icon]="faSortUp" 
+                  [ngClass]="{ inactive: sortBy != 'DateCreated' }" 
+                ></fa-icon>
+                <fa-icon
+                  [icon]="faSortDown"
+                  [ngClass]="{ inactive: sortBy != '!DateCreated' }" 
+
+                ></fa-icon>
+              </fa-layers>
+            </th>
+            <th (click)="changeSortStrategy('DateLastUpdated')">Last Updated
+              <fa-layers class="fa-fw">
+                <fa-icon
+                  [icon]="faSortUp" 
+                  [ngClass]="{ inactive: sortBy != 'DateLastUpdated' }" 
+                ></fa-icon>
+                <fa-icon
+                  [icon]="faSortDown"
+                  [ngClass]="{ inactive: sortBy != '!DateLastUpdated' }" 
+
+                ></fa-icon>
+              </fa-layers>
+            </th>
         </tr>
-      </thead>
+    </thead>
       <tbody>
         <tr *ngFor="let contentDoc of list" (click)="selectPage(contentDoc)">
           <td>

projects/lib/src/admin/components/page-list/page-list.component.scss

@@ -40,3 +40,7 @@
 .table-responsive>.table>tbody>tr:first-of-type>td {
   border-top: 0;
 }
+
+.inactive {
+  color: lighten($color: #000000, $amount: 65);
+}

projects/lib/src/admin/components/page-list/page-list.component.ts

@@ -14,7 +14,11 @@ import {
   ListArgs,
   Asset,
   AssetUpload,
-} from '@ordercloud/cms-sdk'
+} from '@ordercloud/cms-sdk';
+import {
+  faSortDown,
+  faSortUp,
+} from '@fortawesome/free-solid-svg-icons';
 import { NgxSpinnerService } from 'ngx-spinner';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/internal/operators';
@@ -56,6 +60,9 @@ export class PageListComponent implements OnInit, OnChanges {
   loading = true;
   list: JDocument[];
   selected?: JDocument;
+  sortBy: string;
+  faSortUp = faSortUp;
+  faSortDown = faSortDown;
 
   constructor(private spinner: NgxSpinnerService) { }
 
@@ -98,6 +105,20 @@ export class PageListComponent implements OnInit, OnChanges {
            changes[propertyName].previousValue !== changes[propertyName].currentValue;
   }
 
+  changeSortStrategy(sortBy: string): JDocument[] {
+    if (this.sortBy && this.sortBy === sortBy) {
+      sortBy = '!' + this.sortBy;
+    }
+    this.sortBy = sortBy;
+    const compareFn = (a: JDocument, b: JDocument): 1 | -1 => {
+      const sort = sortBy.includes('!')
+        ? a.Doc[sortBy.replace('!', '')] > b.Doc[sortBy.replace('!', '')]
+        : a.Doc[sortBy] < b.Doc[sortBy];
+      return sort ? 1 : -1;
+    };
+    return this.list.sort((a, b) => compareFn(a, b));
+  }
+
   listDocs(): Promise<void> {
     this.spinner.show();
     if (!this.resourceType || !this.resourceID) {
@@ -123,6 +144,7 @@ export class PageListComponent implements OnInit, OnChanges {
             ...PAGE_SCHEMA,
             ID: this.pageSchemaID
           } as any;
+          
           return ContentManagementClient.Schemas.Create(schema).then(() =>
             this.listDocs()
           );