UIIN-2896 Inventory app: Define and implement shortcut key for editin…

…g a quickMARC bib record
folio-org · May 9, 2024 · 54f4d9c · 54f4d9c
1 parent 12878f7
commit 54f4d9c
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 41 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@
 * Jest/RTL: Cover MoveHoldingContext component with unit tests. Refs UIIN-2664.
 * Use consolidated locations endpoint to fetch all locations when in central tenant context. Refs UIIN-2811.
 * Change label of eye-readable call number search option in holdings/items. Refs UIIN-2797.
+* Inventory app: Define and implement shortcut key for editing a quickMARC bib record. Refs UIIN-2896.
 
 ## [11.0.4](https://github.com/folio-org/ui-inventory/tree/v11.0.4) (2024-04-30)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v11.0.3...v11.0.4)

diff --git a/src/ViewHoldingsRecord.js b/src/ViewHoldingsRecord.js
@@ -689,6 +689,12 @@ class ViewHoldingsRecord extends React.Component {
           if (stripes.hasPerm('ui-inventory.holdings.edit')) this.onEditHolding();
         }),
       },
+      {
+        name: 'editMARC',
+        handler: handleKeyCommand(() => {
+          if (stripes.hasPerm('ui-quick-marc.quick-marc-editor.all')) this.handleEditInQuickMarc();
+        }),
+      },
       {
         name: 'expandAllSections',
         handler: (e) => expandAllSections(e, this.accordionStatusRef),

diff --git a/src/ViewInstance.js b/src/ViewInstance.js
@@ -1066,6 +1066,12 @@ class ViewInstance extends React.Component {
           if (stripes.hasPerm('ui-inventory.instance.edit')) this.onClickEditInstance();
         }),
       },
+      {
+        name: 'editMARC',
+        handler: handleKeyCommand(() => {
+          if (stripes.hasPerm('ui-quick-marc.quick-marc-editor.all')) this.editInstanceMarc();
+        }),
+      },
       {
         name: 'duplicateRecord',
         handler: handleKeyCommand(() => {

diff --git a/src/components/ViewSource/ViewSource.js b/src/components/ViewSource/ViewSource.js
@@ -1,13 +1,21 @@
 import React, {
   useState,
   useEffect,
+  useMemo,
+  useCallback,
 } from 'react';
+import {
+  useLocation,
+  useHistory,
+} from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
 import {
   Button,
   LoadingView,
+  HasCommand,
+  checkScope,
 } from '@folio/stripes/components';
 import { useStripes } from '@folio/stripes/core';
 import {
@@ -18,7 +26,10 @@ import {
 
 import { useGoBack } from '../../common/hooks';
 
-import { isUserInConsortiumMode } from '../../utils';
+import {
+  isUserInConsortiumMode,
+  handleKeyCommand,
+} from '../../utils';
 import MARC_TYPES from './marcTypes';
 
 import styles from './ViewSource.css';
@@ -33,6 +44,8 @@ const ViewSource = ({
   marcType,
 }) => {
   const stripes = useStripes();
+  const location = useLocation();
+  const history = useHistory();
   const [isShownPrintPopup, setIsShownPrintPopup] = useState(false);
   const openPrintPopup = () => setIsShownPrintPopup(true);
   const closePrintPopup = () => setIsShownPrintPopup(false);
@@ -51,6 +64,30 @@ const ViewSource = ({
   const [marc, setMarc] = useState();
   const [isMarcLoading, setIsMarcLoading] = useState(true);
 
+  const redirectToMARCEdit = useCallback(() => {
+    const urlId = isHoldingsRecord ? `${instanceId}/${holdingsRecordId}` : instanceId;
+    const pathname = `/inventory/quick-marc/edit-${isHoldingsRecord ? 'holdings' : 'bib'}/${urlId}`;
+
+    const searchParams = new URLSearchParams(location.search);
+
+    searchParams.delete('relatedRecordVersion');
+    searchParams.append('shared', instance.shared?.toString());
+
+    history.push({
+      pathname,
+      search: searchParams.toString(),
+    });
+  }, [isHoldingsRecord]);
+
+  const shortcuts = useMemo(() => [
+    {
+      name: 'editMARC',
+      handler: handleKeyCommand(() => {
+        if (stripes.hasPerm('ui-quick-marc.quick-marc-editor.all')) redirectToMARCEdit();
+      }),
+    },
+  ]);
+
   useEffect(() => {
     setIsMarcLoading(true);
 
@@ -94,32 +131,38 @@ const ViewSource = ({
   );
 
   return (
-    <div className={styles.viewSource}>
-      <MarcView
-        paneTitle={paneTitle}
-        marcTitle={marcTitle}
-        marc={marc}
-        onClose={goBack}
-        lastMenu={
-          isPrintAvailable &&
-            <Button
-              marginBottom0
-              buttonStyle="primary"
-              onClick={openPrintPopup}
-            >
-              <FormattedMessage id="ui-quick-marc.print" />
-            </Button>
-        }
-      />
-      {isPrintAvailable && isShownPrintPopup && (
-        <PrintPopup
-          marc={marc}
-          paneTitle={instance.title}
+    <HasCommand
+      commands={shortcuts}
+      isWithinScope={checkScope}
+      scope={document.body}
+    >
+      <div className={styles.viewSource}>
+        <MarcView
+          paneTitle={paneTitle}
           marcTitle={marcTitle}
-          onAfterPrint={closePrintPopup}
+          marc={marc}
+          onClose={goBack}
+          lastMenu={
+            isPrintAvailable &&
+              <Button
+                marginBottom0
+                buttonStyle="primary"
+                onClick={openPrintPopup}
+              >
+                <FormattedMessage id="ui-quick-marc.print" />
+              </Button>
+          }
         />
-      )}
-    </div>
+        {isPrintAvailable && isShownPrintPopup && (
+          <PrintPopup
+            marc={marc}
+            paneTitle={instance.title}
+            marcTitle={marcTitle}
+            onAfterPrint={closePrintPopup}
+          />
+        )}
+      </div>
+    </HasCommand>
   );
 };
 

diff --git a/src/index.js b/src/index.js
@@ -62,20 +62,23 @@ const InventoryRouting = (props) => {
   const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
   const { showSettings, match: { path } } = props;
 
-  const keyboardShortcuts = [
-    ...defaultKeyboardShortcuts.slice(0, 9),
-    {
-      label: <FormattedMessage id="ui-inventory.shortcut.nextSubfield" />,
-      name: 'NEXT_SUBFIELD',
-      shortcut: 'Ctrl + ]',
-    },
-    {
-      label: <FormattedMessage id="ui-inventory.shortcut.prevSubfield" />,
-      name: 'PREV_SUBFIELD',
-      shortcut: 'Ctrl + [',
-    },
-    ...defaultKeyboardShortcuts.slice(9),
-  ];
+  const keyboardShortcuts = [...defaultKeyboardShortcuts];
+
+  keyboardShortcuts.splice(4, 0, {
+    label: (<FormattedMessage id="ui-inventory.shortcut.editMARC" />),
+    name: 'editMARC',
+    shortcut: 'ctrl+shift+e',
+  });
+  keyboardShortcuts.splice(11, 0, {
+    label: <FormattedMessage id="ui-inventory.shortcut.nextSubfield" />,
+    name: 'NEXT_SUBFIELD',
+    shortcut: 'Ctrl + ]',
+  },
+  {
+    label: <FormattedMessage id="ui-inventory.shortcut.prevSubfield" />,
+    name: 'PREV_SUBFIELD',
+    shortcut: 'Ctrl + [',
+  });
 
   useEffect(() => {
     return () => {
@@ -112,7 +115,7 @@ const InventoryRouting = (props) => {
     <DataProvider>
       <HoldingsProvider>
         <LastSearchTermsProvider>
-          <CommandList commands={defaultKeyboardShortcuts}>
+          <CommandList commands={keyboardShortcuts}>
             <HasCommand
               commands={shortcuts}
               isWithinScope={checkScope}

diff --git a/translations/ui-inventory/en.json b/translations/ui-inventory/en.json
@@ -874,5 +874,6 @@
   "info.shelvingOrder": "This field is the normalized form of the call number which determines how the call number is sorted while browsing.",
 
   "shortcut.nextSubfield": "quickMARC only: Move to the next subfield in a text box",
-  "shortcut.prevSubfield": "quickMARC only: Move to the previous subfield in a text box"
+  "shortcut.prevSubfield": "quickMARC only: Move to the previous subfield in a text box",
+  "shortcut.editMARC": "Edit MARC record"
 }