e80847b01f
* Fix project name overflow and add validation This commit addresses issue #971 by implementing both UI fixes and validation to prevent excessively long project names. Changes: 1. Add word-break and line-clamp to ProjectBanner.tsx to handle overflow gracefully with line-clamp-3 for names 2. Add frontend validation in ProjectModal.tsx limiting names to 6 words maximum 3. Add backend validation in project.js model with custom wordCount validator 4. Show user-friendly error messages when validation fails This ensures project names remain concise and UI-friendly while preventing the extreme overflow cases that were possible before. Fixes #971 * Add overflow-hidden to make line-clamp work properly The line-clamp utility requires explicit overflow-hidden to function correctly. Without it, the text continues to display in full rather than being truncated with ellipsis. * Fix line-clamp using inline CSS styles Tailwind's line-clamp utilities weren't working, so switched to using inline styles with the standard CSS approach: - display: -webkit-box - -webkit-line-clamp: 3 - -webkit-box-orient: vertical This ensures the text truncation works reliably across browsers. * Use Tailwind line-clamp utilities (already defined in CSS) The project already has line-clamp-1/2/3 utilities properly defined in tailwind.css with all the necessary webkit properties. Simplified the component to use these existing utilities instead of inline styles. * Add dedicated CSS classes with !important for line-clamp Created custom project-name-clamp and project-desc-clamp classes with !important flags to ensure they override any conflicting styles. This should finally fix the text truncation issue. * Use component-scoped styles for line-clamp Adding inline style tag in the component to ensure the line-clamp CSS is definitely loaded and applied. This bypasses any potential issues with external CSS compilation or loading order. * Change project name line-clamp from 3 to 2 lines Limiting project name display to 2 lines with ellipsis for better visual density and cleaner appearance. * Increase line-height for project name in banner Added line-height: 1.3 to project name for better readability and visual spacing between lines.
841 lines
40 KiB
TypeScript
841 lines
40 KiB
TypeScript
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { Area } from '../../entities/Area';
|
|
import { Project } from '../../entities/Project';
|
|
import ConfirmDialog from '../Shared/ConfirmDialog';
|
|
import DiscardChangesDialog from '../Shared/DiscardChangesDialog';
|
|
import { useToast } from '../Shared/ToastContext';
|
|
import TagInput from '../Tag/TagInput';
|
|
import PriorityDropdown from '../Shared/PriorityDropdown';
|
|
import AreaDropdown from '../Shared/AreaDropdown';
|
|
import DatePicker from '../Shared/DatePicker';
|
|
import ProjectStateDropdown from '../Shared/ProjectStateDropdown';
|
|
import { PriorityType } from '../../entities/Task';
|
|
import { useStore } from '../../store/useStore';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
TagIcon,
|
|
Squares2X2Icon,
|
|
TrashIcon,
|
|
CalendarIcon,
|
|
ExclamationTriangleIcon,
|
|
PlayIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
|
|
interface ProjectModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSave: (project: Project) => void;
|
|
onDelete?: (projectUid: string) => Promise<void>;
|
|
project?: Project;
|
|
areas: Area[];
|
|
}
|
|
|
|
const ProjectModal: React.FC<ProjectModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
onSave,
|
|
onDelete,
|
|
project,
|
|
areas,
|
|
}) => {
|
|
const [modalJustOpened, setModalJustOpened] = useState(false);
|
|
const [formData, setFormData] = useState<Project>(
|
|
project || {
|
|
name: '',
|
|
description: '',
|
|
area_id: null,
|
|
status: 'not_started',
|
|
tags: [],
|
|
priority: null,
|
|
due_date_at: null,
|
|
}
|
|
);
|
|
|
|
const [tags, setTags] = useState<string[]>(
|
|
project?.tags?.map((tag) => tag.name) || []
|
|
);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
|
|
const { tagsStore } = useStore();
|
|
// Avoid calling getTags() during component initialization to prevent remounting
|
|
const availableTags = tagsStore.tags;
|
|
const { addNewTags } = tagsStore;
|
|
|
|
const modalRef = useRef<HTMLDivElement>(null);
|
|
const nameInputRef = useRef<HTMLInputElement>(null);
|
|
const [isClosing, setIsClosing] = useState(false);
|
|
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
|
const [showDiscardDialog, setShowDiscardDialog] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// Collapsible sections state
|
|
const [expandedSections, setExpandedSections] = useState({
|
|
status: false,
|
|
tags: false,
|
|
area: false,
|
|
priority: false,
|
|
dueDate: false,
|
|
});
|
|
|
|
const { showSuccessToast, showErrorToast } = useToast();
|
|
const { t } = useTranslation();
|
|
|
|
// Auto-focus on the name input when modal opens
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setTimeout(() => {
|
|
nameInputRef.current?.focus();
|
|
}, 200);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
// Load tags only when user actually interacts with tag input to prevent refresh
|
|
const handleTagInputFocus = () => {
|
|
if (!tagsStore.hasLoaded && !tagsStore.isLoading) {
|
|
tagsStore.loadTags();
|
|
}
|
|
};
|
|
|
|
// Manage body scroll when modal is open
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = 'unset';
|
|
}
|
|
return () => {
|
|
document.body.style.overflow = 'unset';
|
|
};
|
|
}, [isOpen]);
|
|
|
|
useEffect(() => {
|
|
if (project) {
|
|
// Convert ISO date to YYYY-MM-DD format if needed
|
|
let dueDateValue = project.due_date_at;
|
|
if (dueDateValue && dueDateValue.includes('T')) {
|
|
dueDateValue = dueDateValue.split('T')[0];
|
|
}
|
|
|
|
setFormData({
|
|
...project,
|
|
tags: project.tags || [],
|
|
due_date_at: dueDateValue || null,
|
|
});
|
|
setTags(project.tags?.map((tag) => tag.name) || []);
|
|
} else {
|
|
setFormData({
|
|
name: '',
|
|
description: '',
|
|
area_id: null,
|
|
status: 'not_started',
|
|
tags: [],
|
|
priority: null,
|
|
due_date_at: null,
|
|
});
|
|
setTags([]);
|
|
}
|
|
setError(null);
|
|
}, [project]);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
const target = event.target as Node;
|
|
|
|
// Check if click is inside modal
|
|
if (modalRef.current && modalRef.current.contains(target)) {
|
|
return;
|
|
}
|
|
|
|
// Check if click is on priority dropdown (which is portaled to document.body)
|
|
const clickedElement = target as Element;
|
|
if (
|
|
clickedElement &&
|
|
clickedElement.closest &&
|
|
clickedElement.closest(
|
|
'.fixed.z-50.bg-white, .fixed.z-50.bg-gray-700'
|
|
)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
handleClose();
|
|
};
|
|
|
|
if (isOpen && !modalJustOpened) {
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
}
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
};
|
|
}, [isOpen, modalJustOpened]);
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') {
|
|
// Don't show discard dialog if already showing a dialog
|
|
if (showConfirmDialog || showDiscardDialog) {
|
|
// Let the dialog handle its own Escape
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
// Check for unsaved changes using ref to get current value
|
|
if (hasUnsavedChangesRef.current()) {
|
|
setShowDiscardDialog(true);
|
|
} else {
|
|
handleClose();
|
|
}
|
|
}
|
|
};
|
|
if (isOpen) {
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
}
|
|
return () => {
|
|
document.removeEventListener('keydown', handleKeyDown);
|
|
};
|
|
}, [isOpen, showConfirmDialog, showDiscardDialog]);
|
|
|
|
const handleChange = (
|
|
e: React.ChangeEvent<
|
|
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
|
|
>
|
|
) => {
|
|
const target = e.target;
|
|
const { name, type, value } = target;
|
|
|
|
// Clear error when user starts typing in the name field
|
|
if (name === 'name' && error) {
|
|
setError(null);
|
|
}
|
|
|
|
if (type === 'checkbox') {
|
|
if (target instanceof HTMLInputElement) {
|
|
const checked = target.checked;
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[name]: checked,
|
|
}));
|
|
}
|
|
} else {
|
|
// Handle empty date values by converting to null
|
|
let processedValue: any = value;
|
|
if (name === 'due_date_at' && value === '') {
|
|
processedValue = null;
|
|
}
|
|
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[name]: processedValue,
|
|
}));
|
|
}
|
|
};
|
|
|
|
const handleTagsChange = useCallback((newTags: string[]) => {
|
|
setTags(newTags);
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
tags: newTags.map((name) => ({ name })),
|
|
}));
|
|
}, []);
|
|
|
|
// Track when modal opens to prevent immediate backdrop clicks
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setModalJustOpened(true);
|
|
const timer = setTimeout(() => {
|
|
setModalJustOpened(false);
|
|
}, 200); // Prevent backdrop clicks for 200ms after opening
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const handleDueDateChange = (value: string) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
due_date_at: value || null,
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
// Validate required fields
|
|
if (!formData.name.trim()) {
|
|
setError(
|
|
t('errors.projectNameRequired', 'Project name is required')
|
|
);
|
|
return;
|
|
}
|
|
|
|
const MAX_WORDS = 6;
|
|
const wordCount = formData.name
|
|
.trim()
|
|
.split(/\s+/)
|
|
.filter((word) => word.length > 0).length;
|
|
if (wordCount > MAX_WORDS) {
|
|
setError(
|
|
t(
|
|
'errors.projectNameTooLong',
|
|
`Project name must be ${MAX_WORDS} words or less`
|
|
)
|
|
);
|
|
return;
|
|
}
|
|
|
|
setIsSaving(true);
|
|
try {
|
|
// Add new tags to the global store
|
|
const existingTagNames = availableTags.map((tag: any) => tag.name);
|
|
const newTagNames = tags.filter(
|
|
(tag) => !existingTagNames.includes(tag)
|
|
);
|
|
if (newTagNames.length > 0) {
|
|
addNewTags(newTagNames);
|
|
}
|
|
|
|
const projectData = {
|
|
...formData,
|
|
tags: tags.map((name) => ({ name })),
|
|
};
|
|
|
|
// Save the project and wait for it to complete
|
|
await onSave(projectData);
|
|
|
|
showSuccessToast(
|
|
project
|
|
? 'Project updated successfully!'
|
|
: 'Project created successfully!'
|
|
);
|
|
|
|
handleClose();
|
|
} catch (error) {
|
|
console.error('Error saving project:', error);
|
|
setError(t('errors.projectSaveFailed', 'Failed to save project'));
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteClick = () => {
|
|
setShowConfirmDialog(true);
|
|
};
|
|
|
|
const handleDeleteConfirm = async () => {
|
|
if (project && project.uid && onDelete) {
|
|
try {
|
|
await onDelete(project.uid);
|
|
showSuccessToast(t('success.projectDeleted'));
|
|
setShowConfirmDialog(false);
|
|
handleClose();
|
|
} catch (error) {
|
|
console.error('Error deleting project:', error);
|
|
showErrorToast(t('errors.failedToDeleteProject'));
|
|
}
|
|
}
|
|
};
|
|
|
|
// Check if there are unsaved changes
|
|
const hasUnsavedChanges = () => {
|
|
if (!project) {
|
|
// New project - check if any field has been filled
|
|
return (
|
|
formData.name.trim() !== '' ||
|
|
formData.description?.trim() !== '' ||
|
|
formData.area_id !== null ||
|
|
formData.status !== 'not_started' ||
|
|
tags.length > 0 ||
|
|
formData.priority !== null ||
|
|
formData.due_date_at !== null
|
|
);
|
|
}
|
|
|
|
// Existing project - compare with original
|
|
const formChanged =
|
|
formData.name !== project.name ||
|
|
formData.description !== project.description ||
|
|
formData.area_id !== project.area_id ||
|
|
formData.status !== project.status ||
|
|
formData.priority !== project.priority ||
|
|
formData.due_date_at !== project.due_date_at;
|
|
|
|
// Compare tags
|
|
const originalTags = project.tags?.map((tag) => tag.name) || [];
|
|
const tagsChanged =
|
|
tags.length !== originalTags.length ||
|
|
tags.some((tag, index) => tag !== originalTags[index]);
|
|
|
|
return formChanged || tagsChanged;
|
|
};
|
|
|
|
// Use ref to store hasUnsavedChanges so it's always current in the event handler
|
|
const hasUnsavedChangesRef = useRef(hasUnsavedChanges);
|
|
useEffect(() => {
|
|
hasUnsavedChangesRef.current = hasUnsavedChanges;
|
|
});
|
|
|
|
const handleClose = () => {
|
|
setIsClosing(true);
|
|
setTimeout(() => {
|
|
onClose();
|
|
setIsClosing(false);
|
|
setShowDiscardDialog(false);
|
|
}, 300);
|
|
};
|
|
|
|
const handleDiscardChanges = () => {
|
|
setShowDiscardDialog(false);
|
|
handleClose();
|
|
};
|
|
|
|
const handleCancelDiscard = () => {
|
|
setShowDiscardDialog(false);
|
|
};
|
|
|
|
const toggleSection = useCallback(
|
|
(section: keyof typeof expandedSections) => {
|
|
setExpandedSections((prev) => {
|
|
const newExpanded = {
|
|
...prev,
|
|
[section]: !prev[section],
|
|
};
|
|
|
|
// Auto-scroll to show the expanded section
|
|
if (newExpanded[section]) {
|
|
setTimeout(() => {
|
|
// Try multiple selectors to find the scroll container
|
|
const scrollContainer =
|
|
modalRef.current?.querySelector(
|
|
'.absolute.inset-0.overflow-y-auto'
|
|
) ||
|
|
modalRef.current?.querySelector(
|
|
'[style*="overflow-y"]'
|
|
) ||
|
|
modalRef.current?.querySelector(
|
|
'.overflow-y-auto'
|
|
) ||
|
|
document.querySelector(
|
|
'.absolute.inset-0.overflow-y-auto'
|
|
);
|
|
|
|
if (scrollContainer) {
|
|
scrollContainer.scrollTo({
|
|
top: scrollContainer.scrollHeight,
|
|
behavior: 'smooth',
|
|
});
|
|
}
|
|
}, 250); // Increased delay to ensure DOM is updated
|
|
}
|
|
|
|
return newExpanded;
|
|
});
|
|
},
|
|
[]
|
|
);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
// Don't render if areas aren't loaded yet (prevents race condition)
|
|
if (!areas || !Array.isArray(areas)) return null;
|
|
|
|
return createPortal(
|
|
<>
|
|
<div
|
|
className={`fixed top-16 left-0 right-0 bottom-0 flex items-start sm:items-center justify-center bg-gray-900 bg-opacity-80 z-40 transition-opacity duration-300 ${
|
|
isClosing ? 'opacity-0' : 'opacity-100'
|
|
}`}
|
|
onMouseDown={(e) => {
|
|
// Close modal when clicking on backdrop, but not on the modal content
|
|
// Use mousedown instead of onClick to prevent issues with text selection dragging
|
|
// Also prevent immediate closes after modal opens
|
|
if (e.target === e.currentTarget && !modalJustOpened) {
|
|
handleClose();
|
|
}
|
|
}}
|
|
>
|
|
<div
|
|
ref={modalRef}
|
|
data-testid="project-modal"
|
|
data-state={isSaving ? 'saving' : 'idle'}
|
|
className={`bg-white dark:bg-gray-800 border-0 sm:border sm:border-gray-200 sm:dark:border-gray-800 sm:rounded-lg sm:shadow-2xl w-full sm:max-w-2xl transform transition-transform duration-300 ${
|
|
isClosing ? 'scale-95' : 'scale-100'
|
|
} h-full sm:h-auto sm:my-4`}
|
|
>
|
|
<div className="flex flex-col h-full sm:min-h-[500px] sm:max-h-[80vh]">
|
|
{/* Main Form Section */}
|
|
<div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 sm:rounded-lg">
|
|
<div className="flex-1 relative">
|
|
<div
|
|
className="absolute inset-0 overflow-y-auto overflow-x-hidden"
|
|
style={{ WebkitOverflowScrolling: 'touch' }}
|
|
>
|
|
<form
|
|
className="h-full"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
handleSubmit();
|
|
}}
|
|
>
|
|
<fieldset className="h-full flex flex-col">
|
|
{/* Project Title Section - Always Visible */}
|
|
<div className="pb-4 mb-4 px-4 pt-4">
|
|
<input
|
|
ref={nameInputRef}
|
|
type="text"
|
|
id="projectName"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
handleSubmit();
|
|
}
|
|
}}
|
|
required
|
|
className={`block w-full text-xl font-semibold bg-transparent text-black dark:text-white border-none focus:outline-none py-2`}
|
|
placeholder={t(
|
|
'project.name',
|
|
'Enter project name'
|
|
)}
|
|
data-testid="project-name-input"
|
|
/>
|
|
{error && (
|
|
<div className="mt-2 text-red-500 text-sm font-medium">
|
|
{error}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Description Section - Always Visible */}
|
|
<div className="flex-1 border-b border-gray-200 dark:border-gray-700 pb-4 sm:px-4 flex flex-col mb-2">
|
|
<textarea
|
|
id="projectDescription"
|
|
name="description"
|
|
value={
|
|
formData.description ||
|
|
''
|
|
}
|
|
onChange={handleChange}
|
|
className="block w-full h-full min-h-0 sm:border sm:border-gray-300 sm:dark:border-gray-600 sm:rounded-md shadow-sm py-2 px-3 sm:py-3 sm:px-3 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 sm:focus:ring-2 sm:focus:ring-blue-500 transition duration-150 ease-in-out resize-none"
|
|
placeholder={t(
|
|
'forms.projectDescriptionPlaceholder',
|
|
'Enter project description (optional)'
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Expandable Sections - Only show when expanded */}
|
|
{/* Status Section - First */}
|
|
{expandedSections.status && (
|
|
<div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
|
|
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
|
{t(
|
|
'projects.status',
|
|
'Project Status'
|
|
)}
|
|
</h3>
|
|
<ProjectStateDropdown
|
|
value={
|
|
formData.status ||
|
|
'not_started'
|
|
}
|
|
onChange={(status) =>
|
|
setFormData(
|
|
(prev) => ({
|
|
...prev,
|
|
status,
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{expandedSections.tags && (
|
|
<div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
|
|
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
|
{t(
|
|
'forms.tags',
|
|
'Tags'
|
|
)}
|
|
</h3>
|
|
<TagInput
|
|
onTagsChange={
|
|
handleTagsChange
|
|
}
|
|
initialTags={tags}
|
|
availableTags={
|
|
availableTags
|
|
}
|
|
onFocus={
|
|
handleTagInputFocus
|
|
}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{expandedSections.area && (
|
|
<div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
|
|
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
|
{t(
|
|
'common.area',
|
|
'Area'
|
|
)}
|
|
</h3>
|
|
<div className="overflow-visible">
|
|
<AreaDropdown
|
|
value={
|
|
formData.area_id ||
|
|
null
|
|
}
|
|
onChange={(value) =>
|
|
setFormData(
|
|
(prev) => ({
|
|
...prev,
|
|
area_id:
|
|
value,
|
|
})
|
|
)
|
|
}
|
|
areas={areas}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{expandedSections.priority && (
|
|
<div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
|
|
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
|
{t(
|
|
'forms.priority',
|
|
'Priority'
|
|
)}
|
|
</h3>
|
|
<PriorityDropdown
|
|
value={
|
|
formData.priority ??
|
|
null
|
|
}
|
|
onChange={(
|
|
value: PriorityType
|
|
) =>
|
|
setFormData({
|
|
...formData,
|
|
priority: value,
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{expandedSections.dueDate && (
|
|
<div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 overflow-visible">
|
|
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
|
{t(
|
|
'forms.dueDate',
|
|
'Due Date'
|
|
)}
|
|
</h3>
|
|
<div className="overflow-visible">
|
|
<DatePicker
|
|
value={
|
|
formData.due_date_at ||
|
|
''
|
|
}
|
|
onChange={
|
|
handleDueDateChange
|
|
}
|
|
placeholder="Select due date"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section Icons - Above border, split layout */}
|
|
<div className="flex-shrink-0 bg-white dark:bg-gray-800 px-3 py-2">
|
|
<div className="flex items-center justify-between">
|
|
{/* Left side: Section icons */}
|
|
<div className="flex items-center space-x-1">
|
|
{/* Status Toggle - First */}
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
toggleSection('status')
|
|
}
|
|
className={`relative p-2 rounded-full transition-colors ${
|
|
expandedSections.status
|
|
? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
|
|
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
|
|
}`}
|
|
title={t(
|
|
'projects.status',
|
|
'Project Status'
|
|
)}
|
|
>
|
|
<PlayIcon className="h-5 w-5" />
|
|
{formData.status &&
|
|
formData.status !==
|
|
'not_started' && (
|
|
<span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
|
|
)}
|
|
</button>
|
|
|
|
{/* Tags Toggle */}
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
toggleSection('tags')
|
|
}
|
|
className={`relative p-2 rounded-full transition-colors ${
|
|
expandedSections.tags
|
|
? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
|
|
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
|
|
}`}
|
|
title={t('forms.tags', 'Tags')}
|
|
>
|
|
<TagIcon className="h-5 w-5" />
|
|
{formData.tags &&
|
|
formData.tags.length > 0 && (
|
|
<span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
|
|
)}
|
|
</button>
|
|
|
|
{/* Area Toggle */}
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
toggleSection('area')
|
|
}
|
|
className={`relative p-2 rounded-full transition-colors ${
|
|
expandedSections.area
|
|
? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
|
|
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
|
|
}`}
|
|
title={t('common.area', 'Area')}
|
|
>
|
|
<Squares2X2Icon className="h-5 w-5" />
|
|
{formData.area_id && (
|
|
<span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
|
|
)}
|
|
</button>
|
|
|
|
{/* Priority Toggle */}
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
toggleSection('priority')
|
|
}
|
|
className={`relative p-2 rounded-full transition-colors ${
|
|
expandedSections.priority
|
|
? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
|
|
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
|
|
}`}
|
|
title={t(
|
|
'forms.priority',
|
|
'Priority'
|
|
)}
|
|
>
|
|
<ExclamationTriangleIcon className="h-5 w-5" />
|
|
{formData.priority != null && (
|
|
<span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
|
|
)}
|
|
</button>
|
|
|
|
{/* Due Date Toggle */}
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
toggleSection('dueDate')
|
|
}
|
|
className={`relative p-2 rounded-full transition-colors ${
|
|
expandedSections.dueDate
|
|
? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
|
|
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
|
|
}`}
|
|
title={t(
|
|
'forms.dueDate',
|
|
'Due Date'
|
|
)}
|
|
>
|
|
<CalendarIcon className="h-5 w-5" />
|
|
{formData.due_date_at && (
|
|
<span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Buttons - Below border with custom layout */}
|
|
<div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between sm:rounded-b-lg">
|
|
{/* Left side: Delete and Cancel */}
|
|
<div className="flex items-center space-x-3">
|
|
{project && project.id && onDelete && (
|
|
<button
|
|
type="button"
|
|
onClick={handleDeleteClick}
|
|
className="p-2 border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none transition duration-150 ease-in-out"
|
|
title={t('common.delete', 'Delete')}
|
|
>
|
|
<TrashIcon className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={handleClose}
|
|
className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none transition duration-150 ease-in-out text-sm"
|
|
>
|
|
{t('common.cancel', 'Cancel')}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Right side: Save */}
|
|
<button
|
|
type="button"
|
|
onClick={handleSubmit}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none transition duration-150 ease-in-out text-sm"
|
|
data-testid="project-save-button"
|
|
>
|
|
{project
|
|
? t(
|
|
'modals.updateProject',
|
|
'Update Project'
|
|
)
|
|
: t(
|
|
'modals.createProject',
|
|
'Create Project'
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{showConfirmDialog && (
|
|
<ConfirmDialog
|
|
title={t('modals.deleteProject.title', 'Delete Project')}
|
|
message={t(
|
|
'modals.deleteProject.message',
|
|
'Deleting this project will remove the project only. All items inside will be retained but will no longer belong to any project. Continue?'
|
|
)}
|
|
onConfirm={handleDeleteConfirm}
|
|
onCancel={() => setShowConfirmDialog(false)}
|
|
/>
|
|
)}
|
|
{showDiscardDialog && (
|
|
<DiscardChangesDialog
|
|
onDiscard={handleDiscardChanges}
|
|
onCancel={handleCancelDiscard}
|
|
/>
|
|
)}
|
|
</>,
|
|
document.body
|
|
);
|
|
};
|
|
|
|
export default ProjectModal;
|