From 3259cfd4977ed11e0a21527eddaa195698d20285 Mon Sep 17 00:00:00 2001
From: futa-ikeda <51409893+futa-ikeda@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:01:46 -0400
Subject: [PATCH] [ENG-6184] Allow sorting for project list (#2348)

-   Ticket: [ENG-6184]
-   Feature flag: n/a

## Purpose
- Allow sorting for project table

## Summary of Changes
- Add new optional `sortKey` to project column object
  - Show sort arrow if the sortKey is present on the column
- Styling updates
- Add pagination links to object list
---
 .../-components/object-list/component.ts      | 31 +++++++++----
 .../-components/object-list/styles.scss       | 26 +++++++++--
 .../-components/object-list/template.hbs      | 43 ++++++++++++++++---
 .../dashboard/projects/controller.ts          |  6 ++-
 .../addon/components/sort-arrow/component.ts  |  2 +-
 translations/en-us.yml                        |  3 ++
 6 files changed, 91 insertions(+), 20 deletions(-)

diff --git a/app/institutions/dashboard/-components/object-list/component.ts b/app/institutions/dashboard/-components/object-list/component.ts
index 62c45fedfd..c5183e0dfb 100644
--- a/app/institutions/dashboard/-components/object-list/component.ts
+++ b/app/institutions/dashboard/-components/object-list/component.ts
@@ -6,20 +6,21 @@ import InstitutionModel from 'ember-osf-web/models/institution';
 import SearchResultModel from 'ember-osf-web/models/search-result';
 import { Filter } from 'osf-components/components/search-page/component';
 
-interface ValueColumn {
+interface Column {
     name: string;
+    sortKey?: string;
+}
+interface ValueColumn extends Column {
     getValue(searchResult: SearchResultModel): string;
 }
 
-interface LinkColumn {
-    name: string;
+interface LinkColumn extends Column {
     getHref(searchResult: SearchResultModel): string;
     getLinkText(searchResult: SearchResultModel): string;
     type: 'link';
 }
 
-interface ComponentColumn {
-    name: string;
+interface ComponentColumn extends Column {
     type: 'doi' | 'contributors';
 }
 
@@ -34,14 +35,14 @@ interface InstitutionalObjectListArgs {
 
 export default class InstitutionalObjectList extends Component<InstitutionalObjectListArgs> {
     @tracked activeFilters: Filter[] = [];
-    @tracked page = ''; // TODO: ENG-6184 Implement pagination
-    @tracked sort = '-relevance'; // TODO: ENG-6184 Implement sorting
+    @tracked page = '';
+    @tracked sort = '-dateModified';
 
     get queryOptions() {
         const options = {
             ... this.args.defaultQueryOptions,
             'page[cursor]': this.page,
-            'page[size]': 10, // TODO: ENG-6184 Implement pagination
+            'page[size]': 10,
             sort: this.sort,
 
         };
@@ -62,4 +63,18 @@ export default class InstitutionalObjectList extends Component<InstitutionalObje
             this.activeFilters.pushObject(property);
         }
     }
+
+    @action
+    updateSortKey(newSortKey: string) {
+        if (this.sort === newSortKey) {
+            this.sort = '-' + newSortKey;
+        } else {
+            this.sort = newSortKey;
+        }
+    }
+
+    @action
+    updatePage(newPage: string) {
+        this.page = newPage;
+    }
 }
diff --git a/app/institutions/dashboard/-components/object-list/styles.scss b/app/institutions/dashboard/-components/object-list/styles.scss
index 6fb9e25a16..ab3f00c80c 100644
--- a/app/institutions/dashboard/-components/object-list/styles.scss
+++ b/app/institutions/dashboard/-components/object-list/styles.scss
@@ -29,15 +29,23 @@
 .object-table {
     border-collapse: collapse;
     
-    th,
-    td {
+    th {
         padding: 10px 15px;
+
+        span {
+            display: flex;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+    }
+
+    td {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
-    }
+        padding: 10px 15px;
 
-    td {
         border: 1px solid $color-border-gray;
     }
 }
@@ -47,6 +55,16 @@
     color: $color-text-white;
 }
 
+.bottom-bar-wrapper {
+    display: flex;
+    justify-content: end;
+    margin: 1rem 0;
+
+    button {
+        margin-left: 0.5rem;
+    }
+}
+
 .right-wrapper {
     min-width: 300px;
     padding: 0.5rem;
diff --git a/app/institutions/dashboard/-components/object-list/template.hbs b/app/institutions/dashboard/-components/object-list/template.hbs
index b364e80f20..bd9ebc3cf8 100644
--- a/app/institutions/dashboard/-components/object-list/template.hbs
+++ b/app/institutions/dashboard/-components/object-list/template.hbs
@@ -26,11 +26,27 @@ as |list|>
                     <table data-test-object-list-table local-class='object-table'>
                         <thead local-class='object-table-head'>
                             <tr>
-                                {{#each @columns as |column|}}
-                                    <th local-class='object-table-header'>
-                                        {{column.name}}
-                                    </th>
-                                {{/each}}
+                                {{#let (component 'sort-arrow'
+                                    sort=this.sort
+                                    ) as |SortArrow|
+                                }}
+                                    {{#each @columns as |column|}}
+                                        <th
+                                            title={{column.name}}
+                                            local-class='object-table-header'
+                                        >
+                                            <span>
+                                                {{column.name}}
+                                                {{#if column.sortKey}}
+                                                    <SortArrow
+                                                        @sortBy={{column.sortKey}}
+                                                        @sortAction={{queue (fn this.updateSortKey column.sortKey) (perform list.searchObjectsTask)}}
+                                                    />
+                                                {{/if}}
+                                            </span>
+                                        </th>
+                                    {{/each}}
+                                {{/let}}
                             </tr>
                         </thead>
 
@@ -65,6 +81,23 @@ as |list|>
                         </tbody>
                     </table>
                 </div>
+                <div local-class='bottom-bar-wrapper'>
+                    {{#if list.showFirstPageOption}}
+                        <Button {{on 'click' (queue (fn this.updatePage list.firtPageCursor) (perform list.searchObjectsTask))}}>
+                            {{t 'institutions.dashboard.object-list.first'}}
+                        </Button>
+                    {{/if}}
+                    {{#if list.hasPrevPage}}
+                        <Button {{on 'click' (queue (fn this.updatePage list.prevPageCursor) (perform list.searchObjectsTask))}}>
+                            {{t 'institutions.dashboard.object-list.prev'}}
+                        </Button>
+                    {{/if}}
+                    {{#if list.hasNextPage}}
+                        <Button {{on 'click' (queue (fn this.updatePage list.nextPageCursor) (perform list.searchObjectsTask))}}>
+                            {{t 'institutions.dashboard.object-list.next'}}
+                        </Button>
+                    {{/if}}
+                </div>
             {{/if}}
         </wrapper.main>
         {{#if list.relatedProperties}}
diff --git a/app/institutions/dashboard/projects/controller.ts b/app/institutions/dashboard/projects/controller.ts
index fcb90c7c15..0d62d299fe 100644
--- a/app/institutions/dashboard/projects/controller.ts
+++ b/app/institutions/dashboard/projects/controller.ts
@@ -25,11 +25,13 @@ export default class InstitutionDashboardProjects extends Controller {
         },
         { // Date created
             name: this.intl.t('institutions.dashboard.object-list.table-headers.created_date'),
-            getValue : searchResult => searchResult.getResourceMetadataField('dateCreated'),
+            getValue: searchResult => searchResult.getResourceMetadataField('dateCreated'),
+            sortKey: 'dateCreated',
         },
         { // Date modified
             name: this.intl.t('institutions.dashboard.object-list.table-headers.modified_date'),
-            getValue : searchResult => searchResult.getResourceMetadataField('dateModified'),
+            getValue: searchResult => searchResult.getResourceMetadataField('dateModified'),
+            sortKey: 'dateModified',
         },
         { // DOI
             name: this.intl.t('institutions.dashboard.object-list.table-headers.doi'),
diff --git a/lib/osf-components/addon/components/sort-arrow/component.ts b/lib/osf-components/addon/components/sort-arrow/component.ts
index 0c8a55b0d2..08d1ca2b2a 100644
--- a/lib/osf-components/addon/components/sort-arrow/component.ts
+++ b/lib/osf-components/addon/components/sort-arrow/component.ts
@@ -14,7 +14,7 @@ export default class SortArrow extends Component<SortArrowArgs> {
     }
 
     get isCurrentDescending() {
-        return this.args.sort === `-${this.sortBy}`;
+        return this.args.sort === `-${this.args.sortBy}`;
     }
 
     get isSelected() {
diff --git a/translations/en-us.yml b/translations/en-us.yml
index abe3b2e2b0..4d7150670f 100644
--- a/translations/en-us.yml
+++ b/translations/en-us.yml
@@ -845,6 +845,9 @@ institutions:
             filter-button-label: 'Filter'
             filter-heading: 'Filter by:'
             total-objects: 'total {objectType}'
+            first: First
+            prev: Prev
+            next: Next
             table-headers:
                 title: Title
                 link: Link