egg/PROJECT-CONTORL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement custom fields, gantt view, calendar view, and file encryption

Browse Source 
- Custom Fields (FEAT-001):
  - CustomField and TaskCustomValue models with formula support
  - CRUD API for custom field management
  - Formula engine for calculated fields
  - Frontend: CustomFieldEditor, CustomFieldInput, ProjectSettings page
  - Task list API now includes custom_values
  - KanbanBoard displays custom field values

- Gantt View (FEAT-003):
  - TaskDependency model with FS/SS/FF/SF dependency types
  - Dependency CRUD API with cycle detection
  - start_date field added to tasks
  - GanttChart component with Frappe Gantt integration
  - Dependency type selector in UI

- Calendar View (FEAT-004):
  - CalendarView component with FullCalendar integration
  - Date range filtering API for tasks
  - Drag-and-drop date updates
  - View mode switching in Tasks page

- File Encryption (FEAT-010):
  - AES-256-GCM encryption service
  - EncryptionKey model with key rotation support
  - Admin API for key management
  - Encrypted upload/download for confidential projects

- Migrations: 011 (custom fields), 012 (encryption keys), 013 (task dependencies)
- Updated issues.md with completion status

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
beabigegg
2026-01-05 23:39:12 +08:00
parent 69b81d9241
commit 2d80a8384e
65 changed files with 11045 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
frontend/src/pages/Tasks.tsx
View File

@@ -1,14 +1,19 @@
import { useState, useEffect, useCallback } from 'react'
import { useState, useEffect, useCallback, useRef } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import api from '../services/api'
import { KanbanBoard } from '../components/KanbanBoard'
import { CalendarView } from '../components/CalendarView'
import { GanttChart } from '../components/GanttChart'
import { TaskDetailModal } from '../components/TaskDetailModal'
import { UserSelect } from '../components/UserSelect'
import { UserSearchResult } from '../services/collaboration'
import { useProjectSync, TaskEvent } from '../contexts/ProjectSyncContext'
import { customFieldsApi, CustomField, CustomValueResponse } from '../services/customFields'
import { CustomFieldInput } from '../components/CustomFieldInput'
interface Task {
id: string
project_id: string
title: string
description: string | null
priority: string
@@ -18,8 +23,10 @@ interface Task {
assignee_id: string | null
assignee_name: string | null
due_date: string | null
start_date: string | null
time_estimate: number | null
subtask_count: number
custom_values?: CustomValueResponse[]
}
interface TaskStatus {
@@ -35,9 +42,25 @@ interface Project {
space_id: string
}
type ViewMode = 'list' | 'kanban'
type ViewMode = 'list' | 'kanban' | 'calendar' | 'gantt'
const VIEW_MODE_STORAGE_KEY = 'tasks-view-mode'
const COLUMN_VISIBILITY_STORAGE_KEY = 'tasks-column-visibility'
// Get column visibility settings from localStorage
const getColumnVisibility = (projectId: string): Record<string, boolean> => {
try {
const saved = localStorage.getItem(`${COLUMN_VISIBILITY_STORAGE_KEY}-${projectId}`)
return saved ? JSON.parse(saved) : {}
} catch {
return {}
}
}
// Save column visibility settings to localStorage
const saveColumnVisibility = (projectId: string, visibility: Record<string, boolean>) => {
localStorage.setItem(`${COLUMN_VISIBILITY_STORAGE_KEY}-${projectId}`, JSON.stringify(visibility))
}
export default function Tasks() {
const { projectId } = useParams()
@@ -50,7 +73,7 @@ export default function Tasks() {
const [showCreateModal, setShowCreateModal] = useState(false)
const [viewMode, setViewMode] = useState<ViewMode>(() => {
const saved = localStorage.getItem(VIEW_MODE_STORAGE_KEY)
return (saved === 'kanban' || saved === 'list') ? saved : 'list'
return (saved === 'kanban' || saved === 'list' || saved === 'calendar' || saved === 'gantt') ? saved : 'list'
})
const [newTask, setNewTask] = useState({
title: '',
@@ -65,10 +88,37 @@ export default function Tasks() {
const [selectedTask, setSelectedTask] = useState<Task | null>(null)
const [showDetailModal, setShowDetailModal] = useState(false)
// Custom fields state
const [customFields, setCustomFields] = useState<CustomField[]>([])
const [newTaskCustomValues, setNewTaskCustomValues] = useState<Record<string, string | number | null>>({})
// Column visibility state
const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>(() => {
return projectId ? getColumnVisibility(projectId) : {}
})
const [showColumnMenu, setShowColumnMenu] = useState(false)
const columnMenuRef = useRef<HTMLDivElement>(null)
useEffect(() => {
loadData()
}, [projectId])
// Load custom fields when project changes
useEffect(() => {
if (projectId) {
loadCustomFields()
}
}, [projectId])
const loadCustomFields = async () => {
try {
const response = await customFieldsApi.getCustomFields(projectId!)
setCustomFields(response.fields)
} catch (err) {
console.error('Failed to load custom fields:', err)
}
}
// Subscribe to project WebSocket when project changes
useEffect(() => {
if (projectId) {
@@ -91,6 +141,7 @@ export default function Tasks() {
}
const newTask: Task = {
id: event.data.task_id,
project_id: projectId!,
title: event.data.title || '',
description: event.data.description ?? null,
priority: event.data.priority || 'medium',
@@ -100,6 +151,7 @@ export default function Tasks() {
assignee_id: event.data.assignee_id ?? null,
assignee_name: event.data.assignee_name ?? null,
due_date: event.data.due_date ?? null,
start_date: (event.data.start_date as string) ?? null,
time_estimate: event.data.time_estimate ?? event.data.original_estimate ?? null,
subtask_count: event.data.subtask_count ?? 0,
}
@@ -131,6 +183,7 @@ export default function Tasks() {
...(event.data.new_assignee_id !== undefined && { assignee_id: event.data.new_assignee_id ?? null }),
...(event.data.new_assignee_name !== undefined && { assignee_name: event.data.new_assignee_name ?? null }),
...(event.data.due_date !== undefined && { due_date: event.data.due_date ?? null }),
...(event.data.start_date !== undefined && { start_date: (event.data.start_date as string) ?? null }),
...(event.data.time_estimate !== undefined && { time_estimate: event.data.time_estimate ?? null }),
...(event.data.original_estimate !== undefined && event.data.time_estimate === undefined && { time_estimate: event.data.original_estimate ?? null }),
...(event.data.subtask_count !== undefined && { subtask_count: event.data.subtask_count }),
@@ -156,6 +209,47 @@ export default function Tasks() {
localStorage.setItem(VIEW_MODE_STORAGE_KEY, viewMode)
}, [viewMode])
// Load column visibility when projectId changes
useEffect(() => {
if (projectId) {
setColumnVisibility(getColumnVisibility(projectId))
}
}, [projectId])
// Check if a custom field column is visible (default to true if not set)
const isColumnVisible = (fieldId: string): boolean => {
return columnVisibility[fieldId] !== false
}
// Toggle column visibility
const toggleColumnVisibility = (fieldId: string) => {
const newVisibility = {
...columnVisibility,
[fieldId]: !isColumnVisible(fieldId),
}
setColumnVisibility(newVisibility)
if (projectId) {
saveColumnVisibility(projectId, newVisibility)
}
}
// Close column menu when clicking outside
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (columnMenuRef.current && !columnMenuRef.current.contains(event.target as Node)) {
setShowColumnMenu(false)
}
}
if (showColumnMenu) {
document.addEventListener('mousedown', handleClickOutside)
}
return () => {
document.removeEventListener('mousedown', handleClickOutside)
}
}, [showColumnMenu])
const loadData = async () => {
try {
const [projectRes, tasksRes, statusesRes] = await Promise.all([
@@ -194,6 +288,21 @@ export default function Tasks() {
payload.time_estimate = Number(newTask.time_estimate)
}
// Include custom field values (only non-formula fields)
const customValuesPayload = Object.entries(newTaskCustomValues)
.filter(([fieldId, value]) => {
const field = customFields.find((f) => f.id === fieldId)
return field && field.field_type !== 'formula' && value !== null
})
.map(([fieldId, value]) => ({
field_id: fieldId,
value: value,
}))
if (customValuesPayload.length > 0) {
payload.custom_values = customValuesPayload
}
await api.post(`/projects/${projectId}/tasks`, payload)
setShowCreateModal(false)
setNewTask({
@@ -204,6 +313,7 @@ export default function Tasks() {
due_date: '',
time_estimate: '',
})
setNewTaskCustomValues({})
setSelectedAssignee(null)
loadData()
} catch (err) {
@@ -213,6 +323,13 @@ export default function Tasks() {
}
}
const handleNewTaskCustomFieldChange = (fieldId: string, value: string | number | null) => {
setNewTaskCustomValues((prev) => ({
...prev,
[fieldId]: value,
}))
}
const handleStatusChange = async (taskId: string, statusId: string) => {
// Save original state for rollback
const originalTasks = [...tasks]
@@ -246,7 +363,12 @@ export default function Tasks() {
}
const handleTaskClick = (task: Task) => {
setSelectedTask(task)
// Ensure task has project_id for custom fields loading
const taskWithProject = {
...task,
project_id: projectId!,
}
setSelectedTask(taskWithProject)
setShowDetailModal(true)
}
@@ -335,7 +457,65 @@ export default function Tasks() {
>
Kanban
</button>
<button
onClick={() => setViewMode('calendar')}
style={{
...styles.viewButton,
...(viewMode === 'calendar' ? styles.viewButtonActive : {}),
}}
aria-label="Calendar view"
>
Calendar
</button>
<button
onClick={() => setViewMode('gantt')}
style={{
...styles.viewButton,
...(viewMode === 'gantt' ? styles.viewButtonActive : {}),
}}
aria-label="Gantt view"
>
Gantt
</button>
</div>
{/* Column Visibility Toggle - only show when there are custom fields and in list view */}
{viewMode === 'list' && customFields.length > 0 && (
<div style={styles.columnMenuContainer} ref={columnMenuRef}>
<button
onClick={() => setShowColumnMenu(!showColumnMenu)}
style={styles.columnMenuButton}
aria-label="Toggle columns"
>
Columns
</button>
{showColumnMenu && (
<div style={styles.columnMenuDropdown}>
<div style={styles.columnMenuHeader}>Show Custom Fields</div>
{customFields.map((field) => (
<label key={field.id} style={styles.columnMenuItem}>
<input
type="checkbox"
checked={isColumnVisible(field.id)}
onChange={() => toggleColumnVisibility(field.id)}
style={styles.columnCheckbox}
/>
<span style={styles.columnLabel}>{field.name}</span>
</label>
))}
{customFields.length === 0 && (
<div style={styles.columnMenuEmpty}>No custom fields</div>
)}
</div>
)}
</div>
)}
<button
onClick={() => navigate(`/projects/${projectId}/settings`)}
style={styles.settingsButton}
aria-label="Project settings"
>
Settings
</button>
<button onClick={() => setShowCreateModal(true)} style={styles.createButton}>
+ New Task
</button>
@@ -343,7 +523,7 @@ export default function Tasks() {
</div>
{/* Conditional rendering based on view mode */}
{viewMode === 'list' ? (
{viewMode === 'list' && (
<div style={styles.taskList}>
{tasks.map((task) => (
<div
@@ -373,6 +553,15 @@ export default function Tasks() {
{task.subtask_count} subtasks
</span>
)}
{/* Display visible custom field values */}
{task.custom_values &&
task.custom_values
.filter((cv) => isColumnVisible(cv.field_id))
.map((cv) => (
<span key={cv.field_id} style={styles.customValueBadge}>
{cv.field_name}: {cv.display_value || cv.value || '-'}
</span>
))}
</div>
</div>
<select
@@ -402,7 +591,9 @@ export default function Tasks() {
</div>
)}
</div>
) : (
)}
{viewMode === 'kanban' && (
<KanbanBoard
tasks={tasks}
statuses={statuses}
@@ -411,6 +602,25 @@ export default function Tasks() {
/>
)}
{viewMode === 'calendar' && projectId && (
<CalendarView
projectId={projectId}
statuses={statuses}
onTaskClick={handleTaskClick}
onTaskUpdate={handleTaskUpdate}
/>
)}
{viewMode === 'gantt' && projectId && (
<GanttChart
projectId={projectId}
tasks={tasks}
statuses={statuses}
onTaskClick={handleTaskClick}
onTaskUpdate={handleTaskUpdate}
/>
)}
{/* Create Task Modal */}
{showCreateModal && (
<div style={styles.modalOverlay}>
@@ -469,6 +679,37 @@ export default function Tasks() {
style={styles.input}
/>
{/* Custom Fields */}
{customFields.filter((f) => f.field_type !== 'formula').length > 0 && (
<>
<div style={styles.customFieldsDivider} />
<div style={styles.customFieldsTitle}>Custom Fields</div>
{customFields
.filter((field) => field.field_type !== 'formula')
.map((field) => (
<div key={field.id} style={styles.customFieldContainer}>
<CustomFieldInput
field={field}
value={
newTaskCustomValues[field.id] !== undefined
? {
field_id: field.id,
field_name: field.name,
field_type: field.field_type,
value: newTaskCustomValues[field.id],
display_value: null,
}
: null
}
onChange={handleNewTaskCustomFieldChange}
disabled={false}
showLabel={true}
/>
</div>
))}
</>
)}
<div style={styles.modalActions}>
<button onClick={() => setShowCreateModal(false)} style={styles.cancelButton}>
Cancel
@@ -580,6 +821,15 @@ const styles: { [key: string]: React.CSSProperties } = {
backgroundColor: '#0066cc',
color: 'white',
},
settingsButton: {
padding: '10px 16px',
backgroundColor: '#f5f5f5',
color: '#333',
border: '1px solid #ddd',
borderRadius: '6px',
cursor: 'pointer',
fontSize: '14px',
},
createButton: {
padding: '10px 20px',
backgroundColor: '#0066cc',
@@ -733,4 +983,90 @@ const styles: { [key: string]: React.CSSProperties } = {
borderRadius: '4px',
cursor: 'pointer',
},
customFieldsDivider: {
height: '1px',
backgroundColor: '#eee',
margin: '16px 0',
},
customFieldsTitle: {
fontSize: '13px',
fontWeight: 600,
color: '#666',
marginBottom: '12px',
textTransform: 'uppercase',
},
customFieldContainer: {
marginBottom: '12px',
},
customValueBadge: {
backgroundColor: '#e3f2fd',
color: '#1976d2',
padding: '2px 8px',
borderRadius: '4px',
fontSize: '11px',
maxWidth: '150px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
columnMenuContainer: {
position: 'relative',
},
columnMenuButton: {
padding: '10px 16px',
backgroundColor: '#f5f5f5',
color: '#333',
border: '1px solid #ddd',
borderRadius: '6px',
cursor: 'pointer',
fontSize: '14px',
display: 'flex',
alignItems: 'center',
gap: '6px',
},
columnMenuDropdown: {
position: 'absolute',
top: '100%',
right: 0,
marginTop: '4px',
backgroundColor: 'white',
borderRadius: '8px',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
border: '1px solid #e0e0e0',
minWidth: '200px',
zIndex: 100,
overflow: 'hidden',
},
columnMenuHeader: {
padding: '12px 16px',
fontSize: '12px',
fontWeight: 600,
color: '#666',
textTransform: 'uppercase',
borderBottom: '1px solid #eee',
backgroundColor: '#fafafa',
},
columnMenuItem: {
display: 'flex',
alignItems: 'center',
padding: '10px 16px',
cursor: 'pointer',
transition: 'background-color 0.15s',
gap: '10px',
},
columnCheckbox: {
width: '16px',
height: '16px',
cursor: 'pointer',
},
columnLabel: {
fontSize: '14px',
color: '#333',
},
columnMenuEmpty: {
padding: '16px',
textAlign: 'center',
color: '#888',
fontSize: '13px',
},
}