@hed-hog/operations 0.0.322 → 0.0.325

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

@@ -0,0 +1,530 @@
+'use client';
+
+import { RichTextEditor } from '@/components/rich-text-editor';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Archive, Loader2, Paperclip, Plus } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import type {
+  OperationsProjectDetails,
+  OperationsProjectOption,
+  OperationsTaskOption,
+  PaginatedResponse,
+} from '../_lib/types';
+import { ProjectFormScreen } from './project-form-screen';
+import { TaskFileAttachments } from './task-file-attachments';
+
+type TaskColumnId = 'todo' | 'doing' | 'review' | 'done';
+
+const KANBAN_COLUMNS: Array<{ id: TaskColumnId; label: string }> = [
+  { id: 'todo', label: 'Backlog' },
+  { id: 'doing', label: 'Em execução' },
+  { id: 'review', label: 'Revisão' },
+  { id: 'done', label: 'Concluído' },
+];
+
+type TaskFormState = {
+  projectId: string;
+  name: string;
+  description: string;
+  priority: 'low' | 'medium' | 'high';
+  status: TaskColumnId;
+  dueDate: string;
+  estimateHours: string;
+  tags: string;
+};
+
+const EMPTY_TASK_FORM: TaskFormState = {
+  projectId: '',
+  name: '',
+  description: '',
+  priority: 'medium',
+  status: 'todo',
+  dueDate: '',
+  estimateHours: '',
+  tags: '',
+};
+
+function normalizeDateValue(value?: string | null) {
+  if (!value) return '';
+  const match = String(value)
+    .trim()
+    .match(/^\d{4}-\d{2}-\d{2}/);
+  return match?.[0] ?? '';
+}
+
+function getTaskPriorityLabel(value?: string | null) {
+  const labels: Record<string, string> = {
+    low: 'Baixa',
+    medium: 'Média',
+    high: 'Alta',
+  };
+  return labels[value ?? ''] ?? String(value ?? '');
+}
+
+export type TaskFormSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  request: Parameters<typeof mutateOperations>[0];
+  /** When provided, the form enters edit mode. */
+  editingTask?: OperationsTaskOption | null;
+  /** Pre-assigns this collaborator on new task creation. */
+  defaultAssigneeCollaboratorId?: number | null;
+  /** When true the project field is required for creation. Default: false. */
+  projectRequired?: boolean;
+  /** When false the project selector is hidden (e.g. when the project is already known from context). Default: true. */
+  showProject?: boolean;
+  onSaved: () => void;
+};
+
+export function TaskFormSheet({
+  open,
+  onOpenChange,
+  request,
+  editingTask,
+  defaultAssigneeCollaboratorId,
+  projectRequired = false,
+  showProject = true,
+  onSaved,
+}: TaskFormSheetProps) {
+  const { currentLocaleCode } = useApp();
+  const commonT = useTranslations('operations.Common');
+  const taskT = useTranslations('operations.ProjectDetailsPage');
+  const projectsT = useTranslations('operations.ProjectsPage');
+
+  const [formData, setFormData] = useState<TaskFormState>(EMPTY_TASK_FORM);
+  const [loading, setLoading] = useState(false);
+  const [archivingId, setArchivingId] = useState<number | null>(null);
+  const [projectFormOpen, setProjectFormOpen] = useState(false);
+  const [localProjectOptions, setLocalProjectOptions] = useState<
+    OperationsProjectOption[]
+  >([]);
+
+  const { data: projectOptionsResponse } = useQuery<
+    PaginatedResponse<OperationsProjectOption>
+  >({
+    queryKey: ['task-form-project-options', currentLocaleCode],
+    queryFn: () =>
+      fetchOperations<PaginatedResponse<OperationsProjectOption>>(
+        request,
+        '/operations/projects/options?pageSize=200&sortField=name&sortOrder=asc'
+      ),
+    enabled: open,
+    placeholderData: (previous) => previous,
+  });
+  const remoteProjectOptions = projectOptionsResponse?.data ?? [];
+  const projectOptions = [
+    ...localProjectOptions,
+    ...remoteProjectOptions.filter(
+      (r) => !localProjectOptions.some((l) => l.id === r.id)
+    ),
+  ];
+
+  // Sync form state when editingTask or open changes.
+  useEffect(() => {
+    if (!open) return;
+    if (editingTask) {
+      setFormData({
+        projectId: String(editingTask.projectId ?? ''),
+        name: editingTask.name,
+        description: editingTask.description ?? '',
+        priority:
+          (editingTask.priority as TaskFormState['priority']) ?? 'medium',
+        status: KANBAN_COLUMNS.some((c) => c.id === editingTask.status)
+          ? (editingTask.status as TaskColumnId)
+          : 'todo',
+        dueDate: normalizeDateValue(editingTask.dueDate),
+        estimateHours:
+          editingTask.estimateHours != null
+            ? String(editingTask.estimateHours)
+            : '',
+        tags: editingTask.tags ?? '',
+      });
+    } else {
+      setFormData(EMPTY_TASK_FORM);
+    }
+  }, [open, editingTask]);
+
+  const close = () => {
+    onOpenChange(false);
+  };
+
+  const isSubmitDisabled = () => {
+    if (!formData.name.trim()) return true;
+    if (!editingTask && projectRequired && !formData.projectId) return true;
+    return false;
+  };
+
+  const handleSubmit = async () => {
+    if (isSubmitDisabled()) return;
+    setLoading(true);
+    try {
+      const selectedProject = projectOptions.find(
+        (p) => String(p.id) === formData.projectId
+      );
+
+      const payload: Record<string, unknown> = {
+        name: formData.name.trim(),
+        description: formData.description.trim() || null,
+        priority: formData.priority,
+        status: formData.status,
+        dueDate: formData.dueDate || null,
+        estimateHours: formData.estimateHours
+          ? Number(formData.estimateHours)
+          : null,
+        tags: formData.tags.trim() || null,
+      };
+
+      if (editingTask) {
+        await mutateOperations(
+          request,
+          `/operations/tasks/${editingTask.id}`,
+          'PATCH',
+          payload
+        );
+      } else {
+        if (selectedProject) {
+          payload.projectId = selectedProject.id;
+          if (selectedProject.projectAssignmentId != null) {
+            payload.projectAssignmentId = selectedProject.projectAssignmentId;
+          }
+        } else if (formData.projectId) {
+          payload.projectId = Number(formData.projectId);
+        }
+        if (defaultAssigneeCollaboratorId != null) {
+          payload.assigneeCollaboratorId = defaultAssigneeCollaboratorId;
+        }
+        await mutateOperations(request, '/operations/tasks', 'POST', payload);
+      }
+
+      onSaved();
+      close();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleArchive = async () => {
+    if (!editingTask) return;
+    setArchivingId(editingTask.id);
+    try {
+      await mutateOperations(
+        request,
+        `/operations/tasks/${editingTask.id}`,
+        'PATCH',
+        { archived: true }
+      );
+      onSaved();
+      close();
+    } finally {
+      setArchivingId(null);
+    }
+  };
+
+  return (
+    <>
+      <Sheet
+        open={open}
+        onOpenChange={(value) => {
+          if (!loading) onOpenChange(value);
+        }}
+      >
+        <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>
+              {editingTask
+                ? taskT('taskForm.titleEdit')
+                : taskT('taskForm.titleNew')}
+            </SheetTitle>
+          </SheetHeader>
+
+          <div className="flex-1 space-y-4 overflow-y-auto px-4 py-2">
+            {/* Project selector — hidden when showProject=false (project is known from context) */}
+            {showProject ? (
+              <div className="space-y-1.5">
+                <Label htmlFor="task-form-project">
+                  {commonT('labels.project')}
+                  {!editingTask && projectRequired ? ' *' : ''}
+                </Label>
+                <div className="flex gap-2">
+                  <Select
+                    value={formData.projectId}
+                    onValueChange={(v) =>
+                      setFormData((prev) => ({ ...prev, projectId: v }))
+                    }
+                  >
+                    <SelectTrigger className="w-full" id="task-form-project">
+                      <SelectValue placeholder={commonT('labels.project')} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {!projectRequired && !editingTask ? (
+                        <SelectItem value="none">
+                          {commonT('labels.notAssigned')}
+                        </SelectItem>
+                      ) : null}
+                      {editingTask?.projectId &&
+                      !projectOptions.some(
+                        (p) => String(p.id) === String(editingTask.projectId)
+                      ) ? (
+                        <SelectItem
+                          key={`fallback-${editingTask.projectId}`}
+                          value={String(editingTask.projectId)}
+                        >
+                          {[editingTask.projectCode, editingTask.projectName]
+                            .filter(Boolean)
+                            .join(' • ') || String(editingTask.projectId)}
+                        </SelectItem>
+                      ) : null}
+                      {projectOptions.map((p) => (
+                        <SelectItem key={p.id} value={String(p.id)}>
+                          {p.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    className="shrink-0"
+                    title={projectsT('sheet.createTitle')}
+                    onClick={() => setProjectFormOpen(true)}
+                  >
+                    <Plus className="size-4" />
+                  </Button>
+                </div>
+              </div>
+            ) : null}
+
+            <div className="space-y-1.5">
+              <Label htmlFor="task-form-name">
+                {taskT('taskForm.nameLabel')} *
+              </Label>
+              <Input
+                id="task-form-name"
+                placeholder={taskT('taskForm.namePlaceholder')}
+                value={formData.name}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, name: e.target.value }))
+                }
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="task-form-description">
+                {taskT('taskForm.descriptionLabel')}
+              </Label>
+              <RichTextEditor
+                value={formData.description}
+                onChange={(val) =>
+                  setFormData((prev) => ({ ...prev, description: val }))
+                }
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label>{taskT('taskForm.priorityLabel')}</Label>
+                <Select
+                  value={formData.priority}
+                  onValueChange={(v) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      priority: v as TaskFormState['priority'],
+                    }))
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="low">
+                      {getTaskPriorityLabel('low')}
+                    </SelectItem>
+                    <SelectItem value="medium">
+                      {getTaskPriorityLabel('medium')}
+                    </SelectItem>
+                    <SelectItem value="high">
+                      {getTaskPriorityLabel('high')}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label>{taskT('taskForm.columnLabel')}</Label>
+                <Select
+                  value={formData.status}
+                  onValueChange={(v) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      status: v as TaskColumnId,
+                    }))
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {KANBAN_COLUMNS.map((col) => (
+                      <SelectItem key={col.id} value={col.id}>
+                        {col.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label htmlFor="task-form-due-date">
+                  {taskT('taskForm.deadlineLabel')}
+                </Label>
+                <Input
+                  id="task-form-due-date"
+                  type="date"
+                  value={formData.dueDate}
+                  onChange={(e) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      dueDate: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="task-form-estimate">
+                  {taskT('taskForm.estimateLabel')}
+                </Label>
+                <Input
+                  id="task-form-estimate"
+                  type="number"
+                  min="0"
+                  step="0.5"
+                  placeholder="0"
+                  value={formData.estimateHours}
+                  onChange={(e) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      estimateHours: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="task-form-tags">
+                {taskT('taskForm.tagsLabel')}
+              </Label>
+              <Input
+                id="task-form-tags"
+                placeholder={taskT('taskForm.tagsPlaceholder')}
+                value={formData.tags}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, tags: e.target.value }))
+                }
+              />
+            </div>
+
+            {editingTask ? (
+              <div className="space-y-1.5">
+                <Label className="flex items-center gap-1.5">
+                  <Paperclip className="size-3.5" />
+                  {taskT('taskForm.attachmentsLabel')}
+                </Label>
+                <TaskFileAttachments taskId={editingTask.id} />
+              </div>
+            ) : null}
+          </div>
+
+          <div className="mt-4 flex flex-wrap items-center justify-between gap-2 border-t px-4 pb-4 pt-4">
+            <div className="flex gap-2">
+              {editingTask ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={loading || archivingId === editingTask.id}
+                  onClick={() => void handleArchive()}
+                >
+                  {archivingId === editingTask.id ? (
+                    <Loader2 className="mr-2 size-4 animate-spin" />
+                  ) : (
+                    <Archive className="mr-2 size-4" />
+                  )}
+                  {commonT('actions.archive')}
+                </Button>
+              ) : null}
+            </div>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={close} disabled={loading}>
+                {commonT('actions.cancel')}
+              </Button>
+              <Button
+                onClick={() => void handleSubmit()}
+                disabled={loading || isSubmitDisabled()}
+              >
+                {loading ? (
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                ) : null}
+                {editingTask
+                  ? commonT('actions.save')
+                  : commonT('actions.create')}
+              </Button>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet open={projectFormOpen} onOpenChange={setProjectFormOpen}>
+        <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-[min(92vw,64rem)]">
+          <SheetHeader>
+            <SheetTitle>{projectsT('sheet.createTitle')}</SheetTitle>
+            <SheetDescription>
+              {projectsT('sheet.description')}
+            </SheetDescription>
+          </SheetHeader>
+          <ProjectFormScreen
+            onCancel={() => setProjectFormOpen(false)}
+            onSaved={(project: OperationsProjectDetails) => {
+              const newOption: OperationsProjectOption = {
+                id: project.id,
+                label: project.name,
+                name: project.name,
+                code: project.code,
+                clientName: project.clientName,
+                status: project.status,
+              };
+              setLocalProjectOptions((prev) => [newOption, ...prev]);
+              setFormData((prev) => ({
+                ...prev,
+                projectId: String(project.id),
+              }));
+              setProjectFormOpen(false);
+            }}
+          />
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}