diff --git a/src/components/PatronRequests/PatronRequests.js b/src/components/PatronRequests/PatronRequests.js
index dbd4fe15..5135e384 100644
--- a/src/components/PatronRequests/PatronRequests.js
+++ b/src/components/PatronRequests/PatronRequests.js
@@ -18,7 +18,8 @@ import {
PaneMenu,
} from '@folio/stripes/components';
import { AppIcon, IfPermission, useOkapiKy } from '@folio/stripes/core';
-import { SearchAndSortQuery, PersistedPaneset } from '@folio/stripes/smart-components';
+import { SearchAndSortQuery, PersistedPaneset, ColumnManager } from '@folio/stripes/smart-components';
+import { MenuSection } from '@folio/stripes/components';
import { useIntlCallout } from '@projectreshare/stripes-reshare';
import AppNameContext from '../../AppNameContext';
import Filters from './Filters';
@@ -27,12 +28,6 @@ import Search from './Search';
const appDetails = {
request: {
title: 'Requests',
- visibleColumns: [
- 'flags', 'hrid',
- 'dateCreated', 'lastUpdated', 'selectedItemBarcode', 'patronIdentifier', 'state', 'serviceType',
- 'supplyingInstitutionSymbol', 'pickupLocation',
- 'title',
- ],
extraFilter: 'r.true',
intlId: 'supplier',
institutionFilterId: 'supplier',
@@ -41,12 +36,6 @@ const appDetails = {
},
supply: {
title: 'Supply',
- visibleColumns: [
- 'flags', 'hrid',
- 'dateCreated', 'lastUpdated', 'state', 'serviceType',
- 'requestingInstitutionSymbol', 'selectedItemBarcode', 'pickLocation',
- 'pickShelvingLocation', 'title'
- ],
extraFilter: 'r.false',
intlId: 'requester',
institutionFilterId: 'requester',
@@ -55,6 +44,10 @@ const appDetails = {
},
};
+const SUPPLY_VISIBLE_COLUMNS_STORAGE_KEY = 'supply-visible-columns';
+const REQUEST_VISIBLE_COLUMNS_STORAGE_KEY = 'request-visible-columns';
+const NON_TOGGLEABLE_COLUMNS = ['flags'];
+
const PatronRequests = ({ requestsQuery, queryGetter, querySetter, filterOptions, searchParams, children }) => {
const appName = useContext(AppNameContext);
const sendCallout = useIntlCallout();
@@ -92,22 +85,47 @@ const PatronRequests = ({ requestsQuery, queryGetter, querySetter, filterOptions
});
};
- const getActionMenu = () => (
-
- {ariaLabel => (
-
- )}
-
+ const getActionMenu = renderColumnsMenu => () => (
+ <>
+
+ {ariaLabel => (
+
+ )}
+ } id="columns-menu-section">
+
+ {renderColumnsMenu}
+
);
- const { title, visibleColumns, createPerm } = appDetails[appName];
+ const getColumnMapping = () => {
+ return {
+ flags: '',
+ hrid: ,
+ isRequester: ,
+ dateCreated: ,
+ lastUpdated: ,
+ title: ,
+ patronIdentifier: ,
+ state: ,
+ serviceType: ,
+ requestingInstitutionSymbol: ,
+ supplyingInstitutionSymbol: ,
+ selectedItemBarcode: ,
+ pickLocation: ,
+ pickShelvingLocation: ,
+ pickupLocation: ,
+ };
+ }
+
+ const { title, createPerm } = appDetails[appName];
return (
{requestsQuery.isSuccess ?
- }
- defaultWidth="fill"
- lastMenu={(
-
- {(appName === 'request') &&
-
-
-
- }
-
- )}
- noOverflow
- padContent={false}
- paneSub={requestsQuery?.isSuccess ?
- : ''}
- paneTitle={title}
- >
- ,
- isRequester: ,
- dateCreated: ,
- lastUpdated: ,
- title: ,
- patronIdentifier: ,
- state: ,
- serviceType: ,
- requestingInstitutionSymbol: ,
- supplyingInstitutionSymbol: ,
- selectedItemBarcode: ,
- pickLocation: ,
- pickShelvingLocation: ,
- pickupLocation: ,
- }}
- columnWidths={{
- flags: '48px',
- id: { max: 115 },
- dateCreated: '96px',
- state: { min: 84 },
- serviceType: { max: 80 },
- selectedItemBarcode: '130px',
- }}
- contentData={requests}
- formatter={{
- flags: a => {
- const needsAttention = a?.state?.needsAttention;
- if (a?.unreadMessageCount > 0) {
- if (needsAttention) {
- return (
-
- {`${a.unreadMessageCount}!`}
-
- );
- }
- return {a.unreadMessageCount};
- } else if (needsAttention) return !;
- return '';
- },
- isRequester: a => (a.isRequester === true ? '✓' : a.isRequester === false ? '✗' : ''),
- dateCreated: a => (new Date(a.dateCreated).toLocaleDateString() === new Date().toLocaleDateString()
- ?
- : ),
- lastUpdated: a => (new Date(a.lastUpdated).toLocaleDateString() === new Date().toLocaleDateString()
- ?
- : ),
- patronIdentifier: a => {
- const { patronGivenName, patronSurname } = a;
- if (patronGivenName && patronSurname) return `${patronSurname}, ${patronGivenName}`;
- if (patronSurname) return patronSurname;
- if (patronGivenName) return patronGivenName;
- return a.patronIdentifier;
- },
- state: a => ,
- serviceType: a => a.serviceType && a.serviceType.value,
- supplyingInstitutionSymbol: a => (a?.resolvedSupplier?.owner?.symbolSummary ?? '').replace(/,.*/, ''),
- pickLocation: a => a.pickLocation && a.pickLocation.name,
- pickShelvingLocation: a => a.pickShelvingLocation && a.pickShelvingLocation.name,
- selectedItemBarcode: a => (a.volumes?.length <= 1 ? (a.volumes[0]?.itemId || a.selectedItemBarcode) : )
- }}
- hasMargin
- isEmptyMessage={
- <>
-
- {location?.search?.includes('filter') &&
-
-
-
- }
-
- }
- key={requestsQuery?.dataUpdatedAt}
- loading={requestsQuery?.isFetching}
- onHeaderClick={onSort}
- onNeedMoreData={fetchMore}
- onRowClick={(_e, rowData) => history.push(`${match.url}/view/${rowData.id}${location.search}`)}
- sortOrder={sortOrder.replace(/^-/, '').replace(/,.*/, '')}
- sortDirection={sortOrder.startsWith('-') ? 'descending' : 'ascending'}
- totalCount={totalCount}
- virtualize
- visibleColumns={visibleColumns}
- />
-
+
+ {({ renderColumnsMenu, visibleColumns }) => (
+ }
+ defaultWidth="fill"
+ lastMenu={(
+
+ {(appName === 'request') &&
+
+
+
+ }
+
+ )}
+ noOverflow
+ padContent={false}
+ paneSub={requestsQuery?.isSuccess ?
+ : ''}
+ paneTitle={title}
+ >
+ {
+ const needsAttention = a?.state?.needsAttention;
+ if (a?.unreadMessageCount > 0) {
+ if (needsAttention) {
+ return (
+
+ {`${a.unreadMessageCount}!`}
+
+ );
+ }
+ return {a.unreadMessageCount};
+ } else if (needsAttention) return !;
+ return '';
+ },
+ isRequester: a => (a.isRequester === true ? '✓' : a.isRequester === false ? '✗' : ''),
+ dateCreated: a => (new Date(a.dateCreated).toLocaleDateString() === new Date().toLocaleDateString()
+ ?
+ : ),
+ lastUpdated: a => (new Date(a.lastUpdated).toLocaleDateString() === new Date().toLocaleDateString()
+ ?
+ : ),
+ patronIdentifier: a => {
+ const { patronGivenName, patronSurname } = a;
+ if (patronGivenName && patronSurname) return `${patronSurname}, ${patronGivenName}`;
+ if (patronSurname) return patronSurname;
+ if (patronGivenName) return patronGivenName;
+ return a.patronIdentifier;
+ },
+ state: a => ,
+ serviceType: a => a.serviceType && a.serviceType.value,
+ supplyingInstitutionSymbol: a => (a?.resolvedSupplier?.owner?.symbolSummary ?? '').replace(/,.*/, ''),
+ pickLocation: a => a.pickLocation && a.pickLocation.name,
+ pickShelvingLocation: a => a.pickShelvingLocation && a.pickShelvingLocation.name,
+ selectedItemBarcode: a => (a.volumes?.length <= 1 ? (a.volumes[0]?.itemId || a.selectedItemBarcode) : )
+ }}
+ hasMargin
+ isEmptyMessage={
+ <>
+
+ {location?.search?.includes('filter') &&
+
+
+
+ }
+
+ }
+ key={requestsQuery?.dataUpdatedAt}
+ loading={requestsQuery?.isFetching}
+ onHeaderClick={onSort}
+ onNeedMoreData={fetchMore}
+ onRowClick={(_e, rowData) => history.push(`${match.url}/view/${rowData.id}${location.search}`)}
+ sortOrder={sortOrder.replace(/^-/, '').replace(/,.*/, '')}
+ sortDirection={sortOrder.startsWith('-') ? 'descending' : 'ascending'}
+ totalCount={totalCount}
+ virtualize
+ visibleColumns={visibleColumns}
+ />
+
+ )}
+
:
}
{children}