feat: bulk add fields (#1683)

## Demo ![CleanShot 2025-03-04 at 02 17 47](https://github.com/user-attachments/assets/2cffaee3-9933-49e9-bdab-eadfd4c35030) --------- Co-authored-by: Lucas Smith <me@lucasjamessmith.me>
2025-11-12 07:43:16 +10:00 · 2025-05-14 19:35:32 +00:00
parent 9594e1fee8
commit 99b0ad574e
6 changed files with 153 additions and 62 deletions
--- a/apps/remix/app/components/embed/authoring/configure-fields-view.tsx
+++ b/apps/remix/app/components/embed/authoring/configure-fields-view.tsx
@ -173,34 +173,59 @@ export const ConfigureFieldsView = ({
  });

  const onFieldCopy = useCallback(
-    (event?: KeyboardEvent | null, options?: { duplicate?: boolean }) => {
-      const { duplicate = false } = options ?? {};
+    (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
+      const { duplicate = false, duplicateAll = false } = options ?? {};

      if (lastActiveField) {
        event?.preventDefault();

-        if (!duplicate) {
-          setFieldClipboard(lastActiveField);
+        if (duplicate) {
+          const newField: TConfigureFieldsFormSchema['fields'][0] = {
+            ...structuredClone(lastActiveField),
+            nativeId: undefined,
+            formId: nanoid(12),
+            signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
+            recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
+            pageX: lastActiveField.pageX + 3,
+            pageY: lastActiveField.pageY + 3,
+          };

-          toast({
-            title: 'Copied field',
-            description: 'Copied field to clipboard',
+          append(newField);
+
+          return;
+        }
+
+        if (duplicateAll) {
+          const pages = Array.from(document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR));
+
+          pages.forEach((_, index) => {
+            const pageNumber = index + 1;
+
+            if (pageNumber === lastActiveField.pageNumber) {
+              return;
+            }
+
+            const newField: TConfigureFieldsFormSchema['fields'][0] = {
+              ...structuredClone(lastActiveField),
+              nativeId: undefined,
+              formId: nanoid(12),
+              signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
+              recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
+              pageNumber,
+            };
+
+            append(newField);
          });

          return;
        }

-        const newField: TConfigureFieldsFormSchema['fields'][0] = {
-          ...structuredClone(lastActiveField),
-          nativeId: undefined,
-          formId: nanoid(12),
-          signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
-          recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
-          pageX: lastActiveField.pageX + 3,
-          pageY: lastActiveField.pageY + 3,
-        };
+        setFieldClipboard(lastActiveField);

-        append(newField);
+        toast({
+          title: 'Copied field',
+          description: 'Copied field to clipboard',
+        });
      }
    },
    [append, lastActiveField, selectedRecipient?.email, selectedRecipient?.id, toast],
@ -533,6 +558,7 @@ export const ConfigureFieldsView = ({
                          onMove={(node) => onFieldMove(node, index)}
                          onRemove={() => remove(index)}
                          onDuplicate={() => onFieldCopy(null, { duplicate: true })}
+                          onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
                          onFocus={() => setLastActiveField(field)}
                          onBlur={() => setLastActiveField(null)}
                          onAdvancedSettings={() => {
--- a/apps/remix/app/components/tables/templates-table-action-dropdown.tsx
+++ b/apps/remix/app/components/tables/templates-table-action-dropdown.tsx
@ -69,8 +69,6 @@ export const TemplatesTableActionDropdown = ({
    ? `${templateRootPath}/f/${row.folderId}/${row.id}/edit`
    : `${templateRootPath}/${row.id}/edit`;

-  
-
  return (
    <DropdownMenu>
      <DropdownMenuTrigger data-testid="template-table-action-btn">
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@ -400,35 +400,60 @@ export const AddFieldsFormPartial = ({
  );

  const onFieldCopy = useCallback(
-    (event?: KeyboardEvent | null, options?: { duplicate?: boolean }) => {
-      const { duplicate = false } = options ?? {};
+    (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
+      const { duplicate = false, duplicateAll = false } = options ?? {};

      if (lastActiveField) {
        event?.preventDefault();

-        if (!duplicate) {
-          setFieldClipboard(lastActiveField);
+        if (duplicate) {
+          const newField: TAddFieldsFormSchema['fields'][0] = {
+            ...structuredClone(lastActiveField),
+            nativeId: undefined,
+            formId: nanoid(12),
+            signerEmail: selectedSigner?.email ?? lastActiveField.signerEmail,
+            pageX: lastActiveField.pageX + 3,
+            pageY: lastActiveField.pageY + 3,
+          };

-          toast({
-            title: 'Copied field',
-            description: 'Copied field to clipboard',
+          append(newField);
+
+          return;
+        }
+
+        if (duplicateAll) {
+          const pages = Array.from(document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR));
+
+          pages.forEach((_, index) => {
+            const pageNumber = index + 1;
+
+            if (pageNumber === lastActiveField.pageNumber) {
+              return;
+            }
+
+            const newField: TAddFieldsFormSchema['fields'][0] = {
+              ...structuredClone(lastActiveField),
+              nativeId: undefined,
+              formId: nanoid(12),
+              signerEmail: selectedSigner?.email ?? lastActiveField.signerEmail,
+              pageNumber,
+            };
+
+            append(newField);
          });

          return;
        }

-        const newField: TAddFieldsFormSchema['fields'][0] = {
-          ...structuredClone(lastActiveField),
-          formId: nanoid(12),
-          signerEmail: selectedSigner?.email ?? lastActiveField.signerEmail,
-          pageX: lastActiveField.pageX + 3,
-          pageY: lastActiveField.pageY + 3,
-        };
+        setFieldClipboard(lastActiveField);

-        append(newField);
+        toast({
+          title: 'Copied field',
+          description: 'Copied field to clipboard',
+        });
      }
    },
-    [append, lastActiveField, selectedSigner?.email, toast],
+    [append, lastActiveField, selectedSigner?.email, selectedSigner?.id, toast],
  );

  const onFieldPaste = useCallback(
@ -641,6 +666,7 @@ export const AddFieldsFormPartial = ({
                      onMove={(options) => onFieldMove(options, index)}
                      onRemove={() => remove(index)}
                      onDuplicate={() => onFieldCopy(null, { duplicate: true })}
+                      onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
                      onAdvancedSettings={() => {
                        setCurrentField(field);
                        handleAdvancedSettings();
--- a/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx
+++ b/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx
@ -311,6 +311,7 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
              />
            ))
            .otherwise(() => null)}
+
          {errors.length > 0 && (
            <div className="mt-4">
              <ul>
@ -323,6 +324,7 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
            </div>
          )}
        </DocumentFlowFormContainerContent>
+
        <DocumentFlowFormContainerFooter className="mt-auto">
          <DocumentFlowFormContainerActions
            goNextLabel={msg`Save`}
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@ -1,7 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { FieldType } from '@prisma/client';
-import { CopyPlus, Settings2, Trash } from 'lucide-react';
+import { CopyPlus, Settings2, SquareStack, Trash } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Rnd } from 'react-rnd';

@ -29,6 +31,7 @@ export type FieldItemProps = {
  onMove?: (_node: HTMLElement) => void;
  onRemove?: () => void;
  onDuplicate?: () => void;
+  onDuplicateAllPages?: () => void;
  onAdvancedSettings?: () => void;
  onFocus?: () => void;
  onBlur?: () => void;
@ -55,15 +58,18 @@ export const FieldItem = ({
  onMove,
  onRemove,
  onDuplicate,
+  onDuplicateAllPages,
+  onAdvancedSettings,
  onFocus,
  onBlur,
-  onAdvancedSettings,
  recipientIndex = 0,
  hasErrors,
  active,
  onFieldActivate,
  onFieldDeactivate,
 }: FieldItemProps) => {
+  const { _ } = useLingui();
+
  const [coords, setCoords] = useState({
    pageX: 0,
    pageY: 0,
@ -304,6 +310,7 @@ export const FieldItem = ({
          <div className="group flex items-center justify-evenly gap-x-1 rounded-md border bg-gray-900 p-0.5">
            {advancedField && (
              <button
+                title={_(msg`Advanced settings`)}
                className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
                onClick={onAdvancedSettings}
                onTouchEnd={onAdvancedSettings}
@ -313,6 +320,7 @@ export const FieldItem = ({
            )}

            <button
+              title={_(msg`Duplicate`)}
              className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
              onClick={onDuplicate}
              onTouchEnd={onDuplicate}
@ -321,6 +329,16 @@ export const FieldItem = ({
            </button>

            <button
+              title={_(msg`Duplicate on all pages`)}
+              className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
+              onClick={onDuplicateAllPages}
+              onTouchEnd={onDuplicateAllPages}
+            >
+              <SquareStack className="h-3 w-3" />
+            </button>
+
+            <button
+              title={_(msg`Remove`)}
              className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
              onClick={onRemove}
              onTouchEnd={onRemove}
--- a/packages/ui/primitives/template-flow/add-template-fields.tsx
+++ b/packages/ui/primitives/template-flow/add-template-fields.tsx
@ -139,44 +139,64 @@ export const AddTemplateFieldsFormPartial = ({
  );

  const onFieldCopy = useCallback(
-    (event?: KeyboardEvent | null, options?: { duplicate?: boolean }) => {
-      const { duplicate = false } = options ?? {};
+    (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
+      const { duplicate = false, duplicateAll = false } = options ?? {};

      if (lastActiveField) {
        event?.preventDefault();

-        if (!duplicate) {
-          setFieldClipboard(lastActiveField);
+        if (duplicate) {
+          const newField: TAddTemplateFieldsFormSchema['fields'][0] = {
+            ...structuredClone(lastActiveField),
+            nativeId: undefined,
+            formId: nanoid(12),
+            signerEmail: selectedSigner?.email ?? lastActiveField.signerEmail,
+            signerId: selectedSigner?.id ?? lastActiveField.signerId,
+            signerToken: selectedSigner?.token ?? lastActiveField.signerToken,
+            pageX: lastActiveField.pageX + 3,
+            pageY: lastActiveField.pageY + 3,
+          };

-          toast({
-            title: 'Copied field',
-            description: 'Copied field to clipboard',
+          append(newField);
+
+          return;
+        }
+
+        if (duplicateAll) {
+          const pages = Array.from(document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR));
+
+          pages.forEach((_, index) => {
+            const pageNumber = index + 1;
+
+            if (pageNumber === lastActiveField.pageNumber) {
+              return;
+            }
+
+            const newField: TAddTemplateFieldsFormSchema['fields'][0] = {
+              ...structuredClone(lastActiveField),
+              nativeId: undefined,
+              formId: nanoid(12),
+              signerEmail: selectedSigner?.email ?? lastActiveField.signerEmail,
+              signerId: selectedSigner?.id ?? lastActiveField.signerId,
+              signerToken: selectedSigner?.token ?? lastActiveField.signerToken,
+              pageNumber,
+            };
+
+            append(newField);
          });

          return;
        }

-        const newField: TAddTemplateFieldsFormSchema['fields'][0] = {
-          ...structuredClone(lastActiveField),
-          formId: nanoid(12),
-          signerEmail: selectedSigner?.email ?? lastActiveField.signerEmail,
-          signerId: selectedSigner?.id ?? lastActiveField.signerId,
-          signerToken: selectedSigner?.token ?? lastActiveField.signerToken,
-          pageX: lastActiveField.pageX + 3,
-          pageY: lastActiveField.pageY + 3,
-        };
+        setFieldClipboard(lastActiveField);

-        append(newField);
+        toast({
+          title: 'Copied field',
+          description: 'Copied field to clipboard',
+        });
      }
    },
-    [
-      append,
-      lastActiveField,
-      selectedSigner?.email,
-      selectedSigner?.id,
-      selectedSigner?.token,
-      toast,
-    ],
+    [append, lastActiveField, selectedSigner?.email, selectedSigner?.id, toast],
  );

  const onFieldPaste = useCallback(
@ -543,6 +563,7 @@ export const AddTemplateFieldsFormPartial = ({
                    onMove={(options) => onFieldMove(options, index)}
                    onRemove={() => remove(index)}
                    onDuplicate={() => onFieldCopy(null, { duplicate: true })}
+                    onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
                    onAdvancedSettings={() => {
                      setCurrentField(field);
                      handleAdvancedSettings();