Update
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
import { IndJob } from '@/lib/types';
|
import { IndJob } from '@/lib/types';
|
||||||
import { formatISK } from '@/utils/priceUtils';
|
import { formatISK } from '@/utils/priceUtils';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
@@ -29,12 +30,16 @@ const RecapPopover: React.FC<RecapPopoverProps> = ({
|
|||||||
value: calculateJobValue(job)
|
value: calculateJobValue(job)
|
||||||
}))
|
}))
|
||||||
.filter(({ value }) => value !== 0)
|
.filter(({ value }) => value !== 0)
|
||||||
.sort((a, b) => Math.abs(b.value) - Math.abs(a.value));
|
.sort((a, b) => sortDescending ? Math.abs(b.value) - Math.abs(a.value) : Math.abs(a.value) - Math.abs(b.value));
|
||||||
|
|
||||||
const handleJobClick = (jobId: string) => {
|
const handleJobClick = (jobId: string) => {
|
||||||
navigate(`/${jobId}`);
|
navigate(`/${jobId}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const toggleSort = () => {
|
||||||
|
setSortDescending(!sortDescending);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover>
|
<Popover>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
@@ -42,7 +47,16 @@ const RecapPopover: React.FC<RecapPopoverProps> = ({
|
|||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-[30rem] bg-gray-800/95 border-gray-600 text-white max-h-[40rem] overflow-y-auto">
|
<PopoverContent className="w-[30rem] bg-gray-800/95 border-gray-600 text-white max-h-[40rem] overflow-y-auto">
|
||||||
<CardHeader className="pb-3">
|
<CardHeader className="pb-3">
|
||||||
<CardTitle className="text-lg text-white">{title}</CardTitle>
|
<CardTitle className="text-lg text-white flex items-center justify-between">
|
||||||
|
<span>{title}</span>
|
||||||
|
<button
|
||||||
|
onClick={toggleSort}
|
||||||
|
className="flex items-center gap-1 text-sm font-normal text-gray-300 hover:text-white transition-colors"
|
||||||
|
title="Click to toggle sort order"
|
||||||
|
>
|
||||||
|
Sort {sortDescending ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
|
||||||
|
</button>
|
||||||
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-2">
|
<CardContent className="space-y-2">
|
||||||
{jobContributions.length === 0 ? (
|
{jobContributions.length === 0 ? (
|
||||||
@@ -52,7 +66,7 @@ const RecapPopover: React.FC<RecapPopoverProps> = ({
|
|||||||
<div
|
<div
|
||||||
key={job.id}
|
key={job.id}
|
||||||
onClick={() => handleJobClick(job.id)}
|
onClick={() => handleJobClick(job.id)}
|
||||||
className="flex justify-between items-center p-2 rounded hover:bg-gray-700/50 cursor-pointer transition-colors border-l-2 border-l-gray-600"
|
className={`flex justify-between items-center p-2 rounded hover:bg-gray-700/50 cursor-pointer transition-colors border-l-2 border-l-gray-600 ${getStatusBackgroundColor(job.status)}`}
|
||||||
>
|
>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<div className="text-sm font-medium text-blue-400 truncate" title={job.outputItem}>
|
<div className="text-sm font-medium text-blue-400 truncate" title={job.outputItem}>
|
||||||
|
|||||||
Reference in New Issue
Block a user