UIREQ-1140 - Add Sorting to 'Copies' and 'Printed' columns in Requests table

CHANGELOG.md

@@ -17,6 +17,7 @@
 * Add missing sub-permissions to fetch "pick-slips" and "search-slips" records in "Requests: View, edit, cancel" permission. Refs UIREQ-1137.
 * Optimize performance of the "print-events-entry" API to reduce slowness during the initial call. Refs UIREQ-1130.
 * Revert Custom "Print Status" filter code implementation. Refs UIREQ-1146.
+* Sorting 'Printed' and '# Copies' columns in the Request App. Refs UIREQ-1140.
 
 ## [9.1.2] (https://github.com/folio-org/ui-requests/tree/v9.1.2) (2024-09-13)
 [Full Changelog](https://github.com/folio-org/ui-requests/compare/v9.1.1...v9.1.2)

src/constants.js

@@ -170,7 +170,7 @@ export const requestableItemStatuses = [
 ];
 
 export const PRINT_DETAILS_COLUMNS = {
-  COPIES: 'printDetails.count',
+  COPIES: 'printDetails.printCount',
   PRINTED: 'printDetails.lastPrintedDetails',
 };
 

src/routes/RequestsRoute.js

@@ -100,6 +100,7 @@ import {
   getFormattedYears,
   getStatusQuery,
   getFullNameForCsvRecords,
+  processQuerySortString,
 } from './utils';
 import SinglePrintButtonForPickSlip from '../components/SinglePrintButtonForPickSlip';
 
@@ -127,8 +128,8 @@ export const extractPickSlipRequestIds = (pickSlipsData) => {
 
 export const getLastPrintedDetails = (printDetails, intl) => {
   const fullName = getFullName(printDetails?.lastPrintRequester);
-  const formattedDate = intl.formatDate(printDetails?.lastPrintedDate);
-  const formattedTime = intl.formatTime(printDetails?.lastPrintedDate);
+  const formattedDate = intl.formatDate(printDetails?.printEventDate);
+  const formattedTime = intl.formatTime(printDetails?.printEventDate);
   const localizedDateTime = `${formattedDate}${formattedTime ? ', ' : ''}${formattedTime}`;
 
   return fullName + ' ' + localizedDateTime;
@@ -269,7 +270,7 @@ export const getListFormatter = (
   'year': rq => getFormattedYears(rq.instance?.publication, DEFAULT_DISPLAYED_YEARS_AMOUNT),
   'callNumber': rq => effectiveCallNumber(rq.item),
   'servicePoint': rq => get(rq, 'pickupServicePoint.name', DEFAULT_FORMATTER_VALUE),
-  'copies': rq => get(rq, PRINT_DETAILS_COLUMNS.COPIES, DEFAULT_FORMATTER_VALUE),
+  'copies': rq => get(rq, 'printDetails.printCount', DEFAULT_FORMATTER_VALUE),
   'printed': rq => (rq.printDetails ? getLastPrintedDetails(rq.printDetails, intl) : DEFAULT_FORMATTER_VALUE),
 });
 
@@ -333,6 +334,8 @@ class RequestsRoute extends React.Component {
               'requestDate': 'requestDate',
               'position': 'position/number',
               'proxy': 'proxy',
+              'copies': 'printDetails.printCount/number',
+              'printed': 'printDetails.printEventDate',
             },
             RequestsFiltersConfig,
             2, // do not fetch unless we have a query or a filter
@@ -683,7 +686,7 @@ class RequestsRoute extends React.Component {
     const { id: currentServicePointId } = this.getCurrentServicePointInfo();
     const prevStateServicePointId = get(prevProps.resources.currentServicePoint, 'id');
     const { configs: prevConfigs } = prevProps.resources;
-    const { configs } = this.props.resources;
+    const { configs, query } = this.props.resources;
     const instanceId = parse(this.props.location?.search)?.instanceId;
 
     if (prevExpired.length > 0 && expired.length === 0) {
@@ -728,6 +731,13 @@ class RequestsRoute extends React.Component {
     if (isViewPrintDetailsEnabled !== prevState.isViewPrintDetailsEnabled && !isViewPrintDetailsEnabled) {
       this.columnHeadersMap = getFilteredColumnHeadersMap(this.columnHeadersMap);
     }
+
+    if (!isViewPrintDetailsEnabled && (query.sort?.includes('printed') || query.sort?.includes('copies'))) {
+      // Remove 'copies' and 'printed' from query sorting when the user disables
+      // 'Enable view print details (Pick slips)' in settings and returns to the Requests App.
+      const sort = processQuerySortString(query.sort);
+      this.props.mutator.query.update({ sort });
+    }
   }
 
   toggleAllRows = () => {
@@ -887,7 +897,7 @@ class RequestsRoute extends React.Component {
       }
       if (record.printDetails) {
         const fullName = getFullNameForCsvRecords(record.printDetails.lastPrintRequester);
-        const lastPrintedDate = record.printDetails.lastPrintedDate || '';
+        const lastPrintedDate = record.printDetails.printEventDate || '';
         const date = lastPrintedDate ? `, ${lastPrintedDate}` : '';
 
         record.printDetails.lastPrintedDetails = `${fullName}${date}`;
@@ -1640,7 +1650,7 @@ class RequestsRoute extends React.Component {
               resultIsSelected={this.resultIsSelected}
               onFilterChange={this.handleFilterChange}
               sortableColumns={['requestDate', 'title', 'year', 'itemBarcode', 'callNumber', 'type', 'requestStatus',
-                'position', 'servicePoint', 'requester', 'requesterBarcode', 'proxy']}
+                'position', 'servicePoint', 'requester', 'requesterBarcode', 'proxy', 'copies', 'printed']}
               pageAmount={100}
               pagingType={MCLPagingTypes.PREV_NEXT}
             />

src/routes/RequestsRoute.test.js

@@ -232,8 +232,8 @@ const mockedRequest = {
   id: 'requestId',
 };
 const printDetailsMockData = {
-  count: 11,
-  lastPrintedDate: '2024-08-03T13:33:31.868Z',
+  printCount: 11,
+  printEventDate: '2024-08-03T13:33:31.868Z',
   lastPrintRequester: { firstName: 'firstName', middleName: 'middleName', lastName: 'lastName' },
 };
 
@@ -501,6 +501,7 @@ describe('RequestsRoute', () => {
       },
       query: {
         filters: 'filter1.value1,filter1.value2,filter2.value3',
+        sort: 'printed, requestDate',
         instanceId: 'instanceId',
         query: 'testQueryTerm',
       },
@@ -1301,16 +1302,16 @@ describe('RequestsRoute', () => {
 
     describe('when formatting copies column', () => {
       it('should return copies for copies column', () => {
-        expect(listFormatter.copies(requestWithData)).toBe(requestWithData.printDetails.count);
+        expect(listFormatter.copies(requestWithData)).toBe(requestWithData.printDetails.printCount);
       });
     });
 
     describe('when formatting printed column', () => {
       it('should return last printed details for printed column', () => {
         getFullName.mockReturnValueOnce('lastName, firstName middleName');
 
-        const expectedFormattedDate = intl.formatDate(requestWithData.printDetails.lastPrintedDate);
-        const expectedFormattedTime = intl.formatTime(requestWithData.printDetails.lastPrintedDate);
+        const expectedFormattedDate = intl.formatDate(requestWithData.printDetails.printEventDate);
+        const expectedFormattedTime = intl.formatTime(requestWithData.printDetails.printEventDate);
         const expectedOutput =
         `lastName, firstName middleName ${expectedFormattedDate}${expectedFormattedTime ? ', ' : ''}${expectedFormattedTime}`;
 
@@ -1362,8 +1363,8 @@ describe('RequestsRoute', () => {
 
     it('should return the formatted full name and date/time correctly', () => {
       const printedDetails = getLastPrintedDetails(lastPrintDetails, intl);
-      const expectedFormattedDate = intl.formatDate(lastPrintDetails.lastPrintedDate);
-      const expectedFormattedTime = intl.formatTime(lastPrintDetails.lastPrintedDate);
+      const expectedFormattedDate = intl.formatDate(lastPrintDetails.printEventDate);
+      const expectedFormattedTime = intl.formatTime(lastPrintDetails.printEventDate);
       const expectedOutput =
         `lastName, firstName middleName ${expectedFormattedDate}${expectedFormattedTime ? ', ' : ''}${expectedFormattedTime}`;
 

src/routes/utils.js

@@ -41,3 +41,10 @@ export const getFullNameForCsvRecords = (record) => {
   const { firstName = '', middleName = '', lastName = '' } = record;
   return [firstName, middleName, lastName].filter(Boolean).join(' ');
 };
+
+export const processQuerySortString = (str) => {
+  const removeSubstrings = ['printed', 'copies', '-copies', '-printed'];
+  const remainingParts = str.split(',').filter(part => !removeSubstrings.includes(part));
+
+  return remainingParts.join(',') || '';
+};

src/routes/utils.test.js

@@ -9,6 +9,7 @@ import {
   isReorderableRequest,
   getStatusQuery,
   getFullNameForCsvRecords,
+  processQuerySortString,
 } from './utils';
 
 describe('utils', () => {
@@ -185,4 +186,30 @@ describe('utils', () => {
       expect(getFullNameForCsvRecords(record)).toBe('');
     });
   });
+
+  describe('processQuerySortString', () => {
+    it('should return the same string if no removable substrings are present', () => {
+      const input = 'title,requestDate';
+      const expectedOutput = 'title,requestDate';
+      expect(processQuerySortString(input)).toBe(expectedOutput);
+    });
+
+    it('should remove removable substrings and return non-removable substrings', () => {
+      const input = 'title,printed';
+      const expectedOutput = 'title';
+      expect(processQuerySortString(input)).toBe(expectedOutput);
+    });
+
+    it('should return an empty string when the input is empty', () => {
+      const input = '';
+      const expectedOutput = '';
+      expect(processQuerySortString(input)).toBe(expectedOutput);
+    });
+
+    it('should return an empty string when only removable substrings are present', () => {
+      const input = 'printed,copies';
+      const expectedOutput = '';
+      expect(processQuerySortString(input)).toBe(expectedOutput);
+    });
+  });
 });

translations/ui-requests/en.json

@@ -199,7 +199,7 @@
   "pickupServicePoint.name": "Pickup service point",
   "requester.patronGroup.group": "Requester patron group",
   "tags.tagList": "Tags",
-  "printDetails.count": "# Copies",
+  "printDetails.printCount": "# Copies",
   "printDetails.lastPrintedDetails": "Printed",
 
   "notes.staffNotes": "Staff notes",