Skip to content

Commit

Permalink
adding download to the preview pane, cleaning up buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisclark
chrisclark committed Oct 20, 2024
1 parent 0b15493 commit 84999e0
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 39 deletions.
74 changes: 50 additions & 24 deletions explorer/src/js/explorer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,30 @@ function selectConnection() {
}
}

function downloadCSVFromTable() {
var table = document.getElementById("preview");
var rows = table.querySelectorAll("tr");
var csv = [];

rows.forEach(function (row) {
var cols = row.querySelectorAll("td, th");
var rowData = [];
cols.forEach(function (col) {
rowData.push(col.innerText);
});
csv.push(rowData.join(","));
});

var csvFile = new Blob([csv.join("\n")], { type: "text/csv" });
var downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(csvFile);
downloadLink.download = "preview.csv";

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}

export class ExplorerEditor {
constructor(queryId) {

Expand Down Expand Up @@ -100,7 +124,7 @@ export class ExplorerEditor {
this.bind();

if (cookie.get("schema_sidebar_open") === 'true') {
this.showSchema(true);
this.toggleSchema(true, true);
}
}

Expand Down Expand Up @@ -189,28 +213,29 @@ export class ExplorerEditor {
form.submit();
}

showSchema(noAutofocus) {
if (noAutofocus === true) {
$("#schema_frame").addClass("no-autofocus");
}
$("#query_area").removeClass("col").addClass("col-9");
var schema$ = $("#schema");
schema$.addClass("col-md-3");
schema$.show();
$("#show_schema_button").hide();
$("#hide_schema_button").show();
cookie.set("schema_sidebar_open", 'true');
return false;
}
toggleSchema(noAutofocus, doShow) {
var schema = document.getElementById("schema");
var queryArea = document.getElementById("query_area");
var toggleBtn = document.getElementById("toggle_schema_button");

hideSchema() {
$("#query_area").removeClass("col-9").addClass("col");
var schema$ = $("#schema");
schema$.removeClass("col-3");
schema$.hide();
$("#hide_schema_button").hide();
$("#show_schema_button").show();
cookie.set("schema_sidebar_open", 'false');
if (doShow || schema.style.display === "none" || schema.style.display === "") { // show
if (noAutofocus === true) {
schema.classList.add("no-autofocus");
}
queryArea.classList.remove("col");
queryArea.classList.add("col-9");
schema.classList.add("col-md-3");
schema.style.display = "block";
toggleBtn.innerHTML = "Hide Schema";
cookie.set("schema_sidebar_open", 'true');
} else { // hide
queryArea.classList.remove("col-9");
queryArea.classList.add("col");
schema.classList.remove("col-md-3");
schema.style.display = "none";
toggleBtn.innerHTML = "Show Schema";
cookie.set("schema_sidebar_open", 'false');
}
return false;
}

Expand All @@ -237,9 +262,9 @@ export class ExplorerEditor {
element.addEventListener('click', toggleFavorite);
});

document.getElementById('show_schema_button')?.addEventListener('click', this.showSchema.bind(this));
document.getElementById('hide_schema_button')?.addEventListener('click', this.hideSchema.bind(this));
document.getElementById('toggle_schema_button')?.addEventListener('click', this.toggleSchema.bind(this));

document.getElementById('preview-download')?.addEventListener('click', downloadCSVFromTable)

$("#format_button").click(function(e) {
e.preventDefault();
Expand All @@ -262,6 +287,7 @@ export class ExplorerEditor {
}.bind(this));

$("#save_only_button").click(function() {
console.log("here");
var params = this.getParams(this);
if(params) {
this.$form.attr('action', '../' + this.queryId + '/?show=0&params=' + this.serializeParams(params));
Expand Down
6 changes: 1 addition & 5 deletions explorer/templates/explorer/play.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,9 @@ <h2>{% translate "Playground" %}</h2>
class="btn btn-outline-primary">{% translate 'Save As New' %}</button>
{% export_buttons query %}

<button type="button" class="btn btn-outline-primary" id="show_schema_button">
<button type="button" class="btn btn-outline-primary" id="toggle_schema_button">
{% translate "Show Schema" %}
</button>
<button type="button" class="btn btn-outline-primary" id="hide_schema_button"
style="display: none;">
{% translate "Hide Schema" %}
</button>
</div>
</div>
<input type="hidden" value="{% translate 'Playground Query' %}" name="title" />
Expand Down
1 change: 1 addition & 0 deletions explorer/templates/explorer/preview_pane.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
title="Fullscreen results">
<i class="bi-arrows-angle-expand"></i>
</a>
<i id="preview-download" class="bi-download ms-1" title="Download table as csv"></i>
</div>
</div>
</div>
Expand Down
30 changes: 20 additions & 10 deletions explorer/templates/explorer/query.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,19 +111,29 @@ <h2>
{% endif %}
<div class="btn-group" role="group">
{% if can_change %}
<button id="save_button" type="submit" class="btn btn-primary">
{% translate "Save & Run" %}
</button>
<button class="btn btn-outline-primary" id="save_only_button">
{% translate "Save Only" %}
</button>
<div class="btn-group" role="group">
<button id="save_button"
type="submit"
class="btn btn-primary">
{% translate 'Save & Run' %}
</button>
<button type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>
<button type="submit" class="dropdown-item" id="save_only_button">
{% translate 'Save Only' %}
</button>
</li>
</ul>
</div>
{% export_buttons query %}
<button type="button" class="btn btn-outline-primary" id="show_schema_button">
<button type="button" class="btn btn-outline-primary" id="toggle_schema_button">
{% translate "Show Schema" %}
</button>
<button type="button" class="btn btn-outline-primary" id="hide_schema_button" style="display: none;">
{% translate "Hide Schema" %}
</button>
{% else %}
<button id="refresh_button" type="button" class="btn btn-outline-primary">{% translate "Refresh" %}</button>
{% export_buttons query %}
Expand Down

0 comments on commit 84999e0

Please sign in to comment.