@hed-hog/lms 0.0.330 → 0.0.338

package/hedhog/frontend/app/courses/[id]/structure/_components/editor-course.tsx.ejs

@@ -23,7 +23,6 @@ import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
-import { CreateLmsPersonSheet } from '@/app/(app)/(libraries)/lms/_components/create-lms-person-sheet';
 import { createDefaultTemplate } from '@/app/(app)/(libraries)/lms/_lib/editor/types';
 import { RichTextEditor } from '@/components/rich-text-editor';
 import { Badge } from '@/components/ui/badge';
@@ -48,10 +47,19 @@ import {
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
+import { InstructorFormSheet } from '../../../../instructors/_components/instructor-form-sheet';
 import type {
   CourseEditFormValues,
   PickerOption,
@@ -114,6 +122,16 @@ type ApiCourseDetail = {
 };
 
 type ApiCategory = { id: number; slug: string; name: string };
+type ApiCategoryDetail = {
+  id: number;
+  slug: string;
+  name?: string;
+  category_id?: number | null;
+  color?: string | null;
+  icon?: string | null;
+  status?: 'active' | 'inactive';
+  category_locale?: Array<{ locale_id: number; name: string }>;
+};
 type ApiCategoryList = {
   data: ApiCategory[];
   total: number;
@@ -284,7 +302,27 @@ export function EditorCourse() {
 
   // ── UI state ────────────────────────────────────────────────────────────────
   const [activeTab, setActiveTab] = useState('estrutura');
-  const [instructorSheetOpen, setInstructorSheetOpen] = useState(false);
+  const [instructorEditSheetOpen, setInstructorEditSheetOpen] = useState(false);
+  const [editingInstructorId, setEditingInstructorId] = useState<number | null>(
+    null
+  );
+  const [categoryEditSheetOpen, setCategoryEditSheetOpen] = useState(false);
+  const [editingCategoryId, setEditingCategoryId] = useState<number | null>(
+    null
+  );
+  const [editingCategoryOriginalSlug, setEditingCategoryOriginalSlug] =
+    useState('');
+  const [editingCategoryName, setEditingCategoryName] = useState('');
+  const [editingCategorySlug, setEditingCategorySlug] = useState('');
+  const [editingCategoryColor, setEditingCategoryColor] = useState('#000000');
+  const [editingCategoryIcon, setEditingCategoryIcon] = useState('');
+  const [editingCategoryParentId, setEditingCategoryParentId] = useState<
+    number | null
+  >(null);
+  const [editingCategoryStatus, setEditingCategoryStatus] = useState<
+    'active' | 'inactive'
+  >('active');
+  const [savingCategoryEdit, setSavingCategoryEdit] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [logoPreview, setLogoPreview] = useState<string | null>(null);
@@ -691,7 +729,7 @@ export function EditorCourse() {
 
   async function handleCreateCategory(values: Record<string, string>) {
     const name = String(values.name ?? '').trim();
-    const slug = slugify(values.slug || values.name || '');
+    const slug = slugify(values.name || values.slug || '');
     if (!name || !slug) {
       toast.error('Informe nome e slug para criar a categoria.');
       return null;
@@ -764,26 +802,112 @@ export function EditorCourse() {
     }
   }
 
-  const handleInstructorCreated = async (instructor: {
-    id: number;
-    personId: number;
-    name: string;
-    avatarId?: number | null;
-    email?: string | null;
-    phone?: string | null;
-    qualificationSlugs: string[];
-  }) => {
-    const createdId = String(instructor.id);
-    const current = form.getValues('instrutores') ?? [];
-    if (!current.includes(createdId)) {
-      form.setValue('instrutores', [...current, createdId], {
-        shouldDirty: true,
-        shouldTouch: true,
-        shouldValidate: true,
+  function handleCreateInstructor() {
+    setEditingInstructorId(null);
+    setInstructorEditSheetOpen(true);
+  }
+
+  function handleEditInstructor(instructorId: string) {
+    const parsed = Number(instructorId);
+    if (!Number.isFinite(parsed) || parsed <= 0) {
+      toast.error('Instrutor inválido para edição.');
+      return;
+    }
+    setEditingInstructorId(parsed);
+    setInstructorEditSheetOpen(true);
+  }
+
+  async function handleEditCategory(categorySlug: string) {
+    const category = (categoryListData?.data ?? []).find(
+      (item) => item.slug === categorySlug
+    );
+
+    if (!category?.id) {
+      toast.error('Categoria não encontrada para edição.');
+      return;
+    }
+
+    try {
+      const response = await request<ApiCategoryDetail>({
+        url: `/category/${category.id}`,
+        method: 'GET',
       });
+      const detail = response.data;
+      const localeName = detail.category_locale?.[0]?.name ?? detail.name ?? '';
+
+      setEditingCategoryId(detail.id);
+      setEditingCategoryOriginalSlug(detail.slug || categorySlug);
+      setEditingCategorySlug(detail.slug || categorySlug);
+      setEditingCategoryName(localeName);
+      setEditingCategoryColor(detail.color || '#000000');
+      setEditingCategoryIcon(detail.icon || '');
+      setEditingCategoryParentId(detail.category_id ?? null);
+      setEditingCategoryStatus(detail.status || 'active');
+      setCategoryEditSheetOpen(true);
+    } catch {
+      toast.error('Não foi possível carregar a categoria para edição.');
     }
-    await refetchInstructorOptions();
-  };
+  }
+
+  async function handleSaveCategoryEdit() {
+    if (!editingCategoryId) return;
+
+    const name = editingCategoryName.trim();
+    const slug = slugify(editingCategorySlug);
+
+    if (!name || !slug) {
+      toast.error('Informe nome e slug válidos para a categoria.');
+      return;
+    }
+
+    const localeCode =
+      currentLocaleCode ||
+      (locales?.[0] as Locale | undefined)?.code ||
+      'pt-BR';
+
+    setSavingCategoryEdit(true);
+    try {
+      await request({
+        url: `/category/${editingCategoryId}`,
+        method: 'PATCH',
+        data: {
+          locale: {
+            [localeCode]: {
+              name,
+            },
+          },
+          slug,
+          category_id: editingCategoryParentId,
+          color: editingCategoryColor,
+          icon: editingCategoryIcon,
+          status: editingCategoryStatus,
+        },
+      });
+
+      const selectedCategories = form.getValues('categorias') ?? [];
+      if (editingCategoryOriginalSlug && editingCategoryOriginalSlug !== slug) {
+        form.setValue(
+          'categorias',
+          selectedCategories.map((item) =>
+            item === editingCategoryOriginalSlug ? slug : item
+          ),
+          {
+            shouldDirty: true,
+            shouldTouch: true,
+            shouldValidate: true,
+          }
+        );
+      }
+
+      await refetchCategoryOptions();
+      setCategoryEditSheetOpen(false);
+      toast.success('Categoria atualizada com sucesso.');
+    } catch {
+      toast.error('Não foi possível atualizar a categoria.');
+    } finally {
+      setSavingCategoryEdit(false);
+    }
+  }
 
   async function handleDelete() {
     setDeleting(true);
@@ -1008,7 +1132,9 @@ export function EditorCourse() {
                     categoryOptions={categoryOptions}
                     instructorOptions={instructorOptions}
                     onCreateCategory={handleCreateCategory}
-                    onCreateInstructor={() => setInstructorSheetOpen(true)}
+                    onCreateInstructor={handleCreateInstructor}
+                    onEditCategory={handleEditCategory}
+                    onEditInstructor={handleEditInstructor}
                   />
                   <CourseContentCard form={form} />
                 </TabsContent>
@@ -1131,19 +1257,102 @@ export function EditorCourse() {
         </div>
       </form>
 
-      {/* ── Instructor sheet ─────────────────────────────────────────────── */}
-      <CreateLmsPersonSheet
-        open={instructorSheetOpen}
-        onOpenChange={setInstructorSheetOpen}
-        onCreated={handleInstructorCreated}
-        title="Cadastrar instrutor"
-        description="Cadastre um novo instrutor e adicione-o ao curso."
-        submitLabel="Cadastrar instrutor"
-        successMessage="Instrutor cadastrado com sucesso."
-        errorMessage="Não foi possível cadastrar o instrutor."
-        defaultQualificationSlugs={['course-lessons']}
+      <InstructorFormSheet
+        open={instructorEditSheetOpen}
+        onOpenChange={(open) => {
+          setInstructorEditSheetOpen(open);
+          if (!open) {
+            setEditingInstructorId(null);
+          }
+        }}
+        instructorId={editingInstructorId}
+        onSaved={async (instructor) => {
+          if (editingInstructorId === null && instructor?.id) {
+            const createdId = String(instructor.id);
+            const current = form.getValues('instrutores') ?? [];
+            if (!current.includes(createdId)) {
+              form.setValue('instrutores', [...current, createdId], {
+                shouldDirty: true,
+                shouldTouch: true,
+                shouldValidate: true,
+              });
+            }
+          }
+
+          await refetchInstructorOptions();
+          await refetchCourse();
+        }}
       />
 
+      <Sheet
+        open={categoryEditSheetOpen}
+        onOpenChange={(open) => {
+          setCategoryEditSheetOpen(open);
+          if (!open) {
+            setEditingCategoryId(null);
+            setEditingCategoryOriginalSlug('');
+            setEditingCategoryName('');
+            setEditingCategorySlug('');
+            setEditingCategoryColor('#000000');
+            setEditingCategoryIcon('');
+            setEditingCategoryParentId(null);
+            setEditingCategoryStatus('active');
+          }
+        }}
+      >
+        <SheetContent className="sm:max-w-lg">
+          <SheetHeader>
+            <SheetTitle>Editar categoria</SheetTitle>
+            <SheetDescription>
+              Atualize rapidamente os dados da categoria vinculada ao curso.
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="space-y-3 px-4 pb-4">
+            <div className="space-y-1.5">
+              <FormLabel>Nome</FormLabel>
+              <Input
+                value={editingCategoryName}
+                onChange={(event) => {
+                  const nextName = event.target.value;
+                  setEditingCategoryName(nextName);
+                  setEditingCategorySlug(slugify(nextName));
+                }}
+                placeholder="Nome da categoria"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <FormLabel>Slug</FormLabel>
+              <Input
+                value={editingCategorySlug}
+                readOnly
+                placeholder="slug-da-categoria"
+              />
+            </div>
+          </div>
+
+          <SheetFooter>
+            <Button
+              variant="outline"
+              onClick={() => setCategoryEditSheetOpen(false)}
+              disabled={savingCategoryEdit}
+            >
+              Cancelar
+            </Button>
+            <Button
+              onClick={handleSaveCategoryEdit}
+              disabled={savingCategoryEdit}
+            >
+              {savingCategoryEdit ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : null}
+              Salvar
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+
       {/* ── Delete dialog ────────────────────────────────────────────────── */}
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <DialogContent>