IIIF #78 - Adding attachment info the Resource edit page

app/serializers/resources_serializer.rb

@@ -12,7 +12,20 @@ class ResourcesSerializer < BaseSerializer
 
   show_attributes(:manifest_url) { |resource| manifest_url(resource) }
 
+  show_attributes(:content_info) { |resource| content_info(resource.content) }
+  show_attributes(:content_converted_info) { |resource| content_info(resource.content_converted) }
+
   def self.manifest_url(resource)
     "#{ENV['HOSTNAME']}/public/resources/#{resource.uuid}/manifest"
   end
+
+  def self.content_info(attachment)
+    return unless attachment.attached?
+
+    {
+      key: attachment.key,
+      byte_size: attachment.byte_size,
+      content_type: attachment.content_type
+    }
+  end
 end

client/src/components/AttachmentDetails.js

@@ -0,0 +1,80 @@
+// @flow
+
+import cx from 'classnames';
+import React, { type ComponentType } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon, Image, List } from 'semantic-ui-react';
+import FileUtils from '../utils/File';
+import styles from './AttachmentDetails.module.css';
+
+type Props = {
+  attachment?: {
+    byte_size: number,
+    content_type: string,
+    key: string,
+  }
+};
+
+const AttachmentDetails: ComponentType<any> = (props: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={styles.attachmentDetails}
+    >
+      { !props.attachment && (
+        <span>
+          { t('AttachmentDetails.messages.noContent') }
+        </span>
+      )}
+      { props.attachment && (
+        <List
+          className={cx(styles.ui, styles.list, styles.horizontal)}
+          horizontal
+        >
+          <List.Item
+            content={props.attachment?.key}
+            header={t('AttachmentDetails.labels.key')}
+            image={(
+              <Image>
+                <Icon
+                  circular
+                  name='aws'
+                  size='large'
+                />
+              </Image>
+            )}
+          />
+          <List.Item
+            content={FileUtils.getFileSize(props.attachment?.byte_size)}
+            header={t('AttachmentDetails.labels.fileSize')}
+            image={(
+              <Image>
+                <Icon
+                  circular
+                  name='file alternate'
+                  size='large'
+                />
+              </Image>
+            )}
+          />
+          <List.Item
+            content={props.attachment?.content_type}
+            header={t('AttachmentDetails.labels.type')}
+            image={(
+              <Image>
+                <Icon
+                  circular
+                  name='th large'
+                  size='large'
+                />
+              </Image>
+            )}
+          />
+        </List>
+      )}
+    </div>
+  );
+};
+
+export default AttachmentDetails;

client/src/components/AttachmentDetails.module.css

@@ -0,0 +1,9 @@
+.attachmentDetails {
+  margin-top: 1.5em;
+}
+
+.attachmentDetails > .ui.list.horizontal {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}

client/src/components/AttachmentStatus.js

@@ -0,0 +1,31 @@
+// @flow
+
+import React, { type ComponentType } from 'react';
+import { Icon } from 'semantic-ui-react';
+
+type Props = {
+  className?: string,
+  value: boolean
+};
+
+const AttachmentStatus: ComponentType<any> = (props: Props) => {
+  if (props.value) {
+    return (
+      <Icon
+        className={props.className}
+        color='green'
+        name='check circle'
+      />
+    );
+  }
+
+  return (
+    <Icon
+      className={props.className}
+      color='red'
+      name='times circle'
+    />
+  );
+};
+
+export default AttachmentStatus;

client/src/components/SimpleEditPage.js

@@ -27,6 +27,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import type { Translateable } from '../types/Translateable';
 
 type Props = EditContainerProps & Translateable & {
+  className?: string,
   onTabClick?: (tab: string) => void,
   stickyMenu?: boolean
 };
@@ -138,7 +139,7 @@ const SimpleEditPage: ComponentType<any> = (props: Props) => {
 
   return (
     <Grid
-      className={styles.simpleEditPage}
+      className={cx(styles.simpleEditPage, props.className)}
     >
       <Grid.Row>
         <Grid.Column>

client/src/i18n/en.json

@@ -8,6 +8,16 @@
       "success": "You've successfully authenticated"
     }
   },
+  "AttachmentDetails": {
+    "labels": {
+      "fileSize": "File size",
+      "key": "Key",
+      "type": "Type"
+    },
+    "messages": {
+      "noContent": "No attached content."
+    }
+  },
   "Common": {
     "buttons": {
       "add": "Add",
@@ -108,7 +118,10 @@
       "exif": "View Info"
     },
     "labels": {
+      "attachments": "Attachments",
       "content": "Content",
+      "convertedImage": "Converted PTIF",
+      "sourceImage": "Source Image",
       "uuid": "Unique identifier"
     }
   },

client/src/pages/Resource.js

@@ -10,20 +10,46 @@ import React, {
 } from 'react';
 import { withTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import { Button, Form } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Header,
+  Menu,
+  Segment
+} from 'semantic-ui-react';
 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 [info, setInfo] = useState(false);
   const [project, setProject] = useState();
 
   const { projectId } = useParams();
 
+  /**
+   * Memo-izes the current attachment info.
+   *
+   * @type {AttachmentInfo}
+   */
+  const attachment = useMemo(() => (tab === Tabs.content
+    ? props.item.content_info
+    : props.item.content_converted_info
+  ), [tab, props.item]);
+
   /**
    * Converts the EXIF data to JSON.
    *
@@ -63,12 +89,17 @@ const ResourceForm = withTranslation()((props) => {
 
   return (
     <SimpleEditPage
+      className={styles.resource}
       {...props}
     >
       <SimpleEditPage.Tab
         key='details'
         name={props.t('Common.tabs.details')}
       >
+        <ReadOnlyField
+          label={props.t('Resource.labels.uuid')}
+          value={props.item.uuid}
+        />
         <Form.Input
           label={props.t('Resource.labels.content')}
         >
@@ -103,10 +134,6 @@ const ResourceForm = withTranslation()((props) => {
           required={props.isRequired('name')}
           value={props.item.name}
         />
-        <ReadOnlyField
-          label={props.t('Resource.labels.uuid')}
-          value={props.item.uuid}
-        />
         <UserDefinedFieldsForm
           data={props.item.user_defined}
           defineableId={projectId}
@@ -122,6 +149,44 @@ const ResourceForm = withTranslation()((props) => {
             onClose={() => setInfo(false)}
           />
         )}
+        <Header
+          content={props.t('Resource.labels.attachments')}
+        />
+        <Segment
+          padded
+        >
+          <Menu
+            className={cx(styles.ui, styles.menu)}
+            pointing
+            secondary
+          >
+            <Menu.Item
+              name={Tabs.content}
+              active={tab === Tabs.content}
+              onClick={() => setTab(Tabs.content)}
+            >
+              { props.t('Resource.labels.sourceImage') }
+              <AttachmentStatus
+                className={cx(styles.icon, styles.attachmentStatus)}
+                value={!!props.item.content_info}
+              />
+            </Menu.Item>
+            <Menu.Item
+              name={Tabs.content_converted}
+              active={tab === Tabs.content_converted}
+              onClick={() => setTab(Tabs.content_converted)}
+            >
+              { props.t('Resource.labels.convertedImage') }
+              <AttachmentStatus
+                className={cx(styles.icon, styles.attachmentStatus)}
+                value={!!props.item.content_converted_info}
+              />
+            </Menu.Item>
+          </Menu>
+          <AttachmentDetails
+            attachment={attachment}
+          />
+        </Segment>
       </SimpleEditPage.Tab>
     </SimpleEditPage>
   );

client/src/pages/Resource.module.css

@@ -0,0 +1,3 @@
+.resource .ui.menu i.icon.attachmentStatus {
+  margin-left: 0.5em;
+}

client/src/types/Resource.js

@@ -2,6 +2,12 @@
 
 import type { Project } from './Project';
 
+export type AttachmentInfo = {
+  content_type: string,
+  byte_size: number,
+  key: string
+};
+
 export type Resource = {
   id: number,
   name: string,
@@ -14,5 +20,7 @@ export type Resource = {
   manifest: string,
   metadata: any,
   project_id: number,
-  project: Project
+  project: Project,
+  content_info: AttachmentInfo,
+  content_converted_info: AttachmentInfo
 };

client/src/utils/File.js

@@ -0,0 +1,19 @@
+const FILE_SIZE_UNITS = ['B', 'kB', 'MB', 'GB', 'TB'];
+
+/**
+ * Returns the human-readable file size for the passed bytes.
+ *
+ * @param size
+ *
+ * @returns {`${number} ${string}`}
+ */
+const getFileSize = (size: number) => {
+  const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
+  const fileSize = ((size / 1024 ** i).toFixed(2)) * 1;
+
+  return `${fileSize} ${FILE_SIZE_UNITS[i]}`;
+};
+
+export default {
+  getFileSize
+};