feat: save file to database

- Add `Save` to `File` nav bar drop-down
- Parse `id` to `CressTable`
- Add `updateAttachment()`
- Rename `initializeExportButtons()` to `initFileListener()`
- Add save file listener

Resolves: #26

assets/template.html

@@ -45,9 +45,9 @@
           </div>
 
           <div class="navbar-dropdown">
-            <!-- <div id="save" class="navbar-dropdown-item">
+            <div id="save" class="navbar-dropdown-item">
               <div class="navbar-dropdown-item-text">Save</div>
-            </div> -->
+            </div>
             <div id="export-to-csv" class="navbar-dropdown-item">
               <div class="navbar-dropdown-item-text">Export to CSV</div>
             </div>

src/CressView.ts

@@ -45,7 +45,7 @@ class CressView {
 
         document.getElementById('loading').style.display = 'none';
 
-        this.table = new CressTable(this.header, this.body);
+        this.table = new CressTable(this.id, this.header, this.body);
 
         return;
       })

src/Dashboard/Storage.ts

@@ -251,3 +251,39 @@ export function updateDocName(id: string, newName: string): Promise<boolean> {
       .catch((err) => reject(err)); // db.get
   });
 }
+
+/**
+ * Update the doc from the database
+ * @param id
+ * @param body [header, ...content]
+ * @returns Promise<boolean>
+ */
+export async function updateAttachment(
+  id: string,
+  body: any[],
+): Promise<boolean> {
+  try {
+    // Retrieve the document using the provided id
+    const doc = await db.get(id);
+
+    // Convert the body array to a JSON blob
+    const jsonBlob = new Blob([JSON.stringify(body)], {
+      type: 'application/json',
+    });
+
+    // Update the attachment
+    doc._attachments = doc._attachments || {};
+    doc._attachments['table'] = {
+      content_type: 'application/json',
+      data: jsonBlob,
+    };
+
+    // Save the document back to the database
+    await db.put(doc);
+
+    return true;
+  } catch (error) {
+    console.error('Error updating attachment:', error);
+    return false;
+  }
+}

src/Editor/CressTable.ts

@@ -3,17 +3,16 @@ import * as Validation from '../Validation';
 import { ImageHandler } from './ImageHandler';
 import { ExportHandler } from './ExportHandler';
 import { ColumnTools } from './ColumnTools';
+import { updateAttachment } from '../Dashboard/Storage';
 
 export class CressTable {
-  private exportToCsvButton: HTMLElement;
-  private exportToExcelButton: HTMLElement;
   private table: Handsontable;
   private images: any[] = []; // Array to store images
   private imageHandler: ImageHandler;
   private exportHandler: ExportHandler;
   private ColumnTools: ColumnTools;
 
-  constructor(inputHeader: string[], body: any[]) {
+  constructor(id: string, inputHeader: string[], body: any[]) {
     const container = document.getElementById('hot-container');
 
     // Initialize handlers
@@ -71,28 +70,39 @@ export class CressTable {
       afterValidate: (isValid) => this.setResultStatus(isValid),
     });
 
-    this.initializeExportButtons(inputHeader, body, headers);
+    this.initFileListener(id, inputHeader, body, headers);
   }
 
-  private initializeExportButtons(
+  private initFileListener(
+    id: string,
     inputHeader: string[],
     body: any[],
     headers: string[],
   ) {
-    this.exportToCsvButton = document.getElementById('export-to-csv');
     const exportPlugin = this.table.getPlugin('exportFile');
-    this.exportToCsvButton.addEventListener('click', () => {
+    document.getElementById('export-to-csv').addEventListener('click', () => {
       this.exportHandler.exportToCsv(exportPlugin);
     });
 
-    this.exportToExcelButton = document.getElementById('export-to-excel');
-    this.exportToExcelButton.addEventListener('click', async () => {
-      await this.exportHandler.exportToExcel(
-        inputHeader,
-        body,
-        headers,
-        this.images,
-      );
+    document
+      .getElementById('export-to-excel')
+      .addEventListener('click', async () => {
+        await this.exportHandler.exportToExcel(
+          inputHeader,
+          body,
+          headers,
+          this.images,
+        );
+      });
+
+    document.getElementById('save').addEventListener('click', async () => {
+      const result = await updateAttachment(id, [inputHeader, ...body]);
+
+      if (result) {
+        // TODO: notification
+      } else {
+        // TODO: notification
+      }
     });
   }