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

sqlui 0.1.25 → 0.1.26

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