Implement attachment viewer gallery in record sets

CarolineDenis · maxpatiiuk · commit 23e1586aecdf · 2023-04-21T09:49:11.000-05:00
Fixes #2132
diff --git a/specifyweb/frontend/js_src/lib/components/Attachments/Gallery.tsx b/specifyweb/frontend/js_src/lib/components/Attachments/Gallery.tsx
@@ -25,10 +25,15 @@ export function AttachmentGallery({
   onChange: handleChange,
 }: {
   readonly attachments: RA<SerializedResource<Attachment>>;
-  readonly onFetchMore: (() => Promise<void>) | undefined;
+  readonly onFetchMore:
+    | (() => Promise<RA<number | undefined> | void>)
+    | undefined;
   readonly scale: number;
   readonly isComplete: boolean;
-  readonly onChange: (attachments: RA<SerializedResource<Attachment>>) => void;
+  readonly onChange: (
+    attachment: SerializedResource<Attachment>,
+    index: number
+  ) => void;
 }): JSX.Element {
   const containerRef = React.useRef<HTMLElement | null>(null);
 
@@ -61,6 +66,7 @@ export function AttachmentGallery({
   const [openIndex, setOpenIndex] = React.useState<number | undefined>(
     undefined
   );
+
   const [related, setRelated] = React.useState<
     RA<SpecifyResource<AnySchema> | undefined>
   >([]);
@@ -121,7 +127,7 @@ export function AttachmentGallery({
             (item): void => setRelated(replaceItem(related, openIndex, item)),
           ]}
           onChange={(newAttachment): void =>
-            handleChange(replaceItem(attachments, openIndex, newAttachment))
+            handleChange(newAttachment, openIndex)
           }
           onClose={(): void => setOpenIndex(undefined)}
           onNext={
diff --git a/specifyweb/frontend/js_src/lib/components/Attachments/RecordSetAttachment.tsx b/specifyweb/frontend/js_src/lib/components/Attachments/RecordSetAttachment.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { useAsyncState } from '../../hooks/useAsyncState';
+import { useCachedState } from '../../hooks/useCachedState';
+import { attachmentsText } from '../../localization/attachments';
+import { commonText } from '../../localization/common';
+import type { RA } from '../../utils/types';
+import { filterArray } from '../../utils/types';
+import { Button } from '../Atoms/Button';
+import { serializeResource } from '../DataModel/helpers';
+import type { AnySchema } from '../DataModel/helperTypes';
+import type { SpecifyResource } from '../DataModel/legacyTypes';
+import type { CollectionObjectAttachment } from '../DataModel/types';
+import { Dialog } from '../Molecules/Dialog';
+import { defaultScale } from '.';
+import { AttachmentGallery } from './Gallery';
+
+export function RecordSetAttachments<SCHEMA extends AnySchema>({
+  records,
+  onClose: handleClose,
+  onFetch: handleFetch,
+}: {
+  readonly records: RA<SpecifyResource<SCHEMA> | undefined>;
+  readonly onClose: () => void;
+  readonly onFetch?:
+    | ((index: number) => Promise<RA<number | undefined> | void>)
+    | undefined;
+}): JSX.Element {
+  const recordFetched = React.useRef<number>(0);
+
+  const [attachments] = useAsyncState(
+    React.useCallback(async () => {
+      const relatedAttachementRecords = await Promise.all(
+        records.map((record) =>
+          record
+            ?.rgetCollection(`${record.specifyModel.name}Attachments`)
+            .then(
+              ({ models }) =>
+                models as RA<SpecifyResource<CollectionObjectAttachment>>
+            )
+        )
+      );
+
+      const fetchCount = records.findIndex(
+        (record) => record?.populated !== true
+      );
+
+      recordFetched.current = fetchCount === -1 ? records.length : fetchCount;
+
+      return Promise.all(
+        filterArray(relatedAttachementRecords.flat()).map(
+          async (collectionObjectAttachment) => ({
+            attachment: await collectionObjectAttachment
+              .rgetPromise('attachment')
+              .then((resource) => serializeResource(resource)),
+            related: collectionObjectAttachment,
+          })
+        )
+      );
+    }, [records]),
+    true
+  );
+
+  const [haltValue, setHaltValue] = React.useState(300);
+  const halt = attachments?.length === 0 && records.length >= haltValue;
+
+  const [scale = defaultScale] = useCachedState('attachments', 'scale');
+
+  const children = halt ? (
+    haltValue === records.length ? (
+      <>{attachmentsText.noAttachments()}</>
+    ) : (
+      <div className="flex flex-col gap-4">
+        {attachmentsText.attachmentHaltLimit({ halt: haltValue })}
+        <Button.Orange
+          onClick={() => {
+            if (haltValue + 300 > records.length) {
+              setHaltValue(records.length);
+            } else {
+              setHaltValue(haltValue + 300);
+            }
+          }}
+        >
+          {attachmentsText.fetchNextAttachments()}
+        </Button.Orange>
+      </div>
+    )
+  ) : (
+    <AttachmentGallery
+      attachments={attachments?.map(({ attachment }) => attachment) ?? []}
+      isComplete={recordFetched.current === records.length}
+      scale={scale}
+      onChange={(attachment, index): void =>
+        void attachments?.[index].related.set(`attachment`, attachment)
+      }
+      onFetchMore={
+        attachments === undefined || handleFetch === undefined || halt
+          ? undefined
+          : async () => handleFetch?.(recordFetched.current)
+      }
+    />
+  );
+
+  return (
+    <Dialog
+      buttons={<Button.DialogClose>{commonText.close()}</Button.DialogClose>}
+      header={attachmentsText.attachments()}
+      onClose={handleClose}
+    >
+      {children}
+    </Dialog>
+  );
+}
diff --git a/specifyweb/frontend/js_src/lib/components/Attachments/index.tsx b/specifyweb/frontend/js_src/lib/components/Attachments/index.tsx
@@ -26,6 +26,7 @@ import { ProtectedTable } from '../Permissions/PermissionDenied';
 import { OrderPicker } from '../Preferences/Renderers';
 import { attachmentSettingsPromise } from './attachments';
 import { AttachmentGallery } from './Gallery';
+import { replaceItem } from '../../utils/utils';
 
 export const attachmentRelatedTables = f.store(() =>
   Object.keys(schema.models).filter((tableName) =>
@@ -47,7 +48,7 @@ export const tablesWithAttachments = f.store(() =>
   )
 );
 
-const defaultScale = 10;
+export const defaultScale = 10;
 const minScale = 4;
 const maxScale = 50;
 const defaultSortOrder = '-timestampCreated';
@@ -242,10 +243,13 @@ function Attachments(): JSX.Element {
         }
         key={`${order}_${JSON.stringify(filter)}`}
         scale={scale}
-        onChange={(records): void =>
+        onChange={(attachment, index): void =>
           collection === undefined
             ? undefined
-            : setCollection({ records, totalCount: collection.totalCount })
+            : setCollection({
+                records: replaceItem(collection.records, index, attachment),
+                totalCount: collection.totalCount,
+              })
         }
         onFetchMore={collection === undefined ? undefined : fetchMore}
       />
diff --git a/specifyweb/frontend/js_src/lib/components/FormSliders/RecordSelectorFromIds.tsx b/specifyweb/frontend/js_src/lib/components/FormSliders/RecordSelectorFromIds.tsx
@@ -20,6 +20,9 @@ import { hasTablePermission } from '../Permissions/helpers';
 import { SetUnloadProtectsContext } from '../Router/Router';
 import type { RecordSelectorProps } from './RecordSelector';
 import { useRecordSelector } from './RecordSelector';
+import { RecordSetAttachments } from '../Attachments/RecordSetAttachment';
+import { attachmentsText } from '../../localization/attachments';
+import { tablesWithAttachments } from '../Attachments';
 
 /**
  * A Wrapper for RecordSelector that allows to specify list of records by their
@@ -45,6 +48,7 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
   onAdd: handleAdd,
   onClone: handleClone,
   onDelete: handleDelete,
+  onFetch: handleFetch,
   ...rest
 }: Omit<RecordSelectorProps<SCHEMA>, 'index' | 'records'> & {
   /*
@@ -69,13 +73,18 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
   readonly onClone:
     | ((newResource: SpecifyResource<SCHEMA>) => void)
     | undefined;
+  readonly onFetch?: (
+    index: number
+  ) => Promise<undefined | RA<number | undefined>>;
 }): JSX.Element | null {
   const [records, setRecords] = React.useState<
     RA<SpecifyResource<SCHEMA> | undefined>
   >(() =>
     ids.map((id) => (id === undefined ? undefined : new model.Resource({ id })))
   );
 
+  const [attachmentState, setAttachmentState] = React.useState(false);
+
   const previousIds = React.useRef(ids);
   React.useEffect(() => {
     setRecords((records) =>
@@ -183,6 +192,9 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
         recordSetTable: schema.models.RecordSet.label,
       })
     : commonText.delete();
+
+  const hasAttachments = tablesWithAttachments().includes(model);
+
   return (
     <>
       <ResourceView
@@ -191,13 +203,11 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
           <div className="flex flex-col items-center gap-2 md:contents md:flex-row md:gap-8">
             <div className="flex items-center gap-2 md:contents">
               {headerButtons}
-
               <DataEntry.Visit
                 resource={
                   !isDependent && dialog !== false ? resource : undefined
                 }
               />
-
               {hasTablePermission(
                 model.name,
                 isDependent ? 'create' : 'read'
@@ -209,7 +219,6 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
                   onClick={handleAdding}
                 />
               ) : undefined}
-
               {typeof handleRemove === 'function' && canRemove ? (
                 <DataEntry.Remove
                   aria-label={removeLabel}
@@ -218,15 +227,25 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
                   onClick={(): void => handleRemove('minusButton')}
                 />
               ) : undefined}
-
               {typeof newResource === 'object' ? (
                 <p className="flex-1">{formsText.creatingNewRecord()}</p>
               ) : (
                 <span
                   className={`flex-1 ${dialog === false ? '-ml-2' : '-ml-4'}`}
                 />
               )}
-
+              {hasAttachments && (
+                <Button.Blue onClick={() => setAttachmentState(true)}>
+                  {attachmentsText.attachments()}
+                </Button.Blue>
+              )}
+              {attachmentState === true ? (
+                <RecordSetAttachments
+                  records={records}
+                  onClose={() => setAttachmentState(!attachmentState)}
+                  onFetch={handleFetch}
+                />
+              ) : null}
               {specifyNetworkBadge}
             </div>
             <div>{slider}</div>
diff --git a/specifyweb/frontend/js_src/lib/components/FormSliders/RecordSet.tsx b/specifyweb/frontend/js_src/lib/components/FormSliders/RecordSet.tsx
@@ -198,7 +198,7 @@ function RecordSet<SCHEMA extends AnySchema>({
     replace: boolean = false
   ): void =>
     recordId === undefined
-      ? handleFetch(index)
+      ? handleFetchMore(index)
       : navigate(
           getResourceViewUrl(
             currentRecord.specifyModel.name,
@@ -220,40 +220,54 @@ function RecordSet<SCHEMA extends AnySchema>({
 
   const previousIndex = React.useRef<number>(currentIndex);
   const [isLoading, handleLoading, handleLoaded] = useBooleanState();
+
   const handleFetch = React.useCallback(
-    (index: number): void => {
-      if (index >= totalCount) return;
+    async (index: number): Promise<RA<number | undefined> | undefined> => {
+      if (index >= totalCount) return undefined;
       handleLoading();
-      fetchItems(
+      return fetchItems(
         recordSet.id,
         // If new index is smaller (i.e, going back), fetch previous 40 IDs
         clamp(
           0,
           previousIndex.current > index ? index - fetchSize + 1 : index,
           totalCount
         )
-      )
-        .then((updates) =>
-          setIds((oldIds = []) => {
-            handleLoaded();
-            const newIds = updateIds(oldIds, updates);
-            go(index, newIds[index]);
-            return newIds;
-          })
-        )
-        .catch(softFail);
+      ).then(
+        async (updates) =>
+          new Promise((resolve) =>
+            setIds((oldIds = []) => {
+              handleLoaded();
+              const newIds = updateIds(oldIds, updates);
+              resolve(newIds);
+              return newIds;
+            })
+          )
+      );
     },
     [totalCount, recordSet.id, loading, handleLoading, handleLoaded]
   );
 
+  const handleFetchMore = React.useCallback(
+    (index: number): void => {
+      handleFetch(index)
+        .then((newIds) => {
+          if (newIds === undefined) return;
+          go(index, newIds[index]);
+        })
+        .catch(softFail);
+    },
+    [handleFetch]
+  );
+
   // Fetch ID of record at current index
   const currentRecordId = ids[currentIndex];
   React.useEffect(() => {
-    if (currentRecordId === undefined) handleFetch(currentIndex);
+    if (currentRecordId === undefined) handleFetchMore(currentIndex);
     return (): void => {
       previousIndex.current = currentIndex;
     };
-  }, [totalCount, currentRecordId, handleFetch, currentIndex]);
+  }, [totalCount, currentRecordId, handleFetchMore, currentIndex]);
 
   const [hasDuplicate, handleHasDuplicate, handleDismissDuplicate] =
     useBooleanState();
@@ -373,6 +387,7 @@ function RecordSet<SCHEMA extends AnySchema>({
               }
             : undefined
         }
+        onFetch={handleFetch}
         onSaved={(resource): void =>
           ids[currentIndex] === resource.id
             ? undefined
diff --git a/specifyweb/frontend/js_src/lib/localization/attachments.ts b/specifyweb/frontend/js_src/lib/localization/attachments.ts
@@ -84,4 +84,11 @@ export const attachmentsText = createDictionary({
     'ru-ru': 'Показать форму',
     'uk-ua': 'Показати форму',
   },
+  attachmentHaltLimit: {
+    'en-us':
+      'No attachments have been found in the first {halt:number} records.',
+  },
+  fetchNextAttachments: {
+    'en-us': 'Look for more attachments',
+  },
 } as const);
