@hed-hog/lms 0.0.306 → 0.0.309

package/hedhog/frontend/app/_components/class-form-sheet.tsx.ejs

@@ -1,15 +1,8 @@
 'use client';
 
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
 import {
   Dialog,
   DialogContent,
@@ -49,7 +42,7 @@ import {
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { format } from 'date-fns';
-import { CalendarIcon, ChevronsUpDown, Loader2, Plus } from 'lucide-react';
+import { CalendarIcon, Loader2, Plus } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { DateRange } from 'react-day-picker';
@@ -140,6 +133,7 @@ type InstructorOption = {
   id: number;
   name: string;
   personId?: number;
+  avatarId?: number | null;
   qualificationSlugs?: string[];
 };
 
@@ -153,6 +147,8 @@ type InstructorApiRow = {
   label?: string;
   personId?: number | string;
   person_id?: number | string;
+  avatarId?: number | string | null;
+  avatar_id?: number | string | null;
   qualificationSlugs?: string[];
 };
 
@@ -306,10 +302,16 @@ function normalizeInstructorOption(
     item?.name ?? item?.nome ?? item?.full_name ?? item?.label ?? ''
   ).trim();
   if (!id || !name) return null;
+  const rawAvatarId = item?.avatarId ?? item?.avatar_id;
+  const avatarId =
+    rawAvatarId !== undefined && rawAvatarId !== null
+      ? Number(rawAvatarId) || null
+      : null;
   return {
     id,
     name,
     personId: Number(item?.personId ?? item?.person_id ?? 0) || undefined,
+    avatarId,
     qualificationSlugs: Array.isArray(item?.qualificationSlugs)
       ? item.qualificationSlugs
       : undefined,
@@ -516,8 +518,6 @@ export function ClassFormSheet({
   const [savingCourse, setSavingCourse] = useState(false);
   const [dateRangeOpen, setDateRangeOpen] = useState(false);
   const [dateRangeDraft, setDateRangeDraft] = useState<DateRange | undefined>();
-  const [professorOpen, setProfessorOpen] = useState(false);
-  const [professorSearch, setProfessorSearch] = useState('');
   const [createProfessorDialogOpen, setCreateProfessorDialogOpen] =
     useState(false);
   const [courseSheetOpen, setCourseSheetOpen] = useState(false);
@@ -561,56 +561,6 @@ export function ClassFormSheet({
 
   // ── Queries ────────────────────────────────────────────────────────────────
 
-  const {
-    data: professorOptions = [],
-    isFetching: loadingProfessores,
-    refetch: refetchProfessorOptions,
-  } = useQuery<InstructorOption[]>({
-    queryKey: ['class-form-sheet-professors', professorSearch],
-    queryFn: async () => {
-      const response = await request<
-        | InstructorApiRow[]
-        | {
-            data?: InstructorApiRow[];
-            items?: InstructorApiRow[];
-            rows?: InstructorApiRow[];
-          }
-      >({
-        url: '/lms/instructors',
-        method: 'GET',
-        params: {
-          page: 1,
-          pageSize: 100,
-          qualificationSlugs: ['class-sessions'],
-          ...(professorSearch.trim() ? { search: professorSearch.trim() } : {}),
-        },
-      });
-
-      const payload = response.data;
-      const rows = Array.isArray(payload)
-        ? payload
-        : Array.isArray(payload?.data)
-          ? payload.data
-          : Array.isArray(payload?.items)
-            ? payload.items
-            : Array.isArray(payload?.rows)
-              ? payload.rows
-              : [];
-
-      const unique = new Map<number, InstructorOption>();
-      for (const row of rows) {
-        const normalized = normalizeInstructorOption(row);
-        if (!normalized) continue;
-        unique.set(normalized.id, normalized);
-      }
-
-      return Array.from(unique.values()).sort((a, b) =>
-        a.name.localeCompare(b.name)
-      );
-    },
-    initialData: [],
-  });
-
   const { data: categoryListData, refetch: refetchCategoryOptions } =
     useQuery<ApiCategoryList>({
       queryKey: ['class-form-sheet-categories'],
@@ -736,10 +686,6 @@ export function ClassFormSheet({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, classId]);
 
-  useEffect(() => {
-    if (professorOpen) void refetchProfessorOptions();
-  }, [professorOpen, refetchProfessorOptions]);
-
   useEffect(() => {
     if (courseSheetOpen) void refetchCategoryOptions();
   }, [courseSheetOpen, refetchCategoryOptions]);
@@ -1672,106 +1618,141 @@ export function ClassFormSheet({
                   {t('form.fields.professor.label')}{' '}
                   <span className="text-destructive">*</span>
                 </FieldLabel>
-                <Controller
-                  name="professor"
-                  control={form.control}
-                  render={({ field }) => (
-                    <div className="flex items-end gap-2">
-                      <div className="flex-1">
-                        <Popover
-                          open={professorOpen}
-                          onOpenChange={setProfessorOpen}
-                        >
-                          <PopoverTrigger asChild>
-                            <Button
-                              type="button"
-                              variant="outline"
-                              role="combobox"
-                              className="w-full justify-between"
-                            >
-                              <span className="truncate text-left">
-                                {field.value ||
-                                  t('form.fields.professor.placeholder')}
-                              </span>
-                              {loadingProfessores ? (
-                                <Loader2 className="ml-2 h-4 w-4 shrink-0 animate-spin opacity-60" />
-                              ) : (
-                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                              )}
-                            </Button>
-                          </PopoverTrigger>
-                          <PopoverContent className="p-0" align="start">
-                            <Command shouldFilter={false}>
-                              <CommandInput
-                                placeholder={t(
-                                  'form.fields.professor.placeholder'
-                                )}
-                                value={professorSearch}
-                                onValueChange={setProfessorSearch}
-                              />
-                              <CommandList>
-                                <CommandEmpty>
-                                  <div className="flex flex-col items-center gap-3 px-2 py-4">
-                                    <p className="text-sm text-muted-foreground">
-                                      Nenhum professor encontrado.
-                                    </p>
-                                    <Button
-                                      type="button"
-                                      variant="outline"
-                                      size="sm"
-                                      className="w-full"
-                                      onClick={() => {
-                                        setProfessorOpen(false);
-                                        setCreateProfessorDialogOpen(true);
-                                      }}
-                                    >
-                                      <Plus className="mr-2 h-4 w-4" />
-                                      Cadastrar novo professor
-                                    </Button>
-                                  </div>
-                                </CommandEmpty>
-                                <CommandGroup>
-                                  {professorOptions.map((professor) => (
-                                    <CommandItem
-                                      key={professor.id}
-                                      value={`${professor.name}-${professor.id}`}
-                                      onSelect={() => {
-                                        form.setValue(
-                                          'instructorId',
-                                          professor.id,
-                                          {
-                                            shouldDirty: true,
-                                            shouldTouch: true,
-                                            shouldValidate: true,
-                                          }
-                                        );
-                                        field.onChange(professor.name);
-                                        setProfessorOpen(false);
-                                        setProfessorSearch('');
-                                      }}
-                                    >
-                                      {professor.name}
-                                    </CommandItem>
-                                  ))}
-                                </CommandGroup>
-                              </CommandList>
-                            </Command>
-                          </PopoverContent>
-                        </Popover>
-                      </div>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="icon"
-                        className="shrink-0"
-                        onClick={() => setCreateProfessorDialogOpen(true)}
-                        aria-label="Cadastrar novo professor"
-                      >
-                        <Plus className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  )}
-                />
+                <div className="flex items-end gap-2">
+                  <div className="flex-1">
+                    <EntityPicker<InstructorOption, TurmaForm>
+                      form={form}
+                      name="instructorId"
+                      valueType="number"
+                      placeholder={t('form.fields.professor.placeholder')}
+                      initialSelectedLabel={watchedFormValues.professor ?? ''}
+                      searchPlaceholder={t('form.fields.professor.placeholder')}
+                      emptyStateDescription="Nenhum professor encontrado."
+                      noResultsLabel="Nenhum professor encontrado."
+                      showCreateButton={false}
+                      clearable={false}
+                      getOptionValue={(opt) => opt.id}
+                      getOptionLabel={(opt) => opt.name}
+                      onChange={(value, option) => {
+                        form.setValue(
+                          'instructorId',
+                          value as number | undefined,
+                          {
+                            shouldDirty: true,
+                            shouldTouch: true,
+                            shouldValidate: true,
+                          }
+                        );
+                        form.setValue('professor', option?.name ?? '', {
+                          shouldDirty: true,
+                          shouldTouch: true,
+                          shouldValidate: true,
+                        });
+                      }}
+                      loadOptions={async ({ page, pageSize, search }) => {
+                        const response = await request<
+                          | InstructorApiRow[]
+                          | {
+                              data?: InstructorApiRow[];
+                              items?: InstructorApiRow[];
+                              rows?: InstructorApiRow[];
+                              total?: number;
+                              lastPage?: number;
+                            }
+                        >({
+                          url: '/lms/instructors',
+                          method: 'GET',
+                          params: {
+                            page,
+                            pageSize,
+                            qualificationSlugs: ['class-sessions'],
+                            ...(search.trim() ? { search: search.trim() } : {}),
+                          },
+                        });
+
+                        const payload = response.data;
+                        const rows = Array.isArray(payload)
+                          ? payload
+                          : Array.isArray(payload?.data)
+                            ? payload.data
+                            : Array.isArray(payload?.items)
+                              ? payload.items
+                              : Array.isArray(payload?.rows)
+                                ? payload.rows
+                                : [];
+                        const lastPage =
+                          !Array.isArray(payload) && payload?.lastPage
+                            ? payload.lastPage
+                            : 1;
+
+                        const items = rows
+                          .map(normalizeInstructorOption)
+                          .filter(
+                            (opt): opt is InstructorOption => opt !== null
+                          );
+
+                        return { items, hasMore: page < lastPage };
+                      }}
+                      renderOption={({ option }) => {
+                        const initials = option.name
+                          .split(' ')
+                          .filter(Boolean)
+                          .slice(0, 2)
+                          .map((p) => p[0]?.toUpperCase() ?? '')
+                          .join('');
+                        const avatarUrl = option.avatarId
+                          ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${option.avatarId}`
+                          : undefined;
+                        return (
+                          <div className="flex min-w-0 items-center gap-3 py-0.5">
+                            <Avatar className="h-8 w-8 shrink-0 rounded-lg border border-border/60">
+                              <AvatarImage src={avatarUrl} />
+                              <AvatarFallback className="rounded-lg bg-muted text-[11px] font-semibold text-foreground">
+                                {initials}
+                              </AvatarFallback>
+                            </Avatar>
+                            <span className="truncate text-sm">
+                              {option.name}
+                            </span>
+                          </div>
+                        );
+                      }}
+                      renderSelectedValue={({ option, label }) => {
+                        const name = option?.name ?? label;
+                        const initials = name
+                          .split(' ')
+                          .filter(Boolean)
+                          .slice(0, 2)
+                          .map((p) => p[0]?.toUpperCase() ?? '')
+                          .join('');
+                        const avatarUrl = option?.avatarId
+                          ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${option.avatarId}`
+                          : undefined;
+                        return (
+                          <div className="flex items-center gap-2">
+                            <Avatar className="h-5 w-5 shrink-0 rounded">
+                              <AvatarImage src={avatarUrl} />
+                              <AvatarFallback className="rounded bg-muted text-[10px] font-semibold">
+                                {initials}
+                              </AvatarFallback>
+                            </Avatar>
+                            <span className="truncate">{name}</span>
+                          </div>
+                        );
+                      }}
+                    />
+                  </div>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    className="shrink-0"
+                    onClick={() => setCreateProfessorDialogOpen(true)}
+                    aria-label="Cadastrar novo professor"
+                  >
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </div>
                 <FieldError>
                   {form.formState.errors.professor?.message}
                 </FieldError>

package/hedhog/frontend/app/_components/course-avatar.tsx.ejs

@@ -0,0 +1,70 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { useApp } from '@hed-hog/next-app-provider';
+import { BookOpen } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+type CourseAvatarProps = {
+  fileId?: number | null;
+  title: string;
+  className?: string;
+  iconSize?: string;
+};
+
+export function CourseAvatar({
+  fileId,
+  title,
+  className,
+  iconSize = 'size-6',
+}: CourseAvatarProps) {
+  const { request } = useApp();
+  const [url, setUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!fileId) {
+      setUrl(null);
+      return;
+    }
+
+    let cancelled = false;
+
+    request<{ url?: string }>({
+      url: `/file/open/${fileId}`,
+      method: 'PUT',
+    })
+      .then((res) => {
+        if (!cancelled && res?.data?.url) {
+          setUrl(res.data.url);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setUrl(null);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [fileId, request]);
+
+  if (url) {
+    return (
+      <img
+        src={url}
+        alt={title}
+        className={cn('shrink-0 object-cover', className)}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex shrink-0 items-center justify-center rounded-xl border bg-muted/60',
+        className
+      )}
+    >
+      <BookOpen className={cn('text-foreground', iconSize)} />
+    </div>
+  );
+}