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
73
frontend/package-lock.json
generated
73
frontend/package-lock.json
generated
@@ -8,7 +8,13 @@
|
||||
"name": "pjctrl-frontend",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@fullcalendar/core": "^6.1.20",
|
||||
"@fullcalendar/daygrid": "^6.1.20",
|
||||
"@fullcalendar/interaction": "^6.1.20",
|
||||
"@fullcalendar/react": "^6.1.20",
|
||||
"@fullcalendar/timegrid": "^6.1.20",
|
||||
"axios": "^1.6.0",
|
||||
"frappe-gantt": "^1.0.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.21.0"
|
||||
@@ -695,6 +701,57 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/core": {
|
||||
"version": "6.1.20",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.20.tgz",
|
||||
"integrity": "sha512-1cukXLlePFiJ8YKXn/4tMKsy0etxYLCkXk8nUCFi11nRONF2Ba2CD5b21/ovtOO2tL6afTJfwmc1ed3HG7eB1g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"preact": "~10.12.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/daygrid": {
|
||||
"version": "6.1.20",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.20.tgz",
|
||||
"integrity": "sha512-AO9vqhkLP77EesmJzuU+IGXgxNulsA8mgQHynclJ8U70vSwAVnbcLG9qftiTAFSlZjiY/NvhE7sflve6cJelyQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@fullcalendar/core": "~6.1.20"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/interaction": {
|
||||
"version": "6.1.20",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.20.tgz",
|
||||
"integrity": "sha512-p6txmc5txL0bMiPaJxe2ip6o0T384TyoD2KGdsU6UjZ5yoBlaY+dg7kxfnYKpYMzEJLG58n+URrHr2PgNL2fyA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@fullcalendar/core": "~6.1.20"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/react": {
|
||||
"version": "6.1.20",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-6.1.20.tgz",
|
||||
"integrity": "sha512-1w0pZtceaUdfAnxMSCGHCQalhi+mR1jOe76sXzyAXpcPz/Lf0zHSdcGK/U2XpZlnQgQtBZW+d+QBnnzVQKCxAA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@fullcalendar/core": "~6.1.20",
|
||||
"react": "^16.7.0 || ^17 || ^18 || ^19",
|
||||
"react-dom": "^16.7.0 || ^17 || ^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/timegrid": {
|
||||
"version": "6.1.20",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.20.tgz",
|
||||
"integrity": "sha512-4H+/MWbz3ntA50lrPif+7TsvMeX3R1GSYjiLULz0+zEJ7/Yfd9pupZmAwUs/PBpA6aAcFmeRr0laWfcz1a9V1A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fullcalendar/daygrid": "~6.1.20"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fullcalendar/core": "~6.1.20"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.13",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
|
||||
@@ -1471,6 +1528,12 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/frappe-gantt": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/frappe-gantt/-/frappe-gantt-1.0.4.tgz",
|
||||
"integrity": "sha512-N94OP9ZiapaG5nzgCeZdxsKP8HD5aLVlH5sEHxSNZQnNKQ4BOn2l46HUD+KIE0LpYIterP7gIrFfkLNRuK0npQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
@@ -1746,6 +1809,16 @@
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/preact": {
|
||||
"version": "10.12.1",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
|
||||
"integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/preact"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
|
||||
@@ -9,10 +9,16 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fullcalendar/core": "^6.1.20",
|
||||
"@fullcalendar/daygrid": "^6.1.20",
|
||||
"@fullcalendar/interaction": "^6.1.20",
|
||||
"@fullcalendar/react": "^6.1.20",
|
||||
"@fullcalendar/timegrid": "^6.1.20",
|
||||
"axios": "^1.6.0",
|
||||
"frappe-gantt": "^1.0.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.21.0",
|
||||
"axios": "^1.6.0"
|
||||
"react-router-dom": "^6.21.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.43",
|
||||
|
||||
@@ -5,6 +5,7 @@ import Dashboard from './pages/Dashboard'
|
||||
import Spaces from './pages/Spaces'
|
||||
import Projects from './pages/Projects'
|
||||
import Tasks from './pages/Tasks'
|
||||
import ProjectSettings from './pages/ProjectSettings'
|
||||
import AuditPage from './pages/AuditPage'
|
||||
import WorkloadPage from './pages/WorkloadPage'
|
||||
import ProjectHealthPage from './pages/ProjectHealthPage'
|
||||
@@ -64,6 +65,16 @@ function App() {
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/projects/:projectId/settings"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<Layout>
|
||||
<ProjectSettings />
|
||||
</Layout>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/audit"
|
||||
element={
|
||||
|
||||
497
frontend/src/components/CalendarView.tsx
Normal file
497
frontend/src/components/CalendarView.tsx
Normal file
@@ -0,0 +1,497 @@
|
||||
import { useState, useEffect, useCallback, useRef } from 'react'
|
||||
import FullCalendar from '@fullcalendar/react'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import timeGridPlugin from '@fullcalendar/timegrid'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import { EventClickArg, EventDropArg, DatesSetArg } from '@fullcalendar/core'
|
||||
import api from '../services/api'
|
||||
|
||||
interface Task {
|
||||
id: string
|
||||
project_id: string
|
||||
title: string
|
||||
description: string | null
|
||||
priority: string
|
||||
status_id: string | null
|
||||
status_name: string | null
|
||||
status_color: string | null
|
||||
assignee_id: string | null
|
||||
assignee_name: string | null
|
||||
due_date: string | null
|
||||
start_date: string | null
|
||||
time_estimate: number | null
|
||||
subtask_count: number
|
||||
}
|
||||
|
||||
interface TaskStatus {
|
||||
id: string
|
||||
name: string
|
||||
color: string
|
||||
is_done: boolean
|
||||
}
|
||||
|
||||
interface CalendarEvent {
|
||||
id: string
|
||||
title: string
|
||||
start: string
|
||||
allDay: boolean
|
||||
backgroundColor: string
|
||||
borderColor: string
|
||||
textColor: string
|
||||
extendedProps: {
|
||||
task: Task
|
||||
isOverdue: boolean
|
||||
priority: string
|
||||
}
|
||||
}
|
||||
|
||||
interface CalendarViewProps {
|
||||
projectId: string
|
||||
statuses: TaskStatus[]
|
||||
onTaskClick: (task: Task) => void
|
||||
onTaskUpdate: () => void
|
||||
}
|
||||
|
||||
// Priority icons as text prefixes
|
||||
const priorityIcons: Record<string, string> = {
|
||||
urgent: '!!!',
|
||||
high: '!!',
|
||||
medium: '!',
|
||||
low: '',
|
||||
}
|
||||
|
||||
// Priority colors for styling
|
||||
const priorityColors: Record<string, string> = {
|
||||
urgent: '#f44336',
|
||||
high: '#ff9800',
|
||||
medium: '#0066cc',
|
||||
low: '#808080',
|
||||
}
|
||||
|
||||
export function CalendarView({
|
||||
projectId,
|
||||
statuses,
|
||||
onTaskClick,
|
||||
onTaskUpdate,
|
||||
}: CalendarViewProps) {
|
||||
const calendarRef = useRef<FullCalendar>(null)
|
||||
const [events, setEvents] = useState<CalendarEvent[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [dateRange, setDateRange] = useState<{ start: Date; end: Date } | null>(null)
|
||||
|
||||
// Filter state
|
||||
const [filterAssignee, setFilterAssignee] = useState<string>('')
|
||||
const [filterStatus, setFilterStatus] = useState<string>('active') // 'all', 'active', 'completed'
|
||||
const [filterPriority, setFilterPriority] = useState<string>('')
|
||||
const [assignees, setAssignees] = useState<{ id: string; name: string }[]>([])
|
||||
|
||||
// Load assignees for filter
|
||||
useEffect(() => {
|
||||
loadAssignees()
|
||||
}, [projectId])
|
||||
|
||||
const loadAssignees = async () => {
|
||||
try {
|
||||
const response = await api.get(`/projects/${projectId}/tasks`)
|
||||
const tasks: Task[] = response.data.tasks
|
||||
const uniqueAssignees = new Map<string, string>()
|
||||
tasks.forEach((task) => {
|
||||
if (task.assignee_id && task.assignee_name) {
|
||||
uniqueAssignees.set(task.assignee_id, task.assignee_name)
|
||||
}
|
||||
})
|
||||
setAssignees(
|
||||
Array.from(uniqueAssignees.entries()).map(([id, name]) => ({ id, name }))
|
||||
)
|
||||
} catch (err) {
|
||||
console.error('Failed to load assignees:', err)
|
||||
}
|
||||
}
|
||||
|
||||
// Load tasks when date range or filters change
|
||||
useEffect(() => {
|
||||
if (dateRange) {
|
||||
loadTasks(dateRange.start, dateRange.end)
|
||||
}
|
||||
}, [dateRange, filterAssignee, filterStatus, filterPriority])
|
||||
|
||||
const loadTasks = async (start: Date, end: Date) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
// Format dates for API
|
||||
const dueAfter = start.toISOString().split('T')[0]
|
||||
const dueBefore = end.toISOString().split('T')[0]
|
||||
|
||||
const response = await api.get(
|
||||
`/projects/${projectId}/tasks?due_after=${dueAfter}&due_before=${dueBefore}`
|
||||
)
|
||||
const tasks: Task[] = response.data.tasks
|
||||
|
||||
// Apply client-side filters
|
||||
let filteredTasks = tasks
|
||||
|
||||
// Assignee filter
|
||||
if (filterAssignee) {
|
||||
filteredTasks = filteredTasks.filter(
|
||||
(task) => task.assignee_id === filterAssignee
|
||||
)
|
||||
}
|
||||
|
||||
// Status filter (show/hide completed)
|
||||
if (filterStatus === 'active') {
|
||||
const doneStatuses = statuses.filter((s) => s.is_done).map((s) => s.id)
|
||||
filteredTasks = filteredTasks.filter(
|
||||
(task) => !task.status_id || !doneStatuses.includes(task.status_id)
|
||||
)
|
||||
} else if (filterStatus === 'completed') {
|
||||
const doneStatuses = statuses.filter((s) => s.is_done).map((s) => s.id)
|
||||
filteredTasks = filteredTasks.filter(
|
||||
(task) => task.status_id && doneStatuses.includes(task.status_id)
|
||||
)
|
||||
}
|
||||
|
||||
// Priority filter
|
||||
if (filterPriority) {
|
||||
filteredTasks = filteredTasks.filter(
|
||||
(task) => task.priority === filterPriority
|
||||
)
|
||||
}
|
||||
|
||||
// Transform to calendar events
|
||||
const calendarEvents = filteredTasks
|
||||
.filter((task) => task.due_date) // Only tasks with due dates
|
||||
.map((task) => transformTaskToEvent(task))
|
||||
|
||||
setEvents(calendarEvents)
|
||||
} catch (err) {
|
||||
console.error('Failed to load tasks:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const transformTaskToEvent = (task: Task): CalendarEvent => {
|
||||
const now = new Date()
|
||||
now.setHours(0, 0, 0, 0)
|
||||
const dueDate = task.due_date ? new Date(task.due_date) : null
|
||||
const isOverdue = dueDate ? dueDate < now : false
|
||||
|
||||
// Determine background color based on status or priority
|
||||
let backgroundColor = task.status_color || '#e0e0e0'
|
||||
let borderColor = backgroundColor
|
||||
let textColor = '#ffffff'
|
||||
|
||||
// If overdue, use special styling
|
||||
if (isOverdue) {
|
||||
backgroundColor = '#ffebee'
|
||||
borderColor = '#f44336'
|
||||
textColor = '#c62828'
|
||||
}
|
||||
|
||||
// Check if status is "done"
|
||||
const statusIsDone = statuses.find(
|
||||
(s) => s.id === task.status_id
|
||||
)?.is_done
|
||||
if (statusIsDone) {
|
||||
backgroundColor = '#e8f5e9'
|
||||
borderColor = '#4caf50'
|
||||
textColor = '#2e7d32'
|
||||
}
|
||||
|
||||
// Add priority icon to title
|
||||
const priorityIcon = priorityIcons[task.priority] || ''
|
||||
const displayTitle = priorityIcon
|
||||
? `${priorityIcon} ${task.title}`
|
||||
: task.title
|
||||
|
||||
return {
|
||||
id: task.id,
|
||||
title: displayTitle,
|
||||
start: task.due_date!,
|
||||
allDay: true,
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
extendedProps: {
|
||||
task,
|
||||
isOverdue,
|
||||
priority: task.priority,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const handleDatesSet = useCallback((dateInfo: DatesSetArg) => {
|
||||
setDateRange({
|
||||
start: dateInfo.start,
|
||||
end: dateInfo.end,
|
||||
})
|
||||
}, [])
|
||||
|
||||
const handleEventClick = useCallback(
|
||||
(clickInfo: EventClickArg) => {
|
||||
const task = clickInfo.event.extendedProps.task as Task
|
||||
onTaskClick(task)
|
||||
},
|
||||
[onTaskClick]
|
||||
)
|
||||
|
||||
const handleEventDrop = useCallback(
|
||||
async (dropInfo: EventDropArg) => {
|
||||
const task = dropInfo.event.extendedProps.task as Task
|
||||
const newDate = dropInfo.event.start
|
||||
|
||||
if (!newDate) {
|
||||
dropInfo.revert()
|
||||
return
|
||||
}
|
||||
|
||||
// Optimistic update - event is already moved in the calendar
|
||||
const newDueDate = newDate.toISOString().split('T')[0]
|
||||
|
||||
try {
|
||||
await api.patch(`/tasks/${task.id}`, {
|
||||
due_date: newDueDate,
|
||||
})
|
||||
// Refresh to get updated data
|
||||
onTaskUpdate()
|
||||
} catch (err) {
|
||||
console.error('Failed to update task date:', err)
|
||||
// Rollback on error
|
||||
dropInfo.revert()
|
||||
}
|
||||
},
|
||||
[onTaskUpdate]
|
||||
)
|
||||
|
||||
// Persist filters to localStorage
|
||||
useEffect(() => {
|
||||
const savedFilters = localStorage.getItem(`calendar-filters-${projectId}`)
|
||||
if (savedFilters) {
|
||||
try {
|
||||
const filters = JSON.parse(savedFilters)
|
||||
if (filters.assignee) setFilterAssignee(filters.assignee)
|
||||
if (filters.status) setFilterStatus(filters.status)
|
||||
if (filters.priority) setFilterPriority(filters.priority)
|
||||
} catch {
|
||||
// Ignore parse errors
|
||||
}
|
||||
}
|
||||
}, [projectId])
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(
|
||||
`calendar-filters-${projectId}`,
|
||||
JSON.stringify({
|
||||
assignee: filterAssignee,
|
||||
status: filterStatus,
|
||||
priority: filterPriority,
|
||||
})
|
||||
)
|
||||
}, [projectId, filterAssignee, filterStatus, filterPriority])
|
||||
|
||||
const handleClearFilters = () => {
|
||||
setFilterAssignee('')
|
||||
setFilterStatus('active')
|
||||
setFilterPriority('')
|
||||
}
|
||||
|
||||
const hasActiveFilters =
|
||||
filterAssignee !== '' ||
|
||||
filterStatus !== 'active' ||
|
||||
filterPriority !== ''
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
{/* Filter Controls */}
|
||||
<div style={styles.filterBar}>
|
||||
<div style={styles.filterGroup}>
|
||||
<label style={styles.filterLabel}>Assignee</label>
|
||||
<select
|
||||
value={filterAssignee}
|
||||
onChange={(e) => setFilterAssignee(e.target.value)}
|
||||
style={styles.filterSelect}
|
||||
>
|
||||
<option value="">All Assignees</option>
|
||||
{assignees.map((assignee) => (
|
||||
<option key={assignee.id} value={assignee.id}>
|
||||
{assignee.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div style={styles.filterGroup}>
|
||||
<label style={styles.filterLabel}>Status</label>
|
||||
<select
|
||||
value={filterStatus}
|
||||
onChange={(e) => setFilterStatus(e.target.value)}
|
||||
style={styles.filterSelect}
|
||||
>
|
||||
<option value="all">All Tasks</option>
|
||||
<option value="active">Active Only</option>
|
||||
<option value="completed">Completed Only</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div style={styles.filterGroup}>
|
||||
<label style={styles.filterLabel}>Priority</label>
|
||||
<select
|
||||
value={filterPriority}
|
||||
onChange={(e) => setFilterPriority(e.target.value)}
|
||||
style={styles.filterSelect}
|
||||
>
|
||||
<option value="">All Priorities</option>
|
||||
<option value="urgent">Urgent</option>
|
||||
<option value="high">High</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="low">Low</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{hasActiveFilters && (
|
||||
<button onClick={handleClearFilters} style={styles.clearFiltersButton}>
|
||||
Clear Filters
|
||||
</button>
|
||||
)}
|
||||
|
||||
{loading && <span style={styles.loadingIndicator}>Loading...</span>}
|
||||
</div>
|
||||
|
||||
{/* Calendar */}
|
||||
<div style={styles.calendarWrapper}>
|
||||
<FullCalendar
|
||||
ref={calendarRef}
|
||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||
initialView="dayGridMonth"
|
||||
headerToolbar={{
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay',
|
||||
}}
|
||||
events={events}
|
||||
editable={true}
|
||||
droppable={true}
|
||||
eventClick={handleEventClick}
|
||||
eventDrop={handleEventDrop}
|
||||
datesSet={handleDatesSet}
|
||||
height="auto"
|
||||
eventDisplay="block"
|
||||
dayMaxEvents={3}
|
||||
moreLinkClick="popover"
|
||||
nowIndicator={true}
|
||||
eventTimeFormat={{
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div style={styles.legend}>
|
||||
<div style={styles.legendItem}>
|
||||
<span style={{ ...styles.legendDot, backgroundColor: '#ffebee', border: '2px solid #f44336' }} />
|
||||
<span style={styles.legendText}>Overdue</span>
|
||||
</div>
|
||||
<div style={styles.legendItem}>
|
||||
<span style={{ ...styles.legendDot, backgroundColor: '#e8f5e9', border: '2px solid #4caf50' }} />
|
||||
<span style={styles.legendText}>Completed</span>
|
||||
</div>
|
||||
<div style={styles.legendItem}>
|
||||
<span style={styles.legendText}>Priority:</span>
|
||||
<span style={{ ...styles.priorityLabel, color: priorityColors.urgent }}>!!! Urgent</span>
|
||||
<span style={{ ...styles.priorityLabel, color: priorityColors.high }}>!! High</span>
|
||||
<span style={{ ...styles.priorityLabel, color: priorityColors.medium }}>! Medium</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const styles: Record<string, React.CSSProperties> = {
|
||||
container: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px',
|
||||
},
|
||||
filterBar: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '16px',
|
||||
alignItems: 'flex-end',
|
||||
padding: '16px',
|
||||
backgroundColor: '#f9f9f9',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #eee',
|
||||
},
|
||||
filterGroup: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '4px',
|
||||
},
|
||||
filterLabel: {
|
||||
fontSize: '12px',
|
||||
fontWeight: 500,
|
||||
color: '#666',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
filterSelect: {
|
||||
padding: '8px 12px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
backgroundColor: 'white',
|
||||
minWidth: '140px',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
clearFiltersButton: {
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
cursor: 'pointer',
|
||||
color: '#666',
|
||||
},
|
||||
loadingIndicator: {
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
marginLeft: 'auto',
|
||||
},
|
||||
calendarWrapper: {
|
||||
backgroundColor: 'white',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
legend: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '24px',
|
||||
padding: '12px 16px',
|
||||
backgroundColor: '#f9f9f9',
|
||||
borderRadius: '8px',
|
||||
fontSize: '13px',
|
||||
color: '#666',
|
||||
},
|
||||
legendItem: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
},
|
||||
legendDot: {
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
borderRadius: '3px',
|
||||
display: 'inline-block',
|
||||
},
|
||||
legendText: {
|
||||
color: '#666',
|
||||
},
|
||||
priorityLabel: {
|
||||
fontWeight: 500,
|
||||
marginLeft: '4px',
|
||||
},
|
||||
}
|
||||
|
||||
export default CalendarView
|
||||
520
frontend/src/components/CustomFieldEditor.tsx
Normal file
520
frontend/src/components/CustomFieldEditor.tsx
Normal file
@@ -0,0 +1,520 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import {
|
||||
customFieldsApi,
|
||||
CustomField,
|
||||
CustomFieldCreate,
|
||||
CustomFieldUpdate,
|
||||
FieldType,
|
||||
} from '../services/customFields'
|
||||
|
||||
interface CustomFieldEditorProps {
|
||||
projectId: string
|
||||
field: CustomField | null // null for create mode
|
||||
onClose: () => void
|
||||
onSave: () => void
|
||||
}
|
||||
|
||||
const FIELD_TYPES: { value: FieldType; label: string; description: string }[] = [
|
||||
{ value: 'text', label: 'Text', description: 'Single line text input' },
|
||||
{ value: 'number', label: 'Number', description: 'Numeric value' },
|
||||
{ value: 'dropdown', label: 'Dropdown', description: 'Select from predefined options' },
|
||||
{ value: 'date', label: 'Date', description: 'Date picker' },
|
||||
{ value: 'person', label: 'Person', description: 'User assignment' },
|
||||
{ value: 'formula', label: 'Formula', description: 'Calculated from other fields' },
|
||||
]
|
||||
|
||||
export function CustomFieldEditor({
|
||||
projectId,
|
||||
field,
|
||||
onClose,
|
||||
onSave,
|
||||
}: CustomFieldEditorProps) {
|
||||
const isEditing = field !== null
|
||||
|
||||
const [name, setName] = useState(field?.name || '')
|
||||
const [fieldType, setFieldType] = useState<FieldType>(field?.field_type || 'text')
|
||||
const [isRequired, setIsRequired] = useState(field?.is_required || false)
|
||||
const [options, setOptions] = useState<string[]>(field?.options || [''])
|
||||
const [formula, setFormula] = useState(field?.formula || '')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Reset form when field changes
|
||||
useEffect(() => {
|
||||
if (field) {
|
||||
setName(field.name)
|
||||
setFieldType(field.field_type)
|
||||
setIsRequired(field.is_required)
|
||||
setOptions(field.options || [''])
|
||||
setFormula(field.formula || '')
|
||||
} else {
|
||||
setName('')
|
||||
setFieldType('text')
|
||||
setIsRequired(false)
|
||||
setOptions([''])
|
||||
setFormula('')
|
||||
}
|
||||
setError(null)
|
||||
}, [field])
|
||||
|
||||
const handleOverlayClick = (e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddOption = () => {
|
||||
setOptions([...options, ''])
|
||||
}
|
||||
|
||||
const handleRemoveOption = (index: number) => {
|
||||
if (options.length > 1) {
|
||||
setOptions(options.filter((_, i) => i !== index))
|
||||
}
|
||||
}
|
||||
|
||||
const handleOptionChange = (index: number, value: string) => {
|
||||
const newOptions = [...options]
|
||||
newOptions[index] = value
|
||||
setOptions(newOptions)
|
||||
}
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
if (!name.trim()) {
|
||||
setError('Field name is required')
|
||||
return false
|
||||
}
|
||||
|
||||
if (fieldType === 'dropdown') {
|
||||
const validOptions = options.filter((opt) => opt.trim())
|
||||
if (validOptions.length === 0) {
|
||||
setError('At least one option is required for dropdown fields')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
if (fieldType === 'formula' && !formula.trim()) {
|
||||
setError('Formula expression is required')
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!validateForm()) return
|
||||
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
if (isEditing && field) {
|
||||
// Update existing field
|
||||
const updateData: CustomFieldUpdate = {
|
||||
name: name.trim(),
|
||||
is_required: isRequired,
|
||||
}
|
||||
|
||||
if (field.field_type === 'dropdown') {
|
||||
updateData.options = options.filter((opt) => opt.trim())
|
||||
}
|
||||
|
||||
if (field.field_type === 'formula') {
|
||||
updateData.formula = formula.trim()
|
||||
}
|
||||
|
||||
await customFieldsApi.updateCustomField(field.id, updateData)
|
||||
} else {
|
||||
// Create new field
|
||||
const createData: CustomFieldCreate = {
|
||||
name: name.trim(),
|
||||
field_type: fieldType,
|
||||
is_required: isRequired,
|
||||
}
|
||||
|
||||
if (fieldType === 'dropdown') {
|
||||
createData.options = options.filter((opt) => opt.trim())
|
||||
}
|
||||
|
||||
if (fieldType === 'formula') {
|
||||
createData.formula = formula.trim()
|
||||
}
|
||||
|
||||
await customFieldsApi.createCustomField(projectId, createData)
|
||||
}
|
||||
|
||||
onSave()
|
||||
} catch (err: unknown) {
|
||||
const errorMessage =
|
||||
(err as { response?: { data?: { detail?: string } } })?.response?.data?.detail ||
|
||||
'Failed to save field'
|
||||
setError(errorMessage)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={styles.overlay} onClick={handleOverlayClick}>
|
||||
<div style={styles.modal}>
|
||||
<div style={styles.header}>
|
||||
<h2 style={styles.title}>
|
||||
{isEditing ? 'Edit Custom Field' : 'Create Custom Field'}
|
||||
</h2>
|
||||
<button onClick={onClose} style={styles.closeButton} aria-label="Close">
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={styles.content}>
|
||||
{error && <div style={styles.errorMessage}>{error}</div>}
|
||||
|
||||
{/* Field Name */}
|
||||
<div style={styles.formGroup}>
|
||||
<label style={styles.label}>Field Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g., Story Points, Sprint Number"
|
||||
style={styles.input}
|
||||
maxLength={100}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Field Type - only show for create mode */}
|
||||
{!isEditing && (
|
||||
<div style={styles.formGroup}>
|
||||
<label style={styles.label}>Field Type *</label>
|
||||
<div style={styles.typeGrid}>
|
||||
{FIELD_TYPES.map((type) => (
|
||||
<div
|
||||
key={type.value}
|
||||
style={{
|
||||
...styles.typeCard,
|
||||
...(fieldType === type.value ? styles.typeCardSelected : {}),
|
||||
}}
|
||||
onClick={() => setFieldType(type.value)}
|
||||
>
|
||||
<div style={styles.typeLabel}>{type.label}</div>
|
||||
<div style={styles.typeDescription}>{type.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show current type info for edit mode */}
|
||||
{isEditing && (
|
||||
<div style={styles.formGroup}>
|
||||
<label style={styles.label}>Field Type</label>
|
||||
<div style={styles.typeDisplay}>
|
||||
{FIELD_TYPES.find((t) => t.value === fieldType)?.label}
|
||||
<span style={styles.typeNote}>(cannot be changed)</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dropdown Options */}
|
||||
{fieldType === 'dropdown' && (
|
||||
<div style={styles.formGroup}>
|
||||
<label style={styles.label}>Options *</label>
|
||||
<div style={styles.optionsList}>
|
||||
{options.map((option, index) => (
|
||||
<div key={index} style={styles.optionRow}>
|
||||
<input
|
||||
type="text"
|
||||
value={option}
|
||||
onChange={(e) => handleOptionChange(index, e.target.value)}
|
||||
placeholder={`Option ${index + 1}`}
|
||||
style={styles.optionInput}
|
||||
/>
|
||||
{options.length > 1 && (
|
||||
<button
|
||||
onClick={() => handleRemoveOption(index)}
|
||||
style={styles.removeOptionButton}
|
||||
aria-label="Remove option"
|
||||
>
|
||||
X
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button onClick={handleAddOption} style={styles.addOptionButton}>
|
||||
+ Add Option
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Formula Expression */}
|
||||
{fieldType === 'formula' && (
|
||||
<div style={styles.formGroup}>
|
||||
<label style={styles.label}>Formula Expression *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formula}
|
||||
onChange={(e) => setFormula(e.target.value)}
|
||||
placeholder="e.g., {time_spent} / {original_estimate} * 100"
|
||||
style={styles.input}
|
||||
/>
|
||||
<div style={styles.formulaHelp}>
|
||||
<p>Use curly braces to reference other fields:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>{'{field_name}'}</code> - Reference a custom number field
|
||||
</li>
|
||||
<li>
|
||||
<code>{'{original_estimate}'}</code> - Task time estimate
|
||||
</li>
|
||||
<li>
|
||||
<code>{'{time_spent}'}</code> - Logged time
|
||||
</li>
|
||||
</ul>
|
||||
<p>Supported operators: +, -, *, /</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Required Checkbox */}
|
||||
<div style={styles.formGroup}>
|
||||
<label style={styles.checkboxLabel}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isRequired}
|
||||
onChange={(e) => setIsRequired(e.target.checked)}
|
||||
style={styles.checkbox}
|
||||
/>
|
||||
Required field
|
||||
</label>
|
||||
<div style={styles.checkboxHelp}>
|
||||
Tasks cannot be created or updated without filling in required fields.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.footer}>
|
||||
<button onClick={onClose} style={styles.cancelButton} disabled={saving}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
style={styles.saveButton}
|
||||
disabled={saving || !name.trim()}
|
||||
>
|
||||
{saving ? 'Saving...' : isEditing ? 'Save Changes' : 'Create Field'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const styles: Record<string, React.CSSProperties> = {
|
||||
overlay: {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 1000,
|
||||
},
|
||||
modal: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
width: '550px',
|
||||
maxWidth: '90%',
|
||||
maxHeight: '90vh',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.2)',
|
||||
},
|
||||
header: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '20px 24px',
|
||||
borderBottom: '1px solid #eee',
|
||||
},
|
||||
title: {
|
||||
margin: 0,
|
||||
fontSize: '18px',
|
||||
fontWeight: 600,
|
||||
},
|
||||
closeButton: {
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
color: '#666',
|
||||
},
|
||||
content: {
|
||||
padding: '24px',
|
||||
overflowY: 'auto',
|
||||
flex: 1,
|
||||
},
|
||||
errorMessage: {
|
||||
padding: '12px',
|
||||
backgroundColor: '#ffebee',
|
||||
color: '#f44336',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '16px',
|
||||
fontSize: '14px',
|
||||
},
|
||||
formGroup: {
|
||||
marginBottom: '20px',
|
||||
},
|
||||
label: {
|
||||
display: 'block',
|
||||
marginBottom: '8px',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
color: '#333',
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
typeGrid: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gap: '10px',
|
||||
},
|
||||
typeCard: {
|
||||
padding: '12px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
transition: 'border-color 0.2s, background-color 0.2s',
|
||||
},
|
||||
typeCardSelected: {
|
||||
borderColor: '#0066cc',
|
||||
backgroundColor: '#e6f0ff',
|
||||
},
|
||||
typeLabel: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
marginBottom: '4px',
|
||||
},
|
||||
typeDescription: {
|
||||
fontSize: '11px',
|
||||
color: '#666',
|
||||
},
|
||||
typeDisplay: {
|
||||
fontSize: '14px',
|
||||
color: '#333',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
},
|
||||
typeNote: {
|
||||
fontSize: '12px',
|
||||
color: '#999',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
optionsList: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
marginBottom: '12px',
|
||||
},
|
||||
optionRow: {
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
},
|
||||
optionInput: {
|
||||
flex: 1,
|
||||
padding: '10px 12px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
removeOptionButton: {
|
||||
width: '40px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
},
|
||||
addOptionButton: {
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '13px',
|
||||
color: '#333',
|
||||
},
|
||||
formulaHelp: {
|
||||
marginTop: '12px',
|
||||
padding: '12px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
},
|
||||
checkboxLabel: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
fontSize: '14px',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
checkbox: {
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
checkboxHelp: {
|
||||
marginTop: '6px',
|
||||
marginLeft: '24px',
|
||||
fontSize: '12px',
|
||||
color: '#888',
|
||||
},
|
||||
footer: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
gap: '12px',
|
||||
padding: '16px 24px',
|
||||
borderTop: '1px solid #eee',
|
||||
backgroundColor: '#fafafa',
|
||||
},
|
||||
cancelButton: {
|
||||
padding: '10px 20px',
|
||||
backgroundColor: 'white',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
},
|
||||
saveButton: {
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#0066cc',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
},
|
||||
}
|
||||
|
||||
export default CustomFieldEditor
|
||||
257
frontend/src/components/CustomFieldInput.tsx
Normal file
257
frontend/src/components/CustomFieldInput.tsx
Normal file
@@ -0,0 +1,257 @@
|
||||
import { CustomField, CustomValueResponse } from '../services/customFields'
|
||||
import { UserSelect } from './UserSelect'
|
||||
import { UserSearchResult } from '../services/collaboration'
|
||||
|
||||
interface CustomFieldInputProps {
|
||||
field: CustomField
|
||||
value: CustomValueResponse | null
|
||||
onChange: (fieldId: string, value: string | number | null) => void
|
||||
disabled?: boolean
|
||||
showLabel?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Dynamic input component that renders appropriate input based on field type
|
||||
*/
|
||||
export function CustomFieldInput({
|
||||
field,
|
||||
value,
|
||||
onChange,
|
||||
disabled = false,
|
||||
showLabel = true,
|
||||
}: CustomFieldInputProps) {
|
||||
const currentValue = value?.value ?? null
|
||||
|
||||
const handleChange = (newValue: string | number | null) => {
|
||||
onChange(field.id, newValue)
|
||||
}
|
||||
|
||||
const renderInput = () => {
|
||||
switch (field.field_type) {
|
||||
case 'text':
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
value={(currentValue as string) || ''}
|
||||
onChange={(e) => handleChange(e.target.value || null)}
|
||||
placeholder={`Enter ${field.name.toLowerCase()}...`}
|
||||
style={styles.input}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'number':
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
value={currentValue !== null ? String(currentValue) : ''}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value
|
||||
handleChange(val === '' ? null : parseFloat(val))
|
||||
}}
|
||||
placeholder="0"
|
||||
style={styles.input}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'dropdown':
|
||||
return (
|
||||
<select
|
||||
value={(currentValue as string) || ''}
|
||||
onChange={(e) => handleChange(e.target.value || null)}
|
||||
style={styles.select}
|
||||
disabled={disabled}
|
||||
>
|
||||
<option value="">-- Select --</option>
|
||||
{field.options?.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)
|
||||
|
||||
case 'date':
|
||||
return (
|
||||
<input
|
||||
type="date"
|
||||
value={(currentValue as string) || ''}
|
||||
onChange={(e) => handleChange(e.target.value || null)}
|
||||
style={styles.input}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'person':
|
||||
return (
|
||||
<UserSelect
|
||||
value={(currentValue as string) || null}
|
||||
onChange={(userId: string | null, _user: UserSearchResult | null) => {
|
||||
handleChange(userId)
|
||||
}}
|
||||
placeholder={`Select ${field.name.toLowerCase()}...`}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'formula':
|
||||
// Formula fields are read-only and display the calculated value
|
||||
return (
|
||||
<div style={styles.formulaDisplay}>
|
||||
{value?.display_value !== null && value?.display_value !== undefined
|
||||
? value.display_value
|
||||
: currentValue !== null
|
||||
? String(currentValue)
|
||||
: '-'}
|
||||
<span style={styles.formulaHint}>(calculated)</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
default:
|
||||
return <div style={styles.unsupported}>Unsupported field type</div>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
{showLabel && (
|
||||
<label style={styles.label}>
|
||||
{field.name}
|
||||
{field.is_required && <span style={styles.required}>*</span>}
|
||||
</label>
|
||||
)}
|
||||
{renderInput()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface CustomFieldsGroupProps {
|
||||
fields: CustomField[]
|
||||
values: CustomValueResponse[]
|
||||
onChange: (fieldId: string, value: string | number | null) => void
|
||||
disabled?: boolean
|
||||
layout?: 'vertical' | 'sidebar'
|
||||
}
|
||||
|
||||
/**
|
||||
* Component to render a group of custom fields
|
||||
*/
|
||||
export function CustomFieldsGroup({
|
||||
fields,
|
||||
values,
|
||||
onChange,
|
||||
disabled = false,
|
||||
layout = 'vertical',
|
||||
}: CustomFieldsGroupProps) {
|
||||
if (fields.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
const getValueForField = (fieldId: string): CustomValueResponse | null => {
|
||||
return values.find((v) => v.field_id === fieldId) || null
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
layout === 'vertical'
|
||||
? styles.groupVertical
|
||||
: styles.groupSidebar
|
||||
}
|
||||
>
|
||||
{fields.map((field) => (
|
||||
<div
|
||||
key={field.id}
|
||||
style={layout === 'sidebar' ? styles.sidebarField : styles.verticalField}
|
||||
>
|
||||
<CustomFieldInput
|
||||
field={field}
|
||||
value={getValueForField(field.id)}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
showLabel={true}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const styles: Record<string, React.CSSProperties> = {
|
||||
container: {
|
||||
width: '100%',
|
||||
},
|
||||
label: {
|
||||
display: 'block',
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
color: '#666',
|
||||
marginBottom: '6px',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
required: {
|
||||
color: '#f44336',
|
||||
marginLeft: '4px',
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
boxSizing: 'border-box',
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
select: {
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
boxSizing: 'border-box',
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
formulaDisplay: {
|
||||
padding: '10px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
border: '1px solid #eee',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
color: '#333',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
},
|
||||
formulaHint: {
|
||||
fontSize: '11px',
|
||||
color: '#999',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
unsupported: {
|
||||
padding: '10px',
|
||||
backgroundColor: '#fff3e0',
|
||||
border: '1px solid #ffb74d',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
color: '#e65100',
|
||||
},
|
||||
groupVertical: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px',
|
||||
},
|
||||
groupSidebar: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px',
|
||||
},
|
||||
verticalField: {
|
||||
width: '100%',
|
||||
},
|
||||
sidebarField: {
|
||||
width: '100%',
|
||||
},
|
||||
}
|
||||
|
||||
export default CustomFieldInput
|
||||
408
frontend/src/components/CustomFieldList.tsx
Normal file
408
frontend/src/components/CustomFieldList.tsx
Normal file
@@ -0,0 +1,408 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { customFieldsApi, CustomField, FieldType } from '../services/customFields'
|
||||
import { CustomFieldEditor } from './CustomFieldEditor'
|
||||
|
||||
interface CustomFieldListProps {
|
||||
projectId: string
|
||||
}
|
||||
|
||||
const FIELD_TYPE_LABELS: Record<FieldType, string> = {
|
||||
text: 'Text',
|
||||
number: 'Number',
|
||||
dropdown: 'Dropdown',
|
||||
date: 'Date',
|
||||
person: 'Person',
|
||||
formula: 'Formula',
|
||||
}
|
||||
|
||||
export function CustomFieldList({ projectId }: CustomFieldListProps) {
|
||||
const [fields, setFields] = useState<CustomField[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [showEditor, setShowEditor] = useState(false)
|
||||
const [editingField, setEditingField] = useState<CustomField | null>(null)
|
||||
const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null)
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
loadFields()
|
||||
}, [projectId])
|
||||
|
||||
const loadFields = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const response = await customFieldsApi.getCustomFields(projectId)
|
||||
setFields(response.fields)
|
||||
} catch (err) {
|
||||
console.error('Failed to load custom fields:', err)
|
||||
setError('Failed to load custom fields')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditingField(null)
|
||||
setShowEditor(true)
|
||||
}
|
||||
|
||||
const handleEdit = (field: CustomField) => {
|
||||
setEditingField(field)
|
||||
setShowEditor(true)
|
||||
}
|
||||
|
||||
const handleEditorClose = () => {
|
||||
setShowEditor(false)
|
||||
setEditingField(null)
|
||||
}
|
||||
|
||||
const handleEditorSave = () => {
|
||||
setShowEditor(false)
|
||||
setEditingField(null)
|
||||
loadFields()
|
||||
}
|
||||
|
||||
const handleDeleteClick = (fieldId: string) => {
|
||||
setDeleteConfirm(fieldId)
|
||||
}
|
||||
|
||||
const handleDeleteCancel = () => {
|
||||
setDeleteConfirm(null)
|
||||
}
|
||||
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (!deleteConfirm) return
|
||||
|
||||
setDeleting(true)
|
||||
try {
|
||||
await customFieldsApi.deleteCustomField(deleteConfirm)
|
||||
setDeleteConfirm(null)
|
||||
loadFields()
|
||||
} catch (err: unknown) {
|
||||
const errorMessage =
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail ||
|
||||
'Failed to delete field'
|
||||
alert(errorMessage)
|
||||
} finally {
|
||||
setDeleting(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <div style={styles.loading}>Loading custom fields...</div>
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={styles.error}>
|
||||
<p>{error}</p>
|
||||
<button onClick={loadFields} style={styles.retryButton}>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.header}>
|
||||
<h3 style={styles.title}>Custom Fields</h3>
|
||||
<button onClick={handleCreate} style={styles.addButton}>
|
||||
+ Add Field
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p style={styles.description}>
|
||||
Custom fields allow you to add additional data to tasks. You can create up to 20
|
||||
fields per project.
|
||||
</p>
|
||||
|
||||
{fields.length === 0 ? (
|
||||
<div style={styles.emptyState}>
|
||||
<p>No custom fields defined yet.</p>
|
||||
<p style={styles.emptyHint}>
|
||||
Click "Add Field" to create your first custom field.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div style={styles.fieldList}>
|
||||
{fields.map((field) => (
|
||||
<div key={field.id} style={styles.fieldCard}>
|
||||
<div style={styles.fieldInfo}>
|
||||
<div style={styles.fieldName}>
|
||||
{field.name}
|
||||
{field.is_required && <span style={styles.requiredBadge}>Required</span>}
|
||||
</div>
|
||||
<div style={styles.fieldMeta}>
|
||||
<span style={styles.fieldType}>
|
||||
{FIELD_TYPE_LABELS[field.field_type]}
|
||||
</span>
|
||||
{field.field_type === 'dropdown' && field.options && (
|
||||
<span style={styles.optionCount}>
|
||||
{field.options.length} option{field.options.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
)}
|
||||
{field.field_type === 'formula' && field.formula && (
|
||||
<span style={styles.formulaPreview}>= {field.formula}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div style={styles.fieldActions}>
|
||||
<button
|
||||
onClick={() => handleEdit(field)}
|
||||
style={styles.editButton}
|
||||
aria-label={`Edit ${field.name}`}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteClick(field.id)}
|
||||
style={styles.deleteButton}
|
||||
aria-label={`Delete ${field.name}`}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Editor Modal */}
|
||||
{showEditor && (
|
||||
<CustomFieldEditor
|
||||
projectId={projectId}
|
||||
field={editingField}
|
||||
onClose={handleEditorClose}
|
||||
onSave={handleEditorSave}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
{deleteConfirm && (
|
||||
<div style={styles.modalOverlay}>
|
||||
<div style={styles.confirmModal}>
|
||||
<h3 style={styles.confirmTitle}>Delete Custom Field?</h3>
|
||||
<p style={styles.confirmMessage}>
|
||||
This will permanently delete this field and all stored values for all tasks.
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
<div style={styles.confirmActions}>
|
||||
<button
|
||||
onClick={handleDeleteCancel}
|
||||
style={styles.cancelButton}
|
||||
disabled={deleting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDeleteConfirm}
|
||||
style={styles.confirmDeleteButton}
|
||||
disabled={deleting}
|
||||
>
|
||||
{deleting ? 'Deleting...' : 'Delete'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const styles: Record<string, React.CSSProperties> = {
|
||||
container: {
|
||||
padding: '24px',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
header: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
title: {
|
||||
margin: 0,
|
||||
fontSize: '18px',
|
||||
fontWeight: 600,
|
||||
},
|
||||
addButton: {
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#0066cc',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
},
|
||||
description: {
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
marginBottom: '20px',
|
||||
},
|
||||
loading: {
|
||||
padding: '24px',
|
||||
textAlign: 'center',
|
||||
color: '#666',
|
||||
},
|
||||
error: {
|
||||
padding: '24px',
|
||||
textAlign: 'center',
|
||||
color: '#f44336',
|
||||
},
|
||||
retryButton: {
|
||||
marginTop: '12px',
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
emptyState: {
|
||||
textAlign: 'center',
|
||||
padding: '32px',
|
||||
color: '#666',
|
||||
backgroundColor: '#fafafa',
|
||||
borderRadius: '8px',
|
||||
border: '1px dashed #ddd',
|
||||
},
|
||||
emptyHint: {
|
||||
fontSize: '13px',
|
||||
color: '#999',
|
||||
marginTop: '8px',
|
||||
},
|
||||
fieldList: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px',
|
||||
},
|
||||
fieldCard: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '16px',
|
||||
backgroundColor: '#fafafa',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #eee',
|
||||
},
|
||||
fieldInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
fieldName: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
marginBottom: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
},
|
||||
requiredBadge: {
|
||||
fontSize: '11px',
|
||||
padding: '2px 6px',
|
||||
backgroundColor: '#ff9800',
|
||||
color: 'white',
|
||||
borderRadius: '4px',
|
||||
fontWeight: 500,
|
||||
},
|
||||
fieldMeta: {
|
||||
display: 'flex',
|
||||
gap: '12px',
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
},
|
||||
fieldType: {
|
||||
backgroundColor: '#e0e0e0',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
optionCount: {
|
||||
color: '#888',
|
||||
},
|
||||
formulaPreview: {
|
||||
fontFamily: 'monospace',
|
||||
color: '#0066cc',
|
||||
maxWidth: '200px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
fieldActions: {
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
},
|
||||
editButton: {
|
||||
padding: '6px 12px',
|
||||
backgroundColor: 'white',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '13px',
|
||||
},
|
||||
deleteButton: {
|
||||
padding: '6px 12px',
|
||||
backgroundColor: 'white',
|
||||
border: '1px solid #f44336',
|
||||
color: '#f44336',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '13px',
|
||||
},
|
||||
modalOverlay: {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 1000,
|
||||
},
|
||||
confirmModal: {
|
||||
backgroundColor: 'white',
|
||||
padding: '24px',
|
||||
borderRadius: '8px',
|
||||
width: '400px',
|
||||
maxWidth: '90%',
|
||||
},
|
||||
confirmTitle: {
|
||||
margin: '0 0 12px 0',
|
||||
fontSize: '18px',
|
||||
fontWeight: 600,
|
||||
},
|
||||
confirmMessage: {
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
lineHeight: 1.5,
|
||||
marginBottom: '20px',
|
||||
},
|
||||
confirmActions: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
gap: '12px',
|
||||
},
|
||||
cancelButton: {
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
confirmDeleteButton: {
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#f44336',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
}
|
||||
|
||||
export default CustomFieldList
|
||||
983
frontend/src/components/GanttChart.tsx
Normal file
983
frontend/src/components/GanttChart.tsx
Normal file
File diff suppressed because one or more lines are too long
@@ -1,7 +1,9 @@
|
||||
import { useState } from 'react'
|
||||
import { CustomValueResponse } from '../services/customFields'
|
||||
|
||||
interface Task {
|
||||
id: string
|
||||
project_id: string
|
||||
title: string
|
||||
description: string | null
|
||||
priority: string
|
||||
@@ -11,8 +13,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 {
|
||||
@@ -133,6 +137,12 @@ export function KanbanBoard({
|
||||
{task.subtask_count > 0 && (
|
||||
<span style={styles.subtaskBadge}>{task.subtask_count} subtasks</span>
|
||||
)}
|
||||
{/* Display custom field values (limit to first 2 for compact display) */}
|
||||
{task.custom_values?.slice(0, 2).map((cv) => (
|
||||
<span key={cv.field_id} style={styles.customValueBadge}>
|
||||
{cv.field_name}: {cv.display_value || cv.value || '-'}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -280,6 +290,17 @@ const styles: Record<string, React.CSSProperties> = {
|
||||
subtaskBadge: {
|
||||
color: '#999',
|
||||
},
|
||||
customValueBadge: {
|
||||
backgroundColor: '#f3e5f5',
|
||||
color: '#7b1fa2',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '10px',
|
||||
maxWidth: '100px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
emptyColumn: {
|
||||
textAlign: 'center',
|
||||
padding: '24px',
|
||||
|
||||
@@ -4,9 +4,12 @@ import { Comments } from './Comments'
|
||||
import { TaskAttachments } from './TaskAttachments'
|
||||
import { UserSelect } from './UserSelect'
|
||||
import { UserSearchResult } from '../services/collaboration'
|
||||
import { customFieldsApi, CustomField, CustomValueResponse } from '../services/customFields'
|
||||
import { CustomFieldInput } from './CustomFieldInput'
|
||||
|
||||
interface Task {
|
||||
id: string
|
||||
project_id: string
|
||||
title: string
|
||||
description: string | null
|
||||
priority: string
|
||||
@@ -18,6 +21,7 @@ interface Task {
|
||||
due_date: string | null
|
||||
time_estimate: number | null
|
||||
subtask_count: number
|
||||
custom_values?: CustomValueResponse[]
|
||||
}
|
||||
|
||||
interface TaskStatus {
|
||||
@@ -59,6 +63,44 @@ export function TaskDetailModal({
|
||||
: null
|
||||
)
|
||||
|
||||
// Custom fields state
|
||||
const [customFields, setCustomFields] = useState<CustomField[]>([])
|
||||
const [customValues, setCustomValues] = useState<CustomValueResponse[]>([])
|
||||
const [editCustomValues, setEditCustomValues] = useState<Record<string, string | number | null>>({})
|
||||
const [loadingCustomFields, setLoadingCustomFields] = useState(false)
|
||||
|
||||
// Load custom fields for the project
|
||||
useEffect(() => {
|
||||
if (task.project_id) {
|
||||
loadCustomFields()
|
||||
}
|
||||
}, [task.project_id])
|
||||
|
||||
const loadCustomFields = async () => {
|
||||
setLoadingCustomFields(true)
|
||||
try {
|
||||
const response = await customFieldsApi.getCustomFields(task.project_id)
|
||||
setCustomFields(response.fields)
|
||||
} catch (err) {
|
||||
console.error('Failed to load custom fields:', err)
|
||||
} finally {
|
||||
setLoadingCustomFields(false)
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize custom values from task
|
||||
useEffect(() => {
|
||||
setCustomValues(task.custom_values || [])
|
||||
// Build edit values map
|
||||
const valuesMap: Record<string, string | number | null> = {}
|
||||
if (task.custom_values) {
|
||||
task.custom_values.forEach((cv) => {
|
||||
valuesMap[cv.field_id] = cv.value
|
||||
})
|
||||
}
|
||||
setEditCustomValues(valuesMap)
|
||||
}, [task.custom_values])
|
||||
|
||||
// Reset form when task changes
|
||||
useEffect(() => {
|
||||
setEditForm({
|
||||
@@ -108,6 +150,21 @@ export function TaskDetailModal({
|
||||
payload.time_estimate = null
|
||||
}
|
||||
|
||||
// Include custom field values (only non-formula fields)
|
||||
const customValuesPayload = Object.entries(editCustomValues)
|
||||
.filter(([fieldId]) => {
|
||||
const field = customFields.find((f) => f.id === fieldId)
|
||||
return field && field.field_type !== 'formula'
|
||||
})
|
||||
.map(([fieldId, value]) => ({
|
||||
field_id: fieldId,
|
||||
value: value,
|
||||
}))
|
||||
|
||||
if (customValuesPayload.length > 0) {
|
||||
payload.custom_values = customValuesPayload
|
||||
}
|
||||
|
||||
await api.patch(`/tasks/${task.id}`, payload)
|
||||
setIsEditing(false)
|
||||
onUpdate()
|
||||
@@ -118,6 +175,13 @@ export function TaskDetailModal({
|
||||
}
|
||||
}
|
||||
|
||||
const handleCustomFieldChange = (fieldId: string, value: string | number | null) => {
|
||||
setEditCustomValues((prev) => ({
|
||||
...prev,
|
||||
[fieldId]: value,
|
||||
}))
|
||||
}
|
||||
|
||||
const handleAssigneeChange = (userId: string | null, user: UserSearchResult | null) => {
|
||||
setEditForm({ ...editForm, assignee_id: userId || '' })
|
||||
setSelectedAssignee(user)
|
||||
@@ -349,6 +413,50 @@ export function TaskDetailModal({
|
||||
<div style={styles.subtaskInfo}>{task.subtask_count} subtask(s)</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Custom Fields Section */}
|
||||
{customFields.length > 0 && (
|
||||
<>
|
||||
<div style={styles.customFieldsDivider} />
|
||||
<div style={styles.customFieldsHeader}>Custom Fields</div>
|
||||
{loadingCustomFields ? (
|
||||
<div style={styles.loadingText}>Loading...</div>
|
||||
) : (
|
||||
customFields.map((field) => {
|
||||
// Get the value for this field
|
||||
const valueResponse = customValues.find(
|
||||
(v) => v.field_id === field.id
|
||||
) || {
|
||||
field_id: field.id,
|
||||
field_name: field.name,
|
||||
field_type: field.field_type,
|
||||
value: editCustomValues[field.id] ?? null,
|
||||
display_value: null,
|
||||
}
|
||||
|
||||
// For editing mode, create a modified value response with edit values
|
||||
const displayValue = isEditing
|
||||
? {
|
||||
...valueResponse,
|
||||
value: editCustomValues[field.id] ?? valueResponse.value,
|
||||
}
|
||||
: valueResponse
|
||||
|
||||
return (
|
||||
<div key={field.id} style={styles.sidebarField}>
|
||||
<CustomFieldInput
|
||||
field={field}
|
||||
value={displayValue}
|
||||
onChange={handleCustomFieldChange}
|
||||
disabled={!isEditing || field.field_type === 'formula'}
|
||||
showLabel={true}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -571,6 +679,23 @@ const styles: Record<string, React.CSSProperties> = {
|
||||
fontSize: '14px',
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
customFieldsDivider: {
|
||||
height: '1px',
|
||||
backgroundColor: '#ddd',
|
||||
margin: '20px 0',
|
||||
},
|
||||
customFieldsHeader: {
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
color: '#666',
|
||||
marginBottom: '16px',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
loadingText: {
|
||||
fontSize: '13px',
|
||||
color: '#888',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
}
|
||||
|
||||
export default TaskDetailModal
|
||||
|
||||
@@ -16,3 +16,122 @@ body {
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* FullCalendar custom styles */
|
||||
.fc {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.fc .fc-toolbar-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fc .fc-button {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ddd;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
padding: 0.5rem 1rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.fc .fc-button:hover {
|
||||
background-color: #e8e8e8;
|
||||
border-color: #ccc;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.fc .fc-button-primary:not(:disabled).fc-button-active,
|
||||
.fc .fc-button-primary:not(:disabled):active {
|
||||
background-color: #0066cc;
|
||||
border-color: #0066cc;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fc .fc-button-primary:focus {
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-day-number {
|
||||
padding: 8px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.fc .fc-col-header-cell-cushion {
|
||||
padding: 10px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.fc .fc-event {
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8125rem;
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
.fc .fc-event:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-event-dot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-day.fc-day-today {
|
||||
background-color: rgba(0, 102, 204, 0.05);
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
|
||||
color: #0066cc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fc .fc-more-link {
|
||||
color: #0066cc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fc .fc-popover {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.fc .fc-popover-header {
|
||||
background-color: #f5f5f5;
|
||||
padding: 8px 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fc-theme-standard .fc-scrollgrid {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fc-theme-standard td,
|
||||
.fc-theme-standard th {
|
||||
border-color: #eee;
|
||||
}
|
||||
|
||||
/* Time grid styles */
|
||||
.fc .fc-timegrid-slot-label {
|
||||
font-size: 0.75rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.fc .fc-timegrid-axis {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* Now indicator */
|
||||
.fc .fc-timegrid-now-indicator-line {
|
||||
border-color: #f44336;
|
||||
}
|
||||
|
||||
.fc .fc-timegrid-now-indicator-arrow {
|
||||
border-top-color: #f44336;
|
||||
}
|
||||
|
||||
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',
|
||||
},
|
||||
}
|
||||
|
||||
119
frontend/src/services/customFields.ts
Normal file
119
frontend/src/services/customFields.ts
Normal file
@@ -0,0 +1,119 @@
|
||||
import api from './api'
|
||||
|
||||
// Enum matching backend FieldType
|
||||
export type FieldType = 'text' | 'number' | 'dropdown' | 'date' | 'person' | 'formula'
|
||||
|
||||
export interface CustomField {
|
||||
id: string
|
||||
project_id: string
|
||||
name: string
|
||||
field_type: FieldType
|
||||
options: string[] | null
|
||||
formula: string | null
|
||||
is_required: boolean
|
||||
position: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface CustomFieldCreate {
|
||||
name: string
|
||||
field_type: FieldType
|
||||
options?: string[]
|
||||
formula?: string
|
||||
is_required?: boolean
|
||||
}
|
||||
|
||||
export interface CustomFieldUpdate {
|
||||
name?: string
|
||||
options?: string[]
|
||||
formula?: string
|
||||
is_required?: boolean
|
||||
}
|
||||
|
||||
export interface CustomFieldListResponse {
|
||||
fields: CustomField[]
|
||||
total: number
|
||||
}
|
||||
|
||||
export interface CustomValueInput {
|
||||
field_id: string
|
||||
value: string | number | null
|
||||
}
|
||||
|
||||
export interface CustomValueResponse {
|
||||
field_id: string
|
||||
field_name: string
|
||||
field_type: FieldType
|
||||
value: string | number | null
|
||||
display_value: string | null
|
||||
}
|
||||
|
||||
export const customFieldsApi = {
|
||||
/**
|
||||
* Get all custom fields for a project
|
||||
*/
|
||||
getCustomFields: async (projectId: string): Promise<CustomFieldListResponse> => {
|
||||
const response = await api.get<CustomFieldListResponse>(
|
||||
`/projects/${projectId}/custom-fields`
|
||||
)
|
||||
return response.data
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a new custom field
|
||||
*/
|
||||
createCustomField: async (
|
||||
projectId: string,
|
||||
data: CustomFieldCreate
|
||||
): Promise<CustomField> => {
|
||||
const response = await api.post<CustomField>(
|
||||
`/projects/${projectId}/custom-fields`,
|
||||
data
|
||||
)
|
||||
return response.data
|
||||
},
|
||||
|
||||
/**
|
||||
* Update an existing custom field
|
||||
*/
|
||||
updateCustomField: async (
|
||||
fieldId: string,
|
||||
data: CustomFieldUpdate
|
||||
): Promise<CustomField> => {
|
||||
const response = await api.put<CustomField>(`/custom-fields/${fieldId}`, data)
|
||||
return response.data
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete a custom field
|
||||
*/
|
||||
deleteCustomField: async (fieldId: string): Promise<void> => {
|
||||
await api.delete(`/custom-fields/${fieldId}`)
|
||||
},
|
||||
|
||||
/**
|
||||
* Get a specific custom field by ID
|
||||
*/
|
||||
getCustomField: async (fieldId: string): Promise<CustomField> => {
|
||||
const response = await api.get<CustomField>(`/custom-fields/${fieldId}`)
|
||||
return response.data
|
||||
},
|
||||
|
||||
/**
|
||||
* Update custom field position (for reordering)
|
||||
*/
|
||||
updateCustomFieldPosition: async (
|
||||
fieldId: string,
|
||||
position: number
|
||||
): Promise<CustomField> => {
|
||||
const response = await api.patch<CustomField>(
|
||||
`/custom-fields/${fieldId}/position`,
|
||||
null,
|
||||
{ params: { position } }
|
||||
)
|
||||
return response.data
|
||||
},
|
||||
}
|
||||
|
||||
export default customFieldsApi
|
||||
75
frontend/src/services/dependencies.ts
Normal file
75
frontend/src/services/dependencies.ts
Normal file
@@ -0,0 +1,75 @@
|
||||
import api from './api'
|
||||
|
||||
export type DependencyType = 'FS' | 'SS' | 'FF' | 'SF'
|
||||
|
||||
export interface TaskDependency {
|
||||
id: string
|
||||
predecessor_id: string
|
||||
successor_id: string
|
||||
dependency_type: DependencyType
|
||||
lag_days: number
|
||||
created_at: string
|
||||
predecessor_title?: string
|
||||
successor_title?: string
|
||||
}
|
||||
|
||||
export interface CreateDependencyRequest {
|
||||
predecessor_id: string
|
||||
dependency_type?: DependencyType
|
||||
lag_days?: number
|
||||
}
|
||||
|
||||
export interface CreateDependencyResponse {
|
||||
id: string
|
||||
predecessor_id: string
|
||||
successor_id: string
|
||||
dependency_type: DependencyType
|
||||
lag_days: number
|
||||
}
|
||||
|
||||
// API response wrapper for list endpoints
|
||||
interface DependencyListResponse {
|
||||
dependencies: TaskDependency[]
|
||||
total: number
|
||||
}
|
||||
|
||||
export const dependenciesApi = {
|
||||
/**
|
||||
* Get all dependencies for a specific task
|
||||
*/
|
||||
getTaskDependencies: async (taskId: string): Promise<TaskDependency[]> => {
|
||||
const response = await api.get<DependencyListResponse>(`/tasks/${taskId}/dependencies`)
|
||||
return response.data.dependencies
|
||||
},
|
||||
|
||||
/**
|
||||
* Add a dependency to a task (task becomes successor)
|
||||
*/
|
||||
addDependency: async (
|
||||
taskId: string,
|
||||
data: CreateDependencyRequest
|
||||
): Promise<CreateDependencyResponse> => {
|
||||
const response = await api.post<CreateDependencyResponse>(
|
||||
`/tasks/${taskId}/dependencies`,
|
||||
data
|
||||
)
|
||||
return response.data
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove a dependency
|
||||
*/
|
||||
removeDependency: async (dependencyId: string): Promise<void> => {
|
||||
await api.delete(`/task-dependencies/${dependencyId}`)
|
||||
},
|
||||
|
||||
/**
|
||||
* Get all dependencies for a project
|
||||
*/
|
||||
getProjectDependencies: async (projectId: string): Promise<TaskDependency[]> => {
|
||||
const response = await api.get<DependencyListResponse>(`/projects/${projectId}/dependencies`)
|
||||
return response.data.dependencies
|
||||
},
|
||||
}
|
||||
|
||||
export default dependenciesApi
|
||||
46
frontend/src/types/frappe-gantt.d.ts
vendored
Normal file
46
frontend/src/types/frappe-gantt.d.ts
vendored
Normal file
@@ -0,0 +1,46 @@
|
||||
// Type definitions for frappe-gantt
|
||||
declare module 'frappe-gantt' {
|
||||
export interface GanttTask {
|
||||
id: string
|
||||
name: string
|
||||
start: string | Date
|
||||
end: string | Date
|
||||
progress?: number
|
||||
dependencies?: string
|
||||
custom_class?: string
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
export interface GanttOptions {
|
||||
header_height?: number
|
||||
column_width?: number
|
||||
step?: number
|
||||
view_modes?: ViewMode[]
|
||||
bar_height?: number
|
||||
bar_corner_radius?: number
|
||||
arrow_curve?: number
|
||||
padding?: number
|
||||
view_mode?: ViewMode
|
||||
date_format?: string
|
||||
language?: string
|
||||
custom_popup_html?: ((task: GanttTask) => string) | null
|
||||
on_click?: (task: GanttTask) => void
|
||||
on_date_change?: (task: GanttTask, start: Date, end: Date) => void
|
||||
on_progress_change?: (task: GanttTask, progress: number) => void
|
||||
on_view_change?: (mode: ViewMode) => void
|
||||
}
|
||||
|
||||
export type ViewMode = 'Quarter Day' | 'Half Day' | 'Day' | 'Week' | 'Month' | 'Year'
|
||||
|
||||
export default class Gantt {
|
||||
constructor(
|
||||
wrapper: string | HTMLElement | SVGElement,
|
||||
tasks: GanttTask[],
|
||||
options?: GanttOptions
|
||||
)
|
||||
|
||||
change_view_mode(mode: ViewMode): void
|
||||
refresh(tasks: GanttTask[]): void
|
||||
scroll_to_task(taskId: string): void
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user