From 64dc522b271c9032ef2821f85e84a0c1074b86e7 Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Wed, 15 Jul 2020 00:09:37 +0200
Subject: [PATCH] infrastructure for editing attribute definitions

---
 src/public/app/widgets/attribute_detail.js | 81 ++++++++++++++++++++--
 1 file changed, 77 insertions(+), 4 deletions(-)

diff --git a/src/public/app/widgets/attribute_detail.js b/src/public/app/widgets/attribute_detail.js
index cf190f76e..0d3d4d2f1 100644
--- a/src/public/app/widgets/attribute_detail.js
+++ b/src/public/app/widgets/attribute_detail.js
@@ -46,7 +46,7 @@ const TPL = `
     </style>
 
     <div style="display: flex; justify-content: space-between;">
-        <h5>Label detail</h5>
+        <h5 class="attr-detail-title"></h5>
         
         <span class="bx bx-x close-attr-detail-button"></span>
     </div>
@@ -70,6 +70,39 @@ const TPL = `
                 </div>
             </td>
         </tr>
+        <tr class="attr-definition-promoted">
+            <th>Promoted:</th>
+            <td><input type="checkbox" class="attr-edit-inheritable form-control form-control-sm" /></td>
+        </tr>
+        <tr class="attr-definition-multiplicity">
+            <th>Multiplicity:</th>
+            <td>
+                <select class="form-control">
+                  <option>Single value</option>
+                  <option>Multi value</option>
+                </select>
+            </td>
+        </tr>
+        <tr class="attr-definition-label-type">
+            <th>Type:</th>
+            <td>
+                <select class="form-control">
+                  <option>Text</option>
+                  <option>Number</option>
+                  <option>Boolean</option>
+                  <option>Date</option>
+                  <option>URL</option>
+                </select>
+            </td>
+        </tr>
+        <tr class="attr-definition-inverse-relation">
+            <th>Inverse relation:</th>
+            <td>
+                <div class="input-group">
+                    <input type="text" class="form-control" />
+                </div>
+            </td>
+        </tr>
         <tr>
             <th>Inheritable:</th>
             <td><input type="checkbox" class="attr-edit-inheritable form-control form-control-sm" /></td>
@@ -87,13 +120,21 @@ const TPL = `
     </div>
 </div>`;
 
-
 const DISPLAYED_NOTES = 10;
 
+const ATTR_TITLES = {
+    "label": "Label detail",
+    "label-definition": "Label definition detail",
+    "relation": "Relation detail",
+    "relation-definition": "Relation definition detail"
+};
+
 export default class AttributeDetailWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
 
+        this.$title = this.$widget.find('.attr-detail-title');
+
         this.$relatedNotesContainer = this.$widget.find('.related-notes-container');
         this.$relatedNotesTitle = this.$relatedNotesContainer.find('.related-notes-tile');
         this.$relatedNotesList = this.$relatedNotesContainer.find('.related-notes-list');
@@ -106,6 +147,11 @@ export default class AttributeDetailWidget extends BasicWidget {
         this.$attrEditValue = this.$widget.find('.attr-edit-value');
         this.$attrEditValue.on('keyup', () => this.updateParent());
 
+        this.$attrDefinitionPromoted = this.$widget.find('.attr-definition-promoted');
+        this.$attrDefinitionMultiplicity = this.$widget.find('.attr-definition-multiplicity');
+        this.$attrDefinitionLabelType = this.$widget.find('.attr-definition-label-type');
+        this.$attrDefinitionInverseRelation = this.$widget.find('.attr-definition-inverse-relation');
+
         this.$attrTargetNoteRow = this.$widget.find('.attr-target-note-row');
         this.$attrEditTargetNote = this.$widget.find('.attr-edit-target-note');
 
@@ -145,6 +191,10 @@ export default class AttributeDetailWidget extends BasicWidget {
             return;
         }
 
+        const attrType = this.getAttrType(attribute);
+
+        this.$title.text(ATTR_TITLES[attrType]);
+
         this.allAttributes = allAttributes;
         this.attribute = attribute;
 
@@ -200,8 +250,13 @@ export default class AttributeDetailWidget extends BasicWidget {
             .val(attribute.name)
             .attr('readonly', () => !isOwned);
 
-        this.$attrValueRow.toggle(attribute.type === 'label');
-        this.$attrTargetNoteRow.toggle(attribute.type === 'relation');
+        this.$attrValueRow.toggle(attrType === 'label');
+        this.$attrTargetNoteRow.toggle(attrType === 'relation');
+
+        this.$attrDefinitionPromoted.toggle(['label-definition', 'relation-definition'].includes(attrType));
+        this.$attrDefinitionMultiplicity.toggle(['label-definition', 'relation-definition'].includes(attrType));
+        this.$attrDefinitionLabelType.toggle(attrType === 'label-definition');
+        this.$attrDefinitionInverseRelation.toggle(attrType === 'relation-definition');
 
         if (attribute.type === 'label') {
             this.$attrEditValue
@@ -227,6 +282,24 @@ export default class AttributeDetailWidget extends BasicWidget {
         this.$widget.css("top", y + 25);
     }
 
+    getAttrType(attribute) {
+        if (attribute.type === 'label') {
+            if (attribute.name.startsWith('label:')) {
+                return "label-definition";
+            } else if (attribute.name.startsWith('relation:')) {
+                return "relation-definition";
+            } else {
+                return "label";
+            }
+        }
+        else if (attribute.type === 'relation') {
+            return "relation";
+        }
+        else {
+            this.$title.text('');
+        }
+    }
+
     updateParent() {
         this.attribute.name = this.$attrEditName.val();
         this.attribute.value = this.$attrEditValue.val();