saving attributes

public/javascripts/dialogs/attributes.js

@@ -2,19 +2,38 @@
 
 const attributesDialog = (function() {
     const dialogEl = $("#attributes-dialog");
+    const attributesModel = new AttributesModel();
 
-    function AttributesModel(attributes) {
+    function AttributesModel() {
-        const model = this;
+        const self = this;
 
-        this.attributes = ko.observableArray(attributes);
+        this.attributes = ko.observableArray();
+
+        this.loadAttributes = async function() {
+            const noteId = noteEditor.getCurrentNoteId();
+
+            const attributes = await server.get('notes/' + noteId + '/attributes');
+
+            this.attributes(attributes);
+        };
 
         this.addNewRow = function() {
-            model.attributes.push({
+            self.attributes.push({
                 attribute_id: '',
                 name: '',
                 value: ''
             });
-        }
+        };
+
+        this.save = async function() {
+            const noteId = noteEditor.getCurrentNoteId();
+
+            const attributes = await server.put('notes/' + noteId + '/attributes', this.attributes());
+
+            self.attributes(attributes);
+
+            showMessage("Attributes have been saved.");
+        };
     }
 
     async function showDialog() {
@@ -26,11 +45,7 @@ const attributesDialog = (function() {
             height: 700
         });
 
-        const noteId = noteEditor.getCurrentNoteId();
+        attributesModel.loadAttributes();
-
-        const attributes = await server.get('notes/' + noteId + '/attributes');
-
-        ko.applyBindings(new AttributesModel(attributes));
     }
 
     $(document).bind('keydown', 'alt+a', e => {
@@ -39,6 +54,8 @@ const attributesDialog = (function() {
         e.preventDefault();
     });
 
+    ko.applyBindings(attributesModel);
+
     return {
         showDialog
     };

routes/api/attributes.js

@@ -4,6 +4,8 @@ const express = require('express');
 const router = express.Router();
 const sql = require('../../services/sql');
 const auth = require('../../services/auth');
+const sync_table = require('../../services/sync_table');
+const utils = require('../../services/utils');
 const wrap = require('express-promise-wrap').wrap;
 
 router.get('/:noteId/attributes', auth.checkApiAuth, wrap(async (req, res, next) => {
@@ -12,4 +14,35 @@ router.get('/:noteId/attributes', auth.checkApiAuth, wrap(async (req, res, next)
     res.send(await sql.getAll("SELECT * FROM attributes WHERE note_id = ? ORDER BY date_created", [noteId]));
 }));
 
+router.put('/:noteId/attributes', auth.checkApiAuth, wrap(async (req, res, next) => {
+    const noteId = req.params.noteId;
+    const attributes = req.body;
+    const now = utils.nowDate();
+
+    await sql.doInTransaction(async () => {
+        for (const attr of attributes) {
+            if (attr.attribute_id) {
+                await sql.execute("UPDATE attributes SET name = ?, value = ?, date_modified = ? WHERE attribute_id = ?",
+                    [attr.name, attr.value, now, attr.attribute_id]);
+            }
+            else {
+                attr.attribute_id = utils.newAttributeId();
+
+                await sql.insert("attributes", {
+                   attribute_id: attr.attribute_id,
+                   note_id: noteId,
+                   name: attr.name,
+                   value: attr.value,
+                   date_created: now,
+                   date_modified: now
+                });
+            }
+
+            await sync_table.addAttributeSync(attr.attribute_id);
+        }
+    });
+
+    res.send(await sql.getAll("SELECT * FROM attributes WHERE note_id = ? ORDER BY date_created", [noteId]));
+}));
+
 module.exports = router;

views/index.ejs

@@ -341,28 +341,34 @@
     </div>
 
     <div id="attributes-dialog" title="Note attributes" style="display: none; padding: 20px;">
-      <button class="btn-small" data-bind="click: addNewRow">Add new attribute</button>
+      <div style="display: flex; justify-content: space-between; padding: 15px; padding-top: 0;">
+        <button class="btn-default" data-bind="click: addNewRow">Add new attribute</button>
 
-      <table id="attributes-table" class="table">
+        <button class="btn-primary" data-bind="click: save">Save</button>
-        <thead>
+      </div>
-          <tr>
+
-            <th>ID</th>
+      <div style="height: 97%; overflow: auto">
-            <th>Name</th>
+        <table id="attributes-table" class="table">
-            <th>Value</th>
+          <thead>
-          </tr>
+            <tr>
-        </thead>
+              <th>ID</th>
-        <tbody data-bind="foreach: attributes">
+              <th>Name</th>
-          <tr>
+              <th>Value</th>
-            <td data-bind="text: attribute_id"></td>
+            </tr>
-            <td>
+          </thead>
-              <input type="text" data-bind="value: name"/>
+          <tbody data-bind="foreach: attributes">
-            </td>
+            <tr>
-            <td>
+              <td data-bind="text: attribute_id"></td>
-              <input type="text" data-bind="value: value"/>
+              <td>
-            </td>
+                <input type="text" data-bind="value: name"/>
-          </tr>
+              </td>
-        </tbody>
+              <td>
-      </table>
+                <input type="text" data-bind="value: value" style="width: 300px"/>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
 
     <div id="tooltip" style="display: none;"></div>