dave/eve-industrializer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix loading job page when clicking on interactive elements

Browse Source
This commit is contained in:
PhatPhuckDave
2025-07-07 18:03:32 +02:00
parent 8dd6630e8d
commit c0193ce618
4 changed files with 58 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/JobCard.tsx
View File

@@ -1,4 +1,4 @@
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { IndJob } from '@/lib/types';
import JobCardHeader from './JobCardHeader';
@@ -22,6 +22,8 @@ const JobCard: React.FC<JobCardProps> = ({
onImportBOM,
isTracked = false
}) => {
const navigate = useNavigate();
const getStatusBackgroundColor = (status: string) => {
switch (status) {
case 'Planned': return 'bg-gray-600/20';
@@ -35,13 +37,24 @@ const JobCard: React.FC<JobCardProps> = ({
}
};
const handleCardClick = (e: React.MouseEvent) => {
// Check if the click target or any of its parents has the data-no-navigate attribute
const target = e.target as HTMLElement;
const hasNoNavigate = target.closest('[data-no-navigate]');
if (hasNoNavigate) {
// Don't navigate if clicking on elements marked as non-navigating
return;
}
// Only navigate if clicking on areas that aren't marked as non-navigating
navigate(`/${job.id}`);
};
return (
<Link
to={`/${job.id}`}
className="block h-full no-underline"
>
<Card
className={`bg-gray-900 border-gray-700 text-white h-full flex flex-col cursor-pointer hover:bg-gray-800/50 transition-colors ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''} ${getStatusBackgroundColor(job.status)}`}
onClick={handleCardClick}
>
<CardHeader className="flex-shrink-0">
<JobCardHeader
@@ -58,7 +71,6 @@ const JobCard: React.FC<JobCardProps> = ({
<JobCardMetrics job={job} />
</CardContent>
</Card>
</Link>
);
};

9
src/components/JobCardDetails.tsx
View File

@@ -28,7 +28,6 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
};
const handleFieldClick = (fieldName: string, currentValue: string | null, e: React.MouseEvent) => {
e.stopPropagation();
setEditingField(fieldName);
setTempValues({ ...tempValues, [fieldName]: currentValue || '' });
};
@@ -73,15 +72,16 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
onChange={(e) => setTempValues({ ...tempValues, [fieldName]: e.target.value })}
onBlur={() => handleFieldUpdate(fieldName, tempValues[fieldName])}
onKeyDown={(e) => handleKeyPress(fieldName, e)}
onClick={(e) => e.stopPropagation()}
className="h-6 px-2 py-1 bg-gray-800 border-gray-600 text-white text-xs"
autoFocus
data-no-navigate
/>
) : (
<span
onClick={(e) => handleFieldClick(fieldName, value, e)}
className="cursor-pointer hover:text-blue-400 flex-1"
title="Click to edit"
data-no-navigate
>
{formatDateTime(value)}
</span>
@@ -136,7 +136,10 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
{job.billOfMaterials && job.billOfMaterials.length > 0 && (
<HoverCard>
<HoverCardTrigger asChild>
<div className="text-sm text-gray-400 mt-2 cursor-pointer hover:text-blue-400">
<div
className="text-sm text-gray-400 mt-2 cursor-pointer hover:text-blue-400"
data-no-navigate
>
BOM: {job.billOfMaterials.length} items (hover to view)
</div>
</HoverCardTrigger>

21
src/components/JobCardHeader.tsx
View File

@@ -51,7 +51,6 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
};
const handleStatusChange = async (newStatus: string, e: React.MouseEvent) => {
e.stopPropagation();
try {
await updateJob(job.id, { status: newStatus });
toast({
@@ -178,7 +177,6 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
};
const handleJobNameClick = async (e: React.MouseEvent) => {
e.stopPropagation();
try {
await navigator.clipboard.writeText(job.outputItem);
setCopyingName(true);
@@ -199,29 +197,24 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
};
const handleProducedClick = (e: React.MouseEvent) => {
e.stopPropagation();
if (job.status !== 'Closed') {
setIsEditingProduced(true);
}
};
const handleEditClick = (e: React.MouseEvent) => {
e.stopPropagation();
onEdit(job);
};
const handleDeleteClick = (e: React.MouseEvent) => {
e.stopPropagation();
onDelete(job.id);
};
const handleImportClick = (e: React.MouseEvent) => {
e.stopPropagation();
importBillOfMaterials();
};
const handleExportClick = (e: React.MouseEvent) => {
e.stopPropagation();
exportBillOfMaterials();
};
@@ -238,6 +231,7 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
className="text-blue-400 truncate cursor-pointer hover:text-blue-300 transition-colors flex items-center gap-1"
onClick={handleJobNameClick}
title="Click to copy job name"
data-no-navigate
>
{job.outputItem}
{copyingName && <Copy className="w-4 h-4 text-green-400" />}
@@ -254,16 +248,17 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
onChange={(e) => setProducedValue(e.target.value)}
onBlur={handleProducedUpdate}
onKeyDown={handleProducedKeyPress}
onClick={(e) => e.stopPropagation()}
className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white"
min="0"
autoFocus
data-no-navigate
/>
) : (
<span
onClick={handleProducedClick}
className={job.status !== 'Closed' ? "cursor-pointer hover:text-blue-400" : undefined}
title={job.status !== 'Closed' ? "Click to edit" : undefined}
data-no-navigate
>
{(job.produced || 0).toLocaleString()}
</span>
@@ -279,7 +274,10 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
<div className="flex items-center gap-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className={`${getStatusColor(job.status)} text-white px-3 py-1 rounded-sm text-xs font-semibold cursor-pointer hover:opacity-80 transition-opacity`}>
<div
className={`${getStatusColor(job.status)} text-white px-3 py-1 rounded-sm text-xs font-semibold cursor-pointer hover:opacity-80 transition-opacity`}
data-no-navigate
>
{job.status}
</div>
</DropdownMenuTrigger>
@@ -289,6 +287,7 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
key={status}
onClick={(e) => handleStatusChange(status, e)}
className="hover:bg-gray-700 cursor-pointer"
data-no-navigate
>
<div className={`w-3 h-3 rounded-sm ${getStatusColor(status)} mr-2`} />
{status}
@@ -301,6 +300,7 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
size="sm"
onClick={handleEditClick}
className="border-gray-600 hover:bg-gray-800"
data-no-navigate
>
Edit
</Button>
@@ -308,6 +308,7 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
variant="destructive"
size="sm"
onClick={handleDeleteClick}
data-no-navigate
>
Delete
</Button>
@@ -319,6 +320,7 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
className="p-1 h-6 w-6"
onClick={handleImportClick}
title="Import BOM from clipboard"
data-no-navigate
>
<Import className="w-4 h-4 text-blue-400" />
</Button>
@@ -329,6 +331,7 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
onClick={handleExportClick}
disabled={!job.billOfMaterials?.length}
title="Export BOM to clipboard"
data-no-navigate
>
{copyingBom ? (
<Check className="w-4 h-4 text-green-400" />

8
src/components/JobCardMetrics.tsx
View File

@@ -1,4 +1,3 @@
import { useState } from 'react';
import { formatISK, parseISKAmount } from '@/utils/priceUtils';
import { IndJob } from '@/lib/types';
@@ -29,7 +28,6 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
const margin = totalIncome > 0 ? ((profit / totalIncome) * 100) : 0;
const handleFieldClick = (fieldName: string, currentValue: number, e: React.MouseEvent) => {
e.stopPropagation();
setEditingField(fieldName);
setTempValues({ ...tempValues, [fieldName]: formatISK(currentValue) });
};
@@ -76,15 +74,16 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
onChange={(e) => setTempValues({ ...tempValues, projectedCost: e.target.value })}
onBlur={() => handleFieldUpdate('projectedCost', tempValues.projectedCost)}
onKeyDown={(e) => handleKeyPress('projectedCost', e)}
onClick={(e) => e.stopPropagation()}
className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white text-xs"
autoFocus
data-no-navigate
/>
) : (
<span
onClick={(e) => handleFieldClick('projectedCost', job.projectedCost, e)}
className="cursor-pointer hover:text-blue-400"
title="Click to edit"
data-no-navigate
>
{formatISK(job.projectedCost)}
</span>
@@ -106,15 +105,16 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
onChange={(e) => setTempValues({ ...tempValues, projectedRevenue: e.target.value })}
onBlur={() => handleFieldUpdate('projectedRevenue', tempValues.projectedRevenue)}
onKeyDown={(e) => handleKeyPress('projectedRevenue', e)}
onClick={(e) => e.stopPropagation()}
className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white text-xs"
autoFocus
data-no-navigate
/>
) : (
<span
onClick={(e) => handleFieldClick('projectedRevenue', job.projectedRevenue, e)}
className="cursor-pointer hover:text-blue-400"
title="Click to edit"
data-no-navigate
>
{formatISK(job.projectedRevenue)}
</span>