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

sqlui 0.1.25 → 0.1.26

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: 20b037b445c287b8e9586a2f5820d4be597bb977db8a9412721790a5239a2f87
+  data.tar.gz: '08e5d525245186d568bd2deb86f4a5d25adc9a57d3729651ff74d6fe90e22451'
 SHA512:
-  metadata.gz: 76fc95eeec60f207e1505b4d71d10e6bf329c94ddc42ca15edef83853ca6f74407b275f168f1a721c9b0d50507228dcb5aae5c4f2cb2fa54e46f1dbef79d05cb
-  data.tar.gz: 06140f3797fb34a7fa869c484ef002e5310ceceeea87e57f0c6dd984f13c2a6d75c9dddab253bf64545fa9cd58a93cac41e476b8cb8ee9c7fe86f47b38af39a0
+  metadata.gz: 631086186d72bfe55f633e88a1017e911d53c4185b9139da4ebf0d462ec9fb48fbf639154fc014453285835c504b1ce8a18f20e9de9c78239a95566b2cde3177
+  data.tar.gz: 24cd3591e88d28785765b6add934a19458c19920cdd77c02f31f7356ca6cefdf4971e45df560c1e451a50ee4192c1ca4d9f8cae227cfe7daa87463b82f7ada6f

data/.version CHANGED Viewed

	@@ -1 +1 @@
1	- 0.1.25
1	+ 0.1.26

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);
@@ -24199,21 +24206,48 @@
        setSavedStatus(`${saved.length} files`);
      }
      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 +24269,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 +24297,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 +24340,7 @@
      }
    }
-   function fetchSql (request, selection, callback) {
+   function fetchSql (sqlFetch, selection, callback) {
      fetch('query', {
        headers: {
          Accept: 'application/json',
@@ -24311,64 +24348,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 +24419,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 +24444,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 +24460,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 +24503,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 +24549,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 +24603,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.26
 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