Add Loadmore and search for some more auto inputs

jadewale · jadewale · commit 619964851b35 · 2025-02-03T17:33:47.000-05:00
diff --git a/packages/react/cypress/support/auto.tsx b/packages/react/cypress/support/auto.tsx
@@ -24,7 +24,7 @@ const ONLY_RUN_SUITES = {
     "AutoForm - Default model field values",
     "AutoForm - FindBy object parameters",
     "AutoForm - Global actions",
-    // "AutoForm - HasManyThrough fields",
+    "AutoForm - HasManyThrough fields",
     "AutoForm - Dynamic form input changes",
     "AutoForm - Dynamic form input changes - FindBy object parameters",
     "AutoForm - Dynamic form input changes - Global actions",
diff --git a/packages/react/src/auto/shadcn/inputs/ShadcnAutoFileInput.tsx b/packages/react/src/auto/shadcn/inputs/ShadcnAutoFileInput.tsx
@@ -38,8 +38,6 @@ export const makeShadcnAutoFileInput = ({ Input, Label }: Pick<ShadcnElements, "
         if (message) actionHintParts.push(message);
       }
 
-      console.log(actionHintParts, "actionHintParts");
-
       return (
         <div>
           <Label>
diff --git a/packages/react/src/auto/shadcn/inputs/ShadcnAutoInput.tsx b/packages/react/src/auto/shadcn/inputs/ShadcnAutoInput.tsx
@@ -17,6 +17,8 @@ import { makeShadcnAutoStringInput } from "./ShadcnAutoStringInput.js";
 import { makeShadcnAutoRichTextInput } from "./ShadcnautoRichTextInput.js";
 import { makeShadcnAutoBelongsToInput } from "./relationships/ShadcnAutoBelongsToInput.js";
 import { makeShadcnAutoHasManyInput } from "./relationships/ShadcnAutoHasManyInput.js";
+import { makeShadcnAutoHasManyThroughInput } from "./relationships/ShadcnAutoHasManyThroughInput.js";
+import { makeShadcnAutoHasOneInput } from "./relationships/ShadcnAutoHasOneInput.js";
 export const makeShadcnAutoInput = (
   elements: Pick<
     ShadcnElements,
@@ -49,12 +51,14 @@ export const makeShadcnAutoInput = (
   const AutoBooleanInput = makeShadcnAutoBooleanInput(elements);
   const AutoBelongsToInput = makeShadcnAutoBelongsToInput(elements);
   const AutoHasManyInput = makeShadcnAutoHasManyInput(elements);
+  const AutoHasOneInput = makeShadcnAutoHasOneInput(elements);
   const AutoRolesInput = makeShadcnAutoRolesInput(elements);
   const AutoEnumInput = makeShadcnAutoEnumInput(elements);
   const AutoDateTimePicker = makeShadcnAutoDateTimePicker(elements);
   const AutoJSONInput = makeShadcnAutoJSONInput(elements);
   const AutoRichTextInput = makeShadcnAutoRichTextInput(elements);
   const AutoFileInput = makeShadcnAutoFileInput(elements);
+  const AutoHasManyThroughInput = makeShadcnAutoHasManyThroughInput(elements);
 
   const AutoInput = autoInput(function AutoInput(props: { field: string; label?: string }) {
     const { metadata } = useFieldMetadata(props.field);
@@ -79,15 +83,13 @@ export const makeShadcnAutoInput = (
       case FieldType.RoleAssignments:
         return <AutoRolesInput {...props} />;
       case FieldType.HasOne:
-        return null;
+        return <AutoHasOneInput {...props} />;
       case FieldType.RichText:
         return <AutoRichTextInput {...props} />;
       case FieldType.File:
         return <AutoFileInput {...props} />;
       case FieldType.HasMany:
         return <AutoHasManyInput {...props} />;
-      case FieldType.HasManyThrough:
-        return null;
       case FieldType.EncryptedString:
         return <AutoEncryptedStringInput {...props} />;
       case FieldType.BelongsTo:
@@ -96,6 +98,8 @@ export const makeShadcnAutoInput = (
         return <AutoPasswordInput {...props} />;
       case FieldType.Boolean:
         return <AutoBooleanInput {...props} />;
+      case FieldType.HasManyThrough:
+        return <AutoHasManyThroughInput {...props} />;
       default:
         return <AutoStringInput {...props} />;
     }
diff --git a/packages/react/src/auto/shadcn/inputs/relationships/ShadcnAutoBelongsToInput.tsx b/packages/react/src/auto/shadcn/inputs/relationships/ShadcnAutoBelongsToInput.tsx
@@ -1,8 +1,9 @@
 import { XIcon } from "lucide-react";
-import React from "react";
+import React, { useCallback } from "react";
+import { debounce } from "../../../../utils.js";
 import { autoInput } from "../../../AutoInput.js";
 import { useBelongsToInputController } from "../../../hooks/useBelongsToController.js";
-import { getRecordAsOption, useOptionLabelForField } from "../../../hooks/useRelatedModel.js";
+import { getRecordAsOption, optionRecordsToLoadCount, useOptionLabelForField } from "../../../hooks/useRelatedModel.js";
 import type { AutoRelationshipInputProps } from "../../../interfaces/AutoRelationshipInputProps.js";
 import type { ShadcnElements } from "../../elements.js";
 import { makeShadcnAutoComboInput } from "../ShadcnAutoComboInput.js";
@@ -49,7 +50,6 @@ export const makeShadcnAutoBelongsToInput = ({
   });
 
   function ShadcnAutoBelongsToInput(props: AutoRelationshipInputProps) {
-    //TODO: Implement Load More
     const {
       fieldMetadata: { path, metadata },
       relatedModelOptions: { options, searchFilterOptions, pagination, search, relatedModel },
@@ -92,13 +92,26 @@ export const makeShadcnAutoBelongsToInput = ({
         : onSelectRecord(record); // make single selection
     };
 
+    const handleScrolledToBottom = useCallback(
+      debounce(() => {
+        if (pagination.hasNextPage && options.length >= optionRecordsToLoadCount) {
+          pagination.loadNextPage();
+        }
+      }, 300),
+      [pagination, options.length]
+    );
+
     return (
       <ShadcnComboInput
         {...props}
-        options={options}
+        options={searchFilterOptions}
         path={path}
         metadata={metadata}
+        onChange={search.set}
+        defaultValue={search.value}
         selectedRecordTag={selectedRecordTag}
+        onScrolledToBottom={handleScrolledToBottom}
+        willLoadMoreOptions={pagination.hasNextPage && options.length >= optionRecordsToLoadCount}
         onSelect={onSelect}
         isLoading={isLoading}
         errorMessage={errorMessage}
diff --git a/packages/react/src/auto/shadcn/inputs/relationships/ShadcnAutoHasManyInput.tsx b/packages/react/src/auto/shadcn/inputs/relationships/ShadcnAutoHasManyInput.tsx
@@ -70,13 +70,6 @@ export const makeShadcnAutoHasManyInput = ({
       return selectedRecords.map((record) => record.id).filter((id) => !!id) as string[];
     }, [selectedRecords]);
 
-    const debouncedSearch = useCallback(
-      debounce((value: string) => {
-        search.set(value);
-      }, 400),
-      [search]
-    );
-
     const handleScrolledToBottom = useCallback(
       debounce(() => {
         if (pagination.hasNextPage && options.length >= optionRecordsToLoadCount) {
@@ -92,7 +85,7 @@ export const makeShadcnAutoHasManyInput = ({
         options={searchFilterOptions}
         path={path}
         metadata={metadata}
-        onChange={debouncedSearch}
+        onChange={search.set}
         selectedRecordTag={
           <SelectedRecordTags selectedRecords={selectedRecords} optionLabel={optionLabel} onRemoveRecord={onRemoveRecord} />
         }
diff --git a/packages/react/src/auto/shadcn/inputs/relationships/ShadcnAutoHasManyThroughInput.tsx b/packages/react/src/auto/shadcn/inputs/relationships/ShadcnAutoHasManyThroughInput.tsx
@@ -0,0 +1,107 @@
+import React, { useCallback, useMemo } from "react";
+import { debounce } from "../../../../utils.js";
+import { autoInput } from "../../../AutoInput.js";
+import { useHasManyThroughInputController } from "../../../hooks/useHasManyThroughController.js";
+import { optionRecordsToLoadCount, useOptionLabelForField } from "../../../hooks/useRelatedModel.js";
+import type { AutoRelationshipInputProps } from "../../../interfaces/AutoRelationshipInputProps.js";
+import type { ShadcnElements } from "../../elements.js";
+import { makeShadcnAutoComboInput } from "../ShadcnAutoComboInput.js";
+import { makeSelectedRecordTags } from "./SelectedRelatedRecordTags.js";
+
+export const makeShadcnAutoHasManyThroughInput = ({
+  Badge,
+  Button,
+  Command,
+  CommandItem,
+  CommandInput,
+  Label,
+  CommandList,
+  CommandEmpty,
+  CommandLoading,
+  CommandGroup,
+  Checkbox,
+  ScrollArea,
+}: Pick<
+  ShadcnElements,
+  | "Badge"
+  | "Button"
+  | "Command"
+  | "CommandItem"
+  | "CommandList"
+  | "CommandLoading"
+  | "CommandEmpty"
+  | "CommandGroup"
+  | "CommandInput"
+  | "Label"
+  | "Checkbox"
+  | "ScrollArea"
+>) => {
+  const { SelectedRecordTags } = makeSelectedRecordTags({ Badge, Button });
+
+  const ShadcnComboInput = makeShadcnAutoComboInput({
+    Command,
+    CommandInput,
+    Label,
+    CommandItem,
+    CommandList,
+    CommandLoading,
+    CommandEmpty,
+    CommandGroup,
+    Checkbox,
+    ScrollArea,
+  });
+
+  function ShadcnAutoHasManyThroughInput(props: AutoRelationshipInputProps) {
+    const { field } = props;
+    const {
+      fieldMetadata: { path, metadata },
+      relatedModelOptions: { options, searchFilterOptions, search, pagination, relatedModel },
+      selectedRecords,
+      errorMessage,
+      isLoading,
+      onRemoveRecord,
+      onSelectRecord,
+    } = useHasManyThroughInputController(props);
+
+    const optionLabel = useOptionLabelForField(field, props.optionLabel);
+
+    const selectedRecordIds = useMemo(() => {
+      return selectedRecords.map((record) => record.id).filter((id) => !!id) as string[];
+    }, [selectedRecords]);
+
+    const handleScrolledToBottom = useCallback(
+      debounce(() => {
+        if (pagination.hasNextPage && options.length >= optionRecordsToLoadCount) {
+          pagination.loadNextPage();
+        }
+      }, 300),
+      [pagination, options.length]
+    );
+
+    return (
+      <ShadcnComboInput
+        {...props}
+        options={searchFilterOptions}
+        path={path}
+        metadata={metadata}
+        onChange={search.set}
+        defaultValue={search.value}
+        selectedRecordTag={
+          <SelectedRecordTags selectedRecords={selectedRecords} optionLabel={optionLabel} onRemoveRecord={onRemoveRecord} />
+        }
+        onSelect={onSelectRecord}
+        checkSelected={(id) => {
+          return selectedRecordIds.includes(id);
+        }}
+        allowMultiple
+        onScrolledToBottom={handleScrolledToBottom}
+        willLoadMoreOptions={pagination.hasNextPage && options.length >= optionRecordsToLoadCount}
+        isLoading={isLoading}
+        errorMessage={errorMessage}
+        records={relatedModel.records}
+      />
+    );
+  }
+
+  return autoInput(ShadcnAutoHasManyThroughInput);
+};
diff --git a/packages/react/src/auto/shadcn/inputs/relationships/ShadcnAutoHasOneInput.tsx b/packages/react/src/auto/shadcn/inputs/relationships/ShadcnAutoHasOneInput.tsx
@@ -1,8 +1,9 @@
 import { XIcon } from "lucide-react";
-import React from "react";
+import React, { useCallback } from "react";
+import { debounce } from "../../../../utils.js";
 import { autoInput } from "../../../AutoInput.js";
 import { useHasOneInputController } from "../../../hooks/useHasOneController.js";
-import { getRecordAsOption, useOptionLabelForField } from "../../../hooks/useRelatedModel.js";
+import { getRecordAsOption, optionRecordsToLoadCount, useOptionLabelForField } from "../../../hooks/useRelatedModel.js";
 import type { AutoRelationshipInputProps } from "../../../interfaces/AutoRelationshipInputProps.js";
 import type { ShadcnElements } from "../../elements.js";
 import { makeShadcnAutoComboInput } from "../ShadcnAutoComboInput.js";
@@ -66,19 +67,32 @@ export const makeShadcnAutoHasOneInput = ({
 
     const selectedRecordTag = selectedOption ? (
       <Badge variant={"outline"} key={`selectedRecordTag_${selectedOption.id}`}>
-        <p id={`${selectedOption.id}_${selectedOption.label}`}>{selectedOption.label}</p>
+        <p id={`${selectedOption.id}_${selectedOption.label}`}>{selectedOption.label ?? `id: ${selectedOption.id}`}</p>
         <Button aria-label={`Remove`} onClick={() => selectedRecord && onRemoveRecord(selectedRecord)} variant="ghost" size="icon">
           <XIcon />
         </Button>
       </Badge>
     ) : null;
 
+    const handleScrolledToBottom = useCallback(
+      debounce(() => {
+        if (pagination.hasNextPage && options.length >= optionRecordsToLoadCount) {
+          pagination.loadNextPage();
+        }
+      }, 300),
+      [pagination, options.length]
+    );
+
     return (
       <ShadcnComboInput
         {...props}
-        options={options}
+        options={searchFilterOptions}
         path={path}
         metadata={metadata}
+        onChange={search.set}
+        defaultValue={search.value}
+        onScrolledToBottom={handleScrolledToBottom}
+        willLoadMoreOptions={pagination.hasNextPage && options.length >= optionRecordsToLoadCount}
         selectedRecordTag={selectedRecordTag}
         onSelect={onSelectRecord}
         checkSelected={(id) => selectedRecord?.id === id}

Original file line number	Diff line number	Diff line change
`@@ -38,8 +38,6 @@ export const makeShadcnAutoFileInput = ({ Input, Label }: Pick<ShadcnElements, "`
`38`	`38`	`if (message) actionHintParts.push(message);`
`39`	`39`	`}`
`40`	`40`
`41`		`- console.log(actionHintParts, "actionHintParts");`
`42`		`-`
`43`	`41`	`return (`
`44`	`42`	`<div>`
`45`	`43`	`<Label>`