yoinkkk/ExcaliDash
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix database import, allow sqlite and db format

Browse Source
This commit is contained in:
Zimeng Xiong
2025-11-23 09:22:01 -08:00
parent 4728ef151c
commit d581eb3e88
3 changed files with 39 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Settings.tsx
+24 -10
View File
@@ -3,7 +3,7 @@ import { Layout } from '../components/Layout';
import { useNavigate } from 'react-router-dom';
import * as api from '../api';
import type { Collection } from '../types';
import { Database, FileJson, Upload, Moon, Sun, Info } from 'lucide-react';
import { Database, FileJson, Upload, Moon, Sun, Info, HardDrive } from 'lucide-react';
import { ConfirmModal } from '../components/ConfirmModal';
import { importDrawings } from '../utils/importUtils';
import { useTheme } from '../context/ThemeContext';
@@ -94,7 +94,7 @@ export const Settings: React.FC = () => {
</div>
</button>
{/* Export SQLite */}
{/* Export SQLite (.sqlite) */}
<button
onClick={() => window.location.href = `${api.API_URL}/export`}
className="flex flex-col items-center justify-center gap-4 p-8 bg-white dark:bg-neutral-900 border-2 border-black dark:border-neutral-700 rounded-2xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-1 transition-all duration-200 group"
@@ -103,11 +103,25 @@ export const Settings: React.FC = () => {
<Database size={32} className="text-indigo-600 dark:text-indigo-400" />
</div>
<div className="text-center">
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-1">Export Data (SQLite)</h3>
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-1">Export Data (.sqlite)</h3>
<p className="text-sm text-slate-500 dark:text-neutral-400 font-medium">Download full database backup</p>
</div>
</button>
{/* Export SQLite (.db) */}
<button
onClick={() => window.location.href = `${api.API_URL}/export?format=db`}
className="flex flex-col items-center justify-center gap-4 p-8 bg-white dark:bg-neutral-900 border-2 border-black dark:border-neutral-700 rounded-2xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-1 transition-all duration-200 group"
>
<div className="w-16 h-16 bg-blue-50 dark:bg-neutral-800 rounded-2xl flex items-center justify-center border-2 border-blue-100 dark:border-neutral-700 group-hover:border-blue-200 dark:group-hover:border-neutral-600 transition-colors">
<HardDrive size={32} className="text-blue-600 dark:text-blue-400" />
</div>
<div className="text-center">
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-1">Export Data (.db)</h3>
<p className="text-sm text-slate-500 dark:text-neutral-400 font-medium">Download Prisma .db format</p>
</div>
</button>
{/* Export JSON */}
<button
onClick={() => window.location.href = `${api.API_URL}/export/json`}
@@ -127,16 +141,16 @@ export const Settings: React.FC = () => {
<input
type="file"
multiple
accept=".sqlite,.json,.excalidraw"
accept=".sqlite,.db,.json,.excalidraw"
className="hidden"
id="settings-import-db"
onChange={async (e) => {
const files = Array.from(e.target.files || []);
if (files.length === 0) return;
// Handle SQLite Import
const sqliteFile = files.find(f => f.name.endsWith('.sqlite'));
if (sqliteFile) {
// Handle Database Import (.sqlite or .db)
const databaseFile = files.find(f => f.name.endsWith('.sqlite') || f.name.endsWith('.db'));
if (databaseFile) {
if (files.length > 1) {
setImportError({ isOpen: true, message: 'Please import database files separately from other files.' });
e.target.value = '';
@@ -144,7 +158,7 @@ export const Settings: React.FC = () => {
}
const formData = new FormData();
formData.append('db', sqliteFile);
formData.append('db', databaseFile);
try {
const res = await fetch(`${api.API_URL}/import/sqlite/verify`, {
@@ -159,7 +173,7 @@ export const Settings: React.FC = () => {
return;
}
setImportConfirmation({ isOpen: true, file: sqliteFile });
setImportConfirmation({ isOpen: true, file: databaseFile });
} catch (err) {
console.error('Verification failed:', err);
setImportError({ isOpen: true, message: 'Failed to verify database file.' });
@@ -200,7 +214,7 @@ export const Settings: React.FC = () => {
</div>
<div className="text-center">
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-1">Import Data</h3>
<p className="text-sm text-slate-500 dark:text-neutral-400 font-medium">Import SQLite or Drawings</p>
<p className="text-sm text-slate-500 dark:text-neutral-400 font-medium">Import Database or Drawings</p>
</div>
</button>