Update default sort order for ItemTable

[campb303]

The current default sort method for ItemTable is unclear. We should set a sane default based on user's workflow. Some proposed defaults include:

• Queue (asc) => Number(asc)
• Last Updated (asc) => Queue (asc) => Number(asc)

More feedback is needed.

[wrigh393]

The default sort order of the ItemTable seems to be set by this function:

export function defaultOrderByFn(arr, funcs, dirs) {
  return [...arr].sort((rowA, rowB) => {
    for (let i = 0; i < funcs.length; i += 1) {
      const sortFn = funcs[i]
      const desc = dirs[i] === false || dirs[i] === 'desc'
      const sortInt = sortFn(rowA, rowB)
      if (sortInt !== 0) {
        return desc ? -sortInt : sortInt
      }
    }
    return dirs[0] ? rowA.index - rowB.index : rowB.index - rowA.index
  })
}

The orderByFn should allow us to set the way that the ItemTable is sorted by default.

[wrigh393]

The initial sort by state can be set in the useTable options using the initialState.sortBy prop. In the initialState.sortBy prop you can choose the column that you want to be used and set the order it's sorted by ascending or descending. For example this code could be used to sort the ItemTable using the Item Number and in ascending order:

  initialState: {
                sortBy: [{ id: 'number', desc: false },]
  }

The only problem that this presents is that because the Item Numbers are being sorted that style is being applied to the sorting icons by default.

Current default sort icon style:

Default sort icon style with initialState.sortBy being set:

[wrigh393]

After receiving some feedback from other ECN staff, we were given the suggestion to keep the default sort order the same as it is in the current webqueue. According to @harley the default sort order is to sort by Item Number regardless of queues selected. It was also suggested that we also sort by last updated as well.

These default sorting preferences should be implemented with the same logic as before. the other thing that needs to be addressed is how the sort icons are styled. The columns that we set the default sort order on have the active sort styles. These should have the inactive sort styles until the user sorts themselves.

[wrigh393]

After further inspection of the react-table docs for the useSortBy hook we found that when using the initialState.sortBy prop if the desc key is not set to true the table will be sorted in the ascending direction. By removing the desc key that was set to false the styling that is applied when a user sort is not set by default. This is because we use the desc key to determine the styling of the sorting icons.

Default sorting without styling applied to sorting icons:

[campb303]

Let's set the default sort order to be:

1. Last Updated (most recent first)
2. Queue (alphabetically)
3. Number (ascending)

[campb303]

Need to make Last Edited and Date Received columned sort by ascending when the ascending arrow is clicked.

[wrigh393]

In order to get the Date Received and Last Updated cells to sort in the desired directions the sortInverted needed to be added to the column options for each in the ItemTable. This is because we are calculating the time using milliseconds thus newer times would have larger values than older ones.

Last Updated column with sortInverted prop set to true

{ 
Header: 'Last Updated', 
accessor: 'lastUpdated', 
sortInverted: true, 
Cell: ({ value }) => <RelativeTime value={value} /> 
},

Date Received column with sortInverted prop set to true

{ 
Header: 'Date Received', 
accessor: 'dateReceived', 
sortInverted: true, 
Cell: ({ value }) => <RelativeTime value={value} /> 
},