@hed-hog/operations 0.0.300 → 0.0.302

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

@@ -0,0 +1,370 @@
+'use client';
+
+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 { ChevronsUpDown, Plus, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useRef, useState } from 'react';
+
+type DepartmentOption = {
+  id?: number | null;
+  name: string;
+  code?: string | null;
+  description?: string | null;
+};
+
+type DepartmentSelectWithCreateProps = {
+  label: string;
+  value?: string | null;
+  options: DepartmentOption[];
+  onChange: (department: DepartmentOption) => void;
+  selectPlaceholder: string;
+  createDescription?: string;
+  createPlaceholder?: string;
+  disabled?: boolean;
+};
+
+export function DepartmentSelectWithCreate({
+  label,
+  value,
+  options,
+  onChange,
+  selectPlaceholder,
+  createDescription,
+  createPlaceholder,
+  disabled = false,
+}: DepartmentSelectWithCreateProps) {
+  const commonT = useTranslations('operations.Common');
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [createOpen, setCreateOpen] = useState(false);
+  const [newDepartment, setNewDepartment] = useState('');
+  const [visibleCount, setVisibleCount] = useState(20);
+  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
+  const parentScrollTopRef = useRef(0);
+
+  const normalizedValue = value?.trim() ?? '';
+
+  const normalizedOptions = useMemo(() => {
+    const values = new Map<string, DepartmentOption>();
+
+    for (const option of options) {
+      const normalizedName = option.name.trim();
+
+      if (!normalizedName) {
+        continue;
+      }
+
+      values.set(normalizedName.toLowerCase(), {
+        ...option,
+        name: normalizedName,
+      });
+    }
+
+    if (normalizedValue && !values.has(normalizedValue.toLowerCase())) {
+      values.set(normalizedValue.toLowerCase(), {
+        id: null,
+        name: normalizedValue,
+      });
+    }
+
+    return Array.from(values.values()).sort((left, right) =>
+      left.name.localeCompare(right.name)
+    );
+  }, [options, normalizedValue]);
+
+  const filteredOptions = useMemo(() => {
+    const normalizedSearch = search.trim().toLowerCase();
+
+    if (!normalizedSearch) {
+      return normalizedOptions;
+    }
+
+    return normalizedOptions.filter((option) =>
+      [option.name, option.code, option.description]
+        .filter(Boolean)
+        .some((field) => String(field).toLowerCase().includes(normalizedSearch))
+    );
+  }, [normalizedOptions, search]);
+
+  const visibleOptions = filteredOptions.slice(0, visibleCount);
+
+  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"]'
+        )
+      ) 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 saveDepartment = () => {
+    const normalizedDepartment = newDepartment.trim();
+
+    if (!normalizedDepartment) {
+      return;
+    }
+
+    onChange({
+      id: null,
+      name: normalizedDepartment,
+    });
+    setNewDepartment('');
+    setSearch(normalizedDepartment);
+    setCreateOpen(false);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <div className="grid gap-2">
+        <Label>{label}</Label>
+
+        <div className="flex w-full min-w-0 items-center gap-2">
+          <Popover
+            open={!disabled && open}
+            onOpenChange={(nextOpen) => {
+              if (!disabled) {
+                setOpen(nextOpen);
+              }
+            }}
+          >
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                role="combobox"
+                disabled={disabled}
+                className="h-10 flex-1 min-w-0 justify-between overflow-hidden"
+              >
+                <span className="truncate text-left">
+                  {normalizedValue || 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={selectPlaceholder}
+                  value={search}
+                  onValueChange={(value) => {
+                    setSearch(value);
+                    setVisibleCount(20);
+                  }}
+                />
+                <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);
+                          setNewDepartment(search.trim());
+                          setOpen(false);
+                          setCreateOpen(true);
+                        }}
+                      >
+                        {commonT('actions.create')} {label.toLowerCase()}
+                      </Button>
+                    </div>
+                  </CommandEmpty>
+
+                  <CommandGroup>
+                    {visibleOptions.map((option) => (
+                      <CommandItem
+                        key={`${option.id ?? 'new'}-${option.name}`}
+                        value={`${option.name} ${option.code ?? ''} ${option.description ?? ''}`}
+                        onSelect={() => {
+                          onChange(option);
+                          setSearch(option.name);
+                          setOpen(false);
+                        }}
+                      >
+                        <div className="min-w-0">
+                          <div className="truncate">{option.name}</div>
+                          {option.code || option.description ? (
+                            <div className="truncate text-xs text-muted-foreground">
+                              {[option.code, option.description]
+                                .filter(Boolean)
+                                .join(' • ')}
+                            </div>
+                          ) : null}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+
+                  {filteredOptions.length > visibleCount ? (
+                    <div className="border-t p-2">
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        className="w-full"
+                        onClick={() =>
+                          setVisibleCount((current) => current + 20)
+                        }
+                      >
+                        {commonT('actions.loadMore')}
+                      </Button>
+                    </div>
+                  ) : null}
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+
+          {normalizedValue ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="h-10 w-10 shrink-0"
+              disabled={disabled}
+              onClick={() => {
+                onChange({ id: null, name: '' });
+                setSearch('');
+                setVisibleCount(20);
+                setOpen(false);
+              }}
+              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={disabled}
+            onClick={(event) => {
+              captureParentScrollPosition(event.currentTarget);
+              setNewDepartment(normalizedValue);
+              setOpen(false);
+              setCreateOpen(true);
+            }}
+            aria-label={`${commonT('actions.create')} ${label.toLowerCase()}`}
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <Sheet
+        open={createOpen}
+        onOpenChange={(nextOpen) => {
+          setCreateOpen(nextOpen);
+          if (!nextOpen) {
+            setNewDepartment('');
+            restoreParentScrollPosition();
+          }
+        }}
+      >
+        <SheetContent
+          className="w-full overflow-y-auto sm:max-w-md px-2"
+          onCloseAutoFocus={(event) => event.preventDefault()}
+        >
+          <SheetHeader>
+            <SheetTitle>
+              {commonT('actions.create')} {label.toLowerCase()}
+            </SheetTitle>
+            <SheetDescription>
+              {createDescription || selectPlaceholder}
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="mt-6 space-y-4">
+            <div className="space-y-2">
+              <Label>{label}</Label>
+              <Input
+                value={newDepartment}
+                placeholder={createPlaceholder || label}
+                onChange={(event) => setNewDepartment(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    saveDepartment();
+                  }
+                }}
+              />
+            </div>
+
+            <Button
+              type="button"
+              className="w-full"
+              disabled={!newDepartment.trim()}
+              onClick={saveDepartment}
+            >
+              {commonT('actions.save')}
+            </Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}