@hed-hog/contact 0.0.303 → 0.0.305

package/hedhog/frontend/app/person/_components/person-field-with-create.tsx.ejs

@@ -1,14 +1,7 @@
 'use client';
 
 import { Button } from '@/components/ui/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import {
   Form,
   FormControl,
@@ -18,12 +11,6 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
 import {
   Select,
   SelectContent,
@@ -40,16 +27,10 @@ import {
 } from '@/components/ui/sheet';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { ChevronsUpDown, Plus, X } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Controller,
-  FieldValues,
-  Path,
-  UseFormReturn,
-  useForm,
-} from 'react-hook-form';
+import { FieldValues, Path, UseFormReturn, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 type PersonOption = {
@@ -103,9 +84,10 @@ function usePersonFieldWithCreateTranslations() {
     // Filter values to only include types compatible with next-intl
     const filteredValues = values
       ? Object.fromEntries(
-          Object.entries(values).filter(
-            ([_, v]) => typeof v === 'string' || typeof v === 'number'
-          )
+          Object.entries(values).filter(([key, v]) => {
+            void key;
+            return typeof v === 'string' || typeof v === 'number';
+          })
         )
       : undefined;
     if (tRoot.has(contactKey)) {
@@ -574,23 +556,12 @@ export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
 }) {
   const { request } = useApp();
   const t = usePersonFieldWithCreateTranslations();
-  const [personOpen, setPersonOpen] = useState(false);
-  const [personSearch, setPersonSearch] = useState('');
-  const [debouncedPersonSearch, setDebouncedPersonSearch] = useState('');
   const [createPersonOpen, setCreatePersonOpen] = useState(false);
   const [selectedPersonLabel, setSelectedPersonLabel] =
     useState(initialSelectedLabel);
   const parentScrollContainerRef = useRef<HTMLElement | null>(null);
   const parentScrollTopRef = useRef(0);
 
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setDebouncedPersonSearch(personSearch);
-    }, 300);
-
-    return () => clearTimeout(timeout);
-  }, [personSearch]);
-
   useEffect(() => {
     setSelectedPersonLabel(initialSelectedLabel);
   }, [initialSelectedLabel]);
@@ -638,187 +609,83 @@ export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
     setTimeout(restore, 120);
   };
 
-  const { data: personOptionsData = [], isLoading: isLoadingPersons } =
-    useQuery<PersonOption[]>({
-      queryKey: [
-        'person-autocomplete-generic',
-        entityLabel,
-        debouncedPersonSearch,
-        personTypeFilter,
-      ],
-      queryFn: async () => {
-        const params = new URLSearchParams();
-        params.set('page', '1');
-        params.set('pageSize', '20');
-        if (personTypeFilter !== 'all') {
-          params.set('type', personTypeFilter);
-        }
-        if (debouncedPersonSearch.trim()) {
-          params.set('search', debouncedPersonSearch.trim());
-        }
-
-        const response = await request<
-          PaginatedResponse<PersonOption> | PersonOption[]
-        >({
-          url: `/person?${params.toString()}`,
-          method: 'GET',
-        });
-
-        const payload = response?.data;
-        if (Array.isArray(payload)) {
-          return payload as PersonOption[];
-        }
-
-        if (payload && 'data' in payload && Array.isArray(payload.data)) {
-          return payload.data as PersonOption[];
-        }
-
-        return [];
-      },
-      placeholderData: (old) => old ?? [],
-    });
-
   const parseFieldValue = (personId: string | number) =>
     valueType === 'number' ? Number(personId) : String(personId);
 
-  const fieldState = form.getFieldState(name, form.formState);
-
   return (
     <>
-      <div className="grid gap-2">
-        <Label
-          data-error={!!fieldState.error}
-          className="data-[error=true]:text-destructive"
-        >
-          {label}
-        </Label>
-        <Controller
-          control={form.control}
-          name={name}
-          render={({ field }) => {
-            const hasValue =
-              field.value !== undefined &&
-              field.value !== null &&
-              String(field.value).length > 0;
-
-            return (
-              <div className="flex w-full min-w-0 items-center gap-2">
-                <Popover open={personOpen} onOpenChange={setPersonOpen}>
-                  <PopoverTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      role="combobox"
-                      className="flex-1 min-w-0 justify-between overflow-hidden"
-                    >
-                      <span className="truncate text-left">
-                        {hasValue
-                          ? (personOptionsData.find(
-                              (person) =>
-                                String(person.id) === String(field.value)
-                            )?.name ??
-                            selectedPersonLabel ??
-                            `ID #${String(field.value)}`)
-                          : selectPlaceholder}
-                      </span>
-                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent
-                    className="p-0"
-                    style={{ width: 'var(--radix-popover-trigger-width)' }}
-                  >
-                    <Command shouldFilter={false}>
-                      <CommandInput
-                        placeholder={t('search.placeholder')}
-                        value={personSearch}
-                        onValueChange={setPersonSearch}
-                      />
-                      <CommandList>
-                        <CommandEmpty>
-                          {isLoadingPersons ? (
-                            t('search.loading')
-                          ) : (
-                            <div className="space-y-2 p-2 text-center">
-                              <p className="text-sm text-muted-foreground">
-                                {t('search.noResults')}
-                              </p>
-                              <Button
-                                type="button"
-                                variant="outline"
-                                className="w-full"
-                                onClick={(event) => {
-                                  captureParentScrollPosition(
-                                    event.currentTarget
-                                  );
-                                  setPersonOpen(false);
-                                  setCreatePersonOpen(true);
-                                }}
-                              >
-                                {t('actions.createNew')}
-                              </Button>
-                            </div>
-                          )}
-                        </CommandEmpty>
-                        <CommandGroup>
-                          {personOptionsData.map((person) => (
-                            <CommandItem
-                              key={String(person.id)}
-                              value={`${person.name}-${person.id}`}
-                              onSelect={() => {
-                                field.onChange(parseFieldValue(person.id));
-                                setSelectedPersonLabel(person.name);
-                                setPersonOpen(false);
-                              }}
-                            >
-                              {person.name}
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      </CommandList>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
-
-                {hasValue ? (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon"
-                    className="shrink-0"
-                    onClick={() => {
-                      field.onChange(valueType === 'number' ? null : '');
-                      setPersonSearch('');
-                      setSelectedPersonLabel('');
-                      setPersonOpen(false);
-                    }}
-                    aria-label={t('actions.clearSelection')}
-                  >
-                    <X className="h-4 w-4" />
-                  </Button>
-                ) : null}
-
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="icon"
-                  className="shrink-0"
-                  onClick={(event) => {
-                    captureParentScrollPosition(event.currentTarget);
-                    setPersonOpen(false);
-                    setCreatePersonOpen(true);
-                  }}
-                  aria-label={t('actions.createEntityAria', { entityLabel })}
-                >
-                  <Plus className="h-4 w-4" />
-                </Button>
-              </div>
-            );
+      <div className="flex w-full items-end gap-2">
+        <div className="min-w-0 flex-1">
+          <EntityPicker<PersonOption, TFieldValues>
+            form={form}
+            name={name}
+            label={label}
+            placeholder={selectPlaceholder}
+            entityLabel={entityLabel}
+            valueType={valueType}
+            initialSelectedLabel={selectedPersonLabel}
+            searchPlaceholder={t('search.placeholder')}
+            emptyStateDescription={t('search.noResults')}
+            loadingLabel={t('search.loading')}
+            showCreateButton={false}
+            clearable
+            loadOptions={async ({ page, pageSize, search }) => {
+              const params = new URLSearchParams();
+              params.set('page', String(page));
+              params.set('pageSize', String(pageSize));
+
+              if (personTypeFilter !== 'all') {
+                params.set('type', personTypeFilter);
+              }
+
+              if (search.trim()) {
+                params.set('search', search.trim());
+              }
+
+              const response = await request<
+                PaginatedResponse<PersonOption> | PersonOption[]
+              >({
+                url: `/person?${params.toString()}`,
+                method: 'GET',
+              });
+
+              const payload = response?.data;
+              if (Array.isArray(payload)) {
+                return {
+                  items: payload as PersonOption[],
+                  hasMore: false,
+                };
+              }
+
+              const items = Array.isArray(payload?.data) ? payload.data : [];
+
+              return {
+                items,
+                hasMore: items.length >= pageSize,
+              };
+            }}
+            getOptionValue={(person) => person.id}
+            getOptionLabel={(person) => person.name}
+            onChange={(value, option) => {
+              void value;
+              setSelectedPersonLabel(option?.name ?? '');
+            }}
+          />
+        </div>
+
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="h-10 w-10 shrink-0"
+          onClick={(event) => {
+            captureParentScrollPosition(event.currentTarget);
+            setCreatePersonOpen(true);
           }}
-        />
-        {fieldState.error?.message ? (
-          <p className="text-destructive text-sm">{fieldState.error.message}</p>
-        ) : null}
+          aria-label={t('actions.createEntityAria', { entityLabel })}
+        >
+          <Plus className="h-4 w-4" />
+        </Button>
       </div>
 
       <CreatePersonSheet
@@ -839,7 +706,6 @@ export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
             shouldTouch: true,
           });
           setSelectedPersonLabel(person.name);
-          setPersonSearch(person.name);
           setCreatePersonOpen(false);
         }}
       />