UIREQ-1001 add single print column initial commit

folio-org · Nov 28, 2023 · f144b53 · f144b53
1 parent 772039e
commit f144b53
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 29 deletions.
diff --git a/src/components/PrintButton/PrintButton.js b/src/components/PrintButton/PrintButton.js
@@ -23,26 +23,37 @@ class PrintButton extends React.Component {
     onBeforeGetContent: noop,
   };
 
+  eventObject = {};
+
   getContent = () => {
     return this.props.contentRef.current;
   };
 
+  handlePrintBeforeGetContent = () => {
+    this.eventObject.event.stopPropagation();
+    this.props.onBeforeGetContent();
+  }
+
   renderTriggerButton = () => {
     const fieldsToSkip = ['contentRef', 'onBeforePrint', 'onAfterPrint', 'onBeforeGetContent'];
     const props = omit(this.props, fieldsToSkip);
+    const handleClick = (e) => {
+      this.eventObject.event = e;
+    };
 
     return (
-      <Button {...props}>
-        {this.props.children}
-      </Button>
+      <div style={{ pointerEvents: this.props.disabled ? 'none' : 'auto' }}>
+        <Button {...props} onClick={handleClick} type="submit">
+          {this.props.children}
+        </Button>
+      </div>
     );
   };
 
   render() {
     const {
       onAfterPrint,
-      onBeforePrint,
-      onBeforeGetContent,
+      onBeforePrint
     } = this.props;
 
     return (
@@ -52,7 +63,7 @@ class PrintButton extends React.Component {
         trigger={this.renderTriggerButton}
         onAfterPrint={onAfterPrint}
         onBeforePrint={onBeforePrint}
-        onBeforeGetContent={onBeforeGetContent}
+        onBeforeGetContent={this.handlePrintBeforeGetContent}
       />
     );
   }

diff --git a/src/routes/RequestsRoute.js b/src/routes/RequestsRoute.js
@@ -69,6 +69,7 @@ import {
   getInstanceQueryString,
   isDuplicateMode,
   generateUserName,
+  getSelectedSlipData,
 } from '../utils';
 import packageInfo from '../../package';
 import {
@@ -180,27 +181,6 @@ export const urls = {
   },
 };
 
-export const getListFormatter = (getRowURL, setURL) => ({
-  'itemBarcode': rq => (rq.item ? rq.item.barcode : DEFAULT_FORMATTER_VALUE),
-  'position': rq => (rq.position || DEFAULT_FORMATTER_VALUE),
-  'proxy': rq => (rq.proxy ? getFullName(rq.proxy) : DEFAULT_FORMATTER_VALUE),
-  'requestDate': rq => (
-    <AppIcon size="small" app="requests">
-      <FormattedTime value={rq.requestDate} day="numeric" month="numeric" year="numeric" />
-    </AppIcon>
-  ),
-  'requester': rq => (rq.requester ? `${rq.requester.lastName}, ${rq.requester.firstName}` : DEFAULT_FORMATTER_VALUE),
-  'requesterBarcode': rq => (rq.requester ? rq.requester.barcode : DEFAULT_FORMATTER_VALUE),
-  'requestStatus': rq => (requestStatusesTranslations[rq.status]
-    ? <FormattedMessage id={requestStatusesTranslations[rq.status]} />
-    : <NoValue />),
-  'type': rq => <FormattedMessage id={requestTypesTranslations[rq.requestType]} />,
-  'title': rq => <TextLink to={getRowURL(rq.id)} onClick={() => setURL(rq.id)}>{(rq.instance ? rq.instance.title : DEFAULT_FORMATTER_VALUE)}</TextLink>,
-  'year': rq => getFormattedYears(rq.instance?.publication, DEFAULT_DISPLAYED_YEARS_AMOUNT),
-  'callNumber': rq => effectiveCallNumber(rq.item),
-  'servicePoint': rq => get(rq, 'pickupServicePoint.name', DEFAULT_FORMATTER_VALUE),
-});
-
 export const buildHoldRecords = (records) => {
   return records.map(record => {
     if (record.requester) {
@@ -577,6 +557,7 @@ class RequestsRoute extends React.Component {
       servicePoint: formatMessage({ id: 'ui-requests.requests.servicePoint' }),
       requester: formatMessage({ id: 'ui-requests.requests.requester' }),
       requesterBarcode: formatMessage({ id: 'ui-requests.requests.requesterBarcode' }),
+      singlePrint: formatMessage({ id: 'ui-requests.requests.singlePrint' }),
       proxy: formatMessage({ id: 'ui-requests.requests.proxy' }),
     };
 
@@ -755,6 +736,16 @@ class RequestsRoute extends React.Component {
     return { id, name };
   };
 
+  isPrintable = (requestId, pickSlips) => {
+    let matched;
+    if (pickSlips !== undefined) {
+      matched = pickSlips.filter((pickSlip) => {
+        return pickSlip.request.requestID === requestId;
+      })[0];
+    }
+    return matched != null;
+  };
+
   setCurrentServicePointId = () => {
     const {
       mutator,
@@ -1142,6 +1133,15 @@ class RequestsRoute extends React.Component {
     })
   );
 
+  printContentRefs = {};
+  getPrintContentRef = (rqId) => {
+    // create a ref if it doesn't exist for the given rqId
+    if (!this.printContentRefs[rqId]) {
+      this.printContentRefs[rqId] = React.createRef();
+    }
+    return this.printContentRefs[rqId];
+  };
+
   render() {
     const {
       resources,
@@ -1191,7 +1191,53 @@ class RequestsRoute extends React.Component {
     const searchSlipsPrintTemplate = this.getPrintTemplate(SLIPS_TYPE.SEARCH_SLIP_HOLD_REQUESTS);
     const pickSlipsData = convertToSlipData(pickSlips, intl, timezone, locale, SLIPS_TYPE.PICK_SLIP);
     const searchSlipsData = convertToSlipData(searchSlips, intl, timezone, locale, SLIPS_TYPE.SEARCH_SLIP_HOLD_REQUESTS);
-    const resultsFormatter = getListFormatter(this.getRowURL, this.setURL);
+    const resultsFormatter = (getRowURL, setURL, pickSlipsToCheck) => ({
+
+      'itemBarcode': rq => (rq.item ? rq.item.barcode : DEFAULT_FORMATTER_VALUE),
+      'position': rq => (rq.position || DEFAULT_FORMATTER_VALUE),
+      'proxy': rq => (rq.proxy ? getFullName(rq.proxy) : DEFAULT_FORMATTER_VALUE),
+      'requestDate': rq => (
+        <AppIcon size="small" app="requests">
+          <FormattedTime value={rq.requestDate} day="numeric" month="numeric" year="numeric" />
+        </AppIcon>
+      ),
+      'singlePrint': rq => (
+
+        <>
+          <PrintButton
+            id="singlePrintPickSlipsBtn"
+            disabled={!this.isPrintable(rq.id, pickSlipsToCheck)}
+            template={this.getPrintTemplate()}
+            contentRef={this.getPrintContentRef(rq.id)}
+            requestId={rq.id}
+            onBeforeGetContent={
+                  () => new Promise(resolve => {
+                    this.context.sendCallout({ message: <FormattedMessage id="ui-requests.printInProgress" /> });
+                    setTimeout(() => resolve(), 1000);
+                  })
+                }
+          >
+            <FormattedMessage id="ui-requests.requests.printButtonLabel" />
+
+            <PrintContent
+              ref={this.getPrintContentRef(rq.id)}
+              template={this.getPrintTemplate()}
+              dataSource={getSelectedSlipData(pickSlipsData, rq.id)}
+            />
+          </PrintButton>
+
+        </>),
+      'requester': rq => (rq.requester ? `${rq.requester.lastName}, ${rq.requester.firstName}` : DEFAULT_FORMATTER_VALUE),
+      'requesterBarcode': rq => (rq.requester ? rq.requester.barcode : DEFAULT_FORMATTER_VALUE),
+      'requestStatus': rq => (requestStatusesTranslations[rq.status]
+        ? <FormattedMessage id={requestStatusesTranslations[rq.status]} />
+        : <NoValue />),
+      'type': rq => <FormattedMessage id={requestTypesTranslations[rq.requestType]} />,
+      'title': rq => <TextLink to={getRowURL(rq.id)} onClick={() => setURL(rq.id)}>{(rq.instance ? rq.instance.title : DEFAULT_FORMATTER_VALUE)}</TextLink>,
+      'year': rq => getFormattedYears(rq.instance?.publication, DEFAULT_DISPLAYED_YEARS_AMOUNT),
+      'callNumber': rq => effectiveCallNumber(rq.item),
+      'servicePoint': rq => get(rq, 'pickupServicePoint.name', DEFAULT_FORMATTER_VALUE),
+    });
 
     const actionMenu = ({ onToggle, renderColumnsMenu }) => (
       <>
@@ -1343,7 +1389,7 @@ class RequestsRoute extends React.Component {
               }}
               columnMapping={this.columnLabels}
               resultsRowClickHandlers={false}
-              resultsFormatter={resultsFormatter}
+              resultsFormatter={resultsFormatter(this.getRowURL, this.setURL, pickSlips)}
               resultRowFormatter={DefaultMCLRowFormatter}
               newRecordInitialValues={initialValues}
               massageNewRecord={this.massageNewRecord}

diff --git a/src/utils.js b/src/utils.js
@@ -179,6 +179,17 @@ export function buildLocaleDateAndTime(dateTime, timezone, locale) {
     .format('L LT');
 }
 
+export function getSelectedSlipData(pickSlipsData, selectedRequestId) {
+  const sel = pickSlipsData.filter((pickSlip) => {
+    return pickSlip['request.requestID'] === selectedRequestId;
+  })[0];
+  if (sel === undefined) {
+    return [];
+  } else {
+    return [sel].flat();
+  }
+}
+
 export const convertToSlipData = (source, intl, timeZone, locale, slipName = SLIPS_TYPE.PICK_SLIP) => {
   return source.map(pickSlip => {
     const {

diff --git a/translations/ui-requests/en_US.json b/translations/ui-requests/en_US.json
@@ -73,6 +73,8 @@
     "requests.requestDate": "Request Date",
     "requests.proxy": "Proxy",
     "requests.itemBarcode": "Item barcode",
+    "requests.singlePrint": "Single Print",
+    "requests.printButtonLabel": "Print",
     "requestMeta.type.recall": "Recall",
     "requestMeta.type.hold": "Hold",
     "requestMeta.type.page": "Page",