basic support for saving promoted attributes

src/public/javascripts/services/note_detail.js

@@ -34,7 +34,7 @@ const $relationList = $("#relation-list");
 const $relationListInner = $("#relation-list-inner");
 const $childrenOverview = $("#children-overview");
 const $scriptArea = $("#note-detail-script-area");
-const $promotedAttributes = $("#note-detail-promoted-attributes");
+const $promotedAttributesContainer = $("#note-detail-promoted-attributes");
 
 let currentNote = null;
 
@@ -226,7 +226,7 @@ async function showChildrenOverview(hideChildrenOverview) {
 }
 
 async function loadAttributes() {
-    $promotedAttributes.empty();
+    $promotedAttributesContainer.empty();
 
     const noteId = getCurrentNoteId();
 
@@ -237,20 +237,38 @@ async function loadAttributes() {
     let idx = 1;
 
     if (promoted.length > 0) {
-        for (const promotedAttr of promoted) {
-            if (promotedAttr.type === 'label-definition') {
-                const inputId = "promoted-input-" + idx;
-                const $div = $("<div>").addClass("class", "form-group");
-                const $label = $("<label>").prop("for", inputId).append(promotedAttr.name);
-                const $input = $("<input>")
-                    .prop("id", inputId)
-                    .prop("attribute-id", promotedAttr.attributeId)
-                    .addClass("form-control")
-                    .addClass("promoted-attribute-input");
+        for (const definitionAttr of promoted) {
+            const valueAttrs = attributes.filter(el => el.name === definitionAttr.name && el.type === definitionAttr.type.substr(0, definitionAttr.type.length - 11));
 
-                $div.append($label).append($input);
+            if (valueAttrs.length === 0) {
+                valueAttrs.push({
+                    attributeId: "",
+                    type: definitionAttr.type.substr(0, definitionAttr.type.length - 11),
+                    name: definitionAttr.name,
+                    value: ""
+                });
+            }
 
-                $promotedAttributes.append($div);
+            for (const valueAttr of valueAttrs) {
+                if (valueAttr.type === 'label') {
+                    const inputId = "promoted-input-" + idx;
+                    const $tr = $("<tr>");
+                    const $labelCell = $("<th>").append(valueAttr.name);
+                    const $input = $("<input>")
+                        .prop("id", inputId)
+                        .prop("attribute-id", valueAttr.attributeId)
+                        .prop("attribute-type", valueAttr.type)
+                        .prop("attribute-name", valueAttr.name)
+                        .prop("value", valueAttr.value)
+                        .addClass("form-control")
+                        .addClass("promoted-attribute-input");
+
+                    const $inputCell = $("<td>").append($input);
+
+                    $tr.append($labelCell).append($inputCell);
+
+                    $promotedAttributesContainer.append($tr);
+                }
             }
         }
     }
@@ -347,6 +365,19 @@ messagingService.subscribeToSyncMessages(syncData => {
     }
 });
 
+$promotedAttributesContainer.on('change', '.promoted-attribute-input', async event => {
+    const $attr = $(event.target);
+
+    await server.put("notes/" + getCurrentNoteId() + "/attribute", {
+        attributeId: $attr.prop("attribute-id"),
+        type: $attr.prop("attribute-type"),
+        name: $attr.prop("attribute-name"),
+        value: $attr.val()
+    });
+
+    infoService.showMessage("Attribute has been saved.");
+});
+
 $(document).ready(() => {
     $noteTitle.on('input', () => {
         noteChanged();

src/public/stylesheets/style.css

@@ -424,4 +424,9 @@ html.theme-dark body {
 
 .ck.ck-block-toolbar-button {
     transform: translateX(10px);
+}
+
+#note-detail-promoted-attributes {
+    width: 50%;
+    margin: auto;
 }

src/routes/api/attributes.js

@@ -54,6 +54,31 @@ async function getEffectiveNoteAttributes(req) {
     return filteredAttributes;
 }
 
+async function updateNoteAttribute(req) {
+    const noteId = req.params.noteId;
+    const body = req.body;
+
+    let attribute;
+
+    if (body.attributeId) {
+        attribute = await repository.getAttribute(body.attributeId);
+    }
+    else {
+        attribute = new Attribute();
+        attribute.noteId = noteId;
+        attribute.name = body.name;
+        attribute.type = body.type;
+    }
+
+    if (attribute.noteId !== noteId) {
+        throw new Error(`Attribute ${body.attributeId} does not belong to note ${noteId}`);
+    }
+
+    attribute.value = body.value;
+
+    await attribute.save();
+}
+
 async function updateNoteAttributes(req) {
     const noteId = req.params.noteId;
     const attributes = req.body;
@@ -104,6 +129,7 @@ async function getValuesForAttribute(req) {
 
 module.exports = {
     updateNoteAttributes,
+    updateNoteAttribute,
     getAttributeNames,
     getValuesForAttribute,
     getEffectiveNoteAttributes

src/routes/routes.js

@@ -136,6 +136,7 @@ function register(app) {
 
     apiRoute(GET, '/api/notes/:noteId/attributes', attributesRoute.getEffectiveNoteAttributes);
     apiRoute(PUT, '/api/notes/:noteId/attributes', attributesRoute.updateNoteAttributes);
+    apiRoute(PUT, '/api/notes/:noteId/attribute', attributesRoute.updateNoteAttribute);
     apiRoute(GET, '/api/attributes/names', attributesRoute.getAttributeNames);
     apiRoute(GET, '/api/attributes/values/:attributeName', attributesRoute.getValuesForAttribute);
 

src/views/index.ejs

@@ -183,7 +183,7 @@
       <div id="note-detail-wrapper">
         <div id="note-detail-script-area"></div>
 
-        <div id="note-detail-promoted-attributes"></div>
+        <table id="note-detail-promoted-attributes"></table>
 
         <div id="note-detail-component-wrapper">
           <div id="note-detail-text" class="note-detail-component" tabindex="2"></div>