Fix csv update/import on settings page + lots of cors work
This commit is contained in:
@@ -1,5 +1,8 @@
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
|
||||
const config = {
|
||||
apiUrl: 'https://inventory.kent.pw/api'
|
||||
apiUrl: isDev ? '/api' : 'https://inventory.kent.pw/api',
|
||||
baseUrl: isDev ? '' : 'https://inventory.kent.pw'
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -1,98 +1,368 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Loader2, RefreshCw, Upload } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Loader2, RefreshCw, Upload, X } from "lucide-react";
|
||||
import config from '../config';
|
||||
|
||||
interface ImportProgress {
|
||||
operation: string;
|
||||
current: number;
|
||||
total: number;
|
||||
rate: number;
|
||||
elapsed: string;
|
||||
remaining: string;
|
||||
status: 'running' | 'error' | 'complete';
|
||||
operation?: string;
|
||||
current?: number;
|
||||
total?: number;
|
||||
rate?: number;
|
||||
elapsed?: string;
|
||||
remaining?: string;
|
||||
progress?: string;
|
||||
error?: string;
|
||||
percentage?: string;
|
||||
message?: string;
|
||||
testLimit?: number;
|
||||
added?: number;
|
||||
updated?: number;
|
||||
skipped?: number;
|
||||
duration?: string;
|
||||
}
|
||||
|
||||
interface ImportLimits {
|
||||
products: number;
|
||||
orders: number;
|
||||
purchaseOrders: number;
|
||||
}
|
||||
|
||||
export function Settings() {
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [progress, setProgress] = useState<ImportProgress | null>(null);
|
||||
const [eventSource, setEventSource] = useState<EventSource | null>(null);
|
||||
const [limits, setLimits] = useState<ImportLimits>({
|
||||
products: 0,
|
||||
orders: 10000,
|
||||
purchaseOrders: 10000
|
||||
});
|
||||
|
||||
// Clean up function to reset state
|
||||
const cleanupState = () => {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
setEventSource(null);
|
||||
}
|
||||
setIsUpdating(false);
|
||||
setIsImporting(false);
|
||||
setProgress(null);
|
||||
};
|
||||
|
||||
const handleCancel = async () => {
|
||||
// Just clean up everything immediately
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
setEventSource(null);
|
||||
}
|
||||
setIsUpdating(false);
|
||||
setIsImporting(false);
|
||||
setProgress(null);
|
||||
|
||||
// Fire and forget the cancel request
|
||||
fetch(`${config.apiUrl}/csv/cancel`, {
|
||||
method: 'POST',
|
||||
credentials: 'include'
|
||||
}).catch(() => {});
|
||||
};
|
||||
|
||||
const handleUpdateCSV = async () => {
|
||||
setIsUpdating(true);
|
||||
setProgress({ status: 'running', operation: 'Starting CSV update' });
|
||||
|
||||
try {
|
||||
const response = await fetch(`${config.apiUrl}/csv/update`, {
|
||||
method: 'POST'
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update CSV files');
|
||||
// Set up SSE connection for progress updates first
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
setEventSource(null);
|
||||
}
|
||||
|
||||
// Set up SSE connection for progress updates
|
||||
const source = new EventSource(`${config.apiUrl}/csv/update/progress`, {
|
||||
withCredentials: true
|
||||
});
|
||||
setEventSource(source);
|
||||
|
||||
// Add event listeners for all SSE events
|
||||
source.onopen = () => {};
|
||||
|
||||
source.onerror = (error) => {
|
||||
if (source.readyState === EventSource.CLOSED) {
|
||||
source.close();
|
||||
setEventSource(null);
|
||||
setIsUpdating(false);
|
||||
// Only show connection error if we're not in a cancelled state
|
||||
if (!progress?.operation?.includes('cancelled')) {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
status: 'error',
|
||||
error: 'Connection to server lost'
|
||||
}));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
source.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
let progressData = data.progress ?
|
||||
(typeof data.progress === 'string' ? JSON.parse(data.progress) : data.progress)
|
||||
: data;
|
||||
|
||||
setProgress(prev => {
|
||||
// If we're getting a new operation, clear out old messages
|
||||
if (progressData.operation && progressData.operation !== prev?.operation) {
|
||||
return {
|
||||
status: progressData.status || 'running',
|
||||
operation: progressData.operation,
|
||||
current: progressData.current !== undefined ? Number(progressData.current) : undefined,
|
||||
total: progressData.total !== undefined ? Number(progressData.total) : undefined,
|
||||
rate: progressData.rate !== undefined ? Number(progressData.rate) : undefined,
|
||||
percentage: progressData.percentage,
|
||||
elapsed: progressData.elapsed,
|
||||
remaining: progressData.remaining,
|
||||
message: progressData.message,
|
||||
error: progressData.error
|
||||
};
|
||||
}
|
||||
|
||||
// Otherwise update existing state
|
||||
return {
|
||||
...prev,
|
||||
status: progressData.status || prev?.status || 'running',
|
||||
operation: progressData.operation || prev?.operation,
|
||||
current: progressData.current !== undefined ? Number(progressData.current) : prev?.current,
|
||||
total: progressData.total !== undefined ? Number(progressData.total) : prev?.total,
|
||||
rate: progressData.rate !== undefined ? Number(progressData.rate) : prev?.rate,
|
||||
percentage: progressData.percentage !== undefined ? progressData.percentage : prev?.percentage,
|
||||
elapsed: progressData.elapsed || prev?.elapsed,
|
||||
remaining: progressData.remaining || prev?.remaining,
|
||||
error: progressData.error || prev?.error,
|
||||
message: progressData.message || prev?.message
|
||||
};
|
||||
});
|
||||
|
||||
if (progressData.status === 'complete') {
|
||||
source.close();
|
||||
setEventSource(null);
|
||||
setIsUpdating(false);
|
||||
setIsImporting(false);
|
||||
if (!progressData.operation?.includes('cancelled')) {
|
||||
setTimeout(() => {
|
||||
setProgress(null);
|
||||
}, 1000);
|
||||
}
|
||||
} else if (progressData.status === 'error' && !progressData.operation?.includes('cancelled')) {
|
||||
source.close();
|
||||
setEventSource(null);
|
||||
setIsUpdating(false);
|
||||
setIsImporting(false);
|
||||
}
|
||||
} catch (error) {
|
||||
// Silently handle parsing errors
|
||||
}
|
||||
};
|
||||
|
||||
// Now make the update request
|
||||
const response = await fetch(`${config.apiUrl}/csv/update`, {
|
||||
method: 'POST',
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to update CSV files: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
// After successful update, trigger import
|
||||
handleImportCSV();
|
||||
} catch (error) {
|
||||
console.error('Error updating CSV files:', error);
|
||||
} finally {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
setEventSource(null);
|
||||
}
|
||||
setIsUpdating(false);
|
||||
// Don't show any errors if we're cleaning up
|
||||
if (progress?.status === 'running') {
|
||||
setProgress(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleImportCSV = async () => {
|
||||
setIsImporting(true);
|
||||
setProgress({ status: 'running', operation: 'Starting import process' });
|
||||
|
||||
try {
|
||||
// Set up SSE connection for progress updates first
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
setEventSource(null);
|
||||
}
|
||||
|
||||
// Set up SSE connection for progress updates
|
||||
const source = new EventSource(`${config.apiUrl}/csv/import/progress`, {
|
||||
withCredentials: true
|
||||
});
|
||||
setEventSource(source);
|
||||
|
||||
// Add event listeners for all SSE events
|
||||
source.onopen = () => {};
|
||||
|
||||
source.onerror = (error) => {
|
||||
if (source.readyState === EventSource.CLOSED) {
|
||||
source.close();
|
||||
setEventSource(null);
|
||||
setIsImporting(false);
|
||||
// Only show connection error if we're not in a cancelled state
|
||||
if (!progress?.operation?.includes('cancelled') && progress?.status !== 'complete') {
|
||||
setProgress(prev => ({
|
||||
...prev,
|
||||
status: 'error',
|
||||
error: 'Connection to server lost'
|
||||
}));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
source.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
let progressData = data.progress ?
|
||||
(typeof data.progress === 'string' ? JSON.parse(data.progress) : data.progress)
|
||||
: data;
|
||||
|
||||
setProgress(prev => {
|
||||
// If we're getting a new operation, clear out old messages
|
||||
if (progressData.operation && progressData.operation !== prev?.operation) {
|
||||
return {
|
||||
status: progressData.status || 'running',
|
||||
operation: progressData.operation,
|
||||
current: progressData.current !== undefined ? Number(progressData.current) : undefined,
|
||||
total: progressData.total !== undefined ? Number(progressData.total) : undefined,
|
||||
rate: progressData.rate !== undefined ? Number(progressData.rate) : undefined,
|
||||
percentage: progressData.percentage,
|
||||
elapsed: progressData.elapsed,
|
||||
remaining: progressData.remaining,
|
||||
message: progressData.message,
|
||||
error: progressData.error
|
||||
};
|
||||
}
|
||||
|
||||
// Otherwise update existing state
|
||||
return {
|
||||
...prev,
|
||||
status: progressData.status || prev?.status || 'running',
|
||||
operation: progressData.operation || prev?.operation,
|
||||
current: progressData.current !== undefined ? Number(progressData.current) : prev?.current,
|
||||
total: progressData.total !== undefined ? Number(progressData.total) : prev?.total,
|
||||
rate: progressData.rate !== undefined ? Number(progressData.rate) : prev?.rate,
|
||||
percentage: progressData.percentage !== undefined ? progressData.percentage : prev?.percentage,
|
||||
elapsed: progressData.elapsed || prev?.elapsed,
|
||||
remaining: progressData.remaining || prev?.remaining,
|
||||
error: progressData.error || prev?.error,
|
||||
message: progressData.message || prev?.message
|
||||
};
|
||||
});
|
||||
|
||||
if (progressData.status === 'complete') {
|
||||
source.close();
|
||||
setEventSource(null);
|
||||
setIsUpdating(false);
|
||||
setIsImporting(false);
|
||||
if (!progressData.operation?.includes('cancelled')) {
|
||||
setTimeout(() => {
|
||||
setProgress(null);
|
||||
}, 1000);
|
||||
}
|
||||
} else if (progressData.status === 'error' && !progressData.operation?.includes('cancelled')) {
|
||||
source.close();
|
||||
setEventSource(null);
|
||||
setIsUpdating(false);
|
||||
setIsImporting(false);
|
||||
}
|
||||
} catch (error) {
|
||||
// Silently handle parsing errors
|
||||
}
|
||||
};
|
||||
|
||||
// Now make the import request
|
||||
const response = await fetch(`${config.apiUrl}/csv/import`, {
|
||||
method: 'POST'
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
credentials: 'include',
|
||||
body: JSON.stringify(limits)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to start CSV import');
|
||||
}
|
||||
|
||||
// Set up SSE connection for progress updates
|
||||
const eventSource = new EventSource(`${config.apiUrl}/csv/import/progress`);
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
setProgress(data);
|
||||
|
||||
if (data.operation === 'complete') {
|
||||
eventSource.close();
|
||||
setIsImporting(false);
|
||||
setProgress(null);
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.onerror = () => {
|
||||
eventSource.close();
|
||||
setIsImporting(false);
|
||||
setProgress(null);
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error importing CSV files:', error);
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
setEventSource(null);
|
||||
}
|
||||
setIsImporting(false);
|
||||
// Don't show any errors if we're cleaning up
|
||||
if (progress?.status === 'running') {
|
||||
setProgress(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
}
|
||||
};
|
||||
}, [eventSource]);
|
||||
|
||||
const renderProgress = () => {
|
||||
if (!progress) return null;
|
||||
|
||||
const percentage = (progress.current / progress.total) * 100;
|
||||
let percentage = progress.percentage ? parseFloat(progress.percentage) :
|
||||
(progress.current && progress.total) ? (progress.current / progress.total) * 100 : null;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm text-muted-foreground">
|
||||
<span>{progress.operation}</span>
|
||||
<span>{Math.round(percentage)}%</span>
|
||||
</div>
|
||||
<Progress value={percentage} className="h-2" />
|
||||
<div className="flex justify-between text-sm text-muted-foreground">
|
||||
<span>{progress.current.toLocaleString()} / {progress.total.toLocaleString()} rows</span>
|
||||
<span>{Math.round(progress.rate)}/s</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-muted-foreground">
|
||||
<span>Elapsed: {progress.elapsed}</span>
|
||||
<span>Remaining: {progress.remaining}</span>
|
||||
<span>{progress.operation || 'Processing...'}</span>
|
||||
{percentage !== null && <span>{Math.round(percentage)}%</span>}
|
||||
</div>
|
||||
{percentage !== null && (
|
||||
<>
|
||||
<Progress value={percentage} className="h-2" />
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{progress.current && progress.total && (
|
||||
<span>{progress.current.toLocaleString()} / {progress.total.toLocaleString()} {progress.rate ? `(${Math.round(progress.rate)}/s)` : ''}</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{(progress.elapsed || progress.remaining) && (
|
||||
<div className="flex justify-between text-sm text-muted-foreground">
|
||||
{progress.elapsed && <span>Elapsed: {progress.elapsed}</span>}
|
||||
{progress.remaining && <span>Remaining: {progress.remaining}</span>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{progress.message && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{progress.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{progress.error && (
|
||||
<div className="text-sm text-red-500">
|
||||
Error: {progress.error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -111,43 +381,103 @@ export function Settings() {
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-4">
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={handleUpdateCSV}
|
||||
disabled={isUpdating || isImporting}
|
||||
>
|
||||
{isUpdating ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Updating CSV Files...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
Update CSV Files
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="products-limit">Products Import Limit (0 for no limit)</Label>
|
||||
<Input
|
||||
id="products-limit"
|
||||
type="number"
|
||||
min="0"
|
||||
value={limits.products}
|
||||
onChange={(e) => setLimits(prev => ({ ...prev, products: parseInt(e.target.value) || 0 }))}
|
||||
disabled={isUpdating || isImporting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="orders-limit">Orders Import Limit (0 for no limit)</Label>
|
||||
<Input
|
||||
id="orders-limit"
|
||||
type="number"
|
||||
min="0"
|
||||
value={limits.orders}
|
||||
onChange={(e) => setLimits(prev => ({ ...prev, orders: parseInt(e.target.value) || 0 }))}
|
||||
disabled={isUpdating || isImporting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="purchase-orders-limit">Purchase Orders Import Limit (0 for no limit)</Label>
|
||||
<Input
|
||||
id="purchase-orders-limit"
|
||||
type="number"
|
||||
min="0"
|
||||
value={limits.purchaseOrders}
|
||||
onChange={(e) => setLimits(prev => ({ ...prev, purchaseOrders: parseInt(e.target.value) || 0 }))}
|
||||
disabled={isUpdating || isImporting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={handleImportCSV}
|
||||
disabled={isUpdating || isImporting}
|
||||
>
|
||||
{isImporting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Importing Data...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
Import Data
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
className="flex-1"
|
||||
onClick={handleUpdateCSV}
|
||||
disabled={isUpdating || isImporting}
|
||||
>
|
||||
{isUpdating ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Updating CSV Files...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
Update CSV Files
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{(isUpdating || isImporting) && renderProgress()}
|
||||
{isUpdating && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
className="flex-1"
|
||||
onClick={handleImportCSV}
|
||||
disabled={isUpdating || isImporting}
|
||||
>
|
||||
{isImporting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Importing Data...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
Import Data
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{isImporting && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(isUpdating || isImporting || progress) && renderProgress()}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -45,6 +45,10 @@ export default defineConfig(({ mode }) => {
|
||||
target: "https://inventory.kent.pw",
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
ws: true,
|
||||
xfwd: true,
|
||||
cookieDomainRewrite: "",
|
||||
withCredentials: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, "/api"),
|
||||
configure: (proxy, _options) => {
|
||||
proxy.on("error", (err, req, res) => {
|
||||
|
||||
Reference in New Issue
Block a user