@hed-hog/operations 0.0.328 → 0.0.329

package/hedhog/frontend/app/_components/system-user-picker.tsx.ejs

@@ -0,0 +1,198 @@
+'use client';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { EntityPicker } from '@/components/ui/entity-picker';
+import { useApp } from '@hed-hog/next-app-provider';
+import { useTranslations } from 'next-intl';
+
+export type SystemUserPickerOption = {
+  id: number;
+  name: string;
+  photoId?: number | null;
+};
+
+export type SystemUserPickerProps = {
+  label: string;
+  value: string;
+  options: SystemUserPickerOption[];
+  placeholder: string;
+  emptyLabel: string;
+  onChange: (value: string) => void;
+  onCreate: (
+    name: string,
+    email: string,
+    password: string
+  ) => Promise<SystemUserPickerOption | null>;
+  createDescription?: string;
+};
+
+type UserListPayload = {
+  paginate: {
+    data: Array<{ id: number; name: string | null; photo_id?: number | null }>;
+    lastPage: number;
+    page: number;
+  };
+};
+
+const PAGE_SIZE = 10;
+
+function parseUserListResponse(payload: UserListPayload) {
+  const raw = payload?.paginate?.data ?? [];
+
+  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) {
+  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 SystemUserPicker({
+  label,
+  value,
+  options,
+  placeholder,
+  emptyLabel,
+  onChange,
+  onCreate,
+  createDescription,
+}: SystemUserPickerProps) {
+  const { request } = useApp();
+  const commonT = useTranslations('operations.Common');
+  const t = useTranslations('operations.CollaboratorFormPage');
+
+  const selectedOption =
+    options.find((option) => String(option.id) === value) ?? null;
+
+  return (
+    <EntityPicker<SystemUserPickerOption>
+      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(pageSize || PAGE_SIZE));
+
+        const normalizedSearch = search.trim();
+        if (normalizedSearch) {
+          params.set('search', normalizedSearch);
+        }
+
+        const response = await request<UserListPayload>({
+          url: `/user?${params.toString()}`,
+          method: 'GET',
+        });
+
+        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
+        )
+      }
+      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 ?? ''
+        )
+      }
+    />
+  );
+}