Implement attachment viewer gallery in record sets

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

@@ -62,7 +62,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

@@ -29,7 +29,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;
   readonly onClick?: (attachment: SerializedResource<Attachment>) => void;
 }): JSX.Element {
   const containerRef = React.useRef<HTMLElement | null>(null);
@@ -63,6 +66,7 @@ export function AttachmentGallery({
   const [openIndex, setOpenIndex] = React.useState<number | undefined>(
     undefined
   );
+
   const [related, setRelated] = React.useState<
     RA<SpecifyResource<AnySchema> | undefined>
   >([]);
@@ -129,7 +133,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/Preview.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { useAsyncState } from '../../hooks/useAsyncState';
 import type { SerializedResource } from '../DataModel/helperTypes';
 import type { Attachment } from '../DataModel/types';
-import { loadingGif } from '../Molecules';
 import type { AttachmentThumbnail } from './attachments';
 import { fetchThumbnail } from './attachments';
 
@@ -37,23 +36,23 @@ export function AttachmentPreview({
 export function Thumbnail({
   attachment,
   thumbnail,
+  className,
 }: {
   readonly attachment: SerializedResource<Attachment>;
   readonly thumbnail: AttachmentThumbnail | undefined;
-}): JSX.Element {
-  return thumbnail === undefined ? (
-    loadingGif
-  ) : (
+  readonly className?: string;
+}): JSX.Element | null {
+  return thumbnail === undefined ? null : (
     <img
       alt={
         typeof attachment.title === 'string' && attachment.title.length > 0
           ? attachment.title
           : thumbnail.alt
       }
       className={`
-        max-h-full max-w-full border-2 border-white object-contain
-        dark:border-black
-      `}
+        ${className}
+          max-h-full max-w-full border-2 border-white object-contain
+          dark:border-black`}
       src={thumbnail.src}
       style={{
         width: `${thumbnail.width}px`,

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

@@ -0,0 +1,154 @@
+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, dialogClassNames } 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(async (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 attachments = await Promise.all(
+        filterArray(relatedAttachmentRecords.flat()).map(
+          async (collectionObjectAttachment) => ({
+            attachment: await collectionObjectAttachment
+              .rgetPromise('attachment')
+              .then((resource) => serializeResource(resource)),
+            related: collectionObjectAttachment,
+          })
+        )
+      );
+
+      return {
+        attachments: attachments.map(({ attachment }) => attachment),
+        related: attachments.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(39);
+  const halt =
+    attachments?.attachments.length === 0 && records.length >= haltValue;
+
+  const [scale = defaultAttachmentScale] = useCachedState(
+    'attachments',
+    'scale'
+  );
+
+  return (
+    <>
+      <Button.Icon
+        disabled={attachments === undefined}
+        icon="photos"
+        title="attachments"
+        onClick={handleShowAttachments}
+      />
+      {showAttachments && (
+        <Dialog
+          buttons={
+            <Button.DialogClose>{commonText.close()}</Button.DialogClose>
+          }
+          className={{
+            container: dialogClassNames.wideContainer,
+          }}
+          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.Warning
+                  onClick={(): void =>
+                    setHaltValue(
+                      Math.min(haltValue + haltIncrementSize, records.length)
+                    )
+                  }
+                >
+                  {attachmentsText.fetchNextAttachments()}
+                </Button.Warning>
+              </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 { DialogContext } from '../Atoms/Button';
 import { className } from '../Atoms/className';
@@ -49,7 +50,7 @@ export const tablesWithAttachments = f.store(() =>
   )
 );
 
-export const defaultScale = 10;
+export const defaultAttachmentScale = 10;
 const minScale = 4;
 const maxScale = 50;
 const defaultSortOrder = '-timestampCreated';
@@ -136,7 +137,7 @@ function Attachments({
     false
   );
 
-  const [scale = defaultScale, setScale] = useCachedState(
+  const [scale = defaultAttachmentScale, setScale] = useCachedState(
     'attachments',
     'scale'
   );
@@ -257,10 +258,13 @@ function Attachments({
         }
         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,
+              })
         }
         onClick={onClick}
         onFetchMore={collection === undefined ? undefined : fetchMore}

specifyweb/frontend/js_src/lib/components/FormSliders/AttachmentsCollection.tsx

@@ -8,7 +8,7 @@ import type { RA } from '../../utils/types';
 import { filterArray } from '../../utils/types';
 import { Button } from '../Atoms/Button';
 import { icons } from '../Atoms/Icons';
-import { defaultScale } from '../Attachments';
+import { defaultAttachmentScale } from '../Attachments';
 import { AttachmentGallery } from '../Attachments/Gallery';
 import { serializeResource } from '../DataModel/helpers';
 import type { AnySchema, SerializedResource } from '../DataModel/helperTypes';
@@ -27,7 +27,10 @@ export function AttachmentsCollection({
   const [showAllAttachments, handleOpenAttachments, handleCloseAttachments] =
     useBooleanState();
 
-  const [scale = defaultScale] = useCachedState('attachments', 'scale');
+  const [scale = defaultAttachmentScale] = useCachedState(
+    'attachments',
+    'scale'
+  );
 
   const attachments: RA<SerializedResource<Attachment>> = filterArray(
     Array.from(collection.models, (model) => {

specifyweb/frontend/js_src/lib/components/FormSliders/RecordSelectorFromIds.tsx

@@ -9,6 +9,8 @@ import type { RA } from '../../utils/types';
 import { removeItem } from '../../utils/utils';
 import { Button } from '../Atoms/Button';
 import { DataEntry } from '../Atoms/DataEntry';
+import { tablesWithAttachments } from '../Attachments';
+import { RecordSetAttachments } from '../Attachments/RecordSetAttachment';
 import type { AnySchema } from '../DataModel/helperTypes';
 import type { SpecifyResource } from '../DataModel/legacyTypes';
 import { schema } from '../DataModel/schema';
@@ -46,6 +48,7 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
   onAdd: handleAdd,
   onClone: handleClone,
   onDelete: handleDelete,
+  onFetch: handleFetch,
   ...rest
 }: Omit<RecordSelectorProps<SCHEMA>, 'index' | 'records'> & {
   /*
@@ -70,6 +73,9 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
   readonly onClone:
     | ((newResource: SpecifyResource<SCHEMA>) => void)
     | undefined;
+  readonly onFetch?: (
+    index: number
+  ) => Promise<RA<number | undefined> | undefined>;
 }): JSX.Element | null {
   const [records, setRecords] = React.useState<
     RA<SpecifyResource<SCHEMA> | undefined>
@@ -176,6 +182,8 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
       })
     : commonText.delete();
 
+  const hasAttachments = tablesWithAttachments().includes(model);
+
   return (
     <>
       <ResourceView
@@ -189,7 +197,6 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
                   !isDependent && dialog !== false ? resource : undefined
                 }
               />
-
               {hasTablePermission(
                 model.name,
                 isDependent ? 'create' : 'read'
@@ -201,7 +208,6 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
                   onClick={handleAdding}
                 />
               ) : undefined}
-
               {typeof handleRemove === 'function' && canRemove ? (
                 <DataEntry.Remove
                   aria-label={removeLabel}
@@ -210,15 +216,16 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
                   onClick={(): void => handleRemove('minusButton')}
                 />
               ) : undefined}
-
               {typeof newResource === 'object' && handleAdd !== undefined ? (
                 <p className="flex-1">{formsText.creatingNewRecord()}</p>
               ) : (
                 <span
                   className={`flex-1 ${dialog === false ? '-ml-2' : '-ml-4'}`}
                 />
               )}
-
+              {hasAttachments && (
+                <RecordSetAttachments records={records} onFetch={handleFetch} />
+              )}
               {specifyNetworkBadge}
             </div>
             {totalCount > 1 && <div>{slider}</div>}