datestuff
This commit is contained in:
parent
1a6d7291c4
commit
e11dd4ed1f
SSH key fingerprint:
SHA256:vW1EA0fRR3Fw+dD/sM0K+x3Il2gSry6YRYHqOeQwrfk
5 changed files with 326 additions and 27 deletions
|
|
@ -1,6 +1,7 @@
|
|||
import { useState, useRef, useEffect } from 'react'
|
||||
import type { ChecklistItem as ChecklistItemType } from '../types'
|
||||
import DependencyManager from './DependencyManager'
|
||||
import { DateConstraintManager } from './DateConstraintManager'
|
||||
|
||||
interface ChecklistItemProps {
|
||||
item: ChecklistItemType
|
||||
|
|
@ -24,6 +25,7 @@ export default function ChecklistItem({
|
|||
const [isEditing, setIsEditing] = useState(false)
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
const [isDependencyModalOpen, setIsDependencyModalOpen] = useState(false)
|
||||
const [isDateConstraintModalOpen, setIsDateConstraintModalOpen] = useState(false)
|
||||
const [userName, setUserName] = useState('')
|
||||
const contentRef = useRef<HTMLSpanElement>(null)
|
||||
|
||||
|
|
@ -36,8 +38,14 @@ export default function ChecklistItem({
|
|||
return depItem?.checked
|
||||
}) ?? true
|
||||
|
||||
// Check if item can be completed (all dependencies met)
|
||||
const canComplete = dependenciesCompleted || item.checked
|
||||
// Check date constraints
|
||||
const now = new Date()
|
||||
const notBeforeDate = item.not_before ? new Date(item.not_before) : null
|
||||
const notAfterDate = item.not_after ? new Date(item.not_after) : null
|
||||
const dateConstraintsMet = (!notBeforeDate || now >= notBeforeDate) && (!notAfterDate || now <= notAfterDate)
|
||||
|
||||
// Check if item can be completed (all dependencies met and date constraints met)
|
||||
const canComplete = (dependenciesCompleted && dateConstraintsMet) || item.checked
|
||||
|
||||
// Get dependency items for display
|
||||
const dependencyItems = item.dependencies?.map(depId =>
|
||||
|
|
@ -131,11 +139,24 @@ export default function ChecklistItem({
|
|||
return
|
||||
}
|
||||
|
||||
// Check if date constraints are met
|
||||
if (!dateConstraintsMet) {
|
||||
let message = 'Cannot complete this item due to date constraints:\n\n'
|
||||
if (notBeforeDate && now < notBeforeDate) {
|
||||
message += `• Cannot complete before ${notBeforeDate.toLocaleString()}\n`
|
||||
}
|
||||
if (notAfterDate && now > notAfterDate) {
|
||||
message += `• Cannot complete after ${notAfterDate.toLocaleString()}\n`
|
||||
}
|
||||
alert(message)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await onUpdate(item.id, { checked: true })
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle item:', error)
|
||||
if (error instanceof Error && error.message.includes('dependency')) {
|
||||
if (error instanceof Error && error.message.includes('cannot complete item:')) {
|
||||
alert(error.message)
|
||||
}
|
||||
}
|
||||
|
|
@ -160,6 +181,15 @@ export default function ChecklistItem({
|
|||
}, 100)
|
||||
}
|
||||
|
||||
const handleDateConstraintSave = async (notBefore?: string, notAfter?: string) => {
|
||||
try {
|
||||
await onUpdate(item.id, { not_before: notBefore, not_after: notAfter })
|
||||
setIsDateConstraintModalOpen(false)
|
||||
} catch (error) {
|
||||
console.error('Failed to update date constraints:', error)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<li className="group">
|
||||
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all duration-200 border border-transparent hover:border-gray-200 dark:hover:border-gray-700">
|
||||
|
|
@ -207,6 +237,19 @@ export default function ChecklistItem({
|
|||
⚠️ Depends on: {dependencyItems.map(dep => dep?.content).join(', ')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Date constraint warning */}
|
||||
{!item.checked && !dateConstraintsMet && (
|
||||
<div className="mt-1 text-xs text-red-600 dark:text-red-400">
|
||||
⏰ Date constraint: {
|
||||
notBeforeDate && now < notBeforeDate
|
||||
? `Cannot complete before ${notBeforeDate.toLocaleString()}`
|
||||
: notAfterDate && now > notAfterDate
|
||||
? `Cannot complete after ${notAfterDate.toLocaleString()}`
|
||||
: 'Date constraint not met'
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
|
|
@ -227,6 +270,22 @@ export default function ChecklistItem({
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Date constraint indicators */}
|
||||
{(item.not_before || item.not_after) && (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-full whitespace-nowrap border ${
|
||||
dateConstraintsMet
|
||||
? 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
|
||||
: 'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800'
|
||||
}`}>
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
{dateConstraintsMet ? 'Ready' : 'Time locked'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLocked && !isLockedByMe && (
|
||||
<span className="inline-flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 px-2 py-1 rounded-full whitespace-nowrap border border-red-200 dark:border-red-800">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
|
|
@ -247,6 +306,15 @@ export default function ChecklistItem({
|
|||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsDateConstraintModalOpen(true)}
|
||||
className="p-1.5 text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-md transition-all duration-200 group/date"
|
||||
title="Manage date constraints"
|
||||
>
|
||||
<svg className="w-4 h-4 group-hover/date:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={isDeleting}
|
||||
|
|
@ -287,6 +355,15 @@ export default function ChecklistItem({
|
|||
onClose={() => setIsDependencyModalOpen(false)}
|
||||
isOpen={isDependencyModalOpen}
|
||||
/>
|
||||
|
||||
{/* Date Constraint Manager Modal */}
|
||||
{isDateConstraintModalOpen && (
|
||||
<DateConstraintManager
|
||||
item={item}
|
||||
onSave={handleDateConstraintSave}
|
||||
onCancel={() => setIsDateConstraintModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
92
frontend/src/components/DateConstraintManager.tsx
Normal file
92
frontend/src/components/DateConstraintManager.tsx
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import React, { useState } from 'react'
|
||||
import { ChecklistItem } from '../types'
|
||||
|
||||
interface DateConstraintManagerProps {
|
||||
item: ChecklistItem
|
||||
onSave: (notBefore?: string, notAfter?: string) => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
export const DateConstraintManager: React.FC<DateConstraintManagerProps> = ({
|
||||
item,
|
||||
onSave,
|
||||
onCancel
|
||||
}) => {
|
||||
const [notBefore, setNotBefore] = useState<string>(
|
||||
item.not_before ? new Date(item.not_before).toISOString().slice(0, 16) : ''
|
||||
)
|
||||
const [notAfter, setNotAfter] = useState<string>(
|
||||
item.not_after ? new Date(item.not_after).toISOString().slice(0, 16) : ''
|
||||
)
|
||||
|
||||
const handleSave = () => {
|
||||
const notBeforeDate = notBefore ? new Date(notBefore).toISOString() : undefined
|
||||
const notAfterDate = notAfter ? new Date(notAfter).toISOString() : undefined
|
||||
onSave(notBeforeDate, notAfterDate)
|
||||
}
|
||||
|
||||
const handleClear = () => {
|
||||
setNotBefore('')
|
||||
setNotAfter('')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-6 w-96 max-w-full mx-4">
|
||||
<h3 className="text-lg font-semibold mb-4">Manage Date Constraints</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
Set when this item can be completed. Leave empty to remove constraints.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Not Before (Earliest completion time)
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={notBefore}
|
||||
onChange={(e) => setNotBefore(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Not After (Latest completion time)
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={notAfter}
|
||||
onChange={(e) => setNotAfter(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between mt-6">
|
||||
<button
|
||||
onClick={handleClear}
|
||||
className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800"
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
<div className="space-x-2">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="px-4 py-2 text-sm bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -8,6 +8,8 @@ export interface ChecklistItem {
|
|||
checklist_uuid: string
|
||||
children?: ChecklistItem[]
|
||||
dependencies?: number[]
|
||||
not_before?: string
|
||||
not_after?: string
|
||||
}
|
||||
|
||||
export interface SavedChecklist {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue