feat: implement custom fields, gantt view, calendar view, and file encryption
- 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
262
frontend/src/pages/ProjectSettings.tsx
Normal file
262
frontend/src/pages/ProjectSettings.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import api from '../services/api'
|
||||
import { CustomFieldList } from '../components/CustomFieldList'
|
||||
|
||||
interface Project {
|
||||
id: string
|
||||
title: string
|
||||
description: string | null
|
||||
space_id: string
|
||||
owner_id: string
|
||||
security_level: string
|
||||
}
|
||||
|
||||
export default function ProjectSettings() {
|
||||
const { projectId } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const [project, setProject] = useState<Project | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [activeTab, setActiveTab] = useState<'general' | 'custom-fields'>('custom-fields')
|
||||
|
||||
useEffect(() => {
|
||||
loadProject()
|
||||
}, [projectId])
|
||||
|
||||
const loadProject = async () => {
|
||||
try {
|
||||
const response = await api.get(`/projects/${projectId}`)
|
||||
setProject(response.data)
|
||||
} catch (err) {
|
||||
console.error('Failed to load project:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <div style={styles.loading}>Loading...</div>
|
||||
}
|
||||
|
||||
if (!project) {
|
||||
return <div style={styles.error}>Project not found</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.breadcrumb}>
|
||||
<span onClick={() => navigate('/spaces')} style={styles.breadcrumbLink}>
|
||||
Spaces
|
||||
</span>
|
||||
<span style={styles.breadcrumbSeparator}>/</span>
|
||||
<span
|
||||
onClick={() => navigate(`/spaces/${project.space_id}`)}
|
||||
style={styles.breadcrumbLink}
|
||||
>
|
||||
Projects
|
||||
</span>
|
||||
<span style={styles.breadcrumbSeparator}>/</span>
|
||||
<span
|
||||
onClick={() => navigate(`/projects/${project.id}`)}
|
||||
style={styles.breadcrumbLink}
|
||||
>
|
||||
{project.title}
|
||||
</span>
|
||||
<span style={styles.breadcrumbSeparator}>/</span>
|
||||
<span>Settings</span>
|
||||
</div>
|
||||
|
||||
<div style={styles.header}>
|
||||
<h1 style={styles.title}>Project Settings</h1>
|
||||
<button
|
||||
onClick={() => navigate(`/projects/${project.id}`)}
|
||||
style={styles.backButton}
|
||||
>
|
||||
Back to Tasks
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={styles.layout}>
|
||||
{/* Sidebar Navigation */}
|
||||
<div style={styles.sidebar}>
|
||||
<nav style={styles.nav}>
|
||||
<button
|
||||
onClick={() => setActiveTab('general')}
|
||||
style={{
|
||||
...styles.navItem,
|
||||
...(activeTab === 'general' ? styles.navItemActive : {}),
|
||||
}}
|
||||
>
|
||||
General
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('custom-fields')}
|
||||
style={{
|
||||
...styles.navItem,
|
||||
...(activeTab === 'custom-fields' ? styles.navItemActive : {}),
|
||||
}}
|
||||
>
|
||||
Custom Fields
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div style={styles.content}>
|
||||
{activeTab === 'general' && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={styles.sectionTitle}>General Settings</h2>
|
||||
<div style={styles.infoCard}>
|
||||
<div style={styles.infoRow}>
|
||||
<span style={styles.infoLabel}>Project Name</span>
|
||||
<span style={styles.infoValue}>{project.title}</span>
|
||||
</div>
|
||||
<div style={styles.infoRow}>
|
||||
<span style={styles.infoLabel}>Description</span>
|
||||
<span style={styles.infoValue}>
|
||||
{project.description || 'No description'}
|
||||
</span>
|
||||
</div>
|
||||
<div style={styles.infoRow}>
|
||||
<span style={styles.infoLabel}>Security Level</span>
|
||||
<span style={styles.infoValue}>{project.security_level}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style={styles.helpText}>
|
||||
To edit project details, contact the project owner.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'custom-fields' && (
|
||||
<CustomFieldList projectId={projectId!} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const styles: Record<string, React.CSSProperties> = {
|
||||
container: {
|
||||
padding: '24px',
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
},
|
||||
breadcrumb: {
|
||||
marginBottom: '16px',
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
},
|
||||
breadcrumbLink: {
|
||||
color: '#0066cc',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
breadcrumbSeparator: {
|
||||
margin: '0 8px',
|
||||
},
|
||||
header: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '24px',
|
||||
},
|
||||
title: {
|
||||
fontSize: '24px',
|
||||
fontWeight: 600,
|
||||
margin: 0,
|
||||
},
|
||||
backButton: {
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
},
|
||||
layout: {
|
||||
display: 'flex',
|
||||
gap: '24px',
|
||||
},
|
||||
sidebar: {
|
||||
width: '200px',
|
||||
flexShrink: 0,
|
||||
},
|
||||
nav: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '4px',
|
||||
},
|
||||
navItem: {
|
||||
padding: '12px 16px',
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
textAlign: 'left',
|
||||
color: '#333',
|
||||
transition: 'background-color 0.2s',
|
||||
},
|
||||
navItemActive: {
|
||||
backgroundColor: '#e3f2fd',
|
||||
color: '#0066cc',
|
||||
fontWeight: 500,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
},
|
||||
section: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
padding: '24px',
|
||||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: '18px',
|
||||
fontWeight: 600,
|
||||
margin: '0 0 20px 0',
|
||||
},
|
||||
infoCard: {
|
||||
backgroundColor: '#fafafa',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
infoRow: {
|
||||
display: 'flex',
|
||||
padding: '12px 0',
|
||||
borderBottom: '1px solid #eee',
|
||||
},
|
||||
infoLabel: {
|
||||
width: '150px',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
color: '#666',
|
||||
},
|
||||
infoValue: {
|
||||
flex: 1,
|
||||
fontSize: '14px',
|
||||
color: '#333',
|
||||
},
|
||||
helpText: {
|
||||
fontSize: '13px',
|
||||
color: '#888',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
loading: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '200px',
|
||||
color: '#666',
|
||||
},
|
||||
error: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '200px',
|
||||
color: '#f44336',
|
||||
},
|
||||
}
|
||||
@@ -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',
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user