@hed-hog/operations 0.0.328 → 0.0.329

package/hedhog/frontend/app/_components/system-user-select-with-create.tsx.ejs

@@ -1,33 +1,9 @@
 'use client';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import { useApp } from '@hed-hog/next-app-provider';
-import { Check, ChevronsUpDown, Plus, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 export type SystemUserOption = {
   id: number;
@@ -35,7 +11,7 @@ export type SystemUserOption = {
   photoId?: number | null;
 };
 
-type SystemUserSelectWithCreateProps = {
+export type SystemUserSelectWithCreateProps = {
   label: string;
   value: string;
   options: SystemUserOption[];
@@ -53,46 +29,24 @@ type SystemUserSelectWithCreateProps = {
 type UserListPayload = {
   paginate: {
     data: Array<{ id: number; name: string | null; photo_id?: number | null }>;
-    total: number;
     lastPage: number;
     page: number;
-    pageSize: number;
   };
-  stats?: Record<string, unknown>;
 };
 
 const PAGE_SIZE = 10;
 
-function mergeOptions(
-  base: SystemUserOption[],
-  extra: SystemUserOption[]
-): SystemUserOption[] {
-  const byId = new Map<number, SystemUserOption>();
-
-  for (const option of base) {
-    byId.set(option.id, option);
-  }
-
-  for (const option of extra) {
-    byId.set(option.id, option);
-  }
-
-  return Array.from(byId.values());
-}
-
-function parseUserListResponse(payload: UserListPayload): {
-  items: SystemUserOption[];
-  hasMore: boolean;
-} {
+function parseUserListResponse(payload: UserListPayload) {
   const raw = payload?.paginate?.data ?? [];
-  const items = raw.map((u) => ({
-    id: u.id,
-    name: u.name || `#${u.id}`,
-    photoId: u.photo_id ?? null,
-  }));
-  const hasMore =
-    (payload?.paginate?.page ?? 1) < (payload?.paginate?.lastPage ?? 1);
-  return { items, hasMore };
+
+  return {
+    items: raw.map((user) => ({
+      id: user.id,
+      name: user.name || `#${user.id}`,
+      photoId: user.photo_id ?? null,
+    })),
+    hasMore: (payload?.paginate?.page ?? 1) < (payload?.paginate?.lastPage ?? 1),
+  };
 }
 
 function getUserPhotoUrl(photoId?: number | null) {
@@ -129,52 +83,33 @@ export function SystemUserSelectWithCreate({
   const commonT = useTranslations('operations.Common');
   const t = useTranslations('operations.CollaboratorFormPage');
 
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-  const [remoteOptions, setRemoteOptions] = useState<SystemUserOption[]>([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [hasMore, setHasMore] = useState(false);
-  const [isLoadingOptions, setIsLoadingOptions] = useState(false);
-  const [isLoadingMoreOptions, setIsLoadingMoreOptions] = useState(false);
-  const [selectedValueOption, setSelectedValueOption] =
-    useState<SystemUserOption | null>(null);
-
-  const [createOpen, setCreateOpen] = useState(false);
-  const [newName, setNewName] = useState('');
-  const [newEmail, setNewEmail] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [isCreating, setIsCreating] = useState(false);
-
-  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
-  const parentScrollTopRef = useRef(0);
-  const requestIdRef = useRef(0);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setDebouncedSearch(search);
-    }, 300);
-
-    return () => clearTimeout(timeout);
-  }, [search]);
-
-  const loadOwnerOptions = useCallback(
-    async (page: number, searchTerm: string, reset: boolean) => {
-      const requestId = requestIdRef.current + 1;
-      requestIdRef.current = requestId;
-
-      if (reset) {
-        setIsLoadingOptions(true);
-      } else {
-        setIsLoadingMoreOptions(true);
-      }
+  const selectedOption =
+    options.find((option) => String(option.id) === value) ?? null;
 
-      try {
+  return (
+    <EntityPicker<SystemUserOption>
+      label={label}
+      value={value}
+      onChange={(nextValue) => {
+        onChange(nextValue ? String(nextValue) : '');
+      }}
+      placeholder={emptyLabel}
+      emptySelectionLabel={emptyLabel}
+      searchPlaceholder={placeholder}
+      emptyStateDescription={commonT('states.emptyDescription')}
+      createActionLabel={t('actions.createUser')}
+      createTitle={t('actions.createUser')}
+      createDescription={createDescription ?? t('fields.createUserDescription')}
+      clearable
+      allowEmptySelection
+      options={options}
+      initialSelectedLabel={selectedOption?.name ?? ''}
+      loadOptions={async ({ page, pageSize, search }) => {
         const params = new URLSearchParams();
         params.set('page', String(page));
-        params.set('pageSize', String(PAGE_SIZE));
+        params.set('pageSize', String(pageSize || PAGE_SIZE));
 
-        const normalizedSearch = searchTerm.trim();
+        const normalizedSearch = search.trim();
         if (normalizedSearch) {
           params.set('search', normalizedSearch);
         }
@@ -184,477 +119,80 @@ export function SystemUserSelectWithCreate({
           method: 'GET',
         });
 
-        if (requestIdRef.current !== requestId) {
-          return;
-        }
-
-        const parsed = parseUserListResponse(response.data);
-        setCurrentPage(page);
-        setHasMore(parsed.hasMore);
-        setRemoteOptions((current) =>
-          reset ? parsed.items : mergeOptions(current, parsed.items)
-        );
-      } finally {
-        if (requestIdRef.current === requestId) {
-          setIsLoadingOptions(false);
-          setIsLoadingMoreOptions(false);
-        }
+        return parseUserListResponse(response.data);
+      }}
+      pageSize={PAGE_SIZE}
+      getOptionValue={(option) => option.id}
+      getOptionLabel={(option) => option.name}
+      getOptionDescription={(option) => `#${option.id}`}
+      renderOption={({ option }) => (
+        <div className="flex min-w-0 items-center gap-2">
+          <Avatar className="h-7 w-7 shrink-0 border border-border/60 bg-muted">
+            <AvatarImage
+              src={getUserPhotoUrl(option.photoId)}
+              alt={option.name}
+            />
+            <AvatarFallback className="bg-muted text-[11px] font-semibold text-foreground">
+              {getInitials(option.name)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0">
+            <div className="truncate">{option.name}</div>
+            <div className="truncate text-xs text-muted-foreground">
+              #{option.id}
+            </div>
+          </div>
+        </div>
+      )}
+      renderSelectedValue={({ option, label: selectedLabel }) =>
+        option ? (
+          <span className="flex min-w-0 items-center gap-2 text-left">
+            <Avatar className="h-7 w-7 shrink-0 border border-border/60 bg-muted">
+              <AvatarImage
+                src={getUserPhotoUrl(option.photoId)}
+                alt={option.name}
+              />
+              <AvatarFallback className="bg-muted text-[11px] font-semibold text-foreground">
+                {getInitials(option.name)}
+              </AvatarFallback>
+            </Avatar>
+            <span className="min-w-0 truncate">
+              {selectedLabel} (#{option.id})
+            </span>
+          </span>
+        ) : (
+          selectedLabel
+        )
       }
-    },
-    [request]
-  );
-
-  useEffect(() => {
-    void loadOwnerOptions(1, debouncedSearch, true);
-  }, [debouncedSearch, loadOwnerOptions]);
-
-  useEffect(() => {
-    const normalizedValue = value.trim();
-
-    if (!normalizedValue) {
-      setSelectedValueOption(null);
-      return;
-    }
-
-    const matchedOption =
-      options.find((option) => String(option.id) === normalizedValue) ??
-      remoteOptions.find((option) => String(option.id) === normalizedValue) ??
-      null;
-
-    if (matchedOption) {
-      setSelectedValueOption(matchedOption);
-      return;
-    }
-
-    let active = true;
-
-    void request<UserListPayload>({
-      url: `/user/${normalizedValue}`,
-      method: 'GET',
-    })
-      .then((response) => {
-        if (!active) {
-          return;
-        }
-
-        const rawUser = response.data as
-          | { id?: number; name?: string | null; photo_id?: number | null }
-          | undefined;
-        const resolvedOption =
-          rawUser?.id && String(rawUser.id) === normalizedValue
-            ? {
-                id: rawUser.id,
-                name: rawUser.name || `#${rawUser.id}`,
-                photoId: rawUser.photo_id ?? null,
-              }
-            : null;
-
-        if (resolvedOption) {
-          setSelectedValueOption(resolvedOption);
-          setRemoteOptions((current) => mergeOptions(current, [resolvedOption]));
-          return;
-        }
-
-        setSelectedValueOption({
-          id: Number(normalizedValue),
-          name: `#${normalizedValue}`,
-          photoId: null,
-        });
-      })
-      .catch(() => {
-        if (active) {
-          setSelectedValueOption({
-            id: Number(normalizedValue),
-            name: `#${normalizedValue}`,
-            photoId: null,
-          });
-        }
-      });
-
-    return () => {
-      active = false;
-    };
-  }, [options, remoteOptions, request, value]);
-
-  const knownOptions = useMemo(
-    () => mergeOptions(options, remoteOptions),
-    [options, remoteOptions]
-  );
-
-  const listedOptions = useMemo(
-    () => (debouncedSearch.trim() ? remoteOptions : knownOptions),
-    [debouncedSearch, remoteOptions, knownOptions]
-  );
-
-  const selectedOption =
-    knownOptions.find((option) => String(option.id) === value) ??
-    selectedValueOption ??
-    (value ? { id: Number(value), name: `#${value}` } : null);
-
-  const captureParentScrollPosition = (trigger: HTMLElement) => {
-    const parentSheetContent = trigger.closest(
-      '[data-radix-dialog-content]'
-    ) as HTMLElement | null;
-
-    if (!parentSheetContent) {
-      parentScrollContainerRef.current = null;
-      parentScrollTopRef.current = 0;
-      return;
-    }
-
-    parentScrollContainerRef.current = parentSheetContent;
-    parentScrollTopRef.current = parentSheetContent.scrollTop;
-  };
-
-  const restoreParentScrollPosition = () => {
-    const fallbackOpenDialog = (
-      Array.from(
-        document.querySelectorAll(
-          '[data-radix-dialog-content][data-state="open"]'
+      createFields={[
+        {
+          name: 'name',
+          label: t('fields.createUserName'),
+          placeholder: t('placeholders.createUserName'),
+          required: true,
+        },
+        {
+          name: 'email',
+          label: t('fields.createUserEmail'),
+          placeholder: t('placeholders.createUserEmail'),
+          type: 'email',
+          required: true,
+        },
+        {
+          name: 'password',
+          label: t('fields.createUserPassword'),
+          placeholder: t('placeholders.createUserPassword'),
+          type: 'password',
+          required: true,
+        },
+      ]}
+      onCreate={async (values) =>
+        onCreate(
+          values.name?.trim() ?? '',
+          values.email?.trim() ?? '',
+          values.password ?? ''
         )
-      ) as HTMLElement[]
-    ).at(-1);
-
-    const container =
-      parentScrollContainerRef.current &&
-      document.body.contains(parentScrollContainerRef.current)
-        ? parentScrollContainerRef.current
-        : fallbackOpenDialog || null;
-
-    if (!container) {
-      return;
-    }
-
-    const restore = () => {
-      container.scrollTop = parentScrollTopRef.current;
-    };
-
-    requestAnimationFrame(restore);
-    setTimeout(restore, 0);
-    setTimeout(restore, 120);
-  };
-
-  const saveUser = async () => {
-    if (
-      !newName.trim() ||
-      !newEmail.trim() ||
-      !newPassword.trim() ||
-      isCreating
-    ) {
-      return;
-    }
-
-    setIsCreating(true);
-
-    try {
-      const created = await onCreate(
-        newName.trim(),
-        newEmail.trim(),
-        newPassword
-      );
-
-      if (!created) {
-        return;
       }
-
-      setRemoteOptions((current) => mergeOptions([created], current));
-      onChange(String(created.id));
-      setNewName('');
-      setNewEmail('');
-      setNewPassword('');
-      setCreateOpen(false);
-      setOpen(false);
-    } finally {
-      setIsCreating(false);
-    }
-  };
-
-  return (
-    <>
-      <div className="grid gap-2">
-        <Label>{label}</Label>
-
-        <div className="flex w-full min-w-0 items-center gap-2">
-          <Popover
-            open={open}
-            onOpenChange={(nextOpen) => {
-              setOpen(nextOpen);
-
-              if (
-                nextOpen &&
-                !remoteOptions.length &&
-                !isLoadingOptions &&
-                !isLoadingMoreOptions
-              ) {
-                void loadOwnerOptions(1, debouncedSearch, true);
-              }
-
-              if (!nextOpen) {
-                setSearch('');
-              }
-            }}
-          >
-            <PopoverTrigger asChild>
-              <Button
-                type="button"
-                variant="outline"
-                role="combobox"
-                className="h-10 min-w-0 flex-1 justify-between gap-2 overflow-hidden"
-              >
-                <div className="flex min-w-0 items-center gap-2">
-                  {selectedOption ? (
-                    <Avatar className="h-7 w-7 shrink-0 border border-border/60 bg-muted">
-                      <AvatarImage
-                        src={getUserPhotoUrl(selectedOption.photoId)}
-                        alt={selectedOption.name}
-                      />
-                      <AvatarFallback className="bg-muted text-[11px] font-semibold text-foreground">
-                        {getInitials(selectedOption.name)}
-                      </AvatarFallback>
-                    </Avatar>
-                  ) : null}
-                  <span className="truncate text-left">
-                    {selectedOption
-                      ? `${selectedOption.name} (#${selectedOption.id})`
-                      : emptyLabel}
-                  </span>
-                </div>
-                <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={placeholder}
-                  value={search}
-                  onValueChange={(v) => setSearch(v)}
-                />
-                <CommandList>
-                  <CommandEmpty>
-                    <div className="space-y-2 p-2 text-center">
-                      <p className="text-sm text-muted-foreground">
-                        {commonT('states.emptyDescription')}
-                      </p>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        className="w-full"
-                        onClick={(event) => {
-                          captureParentScrollPosition(event.currentTarget);
-                          setNewName(search.trim());
-                          setOpen(false);
-                          setCreateOpen(true);
-                        }}
-                      >
-                        {t('actions.createUser')}
-                      </Button>
-                    </div>
-                  </CommandEmpty>
-
-                  <CommandGroup>
-                    <CommandItem
-                      value="none"
-                      onSelect={() => {
-                        onChange('');
-                        setOpen(false);
-                      }}
-                    >
-                      {!value ? (
-                        <Check className="mr-2 h-4 w-4" />
-                      ) : (
-                        <span className="mr-2 h-4 w-4" />
-                      )}
-                      {emptyLabel}
-                    </CommandItem>
-
-                    {listedOptions.map((option) => (
-                      <CommandItem
-                        key={option.id}
-                        value={`${option.name} #${option.id}`}
-                        className="gap-2"
-                        onSelect={() => {
-                          onChange(String(option.id));
-                          setOpen(false);
-                        }}
-                      >
-                        {String(option.id) === value ? (
-                          <Check className="mr-2 h-4 w-4" />
-                        ) : (
-                          <span className="mr-2 h-4 w-4" />
-                        )}
-                        <Avatar className="h-7 w-7 shrink-0 border border-border/60 bg-muted">
-                          <AvatarImage
-                            src={getUserPhotoUrl(option.photoId)}
-                            alt={option.name}
-                          />
-                          <AvatarFallback className="bg-muted text-[11px] font-semibold text-foreground">
-                            {getInitials(option.name)}
-                          </AvatarFallback>
-                        </Avatar>
-                        <div className="min-w-0">
-                          <div className="truncate">{option.name}</div>
-                          <div className="truncate text-xs text-muted-foreground">
-                            #{option.id}
-                          </div>
-                        </div>
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-
-                  {hasMore ? (
-                    <div className="border-t p-2">
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        className="w-full"
-                        disabled={isLoadingOptions || isLoadingMoreOptions}
-                        onClick={() =>
-                          void loadOwnerOptions(
-                            currentPage + 1,
-                            debouncedSearch,
-                            false
-                          )
-                        }
-                      >
-                        {isLoadingOptions || isLoadingMoreOptions
-                          ? `${commonT('actions.loadMore')}...`
-                          : commonT('actions.loadMore')}
-                      </Button>
-                    </div>
-                  ) : null}
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-
-          {value ? (
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              className="h-10 w-10 shrink-0"
-              disabled={isCreating}
-              onClick={() => {
-                onChange('');
-              }}
-              aria-label={commonT('actions.cancel')}
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          ) : null}
-
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            className="h-10 w-10 shrink-0"
-            disabled={isCreating}
-            onClick={(event) => {
-              captureParentScrollPosition(event.currentTarget);
-              setNewName('');
-              setNewEmail('');
-              setNewPassword('');
-              setOpen(false);
-              setCreateOpen(true);
-            }}
-            aria-label={t('actions.createUser')}
-          >
-            <Plus className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-
-      <Sheet
-        open={createOpen}
-        onOpenChange={(nextOpen) => {
-          setCreateOpen(nextOpen);
-
-          if (!nextOpen) {
-            setNewName('');
-            setNewEmail('');
-            setNewPassword('');
-            restoreParentScrollPosition();
-          }
-        }}
-      >
-        <SheetContent
-          className="w-full overflow-y-auto px-2 sm:max-w-md"
-          onCloseAutoFocus={(event) => event.preventDefault()}
-        >
-          <SheetHeader>
-            <SheetTitle>{t('actions.createUser')}</SheetTitle>
-            <SheetDescription>
-              {createDescription ?? t('fields.createUserDescription')}
-            </SheetDescription>
-          </SheetHeader>
-
-          <div className="mt-6 space-y-4">
-            <div className="space-y-2">
-              <Label>{t('fields.createUserName')}</Label>
-              <Input
-                value={newName}
-                placeholder={t('placeholders.createUserName')}
-                onChange={(e) => setNewName(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault();
-                    void saveUser();
-                  }
-                }}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label>{t('fields.createUserEmail')}</Label>
-              <Input
-                type="email"
-                value={newEmail}
-                placeholder={t('placeholders.createUserEmail')}
-                onChange={(e) => setNewEmail(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault();
-                    void saveUser();
-                  }
-                }}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label>{t('fields.createUserPassword')}</Label>
-              <Input
-                type="password"
-                value={newPassword}
-                placeholder={t('placeholders.createUserPassword')}
-                onChange={(e) => setNewPassword(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault();
-                    void saveUser();
-                  }
-                }}
-              />
-            </div>
-
-            <Button
-              type="button"
-              className="w-full"
-              disabled={
-                !newName.trim() ||
-                !newEmail.trim() ||
-                !newPassword.trim() ||
-                isCreating
-              }
-              onClick={() => void saveUser()}
-            >
-              {commonT('actions.save')}
-            </Button>
-          </div>
-        </SheetContent>
-      </Sheet>
-    </>
+    />
   );
 }