Implement attachment viewer gallery in record sets

CarolineDenis · maxpatiiuk · commit 082e72c99c53 · 2023-04-26T14:58:52.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,141 @@
+import React from 'react';
+import { RA, filterArray } from '../../utils/types';
+import { SpecifyResource } from '../DataModel/legacyTypes';
+import type { AnySchema } from '../DataModel/helperTypes';
+import { Dialog } from '../Molecules/Dialog';
+import { attachmentsText } from '../../localization/attachments';
+import { useAsyncState } from '../../hooks/useAsyncState';
+import { CollectionObjectAttachment } from '../DataModel/types';
+import { serializeResource } from '../DataModel/helpers';
+import { AttachmentGallery } from './Gallery';
+import { useCachedState } from '../../hooks/useCachedState';
+import { defaultAttachmentScale } from '.';
+import { Button } from '../Atoms/Button';
+import { commonText } from '../../localization/common';
+import { f } from '../../utils/functools';
+import { useBooleanState } from '../../hooks/useBooleanState';
+
+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 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
+      );
+
+      fetchedCount.current = fetchCount === -1 ? records.length : fetchCount;
+
+      const attachements = await Promise.all(
+        filterArray(relatedAttachementRecords.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),
+        count: attachements.length,
+      };
+    }, [records]),
+    true
+  );
+
+  //halt value was added to not scraped all the records for attachment in cases where there is more than 300 and no attachments, the user is able to ask for the next 300 if necessary
+  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"
+        onClick={() => handleShowAttachments()}
+        title="attachments"
+      ></Button.Icon>
+      {showAttachments && (
+        <Dialog
+          buttons={
+            <Button.DialogClose>{commonText.close()}</Button.DialogClose>
+          }
+          header={
+            attachments?.count !== undefined
+              ? commonText.countLine({
+                  resource: attachmentsText.attachments(),
+                  count: attachments.count,
+                })
+              : attachmentsText.attachments()
+          }
+          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 () => 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
@@ -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 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
@@ -20,6 +20,8 @@ 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 { tablesWithAttachments } from '../Attachments';
 
 /**
  * A Wrapper for RecordSelector that allows to specify list of records by their
@@ -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<undefined | RA<number | 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);
