ui - edges are now editable

arangodb · KVS85 · Jun 30, 2020 · Jun 29, 2020 · Jun 29, 2020 · Jun 29, 2020
commit 70de971169e6c9b1cb5575492b1e16e70e3fdb1b
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/documentView.ejs b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/documentView.ejs
@@ -48,6 +48,19 @@
           </div>
         </div>
 
+        <div class="document-inner-info-container edge-edit-container">
+          <div id="edit-from" class="document-attribute">
+            <i class="fa fa-edit"/>
+            <i class="fa fa-check" style="display: non
8000
e"/>
+            <i class="fa fa-times" style="display: none"/>
+          </div>
+          <div id="edit-to" class="document-attribute">
+            <i class="fa fa-edit"/>
+            <i class="fa fa-check" style="display: none"/>
+            <i class="fa fa-times" style="display: none"/>
+          </div>
+        </div>
+
       </div>
 
     </div>

diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/views/documentView.js b/js/apps/system/_admin/aardvark/APP/frontend/js/views/documentView.js
@@ -21,6 +21,8 @@
 
     customView: false,
     defaultMode: 'tree',
+    editFromActive: false,
+    editToActive: false,
 
     template: templateEngine.createTemplate('documentView.ejs'),
 
@@ -30,6 +32,12 @@
       'click #confirmDeleteDocument': 'deleteDocument',
       'click #document-from': 'navigateToDocument',
       'click #document-to': 'navigateToDocument',
+      'click #edit-from .fa-edit': 'editFrom',
+      'click #edit-from .fa-check': 'applyFrom',
+      'click #edit-from .fa-times': 'abortFrom',
+      'click #edit-to .fa-edit': 'editTo',
+      'click #edit-to .fa-check': 'applyTo',
+      'click #edit-to .fa-times': 'abortTo',
       'keydown #documentEditor .ace_editor': 'keyPress',
       'keyup .jsoneditor .search input': 'checkSearchBox',
       'click #addDocument': 'addDocument'
@@ -166,6 +174,15 @@
     },
 
     navigateToDocument: function (e) {
+      if ($(e.target).hasClass('unsaved')) {
+        // abort navigation - unsaved value found
+        if (this.editFromActive) {
+          arangoHelper.arangoWarning('Document', 'Unsaved _from value found. Save changes first.');
+        } else {
+          arangoHelper.arangoWarning('Document', 'Unsaved _to value found. Save changes first.');
+        }
+        return;
+      }
       var navigateTo = $(e.target).attr('documentLink');
       var test = (navigateTo.split('%').length - 1) % 3;
 
@@ -178,6 +195,117 @@
       }
     },
 
+    editFrom: function () {
+      this.editEdge('from');
+    },
+
+    applyFrom: function () {
+      this.applyEdge('from');
+    },
+
+    abortFrom: function () {
+      this.abortEdge('from');
+    },
+
+    editTo: function () {
+      this.editEdge('to');
+    },
+
+    applyTo: function () {
+      this.applyEdge('to');
+    },
+
+    abortTo: function () {
+      this.abortEdge('to');
+    },
+
+    setEditMode(type, active) {
+      if (type === 'from') {
+        this.editFromActive = active;
+      } else {
+        this.editToActive = active;
+      }
+    },
+
+    toggleEditIcons: function (type, showEdit) {
+      let id = '#edit-' + type;
+      if (showEdit) {
+        $(id + ' .fa-edit').show();
+        $(id + ' .fa-check').hide();
+        $(id + ' .fa-times').hide();
+      } else {
+        $(id + ' .fa-edit').hide();
+        $(id + ' .fa-check').show();
+        $(id + ' .fa-times').show();
+      }
+    },
+
+    editEdge: function (type) {
+      // type must be either "from" or "to" as string
+      this.setEditMode(type, true);
+
+      // hide edit icon and show action items
+      this.toggleEditIcons(type);
+      this.addEdgeEditInputBox(type);
+    },
+
+    addEdgeEditInputBox: function (type) {
+      var model = this.collection.first();
+      let edgeId;
+
+      if (type === 'from') {
+        edgeId = model.get('_from');
+      } else {
+        edgeId = model.get('_to');
+      }
+
+      // hide text & insert input
+      $('#document-' + type).hide();
+      $('#document-' + type).after(
+        `<input type="text" id="input-edit-${type}" value=${arangoHelper.escapeHtml(edgeId)} placeholder="${arangoHelper.escapeHtml(edgeId)}">`
+      );
+    },
+
+    applyEdge: function(type) {
+      var model = this.collection.first();
+      this.setEditMode(type, false);
+
+
+      let newValue = $(`#input-edit-${type}`).val();
+      let changed = false;
+      if (type === 'from') {
+        // if value got changed
+        if (newValue !== model.get('_from')) {
+          changed = true;
+        }
+      } else {
+        if (newValue !== model.get('_to')) {
+          changed = true;
+        }
+      }
+      if (changed) {
+        $('#document-' + type).html(arangoHelper.escapeHtml(newValue));
+        $('#document-' + type).addClass('unsaved');
+        this.enableSaveButton();
+      }
+
+      // toggle icons
+      this.toggleEditIcons(type, true);
+
+      // remove input
+      $(`#input-edit-${type}`).remove();
+      $('#document-' + type).show();
+    },
+
+    abortEdge: function(type) {
+      this.setEditMode(type, false);
+      this.toggleEditIcons(type, true);
+
+      // hide input and ignore prev. value
+      $(`#input-edit-${type}`).remove();
+      $('#document-' + type).show();
+    },
+
     fillInfo: function () {
       var mod = this.collection.first();
       var _id = mod.get('_id');
@@ -202,6 +330,7 @@
         $('#document-to').attr('documentLink', hrefTo);
       } else {
         $('.edge-info-container').hide();
+        $('.edge-edit-container').hide();
       }
     },
 
@@ -321,11 +450,29 @@
       model = JSON.stringify(model);
 
       if (this.type === 'edge' || this.type._from) {
-        var callbackE = function (error, data) {
+        var callbackE = function (error, data, navigate) {
           if (error) {
             arangoHelper.arangoError('Error', data.responseJSON.errorMessage);
           } else {
+            // here we need to do an additional error check as PUT API is returning 202 (PUT) with error inside - lol
+            if (data[0].error) {
+              arangoHelper.arangoError('Error', data[0].errorMessage);
+              return;
+            }
+
             this.successConfirmation();
+            var model = this.collection.first();
+            // update local model
+            var newFrom = data[0].new._from;
+            var newTo = data[0].new._to
+            model.set('_from', newFrom);
+            model.set('_to', newTo);
+            // remove unsaved classes
+            $('#document-from').removeClass('unsaved');
+            $('#document-to').removeClass('unsaved');
+            // also update DOM attr
+            $('#document-from').attr('documentlink', 'collection/' + arangoHelper.escapeHtml(newFrom));
+            $('#document-to').attr('documentlink', 'collection/' + arangoHelper.escapeHtml(newTo));
             this.disableSaveButton();
 
             if (self.customView) {
@@ -336,7 +483,9 @@
           }
         }.bind(this);
 
-        this.collection.saveEdge(this.colid, this.docid, $('#document-from').html(), $('#document-to').html(), model, callbackE);
+        let from = $('#document-from').html();
+        let to = $('#document-to').html();
+        this.collection.saveEdge(this.colid, this.docid, from, to, model, callbackE);
       } else {
         var callback = function (error, data) {
           if (error || (data[0] && data[0].error)) {

diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_documentView.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_documentView.scss
@@ -24,13 +24,57 @@
       margin-left: 10px;
       margin-top: 5px;
 
+      > .document-attribute {
+        margin-bottom: 5px;
+      }
+
       .document-attribute {
         @extend %clear-float;
         margin-right: 20px;
 
         div {
           float: left;
         }
+
+        input {
+          @extend %inputs;
+          margin: 0;
+          margin-top: -2px;
+          margin-bottom: -4px;
+          padding: 0;
+          width: auto;
+        }
+
+        .fa {
+          font-size: 16px;
+
+          &:hover {
+            cursor: pointer;
+          }
+        }
+
+        .fa-edit {
+          opacity: .7;
+          &:hover {
+            opaciy: 1;
+            color: $c-positive;
+          }
+        }
+
+        .fa-check {
+          color: $c-positive;
+          &:hover {
+            color: $c-positive-hover;
+          }
+        }
+
+        .fa-times {
+          color: $c-negative;
+          &:hover {
+            color: $c-negative-hover;
+          }
+        }
+
       }
     }
   }
@@ -58,6 +102,17 @@
   }
 }
 
+.document-link {
+  &.unsaved {
+    color: $c-warning;
+
+    &:hover {
+      cursor: default;
+      text-decoration: none;
+    }
+  }
+}
+
 .document-link:hover {
   cursor: pointer;
   text-decoration: underline;