added database functionality

Author: utmp

src/main/db.js

@@ -0,0 +1,45 @@
+const sqlite3 = require('sqlite3')
+sqlite3.verbose()
+const db = new sqlite3.Database('history.db')
+
+// Create table if not exists
+db.serialize(() => {
+    db.run(`CREATE TABLE IF NOT EXISTS conversions (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      filename TEXT NOT NULL,
+      format TEXT NOT NULL,
+      resolution TEXT,
+      size INTEGER,
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    )`)
+  })
+  
+export  const saveConversion = (filename, format, resolution = null, size = null) => {
+    return new Promise((resolve, reject) => {
+      const stmt = db.prepare(`
+        INSERT INTO conversions (filename, format, resolution, size)
+        VALUES (?, ?, ?, ?)
+      `)
+      
+      stmt.run([filename, format, resolution, size], function(err) {
+        if (err) {
+          reject(err)
+          return
+        }
+        resolve(this.lastID)
+      })
+      stmt.finalize()
+    })
+  }
+  
+export  const getAllConversions = () => {
+    return new Promise((resolve, reject) => {
+      db.all('SELECT * FROM conversions ORDER BY created_at DESC', (err, rows) => {
+        if (err) {
+          reject(err)
+          return
+        }
+        resolve(rows)
+      })
+    })
+  }

src/main/index.js

@@ -7,6 +7,7 @@ import sharp from 'sharp'
 import fs from 'fs'
 import path from 'path'
 import { checkPluginInstalled, getSupportedFormats,documentConvert,isFormatSupported } from './initPlugin'
+import {db,saveConversion,getAllConversions} from './db'
 function createWindow() {
   const primaryDisplay = screen.getPrimaryDisplay();
   const {width,height} = primaryDisplay.workAreaSize  
@@ -234,4 +235,28 @@ ipcMain.handle('plugin:uninstall', async (event,pluginId)=>{
     console.error('Failed to delete plugin: ',error)
     throw error
   }
+})
+//database operations
+ipcMain.handle('db:save-history',async(_,conversionData)=>{
+  try {
+    const id = await saveConversion(
+      conversionData.filename,
+      conversionData.format,
+      conversionData.resolution || 'NaN',
+      conversionData.size
+    )
+    return { success: true, id }
+  } catch (error) {
+    console.error('Error saving conversion:', error)
+    return { success: false, error: error.message }
+  }
+})
+ipcMain.handle('db:get-data',async ()=>{
+  try {
+    const conversions = await getAllConversions()
+    return { success: true, conversions }
+  } catch (error) {
+    console.error('Error getting conversions:', error)
+    return { success: false, error: error.message }
+  }
 })

src/renderer/src/components/History.vue

@@ -1,4 +1,72 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const { ipcRenderer } = window.electron
+const conversions = ref([])
+const isLoading = ref(false)
+// Function to fetch history data
+const refreshHistory = async () => {
+  isLoading.value = true
+  try {
+    const result = await ipcRenderer.invoke('db:get-data')
+    if (result.success) {
+      conversions.value = result.conversions
+    } else {
+      console.error('Failed to load conversions:', result.error)
+    }
+  } catch (error) {
+    console.error('Error loading conversion history:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+onMounted(async () => {
+  await refreshHistory()
+})
+</script>
+
 <template>
-    <img src="../assets/not-ready.svg" alt="">
-    <h2 class="text-orange-600">History Under construction</h2>
+   <div class="mt-2 flex justify-end">
+      <button 
+        class="btn btn-sm btn-primary btn-outline" 
+        @click="refreshHistory" 
+        :disabled="isLoading"
+      >
+        {{ isLoading ? 'Loading...' : 'Refresh History' }}
+      </button>
+    </div>
+  <div class="container p-4">
+    <div v-if="isLoading" class="w-full">
+      <div class="skeleton h-8 w-full mb-4"></div>
+      <div class="skeleton h-8 w-full mb-2"></div>
+      <div class="skeleton h-8 w-full mb-2"></div>
+      <div class="skeleton h-8 w-full mb-2"></div>
+    </div>
+
+    <div v-else class="overflow-x-auto rounded-box border border-base-content/5 bg-base-100 max-h-[calc(100vh-9rem)] overflow-y-auto">
+      <table class="table w-full">
+        <thead>
+          <tr>
+            <th>Filename</th>
+            <th>Format</th>
+            <th>Resolution</th>
+            <th>Size</th>
+            <th>Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="conversions.length === 0">
+            <td colspan="5" class="text-center py-4">No conversion history found</td>
+          </tr>
+          <tr v-for="conv in conversions" :key="conv.id" class="hover:bg-base-200">
+            <td>{{ conv.filename }}</td>
+            <td>{{ conv.format?.toUpperCase() }}</td>
+            <td>{{ conv.resolution || 'N/A' }}</td>
+            <td>{{ conv.size }}</td>
+            <td>{{ new Date(conv.created_at).toLocaleString() }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 </template>

src/renderer/src/components/Upload.vue

@@ -207,6 +207,14 @@ async function processFiles() {
           message: result.message,
           outputPath: result.outputPath
         })
+        if (result.success) {
+          await ipcRenderer.invoke('db:save-history', {
+            filename: file.name,
+            format: options.format,
+            resolution: `${options.width}x${options.height}`,
+            size: formatFileSize(file.size) 
+          })
+        }
       } else {
         try {
           const r = await ipcRenderer.invoke('document:convert',{
@@ -223,6 +231,13 @@ async function processFiles() {
             message: r.message,
             outputPath: r.outputPath
           })
+          if (r.success) {
+            await ipcRenderer.invoke('db:save-history', {
+              filename: file.name,
+              format: fileOptions.value[i].format,
+              size: formatFileSize(file.size)
+            })
+          }
         } catch (error) {
           processedFiles.value.push({
             name: file.name,