IIIF #28 - Adding button to call /api/resources/:id/convert API endpo…

…int to Resource edit page
performant-software · Jan 14, 2025 · cfbc137 · cfbc137
1 parent 604f73c
commit cfbc137
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 6 deletions.
diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
@@ -115,6 +115,7 @@
   },
   "Resource": {
     "buttons": {
+      "convert": "Convert",
       "exif": "View Info"
     },
     "labels": {
@@ -123,6 +124,12 @@
       "convertedImage": "Converted PTIF",
       "sourceImage": "Source Image",
       "uuid": "Unique identifier"
+    },
+    "messages": {
+      "convert": {
+        "content": "A request to convert the resource to a PTIF has been submitted. Please refresh the page to view the results.",
+        "header": "Convert Resource"
+      }
     }
   },
   "ResourceExifModal": {

diff --git a/client/src/pages/Resource.js b/client/src/pages/Resource.js
@@ -1,8 +1,10 @@
 // @flow
 
-import { LazyIIIF } from '@performant-software/semantic-components';
+import cx from 'classnames';
+import { LazyIIIF, Toaster } from '@performant-software/semantic-components';
 import { UserDefinedFieldsForm, UserDefinedFields } from '@performant-software/user-defined-fields';
 import React, {
+  useCallback,
   useEffect,
   useMemo,
   useState,
@@ -15,28 +17,31 @@ import {
   Form,
   Header,
   Menu,
+  Message,
   Segment
 } from 'semantic-ui-react';
+import AttachmentDetails from '../components/AttachmentDetails';
+import AttachmentStatus from '../components/AttachmentStatus';
+import AuthenticationService from '../services/Authentication';
 import ProjectsService from '../services/Projects';
 import ReadOnlyField from '../components/ReadOnlyField';
 import ResourceExifModal from '../components/ResourceExifModal';
 import ResourcesService from '../services/Resources';
 import SimpleEditPage from '../components/SimpleEditPage';
 import styles from './Resource.module.css';
 import withEditPage from '../hooks/EditPage';
-import AttachmentStatus from '../components/AttachmentStatus';
-import cx from 'classnames';
-import AttachmentDetails from '../components/AttachmentDetails';
 
 const Tabs = {
   content: 'content',
   content_converted: 'content_converted'
 };
 
 const ResourceForm = withTranslation()((props) => {
-  const [tab, setTab] = useState(Tabs.content);
+  const [converted, setConverted] = useState(false);
+  const [errors, setErrors] = useState([]);
   const [info, setInfo] = useState(false);
   const [project, setProject] = useState();
+  const [tab, setTab] = useState(Tabs.content);
 
   const { projectId } = useParams();
 
@@ -69,6 +74,18 @@ const ResourceForm = withTranslation()((props) => {
     return value;
   }, [props.item.exif]);
 
+  /**
+   * Calls the `/api/resources/:id/convert API endpoint and sets any errors on the state.
+   *
+   * @type {function(): Promise<*>}
+   */
+  const onConvert = useCallback(() => (
+    ResourcesService
+      .convert(props.item.id)
+      .then(() => setConverted(true))
+      .catch(({ response: { data } }) => setErrors(data.errors))
+  ), [props.item.id]);
+
   /**
    * Loads the related project record.
    */
@@ -89,8 +106,9 @@ const ResourceForm = withTranslation()((props) => {
 
   return (
     <SimpleEditPage
-      className={styles.resource}
       {...props}
+      className={styles.resource}
+      errors={[...props.errors, ...errors]}
     >
       <SimpleEditPage.Tab
         key='details'
@@ -182,10 +200,38 @@ const ResourceForm = withTranslation()((props) => {
                 value={!!props.item.content_converted_info}
               />
             </Menu.Item>
+            { AuthenticationService.isAdmin() && (
+              <Menu.Menu
+                position='right'
+              >
+                <Menu.Item
+                  as={Button}
+                >
+                  <Button
+                    content={props.t('Resource.buttons.convert')}
+                    icon='exchange'
+                    onClick={onConvert}
+                  />
+                </Menu.Item>
+              </Menu.Menu>
+            )}
           </Menu>
           <AttachmentDetails
             attachment={attachment}
           />
+          { converted && (
+            <Toaster
+              onDismiss={() => setConverted(false)}
+              type={Toaster.MessageTypes.info}
+            >
+              <Message.Header
+                content={props.t('Resource.messages.convert.header')}
+              />
+              <Message.Content
+                content={props.t('Resource.messages.convert.content')}
+              />
+            </Toaster>
+          )}
         </Segment>
       </SimpleEditPage.Tab>
     </SimpleEditPage>

diff --git a/client/src/services/Resources.js b/client/src/services/Resources.js
@@ -8,6 +8,17 @@ import type { Resource as ResourceType } from '../types/Resource';
  * Class responsible for handling all resource API requests.
  */
 class Resources extends BaseService {
+  /**
+   * Calls the `/api/resources/:id/convert` API endpoint.
+   *
+   * @param id
+   *
+   * @returns {*}
+   */
+  convert(id: number): Promise<any> {
+    return this.getAxios().post(`${this.getBaseUrl()}/${id}/convert`);
+  }
+
   /**
    * Returns the resources base URL.
    *