18c7785b13
* Add notifications for deferred and due tasks * Cleanup * fixup! Cleanup * Add notifications settings * ADd dismissed for notifications * Beautify project cards * fixup! Beautify project cards * Fix an issue with icon badge * Cleanup scripts * fixup! Cleanup scripts
417 lines
20 KiB
TypeScript
417 lines
20 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
|
|
import {
|
|
PencilSquareIcon,
|
|
TrashIcon,
|
|
LightBulbIcon,
|
|
DocumentTextIcon,
|
|
PlayIcon,
|
|
StopIcon,
|
|
CheckCircleIcon,
|
|
ShareIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import { Project, ProjectState } from '../../entities/Project';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useToast } from '../Shared/ToastContext';
|
|
import { getCurrentUser } from '../../utils/userUtils';
|
|
|
|
interface ProjectItemProps {
|
|
project: Project;
|
|
viewMode: 'cards' | 'list';
|
|
getCompletionPercentage: () => number;
|
|
activeDropdown: number | null;
|
|
setActiveDropdown: React.Dispatch<React.SetStateAction<number | null>>;
|
|
handleEditProject: (project: Project) => void;
|
|
setProjectToDelete: React.Dispatch<React.SetStateAction<Project | null>>;
|
|
setIsConfirmDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
onOpenShare: (project: Project) => void;
|
|
}
|
|
|
|
const getProjectInitials = (name: string, maxLetters?: number) => {
|
|
const words = name
|
|
.trim()
|
|
.split(' ')
|
|
.filter((word) => word.length > 0);
|
|
|
|
if (words.length === 1) {
|
|
const singleWord = name.toUpperCase();
|
|
return maxLetters ? singleWord.substring(0, maxLetters) : singleWord;
|
|
}
|
|
|
|
const initials = words.map((word) => word[0].toUpperCase()).join('');
|
|
return maxLetters ? initials.substring(0, maxLetters) : initials;
|
|
};
|
|
|
|
const getStateIcon = (state: ProjectState | undefined) => {
|
|
switch (state) {
|
|
case 'idea':
|
|
return { icon: LightBulbIcon };
|
|
case 'planned':
|
|
return { icon: DocumentTextIcon };
|
|
case 'in_progress':
|
|
return { icon: PlayIcon };
|
|
case 'blocked':
|
|
return { icon: StopIcon };
|
|
case 'completed':
|
|
return { icon: CheckCircleIcon };
|
|
default:
|
|
return { icon: LightBulbIcon };
|
|
}
|
|
};
|
|
|
|
const getStateLabel = (state: ProjectState | undefined, t: any): string => {
|
|
switch (state) {
|
|
case 'idea':
|
|
return t('projects.states.idea', 'Idea');
|
|
case 'planned':
|
|
return t('projects.states.planned', 'Planned');
|
|
case 'in_progress':
|
|
return t('projects.states.in_progress', 'In Progress');
|
|
case 'blocked':
|
|
return t('projects.states.blocked', 'Blocked');
|
|
case 'completed':
|
|
return t('projects.states.completed', 'Completed');
|
|
default:
|
|
return t('projects.states.idea', 'Idea');
|
|
}
|
|
};
|
|
|
|
const ProjectItem: React.FC<ProjectItemProps> = ({
|
|
project,
|
|
viewMode,
|
|
getCompletionPercentage,
|
|
activeDropdown,
|
|
setActiveDropdown,
|
|
handleEditProject,
|
|
setProjectToDelete,
|
|
setIsConfirmDialogOpen,
|
|
onOpenShare,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const { showErrorToast } = useToast();
|
|
const currentUser = getCurrentUser();
|
|
const isOwner =
|
|
currentUser && (project as any).user_uid === currentUser.uid;
|
|
return (
|
|
<div
|
|
className={`${
|
|
viewMode === 'cards'
|
|
? 'bg-gray-50 dark:bg-gray-900 rounded-lg shadow-md relative flex flex-col group'
|
|
: 'bg-gray-50 dark:bg-gray-900 rounded-lg shadow-md relative flex flex-row items-center p-4 group'
|
|
}`}
|
|
style={{
|
|
minHeight: viewMode === 'cards' ? '250px' : 'auto',
|
|
maxHeight: viewMode === 'cards' ? '250px' : 'auto',
|
|
}}
|
|
>
|
|
{viewMode === 'cards' && (
|
|
<Link
|
|
to={
|
|
project.uid
|
|
? `/project/${project.uid}-${project.name
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-|-$/g, '')}`
|
|
: `/project/${project.id}`
|
|
}
|
|
>
|
|
<div
|
|
className="bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden rounded-t-lg relative cursor-pointer hover:opacity-90 transition-opacity"
|
|
style={{ height: '140px' }}
|
|
>
|
|
{project.image_url ? (
|
|
<img
|
|
src={project.image_url}
|
|
alt={project.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<span
|
|
className="text-2xl font-extrabold text-gray-500 dark:text-gray-400 opacity-20"
|
|
aria-label={t('projectItem.projectInitials')}
|
|
>
|
|
{getProjectInitials(project.name)}
|
|
</span>
|
|
)}
|
|
|
|
{/* Icons in top right corner of image area */}
|
|
<div className="absolute top-2 right-2 z-10 flex items-center space-x-2">
|
|
{/* Shared project icon */}
|
|
{project.is_shared && (
|
|
<ShareIcon
|
|
className="h-4 w-4 text-green-500 dark:text-green-400 opacity-70 drop-shadow-sm"
|
|
title={t(
|
|
'projectItem.sharedProject',
|
|
'Shared with team'
|
|
)}
|
|
/>
|
|
)}
|
|
|
|
{/* State icon */}
|
|
{(() => {
|
|
const { icon: StateIcon } = getStateIcon(
|
|
project.state
|
|
);
|
|
return (
|
|
<StateIcon
|
|
className="h-4 w-4 text-gray-500 dark:text-gray-400 opacity-70 drop-shadow-sm"
|
|
title={getStateLabel(project.state, t)}
|
|
/>
|
|
);
|
|
})()}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)}
|
|
|
|
{viewMode === 'list' && (
|
|
<Link
|
|
to={
|
|
project.uid
|
|
? `/project/${project.uid}-${project.name
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-|-$/g, '')}`
|
|
: `/project/${project.id}`
|
|
}
|
|
className="w-10 h-10 mr-3 flex-shrink-0"
|
|
>
|
|
{project.image_url ? (
|
|
<img
|
|
src={project.image_url}
|
|
alt={project.name}
|
|
className="w-full h-full object-cover rounded-md cursor-pointer hover:opacity-90 transition-opacity"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center cursor-pointer hover:opacity-90 transition-opacity">
|
|
<span className="text-xs font-extrabold text-gray-500 dark:text-gray-400 opacity-20">
|
|
{getProjectInitials(project.name, 2)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</Link>
|
|
)}
|
|
|
|
<div
|
|
className={`flex justify-between ${
|
|
viewMode === 'cards'
|
|
? 'items-start p-4 flex-1'
|
|
: 'items-center flex-1'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`flex ${viewMode === 'cards' ? 'flex-col' : 'items-center'}`}
|
|
>
|
|
<Link
|
|
to={
|
|
project.uid
|
|
? `/project/${project.uid}-${project.name
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-|-$/g, '')}`
|
|
: `/project/${project.id}`
|
|
}
|
|
className={`${
|
|
viewMode === 'cards'
|
|
? 'text-lg font-semibold text-gray-900 dark:text-gray-100 hover:underline line-clamp-2'
|
|
: 'text-md font-semibold text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-200 transition-colors'
|
|
}`}
|
|
>
|
|
{project.name}
|
|
</Link>
|
|
{viewMode === 'cards' && project.description && (
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
|
|
{project.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="relative dropdown-container">
|
|
{viewMode === 'cards' ? (
|
|
<>
|
|
<button
|
|
className="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-400 focus:outline-none"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const projectId = project.id;
|
|
if (projectId !== undefined) {
|
|
setActiveDropdown(
|
|
activeDropdown === projectId
|
|
? null
|
|
: projectId
|
|
);
|
|
}
|
|
}}
|
|
aria-label={t('projectItem.toggleDropdownMenu')}
|
|
data-testid={`project-dropdown-${project.id}`}
|
|
>
|
|
<EllipsisVerticalIcon className="h-5 w-5" />
|
|
</button>
|
|
|
|
{project.id !== undefined &&
|
|
activeDropdown === project.id && (
|
|
<div className="absolute right-0 mt-2 w-28 bg-white dark:bg-gray-700 shadow-lg rounded-md z-10">
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (!isOwner) {
|
|
showErrorToast(
|
|
t(
|
|
'errors.permissionDenied',
|
|
'Permission denied'
|
|
)
|
|
);
|
|
setActiveDropdown(null);
|
|
return;
|
|
}
|
|
handleEditProject(project);
|
|
setActiveDropdown(null);
|
|
}}
|
|
className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 w-full text-left"
|
|
data-testid={`project-edit-${project.id}`}
|
|
>
|
|
{t('projectItem.edit')}
|
|
</button>
|
|
{isOwner && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onOpenShare(project);
|
|
setActiveDropdown(null);
|
|
}}
|
|
className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 w-full text-left"
|
|
>
|
|
{t(
|
|
'projectItem.share',
|
|
'Share'
|
|
)}
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (
|
|
project.id === undefined ||
|
|
project.id === null
|
|
) {
|
|
console.error(
|
|
'Cannot delete project: Invalid ID',
|
|
project
|
|
);
|
|
return;
|
|
}
|
|
setProjectToDelete(project);
|
|
setIsConfirmDialogOpen(true);
|
|
setActiveDropdown(null);
|
|
}}
|
|
className="block px-4 py-2 text-sm text-red-500 dark:text-red-300 hover:bg-gray-100 dark:hover:bg-gray-600 w-full text-left"
|
|
data-testid={`project-delete-${project.id}`}
|
|
>
|
|
{t('projectItem.delete')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (!isOwner) {
|
|
showErrorToast(
|
|
t(
|
|
'errors.permissionDenied',
|
|
'Permission denied'
|
|
)
|
|
);
|
|
return;
|
|
}
|
|
handleEditProject(project);
|
|
}}
|
|
className="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
|
|
data-testid={`project-edit-list-${project.id}`}
|
|
>
|
|
<PencilSquareIcon className="h-5 w-5" />
|
|
</button>
|
|
{isOwner && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onOpenShare(project);
|
|
}}
|
|
className={`transition-colors duration-200 ${
|
|
project.is_shared
|
|
? 'text-green-500 dark:text-green-400 hover:text-green-600 dark:hover:text-green-500'
|
|
: 'text-gray-500 hover:text-green-600 dark:hover:text-green-400'
|
|
}`}
|
|
data-testid={`project-share-list-${project.id}`}
|
|
>
|
|
<ShareIcon className="h-5 w-5" />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (
|
|
project.id === undefined ||
|
|
project.id === null
|
|
) {
|
|
console.error(
|
|
'Cannot delete project: Invalid ID',
|
|
project
|
|
);
|
|
return;
|
|
}
|
|
setProjectToDelete(project);
|
|
setIsConfirmDialogOpen(true);
|
|
}}
|
|
className="text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors duration-200"
|
|
data-testid={`project-delete-list-${project.id}`}
|
|
>
|
|
<TrashIcon className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{viewMode === 'cards' && (
|
|
<div className="absolute bottom-4 left-0 right-0 px-4">
|
|
<div className="flex items-center space-x-2">
|
|
<div
|
|
className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 cursor-help"
|
|
title={
|
|
(project as any).task_status
|
|
? `${(project as any).task_status.done} of ${(project as any).task_status.total} tasks completed (${getCompletionPercentage()}%)`
|
|
: t('projectItem.completionPercentage', {
|
|
percentage: getCompletionPercentage(),
|
|
})
|
|
}
|
|
>
|
|
<div
|
|
className="bg-blue-500 h-2 rounded-full transition-all duration-300"
|
|
style={{
|
|
width: `${getCompletionPercentage()}%`,
|
|
}}
|
|
></div>
|
|
</div>
|
|
<span className="text-xs text-gray-500 dark:text-gray-400 font-medium whitespace-nowrap">
|
|
{(project as any).task_status
|
|
? `${(project as any).task_status.done}/${(project as any).task_status.total}`
|
|
: '0/0'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectItem;
|