matt/inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix issues with data management settings page

Browse Source
This commit is contained in:
Matt
2025-06-18 11:20:34 -04:00
parent 7999e1e64a
commit dd82c624d8
2 changed files with 91 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
inventory/src/components/settings/DataManagement.tsx
View File

@@ -88,43 +88,37 @@ interface TableSkeletonProps {
const TableSkeleton = ({ rows = 5, useAccordion = false }: TableSkeletonProps) => {
return (
<Table>
<TableBody>
{Array.from({ length: rows }).map((_, rowIndex) => (
<TableRow key={rowIndex} className="hover:bg-transparent">
<TableCell className="w-full p-0">
{useAccordion ? (
<Accordion type="single" collapsible>
<AccordionItem value={`skeleton-${rowIndex}`} className="border-0">
<AccordionTrigger className="px-4 py-2 cursor-default">
<div className="flex justify-between items-center w-full pr-4">
<div className="w-[50px]">
<Skeleton className="h-4 w-full" />
</div>
<div className="w-[170px]">
<Skeleton className="h-4 w-full" />
</div>
<div className="w-[140px]">
<Skeleton className="h-4 w-full" />
</div>
<div className="w-[80px]">
<Skeleton className="h-4 w-full" />
</div>
</div>
</AccordionTrigger>
</AccordionItem>
</Accordion>
) : (
<div className="flex justify-between px-4 py-2">
<Skeleton className="h-4 w-[180px]" />
<Skeleton className="h-4 w-[100px]" />
<>
{Array.from({ length: rows }).map((_, rowIndex) => (
<TableRow key={rowIndex} className="hover:bg-transparent">
<TableCell className="w-full p-0">
{useAccordion ? (
<div className="px-4 py-2 cursor-default">
<div className="flex justify-between items-center w-full pr-4">
<div className="w-[50px]">
<Skeleton className="h-4 w-full" />
</div>
<div className="w-[170px]">
<Skeleton className="h-4 w-full" />
</div>
<div className="w-[140px]">
<Skeleton className="h-4 w-full" />
</div>
<div className="w-[80px]">
<Skeleton className="h-4 w-full" />
</div>
</div>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
) : (
<div className="flex justify-between px-4 py-2">
<Skeleton className="h-4 w-[180px]" />
<Skeleton className="h-4 w-[100px]" />
</div>
)}
</TableCell>
</TableRow>
))}
</>
);
};
@@ -172,8 +166,10 @@ export function DataManagement() {
credentials: "include",
});
console.log("Status check response:", response.status, response.statusText);
if (!response.ok) {
throw new Error("Failed to check active process status");
throw new Error(`Failed to check active process status: ${response.status} ${response.statusText}`);
}
const data = await response.json();
@@ -185,7 +181,8 @@ export function DataManagement() {
// Determine if it's a reset or update based on the progress data
const isReset =
data.progress.operation?.includes("reset") ||
data.progress.operation?.includes("Reset");
data.progress.operation?.includes("Reset") ||
data.progress.type === "reset";
// Set the appropriate state
if (isReset) {
@@ -209,6 +206,8 @@ export function DataManagement() {
}
} catch (error) {
console.error("Error checking for active processes:", error);
// Don't toast error for status check since this happens on every load
// The main data fetch will handle showing errors to the user
}
};
@@ -508,6 +507,8 @@ export function DataManagement() {
if (shouldSetLoading) setIsLoading(true);
setHasError(false);
console.log("Fetching history data...");
const [importRes, calcRes, moduleRes, tableRes, tableCountsRes] = await Promise.all([
fetch(`${config.apiUrl}/csv/history/import`, { credentials: 'include' }),
fetch(`${config.apiUrl}/csv/history/calculate`, { credentials: 'include' }),
@@ -516,8 +517,22 @@ export function DataManagement() {
fetch(`${config.apiUrl}/csv/status/table-counts`, { credentials: 'include' }),
]);
console.log("Fetch responses:", {
import: importRes.status,
calc: calcRes.status,
modules: moduleRes.status,
tables: tableRes.status,
tableCounts: tableCountsRes.status
});
if (!importRes.ok || !calcRes.ok || !moduleRes.ok || !tableRes.ok || !tableCountsRes.ok) {
throw new Error('One or more requests failed');
const failed = [];
if (!importRes.ok) failed.push(`import (${importRes.status})`);
if (!calcRes.ok) failed.push(`calculate (${calcRes.status})`);
if (!moduleRes.ok) failed.push(`modules (${moduleRes.status})`);
if (!tableRes.ok) failed.push(`tables (${tableRes.status})`);
if (!tableCountsRes.ok) failed.push(`table-counts (${tableCountsRes.status})`);
throw new Error(`Failed requests: ${failed.join(', ')}`);
}
const [importData, calcData, moduleData, tableData, tableCountsData] = await Promise.all([
@@ -528,6 +543,14 @@ export function DataManagement() {
tableCountsRes.json(),
]);
console.log("Successfully fetched data:", {
importCount: importData?.length || 0,
calcCount: calcData?.length || 0,
moduleCount: moduleData?.length || 0,
tableCount: tableData?.length || 0,
tableCountsAvailable: !!tableCountsData
});
// Process import history to add duration_minutes if it doesn't exist
const processedImportData = (importData || []).map((record: ImportHistoryRecord) => {
if (!record.duration_minutes && record.start_time && record.end_time) {
@@ -557,7 +580,8 @@ export function DataManagement() {
} catch (error) {
console.error("Error fetching data:", error);
setHasError(true);
toast.error("Failed to load data. Please try again.");
toast.error(`Failed to load data: ${error instanceof Error ? error.message : "Unknown error"}`);
// Set empty arrays instead of leaving them unchanged to trigger the UI to show empty states
setImportHistory([]);
setCalculateHistory([]);
setModuleStatus([]);