@hed-hog/operations 0.0.304 → 0.0.305

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

@@ -1,247 +1,247 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Check, ChevronsUpDown, Plus, X } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
-import { fetchOperations } from '../_lib/api';
-import type { OperationsContractTemplate } from '../_lib/types';
-import { ContractTemplateFormScreen } from './contract-template-form-screen';
-
-type ContractTemplateSelectWithCreateProps = {
-  label: string;
-  value?: number | null;
-  initialSelectedLabel?: string;
-  placeholder: string;
-  disabled?: boolean;
-  onChange: (option: OperationsContractTemplate | null) => void;
-};
-
-export function ContractTemplateSelectWithCreate({
-  label,
-  value,
-  initialSelectedLabel = '',
-  placeholder,
-  disabled = false,
-  onChange,
-}: ContractTemplateSelectWithCreateProps) {
-  const { request, currentLocaleCode } = useApp();
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState('');
-  const [createOpen, setCreateOpen] = useState(false);
-  const [selectedLabel, setSelectedLabel] = useState(initialSelectedLabel);
-  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
-  const parentScrollTopRef = useRef(0);
-
-  const { data: templates = [] } = useQuery<OperationsContractTemplate[]>({
-    queryKey: ['operations-inline-contract-templates', currentLocaleCode],
-    queryFn: () =>
-      fetchOperations<OperationsContractTemplate[]>(
-        request,
-        '/operations/contract-templates'
-      ),
-    placeholderData: (old) => old ?? [],
-  });
-
-  useEffect(() => {
-    setSelectedLabel(initialSelectedLabel);
-  }, [initialSelectedLabel]);
-
-  useEffect(() => {
-    if (value == null) {
-      setSelectedLabel('');
-      return;
-    }
-
-    const option = templates.find((item) => item.id === value);
-    if (option) {
-      setSelectedLabel(option.name);
-    }
-  }, [templates, value]);
-
-  const filteredOptions = templates.filter((item) => {
-    const haystack = [item.name, item.code, item.description]
-      .filter(Boolean)
-      .join(' ')
-      .toLowerCase();
-    return haystack.includes(search.trim().toLowerCase());
-  });
-
-  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 container =
-      parentScrollContainerRef.current &&
-      document.body.contains(parentScrollContainerRef.current)
-        ? parentScrollContainerRef.current
-        : null;
-
-    if (!container) {
-      return;
-    }
-
-    const restore = () => {
-      container.scrollTop = parentScrollTopRef.current;
-    };
-
-    requestAnimationFrame(restore);
-    setTimeout(restore, 0);
-    setTimeout(restore, 120);
-  };
-
-  return (
-    <div className="space-y-1.5">
-      <label className="text-xs font-medium text-muted-foreground">
-        {label}
-      </label>
-
-      <div className="flex gap-2">
-        <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger asChild>
-            <Button
-              type="button"
-              variant="outline"
-              role="combobox"
-              disabled={disabled}
-              className="h-9 flex-1 justify-between overflow-hidden"
-            >
-              <span className="truncate text-left">
-                {selectedLabel || placeholder}
-              </span>
-              <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
-            <Command shouldFilter={false}>
-              <CommandInput
-                value={search}
-                onValueChange={setSearch}
-                placeholder="Buscar template..."
-              />
-              <CommandList>
-                <CommandEmpty>Nenhum template encontrado.</CommandEmpty>
-                <CommandGroup>
-                  {filteredOptions.map((option) => (
-                    <CommandItem
-                      key={option.id}
-                      value={String(option.id)}
-                      onSelect={() => {
-                        onChange(option);
-                        setSelectedLabel(option.name);
-                        setOpen(false);
-                      }}
-                    >
-                      <Check
-                        className={`mr-2 size-4 ${
-                          value === option.id ? 'opacity-100' : 'opacity-0'
-                        }`}
-                      />
-                      <div className="min-w-0">
-                        <div className="truncate">{option.name}</div>
-                        <div className="truncate text-xs text-muted-foreground">
-                          {[option.code, option.contractType]
-                            .filter(Boolean)
-                            .join(' • ')}
-                        </div>
-                      </div>
-                    </CommandItem>
-                  ))}
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
-
-        {value ? (
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            className="h-9 w-9 shrink-0 cursor-pointer"
-            onClick={() => {
-              onChange(null);
-              setSelectedLabel('');
-            }}
-          >
-            <X className="size-4" />
-          </Button>
-        ) : null}
-
-        <Button
-          type="button"
-          variant="outline"
-          size="icon"
-          className="h-9 w-9 shrink-0 cursor-pointer"
-          disabled={disabled}
-          onClick={(event) => {
-            captureParentScrollPosition(event.currentTarget);
-            setCreateOpen(true);
-          }}
-          aria-label={`Criar ${label.toLowerCase()}`}
-        >
-          <Plus className="size-4" />
-        </Button>
-      </div>
-
-      <Sheet
-        open={createOpen}
-        onOpenChange={(nextOpen) => {
-          setCreateOpen(nextOpen);
-          if (!nextOpen) {
-            restoreParentScrollPosition();
-          }
-        }}
-      >
-        <SheetContent className="w-full overflow-y-auto sm:max-w-[min(92vw,72rem)]">
-          <SheetHeader>
-            <SheetTitle>Novo template</SheetTitle>
-            <SheetDescription>
-              Crie um template sem sair do wizard do contrato.
-            </SheetDescription>
-          </SheetHeader>
-          <ContractTemplateFormScreen
-            onCancel={() => setCreateOpen(false)}
-            onSaved={async (template) => {
-              onChange(template);
-              setSelectedLabel(template.name);
-              setCreateOpen(false);
-            }}
-          />
-        </SheetContent>
-      </Sheet>
-    </div>
-  );
-}
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Check, ChevronsUpDown, Plus, X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { fetchOperations } from '../_lib/api';
+import type { OperationsContractTemplate } from '../_lib/types';
+import { ContractTemplateFormScreen } from './contract-template-form-screen';
+
+type ContractTemplateSelectWithCreateProps = {
+  label: string;
+  value?: number | null;
+  initialSelectedLabel?: string;
+  placeholder: string;
+  disabled?: boolean;
+  onChange: (option: OperationsContractTemplate | null) => void;
+};
+
+export function ContractTemplateSelectWithCreate({
+  label,
+  value,
+  initialSelectedLabel = '',
+  placeholder,
+  disabled = false,
+  onChange,
+}: ContractTemplateSelectWithCreateProps) {
+  const { request, currentLocaleCode } = useApp();
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [createOpen, setCreateOpen] = useState(false);
+  const [selectedLabel, setSelectedLabel] = useState(initialSelectedLabel);
+  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
+  const parentScrollTopRef = useRef(0);
+
+  const { data: templates = [] } = useQuery<OperationsContractTemplate[]>({
+    queryKey: ['operations-inline-contract-templates', currentLocaleCode],
+    queryFn: () =>
+      fetchOperations<OperationsContractTemplate[]>(
+        request,
+        '/operations/contract-templates'
+      ),
+    placeholderData: (old) => old ?? [],
+  });
+
+  useEffect(() => {
+    setSelectedLabel(initialSelectedLabel);
+  }, [initialSelectedLabel]);
+
+  useEffect(() => {
+    if (value == null) {
+      setSelectedLabel('');
+      return;
+    }
+
+    const option = templates.find((item) => item.id === value);
+    if (option) {
+      setSelectedLabel(option.name);
+    }
+  }, [templates, value]);
+
+  const filteredOptions = templates.filter((item) => {
+    const haystack = [item.name, item.code, item.description]
+      .filter(Boolean)
+      .join(' ')
+      .toLowerCase();
+    return haystack.includes(search.trim().toLowerCase());
+  });
+
+  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 container =
+      parentScrollContainerRef.current &&
+      document.body.contains(parentScrollContainerRef.current)
+        ? parentScrollContainerRef.current
+        : null;
+
+    if (!container) {
+      return;
+    }
+
+    const restore = () => {
+      container.scrollTop = parentScrollTopRef.current;
+    };
+
+    requestAnimationFrame(restore);
+    setTimeout(restore, 0);
+    setTimeout(restore, 120);
+  };
+
+  return (
+    <div className="space-y-1.5">
+      <label className="text-xs font-medium text-muted-foreground">
+        {label}
+      </label>
+
+      <div className="flex gap-2">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              role="combobox"
+              disabled={disabled}
+              className="h-9 flex-1 justify-between overflow-hidden"
+            >
+              <span className="truncate text-left">
+                {selectedLabel || placeholder}
+              </span>
+              <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+            <Command shouldFilter={false}>
+              <CommandInput
+                value={search}
+                onValueChange={setSearch}
+                placeholder="Buscar template..."
+              />
+              <CommandList>
+                <CommandEmpty>Nenhum template encontrado.</CommandEmpty>
+                <CommandGroup>
+                  {filteredOptions.map((option) => (
+                    <CommandItem
+                      key={option.id}
+                      value={String(option.id)}
+                      onSelect={() => {
+                        onChange(option);
+                        setSelectedLabel(option.name);
+                        setOpen(false);
+                      }}
+                    >
+                      <Check
+                        className={`mr-2 size-4 ${
+                          value === option.id ? 'opacity-100' : 'opacity-0'
+                        }`}
+                      />
+                      <div className="min-w-0">
+                        <div className="truncate">{option.name}</div>
+                        <div className="truncate text-xs text-muted-foreground">
+                          {[option.code, option.contractType]
+                            .filter(Boolean)
+                            .join(' • ')}
+                        </div>
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+
+        {value ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="h-9 w-9 shrink-0 cursor-pointer"
+            onClick={() => {
+              onChange(null);
+              setSelectedLabel('');
+            }}
+          >
+            <X className="size-4" />
+          </Button>
+        ) : null}
+
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="h-9 w-9 shrink-0 cursor-pointer"
+          disabled={disabled}
+          onClick={(event) => {
+            captureParentScrollPosition(event.currentTarget);
+            setCreateOpen(true);
+          }}
+          aria-label={`Criar ${label.toLowerCase()}`}
+        >
+          <Plus className="size-4" />
+        </Button>
+      </div>
+
+      <Sheet
+        open={createOpen}
+        onOpenChange={(nextOpen) => {
+          setCreateOpen(nextOpen);
+          if (!nextOpen) {
+            restoreParentScrollPosition();
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-y-auto sm:max-w-[min(92vw,72rem)]">
+          <SheetHeader>
+            <SheetTitle>Novo template</SheetTitle>
+            <SheetDescription>
+              Crie um template sem sair do wizard do contrato.
+            </SheetDescription>
+          </SheetHeader>
+          <ContractTemplateFormScreen
+            onCancel={() => setCreateOpen(false)}
+            onSaved={async (template) => {
+              onChange(template);
+              setSelectedLabel(template.name);
+              setCreateOpen(false);
+            }}
+          />
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}