From 801921867d2ec4cfcaaf3139676ada4211a5aa1e Mon Sep 17 00:00:00 2001 From: jos Date: Sun, 31 Mar 2019 19:51:12 +0200 Subject: [PATCH] Improve detection of value type in transform modal --- HISTORY.md | 1 + src/css/contextmenu.css | 10 ++++++---- src/js/showTransformModal.js | 20 +++++++++++++------- src/js/util.js | 17 +++++++++++++++++ test/test_large_array.html | 1 + test/util.test.js | 25 ++++++++++++++++++++++++- 6 files changed, 62 insertions(+), 12 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index 51091b1..4624e25 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -6,6 +6,7 @@ https://github.com/josdejong/jsoneditor ## not yet released, version 5.32.2 - Fixed #416: Clipped action menu for append nodes. +- Improve detection of value type in transform modal. - Styling improvements in the transform modal. diff --git a/src/css/contextmenu.css b/src/css/contextmenu.css index 1898fce..7d8e16c 100644 --- a/src/css/contextmenu.css +++ b/src/css/contextmenu.css @@ -271,7 +271,7 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon { } .jsoneditor-modal table td { - padding: 5px 0; + padding: 3px 0; } .jsoneditor-modal p:first-child { @@ -451,7 +451,7 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon { .jsoneditor-modal .jsoneditor-jmespath-label { font-weight: bold; color: dodgerblue; - margin-top: 10px; + margin-top: 20px; margin-bottom: 5px; } @@ -468,6 +468,8 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon { position: relative; display: inline-block; width: 100%; + padding-top: 2px; + padding-bottom: 2px; } .jsoneditor-modal .jsoneditor-inline:not(:last-child) { @@ -480,13 +482,13 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon { } .jsoneditor-modal .jsoneditor-jmespath-filter-field { - width: 170px; + width: 180px; } .jsoneditor-modal .jsoneditor-jmespath-filter-relation { width: 100px; } .jsoneditor-modal .jsoneditor-jmespath-filter-value { - min-width: 100px; + min-width: 180px; flex: 1; } diff --git a/src/js/showTransformModal.js b/src/js/showTransformModal.js index ff20813..2c8b0e6 100644 --- a/src/js/showTransformModal.js +++ b/src/js/showTransformModal.js @@ -2,7 +2,8 @@ var jmespath = require('jmespath'); var picoModal = require('picomodal'); var Selectr = require('./assets/selectr/selectr'); var translate = require('./i18n').translate; -var debounce = require('./util').debounce; +var util = require('./util'); +var debounce = util.debounce; var MAX_PREVIEW_LINES = 100; @@ -183,12 +184,17 @@ function showTransformModal (node, container) { function generateQueryFromWizard () { if (filterField.value && filterRelation.value && filterValue.value) { var field1 = filterField.value; + var examplePath = ['0'].concat(util.parsePath('.' + field1)) + var exampleValue = util.get(value, examplePath) // TODO: move _stringCast into a static util function - var value1 = JSON.stringify(node._stringCast(filterValue.value)); + var value1 = typeof exampleValue === 'string' + ? filterValue.value + : node._stringCast(filterValue.value); + query.value = '[? ' + field1 + ' ' + filterRelation.value + ' ' + - '`' + value1 + '`' + + '`' + JSON.stringify(value1) + '`' + ']'; } else { @@ -209,8 +215,8 @@ function showTransformModal (node, container) { var values = []; for (var i=0; i < selectFields.options.length; i++) { if (selectFields.options[i].selected) { - var value = selectFields.options[i].value; - values.push(value); + var selectedValue = selectFields.options[i].value; + values.push(selectedValue); } } @@ -219,14 +225,14 @@ function showTransformModal (node, container) { } if (values.length === 1) { - query.value += '.' + value; + query.value += '.' + selectedValue; } else if (values.length > 1) { query.value += '.{' + values.map(function (value) { var parts = value.split('.'); var last = parts[parts.length - 1]; - return last + ': ' + value; + return last + ': ' + selectedValue; }).join(', ') + '}'; } diff --git a/src/js/util.js b/src/js/util.js index bc14c3f..a9442b8 100644 --- a/src/js/util.js +++ b/src/js/util.js @@ -1150,3 +1150,20 @@ exports.makeFieldTooltip = function (schema, locale) { return tooltip; } + +/** + * Get a nested property from an object. + * Returns undefined when the property does not exist. + * @param {Object} object + * @param {string[]} path + * @return {*} + */ +exports.get = function (object, path) { + var value = object + + for (var i = 0; i < path.length && value !== undefined && value !== null; i++) { + value = value[path[i]] + } + + return value; +} diff --git a/test/test_large_array.html b/test/test_large_array.html index 86f583c..3219a77 100644 --- a/test/test_large_array.html +++ b/test/test_large_array.html @@ -66,6 +66,7 @@ json.numbers.push(i); json.array.push({ name: 'Item ' + i, + id: String(i), index: i, time: new Date().toISOString(), location: { diff --git a/test/util.test.js b/test/util.test.js index 4a32737..c309491 100644 --- a/test/util.test.js +++ b/test/util.test.js @@ -158,7 +158,30 @@ describe('util', function () { assert.equal(util.getIndexForPosition(el, -2, -2), -1); }); - }) + }); + + describe('get', function () { + it('should get a nested property from an object', function () { + var obj = { + a: { + b: 2 + }, + c: 3, + d: null, + e: undefined + } + + assert.strictEqual(util.get(obj, ['a', 'b']), 2); + assert.strictEqual(util.get(obj, ['c']), 3); + assert.deepStrictEqual(util.get(obj, ['a']), { b: 2}); + assert.strictEqual(util.get(obj, ['a', 'foo']), undefined); + assert.strictEqual(util.get(obj, ['a', 'foo', 'bar']), undefined); + assert.strictEqual(util.get(obj, ['d']), null); + assert.strictEqual(util.get(obj, ['d', 'foo', 'bar']), null); + assert.strictEqual(util.get(obj, ['e']), undefined); + }) + }); + describe('makeFieldTooltip', function () { it('should return empty string when the schema is missing all relevant fields', function () { assert.strictEqual(util.makeFieldTooltip({}), '')