@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,591 @@
+'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>
+  );
+}