RubyGems - sqlui - Versions diffs - 0.1.25 → 0.1.27 - Mend

sqlui 0.1.25 → 0.1.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 11963565427ad327b2fb3cf1eadb62f789b620c3b3de943f2a0b17f3be505356
-  data.tar.gz: 1be9eaac08e81afba77f4c1f5581a78f8e4a73d007d9e29f0ca238c956d46a6b
+  metadata.gz: 50a8e5f8fde6faea1c434919376eff89ec0a66390bfaa19c3b048871b477cdcb
+  data.tar.gz: f0bff25248a68088654c1971c876dd7032692e2e861d9653e838423381e610ab
 SHA512:
-  metadata.gz: 76fc95eeec60f207e1505b4d71d10e6bf329c94ddc42ca15edef83853ca6f74407b275f168f1a721c9b0d50507228dcb5aae5c4f2cb2fa54e46f1dbef79d05cb
-  data.tar.gz: 06140f3797fb34a7fa869c484ef002e5310ceceeea87e57f0c6dd984f13c2a6d75c9dddab253bf64545fa9cd58a93cac41e476b8cb8ee9c7fe86f47b38af39a0
+  metadata.gz: b5f5cf0a9aef2e58418fd84bd573930b0e4cdf4d62959b1ea17b0ed1a29a1a0a9fa1b9f95c1e3df6c1447e5b942b5fcb3b7648ba36dc2cacae06d1c5e9ddb547
+  data.tar.gz: dd640abdff43a2ebe422b5e01c6656c8ebe38c13e16bd923f0276afdd2cde335d0fd0bd63c819327eaeef1797828c4c4f193b257b29e71b8fa88cd8ecfadaa33

data/.version CHANGED Viewed

	@@ -1 +1 @@
1	- 0.1.25
1	+ 0.1.27

data/app/views/databases.erb CHANGED Viewed

@@ -1,6 +1,6 @@
 <html lang="en">
 <head>
-  <title>Databases</title>
+  <title><%= config.name %> Databases</title>
   <style>
       body {
@@ -71,30 +71,13 @@
       .database {
           margin: 0;
           padding: 10px;
-          cursor: pointer;
           border-bottom: 1px solid #eeeeee;
       }
       .database:last-child {
           border-bottom: none;
       }
-      .database:hover {
-          background: #eee;
-      }
   </style>
-  <script>
-    function openDatabase(event, url) {
-      if (event.shiftKey) {
-        window.open(url, '_blank').focus()
-      } else if (event.metaKey) {
-        window.open(url).focus()
-      } else {
-        window.location = url
-      }
-    }
-  </script>
 </head>
 <body>
@@ -103,12 +86,12 @@
   <h1 class="server-name"><%= config.name %> Databases</h1>
 </div>
 <% config.database_configs.each do |database_config| %>
-  <div class="database" onclick="openDatabase(event, '<%= "#{database_config.url_path}/query" %>')">
+  <div class="database">
     <div class="name-and-links">
       <h2 class='name'><%= database_config.display_name %></h2>
-      <a class='query-link' href="<%= database_config.url_path %>/query" onclick="event.stopPropagation()">query</a>
-      <a class='saved-link' href="<%= database_config.url_path %>/saved" onclick="event.stopPropagation()">saved</a>
-      <a class='structure-link' href="<%= database_config.url_path %>/structure" onclick="event.stopPropagation()">structure</a>
+      <a class='query-link' href="<%= database_config.url_path %>/query">query</a>
+      <a class='saved-link' href="<%= database_config.url_path %>/saved">saved</a>
+      <a class='structure-link' href="<%= database_config.url_path %>/structure">structure</a>
     </div>
     <p class='description'>
       <%= database_config.description %>

data/client/resources/sqlui.css CHANGED Viewed

@@ -113,7 +113,11 @@ p {
     display: flex;
     border-top: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
-    justify-content: right;
+}
+.submit-fill {
+    display: flex;
+    flex: 1
 }
 .submit-button {
@@ -243,18 +247,30 @@ thead {
 }
 .saved-list-item {
-    cursor: pointer;
     border-bottom: 1px solid #eeeeee;
     margin: 0;
     padding: 10px;
 }
 .saved-list-item h2 {
-    margin: 0 0 5px;
+    margin: 0 10px 0 0;
 }
-.saved-box div:hover {
-    background: #eee;
+.saved-list-item p {
+    margin: 10px 0 0;
+}
+.name-and-links {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.name-and-links a {
+    margin-right: 5px;
+    color: darkblue;
+    font-size: 16px;
+    text-decoration: none;
 }
 .cm-editor.cm-focused {

data/client/resources/sqlui.html CHANGED Viewed

@@ -26,6 +26,8 @@
     </div>
     <div id="submit-box" class="submit-box tab-content-element graph-element query-element" style="display: none;">
+      <input id="cancel-button" class="submit-button" type="button" value="cancel"></input>
+      <div class="submit-fill"></div>
       <input id="submit-current-button" class="submit-button" type="button" value="run selection (ctrl-enter)"></input>
       <input id="submit-all-button" class="submit-button" type="button" value="run (ctrl-shift-enter)"></input>
     </div>

data/client/resources/sqlui.js CHANGED Viewed

@@ -23869,6 +23869,9 @@
      document.getElementById('submit-current-button').addEventListener('click', function (event) {
        submitCurrent(event.target, event);
      });
+     document.getElementById('cancel-button').addEventListener('click', function (event) {
+       clearResult();
+     });
      const fixedHeightEditor = EditorView.theme({
        '.cm-scroller': { height: '200px', overflow: 'auto', resize: 'vertical' }
@@ -24160,6 +24163,8 @@
      document.getElementById('submit-box').style.display = 'flex';
      document.getElementById('graph-box').style.display = 'flex';
      document.getElementById('graph-status').style.display = 'flex';
+     document.getElementById('fetch-sql-box').style.display = 'none';
+     document.getElementById('cancel-button').style.display = 'none';
      maybeFetchResult();
      const selection = getSelection();
@@ -24172,6 +24177,8 @@
      document.getElementById('submit-box').style.display = 'flex';
      document.getElementById('result-box').style.display = 'flex';
      document.getElementById('result-status').style.display = 'flex';
+     document.getElementById('fetch-sql-box').style.display = 'none';
+     document.getElementById('cancel-button').style.display = 'none';
      const selection = getSelection();
      focus();
      setSelection(selection);
@@ -24191,29 +24198,52 @@
      if (savedElement.children.length > 0) {
        return
      }
      const saved = window.metadata.saved;
-     if (Object.keys(saved).length === 1) {
-       setSavedStatus('1 file');
-     } else {
-       setSavedStatus(`${saved.length} files`);
-     }
+     const numFiles = Object.keys(saved).length;
+     setSavedStatus(`${numFiles} file${numFiles === 1 ? '' : 's'}`);
      Object.values(saved).forEach(file => {
-       const divElement = document.createElement('div');
-       divElement.classList.add('saved-list-item');
-       divElement.addEventListener('click', function (event) {
+       const viewUrl = new URL(window.location.origin + window.location.pathname);
+       setTabInUrl(viewUrl, 'query');
+       viewUrl.searchParams.set('file', file.filename);
+       const viewLinkElement = document.createElement('a');
+       viewLinkElement.classList.add('view-link');
+       viewLinkElement.innerText = 'view';
+       viewLinkElement.href = viewUrl.pathname + viewUrl.search;
+       viewLinkElement.addEventListener('click', function (event) {
          clearResult();
-         const url = new URL(window.location.origin + window.location.pathname);
-         setTabInUrl(url, 'query');
-         url.searchParams.set('file', file.filename);
-         route(event.target, event, url);
+         route(event.target, event, viewUrl);
        });
+       const runUrl = new URL(window.location.origin + window.location.pathname);
+       setTabInUrl(runUrl, 'query');
+       runUrl.searchParams.set('file', file.filename);
+       runUrl.searchParams.set('run', 'true');
+       const runLinkElement = document.createElement('a');
+       runLinkElement.classList.add('run-link');
+       runLinkElement.innerText = 'run';
+       runLinkElement.href = runUrl.pathname + runUrl.search;
+       runLinkElement.addEventListener('click', function (event) {
+         clearResult();
+         route(event.target, event, runUrl);
+       });
        const nameElement = document.createElement('h2');
        nameElement.innerText = file.filename;
-       divElement.appendChild(nameElement);
+       const nameAndLinksElement = document.createElement('div');
+       nameAndLinksElement.classList.add('name-and-links');
+       nameAndLinksElement.appendChild(nameElement);
+       nameAndLinksElement.appendChild(viewLinkElement);
+       nameAndLinksElement.appendChild(runLinkElement);
        const descriptionElement = document.createElement('p');
        descriptionElement.innerText = file.description;
+       const divElement = document.createElement('div');
+       divElement.classList.add('saved-list-item');
+       divElement.appendChild(nameAndLinksElement);
        divElement.appendChild(descriptionElement);
        savedElement.appendChild(divElement);
@@ -24235,7 +24265,7 @@
      let sql = getValue().trim();
      sql = sql === '' ? null : sql;
-     url.searchParams.delete('run');
+     url.searchParams.set('run', 'true');
      if (url.searchParams.has('file')) {
        if (window.metadata.saved[url.searchParams.get('file')].contents !== getValue()) {
@@ -24263,22 +24293,25 @@
        url.searchParams.delete('selection');
        url.searchParams.delete('sql');
        url.searchParams.delete('file');
+       url.searchParams.delete('run');
      }
      route(target, event, url);
    }
    function clearResult () {
-     clearGraphStatus();
-     clearResultStatus();
-     clearGraphBox();
-     clearResultBox();
-     const existingRequest = window.sqlFetch;
-     if (existingRequest?.state === 'pending') {
-       existingRequest.state = 'aborted';
-       existingRequest.fetchController.abort();
+     const existingFetch = window.sqlFetch;
+     if (existingFetch?.state === 'pending') {
+       existingFetch.state = 'aborted';
+       existingFetch.fetchController.abort();
      }
      window.sqlFetch = null;
+     clearGraphBox();
+     clearGraphStatus();
+     clearResultBox();
+     clearResultStatus();
    }
    function clearResultStatus () {
@@ -24303,7 +24336,7 @@
      }
    }
-   function fetchSql (request, selection, callback) {
+   function fetchSql (sqlFetch, selection, callback) {
      fetch('query', {
        headers: {
          Accept: 'application/json',
@@ -24311,64 +24344,65 @@
        },
        method: 'POST',
        body: JSON.stringify({
-         sql: request.sql,
+         sql: sqlFetch.sql,
          selection
        }),
-       signal: request.fetchController.signal
+       signal: sqlFetch.fetchController.signal
      })
        .then((response) => {
          const contentType = response.headers.get('content-type');
          if (contentType && contentType.indexOf('application/json') !== -1) {
            response.json().then((result) => {
              if (result?.query) {
-               request.state = 'success';
-               request.result = result;
+               sqlFetch.state = 'success';
+               sqlFetch.result = result;
              } else {
-               request.state = 'error';
+               sqlFetch.state = 'error';
                if (result?.error) {
-                 request.error_message = result.error;
-                 request.error_details = result.stacktrace;
+                 sqlFetch.error_message = result.error;
+                 sqlFetch.error_details = result.stacktrace;
                } else if (result) {
-                 request.error_message = 'failed to execute query';
-                 request.error_details = result.toString();
+                 sqlFetch.error_message = 'failed to execute query';
+                 sqlFetch.error_details = result.toString();
                } else {
-                 request.error_message = 'failed to execute query';
+                 sqlFetch.error_message = 'failed to execute query';
                }
              }
-             callback(request);
+             callback(sqlFetch);
            });
          } else {
            response.text().then((result) => {
-             request.state = 'error';
-             request.error_message = 'failed to execute query';
-             request.error_details = result;
-             callback(request);
+             sqlFetch.state = 'error';
+             sqlFetch.error_message = 'failed to execute query';
+             sqlFetch.error_details = result;
+             callback(sqlFetch);
            });
          }
        })
        .catch(function (error) {
-         if (request.state === 'pending') {
-           request.state = 'error';
-           request.error_message = 'failed to execute query';
-           request.error_details = error.stack;
-           callback(request);
+         if (sqlFetch.state === 'pending') {
+           sqlFetch.state = 'error';
+           sqlFetch.error_message = 'failed to execute query';
+           sqlFetch.error_details = error;
          }
+         callback(sqlFetch);
        });
    }
    function maybeFetchResult () {
-     const params = new URLSearchParams(window.location.search);
+     const url = new URL(window.location);
+     const params = url.searchParams;
      const sql = params.get('sql');
      const file = params.get('file');
      const selection = params.get('selection');
-     const run = !params.has('run') || !['0', 'false'].includes(params.get('run').toLowerCase());
+     const run = ['1', 'true'].includes(params.get('run')?.toLowerCase());
      if (params.has('file') && params.has('sql')) {
        // TODO: show an error.
        throw new Error('You can only specify a file or sql, not both.')
      }
-     const request = {
+     const sqlFetch = {
        fetchController: new AbortController(),
        state: 'pending',
        sql,
@@ -24381,10 +24415,10 @@
        if (!fileDetails) {
          throw new Error(`no such file: ${params.get('file')}`)
        }
-       request.file = file;
-       request.sql = fileDetails.contents;
+       sqlFetch.file = file;
+       sqlFetch.sql = fileDetails.contents;
      } else if (params.has('sql')) {
-       request.sql = sql;
+       sqlFetch.sql = sql;
      }
      const existingRequest = window.sqlFetch;
@@ -24406,11 +24440,13 @@
      clearResult();
      if (params.has('sql') || params.has('file')) {
-       setValue(request.sql);
+       setValue(sqlFetch.sql);
        if (run) {
-         window.sqlFetch = request;
-         displaySqlFetch(request);
-         fetchSql(request, selection, displaySqlFetch);
+         url.searchParams.delete('run');
+         window.history.replaceState({}, '', url);
+         window.sqlFetch = sqlFetch;
+         displaySqlFetch(sqlFetch);
+         fetchSql(sqlFetch, selection, displaySqlFetch);
        }
      }
      if (params.has('selection')) {
@@ -24420,17 +24456,22 @@
    }
    function displaySqlFetchInResultTab (fetch) {
-     const fetchSqlBoxElement = document.getElementById('fetch-sql-box');
-     const resultBoxElement = document.getElementById('result-box');
      if (fetch.state === 'pending') {
        clearResultBox();
-       resultBoxElement.style.display = 'none';
-       fetchSqlBoxElement.style.display = 'flex';
+       document.getElementById('cancel-button').style.display = 'flex';
+       document.getElementById('result-box').style.display = 'none';
+       document.getElementById('fetch-sql-box').style.display = 'flex';
        return
      }
-     resultBoxElement.style.display = 'flex';
-     fetchSqlBoxElement.style.display = 'none';
+     document.getElementById('cancel-button').style.display = 'none';
+     document.getElementById('fetch-sql-box').style.display = 'none';
+     document.getElementById('result-box').style.display = 'flex';
+     if (fetch.state === 'aborted') {
+       clearResultBox();
+       return
+     }
      if (fetch.state === 'error') {
        clearResultBox();
@@ -24458,7 +24499,7 @@
      theadElement.appendChild(headerElement);
      tableElement.appendChild(theadElement);
      tableElement.appendChild(tbodyElement);
-     resultBoxElement.appendChild(tableElement);
+     document.getElementById('result-box').appendChild(tableElement);
      fetch.result.columns.forEach(column => {
        const template = document.createElement('template');
@@ -24504,17 +24545,22 @@
    }
    function displaySqlFetchInGraphTab (fetch) {
-     const graphBoxElement = document.getElementById('graph-box');
-     const fetchSqlBoxElement = document.getElementById('fetch-sql-box');
      if (fetch.state === 'pending') {
        clearGraphBox();
-       graphBoxElement.style.display = 'none';
-       fetchSqlBoxElement.style.display = 'flex';
+       document.getElementById('cancel-button').style.display = 'flex';
+       document.getElementById('graph-box').style.display = 'none';
+       document.getElementById('fetch-sql-box').style.display = 'flex';
        return
      }
-     graphBoxElement.style.display = 'flex';
-     fetchSqlBoxElement.style.display = 'none';
+     document.getElementById('cancel-button').style.display = 'none';
+     document.getElementById('fetch-sql-box').style.display = 'none';
+     document.getElementById('graph-box').style.display = 'flex';
+     if (fetch.state === 'aborted') {
+       clearGraphBox();
+       return
+     }
      if (fetch.state === 'error') {
        clearGraphBox();
@@ -24553,7 +24599,7 @@
        dataTable.addRow(rowValues);
      });
-     const chart = new google.visualization.LineChart(graphBoxElement);
+     const chart = new google.visualization.LineChart(document.getElementById('graph-box'));
      const options = {
        hAxis: {
          title: fetch.result.columns[0]

metadata CHANGED Viewed

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sqlui
 version: !ruby/object:Gem::Version
-  version: 0.1.25
+  version: 0.1.27
 platform: ruby
 authors:
 - Nick Dower
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-30 00:00:00.000000000 Z
+date: 2022-10-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: mysql2