[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
CenterForOpenScience · Oct 9, 2024 · 3259cfd · 3259cfd
1 parent 8596ddc
commit 3259cfd
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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