@hed-hog/lms 0.0.347 → 0.0.350

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

@@ -57,6 +57,7 @@ import {
   type CourseCategoryOption,
   type CourseSheetFormValues,
 } from './course-form-sheet';
+import { CoursePicker } from './course-picker';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -104,14 +105,6 @@ export type ApiClass = {
   sessionRecurrenceSummary?: SessionRecurrenceSummary | null;
 };
 
-type ApiCourseList = {
-  data: Array<{ id: number; title: string }>;
-  total?: number;
-  page?: number;
-  pageSize?: number;
-  lastPage?: number;
-};
-
 type ApiCategoryList = {
   data: ApiCategory[];
   total: number;
@@ -131,6 +124,21 @@ type ApiCreatedCourse = {
   title: string;
 };
 
+type ApiCourseDetail = {
+  id: number;
+  code?: string;
+  slug?: string;
+  title: string;
+  description?: string;
+  level?: 'beginner' | 'intermediate' | 'advanced';
+  status?: 'draft' | 'published' | 'archived';
+  categories?: string[];
+  primaryColor?: string | null;
+  secondaryColor?: string | null;
+  logoFileId?: number | null;
+  operationsProjectId?: number | null;
+};
+
 type InstructorOption = {
   id: number;
   name: string;
@@ -367,6 +375,18 @@ function toApiCourseStatus(status: CourseSheetFormValues['status']) {
   return 'archived';
 }
 
+function toCourseFormLevel(level?: string): CourseSheetFormValues['nivel'] {
+  if (level === 'intermediate') return 'intermediario';
+  if (level === 'advanced') return 'avancado';
+  return 'iniciante';
+}
+
+function toCourseFormStatus(status?: string): CourseSheetFormValues['status'] {
+  if (status === 'published') return 'ativo';
+  if (status === 'archived') return 'arquivado';
+  return 'rascunho';
+}
+
 // ── Constants ─────────────────────────────────────────────────────────────────
 
 const TIME_OPTIONS = Array.from({ length: 32 }, (_, index) => {
@@ -558,6 +578,8 @@ export function ClassFormSheet({
     null
   );
   const [courseSheetOpen, setCourseSheetOpen] = useState(false);
+  const [editingCourseId, setEditingCourseId] = useState<number | null>(null);
+  const [coursePickerRefreshToken, setCoursePickerRefreshToken] = useState(0);
   const [customRecurrenceDialogOpen, setCustomRecurrenceDialogOpen] =
     useState(false);
   const [previousRecurrenceMode, setPreviousRecurrenceMode] =
@@ -1024,32 +1046,71 @@ export function ClassFormSheet({
         description: data.descricao,
         level: toApiCourseLevel(data.nivel),
         status: toApiCourseStatus(data.status),
+        offeringType: 'scheduled' as const,
         categorySlugs: data.categorias,
         primaryColor: data.primaryColor,
         primaryContrastColor: getContrastColor(data.primaryColor),
         secondaryColor: data.secondaryColor,
         secondaryContrastColor: getContrastColor(data.secondaryColor),
+        operationsProjectId: data.operationsProjectId
+          ? Number(data.operationsProjectId)
+          : null,
       };
 
-      const response = await request<ApiCreatedCourse>({
-        url: '/lms/courses',
-        method: 'POST',
-        data: payload,
-      });
+      if (editingCourseId) {
+        await request({
+          url: `/lms/courses/${editingCourseId}`,
+          method: 'PATCH',
+          data: {
+            slug: data.nomeInterno.trim().toLowerCase(),
+            title: data.tituloComercial,
+            description: data.descricao,
+            level: toApiCourseLevel(data.nivel),
+            status: toApiCourseStatus(data.status),
+            categorySlugs: data.categorias,
+            primaryColor: data.primaryColor,
+            primaryContrastColor: getContrastColor(data.primaryColor),
+            secondaryColor: data.secondaryColor,
+            secondaryContrastColor: getContrastColor(data.secondaryColor),
+            operationsProjectId: data.operationsProjectId
+              ? Number(data.operationsProjectId)
+              : null,
+            logoFileId: data.logoFileId ?? null,
+          },
+        });
 
-      const createdCourse = response.data;
-      form.setValue('courseId', createdCourse.id, {
-        shouldDirty: true,
-        shouldTouch: true,
-        shouldValidate: true,
-      });
-      form.setValue('curso', createdCourse.title, {
-        shouldDirty: true,
-        shouldTouch: true,
-        shouldValidate: false,
-      });
+        form.setValue('curso', data.tituloComercial, {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate: false,
+        });
+
+        toast.success(courseSheetT('toasts.courseUpdated'));
+      } else {
+        const response = await request<ApiCreatedCourse>({
+          url: '/lms/courses',
+          method: 'POST',
+          data: payload,
+        });
+
+        const createdCourse = response.data;
+        form.setValue('courseId', createdCourse.id, {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate: true,
+        });
+        form.setValue('curso', createdCourse.title, {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate: false,
+        });
+
+        toast.success(courseSheetT('toasts.courseCreated'));
+      }
+
+      setCoursePickerRefreshToken((current) => current + 1);
+      setEditingCourseId(null);
       setCourseSheetOpen(false);
-      toast.success(courseSheetT('toasts.courseCreated'));
     } catch {
       toast.error(t('messages.classCreateCourseError'));
     } finally {
@@ -1183,81 +1244,80 @@ export function ClassFormSheet({
                     {t('form.fields.course.label')}{' '}
                     <span className="text-destructive">*</span>
                   </FieldLabel>
-                  <div className="flex items-end gap-2">
-                    <div className="min-w-0 flex-1">
-                      <EntityPicker<{ id: number; title: string }, TurmaForm>
-                        form={form}
-                        name="courseId"
-                        valueType="number"
-                        placeholder={t('form.fields.course.placeholder')}
-                        entityLabel={t('form.fields.course.label')}
-                        initialSelectedLabel={selectedCourseTitle}
-                        searchPlaceholder={t('form.fields.course.placeholder')}
-                        emptyStateDescription={t(
-                          'components.entityPicker.courses.empty'
-                        )}
-                        loadingLabel={t(
-                          'components.entityPicker.courses.loading'
-                        )}
-                        noResultsLabel={t(
-                          'components.entityPicker.courses.empty'
-                        )}
-                        disabled={lockCourse}
-                        showCreateButton={false}
-                        onChange={(value, option) => {
-                          const cId =
-                            typeof value === 'number' ? value : undefined;
-                          const cTitle =
-                            option && typeof option.title === 'string'
-                              ? option.title
-                              : '';
-                          form.setValue('courseId', cId, {
-                            shouldDirty: true,
-                            shouldTouch: true,
-                            shouldValidate: true,
-                          });
-                          form.setValue('curso', cTitle, {
-                            shouldDirty: true,
-                            shouldTouch: true,
-                            shouldValidate: false,
-                          });
-                        }}
-                        loadOptions={async ({ page, pageSize, search }) => {
-                          const response = await request<ApiCourseList>({
-                            url: '/lms/courses',
-                            method: 'GET',
-                            params: {
-                              page,
-                              pageSize,
-                              ...(search.trim()
-                                ? { search: search.trim() }
-                                : {}),
-                            },
-                          });
-                          return {
-                            items: response.data?.data ?? [],
-                            hasMore: page < (response.data?.lastPage ?? 1),
-                          };
-                        }}
-                        getOptionValue={(option) => option.id}
-                        getOptionLabel={(option) => option.title}
-                      />
-                    </div>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="icon"
-                      className="shrink-0"
-                      disabled={lockCourse}
-                      onClick={() => {
-                        courseForm.reset(DEFAULT_COURSE_FORM_VALUES);
-                        setCourseSheetOpen(true);
-                      }}
-                      aria-label="Cadastrar novo curso"
-                    >
-                      <Plus className="h-4 w-4" />
-                    </Button>
-                  </div>
+                  <CoursePicker<TurmaForm>
+                    form={form}
+                    name="courseId"
+                    selectedCourseTitle={selectedCourseTitle}
+                    placeholder={t('form.fields.course.placeholder')}
+                    entityLabel={t('form.fields.course.label')}
+                    searchPlaceholder={t('form.fields.course.placeholder')}
+                    emptyStateDescription={t(
+                      'components.entityPicker.courses.empty'
+                    )}
+                    loadingLabel={t('components.entityPicker.courses.loading')}
+                    noResultsLabel={t('components.entityPicker.courses.empty')}
+                    disabled={lockCourse}
+                    allowClearSelection={!lockCourse}
+                    showCreateButton={!lockCourse}
+                    showEditButton={!lockCourse}
+                    searchEndpoint="/lms/courses"
+                    searchExtraParams={{
+                      offeringTypes: 'scheduled,blended,on_demand',
+                    }}
+                    refreshToken={coursePickerRefreshToken}
+                    isOptionDisabled={(option) =>
+                      option.offeringType === 'on_demand'
+                    }
+                    onSelectionChange={(value, option) => {
+                      const cId = typeof value === 'number' ? value : undefined;
+                      const cTitle =
+                        option && typeof option.title === 'string'
+                          ? option.title
+                          : '';
+
+                      form.setValue('courseId', cId, {
+                        shouldDirty: true,
+                        shouldTouch: true,
+                        shouldValidate: true,
+                      });
+                      form.setValue('curso', cTitle, {
+                        shouldDirty: true,
+                        shouldTouch: true,
+                        shouldValidate: false,
+                      });
+                    }}
+                    onCreateClick={() => {
+                      setEditingCourseId(null);
+                      courseForm.reset(DEFAULT_COURSE_FORM_VALUES);
+                      setCourseSheetOpen(true);
+                    }}
+                    onEditClick={async (selected) => {
+                      if (!selected?.id) return;
+
+                      const response = await request<ApiCourseDetail>({
+                        url: `/lms/courses/${selected.id}`,
+                        method: 'GET',
+                      });
+
+                      const detail = response.data;
+                      setEditingCourseId(detail.id);
+                      courseForm.reset({
+                        nomeInterno: detail.slug ?? detail.code ?? '',
+                        tituloComercial: detail.title ?? '',
+                        descricao: detail.description ?? '',
+                        nivel: toCourseFormLevel(detail.level),
+                        status: toCourseFormStatus(detail.status),
+                        categorias: detail.categories ?? [],
+                        operationsProjectId: detail.operationsProjectId
+                          ? String(detail.operationsProjectId)
+                          : '',
+                        primaryColor: detail.primaryColor ?? '#1D4ED8',
+                        secondaryColor: detail.secondaryColor ?? '#111827',
+                        logoFileId: detail.logoFileId ?? null,
+                      });
+                      setCourseSheetOpen(true);
+                    }}
+                  />
                 </Field>
               </div>
 
@@ -2063,10 +2123,15 @@ export function ClassFormSheet({
 
       {/* Course create sheet */}
       <CourseFormSheet
-        key="class-form-sheet-course-create"
+        key={`class-form-sheet-course-${editingCourseId ?? 'create'}`}
         open={courseSheetOpen}
-        onOpenChange={setCourseSheetOpen}
-        editing={false}
+        onOpenChange={(nextOpen) => {
+          setCourseSheetOpen(nextOpen);
+          if (!nextOpen) {
+            setEditingCourseId(null);
+          }
+        }}
+        editing={Boolean(editingCourseId)}
         saving={savingCourse}
         form={courseForm}
         onSubmit={onSubmitCourse}

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

@@ -15,6 +15,7 @@ import {
   FieldError,
   FieldLabel,
 } from '@/components/ui/field';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import { Input } from '@/components/ui/input';
 import {
   Popover,
@@ -37,7 +38,7 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { Textarea } from '@/components/ui/textarea';
-import { useApp } from '@hed-hog/next-app-provider';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   ChevronsUpDown,
   ImageIcon,
@@ -55,6 +56,15 @@ export type CourseCategoryOption = {
   label: string;
 };
 
+type OperationsProjectOption = {
+  id: number;
+  code?: string | null;
+  name: string;
+  label?: string;
+  clientName?: string | null;
+  status?: string | null;
+};
+
 // ---------------------------------------------------------------------------
 // Color extraction utilities
 // ---------------------------------------------------------------------------
@@ -222,6 +232,7 @@ export function getCourseSheetSchema(t: (key: string) => string) {
     nivel: z.enum(['iniciante', 'intermediario', 'avancado']).optional(),
     status: z.enum(['ativo', 'rascunho', 'arquivado']).optional(),
     categorias: z.array(z.string()).optional(),
+    operationsProjectId: z.string().optional(),
     primaryColor: z.string().optional(),
     secondaryColor: z.string().optional(),
     logoFileId: z.number().nullable().optional(),
@@ -236,6 +247,7 @@ export type CourseSheetFormValues = {
   nivel: 'iniciante' | 'intermediario' | 'avancado';
   status: 'ativo' | 'rascunho' | 'arquivado';
   categorias: string[];
+  operationsProjectId: string;
   primaryColor: string;
   secondaryColor: string;
   logoFileId?: number | null;
@@ -249,6 +261,7 @@ export const DEFAULT_COURSE_FORM_VALUES: CourseSheetFormValues = {
   nivel: 'iniciante',
   status: 'rascunho',
   categorias: [],
+  operationsProjectId: '',
   primaryColor: '#1D4ED8',
   secondaryColor: '#111827',
   logoFileId: null,
@@ -312,6 +325,36 @@ export function CourseFormSheet({
   const [colorExtracting, setColorExtracting] = useState(false);
   const logoInputRef = useRef<HTMLInputElement>(null);
   const colorExtractionRef = useRef<{ cancelled: boolean } | null>(null);
+  const { data: operationsProjectsData } = useQuery<
+    { data: OperationsProjectOption[] } | OperationsProjectOption[]
+  >({
+    queryKey: ['lms-course-form-operations-projects'],
+    enabled: open,
+    queryFn: async () => {
+      try {
+        const response = await request<
+          { data: OperationsProjectOption[] } | OperationsProjectOption[]
+        >({
+          url: '/operations/projects/options?pageSize=200&sortField=name&sortOrder=asc',
+          method: 'GET',
+        });
+        return response.data;
+      } catch {
+        return { data: [] };
+      }
+    },
+    initialData: { data: [] },
+  });
+  const operationsProjectOptions = (
+    Array.isArray(operationsProjectsData)
+      ? operationsProjectsData
+      : (operationsProjectsData?.data ?? [])
+  ).map((project) => ({
+    value: String(project.id),
+    label: project.name,
+    description: project.code ?? project.clientName ?? null,
+    meta: project.status ?? null,
+  }));
 
   useEffect(() => {
     if (!initialLogoFileId) {
@@ -538,6 +581,42 @@ export function CourseFormSheet({
             <FieldError>{form.formState.errors.descricao?.message}</FieldError>
           </Field>
 
+          <Field>
+            <FieldLabel>Projeto vinculado</FieldLabel>
+            <Controller
+              name="operationsProjectId"
+              control={form.control}
+              render={({ field }) => (
+                <EntityPicker<{
+                  value: string;
+                  label: string;
+                  description?: string | null;
+                  meta?: string | null;
+                }>
+                  value={field.value}
+                  onChange={(value) => field.onChange(String(value ?? ''))}
+                  options={operationsProjectOptions}
+                  placeholder="Selecione um projeto do Operations"
+                  searchPlaceholder="Buscar projeto..."
+                  entityLabel="projeto"
+                  emptyStateDescription="Nenhum projeto disponível"
+                  getOptionValue={(option) => option.value}
+                  getOptionLabel={(option) => option.label}
+                  getOptionDescription={(option) =>
+                    option.description || option.meta || undefined
+                  }
+                />
+              )}
+            />
+            <FieldDescription>
+              Quando o curso estiver vinculado a um projeto, cada nova aula gera
+              uma tarefa automaticamente.
+            </FieldDescription>
+            <FieldError>
+              {form.formState.errors.operationsProjectId?.message}
+            </FieldError>
+          </Field>
+
           <div className="grid grid-cols-2 gap-4">
             <Field>
               <FieldLabel>{t('form.fields.level.label')}</FieldLabel>