Fix loading job page when clicking on interactive elements

2025-07-07 18:03:32 +02:00
parent 8dd6630e8d
commit c0193ce618
4 changed files with 58 additions and 40 deletions
--- a/src/components/JobCard.tsx
+++ b/src/components/JobCard.tsx
@@ -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,30 +37,40 @@ 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}
    >
-      <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)}`}
-      >
-        <CardHeader className="flex-shrink-0">
-          <JobCardHeader
-            job={job}
-            onEdit={onEdit}
-            onDelete={onDelete}
-            onUpdateProduced={onUpdateProduced}
-            onImportBOM={onImportBOM}
-          />
-        </CardHeader>
-        <CardContent className="flex-1 flex flex-col space-y-4">
-          <JobCardDetails job={job} />
-          <div className="flex-1" />
-          <JobCardMetrics job={job} />
-        </CardContent>
-      </Card>
-    </Link>
+      <CardHeader className="flex-shrink-0">
+        <JobCardHeader
+          job={job}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          onUpdateProduced={onUpdateProduced}
+          onImportBOM={onImportBOM}
+        />
+      </CardHeader>
+      <CardContent className="flex-1 flex flex-col space-y-4">
+        <JobCardDetails job={job} />
+        <div className="flex-1" />
+        <JobCardMetrics job={job} />
+      </CardContent>
+    </Card>
  );
 };

--- a/src/components/JobCardDetails.tsx
+++ b/src/components/JobCardDetails.tsx
@@ -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>
--- a/src/components/JobCardHeader.tsx
+++ b/src/components/JobCardHeader.tsx
@@ -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();
  };

@@ -234,10 +227,11 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
    <div className="flex justify-between items-start">
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 mb-2">
-          <CardTitle 
+          <CardTitle
            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" />
--- a/src/components/JobCardMetrics.tsx
+++ b/src/components/JobCardMetrics.tsx
@@ -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>