split out attribute_editor widget, WIP

src/public/app/widgets/attribute_editor.js

@@ -45,13 +45,18 @@ const TPL = `
         border: 1px solid var(--main-border-color);
         border-radius: 2px;
     }
+    
+    .attribute-errors {
+        color: red;
+    }
     </style>
     
     <div class="attribute-list-editor" tabindex="200"></div>
 
     <div class="bx bx-save save-attributes-button" title="Save attributes <enter>, <tab>)"></div>
-
     <div class="bx bx-plus add-new-attribute-button" title="Add a new attribute"></div>
+    
+    <div class="attribute-errors" style="display: none;"></div>
 </div>
 `;
 
@@ -171,6 +176,12 @@ const editorConfig = {
 };
 
 export default class AttributeEditorWidget extends TabAwareWidget {
+    constructor(attributeDetailWidget) {
+        super();
+
+        this.attributeDetailWidget = attributeDetailWidget;
+    }
+
     doRender() {
         this.$widget = $(TPL);
         this.$editor = this.$widget.find('.attribute-list-editor');
@@ -190,7 +201,15 @@ export default class AttributeEditorWidget extends TabAwareWidget {
         });
 
         this.$addNewAttributeButton = this.$widget.find('.add-new-attribute-button');
-        this.$addNewAttributeButton.on('click', e => {
+        this.$addNewAttributeButton.on('click', e => this.addNewAttribute(e));
+
+        this.$saveAttributesButton = this.$widget.find('.save-attributes-button');
+        this.$saveAttributesButton.on('click', () => this.save());
+
+        this.$errors = this.$widget.find('.attribute-errors');
+    }
+
+    addNewAttribute(e) {
         contextMenuService.show({
             x: e.pageX,
             y: e.pageY,
@@ -202,7 +221,11 @@ export default class AttributeEditorWidget extends TabAwareWidget {
                 {title: "Add new label definition", command: "addNewLabelDefinition", uiIcon: "empty"},
                 {title: "Add new relation definition", command: "addNewRelationDefinition", uiIcon: "empty"},
             ],
-                selectMenuItemHandler: async ({command}) => {
+            selectMenuItemHandler: ({command}) => this.handleAddNewAttributeCommand(command)
+        });
+    }
+
+    async handleAddNewAttributeCommand(command) {
         const attrs = this.parseAttributes();
 
         if (!attrs) {
@@ -214,20 +237,16 @@ export default class AttributeEditorWidget extends TabAwareWidget {
         if (command === 'addNewLabel') {
             type = 'label';
             name = 'fillName';
-                    }
-                    else if (command === 'addNewRelation') {
+        } else if (command === 'addNewRelation') {
             type = 'relation';
             name = 'fillName';
-                    }
-                    else if (command === 'addNewLabelDefinition') {
+        } else if (command === 'addNewLabelDefinition') {
             type = 'label';
             name = 'label:fillName';
-                    }
-                    else if (command === 'addNewRelationDefinition') {
+        } else if (command === 'addNewRelationDefinition') {
             type = 'label';
             name = 'relation:fillName';
-                    }
-                    else {
+        } else {
             return;
         }
 
@@ -255,11 +274,10 @@ export default class AttributeEditorWidget extends TabAwareWidget {
             });
         }, 100);
     }
-            });
-        });
-    }
 
     async save() {
+        this.$saveAttributesButton.fadeOut();
+
         const attributes = this.parseAttributes();
 
         if (attributes) {
@@ -274,11 +292,7 @@ export default class AttributeEditorWidget extends TabAwareWidget {
             return attrs;
         }
         catch (e) {
-            this.$widget.attr("title", e.message);
-            this.$widget.addClass("error");
-
-            this.$ownedExpander.addClass("error");
-            this.$ownedExpanderText.text(e.message);
+            this.$errors.show().text(e.message);
         }
     }
 
@@ -300,7 +314,16 @@ export default class AttributeEditorWidget extends TabAwareWidget {
     }
 
     dataChanged() {
-        console.log("Data changed");
+        if (this.lastSavedContent === this.textEditor.getData()) {
+            this.$saveAttributesButton.fadeOut();
+        }
+        else {
+            this.$saveAttributesButton.fadeIn();
+        }
+
+        if (this.$errors.is(":visible")) {
+            this.$errors.slideUp();
+        }
     }
 
     async handleEditorClick(e) {
@@ -309,7 +332,15 @@ export default class AttributeEditorWidget extends TabAwareWidget {
         if (pos && pos.textNode && pos.textNode.data) {
             const clickIndex = this.getClickIndex(pos);
 
-            const parsedAttrs = attributesParser.lexAndParse(this.textEditor.getData(), true);
+            let parsedAttrs;
+
+            try {
+                parsedAttrs = attributesParser.lexAndParse(this.textEditor.getData(), true);
+            }
+            catch (e) {
+                // the input is incorrect because user messed up with it and now needs to fix it manually
+                return null;
+            }
 
             let matchedAttr = null;
 
@@ -370,7 +401,7 @@ export default class AttributeEditorWidget extends TabAwareWidget {
         await this.renderOwnedAttributes(note.getOwnedAttributes());
     }
 
-    async renderOwnedAttributes(ownedAttributes) {
+    async renderOwnedAttributes(ownedAttributes, ) {
         const $attributesContainer = $("<div>");
 
         for (const attribute of ownedAttributes) {
@@ -378,6 +409,10 @@ export default class AttributeEditorWidget extends TabAwareWidget {
         }
 
         this.textEditor.setData($attributesContainer.html());
+
+        this.lastSavedContent = this.textEditor.getData();
+
+        this.$saveAttributesButton.fadeOut(0);
     }
 
     async focusOnAttributesEvent({tabId}) {
@@ -386,7 +421,7 @@ export default class AttributeEditorWidget extends TabAwareWidget {
         }
     }
 
-    updateAttributeListCommand({attributes}) {
+    updateAttributeList(attributes) {
         this.renderOwnedAttributes(attributes);
     }
 }

src/public/app/widgets/attribute_list.js

@@ -93,8 +93,8 @@ export default class AttributeListWidget extends TabAwareWidget {
     constructor() {
         super();
 
-        this.attributeEditorWidget = new AttributeEditorWidget().setParent(this);
         this.attributeDetailWidget = new AttributeDetailWidget().setParent(this);
+        this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget).setParent(this);
 
         this.child(this.attributeEditorWidget, this.attributeDetailWidget);
     }
@@ -183,4 +183,8 @@ export default class AttributeListWidget extends TabAwareWidget {
             attributeRenderer.renderAttribute(attribute, $span, false);
         }
     }
+
+    updateAttributeListCommand({attributes}) {
+        this.attributeEditorWidget.updateAttributeList(attributes);
+    }
 }

src/public/app/widgets/promoted_attributes.js

@@ -54,7 +54,7 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
                 const definitionType = definitionAttr.name.startsWith('label:') ? 'label' : 'relation';
                 const valueName = definitionAttr.name.substr(definitionType.length + 1);
 
-                let valueAttrs = attributes.filter(el => el.name === definitionAttr.name && el.type === definitionType);
+                let valueAttrs = attributes.filter(el => el.name === valueName && el.type === 'label');
 
                 if (valueAttrs.length === 0) {
                     valueAttrs.push({