Implement attachment viewer gallery in record sets

specifyweb/frontend/js_src/lib/components/Attachments/Dialog.tsx

@@ -59,7 +59,7 @@ export function AttachmentDialog({
           {form !== null && (
             <SaveButton
               form={form}
-              resource={resource}
+              resource={related[0] ?? resource}
               onAdd={undefined}
               onSaved={(): void => {
                 handleChange(serializeResource(resource));

specifyweb/frontend/js_src/lib/components/Attachments/Gallery.tsx

@@ -28,7 +28,10 @@ export function AttachmentGallery({
   readonly onFetchMore: (() => Promise<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 +64,7 @@ export function AttachmentGallery({
   const [openIndex, setOpenIndex] = React.useState<number | undefined>(
     undefined
   );
+
   const [related, setRelated] = React.useState<
     RA<SpecifyResource<AnySchema> | undefined>
   >([]);
@@ -121,7 +125,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={

specifyweb/frontend/js_src/lib/components/Attachments/RecordSetAttachment.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+
+import { useAsyncState } from '../../hooks/useAsyncState';
+import { useBooleanState } from '../../hooks/useBooleanState';
+import { useCachedState } from '../../hooks/useCachedState';
+import { attachmentsText } from '../../localization/attachments';
+import { commonText } from '../../localization/common';
+import { f } from '../../utils/functools';
+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 { defaultAttachmentScale } from '.';
+import { AttachmentGallery } from './Gallery';
+
+const haltIncrementSize = 300;
+
+export function RecordSetAttachments<SCHEMA extends AnySchema>({
+  records,
+  onFetch: handleFetch,
+}: {
+  readonly records: RA<SpecifyResource<SCHEMA> | undefined>;
+  readonly onFetch:
+    | ((index: number) => Promise<RA<number | undefined> | void>)
+    | undefined;
+}): JSX.Element {
+  const fetchedCount = React.useRef<number>(0);
+
+  const [showAttachments, handleShowAttachments, handleHideAttachments] =
+    useBooleanState();
+
+  const [attachments] = useAsyncState(
+    React.useCallback(async () => {
+      const relatedAttachmentRecords = 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
+      );
+
+      fetchedCount.current = fetchCount === -1 ? records.length : fetchCount;
+
+      const attachements = await Promise.all(
+        filterArray(relatedAttachmentRecords.flat()).map(
+          async (collectionObjectAttachment) => ({
+            attachment: await collectionObjectAttachment
+              .rgetPromise('attachment')
+              .then((resource) => serializeResource(resource)),
+            related: collectionObjectAttachment,
+          })
+        )
+      );
+
+      return {
+        attachments: attachements.map(({ attachment }) => attachment),
+        related: attachements.map(({ related }) => related),
+      };
+    }, [records]),
+    false
+  );
+  const attachmentsRef = React.useRef(attachments);
+
+  if (typeof attachments === 'object') attachmentsRef.current = attachments;
+
+  /*
+   * Stop fetching records if the first 300 don't have attachments
+   * to save computing resources. Ask the user to continue and fetch
+   * the next haltIncrementSize (300) if desired.
+   */
+  const [haltValue, setHaltValue] = React.useState(300);
+  const halt =
+    attachments?.attachments.length === 0 && records.length >= haltValue;
+
+  const [scale = defaultAttachmentScale] = useCachedState(
+    'attachments',
+    'scale'
+  );
+
+  return (
+    <>
+      <Button.Icon
+        icon="photos"
+        title="attachments"
+        onClick={handleShowAttachments}
+      />
+      {showAttachments && (
+        <Dialog
+          buttons={
+            <Button.DialogClose>{commonText.close()}</Button.DialogClose>
+          }
+          header={
+            attachmentsRef.current?.attachments === undefined
+              ? attachmentsText.attachments()
+              : commonText.countLine({
+                  resource: attachmentsText.attachments(),
+                  count: attachmentsRef.current.attachments.length,
+                })
+          }
+          onClose={handleHideAttachments}
+        >
+          {halt ? (
+            haltValue === records.length ? (
+              <>{attachmentsText.noAttachments()}</>
+            ) : (
+              <div className="flex flex-col gap-4">
+                {attachmentsText.attachmentHaltLimit({ halt: haltValue })}
+                <Button.Orange
+                  onClick={(): void =>
+                    setHaltValue(
+                      Math.min(haltValue + haltIncrementSize, records.length)
+                    )
+                  }
+                >
+                  {attachmentsText.fetchNextAttachments()}
+                </Button.Orange>
+              </div>
+            )
+          ) : (
+            <AttachmentGallery
+              attachments={attachmentsRef?.current?.attachments ?? []}
+              isComplete={fetchedCount.current === records.length}
+              scale={scale}
+              onChange={(attachment, index): void =>
+                void attachments?.related[index].set(`attachment`, attachment)
+              }
+              onFetchMore={
+                attachments === undefined || handleFetch === undefined || halt
+                  ? undefined
+                  : async (): Promise<void> =>
+                      handleFetch?.(fetchedCount.current).then(f.void)
+              }
+            />
+          )}
+        </Dialog>
+      )}
+    </>
+  );
+}

specifyweb/frontend/js_src/lib/components/Attachments/index.tsx

@@ -13,6 +13,7 @@ import { commonText } from '../../localization/common';
 import { schemaText } from '../../localization/schema';
 import { f } from '../../utils/functools';
 import { filterArray } from '../../utils/types';
+import { replaceItem } from '../../utils/utils';
 import { Container, H2 } from '../Atoms';
 import { className } from '../Atoms/className';
 import { Input, Label, Select } from '../Atoms/Form';
@@ -47,7 +48,7 @@ export const tablesWithAttachments = f.store(() =>
   )
 );
 
-const defaultScale = 10;
+export const defaultAttachmentScale = 10;
 const minScale = 4;
 const maxScale = 50;
 const defaultSortOrder = '-timestampCreated';
@@ -124,7 +125,7 @@ function Attachments(): JSX.Element {
     false
   );
 
-  const [scale = defaultScale, setScale] = useCachedState(
+  const [scale = defaultAttachmentScale, setScale] = useCachedState(
     'attachments',
     'scale'
   );
@@ -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}
       />