8000 Feature 3.6/ui editable edges (#12041) · RtiWeb/arangodb@0ea012f · GitHub
[go: up one dir, main page]
Skip to content

Commit 0ea012f

Browse files
hkernbachKVS85
hkernbach
and
KVS85
authored
Feature 3.6/ui editable edges (arangodb#12041)
* ui - edges are now editable * changelog * missing semicolon * remove feature from the embedded doc editor in gv * Rebuild UI Co-authored-by: Vadim <vadim@arangodb.com>
1 parent ab0d32a commit 0ea012f

27 files changed

+255
-33
lines changed

‎CHANGELOG

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
v3.6.5 (XXXX-XX-XX)
22
-------------------
33

4+
* The `_from` and `_to` attributes of an edge document can now be edited from
5+
within the UI.
6+
47
* Disallow using V8 dependent functions in SEARCH statement.
58

69
* Fixed issue ES-609: "Transaction already in use" error when running

‎js/apps/system/_admin/aardvark/APP/frontend/js/arango/arango.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -661,6 +661,8 @@
661661

662662
// remove header
663663
$('.arangoFrame .headerBar').remove();
664+
// remove edge edit feature
665+
$('.edge-edit-container').remove();
664666
// append close button
665667
$('.arangoFrame .outerDiv').prepend('<i class="fa fa-times"></i>');
666668
// add close events

‎js/apps/system/_admin/aardvark/APP/frontend/js/templates/documentView.ejs

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,19 @@
4848
</div>
4949
</div>
5050

51+
<div class="document-inner-info-container edge-edit-container">
52+
<div id="edit-from" class="document-attribute">
53+
<i class="fa fa-edit"/>
54+
<i class="fa fa-check" style="display: none"/>
55+
<i class="fa fa-times" style="display: none"/>
56+
</div>
57+
<div id="edit-to" class="document-attribute">
58+
<i class="fa fa-edit"/>
59+
<i class="fa fa-check" style="display: none"/>
60+
<i class="fa fa-times" style="display: none"/>
61+
</div>
62+
</div>
63+
5164
</div>
5265

5366
</div>

‎js/apps/system/_admin/aardvark/APP/frontend/js/views/documentView.js

Lines changed: 151 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121

2222
customView: false,
2323
defaultMode: 'tree',
24+
editFromActive: false,
25+
editToActive: false,
2426

2527
template: templateEngine.createTemplate('documentView.ejs'),
2628

@@ -30,6 +32,12 @@
3032
'click #confirmDeleteDocument': 'deleteDocument',
3133
'click #document-from': 'navigateToDocument',
3234
'click #document-to': 'navigateToDocument',
35+
'click #edit-from .fa-edit': 'editFrom',
36+
'click #edit-from .fa-check': 'applyFrom',
37+
'click #edit-from .fa-times': 'abortFrom',
38+
'click #edit-to .fa-edit': 'editTo',
39+
'click #edit-to .fa-check': 'applyTo',
40+
'click #edit-to .fa-times': 'abortTo',
3341
'keydown #documentEditor .ace_editor': 'keyPress',
3442
'keyup .jsoneditor .search input': 'checkSearchBox',
3543
'click #addDocument': 'addDocument'
@@ -171,6 +179,15 @@
171179
},
172180

173181
navigateToDocument: function (e) {
182+
if ($(e.target).hasClass('unsaved')) {
183+
// abort navigation - unsaved value found
184+
if (this.editFromActive) {
185+
arangoHelper.arangoWarning('Document', 'Unsaved _from value found. Save changes first.');
186+
} else {
187+
arangoHelper.arangoWarning('Document', 'Unsaved _to value found. Save changes first.');
188+
}
189+
return;
190+
}
174191
var navigateTo = $(e.target).attr('documentLink');
175192
var test = (navigateTo.split('%').length - 1) % 3;
176193

@@ -183,6 +200,117 @@
183200
}
184201
},
185202

203+
editFrom: function () {
204+
this.editEdge('from');
205+
},
206+
207+
applyFrom: function () {
208+
this.applyEdge('from');
209+
},
210+
211+
abortFrom: function () {
212+
this.abortEdge('from');
213+
},
214+
215+
editTo: function () {
216+
this.editEdge('to');
217+
},
218+
219+
applyTo: function () {
220+
this.applyEdge('to');
221+
},
222+
223+
abortTo: function () {
224+
this.abortEdge('to');
225+
},
226+
227+
setEditMode(type, active) {
228+
if (type === 'from') {
229+
this.editFromActive = active;
230+
} else {
231+
this.editToActive = active;
232+
}
233+
},
234+
235+
toggleEditIcons: function (type, showEdit) {
236+
let id = '#edit-' + type;
237+
if (showEdit) {
238+
$(id + ' .fa-edit').show();
239+
$(id + ' .fa-check').hide();
240+
$(id + ' .fa-times').hide();
241+
} else {
242+
$(id + ' .fa-edit').hide();
243+
$(id + ' .fa-check').show();
244+
$(id + ' .fa-times').show();
245+
}
246+
},
247+
248+
editEdge: function (type) {
249+
// type must be either "from" or "to" as string
250+
this.setEditMode(type, true);
251+
252+
// hide edit icon and show action items
253+
this.toggleEditIcons(type);
254+
this.addEdgeEditInputBox(type);
255+
},
256+
257+
addEdgeEditInputBox: function (type) {
258+
var model = this.collection.first();
259+
let edgeId;
260+
261+
if (type === 'from') {
262+
edgeId = model.get('_from');
263+
} else {
264+
edgeId = model.get('_to');
265+
}
266+
267+
// hide text & insert input
268+
$('#document-' + type).hide();
269+
$('#document-' + type).after(
270+
`<input type="text" id="input-edit-${type}" value=${arangoHelper.escapeHtml(edgeId)} placeholder="${arangoHelper.escapeHtml(edgeId)}">`
271+
);
272+
},
273+
274+
applyEdge: function(type) {
275+
var model = this.collection.first();
276+
this.setEditMode(type, false);
277+
278+
279+
let newValue = $(`#input-edit-${type}`).val();
280+
let changed = false;
281+
if (type === 'from') {
282+
// if value got changed
283+
if (newValue !== model.get('_from')) {
284+
changed = true;
285+
}
286+
} else {
287+
if (newValue !== model.get('_to')) {
288+
changed = true;
289+
}
290+
}
291+
if (changed) {
292+
$('#document-' + type).html(arangoHelper.escapeHtml(newValue));
293+
$('#document-' + type).addClass('unsaved');
294+
this.enableSaveButton();
295+
}
296+
297+
// toggle icons
298+
this.toggleEditIcons(type, true);
299+
300+
// remove input
301+
$(`#input-edit-${type}`).remove();
302+
$('#document-' + type).show();
303+
},
304+
305+
abortEdge: function(type) {
306+
this.setEditMode(type, false);
307+
this.toggleEditIcons(type, true);
308+
309+
// hide input and ignore prev. value
310+
$(`#input-edit-${type}`).remove();
311+
$('#document-' + type).show();
312+
},
313+
186314
fillInfo: function () {
187315
var mod = this.collection.first();
188316
var _id = mod.get('_id');
@@ -207,6 +335,7 @@
207335
$('#document-to').attr('documentLink', hrefTo);
208336
} else {
209337
$('.edge-info-container').hide();
338+
$('.edge-edit-container').hide();
210339
}
211340
},
212341

@@ -326,11 +455,29 @@
326455
model = JSON.stringify(model);
327456

328457
if (this.type === 'edge' || this.type._from) {
329-
var callbackE = function (error, data) {
458+
var callbackE = function (error, data, navigate) {
330459
if (error) {
331460
arangoHelper.arangoError('Error', data.responseJSON.errorMessage);
332461
} else {
462+
// here we need to do an additional error check as PUT API is returning 202 (PUT) with error inside - lol
463+
if (data[0].error) {
464+
arangoHelper.arangoError('Error', data[0].errorMessage);
465+
return;
466+
}
467+
333468
this.successConfirmation();
469+
var model = this.collection.first();
470+
// update local model
471+
var newFrom = data[0].new._from;
472+
var newTo = data[0].new._to;
473+
model.set('_from', newFrom);
474+
model.set('_to', newTo);
475+
// remove unsaved classes
476+
$('#document-from').removeClass('unsaved');
477+
$('#document-to').removeClass('unsaved');
478+
// also update DOM attr
479+
$('#document-from').attr('documentlink', 'collection/' + arangoHelper.escapeHtml(newFrom));
480+
$('#document-to').attr('documentlink', 'collection/' + arangoHelper.escapeHtml(newTo));
334481
this.disableSaveButton();
335482

336483
if (self.customView) {
@@ -341,7 +488,9 @@
341488
}
342489
}.bind(this);
343490

344-
this.collection.saveEdge(this.colid, this.docid, $('#document-from').html(), $('#document-to').html(), model, callbackE);
491+
let from = $('#document-from').html();
492+
let to = $('#document-to').html();
493+
this.collection.saveEdge(this.colid, this.docid, from, to, model, callbackE);
345494
} else {
346495
var callback = function (error, data) {
347496
if (error || (data[0] && data[0].error)) {

‎js/apps/system/_admin/aardvark/APP/frontend/scss/_documentView.scss

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,57 @@
2424
margin-left: 10px;
2525
margin-top: 5px;
2626

27+
> .document-attribute {
28+
margin-bottom: 5px;
29+
}
30+
2731
.document-attribute {
2832
@extend %clear-float;
2933
margin-right: 20px;
3034

3135
div {
3236
float: left;
3337
}
38+
39+
input {
40+
@extend %inputs;
41+
margin: 0;
42+
margin-top: -2px;
43+
margin-bottom: -4px;
44+
padding: 0;
45+
width: auto;
46+
}
47+
48+
.fa {
49+
font-size: 16px;
50+
51+
&:hover {
52+
cursor: pointer;
53+
}
54+
}
55+
56+
.fa-edit {
57+
opacity: .7;
58+
&:hover {
59+
opaciy: 1;
60+
color: $c-positive;
61+
}
62+
}
63+
64+
.fa-check {
65+
color: $c-positive;
66+
&:hover {
67+
color: $c-positive-hover;
68+
}
69+
}
70+
71+
.fa-times {
72+
color: $c-negative;
73+
&:hover {
74+
color: $c-negative-hover;
75+
}
76+
}
77+
3478
}
3579
}
3680
}
@@ -58,6 +102,17 @@
58102
}
59103
}
60104

105+
.document-link {
106+
&.unsaved {
107+
color: $c-warning;
108+
109+
&:hover {
110+
cursor: default;
111+
text-decoration: none;
112+
}
113+
}
114+
}
115+
61116
.document-link:hover {
62117
cursor: pointer;
63118
text-decoration: underline;

‎js/apps/system/_admin/aardvark/APP/react/build/asset-manifest.json

Lines changed: 14 additions & 14 deletions
23
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"main.css": "static/css/main.95284be8.chunk.css",
3-
"main.js": "static/js/main.a87c346a.chunk.js",
4-
"main.js.map": "static/js/main.a87c346a.chunk.js.map",
2+
"main.css": "static/css/main.e699a508.chunk.css",
3+
"main.js": "static/js/main.d3961b86.chunk.js",
4+
"main.js.map": "static/js/main.d3961b86.chunk.js.map",
55
"static/css/1.dc3f06b6.chunk.css": "static/css/1.dc3f06b6.chunk.css",
66
"static/js/1.e21cd040.chunk.js": "static/js/1.e21cd040.chunk.js",
77
"static/js/1.e21cd040.chunk.js.map": "static/js/1.e21cd040.chunk.js.map",
@@ -17,13 +17,13 @@
1717
"static/media/comm_github.png": "static/media/comm_github.cda411c2.png",
1818
"static/media/comm_slack.png": "static/media/comm_slack.39440503.png",
1919
"static/media/style.css": "static/media/arangodb.90160575.eot",
20-
"static/css/main.95284be8.chunk.css.map": "static/css/main.95284be8.chunk.css.map",
20+
"static/css/main.e699a508.chunk.css.map": "static/css/main.e699a508.chunk.css.map",
2121
"static/css/1.dc3f06b6.chunk.css.map": "static/css/1.dc3f06b6.chunk.css.map",
2222
"index.html": "index.html",
23-
"precache-manifest.0705324431aa1abe7a4bdd504763a853.js": "precache-manifest.0705324431aa1abe7a4bdd504763a853.js",
+
"precache-manifest.b37dd52c5fe0ba8db8f99674b545445d.js": "precache-manifest.b37dd52c5fe0ba8db8f99674b545445d.js",
2424
"service-worker.js": "service-worker.js",
25-
"static/media/jsoneditor-icons.d961fdfa.svg.gz": "static/media/jsoneditor-icons.d961fdfa.svg.gz",
2625
"static/media/arangodb.90160575.eot.gz": "static/media/arangodb.90160575.eot.gz",
26+
"static/media/jsoneditor-icons.d961fdfa.svg.gz": "static/media/jsoneditor-icons.d961fdfa.svg.gz",
2727
"static/media/arangodb-edition-optimized.1a30ee99.svg.gz": "static/media/arangodb-edition-optimized.1a30ee99.svg.gz",
2828
"static/media/cpu.be6a1f63.svg.gz": "static/media/cpu.be6a1f63.svg.gz",
2929
"static/media/ram.75050f7e.svg.gz": "static/media/ram.75050f7e.svg.gz",
@@ -32,23 +32,23 @@
3232
"static/js/runtime~main.54148531.js.gz": "static/js/runtime~main.54148531.js.gz",
3333
"static/css/1.dc3f06b6.chunk.css.map.gz": "static/css/1.dc3f06b6.chunk.css.map.gz",
3434
"static/js/runtime~main.54148531.js.map.gz": "static/js/runtime~main.54148531.js.map.gz",
35+
"precache-manifest.b37dd52c5fe0ba8db8f99674b545445d.js.gz": "precache-manifest.b37dd52c5fe0ba8db8f99674b545445d.js.gz",
3536
"index.html.gz": "index.html.gz",
36-
"precache-manifest.0705324431aa1abe7a4bdd504763a853.js.gz": "precache-manifest.0705324431aa1abe7a4bdd504763a853.js.gz",
3737
"service-worker.js.gz": "service-worker.js.gz",
3838
"static/media/Roboto-300.634f53eb.ttf.gz": "static/media/Roboto-300.634f53eb.ttf.gz",
39-
"static/media/Roboto-regular.38861cba.ttf.gz": "static/media/Roboto-regular.38861cba.ttf.gz",
40-
"static/media/Roboto-regular.3d3a5358.svg.gz": "static/media/Roboto-regular.3d3a5358.svg.gz",
4139
"static/media/Roboto-500.88f29ea5.ttf.gz": "static/media/Roboto-500.88f29ea5.ttf.gz",
40+
"static/media/Roboto-regular.38861cba.ttf.gz": "static/media/Roboto-regular.38861cba.ttf.gz",
4241
"static/media/Roboto-700.ad97d029.ttf.gz": "static/media/Roboto-700.ad97d029.ttf.gz",
42+
"static/media/Roboto-regular.3d3a5358.svg.gz": "static/media/Roboto-regular.3d3a5358.svg.gz",
43+
"static/media/Roboto-300.1edaa6e5.svg.gz": "static/media/Roboto-300.1edaa6e5.svg.gz",
4344
"static/media/Roboto-500.f1d811cd.svg.gz": "static/media/Roboto-500.f1d811cd.svg.gz",
4445
"static/media/Roboto-700.7f57c4c0.svg.gz": "static/media/Roboto-700.7f57c4c0.svg.gz",
45-
"static/media/Roboto-300.1edaa6e5.svg.gz": "static/media/Roboto-300.1edaa6e5.svg.gz",
4646
"static/media/fontawesome-webfont.1dc35d25.ttf.gz": "static/media/fontawesome-webfont.1dc35d25.ttf.gz",
47-
"static/css/main.95284be8.chunk.css.gz": "static/css/main.95284be8.chunk.css.gz",
47+
"static/css/main.e699a508.chunk.css.gz": "static/css/main.e699a508.chunk.css.gz",
4848
"static/media/fontawesome-webfont.d7c63908.svg.gz": "static/media/fontawesome-webfont.d7c63908.svg.gz",
49-
"static/css/main.95284be8.chunk.css.map.gz": "static/css/main.95284be8.chunk.css.map.gz",
49+
"static/css/main.e699a508.chunk.css.map.gz": "static/css/main.e699a508.chunk.css.map.gz",
50+
"static/js/main.d3961b86.chunk.js.gz": "static/js/main.d3961b86.chunk.js.gz",
5051
"static/js/1.e21cd040.chunk.js.gz": "static/js/1.e21cd040.chunk.js.gz",
51-
"static/js/main.a87c346a.chunk.js.gz": "static/js/main.a87c346a.chunk.js.gz",
52-
"static/js/main.a87c346a.chunk.js.map.gz": "static/js/main.a87c346a.chunk.js.map.gz",
52+
"static/js/main.d3961b86.chunk.js.map.gz": "static/js/main.d3961b86.chunk.js.map.gz",
5353
"static/js/1.e21cd040.chunk.js.map.gz": "static/js/1.e21cd040.chunk.js.map.gz"
5454
}

0 commit comments

Comments
 (0)
0