@hed-hog/operations 0.0.322 → 0.0.326

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

@@ -0,0 +1,784 @@
+'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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+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 { useMentionItems } from '../_lib/hooks/use-mention-items';
+import type {
+  OperationsProjectDetails,
+  OperationsProjectOption,
+  OperationsTaskOption,
+  PaginatedResponse,
+} from '../_lib/types';
+import { ProjectFormScreen } from './project-form-screen';
+import { TaskCommentsSection } from './task-detail-sheet';
+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;
+  /** Default active tab when opening in edit mode. Default: 'info'. */
+  defaultTab?: 'info' | 'comments';
+  onSaved: () => void;
+};
+
+export function TaskFormSheet({
+  open,
+  onOpenChange,
+  request,
+  editingTask,
+  defaultAssigneeCollaboratorId,
+  projectRequired = false,
+  showProject = true,
+  defaultTab = 'info',
+  onSaved,
+}: TaskFormSheetProps) {
+  const { currentLocaleCode, request: appRequest } = useApp();
+  const commonT = useTranslations('operations.Common');
+  const taskT = useTranslations('operations.ProjectDetailsPage');
+  const projectsT = useTranslations('operations.ProjectsPage');
+
+  const mentionItems = useMentionItems(appRequest);
+
+  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 [activeTab, setActiveTab] = useState<'info' | 'comments'>(defaultTab);
+  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;
+    setActiveTab(defaultTab);
+    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 className="shrink-0">
+            <SheetTitle>
+              {editingTask
+                ? taskT('taskForm.titleEdit')
+                : taskT('taskForm.titleNew')}
+            </SheetTitle>
+          </SheetHeader>
+
+          {editingTask ? (
+            <Tabs
+              value={activeTab}
+              onValueChange={(v) => setActiveTab(v as 'info' | 'comments')}
+              className="flex min-h-0 flex-1 flex-col"
+            >
+              <TabsList className="mx-4 shrink-0">
+                <TabsTrigger value="info">Informações</TabsTrigger>
+                <TabsTrigger value="comments">Comentários</TabsTrigger>
+              </TabsList>
+
+              <TabsContent
+                value="info"
+                className="flex min-h-0 flex-1 flex-col data-[state=inactive]:hidden"
+              >
+                <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 }))
+                      }
+                      mentions={mentionItems}
+                    />
+                  </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>
+
+                  <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>
+                </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">
+                    <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>
+                  </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}
+                      {commonT('actions.save')}
+                    </Button>
+                  </div>
+                </div>
+              </TabsContent>
+
+              <TabsContent
+                value="comments"
+                className="min-h-0 flex-1 overflow-y-auto px-4 py-2 data-[state=inactive]:hidden"
+              >
+                <TaskCommentsSection taskId={editingTask.id} />
+              </TabsContent>
+            </Tabs>
+          ) : (
+            <>
+              <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')}
+                      {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 ? (
+                            <SelectItem value="none">
+                              {commonT('labels.notAssigned')}
+                            </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 }))
+                    }
+                    mentions={mentionItems}
+                  />
+                </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>
+              </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" />
+                <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}
+                    {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>
+    </>
+  );
+}