@hed-hog/lms 0.0.305 → 0.0.309

package/hedhog/frontend/app/courses/page.tsx.ejs

@@ -62,6 +62,7 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
+import { CourseAvatar } from '../_components/course-avatar';
 import {
   CourseCategoryOption,
   CourseFormSheet,
@@ -76,7 +77,7 @@ const API_COURSES_CACHE_KEY = 'lms:courses:api-cache';
 
 interface Curso {
   id: number;
-  codigo: string;
+  slug: string;
   nomeInterno: string;
   tituloComercial: string;
   descricao: string;
@@ -90,11 +91,12 @@ interface Curso {
   listado: boolean;
   alunosInscritos: number;
   criadoEm: string;
+  logoFileId?: number | null;
 }
 
 type ApiCourse = {
   id: number;
-  code: string;
+  name: string;
   slug: string;
   title: string;
   description: string;
@@ -110,6 +112,7 @@ type ApiCourse = {
   isListed: boolean;
   enrollmentCount: number;
   createdAt: string;
+  logoFileId?: number | null;
 };
 
 type ApiCourseList = {
@@ -199,8 +202,8 @@ function toPtStatus(status?: string | null): CourseSheetFormValues['status'] {
 function mapApiCourse(course: ApiCourse): Curso {
   return {
     id: course.id,
-    codigo: course.code,
-    nomeInterno: course.slug,
+    slug: course.slug,
+    nomeInterno: course.name ?? '',
     tituloComercial: course.title,
     descricao: course.description ?? '',
     primaryColor: course.primaryColor ?? null,
@@ -213,6 +216,7 @@ function mapApiCourse(course: ApiCourse): Curso {
     listado: course.isListed,
     alunosInscritos: course.enrollmentCount ?? 0,
     criadoEm: course.createdAt ?? '',
+    logoFileId: course.logoFileId ?? null,
   };
 }
 
@@ -592,6 +596,7 @@ export default function CursosPage() {
     setEditingCurso(curso);
     form.reset({
       nomeInterno: curso.nomeInterno,
+      slug: curso.slug,
       tituloComercial: curso.tituloComercial,
       descricao: curso.descricao,
       primaryColor: curso.primaryColor || '#1D4ED8',
@@ -599,6 +604,7 @@ export default function CursosPage() {
       nivel: curso.nivel,
       status: curso.status,
       categorias: curso.categorias,
+      logoFileId: curso.logoFileId ?? null,
     });
     setSheetOpen(true);
   }
@@ -607,7 +613,8 @@ export default function CursosPage() {
     setSaving(true);
     try {
       const payload = {
-        slug: data.nomeInterno.trim(),
+        name: data.nomeInterno.trim(),
+        slug: data.slug.trim().toLowerCase(),
         title: data.tituloComercial,
         description: data.descricao,
         level: toApiLevel(data.nivel),
@@ -617,6 +624,7 @@ export default function CursosPage() {
         primaryContrastColor: getContrastColor(data.primaryColor),
         secondaryColor: data.secondaryColor,
         secondaryContrastColor: getContrastColor(data.secondaryColor),
+        logoFileId: data.logoFileId ?? null,
       };
 
       if (editingCurso) {
@@ -1071,13 +1079,16 @@ export default function CursosPage() {
 
                       <CardContent className="flex h-full flex-col p-4">
                         <div className="mb-3 flex items-start gap-3">
-                          <div className="flex size-12 shrink-0 items-center justify-center rounded-xl border bg-muted/60">
-                            <BookOpen className="size-6 text-foreground" />
-                          </div>
+                          <CourseAvatar
+                            fileId={curso.logoFileId}
+                            title={curso.nomeInterno}
+                            className="size-12 rounded-xl"
+                            iconSize="size-6"
+                          />
                           <div className="min-w-0 flex-1">
                             <div className="mb-1.5 flex items-start justify-between gap-2">
                               <h3 className="line-clamp-2 font-semibold leading-snug text-foreground">
-                                {curso.tituloComercial}
+                                {curso.nomeInterno}
                               </h3>
                               <DropdownMenu>
                                 <DropdownMenuTrigger asChild>
@@ -1123,12 +1134,12 @@ export default function CursosPage() {
                             </div>
                             <p className="text-xs text-muted-foreground">
                               <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
-                                {curso.codigo}
+                                {curso.slug}
                               </code>
                               <span className="mx-1.5 text-muted-foreground/50">
                                 |
                               </span>
-                              <span>{curso.nomeInterno}</span>
+                              <span>{curso.tituloComercial}</span>
                             </p>
                           </div>
                         </div>
@@ -1236,25 +1247,33 @@ export default function CursosPage() {
                             onCheckedChange={() => {}}
                             onClick={(e) => toggleSelect(curso.id, e)}
                             aria-label={t('table.selectCourse', {
-                              title: curso.tituloComercial,
+                              title: curso.nomeInterno,
                             })}
                             className="border-2 bg-background shadow-sm"
                           />
                         </TableCell>
                         <TableCell>
-                          <div className="min-w-0">
-                            <p className="truncate font-semibold text-foreground">
-                              {curso.tituloComercial}
-                            </p>
-                            <p className="mt-1 truncate text-xs text-muted-foreground">
-                              <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
-                                {curso.codigo}
-                              </code>
-                              <span className="mx-1.5 text-muted-foreground/50">
-                                |
-                              </span>
-                              <span>{curso.nomeInterno}</span>
-                            </p>
+                          <div className="flex min-w-0 items-center gap-3">
+                            <CourseAvatar
+                              fileId={curso.logoFileId}
+                              title={curso.nomeInterno}
+                              className="size-8 shrink-0 rounded-lg"
+                              iconSize="size-4"
+                            />
+                            <div className="min-w-0">
+                              <p className="truncate font-semibold text-foreground">
+                                {curso.nomeInterno}
+                              </p>
+                              <p className="mt-1 truncate text-xs text-muted-foreground">
+                                <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
+                                  {curso.slug}
+                                </code>
+                                <span className="mx-1.5 text-muted-foreground/50">
+                                  |
+                                </span>
+                                <span>{curso.tituloComercial}</span>
+                              </p>
+                            </div>
                           </div>
                         </TableCell>
                         <TableCell>
@@ -1383,8 +1402,8 @@ export default function CursosPage() {
         form={form}
         onSubmit={onSubmit}
         categories={categoryOptions}
-        courseCode={editingCurso?.codigo}
         onCreateCategory={() => router.push('/category?new=1')}
+        initialLogoFileId={editingCurso?.logoFileId ?? null}
         t={t}
       />