@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,480 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Textarea } from '@/components/ui/textarea';
+import { ChevronsUpDown, Loader2, Plus } from 'lucide-react';
+import { useState } from 'react';
+import { Controller, UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+
+export type CourseCategoryOption = {
+  value: string;
+  label: string;
+};
+
+export function getCourseSheetSchema(t: (key: string) => string) {
+  return z.object({
+    nomeInterno: z.string().min(3, t('form.validation.internalNameMinLength')),
+    tituloComercial: z.string().optional(),
+    descricao: z.string().optional(),
+    nivel: z.enum(['iniciante', 'intermediario', 'avancado']).optional(),
+    status: z.enum(['ativo', 'rascunho', 'arquivado']).optional(),
+    categorias: z.array(z.string()).optional(),
+    primaryColor: z.string().optional(),
+    secondaryColor: z.string().optional(),
+  });
+}
+
+export type CourseSheetFormValues = {
+  nomeInterno: string;
+  tituloComercial: string;
+  descricao: string;
+  nivel: 'iniciante' | 'intermediario' | 'avancado';
+  status: 'ativo' | 'rascunho' | 'arquivado';
+  categorias: string[];
+  primaryColor: string;
+  secondaryColor: string;
+};
+
+export const DEFAULT_COURSE_FORM_VALUES: CourseSheetFormValues = {
+  nomeInterno: '',
+  tituloComercial: '',
+  descricao: '',
+  nivel: 'iniciante',
+  status: 'rascunho',
+  categorias: [],
+  primaryColor: '#1D4ED8',
+  secondaryColor: '#111827',
+};
+
+type CourseFormSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editing: boolean;
+  saving: boolean;
+  form: UseFormReturn<CourseSheetFormValues>;
+  onSubmit: (data: CourseSheetFormValues) => Promise<void>;
+  t: (key: string) => string;
+  courseCode?: string | null;
+  categories?: readonly CourseCategoryOption[];
+  onCreateCategory?: () => void;
+};
+
+export function CourseFormSheet({
+  open,
+  onOpenChange,
+  editing,
+  saving,
+  form,
+  onSubmit,
+  t,
+  courseCode,
+  categories = [],
+  onCreateCategory,
+}: CourseFormSheetProps) {
+  const [categoryOpen, setCategoryOpen] = useState(false);
+  const [categorySearch, setCategorySearch] = useState('');
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+      >
+        <SheetHeader className="shrink-0">
+          <SheetTitle>
+            {editing ? t('form.title.edit') : t('form.title.create')}
+          </SheetTitle>
+          <SheetDescription>
+            {editing
+              ? t('form.description.edit')
+              : t('form.description.create')}
+          </SheetDescription>
+        </SheetHeader>
+
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="flex flex-1 flex-col gap-5 py-6 px-4"
+        >
+          {editing && courseCode && (
+            <Field>
+              <FieldLabel htmlFor="codigo">
+                {t('form.fields.code.label')}
+              </FieldLabel>
+              <Input
+                id="codigo"
+                value={courseCode}
+                readOnly
+                className="uppercase"
+              />
+              <FieldDescription>
+                Codigo gerado automaticamente pelo sistema.
+              </FieldDescription>
+            </Field>
+          )}
+
+          <Field>
+            <FieldLabel htmlFor="nomeInterno">
+              {t('form.fields.internalName.label')}{' '}
+              <span className="text-destructive">*</span>
+            </FieldLabel>
+            <Input
+              id="nomeInterno"
+              placeholder={t('form.fields.internalName.placeholder')}
+              {...form.register('nomeInterno')}
+            />
+            <FieldDescription>
+              {t('form.fields.internalName.description')}
+            </FieldDescription>
+            <FieldError>
+              {form.formState.errors.nomeInterno?.message}
+            </FieldError>
+          </Field>
+
+          <Field>
+            <FieldLabel htmlFor="tituloComercial">
+              {t('form.fields.commercialTitle.label')}
+            </FieldLabel>
+            <Input
+              id="tituloComercial"
+              placeholder={t('form.fields.commercialTitle.placeholder')}
+              {...form.register('tituloComercial')}
+            />
+            <FieldError>
+              {form.formState.errors.tituloComercial?.message}
+            </FieldError>
+          </Field>
+
+          <Field>
+            <FieldLabel htmlFor="descricao">
+              {t('form.fields.description.label')}
+            </FieldLabel>
+            <Textarea
+              id="descricao"
+              rows={3}
+              placeholder={t('form.fields.description.placeholder')}
+              {...form.register('descricao')}
+            />
+            <FieldError>{form.formState.errors.descricao?.message}</FieldError>
+          </Field>
+
+          <div className="grid grid-cols-2 gap-4">
+            <Field>
+              <FieldLabel>{t('form.fields.level.label')}</FieldLabel>
+              <Controller
+                name="nivel"
+                control={form.control}
+                render={({ field }) => (
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <SelectTrigger>
+                      <SelectValue
+                        placeholder={t('form.fields.level.placeholder')}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="iniciante">
+                        {t('levels.beginner')}
+                      </SelectItem>
+                      <SelectItem value="intermediario">
+                        {t('levels.intermediate')}
+                      </SelectItem>
+                      <SelectItem value="avancado">
+                        {t('levels.advanced')}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <FieldError>{form.formState.errors.nivel?.message}</FieldError>
+            </Field>
+
+            <Field>
+              <FieldLabel>{t('form.fields.status.label')}</FieldLabel>
+              <Controller
+                name="status"
+                control={form.control}
+                render={({ field }) => (
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <SelectTrigger>
+                      <SelectValue
+                        placeholder={t('form.fields.status.placeholder')}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="ativo">
+                        {t('status.active')}
+                      </SelectItem>
+                      <SelectItem value="rascunho">
+                        {t('status.draft')}
+                      </SelectItem>
+                      <SelectItem value="arquivado">
+                        {t('status.archived')}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <FieldError>{form.formState.errors.status?.message}</FieldError>
+            </Field>
+          </div>
+
+          <Field>
+            <FieldLabel>{t('form.fields.categories.label')}</FieldLabel>
+            <Controller
+              name="categorias"
+              control={form.control}
+              render={({ field }) => {
+                const availableCategories = categories.filter(
+                  (cat) => !field.value.includes(cat.value)
+                );
+
+                const filteredCategories = availableCategories.filter((cat) =>
+                  cat.label.toLowerCase().includes(categorySearch.toLowerCase())
+                );
+
+                return (
+                  <div className="space-y-2">
+                    <div className="flex w-full min-w-0 items-center gap-2">
+                      <Popover
+                        open={categoryOpen}
+                        onOpenChange={setCategoryOpen}
+                      >
+                        <PopoverTrigger asChild>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            role="combobox"
+                            className="flex-1 min-w-0 justify-between overflow-hidden"
+                          >
+                            <span className="truncate text-left">
+                              {field.value.length > 0
+                                ? `${field.value.length} ${t('form.fields.categories.selectedCount')}`
+                                : t('form.fields.categories.selectPlaceholder')}
+                            </span>
+                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent
+                          className="p-0"
+                          style={{
+                            width: 'var(--radix-popover-trigger-width)',
+                          }}
+                        >
+                          <Command shouldFilter={false}>
+                            <CommandInput
+                              placeholder={t(
+                                'form.fields.categories.searchPlaceholder'
+                              )}
+                              value={categorySearch}
+                              onValueChange={setCategorySearch}
+                            />
+                            <CommandList>
+                              <CommandEmpty>
+                                <div className="space-y-2 p-2 text-center">
+                                  <p className="text-sm text-muted-foreground">
+                                    {t('form.fields.categories.noResults')}
+                                  </p>
+                                  {onCreateCategory && (
+                                    <Button
+                                      type="button"
+                                      variant="outline"
+                                      className="w-full"
+                                      onClick={() => {
+                                        setCategoryOpen(false);
+                                        onCreateCategory();
+                                      }}
+                                    >
+                                      {t('form.fields.categories.createAction')}
+                                    </Button>
+                                  )}
+                                </div>
+                              </CommandEmpty>
+                              <CommandGroup>
+                                {filteredCategories.map((cat) => (
+                                  <CommandItem
+                                    key={cat.value}
+                                    value={`${cat.label}-${cat.value}`}
+                                    onSelect={() => {
+                                      if (field.value.includes(cat.value)) {
+                                        return;
+                                      }
+
+                                      field.onChange([
+                                        ...field.value,
+                                        cat.value,
+                                      ]);
+                                      setCategoryOpen(false);
+                                      setCategorySearch('');
+                                    }}
+                                  >
+                                    {cat.label}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+
+                      {onCreateCategory && (
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          className="shrink-0"
+                          onClick={onCreateCategory}
+                          aria-label={t('form.fields.categories.createAction')}
+                        >
+                          <Plus className="h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
+
+                    {field.value.length > 0 && (
+                      <div className="flex flex-wrap gap-2">
+                        {field.value.map((categoryValue) => {
+                          const label =
+                            categories.find(
+                              (cat) => cat.value === categoryValue
+                            )?.label ?? categoryValue;
+
+                          return (
+                            <span
+                              key={categoryValue}
+                              className="inline-flex items-center gap-2 rounded-md border bg-muted px-2 py-1 text-xs"
+                            >
+                              {label}
+                              <button
+                                type="button"
+                                onClick={() =>
+                                  field.onChange(
+                                    field.value.filter(
+                                      (value) => value !== categoryValue
+                                    )
+                                  )
+                                }
+                                className="text-muted-foreground transition-colors hover:text-foreground"
+                                aria-label={t(
+                                  'form.fields.categories.removeAction'
+                                )}
+                              >
+                                x
+                              </button>
+                            </span>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+                );
+              }}
+            />
+            <FieldError>{form.formState.errors.categorias?.message}</FieldError>
+          </Field>
+
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <Field>
+              <FieldLabel htmlFor="primaryColor">
+                {t('form.fields.primaryColor.label')}
+              </FieldLabel>
+              <Controller
+                name="primaryColor"
+                control={form.control}
+                render={({ field }) => (
+                  <div className="flex items-center gap-2">
+                    <Input
+                      id="primaryColor"
+                      type="color"
+                      className="h-10 w-16 p-1"
+                      value={field.value}
+                      onChange={field.onChange}
+                    />
+                    <Input
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder={t('form.fields.primaryColor.placeholder')}
+                    />
+                  </div>
+                )}
+              />
+              <FieldError>
+                {form.formState.errors.primaryColor?.message}
+              </FieldError>
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor="secondaryColor">
+                {t('form.fields.secondaryColor.label')}
+              </FieldLabel>
+              <Controller
+                name="secondaryColor"
+                control={form.control}
+                render={({ field }) => (
+                  <div className="flex items-center gap-2">
+                    <Input
+                      id="secondaryColor"
+                      type="color"
+                      className="h-10 w-16 p-1"
+                      value={field.value}
+                      onChange={field.onChange}
+                    />
+                    <Input
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder={t('form.fields.secondaryColor.placeholder')}
+                    />
+                  </div>
+                )}
+              />
+              <FieldError>
+                {form.formState.errors.secondaryColor?.message}
+              </FieldError>
+            </Field>
+          </div>
+
+          <SheetFooter className="mt-auto shrink-0 gap-2 pt-4 px-0">
+            <Button type="submit" disabled={saving} className="gap-2">
+              {saving && <Loader2 className="size-4 animate-spin" />}
+              {editing ? t('form.actions.save') : t('form.actions.create')}
+            </Button>
+          </SheetFooter>
+        </form>
+      </SheetContent>
+    </Sheet>
+  );
+}