Implement attachment viewer gallery in record sets

CarolineDenis · maxpatiiuk · commit e1bb3805ecfb · 2023-04-27T09:43:42.000-05:00
diff --git a/specifyweb/frontend/js_src/lib/components/Attachments/Gallery.tsx b/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={
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,147 @@
+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]),
+    true
+  );
+
+  /*
+   * 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={
+            attachments?.attachments === undefined
+              ? attachmentsText.attachments()
+              : commonText.countLine({
+                  resource: attachmentsText.attachments(),
+                  count: attachments.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={attachments?.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 (): void =>
+                      handleFetch?.(fetchedCount.current).then(f.void)
+              }
+            />
+          )}
+        </Dialog>
+      )}
+    </>
+  );
+}
diff --git a/specifyweb/frontend/js_src/lib/components/Attachments/index.tsx b/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}
       />
diff --git a/specifyweb/frontend/js_src/lib/components/FormSliders/RecordSelectorFromIds.tsx b/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';
@@ -45,6 +47,7 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
   onAdd: handleAdd,
   onClone: handleClone,
   onDelete: handleDelete,
+  onFetch: handleFetch,
   ...rest
 }: Omit<RecordSelectorProps<SCHEMA>, 'index' | 'records'> & {
   /*
@@ -69,6 +72,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>
@@ -183,6 +189,9 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
         recordSetTable: schema.models.RecordSet.label,
       })
     : commonText.delete();
+
+  const hasAttachments = tablesWithAttachments().includes(model);
+
   return (
     <>
       <ResourceView
@@ -191,13 +200,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 +216,6 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
                   onClick={handleAdding}
                 />
               ) : undefined}
-
               {typeof handleRemove === 'function' && canRemove ? (
                 <DataEntry.Remove
                   aria-label={removeLabel}
@@ -218,15 +224,16 @@ 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 && (
+                <RecordSetAttachments records={records} onFetch={handleFetch} />
+              )}
               {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);
