@hed-hog/operations 0.0.322 → 0.0.326

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/system-user-select-with-create.tsx

@@ -0,0 +1,660 @@
+'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 { 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;
+  name: string;
+  photoId?: number | null;
+};
+
+type SystemUserSelectWithCreateProps = {
+  label: string;
+  value: string;
+  options: SystemUserOption[];
+  placeholder: string;
+  emptyLabel: string;
+  onChange: (value: string) => void;
+  onCreate: (
+    name: string,
+    email: string,
+    password: string
+  ) => Promise<SystemUserOption | null>;
+  createDescription?: string;
+};
+
+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;
+} {
+  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 };
+}
+
+function getUserPhotoUrl(photoId?: number | null) {
+  return typeof photoId === 'number' && photoId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${photoId}`
+    : undefined;
+}
+
+function getInitials(value?: string | null) {
+  const parts = String(value ?? '')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2);
+
+  if (!parts.length) {
+    return '??';
+  }
+
+  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
+}
+
+export function SystemUserSelectWithCreate({
+  label,
+  value,
+  options,
+  placeholder,
+  emptyLabel,
+  onChange,
+  onCreate,
+  createDescription,
+}: SystemUserSelectWithCreateProps) {
+  const { request } = useApp();
+  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);
+      }
+
+      try {
+        const params = new URLSearchParams();
+        params.set('page', String(page));
+        params.set('pageSize', String(PAGE_SIZE));
+
+        const normalizedSearch = searchTerm.trim();
+        if (normalizedSearch) {
+          params.set('search', normalizedSearch);
+        }
+
+        const response = await request<UserListPayload>({
+          url: `/user?${params.toString()}`,
+          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);
+        }
+      }
+    },
+    [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"]'
+        )
+      ) 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>
+    </>
+  );
+}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/task-detail-sheet.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+export type TaskDetailSheetData = {
+    id: number;
+    name: string;
+    description?: string | null;
+    status: string;
+    priority?: string | null;
+    dueDate?: string | null;
+    estimateHours?: number | null;
+    tags?: string | null;
+    projectName?: string | null;
+    projectCode?: string | null;
+    assigneeName?: string | null;
+    assigneeUserPhotoId?: number | null;
+    assigneePersonAvatarId?: number | null;
+};
+type Props = {
+    task: TaskDetailSheetData | null;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    statusLabel?: (status: string) => string;
+    footer?: ReactNode;
+};
+export declare function TaskDetailSheet({ task, open, onOpenChange, statusLabel, footer, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=task-detail-sheet.d.ts.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/task-detail-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-detail-sheet.d.ts","sourceRoot":"","sources":["task-detail-sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiCvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxC,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAwTF,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,MAAM,GACP,EAAE,KAAK,+BA6IP"}