IIIF #20 - Updating Resources list to use new version of FileUploadMo…

…dal component
performant-software · Oct 27, 2022 · 3edaa61 · 3edaa61
1 parent 0fa119d
commit 3edaa61
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 93 deletions.
diff --git a/client/package.json b/client/package.json
@@ -11,9 +11,9 @@
     "flow": "flow"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.0.0",
-    "@performant-software/shared-components": "^1.0.0",
-    "@performant-software/user-defined-fields": "^1.0.0",
+    "@performant-software/semantic-components": "^1.0.4-beta.9",
+    "@performant-software/shared-components": "^1.0.4-beta.9",
+    "@performant-software/user-defined-fields": "^1.0.4-beta.9",
     "classnames": "^2.3.1",
     "i18next": "^21.8.0",
     "react": "^17.0.2",

diff --git a/client/src/components/FileUpload.js b/client/src/components/FileUpload.js
@@ -30,6 +30,7 @@ const FileUpload: ComponentType<any> = withTranslation()((props) => (
         icon='trash'
         onClick={props.onDelete}
       />
+      { props.renderStatus() }
     </Item.Content>
   </Item>
 ));

diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
@@ -43,6 +43,11 @@
       "users": "Users"
     }
   },
+  "FileUpload": {
+    "labels": {
+      "name": "Name"
+    }
+  },
   "Home": {
     "header": "Welcome to Rails-React Template <1>Edit <1>src/App.js</1> and save to reload.</1>"
   },

diff --git a/client/src/pages/Resource.js b/client/src/pages/Resource.js
@@ -117,6 +117,7 @@ const ResourceForm = withTranslation()((props) => {
           isError={props.isError}
           onChange={(userDefined) => props.onSetState({ user_defined: userDefined })}
           onClearValidationError={props.onClearValidationError}
+          tableName='Resource'
         />
         { info && exif && (
           <ResourceExifModal

diff --git a/client/src/pages/Resources.js b/client/src/pages/Resources.js
@@ -1,92 +1,93 @@
 // @flow
 
-import { ItemList, FileUploadModal, LazyMedia } from '@performant-software/semantic-components';
-import React, { useCallback, type ComponentType } from 'react';
+import { FileUploadModal, ItemList, LazyMedia } from '@performant-software/semantic-components';
+import React, { type ComponentType, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import FileUpload from '../components/FileUpload';
 import ResourcesService from '../services/Resources';
-import { useTranslation } from 'react-i18next';
 
 const Resources: ComponentType<any> = () => {
+  const [modal, setModal] = useState(false);
   const location = useLocation();
   const navigate = useNavigate();
   const { projectId } = useParams();
-  const { t } = useTranslation();
 
-  /**
-   * Uploads the passed resources and navigates to the current URL to refresh the state.
-   *
-   * @type {function(*): Promise<R>|Promise<R|unknown>|Promise<*>|*}
-   */
-  const onUpload = useCallback((resources) => (
-    ResourcesService
-      .upload(resources)
-      .then(() => navigate(location.pathname, {
-        state: {
-          saved: true
-        }
-      }))
-  ), []);
+  const { t } = useTranslation();
 
   return (
-    <ItemList
-      actions={[{
-        name: 'edit',
-        label: null,
-        onClick: (item) => navigate(item.id.toString())
-      }, {
-        name: 'delete',
-        label: null
-      }]}
-      addButton={{
-        location: 'top',
-        onClick: () => navigate('new')
-      }}
-      buttons={[{
-        render: () => (
-          <FileUploadModal
-            button={t('Common.buttons.upload')}
-            itemComponent={FileUpload}
-            onAddFile={(file) => ({
-              name: file.name,
-              project_id: projectId,
-              content: file,
-              content_url: URL.createObjectURL(file),
-              content_type: file.type
-            })}
-            onSave={onUpload}
-            required={[]}
+    <>
+      <ItemList
+        actions={[{
+          name: 'edit',
+          label: null,
+          onClick: (item) => navigate(item.id.toString())
+        }, {
+          name: 'delete',
+          label: null
+        }]}
+        addButton={{
+          location: 'top',
+          onClick: () => navigate('new')
+        }}
+        buttons={[{
+          content: t('Common.buttons.upload'),
+          icon: 'cloud upload',
+          primary: true,
+          onClick: () => setModal(true)
+        }]}
+        collectionName='resources'
+        onLoad={(params) => ResourcesService.fetchAll({ ...params, project_id: projectId })}
+        onDelete={(resource) => ResourcesService.delete(resource)}
+        perPageOptions={[10, 25, 50, 100]}
+        renderHeader={(resource) => resource.name}
+        renderImage={(resource) => (
+          <LazyMedia
+            contentType={resource.content_type}
+            dimmable={false}
+            preview={resource.content_thumbnail_url}
           />
-        )
-      }]}
-      collectionName='resources'
-      onLoad={(params) => ResourcesService.fetchAll({ ...params, project_id: projectId })}
-      onDelete={(resource) => ResourcesService.delete(resource)}
-      perPageOptions={[10, 25, 50, 100]}
-      renderHeader={(resource) => resource.name}
-      renderImage={(resource) => (
-        <LazyMedia
-          contentType={resource.content_type}
-          dimmable={false}
-          preview={resource.content_thumbnail_url}
+        )}
+        renderMeta={() => ''}
+        saved={location.state && location.state.saved}
+        sort={[{
+          key: 'name',
+          value: 'resources.name',
+          text: t('Common.sort.name')
+        }, {
+          key: 'created_at',
+          value: 'resources.created_at',
+          text: t('Common.sort.created')
+        }, {
+          key: 'updated_at',
+          value: 'resources.updated_at',
+          text: t('Common.sort.updated')
+        }]}
+      />
+      { modal && (
+        <FileUploadModal
+          closeOnComplete={false}
+          itemComponent={FileUpload}
+          onAddFile={(file) => ({
+            name: file.name,
+            project_id: projectId,
+            content: file,
+            content_url: URL.createObjectURL(file),
+            content_type: file.type
+          })}
+          onSave={(item) => ResourcesService.save(item)}
+          required={{
+            name: t('FileUpload.labels.name')
+          }}
+          onClose={() => {
+            setModal(false);
+            navigate(location.pathname, { state: { saved: true } });
+          }}
+          showPageLoader={false}
+          strategy='single'
         />
       )}
-      renderMeta={() => ''}
-      saved={location.state && location.state.saved}
-      sort={[{
-        key: 'name',
-        value: 'resources.name',
-        text: t('Common.sort.name')
-      }, {
-        key: 'created_at',
-        value: 'resources.created_at',
-        text: t('Common.sort.created')
-      }, {
-        key: 'updated_at',
-        value: 'resources.updated_at',
-        text: t('Common.sort.updated')
-      }]}
-    />
+    </>
   );
 };