@hed-hog/operations 0.0.330 → 0.0.332

package/hedhog/frontend/app/_components/task-file-attachments.tsx.ejs

@@ -115,9 +115,10 @@ function getFileOpenUrl(fileId: number) {
 
 type Props = {
   taskId: number | null;
+  onChanged?: () => void;
 };
 
-export function TaskFileAttachments({ taskId }: Props) {
+export function TaskFileAttachments({ taskId, onChanged }: Props) {
   const t = useTranslations('operations.TaskFileAttachments');
   const { request } = useApp();
 
@@ -183,6 +184,7 @@ export function TaskFileAttachments({ taskId }: Props) {
 
         if (res?.data) {
           await fetchFiles();
+          onChanged?.();
         }
       } catch {
         setUploading((prev) =>
@@ -222,6 +224,7 @@ export function TaskFileAttachments({ taskId }: Props) {
           method: 'DELETE',
         });
         setFiles((prev) => prev.filter((f) => f.id !== relationId));
+        onChanged?.();
       } catch {
         // ignore
       } finally {

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

@@ -0,0 +1,406 @@
+'use client';
+
+import {
+  RichTextEditor,
+  type MentionItem,
+} 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 { History, Paperclip, Plus, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState, type Dispatch, type SetStateAction } from 'react';
+import { Badge } from '@/components/ui/badge';
+import type { OperationsProjectOption } from '../_lib/types';
+import {
+  formatDurationMinutes,
+  getTaskPriorityLabel,
+} from '../_lib/utils/task-ui';
+import { CollaboratorPicker } from './collaborator-picker';
+import { TaskFileAttachments } from './task-file-attachments';
+
+type BaseTaskFormState = {
+  projectId: string;
+  name: string;
+  description: string;
+  priority: 'low' | 'medium' | 'high';
+  status: string;
+  dueDate: string;
+  estimateHours: string;
+  tags: string;
+  assigneeCollaboratorId: string;
+};
+
+type TaskFormFieldsProps<TFormState extends BaseTaskFormState> = {
+  formData: TFormState;
+  setFormData: Dispatch<SetStateAction<TFormState>>;
+  statusOptions: Array<{ id: TFormState['status']; label: string }>;
+  mentionItems: MentionItem[];
+  projectOptions: OperationsProjectOption[];
+  showProject?: boolean;
+  projectRequired?: boolean;
+  allowUnassignedProject?: boolean;
+  onOpenCreateProject?: () => void;
+  showDoingTime?: boolean;
+  doingMinutes?: number | null;
+  showAttachments?: boolean;
+  attachmentTaskId?: number | null;
+  /** Which field group to render. 'main' = project/name/description. 'aside' = metadata+files. 'all' = everything (default). */
+  section?: 'all' | 'main' | 'aside';
+  /** Hide the assignee field entirely. */
+  showAssignee?: boolean;
+  /** When provided, renders a static Select instead of the CollaboratorPicker API widget. */
+  assigneeOptions?: Array<{ id: string; label: string }>;
+  /** Called immediately when a tag is added or removed (for auto-save in edit mode). */
+  onTagsChange?: (tags: string) => void;
+  /** Called after a file is uploaded or deleted (for refreshing external counts). */
+  onFileChanged?: () => void;
+};
+
+export function TaskFormFields<TFormState extends BaseTaskFormState>({
+  formData,
+  setFormData,
+  statusOptions,
+  mentionItems,
+  projectOptions,
+  showProject = true,
+  projectRequired = false,
+  allowUnassignedProject = false,
+  onOpenCreateProject,
+  showDoingTime = false,
+  doingMinutes,
+  showAttachments = false,
+  attachmentTaskId,
+  section = 'all',
+  showAssignee = true,
+  assigneeOptions,
+  onTagsChange,
+  onFileChanged,
+}: TaskFormFieldsProps<TFormState>) {
+  const commonT = useTranslations('operations.Common');
+  const taskT = useTranslations('operations.ProjectDetailsPage');
+  const projectsT = useTranslations('operations.ProjectsPage');
+
+  const [tagInput, setTagInput] = useState('');
+
+  const showMain = section === 'all' || section === 'main';
+  const showAside = section === 'all' || section === 'aside';
+
+  const tagList = formData.tags
+    ? formData.tags.split(',').map((t) => t.trim()).filter(Boolean)
+    : [];
+
+  const commitTag = (value: string) => {
+    const trimmed = value.trim();
+    if (!trimmed || tagList.includes(trimmed)) {
+      setTagInput('');
+      return;
+    }
+    const next = [...tagList, trimmed].join(',');
+    setFormData((prev) => ({ ...prev, tags: next }));
+    onTagsChange?.(next);
+    setTagInput('');
+  };
+
+  const removeTag = (tag: string) => {
+    const next = tagList.filter((t) => t !== tag).join(',');
+    setFormData((prev) => ({ ...prev, tags: next }));
+    onTagsChange?.(next);
+  };
+
+  const doingTimeClass = (() => {
+    const estimate = formData.estimateHours
+      ? Number(formData.estimateHours) * 60
+      : null;
+    if (!estimate || doingMinutes == null)
+      return 'border bg-muted/30';
+    if (doingMinutes > estimate * 1.1)
+      return 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400';
+    if (doingMinutes > estimate)
+      return 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400';
+    return 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400';
+  })();
+
+  return (
+    <>
+      {showMain && 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={(value) =>
+                setFormData((prev) => ({ ...prev, projectId: value }))
+              }
+            >
+              <SelectTrigger className="w-full" id="task-form-project">
+                <SelectValue placeholder={commonT('labels.project')} />
+              </SelectTrigger>
+              <SelectContent>
+                {allowUnassignedProject ? (
+                  <SelectItem value="none">
+                    {commonT('labels.notAssigned')}
+                  </SelectItem>
+                ) : null}
+                {projectOptions.map((project) => (
+                  <SelectItem key={project.id} value={String(project.id)}>
+                    {project.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {onOpenCreateProject ? (
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="shrink-0"
+                title={projectsT('sheet.createTitle')}
+                onClick={onOpenCreateProject}
+              >
+                <Plus className="size-4" />
+              </Button>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      {showMain ? (
+        <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={(event) =>
+              setFormData((prev) => ({ ...prev, name: event.target.value }))
+            }
+          />
+        </div>
+      ) : null}
+
+      {showMain ? (
+        <div className="space-y-1.5">
+          <Label htmlFor="task-form-description">
+            {taskT('taskForm.descriptionLabel')}
+          </Label>
+          <RichTextEditor
+            value={formData.description}
+            onChange={(value) =>
+              setFormData((prev) => ({ ...prev, description: value }))
+            }
+            mentions={mentionItems}
+          />
+        </div>
+      ) : null}
+
+      {showAside ? (
+        <div className="space-y-1.5">
+          <Label>{taskT('taskForm.priorityLabel')}</Label>
+          <Select
+            value={formData.priority}
+            onValueChange={(value) =>
+              setFormData((prev) => ({
+                ...prev,
+                priority: value as TFormState['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>
+      ) : null}
+
+      {showAside ? (
+        <div className="space-y-1.5">
+          <Label>{taskT('taskForm.columnLabel')}</Label>
+          <Select
+            value={formData.status}
+            onValueChange={(value) =>
+              setFormData((prev) => ({
+                ...prev,
+                status: value as TFormState['status'],
+              }))
+            }
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {statusOptions.map((column) => (
+                <SelectItem key={column.id} value={column.id}>
+                  {column.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      ) : null}
+
+      {showAside && showAssignee ? (
+        <div className="space-y-1.5">
+          <Label htmlFor="task-form-assignee">
+            {taskT('taskForm.assigneeLabel')}
+          </Label>
+          {assigneeOptions ? (
+            <Select
+              value={formData.assigneeCollaboratorId || 'none'}
+              onValueChange={(value) =>
+                setFormData((prev) => ({
+                  ...prev,
+                  assigneeCollaboratorId: value === 'none' ? '' : value,
+                }))
+              }
+            >
+              <SelectTrigger className="w-full" id="task-form-assignee">
+                <SelectValue placeholder={taskT('taskForm.assigneeLabel')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">
+                  {commonT('labels.notAssigned')}
+                </SelectItem>
+                {assigneeOptions.map((option) => (
+                  <SelectItem key={option.id} value={option.id}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : (
+            <CollaboratorPicker
+              value={formData.assigneeCollaboratorId ?? ''}
+              placeholder={taskT('taskForm.assigneeLabel')}
+              onChange={(newValue) =>
+                setFormData((prev) => ({
+                  ...prev,
+                  assigneeCollaboratorId: newValue,
+                }))
+              }
+              setFormData={setFormData}
+            />
+          )}
+        </div>
+      ) : null}
+
+      {showAside ? (
+        <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={(event) =>
+                setFormData((prev) => ({ ...prev, dueDate: event.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={(event) =>
+                setFormData((prev) => ({
+                  ...prev,
+                  estimateHours: event.target.value,
+                }))
+              }
+            />
+          </div>
+        </div>
+      ) : null}
+
+      {showAside && showDoingTime ? (
+        <div className="space-y-1.5">
+          <Label className="flex items-center gap-1.5">
+            <History className="size-3.5" />
+            {taskT('taskForm.doingTimeLabel')}
+          </Label>
+          <div
+            className={`rounded-md px-3 py-2 text-sm font-medium ${doingTimeClass}`}
+          >
+            {formatDurationMinutes(doingMinutes)}
+          </div>
+        </div>
+      ) : null}
+
+      {showAside ? (
+        <div className="space-y-1.5">
+          <Label>{taskT('taskForm.tagsLabel')}</Label>
+          {tagList.length > 0 ? (
+            <div className="flex flex-wrap gap-1.5">
+              {tagList.map((tag) => (
+                <Badge key={tag} variant="secondary" className="gap-1 pr-1">
+                  {tag}
+                  <button
+                    type="button"
+                    onClick={() => removeTag(tag)}
+                    className="rounded-sm opacity-60 hover:opacity-100 focus:outline-none"
+                  >
+                    <X className="size-3" />
+                  </button>
+                </Badge>
+              ))}
+            </div>
+          ) : null}
+          <Input
+            id="task-form-tags"
+            placeholder={taskT('taskForm.tagsPlaceholder')}
+            value={tagInput}
+            onChange={(e) => setTagInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ',') {
+                e.preventDefault();
+                commitTag(tagInput);
+              } else if (e.key === 'Backspace' && !tagInput && tagList.length > 0) {
+                removeTag(tagList.at(-1)!);
+              }
+            }}
+            onBlur={() => { if (tagInput.trim()) commitTag(tagInput); }}
+          />
+        </div>
+      ) : null}
+
+      {showAside && showAttachments && attachmentTaskId ? (
+        <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={attachmentTaskId} onChanged={onFileChanged} />
+        </div>
+      ) : null}
+    </>
+  );
+}