@hed-hog/lms 0.0.331 → 0.0.347

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

@@ -42,13 +42,14 @@ import {
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { format } from 'date-fns';
-import { CalendarIcon, Loader2, Plus } from 'lucide-react';
+import { CalendarIcon, Loader2, Pencil, Plus } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { DateRange } from 'react-day-picker';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
+import { InstructorFormSheet } from '../instructors/_components/instructor-form-sheet';
 import {
   CourseFormSheet,
   DEFAULT_COURSE_FORM_VALUES,
@@ -56,7 +57,6 @@ import {
   type CourseCategoryOption,
   type CourseSheetFormValues,
 } from './course-form-sheet';
-import { CreateLmsPersonSheet } from './create-lms-person-sheet';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -136,6 +136,7 @@ type InstructorOption = {
   name: string;
   personId?: number;
   avatarId?: number | null;
+  userPhotoId?: number | null;
   qualificationSlugs?: string[];
 };
 
@@ -151,6 +152,8 @@ type InstructorApiRow = {
   person_id?: number | string;
   avatarId?: number | string | null;
   avatar_id?: number | string | null;
+  userPhotoId?: number | string | null;
+  user_photo_id?: number | string | null;
   qualificationSlugs?: string[];
 };
 
@@ -310,17 +313,38 @@ function normalizeInstructorOption(
     rawAvatarId !== undefined && rawAvatarId !== null
       ? Number(rawAvatarId) || null
       : null;
+  const rawUserPhotoId = item?.userPhotoId ?? item?.user_photo_id;
+  const userPhotoId =
+    rawUserPhotoId !== undefined && rawUserPhotoId !== null
+      ? Number(rawUserPhotoId) || null
+      : null;
   return {
     id,
     name,
     personId: Number(item?.personId ?? item?.person_id ?? 0) || undefined,
     avatarId,
+    userPhotoId,
     qualificationSlugs: Array.isArray(item?.qualificationSlugs)
       ? item.qualificationSlugs
       : undefined,
   };
 }
 
+function getInstructorAvatarUrl(option?: {
+  userPhotoId?: number | null;
+  avatarId?: number | null;
+}) {
+  if (option?.userPhotoId) {
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/user/avatar/${option.userPhotoId}`;
+  }
+
+  if (option?.avatarId) {
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${option.avatarId}`;
+  }
+
+  return undefined;
+}
+
 function getContrastColor(hex: string) {
   const cleaned = hex.replace('#', '');
   if (cleaned.length !== 6) return '#FFFFFF';
@@ -493,6 +517,10 @@ export interface ClassFormSheetProps {
   onOpenChange: (open: boolean) => void;
   /** Omit for create mode; provide for edit mode. */
   classId?: string;
+  defaultCourse?: { id: number; title: string };
+  lockCourse?: boolean;
+  /** Disable nested instructor sheet to avoid recursive sheet composition. */
+  enableInstructorSheet?: boolean;
   sheetTitle?: string;
   sheetDescription?: string;
   onAfterCreate?: (cls: ApiClass) => Promise<void>;
@@ -507,6 +535,9 @@ export function ClassFormSheet({
   open,
   onOpenChange,
   classId,
+  defaultCourse,
+  lockCourse = false,
+  enableInstructorSheet = true,
   sheetTitle,
   sheetDescription,
   onAfterCreate,
@@ -522,8 +553,10 @@ export function ClassFormSheet({
   const [savingCourse, setSavingCourse] = useState(false);
   const [dateRangeOpen, setDateRangeOpen] = useState(false);
   const [dateRangeDraft, setDateRangeDraft] = useState<DateRange | undefined>();
-  const [createProfessorDialogOpen, setCreateProfessorDialogOpen] =
-    useState(false);
+  const [instructorSheetOpen, setInstructorSheetOpen] = useState(false);
+  const [editingInstructorId, setEditingInstructorId] = useState<number | null>(
+    null
+  );
   const [courseSheetOpen, setCourseSheetOpen] = useState(false);
   const [customRecurrenceDialogOpen, setCustomRecurrenceDialogOpen] =
     useState(false);
@@ -664,14 +697,15 @@ export function ClassFormSheet({
     } else {
       // Create mode: reset with fresh defaults + generated code
       const nextSeed = createClassCodeSeed();
-      const nextCode = buildClassCode(undefined, nextSeed);
+      const defaultCourseTitle = defaultCourse?.title ?? '';
+      const nextCode = buildClassCode(defaultCourseTitle, nextSeed);
       setDateRangeDraft(undefined);
       setDateRangeOpen(false);
       setPreviousRecurrenceMode('none');
       form.reset({
         codigo: nextCode,
-        curso: '',
-        courseId: undefined,
+        curso: defaultCourseTitle,
+        courseId: defaultCourse?.id,
         instructorId: undefined,
         tipo: 'online',
         professor: '',
@@ -967,12 +1001,7 @@ export function ClassFormSheet({
     setCustomRecurrenceDialogOpen(false);
   }
 
-  const handleProfessorCreated = (instructor: {
-    id: number;
-    personId: number;
-    name: string;
-    qualificationSlugs: string[];
-  }) => {
+  const handleProfessorCreated = (instructor: { id: number; name: string }) => {
     form.setValue('instructorId', instructor.id, {
       shouldDirty: true,
       shouldTouch: true,
@@ -1173,6 +1202,7 @@ export function ClassFormSheet({
                         noResultsLabel={t(
                           'components.entityPicker.courses.empty'
                         )}
+                        disabled={lockCourse}
                         showCreateButton={false}
                         onChange={(value, option) => {
                           const cId =
@@ -1218,6 +1248,7 @@ export function ClassFormSheet({
                       variant="outline"
                       size="icon"
                       className="shrink-0"
+                      disabled={lockCourse}
                       onClick={() => {
                         courseForm.reset(DEFAULT_COURSE_FORM_VALUES);
                         setCourseSheetOpen(true);
@@ -1774,9 +1805,7 @@ export function ClassFormSheet({
                           .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;
+                        const avatarUrl = getInstructorAvatarUrl(option);
                         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">
@@ -1799,9 +1828,9 @@ export function ClassFormSheet({
                           .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;
+                        const avatarUrl = getInstructorAvatarUrl(
+                          option ?? undefined
+                        );
                         return (
                           <div className="flex items-center gap-2">
                             <Avatar className="h-5 w-5 shrink-0 rounded">
@@ -1821,8 +1850,26 @@ export function ClassFormSheet({
                     variant="outline"
                     size="icon"
                     className="shrink-0"
-                    onClick={() => setCreateProfessorDialogOpen(true)}
-                    aria-label="Cadastrar novo professor"
+                    disabled={!watchedFormValues.instructorId}
+                    onClick={() => {
+                      if (!watchedFormValues.instructorId) return;
+                      setEditingInstructorId(watchedFormValues.instructorId);
+                      setInstructorSheetOpen(true);
+                    }}
+                    aria-label="Editar instrutor"
+                  >
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    className="shrink-0"
+                    onClick={() => {
+                      setEditingInstructorId(null);
+                      setInstructorSheetOpen(true);
+                    }}
+                    aria-label="Cadastrar novo instrutor"
                   >
                     <Plus className="h-4 w-4" />
                   </Button>
@@ -2032,18 +2079,18 @@ export function ClassFormSheet({
         t={courseSheetT}
       />
 
-      {/* Professor create sheet */}
-      <CreateLmsPersonSheet
-        open={createProfessorDialogOpen}
-        onOpenChange={setCreateProfessorDialogOpen}
-        onCreated={handleProfessorCreated}
-        title="Cadastrar novo professor"
-        description="Crie um novo professor para seleciona-lo nesta turma."
-        submitLabel="Cadastrar"
-        successMessage="Professor cadastrado com sucesso."
-        errorMessage="Não foi possível cadastrar o professor."
-        defaultQualificationSlugs={['class-sessions']}
-      />
+      {/* Instructor create/edit sheet */}
+      {enableInstructorSheet && (
+        <InstructorFormSheet
+          open={instructorSheetOpen}
+          onOpenChange={(nextOpen) => {
+            setInstructorSheetOpen(nextOpen);
+            if (!nextOpen) setEditingInstructorId(null);
+          }}
+          instructorId={editingInstructorId}
+          onSaved={handleProfessorCreated}
+        />
+      )}
     </>
   );
 }

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

@@ -526,14 +526,14 @@ export function CourseFormSheet({
           </Field>
 
           <Field>
-            <FieldLabel htmlFor="descricao">
+            <FieldLabel htmlFor="descricao">
               {t('form.fields.description.label')}
             </FieldLabel>
             <Textarea
-              id="descricao"
+              id="descricao"
               rows={3}
               placeholder={t('form.fields.description.placeholder')}
-              {...form.register('descricao')}
+              {...form.register('descricao')}
             />
             <FieldError>{form.formState.errors.descricao?.message}</FieldError>
           </Field>