@hed-hog/lms 0.0.328 → 0.0.329

package/hedhog/frontend/app/_components/create-lms-instructor-sheet.tsx.ejs

@@ -1,591 +0,0 @@
-'use client';
-
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldLabel,
-} from '@/components/ui/field';
-import { Input } from '@/components/ui/input';
-import { Progress } from '@/components/ui/progress';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Switch } from '@/components/ui/switch';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader2, Trash2, Upload } from 'lucide-react';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-const createInstructorSchema = z.object({
-  nome: z.string().trim().min(3, 'Nome e obrigatorio'),
-  email: z
-    .string()
-    .trim()
-    .max(255)
-    .refine(
-      (value) => !value || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
-      'E-mail invalido'
-    ),
-  telefone: z
-    .string()
-    .trim()
-    .max(50)
-    .refine(
-      (value) => !value || /^[0-9+()\s-]{8,20}$/.test(value),
-      'Telefone invalido'
-    ),
-  qualificationSlugs: z
-    .array(z.string())
-    .min(1, 'Selecione pelo menos uma atuacao'),
-});
-
-type CreateInstructorForm = z.infer<typeof createInstructorSchema>;
-
-type CreatedInstructor = {
-  id: number;
-  personId: number;
-  name: string;
-  avatarId?: number | null;
-  email?: string | null;
-  phone?: string | null;
-  qualificationSlugs: string[];
-};
-
-type InstructorDetails = CreatedInstructor & {
-  status?: 'active' | 'inactive';
-};
-
-type CreateLmsInstructorSheetProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onCreated?: (instructor: CreatedInstructor) => void | Promise<void>;
-  onSaved?: (instructor: CreatedInstructor) => void | Promise<void>;
-  instructorId?: number | null;
-  title: string;
-  description: string;
-  submitLabel: string;
-  successMessage: string;
-  errorMessage: string;
-  defaultQualificationSlugs?: string[];
-};
-
-type UploadedFilePayload = {
-  id?: number;
-};
-
-type OpenFilePayload = {
-  url?: string;
-};
-
-const QUALIFICATION_OPTIONS = [
-  {
-    slug: 'course-lessons',
-    label: 'Aulas de curso',
-    description: 'Pode atuar em aulas gravadas e estrutura de curso.',
-  },
-  {
-    slug: 'class-sessions',
-    label: 'Sessoes de turma',
-    description: 'Pode atuar em contextos ao vivo e turmas.',
-  },
-];
-
-function getInstructorInitials(name?: string | null) {
-  return String(name || '')
-    .split(' ')
-    .filter(Boolean)
-    .slice(0, 2)
-    .map((part) => part[0]?.toUpperCase() || '')
-    .join('');
-}
-
-function getInstructorAvatarUrl(fileId?: number | null) {
-  return typeof fileId === 'number' && fileId > 0
-    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${fileId}`
-    : '/placeholder.png';
-}
-
-export function CreateLmsInstructorSheet({
-  open,
-  onOpenChange,
-  onCreated,
-  onSaved,
-  instructorId,
-  title,
-  description,
-  submitLabel,
-  successMessage,
-  errorMessage,
-  defaultQualificationSlugs,
-}: CreateLmsInstructorSheetProps) {
-  const { request } = useApp();
-  const [saving, setSaving] = useState(false);
-  const [avatarId, setAvatarId] = useState<number | null>(null);
-  const [persistedAvatarId, setPersistedAvatarId] = useState<number | null>(
-    null
-  );
-  const [avatarPreviewUrl, setAvatarPreviewUrl] =
-    useState<string>('/placeholder.png');
-  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);
-  const [avatarUploadProgress, setAvatarUploadProgress] = useState(0);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const isEditing = typeof instructorId === 'number' && instructorId > 0;
-
-  const initialQualificationSlugs = useMemo(
-    () =>
-      defaultQualificationSlugs && defaultQualificationSlugs.length > 0
-        ? [...new Set(defaultQualificationSlugs)]
-        : ['course-lessons'],
-    [defaultQualificationSlugs]
-  );
-
-  const form = useForm<CreateInstructorForm>({
-    resolver: zodResolver(createInstructorSchema),
-    defaultValues: {
-      nome: '',
-      email: '',
-      telefone: '',
-      qualificationSlugs: initialQualificationSlugs,
-    },
-  });
-
-  const {
-    data: instructorDetails,
-    isLoading: loadingInstructorDetails,
-    refetch: refetchInstructorDetails,
-  } = useQuery<InstructorDetails>({
-    queryKey: ['lms-instructor-sheet', instructorId],
-    enabled: open && isEditing,
-    queryFn: async () => {
-      const response = await request<InstructorDetails>({
-        url: `/lms/instructors/${instructorId}`,
-        method: 'GET',
-      });
-
-      return response.data;
-    },
-  });
-
-  useEffect(() => {
-    if (!open || !isEditing) {
-      return;
-    }
-
-    void refetchInstructorDetails();
-  }, [isEditing, open, refetchInstructorDetails]);
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    const instructor = isEditing ? instructorDetails : undefined;
-
-    if (isEditing && !instructor) {
-      return;
-    }
-
-    const instructorQualificationSlugs: string[] = Array.isArray(
-      instructor?.qualificationSlugs
-    )
-      ? instructor.qualificationSlugs
-      : [];
-
-    form.reset({
-      nome: instructor?.name || '',
-      email: instructor?.email || '',
-      telefone: instructor?.phone || '',
-      qualificationSlugs:
-        instructorQualificationSlugs.length > 0
-          ? instructorQualificationSlugs
-          : initialQualificationSlugs,
-    });
-
-    const nextAvatarId = instructor?.avatarId ?? null;
-    setAvatarId(nextAvatarId);
-    setPersistedAvatarId(nextAvatarId);
-    setAvatarPreviewUrl(getInstructorAvatarUrl(nextAvatarId));
-    setIsUploadingAvatar(false);
-    setAvatarUploadProgress(0);
-  }, [form, initialQualificationSlugs, instructorDetails, isEditing, open]);
-
-  const deleteFileById = async (fileId?: number | null) => {
-    if (!fileId || fileId <= 0) return;
-
-    try {
-      await request({
-        url: '/file',
-        method: 'DELETE',
-        data: { ids: [fileId] },
-      });
-    } catch {
-      // Ignore cleanup failures to avoid interrupting the sheet flow.
-    }
-  };
-
-  const cleanupUnsavedAvatar = async () => {
-    if (avatarId && avatarId !== persistedAvatarId) {
-      await deleteFileById(avatarId);
-    }
-  };
-
-  const handleAvatarUpload = async (file: File) => {
-    if (!file.type.startsWith('image/')) {
-      toast.error('Selecione um arquivo de imagem valido.');
-      return;
-    }
-
-    if (file.size > 5 * 1024 * 1024) {
-      toast.error('A imagem deve ter no maximo 5MB.');
-      return;
-    }
-
-    setIsUploadingAvatar(true);
-    setAvatarUploadProgress(0);
-
-    try {
-      const formData = new FormData();
-      formData.append('file', file);
-      formData.append('destination', 'contact/person/avatar');
-
-      const previousAvatarId = avatarId;
-
-      const { data } = await request<UploadedFilePayload>({
-        url: '/file',
-        method: 'POST',
-        data: formData,
-        headers: {
-          'Content-Type': 'multipart/form-data',
-        },
-        onUploadProgress: (event) => {
-          if (!event.total) return;
-          setAvatarUploadProgress(
-            Math.round((event.loaded * 100) / event.total)
-          );
-        },
-      });
-
-      const nextAvatarId = Number(data?.id);
-      if (!nextAvatarId) {
-        throw new Error('invalid avatar id');
-      }
-
-      const openResponse = await request<OpenFilePayload>({
-        url: `/file/open/${nextAvatarId}`,
-        method: 'PUT',
-      });
-
-      const openUrl = String(openResponse?.data?.url || '').trim();
-
-      if (previousAvatarId && previousAvatarId !== persistedAvatarId) {
-        await deleteFileById(previousAvatarId);
-      }
-
-      setAvatarId(nextAvatarId);
-      setAvatarPreviewUrl(
-        openUrl.length > 0
-          ? /^https?:\/\//i.test(openUrl)
-            ? openUrl
-            : `${String(process.env.NEXT_PUBLIC_API_BASE_URL || '')}${openUrl}`
-          : getInstructorAvatarUrl(nextAvatarId)
-      );
-      setAvatarUploadProgress(100);
-      toast.success('Foto enviada com sucesso.');
-    } catch {
-      toast.error('Nao foi possivel enviar a foto.');
-      setAvatarUploadProgress(0);
-    } finally {
-      setIsUploadingAvatar(false);
-      if (fileInputRef.current) {
-        fileInputRef.current.value = '';
-      }
-    }
-  };
-
-  const handleRemoveAvatar = async () => {
-    if (isUploadingAvatar) return;
-
-    if (avatarId && avatarId !== persistedAvatarId) {
-      await deleteFileById(avatarId);
-    }
-
-    setAvatarId(null);
-    setAvatarPreviewUrl('/placeholder.png');
-    setAvatarUploadProgress(0);
-    toast.success('Foto removida com sucesso.');
-  };
-
-  const handleSubmit = form.handleSubmit(async (values) => {
-    setSaving(true);
-    try {
-      const response = await request<CreatedInstructor>({
-        url: isEditing
-          ? `/lms/instructors/${instructorId}`
-          : '/lms/instructors',
-        method: isEditing ? 'PATCH' : 'POST',
-        data: {
-          name: values.nome.trim(),
-          email: values.email.trim() || undefined,
-          phone: values.telefone.trim() || undefined,
-          avatarId,
-          qualificationSlugs: values.qualificationSlugs,
-          status: 'active',
-        },
-      });
-
-      const savedInstructor = response.data;
-
-      if (!savedInstructor?.id || !savedInstructor?.name) {
-        throw new Error('invalid instructor payload');
-      }
-
-      const savedAvatarId =
-        typeof savedInstructor.avatarId === 'number'
-          ? savedInstructor.avatarId
-          : null;
-
-      form.reset({
-        nome: savedInstructor.name || values.nome.trim(),
-        email: savedInstructor.email || values.email.trim(),
-        telefone: savedInstructor.phone || values.telefone.trim(),
-        qualificationSlugs:
-          savedInstructor.qualificationSlugs?.length > 0
-            ? savedInstructor.qualificationSlugs
-            : values.qualificationSlugs,
-      });
-
-      setAvatarId(savedAvatarId);
-      setPersistedAvatarId(savedAvatarId);
-      setAvatarPreviewUrl(getInstructorAvatarUrl(savedAvatarId));
-
-      if (!isEditing && onCreated) {
-        await onCreated(savedInstructor);
-      }
-
-      if (onSaved) {
-        await onSaved(savedInstructor);
-      }
-
-      onOpenChange(false);
-      toast.success(successMessage);
-    } catch {
-      toast.error(errorMessage);
-    } finally {
-      setSaving(false);
-    }
-  });
-
-  const handleSheetOpenChange = (nextOpen: boolean) => {
-    if (nextOpen) {
-      onOpenChange(true);
-      return;
-    }
-
-    if (saving || isUploadingAvatar) {
-      return;
-    }
-
-    void cleanupUnsavedAvatar();
-    onOpenChange(false);
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={handleSheetOpenChange}>
-      <SheetContent
-        side="right"
-        className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
-      >
-        <SheetHeader>
-          <SheetTitle>{title}</SheetTitle>
-          <SheetDescription>{description}</SheetDescription>
-        </SheetHeader>
-
-        {isEditing && loadingInstructorDetails ? (
-          <div className="flex items-center gap-2 px-4 py-10 text-sm text-muted-foreground">
-            <Loader2 className="size-4 animate-spin" />
-            Carregando dados do instrutor...
-          </div>
-        ) : (
-          <form onSubmit={handleSubmit} className="mt-6 space-y-4 px-4">
-            <Field>
-              <FieldLabel>Foto</FieldLabel>
-              <FieldDescription>
-                JPG, PNG ou GIF. Tamanho maximo de 5MB.
-              </FieldDescription>
-              <div className="flex items-center gap-4 rounded-lg border p-4">
-                <Avatar className="h-22 w-22 rounded-full border">
-                  <AvatarImage
-                    src={avatarPreviewUrl}
-                    alt={form.watch('nome') || 'Instrutor'}
-                  />
-                  <AvatarFallback className="rounded-md text-sm font-semibold uppercase">
-                    {getInstructorInitials(form.watch('nome') || 'Instrutor')}
-                  </AvatarFallback>
-                </Avatar>
-
-                <div className="flex-1 space-y-2">
-                  <input
-                    ref={fileInputRef}
-                    type="file"
-                    accept="image/*"
-                    className="hidden"
-                    onChange={(event) => {
-                      const file = event.target.files?.[0];
-                      if (file) {
-                        void handleAvatarUpload(file);
-                      }
-                    }}
-                  />
-
-                  <div className="flex flex-wrap gap-2">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={() => fileInputRef.current?.click()}
-                      disabled={isUploadingAvatar}
-                    >
-                      {isUploadingAvatar ? (
-                        <Loader2 className="mr-2 size-4 animate-spin" />
-                      ) : (
-                        <Upload className="mr-2 size-4" />
-                      )}
-                      {avatarId ? 'Trocar foto' : 'Enviar foto'}
-                    </Button>
-
-                    {(avatarId || isUploadingAvatar) && (
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        onClick={() => void handleRemoveAvatar()}
-                        disabled={!avatarId || isUploadingAvatar}
-                      >
-                        <Trash2 className="mr-2 size-4" />
-                        Remover
-                      </Button>
-                    )}
-                  </div>
-
-                  {isUploadingAvatar && (
-                    <div className="space-y-1">
-                      <Progress value={avatarUploadProgress} className="h-2" />
-                      <p className="text-xs text-muted-foreground">
-                        Enviando foto... {avatarUploadProgress}%
-                      </p>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </Field>
-
-            <Field>
-              <FieldLabel htmlFor="newInstructorName">Nome</FieldLabel>
-              <Input
-                id="newInstructorName"
-                placeholder="Nome completo"
-                {...form.register('nome')}
-              />
-              <FieldError>{form.formState.errors.nome?.message}</FieldError>
-            </Field>
-
-            <Field>
-              <FieldLabel htmlFor="newInstructorEmail">Email</FieldLabel>
-              <Input
-                id="newInstructorEmail"
-                type="email"
-                placeholder="nome@exemplo.com"
-                {...form.register('email')}
-              />
-              <FieldError>{form.formState.errors.email?.message}</FieldError>
-            </Field>
-
-            <Field>
-              <FieldLabel htmlFor="newInstructorPhone">Telefone</FieldLabel>
-              <Input
-                id="newInstructorPhone"
-                placeholder="+55 (11) 90000-0000"
-                {...form.register('telefone')}
-              />
-              <FieldError>{form.formState.errors.telefone?.message}</FieldError>
-            </Field>
-
-            <Field>
-              <FieldLabel>Atuacoes</FieldLabel>
-              <FieldDescription>
-                Selecione em quais contextos esse instrutor pode atuar.
-              </FieldDescription>
-              <Controller
-                control={form.control}
-                name="qualificationSlugs"
-                render={({ field }) => (
-                  <div className="space-y-2 rounded-lg border p-3">
-                    {QUALIFICATION_OPTIONS.map((option) => {
-                      const checked = field.value.includes(option.slug);
-
-                      return (
-                        <label
-                          key={option.slug}
-                          className="flex items-start justify-between gap-3 rounded-md border px-3 py-2"
-                        >
-                          <div className="space-y-1">
-                            <p className="text-sm font-medium">
-                              {option.label}
-                            </p>
-                            <p className="text-xs text-muted-foreground">
-                              {option.description}
-                            </p>
-                          </div>
-                          <Switch
-                            checked={checked}
-                            onCheckedChange={(nextChecked) => {
-                              if (nextChecked) {
-                                field.onChange([...field.value, option.slug]);
-                                return;
-                              }
-
-                              field.onChange(
-                                field.value.filter(
-                                  (value) => value !== option.slug
-                                )
-                              );
-                            }}
-                          />
-                        </label>
-                      );
-                    })}
-                  </div>
-                )}
-              />
-              <FieldError>
-                {form.formState.errors.qualificationSlugs?.message}
-              </FieldError>
-            </Field>
-
-            <SheetFooter className="mt-6 px-0">
-              <Button
-                type="submit"
-                disabled={saving || isUploadingAvatar}
-                className="gap-2"
-              >
-                {(saving || isUploadingAvatar) && (
-                  <Loader2 className="mr-2 size-4 animate-spin" />
-                )}
-                {submitLabel}
-              </Button>
-            </SheetFooter>
-          </form>
-        )}
-      </SheetContent>
-    </Sheet>
-  );
-}

package/hedhog/frontend/app/courses/[id]/_components/CourseMainInfoCard.tsx.ejs

@@ -1,109 +0,0 @@
-import { RichTextEditor } from '@/components/rich-text-editor';
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { Hash, NotebookPen } from 'lucide-react';
-import type { UseFormReturn } from 'react-hook-form';
-
-import { CourseSectionCard } from './CourseSectionCard';
-import type { CourseEditFormValues, TranslationFn } from './course-edit-types';
-
-type CourseMainInfoCardProps = {
-  form: UseFormReturn<CourseEditFormValues>;
-  t: TranslationFn;
-};
-
-export function CourseMainInfoCard({ form, t }: CourseMainInfoCardProps) {
-  return (
-    <CourseSectionCard
-      title={t('form.sections.basicInfo')}
-      description="Os identificadores e a comunicação principal do curso ficam aqui."
-      icon={NotebookPen}
-    >
-      <div className="grid gap-3 md:grid-cols-2">
-        <FormField
-          control={form.control}
-          name="slug"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('form.fields.slug.label')}</FormLabel>
-              <FormControl>
-                <div className="relative">
-                  <Hash className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                  <Input
-                    {...field}
-                    className="pl-9 font-mono"
-                    placeholder={t('form.fields.slug.placeholder')}
-                    onChange={(event) =>
-                      field.onChange(
-                        String(event.target.value || '').toLowerCase()
-                      )
-                    }
-                  />
-                </div>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="nomeInterno"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('form.fields.internalName.label')}</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  placeholder={t('form.fields.internalName.placeholder')}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="tituloComercial"
-          render={({ field }) => (
-            <FormItem className="md:col-span-2">
-              <FormLabel>{t('form.fields.title.label')}</FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  placeholder={t('form.fields.title.placeholder')}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="descricaoPublica"
-          render={({ field }) => (
-            <FormItem className="md:col-span-2">
-              <FormLabel>{t('form.fields.description.label')}</FormLabel>
-              <FormControl>
-                <RichTextEditor
-                  value={field.value}
-                  onChange={field.onChange}
-                  className="w-full max-w-full"
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
-    </CourseSectionCard>
-  );
-}