datopian · sagargg · Sep 5, 2022 · Sep 5, 2022 · Sep 14, 2022 · Sep 14, 2022
diff --git a/dist/DatastoreSearchSql.js b/dist/DatastoreSearchSql.js
@@ -7,17 +7,39 @@ exports.default = void 0;
 
 require("./i18n/i18n");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _formik = require("formik");
 
 var _reactDatePicker = _interopRequireDefault(require("react-date-picker"));
 
 var _reactI18next = require("react-i18next");
 
+var _QueryBuilder = _interopRequireDefault(require("./QueryBuilder"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function DatastoreSearchSql(props) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showQueryBuilder = _useState2[0],
+      setShowQueryBuilder = _useState2[1];
+
+  var _useState3 = (0, _react.useState)("SELECT * FROM  \"".concat(props.resource.id, "\" ORDER BY \"_id\" ASC LIMIT 100")),
+      _useState4 = _slicedToArray(_useState3, 2),
+      query = _useState4[0],
+      setQuery = _useState4[1];
+
   var resource = JSON.parse(JSON.stringify(props.resource));
   var dateFields = resource.schema.fields.filter(function (field) {
     return field.type && field.type.includes('date');
@@ -119,15 +141,21 @@ function DatastoreSearchSql(props) {
     var datastoreUrl = encodeURI(props.apiUrl + "datastore_search_sql?sql=".concat(sqlQueryString)); // Trigger Redux action
 
     resource.api = datastoreUrl;
+    setQuery(sqlQueryString);
     props.action(resource);
   }
 
   function handleReset() {
     // Initial api url should be `datastore_search` without any options.
     resource.api = props.apiUrl + "datastore_search?resource_id=".concat(resource.id, "&limit=100");
+    setQuery("SELECT * FROM  \"".concat(props.resource.id, "\" ORDER BY \"_id\" ASC LIMIT 100"));
     props.action(resource);
   }
 
+  function QueryBuiderToggle() {
+    setShowQueryBuilder(!showQueryBuilder);
+  }
+
   return _react.default.createElement(_formik.Formik, {
     initialValues: {
       rules: resource.rules || [],
@@ -150,7 +178,7 @@ function DatastoreSearchSql(props) {
       var values = _ref.values,
           setFieldValue = _ref.setFieldValue,
           handleReset = _ref.handleReset;
-      return _react.default.createElement(_formik.Form, {
+      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_formik.Form, {
         className: "form-inline dq-main-container"
       }, _react.default.createElement("div", {
         className: "dq-heading"
@@ -159,13 +187,15 @@ function DatastoreSearchSql(props) {
       }, _react.default.createElement(_formik.Field, {
         name: "date.fieldName",
         component: "select",
-        className: "form-control"
+        className: "form-control",
+        "aria-label": "Choose date field"
       }, dateFields.map(function (field, index) {
         return _react.default.createElement("option", {
           value: field.name,
           key: "dateField".concat(index)
         }, field.title || field.name);
       })), _react.default.createElement(_reactDatePicker.default, {
+        calendarAriaLabel: "select start date from calendar",
         value: values.date.startDate,
         clearIcon: "X",
         nativeInputAriaLabel: "Start date input box",
@@ -175,11 +205,13 @@ function DatastoreSearchSql(props) {
         onChange: function onChange(val) {
           return setFieldValue("date.startDate", val);
         },
-        format: "yyyy-MM-dd"
+        format: "yyyy-MM-dd",
+        altInput: true
       }), _react.default.createElement("span", {
         className: "fa fa-long-arrow-right",
         "aria-hidden": "true"
       }), _react.default.createElement(_reactDatePicker.default, {
+        calendarAriaLabel: "select end date from calendar",
         value: values.date.endDate,
         clearIcon: "X",
         nativeInputAriaLabel: "End date input box",
@@ -280,9 +312,16 @@ function DatastoreSearchSql(props) {
             type: "submit",
             className: "btn btn-primary reset-button",
             onClick: handleReset
-          }, t('Reset'))));
+          }, t('Reset')), _react.default.createElement("button", {
+            type: "button",
+            className: "btn btn-default query-builder-button ".concat(showQueryBuilder ? 'active' : ''),
+            onClick: QueryBuiderToggle
+          }, t('Query Builder'))));
         }
-      }));
+      })), showQueryBuilder ? _react.default.createElement(_QueryBuilder.default, {
+        apiUrl: props.apiUrl,
+        queryString: query
+      }) : null);
     }
   });
 }

diff --git a/dist/QueryBuilder.js b/dist/QueryBuilder.js
@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("./i18n/i18n");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactTabsRedux = require("react-tabs-redux");
+
+var _reactHighlight = _interopRequireDefault(require("react-highlight"));
+
+var _reactI18next = require("react-i18next");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function QueryBuilder(props) {
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var queryString = props.queryString;
+
+  var _useState = (0, _react.useState)('Copy'),
+      _useState2 = _slicedToArray(_useState, 2),
+      copyButton = _useState2[0],
+      setcopyButton = _useState2[1];
+
+  var apiUrl = props.apiUrl;
+  var datastoreUrl = encodeURI(apiUrl + "datastore_search_sql?sql=".concat(queryString));
+  var snippetSets = [{
+    lang: 'cUrl',
+    format: 'bash',
+    snippet: "curl -L -s \"".concat(datastoreUrl, "\"")
+  }, {
+    lang: 'Python',
+    format: 'python',
+    snippet: "import requests\nfrom urllib import parse\n\nsql_query =  '''".concat(queryString, "'''\nparams = {'sql': sql_query}\n\ntry:\n    resposne = requests.get('").concat(apiUrl, "datastore_search_sql', params = parse.urlencode(params))\n    data = resposne.json()[\"result\"]\n    print(data) # Printing data\nexcept requests.exceptions.RequestException as e:\n    print(e.response.text)")
+  }, {
+    lang: 'Javascript',
+    format: 'javascript',
+    snippet: "const sql_query = `".concat(queryString, "`\n\nfetch('").concat(apiUrl, "datastore_search_sql?sql=' + encodeURI(sql_query))\n  .then((response) => response.json())\n  .then((data) => {\n    console.log('Success:', data['result']);\n  })\n  .catch((error) => {\n    console.error('Error:', error);\n  });")
+  }, {
+    lang: 'R',
+    format: 'r',
+    snippet: "library(jsonlite)\n\nencoded_query <- '".concat(datastoreUrl, "'\nreturned  <- fromJSON(encoded_query)\n\ndf <- returned$result$records\nprint(df)")
+  }, {
+    lang: 'Pandas',
+    format: 'python',
+    snippet: "# Install pandas package if you don't have it already\n# pip install pandas\n\n# Get data and convert into dataframe\nimport pandas as pd\nimport requests\nfrom urllib import parse\n\nsql_query = '''".concat(queryString, "'''\nparams = {'sql': sql_query}\n\ntry:\n    resposne = requests.get('").concat(apiUrl, "datastore_search_sql', params = parse.urlencode(params))\n    data = resposne.json()[\"result\"]\n    df = pd.DataFrame(data[\"records\"])\n    print(df) # Dataframe\nexcept requests.exceptions.RequestException as e:\n    print(e.response.text)")
+  }];
+
+  function handleCopy(snippet) {
+    navigator.clipboard.writeText(snippet);
+    setcopyButton('Copied');
+  }
+
+  function onTabChange() {
+    setcopyButton('Copy');
+  }
+
+  return _react.default.createElement("div", {
+    className: "dq-querybuilder"
+  }, _react.default.createElement("h3", null, t('Integrate into your tools')), _react.default.createElement(_reactTabsRedux.Tabs, null, snippetSets.map(function (item, key) {
+    return _react.default.createElement(_reactTabsRedux.TabLink, {
+      onClick: onTabChange,
+      to: item.lang,
+      key: key,
+      className: "mr-4 tab-".concat(item.lang)
+    }, item.lang);
+  }), snippetSets.map(function (item, key) {
+    return _react.default.createElement(_reactTabsRedux.TabContent, {
+      key: key,
+      for: item.lang
+    }, _react.default.createElement("button", {
+      className: "snippet-copy",
+      style: {
+        float: 'right'
+      },
+      onClick: function onClick() {
+        return handleCopy(item.snippet);
+      }
+    }, copyButton), _react.default.createElement(_reactHighlight.default, {
+      language: item.format,
+      className: "language-".concat(item.format)
+    }, item.snippet));
+  })));
+}
+
+var _default = QueryBuilder;
+exports.default = _default;
diff --git a/package.json b/package.json
@@ -19,7 +19,9 @@
     "react": "^16.8.6",
     "react-date-picker": "^7.7.0",
     "react-dom": "^16.8.6",
-    "react-i18next": "^11.3.0"
+    "react-highlight": "^0.14.0",
+    "react-i18next": "^11.3.0",
+    "react-tabs-redux": "^4.0.0"
   },
   "babel": {
     "presets": [