@hed-hog/operations 0.0.303 → 0.0.304

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

@@ -39,6 +39,9 @@ type DepartmentSelectWithCreateProps = {
   value?: string | null;
   options: DepartmentOption[];
   onChange: (department: DepartmentOption) => void;
+  onCreate?: (
+    departmentName: string
+  ) => Promise<DepartmentOption | null | void> | DepartmentOption | null | void;
   selectPlaceholder: string;
   createDescription?: string;
   createPlaceholder?: string;
@@ -50,6 +53,7 @@ export function DepartmentSelectWithCreate({
   value,
   options,
   onChange,
+  onCreate,
   selectPlaceholder,
   createDescription,
   createPlaceholder,
@@ -60,6 +64,7 @@ export function DepartmentSelectWithCreate({
   const [search, setSearch] = useState('');
   const [createOpen, setCreateOpen] = useState(false);
   const [newDepartment, setNewDepartment] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
   const [visibleCount, setVisibleCount] = useState(20);
   const parentScrollContainerRef = useRef<HTMLElement | null>(null);
   const parentScrollTopRef = useRef(0);
@@ -153,21 +158,38 @@ export function DepartmentSelectWithCreate({
     setTimeout(restore, 120);
   };
 
-  const saveDepartment = () => {
+  const saveDepartment = async () => {
     const normalizedDepartment = newDepartment.trim();
 
-    if (!normalizedDepartment) {
+    if (!normalizedDepartment || isCreating) {
       return;
     }
 
-    onChange({
-      id: null,
-      name: normalizedDepartment,
-    });
-    setNewDepartment('');
-    setSearch(normalizedDepartment);
-    setCreateOpen(false);
-    setOpen(false);
+    setIsCreating(true);
+
+    try {
+      const nextOption = onCreate
+        ? await onCreate(normalizedDepartment)
+        : {
+            id: null,
+            name: normalizedDepartment,
+          };
+
+      if (!nextOption?.name?.trim()) {
+        return;
+      }
+
+      onChange({
+        ...nextOption,
+        name: nextOption.name.trim(),
+      });
+      setNewDepartment('');
+      setSearch(nextOption.name.trim());
+      setCreateOpen(false);
+      setOpen(false);
+    } finally {
+      setIsCreating(false);
+    }
   };
 
   return (
@@ -189,7 +211,7 @@ export function DepartmentSelectWithCreate({
                 type="button"
                 variant="outline"
                 role="combobox"
-                disabled={disabled}
+                disabled={disabled || isCreating}
                 className="h-10 flex-1 min-w-0 justify-between overflow-hidden"
               >
                 <span className="truncate text-left">
@@ -283,7 +305,7 @@ export function DepartmentSelectWithCreate({
               variant="outline"
               size="icon"
               className="h-10 w-10 shrink-0"
-              disabled={disabled}
+              disabled={disabled || isCreating}
               onClick={() => {
                 onChange({ id: null, name: '' });
                 setSearch('');
@@ -301,7 +323,7 @@ export function DepartmentSelectWithCreate({
             variant="outline"
             size="icon"
             className="h-10 w-10 shrink-0"
-            disabled={disabled}
+            disabled={disabled || isCreating}
             onClick={(event) => {
               captureParentScrollPosition(event.currentTarget);
               setNewDepartment(normalizedValue);
@@ -348,7 +370,7 @@ export function DepartmentSelectWithCreate({
                 onKeyDown={(event) => {
                   if (event.key === 'Enter') {
                     event.preventDefault();
-                    saveDepartment();
+                    void saveDepartment();
                   }
                 }}
               />
@@ -357,8 +379,8 @@ export function DepartmentSelectWithCreate({
             <Button
               type="button"
               className="w-full"
-              disabled={!newDepartment.trim()}
-              onClick={saveDepartment}
+              disabled={!newDepartment.trim() || isCreating}
+              onClick={() => void saveDepartment()}
             >
               {commonT('actions.save')}
             </Button>