mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 18:18:53 +08:00
format
This commit is contained in:
lana-k
12
.eslintrc.js
12
.eslintrc.js
@@ -2,12 +2,9 @@ module.exports = {
|
|||||||
root: true,
|
root: true,
|
||||||
env: {
|
env: {
|
||||||
node: true,
|
node: true,
|
||||||
es2022: true,
|
es2022: true
|
||||||
},
|
},
|
||||||
extends: [
|
extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
|
||||||
'plugin:vue/essential',
|
|
||||||
'@vue/standard'
|
|
||||||
],
|
|
||||||
rules: {
|
rules: {
|
||||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
@@ -20,10 +17,7 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
overrides: [
|
overrides: [
|
||||||
{
|
{
|
||||||
files: [
|
files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/**/*.spec.{j,t}s?(x)'],
|
||||||
'**/__tests__/*.{j,t}s?(x)',
|
|
||||||
'**/tests/**/*.spec.{j,t}s?(x)'
|
|
||||||
],
|
|
||||||
env: {
|
env: {
|
||||||
mocha: true
|
mocha: true
|
||||||
}
|
}
|
||||||
|
|||||||
13
.github/workflows/config.grenrc.js
vendored
13
.github/workflows/config.grenrc.js
vendored
@@ -1,17 +1,14 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
dataSource: 'milestones',
|
dataSource: 'milestones',
|
||||||
ignoreIssuesWith: [
|
ignoreIssuesWith: ['wontfix', 'duplicate'],
|
||||||
'wontfix',
|
|
||||||
'duplicate'
|
|
||||||
],
|
|
||||||
milestoneMatch: 'v{{tag_name}}',
|
milestoneMatch: 'v{{tag_name}}',
|
||||||
template: {
|
template: {
|
||||||
issue: '- {{name}} [{{text}}]({{url}})',
|
issue: '- {{name}} [{{text}}]({{url}})',
|
||||||
changelogTitle: "",
|
changelogTitle: '',
|
||||||
release: "{{body}}",
|
release: '{{body}}'
|
||||||
},
|
},
|
||||||
groupBy: {
|
groupBy: {
|
||||||
'Enhancements': ["enhancement", "internal"],
|
Enhancements: ['enhancement', 'internal'],
|
||||||
'Bug fixes': ["bug"]
|
'Bug fixes': ['bug']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
4
.github/workflows/main.yml
vendored
4
.github/workflows/main.yml
vendored
@@ -40,6 +40,6 @@ jobs:
|
|||||||
- name: Create release
|
- name: Create release
|
||||||
uses: ncipollo/release-action@v1
|
uses: ncipollo/release-action@v1
|
||||||
with:
|
with:
|
||||||
artifacts: "dist.zip,dist_map.zip"
|
artifacts: 'dist.zip,dist_map.zip'
|
||||||
token: ${{ secrets.GITHUB_TOKEN }}
|
token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
bodyFile: "CHANGELOG.md"
|
bodyFile: 'CHANGELOG.md'
|
||||||
|
|||||||
7
.prettierrc
Normal file
7
.prettierrc
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"trailingComma": "none",
|
||||||
|
"tabWidth": 2,
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"arrowParens": "avoid"
|
||||||
|
}
|
||||||
@@ -5,9 +5,10 @@
|
|||||||
# sqliteviz
|
# sqliteviz
|
||||||
|
|
||||||
Sqliteviz is a single-page offline-first PWA for fully client-side visualisation
|
Sqliteviz is a single-page offline-first PWA for fully client-side visualisation
|
||||||
of SQLite databases, CSV, JSON or NDJSON files.
|
of SQLite databases, CSV, JSON or NDJSON files.
|
||||||
|
|
||||||
With sqliteviz you can:
|
With sqliteviz you can:
|
||||||
|
|
||||||
- run SQL queries against a SQLite database and create [Plotly][11] charts and pivot tables based on the result sets
|
- run SQL queries against a SQLite database and create [Plotly][11] charts and pivot tables based on the result sets
|
||||||
- import a CSV/JSON/NDJSON file into a SQLite database and visualize imported data
|
- import a CSV/JSON/NDJSON file into a SQLite database and visualize imported data
|
||||||
- export result set to CSV file
|
- export result set to CSV file
|
||||||
@@ -19,15 +20,19 @@ With sqliteviz you can:
|
|||||||
https://user-images.githubusercontent.com/24638357/128249848-f8fab0f5-9add-46e0-a9c1-dd5085a8623e.mp4
|
https://user-images.githubusercontent.com/24638357/128249848-f8fab0f5-9add-46e0-a9c1-dd5085a8623e.mp4
|
||||||
|
|
||||||
## Quickstart
|
## Quickstart
|
||||||
|
|
||||||
The latest release of sqliteviz is deployed on [sqliteviz.com/app][6].
|
The latest release of sqliteviz is deployed on [sqliteviz.com/app][6].
|
||||||
|
|
||||||
## Wiki
|
## Wiki
|
||||||
|
|
||||||
For user documentation, check out sqliteviz [documentation][7].
|
For user documentation, check out sqliteviz [documentation][7].
|
||||||
|
|
||||||
## Motivation
|
## Motivation
|
||||||
|
|
||||||
It's a kind of middleground between [Plotly Falcon][1] and [Redash][2].
|
It's a kind of middleground between [Plotly Falcon][1] and [Redash][2].
|
||||||
|
|
||||||
## Components
|
## Components
|
||||||
|
|
||||||
It is built on top of [react-chart-editor][3], [PivotTable.js][12], [sql.js][4] and [Vue-Codemirror][8] in [Vue.js][5]. CSV parsing is performed with [Papa Parse][9].
|
It is built on top of [react-chart-editor][3], [PivotTable.js][12], [sql.js][4] and [Vue-Codemirror][8] in [Vue.js][5]. CSV parsing is performed with [Papa Parse][9].
|
||||||
|
|
||||||
[1]: https://github.com/plotly/falcon
|
[1]: https://github.com/plotly/falcon
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
presets: [
|
presets: ['@vue/cli-plugin-babel/preset']
|
||||||
'@vue/cli-plugin-babel/preset'
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
40
index.html
40
index.html
@@ -1,11 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<link rel="icon" href="favicon.png">
|
<link rel="icon" href="favicon.png" />
|
||||||
<link rel="manifest" href="manifest.webmanifest">
|
<link rel="manifest" href="manifest.webmanifest" />
|
||||||
<title>sqliteviz</title>
|
<title>sqliteviz</title>
|
||||||
<style>
|
<style>
|
||||||
#sqliteviz-loading-wrapper {
|
#sqliteviz-loading-wrapper {
|
||||||
@@ -38,15 +38,18 @@
|
|||||||
|
|
||||||
#sqliteviz-loading-wrapper circle {
|
#sqliteviz-loading-wrapper circle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0; right: 0; top: 0; bottom: 0;
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke-width: 5px;
|
stroke-width: 5px;
|
||||||
stroke-linecap: round;
|
stroke-linecap: round;
|
||||||
stroke: #119DFF;
|
stroke: #119dff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sqliteviz-loading-wrapper circle.bg {
|
#sqliteviz-loading-wrapper circle.bg {
|
||||||
stroke: #C8D4E3;
|
stroke: #c8d4e3;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sqliteviz-loading-wrapper circle.front {
|
#sqliteviz-loading-wrapper circle.front {
|
||||||
@@ -74,24 +77,17 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong>
|
||||||
|
We're sorry but this app doesn't work properly without JavaScript
|
||||||
|
enabled. Please enable it to continue.
|
||||||
|
</strong>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div id="sqliteviz-loading-wrapper">
|
<div id="sqliteviz-loading-wrapper">
|
||||||
<div id="sqliteviz-loading-text">LOADING</div>
|
<div id="sqliteviz-loading-text">LOADING</div>
|
||||||
<svg height="170" width="170" viewBox="0 0 170 170">
|
<svg height="170" width="170" viewBox="0 0 170 170">
|
||||||
<circle
|
<circle class="bg" cx="85" cy="85" r="80" />
|
||||||
class="bg"
|
<circle class="front" cx="85" cy="85" r="80" />
|
||||||
cx="85"
|
|
||||||
cy="85"
|
|
||||||
r="80"
|
|
||||||
/>
|
|
||||||
<circle
|
|
||||||
class="front"
|
|
||||||
cx="85"
|
|
||||||
cy="85"
|
|
||||||
r="80"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
10
jsconfig.json
Normal file
10
jsconfig.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"include": ["src/**/*"],
|
||||||
|
"exclude": ["node_modules", "dist"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "./",
|
||||||
|
"paths": {
|
||||||
|
"@*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -4,7 +4,7 @@ module.exports = function (config) {
|
|||||||
config: {
|
config: {
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'vue': 'vue/dist/vue.esm-bundler.js'
|
vue: 'vue/dist/vue.esm-bundler.js'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
server: {
|
server: {
|
||||||
@@ -32,19 +32,19 @@ module.exports = function (config) {
|
|||||||
pattern: 'test.setup.js',
|
pattern: 'test.setup.js',
|
||||||
type: 'module',
|
type: 'module',
|
||||||
watched: false,
|
watched: false,
|
||||||
served: false,
|
served: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: 'tests/**/*.spec.js',
|
pattern: 'tests/**/*.spec.js',
|
||||||
type: 'module',
|
type: 'module',
|
||||||
watched: false,
|
watched: false,
|
||||||
served: false,
|
served: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: 'src/assets/styles/*.css',
|
pattern: 'src/assets/styles/*.css',
|
||||||
type: 'css',
|
type: 'css',
|
||||||
watched: false,
|
watched: false,
|
||||||
served: false,
|
served: false
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ a custom version of [sql.js][1]. It allows sqliteviz to have more recent
|
|||||||
version of SQLite build with a number of useful extensions.
|
version of SQLite build with a number of useful extensions.
|
||||||
|
|
||||||
`Makefile` from [sql.js][1] is rewritten as more comprehensible `configure.py`
|
`Makefile` from [sql.js][1] is rewritten as more comprehensible `configure.py`
|
||||||
and `build.py` Python scripts that run in `emscripten/emsdk` Docker container.
|
and `build.py` Python scripts that run in `emscripten/emsdk` Docker container.
|
||||||
|
|
||||||
## Extension
|
## Extension
|
||||||
|
|
||||||
|
|||||||
@@ -1,12 +1,15 @@
|
|||||||
module.exports = function (config) {
|
module.exports = function (config) {
|
||||||
const timeout = 15 * 60 * 1000
|
const timeout = 15 * 60 * 1000
|
||||||
config.set({
|
config.set({
|
||||||
|
|
||||||
frameworks: ['mocha'],
|
frameworks: ['mocha'],
|
||||||
|
|
||||||
files: [
|
files: [
|
||||||
'suite.js',
|
'suite.js',
|
||||||
{ pattern: 'node_modules/sql.js/dist/sql-wasm.wasm', served: true, included: false },
|
{
|
||||||
|
pattern: 'node_modules/sql.js/dist/sql-wasm.wasm',
|
||||||
|
served: true,
|
||||||
|
included: false
|
||||||
|
},
|
||||||
{ pattern: 'sample.csv', served: true, included: false }
|
{ pattern: 'sample.csv', served: true, included: false }
|
||||||
],
|
],
|
||||||
|
|
||||||
@@ -15,7 +18,10 @@ module.exports = function (config) {
|
|||||||
singleRun: true,
|
singleRun: true,
|
||||||
|
|
||||||
customLaunchers: {
|
customLaunchers: {
|
||||||
ChromiumHeadlessNoSandbox: { base: 'ChromiumHeadless', flags: ['--no-sandbox'] }
|
ChromiumHeadlessNoSandbox: {
|
||||||
|
base: 'ChromiumHeadless',
|
||||||
|
flags: ['--no-sandbox']
|
||||||
|
}
|
||||||
},
|
},
|
||||||
browsers: ['ChromiumHeadlessNoSandbox', 'FirefoxHeadless'],
|
browsers: ['ChromiumHeadlessNoSandbox', 'FirefoxHeadless'],
|
||||||
concurrency: 1,
|
concurrency: 1,
|
||||||
@@ -33,11 +39,11 @@ module.exports = function (config) {
|
|||||||
logLevel: config.LOG_INFO,
|
logLevel: config.LOG_INFO,
|
||||||
browserConsoleLogOptions: { terminal: true, level: config.LOG_INFO },
|
browserConsoleLogOptions: { terminal: true, level: config.LOG_INFO },
|
||||||
|
|
||||||
preprocessors: { 'suite.js': [ 'webpack' ] },
|
preprocessors: { 'suite.js': ['webpack'] },
|
||||||
webpack: {
|
webpack: {
|
||||||
mode: 'development',
|
mode: 'development',
|
||||||
module: {
|
module: {
|
||||||
noParse: [ __dirname + '/node_modules/benchmark/benchmark.js' ]
|
noParse: [__dirname + '/node_modules/benchmark/benchmark.js']
|
||||||
},
|
},
|
||||||
node: { fs: 'empty' }
|
node: { fs: 'empty' }
|
||||||
},
|
},
|
||||||
@@ -47,6 +53,5 @@ module.exports = function (config) {
|
|||||||
},
|
},
|
||||||
|
|
||||||
jsonToFileReporter: { outputPath: '.', fileName: 'suite-result.json' }
|
jsonToFileReporter: { outputPath: '.', fileName: 'suite-result.json' }
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
"name": "sqlite-webassembly-microbenchmark",
|
"name": "sqlite-webassembly-microbenchmark",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/core" : "^7.14.8",
|
"@babel/core": "^7.14.8",
|
||||||
"babel-loader": "^8.2.2",
|
"babel-loader": "^8.2.2",
|
||||||
"benchmark": "^2.1.4",
|
"benchmark": "^2.1.4",
|
||||||
"lodash": "^4.17.4",
|
"lodash": "^4.17.4",
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
"karma": "^6.3.4",
|
"karma": "^6.3.4",
|
||||||
"karma-chrome-launcher": "^3.1.0",
|
"karma-chrome-launcher": "^3.1.0",
|
||||||
"karma-firefox-launcher": "^2.1.1",
|
"karma-firefox-launcher": "^2.1.1",
|
||||||
"karma-json-to-file-reporter" : "^1.0.1",
|
"karma-json-to-file-reporter": "^1.0.1",
|
||||||
"karma-mocha": "^2.0.1",
|
"karma-mocha": "^2.0.1",
|
||||||
"karma-webpack": "^4.0.2",
|
"karma-webpack": "^4.0.2",
|
||||||
"webpack": "^4.46.0",
|
"webpack": "^4.46.0",
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import lodash from 'lodash'
|
|||||||
import Papa from 'papaparse'
|
import Papa from 'papaparse'
|
||||||
import useragent from 'ua-parser-js'
|
import useragent from 'ua-parser-js'
|
||||||
|
|
||||||
|
|
||||||
describe('SQLite build benchmark', function () {
|
describe('SQLite build benchmark', function () {
|
||||||
let parsedCsv
|
let parsedCsv
|
||||||
let sqlModule
|
let sqlModule
|
||||||
@@ -18,7 +17,7 @@ describe('SQLite build benchmark', function () {
|
|||||||
importToTable(selectDb, parsedCsv)
|
importToTable(selectDb, parsedCsv)
|
||||||
})
|
})
|
||||||
|
|
||||||
function benchmarkImport () {
|
function benchmarkImport() {
|
||||||
const db = new sqlModule.Database()
|
const db = new sqlModule.Database()
|
||||||
try {
|
try {
|
||||||
importToTable(db, parsedCsv)
|
importToTable(db, parsedCsv)
|
||||||
@@ -27,7 +26,7 @@ describe('SQLite build benchmark', function () {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function benchmarkSelect () {
|
function benchmarkSelect() {
|
||||||
const result = selectDb.exec(`
|
const result = selectDb.exec(`
|
||||||
SELECT county, AVG(avg_depth) avg_depth_c
|
SELECT county, AVG(avg_depth) avg_depth_c
|
||||||
FROM (
|
FROM (
|
||||||
@@ -50,11 +49,9 @@ describe('SQLite build benchmark', function () {
|
|||||||
suite.add('select', { initCount: 3, minSamples: 50, fn: benchmarkSelect })
|
suite.add('select', { initCount: 3, minSamples: 50, fn: benchmarkSelect })
|
||||||
await run(suite)
|
await run(suite)
|
||||||
})
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function importToTable(db, parsedCsv, chunkSize = 1024) {
|
||||||
function importToTable (db, parsedCsv, chunkSize = 1024) {
|
|
||||||
const columnListString = parsedCsv.meta.fields.join(', ')
|
const columnListString = parsedCsv.meta.fields.join(', ')
|
||||||
db.exec(`CREATE TABLE csv_import(${columnListString})`)
|
db.exec(`CREATE TABLE csv_import(${columnListString})`)
|
||||||
|
|
||||||
@@ -67,7 +64,6 @@ function importToTable (db, parsedCsv, chunkSize = 1024) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
class PromiseWrapper {
|
class PromiseWrapper {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.promise = new Promise((resolve, reject) => {
|
this.promise = new Promise((resolve, reject) => {
|
||||||
@@ -89,11 +85,11 @@ function parseCsv(url) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function chunkArray (arr, size) {
|
function chunkArray(arr, size) {
|
||||||
return arr.reduce(function (result, value, index) {
|
return arr.reduce(function (result, value, index) {
|
||||||
const chunkIndex = Math.floor(index / size)
|
const chunkIndex = Math.floor(index / size)
|
||||||
|
|
||||||
if(!(chunkIndex in result)) {
|
if (!(chunkIndex in result)) {
|
||||||
result[chunkIndex] = []
|
result[chunkIndex] = []
|
||||||
}
|
}
|
||||||
result[chunkIndex].push(value)
|
result[chunkIndex].push(value)
|
||||||
@@ -102,8 +98,7 @@ function chunkArray (arr, size) {
|
|||||||
}, [])
|
}, [])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function createSuite() {
|
||||||
function createSuite () {
|
|
||||||
// Combined workaround from:
|
// Combined workaround from:
|
||||||
// - https://github.com/bestiejs/benchmark.js/issues/106
|
// - https://github.com/bestiejs/benchmark.js/issues/106
|
||||||
// - https://github.com/bestiejs/benchmark.js/issues/237
|
// - https://github.com/bestiejs/benchmark.js/issues/237
|
||||||
@@ -117,24 +112,26 @@ function createSuite () {
|
|||||||
return new bm.Suite()
|
return new bm.Suite()
|
||||||
}
|
}
|
||||||
|
|
||||||
function run (suite) {
|
function run(suite) {
|
||||||
const suiteResult = new PromiseWrapper()
|
const suiteResult = new PromiseWrapper()
|
||||||
suite
|
suite
|
||||||
.on('cycle', function (event) {
|
.on('cycle', function (event) {
|
||||||
console.info(String(event.target))
|
console.info(String(event.target))
|
||||||
})
|
})
|
||||||
.on('complete', function () {
|
.on('complete', function () {
|
||||||
console.log(JSON.stringify({
|
console.log(
|
||||||
|
JSON.stringify({
|
||||||
browser: useragent(navigator.userAgent).browser,
|
browser: useragent(navigator.userAgent).browser,
|
||||||
result: this.filter('successful')
|
result: this.filter('successful')
|
||||||
}))
|
})
|
||||||
|
)
|
||||||
suiteResult.resolve()
|
suiteResult.resolve()
|
||||||
})
|
})
|
||||||
.on('error', function (event) {
|
.on('error', function (event) {
|
||||||
console.error('Benchmark failed', String(event.target))
|
console.error('Benchmark failed', String(event.target))
|
||||||
suiteResult.reject()
|
suiteResult.reject()
|
||||||
})
|
})
|
||||||
.run({async: true})
|
.run({ async: true })
|
||||||
|
|
||||||
return suiteResult.promise
|
return suiteResult.promise
|
||||||
}
|
}
|
||||||
|
|||||||
58
package-lock.json
generated
58
package-lock.json
generated
@@ -42,6 +42,7 @@
|
|||||||
"chai": "^4.1.2",
|
"chai": "^4.1.2",
|
||||||
"chai-as-promised": "^8.0.1",
|
"chai-as-promised": "^8.0.1",
|
||||||
"eslint": "^8.57.1",
|
"eslint": "^8.57.1",
|
||||||
|
"eslint-config-prettier": "^10.1.1",
|
||||||
"eslint-plugin-import": "^2.20.2",
|
"eslint-plugin-import": "^2.20.2",
|
||||||
"eslint-plugin-node": "^11.1.0",
|
"eslint-plugin-node": "^11.1.0",
|
||||||
"eslint-plugin-promise": "^4.2.1",
|
"eslint-plugin-promise": "^4.2.1",
|
||||||
@@ -56,6 +57,7 @@
|
|||||||
"karma-spec-reporter": "^0.0.36",
|
"karma-spec-reporter": "^0.0.36",
|
||||||
"karma-vite": "^1.0.5",
|
"karma-vite": "^1.0.5",
|
||||||
"mocha": "^5.2.0",
|
"mocha": "^5.2.0",
|
||||||
|
"prettier": "3.5.3",
|
||||||
"process": "^0.11.10",
|
"process": "^0.11.10",
|
||||||
"url-loader": "^4.1.1",
|
"url-loader": "^4.1.1",
|
||||||
"vite": "^5.4.14",
|
"vite": "^5.4.14",
|
||||||
@@ -3421,6 +3423,22 @@
|
|||||||
"url": "https://opencollective.com/postcss/"
|
"url": "https://opencollective.com/postcss/"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@vue/component-compiler-utils/node_modules/prettier": {
|
||||||
|
"version": "2.8.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
|
||||||
|
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"bin": {
|
||||||
|
"prettier": "bin-prettier.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@vue/component-compiler-utils/node_modules/yallist": {
|
"node_modules/@vue/component-compiler-utils/node_modules/yallist": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
|
||||||
@@ -7967,6 +7985,18 @@
|
|||||||
"url": "https://opencollective.com/eslint"
|
"url": "https://opencollective.com/eslint"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/eslint-config-prettier": {
|
||||||
|
"version": "10.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.1.tgz",
|
||||||
|
"integrity": "sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==",
|
||||||
|
"dev": true,
|
||||||
|
"bin": {
|
||||||
|
"eslint-config-prettier": "bin/cli.js"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"eslint": ">=7.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/eslint-import-resolver-custom-alias": {
|
"node_modules/eslint-import-resolver-custom-alias": {
|
||||||
"version": "1.3.2",
|
"version": "1.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/eslint-import-resolver-custom-alias/-/eslint-import-resolver-custom-alias-1.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/eslint-import-resolver-custom-alias/-/eslint-import-resolver-custom-alias-1.3.2.tgz",
|
||||||
@@ -14788,16 +14818,15 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/prettier": {
|
"node_modules/prettier": {
|
||||||
"version": "2.8.8",
|
"version": "3.5.3",
|
||||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
|
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
|
||||||
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
|
"integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"prettier": "bin-prettier.js"
|
"prettier": "bin/prettier.cjs"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=10.13.0"
|
"node": ">=14"
|
||||||
},
|
},
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||||
@@ -20029,6 +20058,23 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/vue-cli-plugin-ui-karma/node_modules/prettier": {
|
||||||
|
"version": "2.8.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
|
||||||
|
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"peer": true,
|
||||||
|
"bin": {
|
||||||
|
"prettier": "bin-prettier.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vue-cli-plugin-ui-karma/node_modules/read-pkg": {
|
"node_modules/vue-cli-plugin-ui-karma/node_modules/read-pkg": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"serve": "vite preview",
|
"serve": "vite preview",
|
||||||
"test": "karma start karma.conf.cjs",
|
"test": "karma start karma.conf.cjs",
|
||||||
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
|
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
|
||||||
|
"format": "prettier . --write"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"buffer": "^6.0.3",
|
"buffer": "^6.0.3",
|
||||||
@@ -45,6 +46,7 @@
|
|||||||
"chai": "^4.1.2",
|
"chai": "^4.1.2",
|
||||||
"chai-as-promised": "^8.0.1",
|
"chai-as-promised": "^8.0.1",
|
||||||
"eslint": "^8.57.1",
|
"eslint": "^8.57.1",
|
||||||
|
"eslint-config-prettier": "^10.1.1",
|
||||||
"eslint-plugin-import": "^2.20.2",
|
"eslint-plugin-import": "^2.20.2",
|
||||||
"eslint-plugin-node": "^11.1.0",
|
"eslint-plugin-node": "^11.1.0",
|
||||||
"eslint-plugin-promise": "^4.2.1",
|
"eslint-plugin-promise": "^4.2.1",
|
||||||
@@ -59,6 +61,7 @@
|
|||||||
"karma-spec-reporter": "^0.0.36",
|
"karma-spec-reporter": "^0.0.36",
|
||||||
"karma-vite": "^1.0.5",
|
"karma-vite": "^1.0.5",
|
||||||
"mocha": "^5.2.0",
|
"mocha": "^5.2.0",
|
||||||
|
"prettier": "3.5.3",
|
||||||
"process": "^0.11.10",
|
"process": "^0.11.10",
|
||||||
"url-loader": "^4.1.1",
|
"url-loader": "^4.1.1",
|
||||||
"vite": "^5.4.14",
|
"vite": "^5.4.14",
|
||||||
|
|||||||
36
src/App.vue
36
src/App.vue
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<router-view/>
|
<router-view />
|
||||||
<modals-container/>
|
<modals-container />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -11,18 +11,18 @@ import { ModalsContainer } from 'vue-final-modal'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { ModalsContainer },
|
components: { ModalsContainer },
|
||||||
created () {
|
created() {
|
||||||
this.$store.commit('setInquiries', storedInquiries.getStoredInquiries())
|
this.$store.commit('setInquiries', storedInquiries.getStoredInquiries())
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
inquiries () {
|
inquiries() {
|
||||||
return this.$store.state.inquiries
|
return this.$store.state.inquiries
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
inquiries: {
|
inquiries: {
|
||||||
deep: true,
|
deep: true,
|
||||||
handler () {
|
handler() {
|
||||||
storedInquiries.updateStorage(this.inquiries)
|
storedInquiries.updateStorage(this.inquiries)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -32,43 +32,43 @@ export default {
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Open Sans";
|
font-family: 'Open Sans';
|
||||||
src: url("@/assets/fonts/OpenSans-Regular.woff2");
|
src: url('@/assets/fonts/OpenSans-Regular.woff2');
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Open Sans";
|
font-family: 'Open Sans';
|
||||||
src: url("@/assets/fonts/OpenSans-SemiBold.woff2");
|
src: url('@/assets/fonts/OpenSans-SemiBold.woff2');
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Open Sans";
|
font-family: 'Open Sans';
|
||||||
src: url("@/assets/fonts/OpenSans-Bold.woff2");
|
src: url('@/assets/fonts/OpenSans-Bold.woff2');
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Open Sans";
|
font-family: 'Open Sans';
|
||||||
src: url("@/assets/fonts/OpenSans-Italic.woff2");
|
src: url('@/assets/fonts/OpenSans-Italic.woff2');
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Open Sans";
|
font-family: 'Open Sans';
|
||||||
src: url("@/assets/fonts/OpenSans-SemiBoldItalic.woff2");
|
src: url('@/assets/fonts/OpenSans-SemiBoldItalic.woff2');
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Open Sans";
|
font-family: 'Open Sans';
|
||||||
src: url("@/assets/fonts/OpenSans-BoldItalic.woff2");
|
src: url('@/assets/fonts/OpenSans-BoldItalic.woff2');
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
@@ -80,7 +80,7 @@ label,
|
|||||||
button,
|
button,
|
||||||
.plotly_editor *,
|
.plotly_editor *,
|
||||||
.CodeMirror pre.CodeMirror-line {
|
.CodeMirror pre.CodeMirror-line {
|
||||||
font-family: "Open Sans", Helvetica, Arial, sans-serif;
|
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -59,5 +59,3 @@ button.secondary:disabled {
|
|||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -37,7 +37,7 @@
|
|||||||
height: calc(100% - 27px);
|
height: calc(100% - 27px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (-moz-appearance:none) {
|
@supports (-moz-appearance: none) {
|
||||||
.header-container {
|
.header-container {
|
||||||
top: 0;
|
top: 0;
|
||||||
padding-left: 6px;
|
padding-left: 6px;
|
||||||
@@ -59,7 +59,8 @@ table.sqliteviz-table {
|
|||||||
margin-top: -35px;
|
margin-top: -35px;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
.sqliteviz-table thead th, .fixed-header {
|
.sqliteviz-table thead th,
|
||||||
|
.fixed-header {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -71,7 +72,7 @@ table.sqliteviz-table {
|
|||||||
}
|
}
|
||||||
.sqliteviz-table tbody td {
|
.sqliteviz-table tbody td {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
background-color:white;
|
background-color: white;
|
||||||
color: var(--color-text-base);
|
color: var(--color-text-base);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-bottom: 1px solid var(--color-border-light);
|
border-bottom: 1px solid var(--color-border-light);
|
||||||
@@ -108,8 +109,8 @@ table.sqliteviz-table {
|
|||||||
color: var(--color-text-base);
|
color: var(--color-text-base);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sqliteviz-table tbody td[data-isNull="true"],
|
.sqliteviz-table tbody td[data-isNull='true'],
|
||||||
.sqliteviz-table tbody td[data-isBlob="true"] {
|
.sqliteviz-table tbody td[data-isBlob='true'] {
|
||||||
color: var(--color-text-light-2);
|
color: var(--color-text-light-2);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
line-height: 19px;;
|
line-height: 19px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
height: 19px;
|
height: 19px;
|
||||||
border-radius: var(--border-radius-medium);
|
border-radius: var(--border-radius-medium);
|
||||||
|
|||||||
@@ -1,21 +1,19 @@
|
|||||||
:root {
|
:root {
|
||||||
--color-white: #ffffff;
|
--color-white: #ffffff;
|
||||||
--color-gray-light: #F3F6FA;
|
--color-gray-light: #f3f6fa;
|
||||||
--color-gray-light-2: #DFE8F3;
|
--color-gray-light-2: #dfe8f3;
|
||||||
--color-gray-light-3: #C8D4E3;
|
--color-gray-light-3: #c8d4e3;
|
||||||
--color-gray-light-4:#EBF0F8;
|
--color-gray-light-4: #ebf0f8;
|
||||||
--color-gray-light-5:#f8f8f9;
|
--color-gray-light-5: #f8f8f9;
|
||||||
--color-gray-medium: #A2B1C6;
|
--color-gray-medium: #a2b1c6;
|
||||||
--color-gray-dark: #506784;
|
--color-gray-dark: #506784;
|
||||||
--color-blue-medium: #119DFF;
|
--color-blue-medium: #119dff;
|
||||||
--color-blue-dark: #0D76BF;
|
--color-blue-dark: #0d76bf;
|
||||||
--color-blue-dark-2: #2A3F5F;
|
--color-blue-dark-2: #2a3f5f;
|
||||||
--color-red: #EF553B;
|
--color-red: #ef553b;
|
||||||
--color-red-2: #DE350B;
|
--color-red-2: #de350b;
|
||||||
--color-red-light: #FFBDAD;
|
--color-red-light: #ffbdad;
|
||||||
--color-yellow: #FBEFCB;
|
--color-yellow: #fbefcb;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
--color-bg-light: var(--color-gray-light);
|
--color-bg-light: var(--color-gray-light);
|
||||||
--color-bg-light-2: var(--color-gray-light-2);
|
--color-bg-light-2: var(--color-gray-light-2);
|
||||||
@@ -48,6 +46,3 @@
|
|||||||
.plotly-editor--theme-provider {
|
.plotly-editor--theme-provider {
|
||||||
--sidebar-width: 112px;
|
--sidebar-width: 112px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
:class="['checkbox-container', { 'checked': checked }, {'disabled': disabled}]"
|
:class="[
|
||||||
|
'checkbox-container',
|
||||||
|
{ checked: checked },
|
||||||
|
{ disabled: disabled }
|
||||||
|
]"
|
||||||
@click.stop="onClick"
|
@click.stop="onClick"
|
||||||
>
|
>
|
||||||
<div v-show="!checked" class="unchecked" />
|
<div v-show="!checked" class="unchecked" />
|
||||||
@@ -31,7 +35,7 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
required: false,
|
required: false,
|
||||||
default: 'accent',
|
default: 'accent',
|
||||||
validator: (value) => {
|
validator: value => {
|
||||||
return ['accent', 'light'].includes(value)
|
return ['accent', 'light'].includes(value)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -52,13 +56,13 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
checked: this.init
|
checked: this.init
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onClick () {
|
onClick() {
|
||||||
if (!this.disabled) {
|
if (!this.disabled) {
|
||||||
this.checked = !this.checked
|
this.checked = !this.checked
|
||||||
this.$emit('click', this.checked)
|
this.$emit('click', this.checked)
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="{ 'disabled': disabled }">
|
<div :class="{ disabled: disabled }">
|
||||||
<div class="text-field-label">Delimiter</div>
|
<div class="text-field-label">Delimiter</div>
|
||||||
<div
|
<div
|
||||||
class="delimiter-selector-container"
|
class="delimiter-selector-container"
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
>
|
>
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<input
|
<input
|
||||||
:class="{ 'filled': filled }"
|
:class="{ filled: filled }"
|
||||||
ref="delimiterInput"
|
ref="delimiterInput"
|
||||||
type="text"
|
type="text"
|
||||||
maxlength="1"
|
maxlength="1"
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
<div class="name">{{ getSymbolName(modelValue) }}</div>
|
<div class="name">{{ getSymbolName(modelValue) }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="controls" @click.stop>
|
<div class="controls" @click.stop>
|
||||||
<clear-icon @click="clear" :disabled="disabled"/>
|
<clear-icon @click="clear" :disabled="disabled" />
|
||||||
<drop-down-chevron
|
<drop-down-chevron
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
@click="!disabled && (showOptions = !showOptions)"
|
@click="!disabled && (showOptions = !showOptions)"
|
||||||
@@ -33,7 +33,8 @@
|
|||||||
@click="chooseOption(option)"
|
@click="chooseOption(option)"
|
||||||
class="option"
|
class="option"
|
||||||
>
|
>
|
||||||
<pre>{{option}}</pre><div>{{ getSymbolName(option) }}</div>
|
<pre>{{ option }}</pre>
|
||||||
|
<div>{{ getSymbolName(option) }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -49,7 +50,7 @@ export default {
|
|||||||
props: ['modelValue', 'width', 'disabled'],
|
props: ['modelValue', 'width', 'disabled'],
|
||||||
emits: ['update:modelValue'],
|
emits: ['update:modelValue'],
|
||||||
components: { DropDownChevron, ClearIcon },
|
components: { DropDownChevron, ClearIcon },
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
showOptions: false,
|
showOptions: false,
|
||||||
options: [',', '\t', ' ', '|', ';', '\u001F', '\u001E'],
|
options: [',', '\t', ' ', '|', ';', '\u001F', '\u001E'],
|
||||||
@@ -58,7 +59,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
inputValue () {
|
inputValue() {
|
||||||
if (this.inputValue) {
|
if (this.inputValue) {
|
||||||
this.filled = true
|
this.filled = true
|
||||||
if (this.inputValue !== this.modelValue) {
|
if (this.inputValue !== this.modelValue) {
|
||||||
@@ -69,25 +70,25 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created() {
|
||||||
this.inputValue = this.modelValue
|
this.inputValue = this.modelValue
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getSymbolName (str) {
|
getSymbolName(str) {
|
||||||
if (!str) {
|
if (!str) {
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
return ascii[str.charCodeAt(0).toString()].name
|
return ascii[str.charCodeAt(0).toString()].name
|
||||||
},
|
},
|
||||||
chooseOption (option) {
|
chooseOption(option) {
|
||||||
this.inputValue = option
|
this.inputValue = option
|
||||||
this.showOptions = false
|
this.showOptions = false
|
||||||
},
|
},
|
||||||
onContainerClick (event) {
|
onContainerClick(event) {
|
||||||
this.$refs.delimiterInput.focus()
|
this.$refs.delimiterInput.focus()
|
||||||
},
|
},
|
||||||
|
|
||||||
clear () {
|
clear() {
|
||||||
if (!this.disabled) {
|
if (!this.disabled) {
|
||||||
this.inputValue = ''
|
this.inputValue = ''
|
||||||
this.$refs.delimiterInput.focus()
|
this.$refs.delimiterInput.focus()
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
>
|
>
|
||||||
<div class="dialog-header">
|
<div class="dialog-header">
|
||||||
{{ typeName }} import
|
{{ typeName }} import
|
||||||
<close-icon @click="cancelImport" :disabled="disableDialog"/>
|
<close-icon @click="cancelImport" :disabled="disableDialog" />
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-body">
|
<div class="dialog-body">
|
||||||
<text-field
|
<text-field
|
||||||
@@ -66,10 +66,7 @@
|
|||||||
class="preview-table"
|
class="preview-table"
|
||||||
/>
|
/>
|
||||||
<div v-else class="no-data">No data</div>
|
<div v-else class="no-data">No data</div>
|
||||||
<logs
|
<logs class="import-errors" :messages="importMessages" />
|
||||||
class="import-errors"
|
|
||||||
:messages="importMessages"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-buttons-container">
|
<div class="dialog-buttons-container">
|
||||||
<button
|
<button
|
||||||
@@ -130,7 +127,7 @@ export default {
|
|||||||
dialogName: String
|
dialogName: String
|
||||||
},
|
},
|
||||||
emits: ['cancel', 'finish'],
|
emits: ['cancel', 'finish'],
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
disableDialog: false,
|
disableDialog: false,
|
||||||
disableImport: false,
|
disableImport: false,
|
||||||
@@ -147,24 +144,24 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
isJson () {
|
isJson() {
|
||||||
return fIo.isJSON(this.file)
|
return fIo.isJSON(this.file)
|
||||||
},
|
},
|
||||||
isNdJson () {
|
isNdJson() {
|
||||||
return fIo.isNDJSON(this.file)
|
return fIo.isNDJSON(this.file)
|
||||||
},
|
},
|
||||||
typeName () {
|
typeName() {
|
||||||
return this.isJson || this.isNdJson ? 'JSON' : 'CSV'
|
return this.isJson || this.isNdJson ? 'JSON' : 'CSV'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
isJson () {
|
isJson() {
|
||||||
if (this.isJson) {
|
if (this.isJson) {
|
||||||
this.delimiter = '\u001E'
|
this.delimiter = '\u001E'
|
||||||
this.header = false
|
this.header = false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
isNdJson () {
|
isNdJson() {
|
||||||
if (this.isNdJson) {
|
if (this.isNdJson) {
|
||||||
this.delimiter = '\u001E'
|
this.delimiter = '\u001E'
|
||||||
this.header = false
|
this.header = false
|
||||||
@@ -175,18 +172,17 @@ export default {
|
|||||||
if (!this.tableName) {
|
if (!this.tableName) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.db.validateTableName(this.tableName)
|
this.db.validateTableName(this.tableName).catch(err => {
|
||||||
.catch(err => {
|
|
||||||
this.tableNameError = err.message + '. Try another table name.'
|
this.tableNameError = err.message + '. Try another table name.'
|
||||||
})
|
})
|
||||||
}, 400)
|
}, 400)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeHeaderDisplaying (e) {
|
changeHeaderDisplaying(e) {
|
||||||
this.header = e
|
this.header = e
|
||||||
this.preview()
|
this.preview()
|
||||||
},
|
},
|
||||||
cancelImport () {
|
cancelImport() {
|
||||||
if (!this.disableDialog) {
|
if (!this.disableDialog) {
|
||||||
if (this.addedTable) {
|
if (this.addedTable) {
|
||||||
this.db.execute(`DROP TABLE "${this.addedTable}"`)
|
this.db.execute(`DROP TABLE "${this.addedTable}"`)
|
||||||
@@ -196,7 +192,7 @@ export default {
|
|||||||
this.$emit('cancel')
|
this.$emit('cancel')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
reset () {
|
reset() {
|
||||||
this.header = !this.isJson && !this.isNdJson
|
this.header = !this.isJson && !this.isNdJson
|
||||||
this.quoteChar = '"'
|
this.quoteChar = '"'
|
||||||
this.escapeChar = '"'
|
this.escapeChar = '"'
|
||||||
@@ -210,11 +206,11 @@ export default {
|
|||||||
this.addedTable = null
|
this.addedTable = null
|
||||||
this.tableNameError = ''
|
this.tableNameError = ''
|
||||||
},
|
},
|
||||||
open () {
|
open() {
|
||||||
this.tableName = this.db.sanitizeTableName(fIo.getFileName(this.file))
|
this.tableName = this.db.sanitizeTableName(fIo.getFileName(this.file))
|
||||||
this.$modal.show(this.dialogName)
|
this.$modal.show(this.dialogName)
|
||||||
},
|
},
|
||||||
async preview () {
|
async preview() {
|
||||||
this.disableImport = false
|
this.disableImport = false
|
||||||
if (!this.file) {
|
if (!this.file) {
|
||||||
return
|
return
|
||||||
@@ -257,13 +253,15 @@ export default {
|
|||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
this.importMessages = [{
|
this.importMessages = [
|
||||||
|
{
|
||||||
message: err,
|
message: err,
|
||||||
type: 'error'
|
type: 'error'
|
||||||
}]
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async getJsonParseResult (file) {
|
async getJsonParseResult(file) {
|
||||||
const jsonContent = await fIo.getFileContent(file)
|
const jsonContent = await fIo.getFileContent(file)
|
||||||
const isEmpty = !jsonContent.trim()
|
const isEmpty = !jsonContent.trim()
|
||||||
return {
|
return {
|
||||||
@@ -273,10 +271,10 @@ export default {
|
|||||||
},
|
},
|
||||||
hasErrors: false,
|
hasErrors: false,
|
||||||
messages: [],
|
messages: [],
|
||||||
rowCount: +(!isEmpty)
|
rowCount: +!isEmpty
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async loadToDb (file) {
|
async loadToDb(file) {
|
||||||
if (!this.tableName) {
|
if (!this.tableName) {
|
||||||
this.tableNameError = "Table name can't be empty"
|
this.tableNameError = "Table name can't be empty"
|
||||||
return
|
return
|
||||||
@@ -297,7 +295,9 @@ export default {
|
|||||||
})
|
})
|
||||||
// Get *reactive* link to parsing message for later updates
|
// Get *reactive* link to parsing message for later updates
|
||||||
parsingMsg = this.importMessages[this.importMessages.length - 1]
|
parsingMsg = this.importMessages[this.importMessages.length - 1]
|
||||||
const parsingLoadingIndicator = setTimeout(() => { parsingMsg.type = 'loading' }, 1000)
|
const parsingLoadingIndicator = setTimeout(() => {
|
||||||
|
parsingMsg.type = 'loading'
|
||||||
|
}, 1000)
|
||||||
|
|
||||||
let importMsg = {}
|
let importMsg = {}
|
||||||
let importLoadingIndicator = null
|
let importLoadingIndicator = null
|
||||||
@@ -321,7 +321,9 @@ export default {
|
|||||||
parsingMsg.type = 'success'
|
parsingMsg.type = 'success'
|
||||||
|
|
||||||
if (parseResult.messages.length > 0) {
|
if (parseResult.messages.length > 0) {
|
||||||
this.importMessages = this.importMessages.concat(parseResult.messages)
|
this.importMessages = this.importMessages.concat(
|
||||||
|
parseResult.messages
|
||||||
|
)
|
||||||
parsingMsg.message = `${rowCount} rows are parsed in ${period}.`
|
parsingMsg.message = `${rowCount} rows are parsed in ${period}.`
|
||||||
} else {
|
} else {
|
||||||
// Inform about parsing success
|
// Inform about parsing success
|
||||||
@@ -345,13 +347,18 @@ export default {
|
|||||||
|
|
||||||
// Add table
|
// Add table
|
||||||
start = new Date()
|
start = new Date()
|
||||||
await this.db.addTableFromCsv(this.tableName, parseResult.data, progressCounterId)
|
await this.db.addTableFromCsv(
|
||||||
|
this.tableName,
|
||||||
|
parseResult.data,
|
||||||
|
progressCounterId
|
||||||
|
)
|
||||||
end = new Date()
|
end = new Date()
|
||||||
|
|
||||||
this.addedTable = this.tableName
|
this.addedTable = this.tableName
|
||||||
// Inform about import success
|
// Inform about import success
|
||||||
period = time.getPeriod(start, end)
|
period = time.getPeriod(start, end)
|
||||||
importMsg.message = `Importing ${this.typeName} ` +
|
importMsg.message =
|
||||||
|
`Importing ${this.typeName} ` +
|
||||||
`into a SQLite database is completed in ${period}.`
|
`into a SQLite database is completed in ${period}.`
|
||||||
importMsg.type = 'success'
|
importMsg.type = 'success'
|
||||||
|
|
||||||
@@ -385,7 +392,7 @@ export default {
|
|||||||
this.db.deleteProgressCounter(progressCounterId)
|
this.db.deleteProgressCounter(progressCounterId)
|
||||||
this.disableDialog = false
|
this.disableDialog = false
|
||||||
},
|
},
|
||||||
async finish () {
|
async finish() {
|
||||||
this.$modal.hide(this.dialogName)
|
this.$modal.hide(this.dialogName)
|
||||||
const stmt = this.getQueryExample()
|
const stmt = this.getQueryExample()
|
||||||
const tabId = await this.$store.dispatch('addTab', { query: stmt })
|
const tabId = await this.$store.dispatch('addTab', { query: stmt })
|
||||||
@@ -394,7 +401,7 @@ export default {
|
|||||||
this.$emit('finish')
|
this.$emit('finish')
|
||||||
events.send('inquiry.create', null, { auto: true })
|
events.send('inquiry.create', null, { auto: true })
|
||||||
},
|
},
|
||||||
getQueryExample () {
|
getQueryExample() {
|
||||||
return this.isNdJson
|
return this.isNdJson
|
||||||
? this.getNdJsonQueryExample()
|
? this.getNdJsonQueryExample()
|
||||||
: this.isJson
|
: this.isJson
|
||||||
@@ -407,7 +414,7 @@ export default {
|
|||||||
`SELECT * FROM "${this.addedTable}"`
|
`SELECT * FROM "${this.addedTable}"`
|
||||||
].join('\n')
|
].join('\n')
|
||||||
},
|
},
|
||||||
getNdJsonQueryExample () {
|
getNdJsonQueryExample() {
|
||||||
try {
|
try {
|
||||||
const firstRowJson = JSON.parse(this.previewData.values.doc[0])
|
const firstRowJson = JSON.parse(this.previewData.values.doc[0])
|
||||||
const firstKey = Object.keys(firstRowJson)[0]
|
const firstKey = Object.keys(firstRowJson)[0]
|
||||||
@@ -431,7 +438,7 @@ export default {
|
|||||||
].join('\n')
|
].join('\n')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getJsonQueryExample () {
|
getJsonQueryExample() {
|
||||||
try {
|
try {
|
||||||
const firstRowJson = JSON.parse(this.previewData.values.doc[0])
|
const firstRowJson = JSON.parse(this.previewData.values.doc[0])
|
||||||
const firstKey = Object.keys(firstRowJson)[0]
|
const firstKey = Object.keys(firstRowJson)[0]
|
||||||
@@ -475,7 +482,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#csv-json-table-name {
|
#csv-json-table-name {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chars {
|
.chars {
|
||||||
@@ -508,5 +515,4 @@ margin-bottom: 24px;
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="db-uploader-container" :style="{ width }">
|
<div class="db-uploader-container" :style="{ width }">
|
||||||
<change-db-icon v-if="type === 'small'" @click="browse"/>
|
<change-db-icon v-if="type === 'small'" @click="browse" />
|
||||||
<div v-if="type === 'illustrated'" class="drop-area-container">
|
<div v-if="type === 'illustrated'" class="drop-area-container">
|
||||||
<div
|
<div
|
||||||
class="drop-area"
|
class="drop-area"
|
||||||
@dragover.prevent="state = 'dragover'"
|
@dragover.prevent="state = 'dragover'"
|
||||||
@dragleave.prevent="state=''"
|
@dragleave.prevent="state = ''"
|
||||||
@drop.prevent="drop"
|
@drop.prevent="drop"
|
||||||
@click="browse"
|
@click="browse"
|
||||||
>
|
>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
Drop the database, CSV, JSON or NDJSON file here
|
Drop the database, CSV, JSON or NDJSON file here or click to choose a
|
||||||
or click to choose a file from your computer.
|
file from your computer.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -19,16 +19,16 @@
|
|||||||
<img id="drop-file-top-img" src="~@/assets/images/top.svg" />
|
<img id="drop-file-top-img" src="~@/assets/images/top.svg" />
|
||||||
<img
|
<img
|
||||||
id="left-arm-img"
|
id="left-arm-img"
|
||||||
:class="{'swing': state === 'dragover'}"
|
:class="{ swing: state === 'dragover' }"
|
||||||
src="~@/assets/images/leftArm.svg"
|
src="~@/assets/images/leftArm.svg"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
id="file-img"
|
id="file-img"
|
||||||
ref="fileImg"
|
ref="fileImg"
|
||||||
:class="{
|
:class="{
|
||||||
'swing': state === 'dragover',
|
swing: state === 'dragover',
|
||||||
'fly': state === 'dropping',
|
fly: state === 'dropping',
|
||||||
'hidden': state === 'dropped'
|
hidden: state === 'dropped'
|
||||||
}"
|
}"
|
||||||
src="~@/assets/images/file.png"
|
src="~@/assets/images/file.png"
|
||||||
/>
|
/>
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
<img id="body-img" src="~@/assets/images/body.svg" />
|
<img id="body-img" src="~@/assets/images/body.svg" />
|
||||||
<img
|
<img
|
||||||
id="right-arm-img"
|
id="right-arm-img"
|
||||||
:class="{'swing': state === 'dragover'}"
|
:class="{ swing: state === 'dragover' }"
|
||||||
src="~@/assets/images/rightArm.svg"
|
src="~@/assets/images/rightArm.svg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -68,7 +68,7 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
required: false,
|
required: false,
|
||||||
default: 'small',
|
default: 'small',
|
||||||
validator: (value) => {
|
validator: value => {
|
||||||
return ['illustrated', 'small'].includes(value)
|
return ['illustrated', 'small'].includes(value)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -83,7 +83,7 @@ export default {
|
|||||||
ChangeDbIcon,
|
ChangeDbIcon,
|
||||||
CsvJsonImport
|
CsvJsonImport
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
state: '',
|
state: '',
|
||||||
animationPromise: Promise.resolve(),
|
animationPromise: Promise.resolve(),
|
||||||
@@ -91,9 +91,9 @@ export default {
|
|||||||
newDb: null
|
newDb: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
if (this.type === 'illustrated') {
|
if (this.type === 'illustrated') {
|
||||||
this.animationPromise = new Promise((resolve) => {
|
this.animationPromise = new Promise(resolve => {
|
||||||
this.$refs.fileImg.addEventListener('animationend', event => {
|
this.$refs.fileImg.addEventListener('animationend', event => {
|
||||||
if (event.animationName.startsWith('fly')) {
|
if (event.animationName.startsWith('fly')) {
|
||||||
this.state = 'dropped'
|
this.state = 'dropped'
|
||||||
@@ -104,26 +104,27 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
cancelImport () {
|
cancelImport() {
|
||||||
if (this.newDb) {
|
if (this.newDb) {
|
||||||
this.newDb.shutDown()
|
this.newDb.shutDown()
|
||||||
this.newDb = null
|
this.newDb = null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async finish () {
|
async finish() {
|
||||||
this.$store.commit('setDb', this.newDb)
|
this.$store.commit('setDb', this.newDb)
|
||||||
if (this.$route.path !== '/workspace') {
|
if (this.$route.path !== '/workspace') {
|
||||||
this.$router.push('/workspace')
|
this.$router.push('/workspace')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
loadDb (file) {
|
loadDb(file) {
|
||||||
return Promise.all([this.newDb.loadDb(file), this.animationPromise])
|
return Promise.all([this.newDb.loadDb(file), this.animationPromise]).then(
|
||||||
.then(this.finish)
|
this.finish
|
||||||
|
)
|
||||||
},
|
},
|
||||||
|
|
||||||
async checkFile (file) {
|
async checkFile(file) {
|
||||||
this.state = 'dropping'
|
this.state = 'dropping'
|
||||||
this.newDb = database.getNewDatabase()
|
this.newDb = database.getNewDatabase()
|
||||||
|
|
||||||
@@ -140,16 +141,19 @@ export default {
|
|||||||
await this.$nextTick()
|
await this.$nextTick()
|
||||||
const csvJsonImportModal = this.$refs.addCsvJson
|
const csvJsonImportModal = this.$refs.addCsvJson
|
||||||
csvJsonImportModal.reset()
|
csvJsonImportModal.reset()
|
||||||
return Promise.all([csvJsonImportModal.preview(), this.animationPromise])
|
return Promise.all([
|
||||||
.then(csvJsonImportModal.open)
|
csvJsonImportModal.preview(),
|
||||||
|
this.animationPromise
|
||||||
|
]).then(csvJsonImportModal.open)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
browse () {
|
browse() {
|
||||||
fIo.getFileFromUser('.db,.sqlite,.sqlite3,.csv,.json,.ndjson')
|
fIo
|
||||||
|
.getFileFromUser('.db,.sqlite,.sqlite3,.csv,.json,.ndjson')
|
||||||
.then(this.checkFile)
|
.then(this.checkFile)
|
||||||
},
|
},
|
||||||
|
|
||||||
drop (event) {
|
drop(event) {
|
||||||
this.checkFile(event.dataTransfer.files[0])
|
this.checkFile(event.dataTransfer.files[0])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -246,8 +250,12 @@ export default {
|
|||||||
transform-origin: -74px 139px;
|
transform-origin: -74px 139px;
|
||||||
}
|
}
|
||||||
@keyframes swing {
|
@keyframes swing {
|
||||||
0% { transform: rotate(0deg); }
|
0% {
|
||||||
100% { transform: rotate(-7deg); }
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(-7deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#file-img.fly {
|
#file-img.fly {
|
||||||
|
|||||||
@@ -10,7 +10,12 @@
|
|||||||
<div v-show="loading" class="icon-in-progress">
|
<div v-show="loading" class="icon-in-progress">
|
||||||
<loading-indicator />
|
<loading-indicator />
|
||||||
</div>
|
</div>
|
||||||
<span v-if="tooltip" class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
|
<span
|
||||||
|
v-if="tooltip"
|
||||||
|
class="icon-tooltip"
|
||||||
|
:style="tooltipStyle"
|
||||||
|
ref="tooltip"
|
||||||
|
>
|
||||||
{{ tooltip }}
|
{{ tooltip }}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
@@ -27,7 +32,7 @@ export default {
|
|||||||
components: { LoadingIndicator },
|
components: { LoadingIndicator },
|
||||||
mixins: [tooltipMixin],
|
mixins: [tooltipMixin],
|
||||||
methods: {
|
methods: {
|
||||||
onClick () {
|
onClick() {
|
||||||
this.hideTooltip()
|
this.hideTooltip()
|
||||||
this.$emit('click')
|
this.$emit('click')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,20 +3,23 @@
|
|||||||
:modal-id="name"
|
:modal-id="name"
|
||||||
class="dialog"
|
class="dialog"
|
||||||
:clickToClose="false"
|
:clickToClose="false"
|
||||||
:contentTransition="{name: 'loading-dialog'}"
|
:contentTransition="{ name: 'loading-dialog' }"
|
||||||
:overlayTransition="{name: 'loading-dialog'}"
|
:overlayTransition="{ name: 'loading-dialog' }"
|
||||||
>
|
>
|
||||||
<div class="dialog-header">
|
<div class="dialog-header">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
<close-icon @click="$emit('cancel')" :disabled="loading"/>
|
<close-icon @click="$emit('cancel')" :disabled="loading" />
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-body">
|
<div class="dialog-body">
|
||||||
<div v-if="loading" class="loading-dialog-body">
|
<div v-if="loading" class="loading-dialog-body">
|
||||||
<loading-indicator :size="30" class="state-icon"/>
|
<loading-indicator :size="30" class="state-icon" />
|
||||||
{{ loadingMsg }}
|
{{ loadingMsg }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="loading-dialog-body">
|
<div v-else class="loading-dialog-body">
|
||||||
<img src="~@/assets/images/success.svg" class="success-icon state-icon" />
|
<img
|
||||||
|
src="~@/assets/images/success.svg"
|
||||||
|
class="success-icon state-icon"
|
||||||
|
/>
|
||||||
{{ successMsg }}
|
{{ successMsg }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -57,7 +60,7 @@ export default {
|
|||||||
},
|
},
|
||||||
emits: ['cancel', 'action'],
|
emits: ['cancel', 'action'],
|
||||||
watch: {
|
watch: {
|
||||||
loading () {
|
loading() {
|
||||||
if (this.loading) {
|
if (this.loading) {
|
||||||
this.$modal.show(this.name)
|
this.$modal.show(this.name)
|
||||||
}
|
}
|
||||||
@@ -65,7 +68,7 @@ export default {
|
|||||||
},
|
},
|
||||||
components: { LoadingIndicator, CloseIcon },
|
components: { LoadingIndicator, CloseIcon },
|
||||||
methods: {
|
methods: {
|
||||||
cancel () {
|
cancel() {
|
||||||
this.$emit('cancel')
|
this.$emit('cancel')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg :class="animationClass" :height="size" :width="size" :viewBox="`0 0 ${size} ${size}`">
|
<svg
|
||||||
|
:class="animationClass"
|
||||||
|
:height="size"
|
||||||
|
:width="size"
|
||||||
|
:viewBox="`0 0 ${size} ${size}`"
|
||||||
|
>
|
||||||
<circle
|
<circle
|
||||||
class="loader-svg bg"
|
class="loader-svg bg"
|
||||||
:style="{ strokeWidth }"
|
:style="{ strokeWidth }"
|
||||||
@@ -9,7 +14,11 @@
|
|||||||
/>
|
/>
|
||||||
<circle
|
<circle
|
||||||
class="loader-svg front"
|
class="loader-svg front"
|
||||||
:style="{ strokeDasharray: circleProgress, strokeDashoffset: offset, strokeWidth }"
|
:style="{
|
||||||
|
strokeDasharray: circleProgress,
|
||||||
|
strokeDashoffset: offset,
|
||||||
|
strokeWidth
|
||||||
|
}"
|
||||||
:cx="size / 2"
|
:cx="size / 2"
|
||||||
:cy="size / 2"
|
:cy="size / 2"
|
||||||
:r="radius"
|
:r="radius"
|
||||||
@@ -33,22 +42,24 @@ export default {
|
|||||||
},
|
},
|
||||||
emits: [],
|
emits: [],
|
||||||
computed: {
|
computed: {
|
||||||
circleProgress () {
|
circleProgress() {
|
||||||
const circle = this.radius * 3.14 * 2
|
const circle = this.radius * 3.14 * 2
|
||||||
const dash = this.progress ? (circle * this.progress) / 100 : circle * 1 / 3
|
const dash = this.progress
|
||||||
|
? (circle * this.progress) / 100
|
||||||
|
: (circle * 1) / 3
|
||||||
const space = circle - dash
|
const space = circle - dash
|
||||||
return `${dash}px, ${space}px`
|
return `${dash}px, ${space}px`
|
||||||
},
|
},
|
||||||
animationClass () {
|
animationClass() {
|
||||||
return this.progress === undefined ? 'loading' : 'progress'
|
return this.progress === undefined ? 'loading' : 'progress'
|
||||||
},
|
},
|
||||||
radius () {
|
radius() {
|
||||||
return this.size / 2 - this.strokeWidth
|
return this.size / 2 - this.strokeWidth
|
||||||
},
|
},
|
||||||
offset () {
|
offset() {
|
||||||
return this.radius * 3.14 / 2
|
return (this.radius * 3.14) / 2
|
||||||
},
|
},
|
||||||
strokeWidth () {
|
strokeWidth() {
|
||||||
return this.size / 10
|
return this.size / 10
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -58,7 +69,10 @@ export default {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.loader-svg {
|
.loader-svg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0; right: 0; top: 0; bottom: 0;
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke-linecap: round;
|
stroke-linecap: round;
|
||||||
stroke: var(--color-accent);
|
stroke: var(--color-accent);
|
||||||
@@ -70,7 +84,7 @@ export default {
|
|||||||
|
|
||||||
.loading .loader-svg.front {
|
.loading .loader-svg.front {
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
animation: fill-animation-loading 1s cubic-bezier(1,1,1,1) 0s infinite;
|
animation: fill-animation-loading 1s cubic-bezier(1, 1, 1, 1) 0s infinite;
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -97,10 +111,10 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.progress .loader-svg.bg {
|
.progress .loader-svg.bg {
|
||||||
animation: bg-animation 1.5s cubic-bezier(1,1,1,1) 0s infinite;
|
animation: bg-animation 1.5s cubic-bezier(1, 1, 1, 1) 0s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes bg-animation{
|
@keyframes bg-animation {
|
||||||
0% {
|
0% {
|
||||||
r: 8;
|
r: 8;
|
||||||
}
|
}
|
||||||
@@ -112,5 +126,4 @@ export default {
|
|||||||
r: 8;
|
r: 8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,10 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="logs-container" ref="logsContainer">
|
<div class="logs-container" ref="logsContainer">
|
||||||
<div v-for="(msg, index) in messages" :key="index" class="msg">
|
<div v-for="(msg, index) in messages" :key="index" class="msg">
|
||||||
<img v-if="msg.type === 'error'" src="~@/assets/images/error.svg">
|
<img v-if="msg.type === 'error'" src="~@/assets/images/error.svg" />
|
||||||
<img v-if="msg.type === 'info'" src="~@/assets/images/info.svg" width="20px">
|
<img
|
||||||
<img v-if="msg.type === 'success'" src="~@/assets/images/success.svg">
|
v-if="msg.type === 'info'"
|
||||||
<loading-indicator v-if="msg.type === 'loading'" :progress="msg.progress" />
|
src="~@/assets/images/info.svg"
|
||||||
|
width="20px"
|
||||||
|
/>
|
||||||
|
<img v-if="msg.type === 'success'" src="~@/assets/images/success.svg" />
|
||||||
|
<loading-indicator
|
||||||
|
v-if="msg.type === 'loading'"
|
||||||
|
:progress="msg.progress"
|
||||||
|
/>
|
||||||
<span class="msg-text">{{ serializeMessage(msg) }}</span>
|
<span class="msg-text">{{ serializeMessage(msg) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -21,11 +28,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
'messages.length': 'scrollToBottom'
|
'messages.length': 'scrollToBottom'
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.scrollToBottom()
|
this.scrollToBottom()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async scrollToBottom () {
|
async scrollToBottom() {
|
||||||
const container = this.$refs.logsContainer
|
const container = this.$refs.logsContainer
|
||||||
if (container) {
|
if (container) {
|
||||||
await this.$nextTick()
|
await this.$nextTick()
|
||||||
@@ -33,7 +40,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
serializeMessage (msg) {
|
serializeMessage(msg) {
|
||||||
let result = ''
|
let result = ''
|
||||||
if (msg.row !== null && msg.row !== undefined) {
|
if (msg.row !== null && msg.row !== undefined) {
|
||||||
if (msg.type === 'error') {
|
if (msg.type === 'error') {
|
||||||
@@ -44,7 +51,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
result += msg.message
|
result += msg.message
|
||||||
if (!(/(\.|!|\?)$/.test(result))) {
|
if (!/(\.|!|\?)$/.test(result)) {
|
||||||
result += '.'
|
result += '.'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,11 @@
|
|||||||
{ 'splitpanes-dragging': dragging }
|
{ 'splitpanes-dragging': dragging }
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<div class="movable-splitter" ref="movableSplitter" :style="movableSplitterStyle" />
|
<div
|
||||||
|
class="movable-splitter"
|
||||||
|
ref="movableSplitter"
|
||||||
|
:style="movableSplitterStyle"
|
||||||
|
/>
|
||||||
<div
|
<div
|
||||||
class="splitpanes-pane"
|
class="splitpanes-pane"
|
||||||
ref="left"
|
ref="left"
|
||||||
@@ -27,8 +31,11 @@
|
|||||||
:class="[
|
:class="[
|
||||||
'toggle-btns',
|
'toggle-btns',
|
||||||
{
|
{
|
||||||
'both': after.max === 100 && before.max === 100 &&
|
both:
|
||||||
paneAfter.size > 0 && paneBefore.size > 0
|
after.max === 100 &&
|
||||||
|
before.max === 100 &&
|
||||||
|
paneAfter.size > 0 &&
|
||||||
|
paneBefore.size > 0
|
||||||
}
|
}
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
@@ -41,7 +48,7 @@
|
|||||||
class="direction-icon"
|
class="direction-icon"
|
||||||
src="~@/assets/images/chevron.svg"
|
src="~@/assets/images/chevron.svg"
|
||||||
:style="directionBeforeIconStyle"
|
:style="directionBeforeIconStyle"
|
||||||
>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="before.max === 100 && paneBefore.size > 0"
|
v-if="before.max === 100 && paneBefore.size > 0"
|
||||||
@@ -52,16 +59,12 @@
|
|||||||
class="direction-icon"
|
class="direction-icon"
|
||||||
src="~@/assets/images/chevron.svg"
|
src="~@/assets/images/chevron.svg"
|
||||||
:style="directionAfterIconStyle"
|
:style="directionAfterIconStyle"
|
||||||
>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- splitter end -->
|
<!-- splitter end -->
|
||||||
<div
|
<div class="splitpanes-pane" ref="right" :style="styles.after">
|
||||||
class="splitpanes-pane"
|
|
||||||
ref="right"
|
|
||||||
:style="styles.after"
|
|
||||||
>
|
|
||||||
<slot name="right-pane" />
|
<slot name="right-pane" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -87,12 +90,13 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
emits: [],
|
emits: [],
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
container: null,
|
container: null,
|
||||||
paneBefore: this.before,
|
paneBefore: this.before,
|
||||||
paneAfter: this.after,
|
paneAfter: this.after,
|
||||||
beforeMinimising: !this.after.size || !this.before.size
|
beforeMinimising:
|
||||||
|
!this.after.size || !this.before.size
|
||||||
? this.default
|
? this.default
|
||||||
: {
|
: {
|
||||||
before: this.before.size,
|
before: this.before.size,
|
||||||
@@ -107,19 +111,23 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
styles () {
|
styles() {
|
||||||
return {
|
return {
|
||||||
before: { [this.horizontal ? 'height' : 'width']: `${this.paneBefore.size}%` },
|
before: {
|
||||||
after: { [this.horizontal ? 'height' : 'width']: `${this.paneAfter.size}%` }
|
[this.horizontal ? 'height' : 'width']: `${this.paneBefore.size}%`
|
||||||
|
},
|
||||||
|
after: {
|
||||||
|
[this.horizontal ? 'height' : 'width']: `${this.paneAfter.size}%`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
movableSplitterStyle () {
|
movableSplitterStyle() {
|
||||||
const style = { ...this.movableSplitter }
|
const style = { ...this.movableSplitter }
|
||||||
style.top += '%'
|
style.top += '%'
|
||||||
style.left += '%'
|
style.left += '%'
|
||||||
return style
|
return style
|
||||||
},
|
},
|
||||||
directionBeforeIconStyle () {
|
directionBeforeIconStyle() {
|
||||||
const expanded = this.paneBefore.size !== 0
|
const expanded = this.paneBefore.size !== 0
|
||||||
const translation = 'translate(-50%, -50%) '
|
const translation = 'translate(-50%, -50%) '
|
||||||
let rotation = ''
|
let rotation = ''
|
||||||
@@ -134,7 +142,7 @@ export default {
|
|||||||
transform: translation + rotation
|
transform: translation + rotation
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
directionAfterIconStyle () {
|
directionAfterIconStyle() {
|
||||||
const expanded = this.paneAfter.size !== 0
|
const expanded = this.paneAfter.size !== 0
|
||||||
const translation = 'translate(-50%, -50%)'
|
const translation = 'translate(-50%, -50%)'
|
||||||
let rotation = ''
|
let rotation = ''
|
||||||
@@ -152,35 +160,43 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
bindEvents () {
|
bindEvents() {
|
||||||
// Passive: false to prevent scrolling while touch dragging.
|
// Passive: false to prevent scrolling while touch dragging.
|
||||||
document.addEventListener('mousemove', this.onMouseMove, { passive: false })
|
document.addEventListener('mousemove', this.onMouseMove, {
|
||||||
|
passive: false
|
||||||
|
})
|
||||||
document.addEventListener('mouseup', this.onMouseUp)
|
document.addEventListener('mouseup', this.onMouseUp)
|
||||||
|
|
||||||
if ('ontouchstart' in window) {
|
if ('ontouchstart' in window) {
|
||||||
document.addEventListener('touchmove', this.onMouseMove, { passive: false })
|
document.addEventListener('touchmove', this.onMouseMove, {
|
||||||
|
passive: false
|
||||||
|
})
|
||||||
document.addEventListener('touchend', this.onMouseUp)
|
document.addEventListener('touchend', this.onMouseUp)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
unbindEvents () {
|
unbindEvents() {
|
||||||
document.removeEventListener('mousemove', this.onMouseMove, { passive: false })
|
document.removeEventListener('mousemove', this.onMouseMove, {
|
||||||
|
passive: false
|
||||||
|
})
|
||||||
document.removeEventListener('mouseup', this.onMouseUp)
|
document.removeEventListener('mouseup', this.onMouseUp)
|
||||||
|
|
||||||
if ('ontouchstart' in window) {
|
if ('ontouchstart' in window) {
|
||||||
document.removeEventListener('touchmove', this.onMouseMove, { passive: false })
|
document.removeEventListener('touchmove', this.onMouseMove, {
|
||||||
|
passive: false
|
||||||
|
})
|
||||||
document.removeEventListener('touchend', this.onMouseUp)
|
document.removeEventListener('touchend', this.onMouseUp)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onMouseMove (event) {
|
onMouseMove(event) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
this.dragging = true
|
this.dragging = true
|
||||||
this.movableSplitter.visibility = 'visible'
|
this.movableSplitter.visibility = 'visible'
|
||||||
this.moveSplitter(event)
|
this.moveSplitter(event)
|
||||||
},
|
},
|
||||||
|
|
||||||
onMouseUp () {
|
onMouseUp() {
|
||||||
if (this.dragging) {
|
if (this.dragging) {
|
||||||
const dragPercentage = this.horizontal
|
const dragPercentage = this.horizontal
|
||||||
? this.movableSplitter.top
|
? this.movableSplitter.top
|
||||||
@@ -201,7 +217,7 @@ export default {
|
|||||||
this.unbindEvents()
|
this.unbindEvents()
|
||||||
},
|
},
|
||||||
|
|
||||||
moveSplitter (event) {
|
moveSplitter(event) {
|
||||||
const splitterInfo = {
|
const splitterInfo = {
|
||||||
container: this.container,
|
container: this.container,
|
||||||
paneBeforeMax: this.paneBefore.max,
|
paneBeforeMax: this.paneBefore.max,
|
||||||
@@ -213,12 +229,13 @@ export default {
|
|||||||
this.movableSplitter[dir] = offset
|
this.movableSplitter[dir] = offset
|
||||||
},
|
},
|
||||||
|
|
||||||
togglePane (pane) {
|
togglePane(pane) {
|
||||||
if (pane.size > 0) {
|
if (pane.size > 0) {
|
||||||
this.beforeMinimising.before = this.paneBefore.size
|
this.beforeMinimising.before = this.paneBefore.size
|
||||||
this.beforeMinimising.after = this.paneAfter.size
|
this.beforeMinimising.after = this.paneAfter.size
|
||||||
pane.size = 0
|
pane.size = 0
|
||||||
const otherPane = pane === this.paneBefore ? this.paneAfter : this.paneBefore
|
const otherPane =
|
||||||
|
pane === this.paneBefore ? this.paneAfter : this.paneBefore
|
||||||
otherPane.size = 100 - pane.size
|
otherPane.size = 100 - pane.size
|
||||||
} else {
|
} else {
|
||||||
this.paneBefore.size = this.beforeMinimising.before
|
this.paneBefore.size = this.beforeMinimising.before
|
||||||
@@ -226,7 +243,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.container = this.$refs.container
|
this.container = this.$refs.container
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -239,9 +256,15 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.splitpanes-vertical {flex-direction: row;}
|
.splitpanes-vertical {
|
||||||
.splitpanes-horizontal {flex-direction: column;}
|
flex-direction: row;
|
||||||
.splitpanes-dragging * {user-select: none;}
|
}
|
||||||
|
.splitpanes-horizontal {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.splitpanes-dragging * {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
.splitpanes-pane {
|
.splitpanes-pane {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -281,14 +304,14 @@ export default {
|
|||||||
|
|
||||||
.movable-splitter {
|
.movable-splitter {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color:rgba(162, 177, 198, 0.5);
|
background-color: rgba(162, 177, 198, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.splitpanes-vertical > .splitpanes-splitter,
|
.splitpanes-vertical > .splitpanes-splitter,
|
||||||
.splitpanes-vertical > .movable-splitter {
|
.splitpanes-vertical > .movable-splitter {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
height: 100%
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.splitpanes-horizontal > .splitpanes-splitter,
|
.splitpanes-horizontal > .splitpanes-splitter,
|
||||||
@@ -339,20 +362,32 @@ export default {
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.splitpanes-horizontal > .splitpanes-splitter .toggle-btns.both .toggle-btn:first-child {
|
.splitpanes-horizontal
|
||||||
|
> .splitpanes-splitter
|
||||||
|
.toggle-btns.both
|
||||||
|
.toggle-btn:first-child {
|
||||||
border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
|
border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
.splitpanes-horizontal > .splitpanes-splitter .toggle-btns.both .toggle-btn:last-child {
|
.splitpanes-horizontal
|
||||||
|
> .splitpanes-splitter
|
||||||
|
.toggle-btns.both
|
||||||
|
.toggle-btn:last-child {
|
||||||
border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
|
border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.splitpanes-vertical > .splitpanes-splitter .toggle-btns.both .toggle-btn:first-child {
|
.splitpanes-vertical
|
||||||
|
> .splitpanes-splitter
|
||||||
|
.toggle-btns.both
|
||||||
|
.toggle-btn:first-child {
|
||||||
border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
|
border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.splitpanes-vertical > .splitpanes-splitter .toggle-btns.both .toggle-btn:last-child {
|
.splitpanes-vertical
|
||||||
|
> .splitpanes-splitter
|
||||||
|
.toggle-btns.both
|
||||||
|
.toggle-btn:last-child {
|
||||||
border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
|
border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
export default {
|
export default {
|
||||||
// Get the cursor position relative to the splitpane container.
|
// Get the cursor position relative to the splitpane container.
|
||||||
getCurrentMouseDrag (event, container) {
|
getCurrentMouseDrag(event, container) {
|
||||||
const rect = container.getBoundingClientRect()
|
const rect = container.getBoundingClientRect()
|
||||||
const { clientX, clientY } = ('ontouchstart' in window && event.touches)
|
const { clientX, clientY } =
|
||||||
? event.touches[0]
|
'ontouchstart' in window && event.touches ? event.touches[0] : event
|
||||||
: event
|
|
||||||
return {
|
return {
|
||||||
x: clientX - rect.left,
|
x: clientX - rect.left,
|
||||||
y: clientY - rect.top
|
y: clientY - rect.top
|
||||||
@@ -12,23 +11,35 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// Returns the drag percentage of the splitter relative to the 2 panes it's inbetween.
|
// Returns the drag percentage of the splitter relative to the 2 panes it's inbetween.
|
||||||
getCurrentDragPercentage (event, container, isHorisontal) {
|
getCurrentDragPercentage(event, container, isHorisontal) {
|
||||||
let drag = this.getCurrentMouseDrag(event, container)
|
let drag = this.getCurrentMouseDrag(event, container)
|
||||||
drag = drag[isHorisontal ? 'y' : 'x']
|
drag = drag[isHorisontal ? 'y' : 'x']
|
||||||
const containerSize = container[isHorisontal ? 'clientHeight' : 'clientWidth']
|
const containerSize =
|
||||||
return drag * 100 / containerSize
|
container[isHorisontal ? 'clientHeight' : 'clientWidth']
|
||||||
|
return (drag * 100) / containerSize
|
||||||
},
|
},
|
||||||
|
|
||||||
// Returns the new position in percents.
|
// Returns the new position in percents.
|
||||||
calculateOffset (event, { container, isHorisontal, paneBeforeMax, paneAfterMax }) {
|
calculateOffset(
|
||||||
const dragPercentage = this.getCurrentDragPercentage(event, container, isHorisontal)
|
event,
|
||||||
|
{ container, isHorisontal, paneBeforeMax, paneAfterMax }
|
||||||
|
) {
|
||||||
|
const dragPercentage = this.getCurrentDragPercentage(
|
||||||
|
event,
|
||||||
|
container,
|
||||||
|
isHorisontal
|
||||||
|
)
|
||||||
|
|
||||||
const paneBeforeMaxReached = paneBeforeMax < 100 && (dragPercentage >= paneBeforeMax)
|
const paneBeforeMaxReached =
|
||||||
const paneAfterMaxReached = paneAfterMax < 100 && (dragPercentage <= 100 - paneAfterMax)
|
paneBeforeMax < 100 && dragPercentage >= paneBeforeMax
|
||||||
|
const paneAfterMaxReached =
|
||||||
|
paneAfterMax < 100 && dragPercentage <= 100 - paneAfterMax
|
||||||
|
|
||||||
// Prevent dragging beyond pane max.
|
// Prevent dragging beyond pane max.
|
||||||
if (paneBeforeMaxReached || paneAfterMaxReached) {
|
if (paneBeforeMaxReached || paneAfterMaxReached) {
|
||||||
return paneBeforeMaxReached ? paneBeforeMax : Math.max(100 - paneAfterMax, 0)
|
return paneBeforeMaxReached
|
||||||
|
? paneBeforeMax
|
||||||
|
: Math.max(100 - paneAfterMax, 0)
|
||||||
} else {
|
} else {
|
||||||
return Math.min(Math.max(dragPercentage, 0), paneBeforeMax)
|
return Math.min(Math.max(dragPercentage, 0), paneBeforeMax)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ export default {
|
|||||||
components: { Paginate },
|
components: { Paginate },
|
||||||
props: ['pageCount', 'modelValue'],
|
props: ['pageCount', 'modelValue'],
|
||||||
emits: ['update:modelValue'],
|
emits: ['update:modelValue'],
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
page: this.modelValue,
|
page: this.modelValue,
|
||||||
chevron: `
|
chevron: `
|
||||||
@@ -39,10 +39,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
page () {
|
page() {
|
||||||
this.$emit('update:modelValue', this.page)
|
this.$emit('update:modelValue', this.page)
|
||||||
},
|
},
|
||||||
modelValue () {
|
modelValue() {
|
||||||
this.page = this.modelValue
|
this.page = this.modelValue
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -54,7 +54,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="table-footer">
|
<div class="table-footer">
|
||||||
<div class="table-footer-count">
|
<div class="table-footer-count">
|
||||||
{{ rowCount }} {{rowCount === 1 ? 'row' : 'rows'}} retrieved
|
{{ rowCount }} {{ rowCount === 1 ? 'row' : 'rows' }} retrieved
|
||||||
<span v-if="preview">for preview</span>
|
<span v-if="preview">for preview</span>
|
||||||
<span v-if="time">in {{ time }}</span>
|
<span v-if="time">in {{ time }}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -88,7 +88,7 @@ export default {
|
|||||||
selectedCellCoordinates: Object
|
selectedCellCoordinates: Object
|
||||||
},
|
},
|
||||||
emits: ['updateSelectedCell'],
|
emits: ['updateSelectedCell'],
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
header: null,
|
header: null,
|
||||||
tableWidth: null,
|
tableWidth: null,
|
||||||
@@ -98,20 +98,20 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
columns () {
|
columns() {
|
||||||
return this.dataSet.columns
|
return this.dataSet.columns
|
||||||
},
|
},
|
||||||
rowCount () {
|
rowCount() {
|
||||||
return this.dataSet.values[this.columns[0]].length
|
return this.dataSet.values[this.columns[0]].length
|
||||||
},
|
},
|
||||||
cellStyle () {
|
cellStyle() {
|
||||||
const eq = this.tableWidth / this.columns.length
|
const eq = this.tableWidth / this.columns.length
|
||||||
return { maxWidth: `${Math.max(eq, 100)}px` }
|
return { maxWidth: `${Math.max(eq, 100)}px` }
|
||||||
},
|
},
|
||||||
pageCount () {
|
pageCount() {
|
||||||
return Math.ceil(this.rowCount / this.pageSize)
|
return Math.ceil(this.rowCount / this.pageSize)
|
||||||
},
|
},
|
||||||
currentPageData () {
|
currentPageData() {
|
||||||
const start = (this.currentPage - 1) * this.pageSize
|
const start = (this.currentPage - 1) * this.pageSize
|
||||||
let end = start + this.pageSize
|
let end = start + this.pageSize
|
||||||
if (end > this.rowCount - 1) {
|
if (end > this.rowCount - 1) {
|
||||||
@@ -124,31 +124,32 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.resizeObserver = new ResizeObserver(this.calculateHeadersWidth)
|
this.resizeObserver = new ResizeObserver(this.calculateHeadersWidth)
|
||||||
this.resizeObserver.observe(this.$refs.table)
|
this.resizeObserver.observe(this.$refs.table)
|
||||||
this.calculateHeadersWidth()
|
this.calculateHeadersWidth()
|
||||||
|
|
||||||
if (this.selectedCellCoordinates) {
|
if (this.selectedCellCoordinates) {
|
||||||
const { row, col } = this.selectedCellCoordinates
|
const { row, col } = this.selectedCellCoordinates
|
||||||
const cell = this.$refs.table
|
const cell = this.$refs.table.querySelector(
|
||||||
.querySelector(`td[data-col="${col}"][data-row="${row}"]`)
|
`td[data-col="${col}"][data-row="${row}"]`
|
||||||
|
)
|
||||||
if (cell) {
|
if (cell) {
|
||||||
this.selectCell(cell)
|
this.selectCell(cell)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
isBlob (value) {
|
isBlob(value) {
|
||||||
return value && ArrayBuffer.isView(value)
|
return value && ArrayBuffer.isView(value)
|
||||||
},
|
},
|
||||||
isNull (value) {
|
isNull(value) {
|
||||||
return value === null
|
return value === null
|
||||||
},
|
},
|
||||||
getCellValue (col, rowIndex) {
|
getCellValue(col, rowIndex) {
|
||||||
return this.dataSet.values[col][rowIndex - 1 + this.currentPageData.start]
|
return this.dataSet.values[col][rowIndex - 1 + this.currentPageData.start]
|
||||||
},
|
},
|
||||||
getCellText (col, rowIndex) {
|
getCellText(col, rowIndex) {
|
||||||
const value = this.getCellValue(col, rowIndex)
|
const value = this.getCellValue(col, rowIndex)
|
||||||
if (this.isNull(value)) {
|
if (this.isNull(value)) {
|
||||||
return 'NULL'
|
return 'NULL'
|
||||||
@@ -158,7 +159,7 @@ export default {
|
|||||||
}
|
}
|
||||||
return value
|
return value
|
||||||
},
|
},
|
||||||
calculateHeadersWidth () {
|
calculateHeadersWidth() {
|
||||||
this.tableWidth = this.$refs['table-container'].offsetWidth
|
this.tableWidth = this.$refs['table-container'].offsetWidth
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.header = this.$refs.th.map(th => {
|
this.header = this.$refs.th.map(th => {
|
||||||
@@ -166,10 +167,11 @@ export default {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onScrollTable () {
|
onScrollTable() {
|
||||||
this.$refs['header-container'].scrollLeft = this.$refs['table-container'].scrollLeft
|
this.$refs['header-container'].scrollLeft =
|
||||||
|
this.$refs['table-container'].scrollLeft
|
||||||
},
|
},
|
||||||
onTableKeydown (e) {
|
onTableKeydown(e) {
|
||||||
const keyCodeMap = {
|
const keyCodeMap = {
|
||||||
37: 'left',
|
37: 'left',
|
||||||
39: 'right',
|
39: 'right',
|
||||||
@@ -187,10 +189,10 @@ export default {
|
|||||||
|
|
||||||
this.moveFocusInTable(this.selectedCellElement, keyCodeMap[e.keyCode])
|
this.moveFocusInTable(this.selectedCellElement, keyCodeMap[e.keyCode])
|
||||||
},
|
},
|
||||||
onCellClick (e) {
|
onCellClick(e) {
|
||||||
this.selectCell(e.target.closest('td'), false)
|
this.selectCell(e.target.closest('td'), false)
|
||||||
},
|
},
|
||||||
selectCell (cell, scrollTo = true) {
|
selectCell(cell, scrollTo = true) {
|
||||||
if (!cell) {
|
if (!cell) {
|
||||||
if (this.selectedCellElement) {
|
if (this.selectedCellElement) {
|
||||||
this.selectedCellElement.ariaSelected = 'false'
|
this.selectedCellElement.ariaSelected = 'false'
|
||||||
@@ -213,7 +215,7 @@ export default {
|
|||||||
|
|
||||||
this.$emit('updateSelectedCell', this.selectedCellElement)
|
this.$emit('updateSelectedCell', this.selectedCellElement)
|
||||||
},
|
},
|
||||||
moveFocusInTable (initialCell, direction) {
|
moveFocusInTable(initialCell, direction) {
|
||||||
const currentRowIndex = +initialCell.dataset.row
|
const currentRowIndex = +initialCell.dataset.row
|
||||||
const currentColIndex = +initialCell.dataset.col
|
const currentColIndex = +initialCell.dataset.col
|
||||||
let newRowIndex, newColIndex
|
let newRowIndex, newColIndex
|
||||||
@@ -242,22 +244,23 @@ export default {
|
|||||||
newColIndex = currentColIndex
|
newColIndex = currentColIndex
|
||||||
}
|
}
|
||||||
|
|
||||||
const newCell = this.$refs.table
|
const newCell = this.$refs.table.querySelector(
|
||||||
.querySelector(`td[data-col="${newColIndex}"][data-row="${newRowIndex}"]`)
|
`td[data-col="${newColIndex}"][data-row="${newRowIndex}"]`
|
||||||
|
)
|
||||||
if (newCell) {
|
if (newCell) {
|
||||||
this.selectCell(newCell)
|
this.selectCell(newCell)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeUnmount () {
|
beforeUnmount() {
|
||||||
this.resizeObserver.unobserve(this.$refs.table)
|
this.resizeObserver.unobserve(this.$refs.table)
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
currentPageData () {
|
currentPageData() {
|
||||||
this.calculateHeadersWidth()
|
this.calculateHeadersWidth()
|
||||||
this.selectCell(null)
|
this.selectCell(null)
|
||||||
},
|
},
|
||||||
dataSet () {
|
dataSet() {
|
||||||
this.currentPage = 1
|
this.currentPage = 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -271,7 +274,7 @@ table.sqliteviz-table:focus {
|
|||||||
.sqliteviz-table tbody td:hover {
|
.sqliteviz-table tbody td:hover {
|
||||||
background-color: var(--color-bg-light-3);
|
background-color: var(--color-bg-light-3);
|
||||||
}
|
}
|
||||||
.sqliteviz-table tbody td[aria-selected="true"] {
|
.sqliteviz-table tbody td[aria-selected='true'] {
|
||||||
box-shadow:inset 0 0 0 1px var(--color-accent);
|
box-shadow: inset 0 0 0 1px var(--color-accent);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,8 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div v-if="label" :class="['text-field-label', { error: errorMsg }, {'disabled': disabled}]">
|
<div
|
||||||
|
v-if="label"
|
||||||
|
:class="['text-field-label', { error: errorMsg }, { disabled: disabled }]"
|
||||||
|
>
|
||||||
{{ label }}
|
{{ label }}
|
||||||
<hint-icon class="hint" v-if="hint" :hint="hint" :max-width="maxHintWidth || '149px'"/>
|
<hint-icon
|
||||||
|
class="hint"
|
||||||
|
v-if="hint"
|
||||||
|
:hint="hint"
|
||||||
|
:max-width="maxHintWidth || '149px'"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -75,7 +83,7 @@ input.error {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-field-label .hint{
|
.text-field-label .hint {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
right: -22px;
|
right: -22px;
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
</g>
|
</g>
|
||||||
<defs>
|
<defs>
|
||||||
<clipPath id="clip0">
|
<clipPath id="clip0">
|
||||||
<rect width="18" height="18" fill="white"/>
|
<rect width="18" height="18" fill="white" />
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -48,7 +48,7 @@ export default {
|
|||||||
props: ['tooltip'],
|
props: ['tooltip'],
|
||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
methods: {
|
methods: {
|
||||||
onClick () {
|
onClick() {
|
||||||
this.hideTooltip()
|
this.hideTooltip()
|
||||||
this.$emit('click')
|
this.$emit('click')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,10 +11,9 @@
|
|||||||
13.5L16.35 6.75L17.9475 8.33625Z"
|
13.5L16.35 6.75L17.9475 8.33625Z"
|
||||||
fill="#506784"
|
fill="#506784"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<svg
|
<svg
|
||||||
class="db-edit-icon"
|
class="db-edit-icon"
|
||||||
width="18"
|
width="18"
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
<span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
|
<span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
|
||||||
Load another database, CSV, JSON or NDJSON
|
Load another database, CSV, JSON or NDJSON
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -35,7 +35,7 @@ export default {
|
|||||||
mixins: [tooltipMixin],
|
mixins: [tooltipMixin],
|
||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
methods: {
|
methods: {
|
||||||
onClick () {
|
onClick() {
|
||||||
this.hideTooltip()
|
this.hideTooltip()
|
||||||
this.$emit('click')
|
this.$emit('click')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||||
width="18"
|
|
||||||
height="18"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
@@ -46,7 +41,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ChartIcon'
|
name: 'ChartIcon'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg
|
||||||
:class="['clear-icon', {'disabled': disabled}]"
|
:class="['clear-icon', { disabled: disabled }]"
|
||||||
width="20"
|
width="20"
|
||||||
height="20"
|
height="20"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20"
|
||||||
@@ -21,7 +21,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ClearIcon',
|
name: 'ClearIcon',
|
||||||
props: ['disabled']
|
props: ['disabled']
|
||||||
@@ -42,6 +41,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.disabled.clear-icon:hover path {
|
.disabled.clear-icon:hover path {
|
||||||
fill: #C8D4E3;
|
fill: #c8d4e3;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||||
width="18"
|
|
||||||
height="18"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
d="M14.1917 1.3851H12.4806V0.703125C12.4806 0.314758 12.1658 0 11.7775 0H6.246C5.85764 0
|
d="M14.1917 1.3851H12.4806V0.703125C12.4806 0.314758 12.1658 0 11.7775 0H6.246C5.85764 0
|
||||||
5.54288 0.314758 5.54288 0.703125V1.3851H3.83203C2.86276 1.3851 2.07422 2.17365 2.07422
|
5.54288 0.314758 5.54288 0.703125V1.3851H3.83203C2.86276 1.3851 2.07422 2.17365 2.07422
|
||||||
@@ -26,7 +21,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ClipboardIcon'
|
name: 'ClipboardIcon'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg
|
||||||
@click.stop="$emit('click')"
|
@click.stop="$emit('click')"
|
||||||
:class="['icon', {'disabled': disabled }]"
|
:class="['icon', { disabled: disabled }]"
|
||||||
:width="size"
|
:width="size"
|
||||||
:height="size"
|
:height="size"
|
||||||
viewBox="0 0 14 14"
|
viewBox="0 0 14 14"
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||||
width="18"
|
|
||||||
height="18"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
@@ -17,7 +12,7 @@
|
|||||||
6.91686 13.5552 6.91522Z"
|
6.91686 13.5552 6.91522Z"
|
||||||
fill="#A2B1C6"
|
fill="#A2B1C6"
|
||||||
/>
|
/>
|
||||||
<circle cx="5.50049" cy="6.00339" r="1.5" fill="#A2B1C6"/>
|
<circle cx="5.50049" cy="6.00339" r="1.5" fill="#A2B1C6" />
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
@@ -27,11 +22,10 @@
|
|||||||
1.21788ZM16.0374 2.71788L1.96424 2.713L1.96289 15.2773L16.036 15.2821L16.0374 2.71788Z"
|
1.21788ZM16.0374 2.71788L1.96424 2.713L1.96289 15.2773L16.036 15.2821L16.0374 2.71788Z"
|
||||||
fill="#A2B1C6"
|
fill="#A2B1C6"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DataViewIcon'
|
name: 'DataViewIcon'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg
|
||||||
:class="['chevron-icon', {'disabled': disabled}]"
|
:class="['chevron-icon', { disabled: disabled }]"
|
||||||
width="20"
|
width="20"
|
||||||
height="20"
|
height="20"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20"
|
||||||
@@ -15,7 +15,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DropDownChevron',
|
name: 'DropDownChevron',
|
||||||
props: ['disabled']
|
props: ['disabled']
|
||||||
@@ -36,6 +35,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.disabled.chevron-icon:hover path {
|
.disabled.chevron-icon:hover path {
|
||||||
fill: #C8D4E3;
|
fill: #c8d4e3;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -21,6 +21,5 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export default {
|
|||||||
props: ['tooltip', 'tooltipPosition'],
|
props: ['tooltip', 'tooltipPosition'],
|
||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
methods: {
|
methods: {
|
||||||
onClick () {
|
onClick() {
|
||||||
this.hideTooltip()
|
this.hideTooltip()
|
||||||
this.$emit('click')
|
this.$emit('click')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg width="19" height="18" viewBox="0 0 19 18" fill="none">
|
||||||
width="19"
|
|
||||||
height="18"
|
|
||||||
viewBox="0 0 19 18"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
d="M6.07959 13.5756C6.05908 14.0209 5.93896 14.415 5.71924 14.7578C5.49951 15.0976 5.19043
|
d="M6.07959 13.5756C6.05908 14.0209 5.93896 14.415 5.71924 14.7578C5.49951 15.0976 5.19043
|
||||||
15.3613 4.79199 15.5488C4.39648 15.7363 3.94385 15.83 3.43408 15.83C2.59326 15.83
|
15.3613 4.79199 15.5488C4.39648 15.7363 3.94385 15.83 3.43408 15.83C2.59326 15.83
|
||||||
@@ -55,7 +50,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ExportToCsvIcon'
|
name: 'ExportToCsvIcon'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg width="19" height="18" viewBox="0 0 19 18" fill="none">
|
||||||
width="19"
|
|
||||||
height="18"
|
|
||||||
viewBox="0 0 19 18"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
d="M4.28369 13.9966C4.28369 13.7711 4.20312 13.5953 4.04199 13.4693C3.88379 13.3433 3.604
|
d="M4.28369 13.9966C4.28369 13.7711 4.20312 13.5953 4.04199 13.4693C3.88379 13.3433 3.604
|
||||||
13.213 3.20264 13.0782C2.80127 12.9434 2.47314 12.813 2.21826 12.6871C1.38916 12.2798
|
13.213 3.20264 13.0782C2.80127 12.9434 2.47314 12.813 2.21826 12.6871C1.38916 12.2798
|
||||||
@@ -54,7 +49,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ExportToSvgIcon'
|
name: 'ExportToSvgIcon'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -33,7 +33,11 @@
|
|||||||
fill="#A2B1C6"
|
fill="#A2B1C6"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="icon-tooltip" :style="{...tooltipStyle, maxWidth: maxWidth }" ref="tooltip">
|
<span
|
||||||
|
class="icon-tooltip"
|
||||||
|
:style="{ ...tooltipStyle, maxWidth: maxWidth }"
|
||||||
|
ref="tooltip"
|
||||||
|
>
|
||||||
{{ hint }}
|
{{ hint }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -48,7 +52,7 @@ export default {
|
|||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
mixins: [tooltipMixin],
|
mixins: [tooltipMixin],
|
||||||
methods: {
|
methods: {
|
||||||
onClick () {
|
onClick() {
|
||||||
this.hideTooltip()
|
this.hideTooltip()
|
||||||
this.$emit('click')
|
this.$emit('click')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||||
width="18"
|
|
||||||
height="18"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
@@ -14,14 +9,13 @@
|
|||||||
14.1914C14.8372 13.965 15.0161 13.5645 15.0161 12.8467V9.43008H13.1914L15.7661 5.13901Z"
|
14.1914C14.8372 13.965 15.0161 13.5645 15.0161 12.8467V9.43008H13.1914L15.7661 5.13901Z"
|
||||||
fill="#A2B1C6"
|
fill="#A2B1C6"
|
||||||
/>
|
/>
|
||||||
<path d="M6.41943 0H18.4194V4H6.41943V0Z" fill="#A2B1C6"/>
|
<path d="M6.41943 0H18.4194V4H6.41943V0Z" fill="#A2B1C6" />
|
||||||
<path d="M0.419434 6H4.41943V18H0.419434V6Z" fill="#A2B1C6"/>
|
<path d="M0.419434 6H4.41943V18H0.419434V6Z" fill="#A2B1C6" />
|
||||||
<path d="M0.419434 0H4.41943V4H0.419434V0Z" fill="#A2B1C6"/>
|
<path d="M0.419434 0H4.41943V4H0.419434V0Z" fill="#A2B1C6" />
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PivotIcon'
|
name: 'PivotIcon'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||||
width="18"
|
|
||||||
height="18"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
d="M9 5.51953C6.57686 5.51953 4.60547 7.49092 4.60547 9.91406C4.60547 12.3372 6.57686
|
d="M9 5.51953C6.57686 5.51953 4.60547 7.49092 4.60547 9.91406C4.60547 12.3372 6.57686
|
||||||
14.3086 9 14.3086C11.4231 14.3086 13.3945 12.3372 13.3945 9.91406C13.3945 7.49092 11.4231
|
14.3086 9 14.3086C11.4231 14.3086 13.3945 12.3372 13.3945 9.91406C13.3945 7.49092 11.4231
|
||||||
@@ -30,7 +25,10 @@
|
|||||||
5.5195V15.0117Z"
|
5.5195V15.0117Z"
|
||||||
fill="#A2B1C6"
|
fill="#A2B1C6"
|
||||||
/>
|
/>
|
||||||
<path d="M15.1875 6.22266H13.7812V7.62891H15.1875V6.22266Z" fill="#A2B1C6"/>
|
<path
|
||||||
|
d="M15.1875 6.22266H13.7812V7.62891H15.1875V6.22266Z"
|
||||||
|
fill="#A2B1C6"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg width="19" height="19" viewBox="0 0 19 19" fill="none">
|
||||||
width="19"
|
|
||||||
height="19"
|
|
||||||
viewBox="0 0 19 19"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<g clip-path="url(#clip0_2130_5292)">
|
<g clip-path="url(#clip0_2130_5292)">
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
@@ -42,11 +37,10 @@
|
|||||||
/>
|
/>
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RowIcon'
|
name: 'RowIcon'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,16 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg width="12" height="13" viewBox="0 0 12 13" fill="none">
|
||||||
width="12"
|
<path
|
||||||
height="13"
|
d="M11.1624 6.94358L0.770043 12.9436L0.770043 0.943573L11.1624 6.94358Z"
|
||||||
viewBox="0 0 12 13"
|
fill="#A2B1C6"
|
||||||
fill="none"
|
/>
|
||||||
>
|
|
||||||
<path d="M11.1624 6.94358L0.770043 12.9436L0.770043 0.943573L11.1624 6.94358Z" fill="#A2B1C6"/>
|
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RunIcon'
|
name: 'RunIcon'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,7 +24,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SortIcon',
|
name: 'SortIcon',
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg width="18" height="19" viewBox="0 0 18 19" fill="none">
|
||||||
width="18"
|
|
||||||
height="19"
|
|
||||||
viewBox="0 0 18 19"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<g clip-path="url(#clip0)">
|
<g clip-path="url(#clip0)">
|
||||||
<path
|
<path
|
||||||
d="M4.5 1.51343H10.5L15 6.01343V8.45284H13.5V6.76343H9.75V3.01343H4.5V8.45284H3V3.01343C3
|
d="M4.5 1.51343H10.5L15 6.01343V8.45284H13.5V6.76343H9.75V3.01343H4.5V8.45284H3V3.01343C3
|
||||||
@@ -47,14 +42,18 @@
|
|||||||
</g>
|
</g>
|
||||||
<defs>
|
<defs>
|
||||||
<clipPath id="clip0">
|
<clipPath id="clip0">
|
||||||
<rect width="18" height="18" fill="white" transform="translate(0 0.0134277)"/>
|
<rect
|
||||||
|
width="18"
|
||||||
|
height="18"
|
||||||
|
fill="white"
|
||||||
|
transform="translate(0 0.0134277)"
|
||||||
|
/>
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SqlEditorIcon'
|
name: 'SqlEditorIcon'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||||
width="18"
|
|
||||||
height="18"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
@@ -41,7 +36,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TableIcon'
|
name: 'TableIcon'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,7 +17,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'treeChevron',
|
name: 'treeChevron',
|
||||||
props: {
|
props: {
|
||||||
@@ -31,7 +30,7 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.chevron-icon {
|
.chevron-icon {
|
||||||
-webkit-transition: transform .15s ease-in-out;
|
-webkit-transition: transform 0.15s ease-in-out;
|
||||||
transition: transform .15s ease-in-out;
|
transition: transform 0.15s ease-in-out;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg
|
<svg width="19" height="19" viewBox="0 0 19 19" fill="none">
|
||||||
width="19"
|
|
||||||
height="19"
|
|
||||||
viewBox="0 0 19 19"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<g clip-path="url(#clip0_2131_6054)">
|
<g clip-path="url(#clip0_2131_6054)">
|
||||||
<path
|
<path
|
||||||
d="M3.53784 11.5846L3.53784 3.14734L11.9751 3.14734V7.676C12.4655 7.51991
|
d="M3.53784 11.5846L3.53784 3.14734L11.9751 3.14734V7.676C12.4655 7.51991
|
||||||
@@ -39,11 +34,10 @@
|
|||||||
/>
|
/>
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ViewCellValueIcon'
|
name: 'ViewCellValueIcon'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import * as dereference from 'react-chart-editor/lib/lib/dereference'
|
|||||||
import plotly from 'plotly.js'
|
import plotly from 'plotly.js'
|
||||||
import { nanoid } from 'nanoid'
|
import { nanoid } from 'nanoid'
|
||||||
|
|
||||||
export function getOptionsFromDataSources (dataSources) {
|
export function getOptionsFromDataSources(dataSources) {
|
||||||
if (!dataSources) {
|
if (!dataSources) {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
@@ -13,7 +13,7 @@ export function getOptionsFromDataSources (dataSources) {
|
|||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getOptionsForSave (state, dataSources) {
|
export function getOptionsForSave(state, dataSources) {
|
||||||
// we don't need to save the data, only settings
|
// we don't need to save the data, only settings
|
||||||
// so we modify state.data using dereference
|
// so we modify state.data using dereference
|
||||||
const stateCopy = JSON.parse(JSON.stringify(state))
|
const stateCopy = JSON.parse(JSON.stringify(state))
|
||||||
@@ -25,7 +25,7 @@ export function getOptionsForSave (state, dataSources) {
|
|||||||
return stateCopy
|
return stateCopy
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getImageDataUrl (element, type) {
|
export async function getImageDataUrl(element, type) {
|
||||||
const chartElement = element.querySelector('.js-plotly-plot')
|
const chartElement = element.querySelector('.js-plotly-plot')
|
||||||
return await plotly.toImage(chartElement, {
|
return await plotly.toImage(chartElement, {
|
||||||
format: type,
|
format: type,
|
||||||
@@ -34,7 +34,7 @@ export async function getImageDataUrl (element, type) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getChartData (element) {
|
export function getChartData(element) {
|
||||||
const chartElement = element.querySelector('.js-plotly-plot')
|
const chartElement = element.querySelector('.js-plotly-plot')
|
||||||
return {
|
return {
|
||||||
data: chartElement.data,
|
data: chartElement.data,
|
||||||
@@ -42,7 +42,7 @@ export function getChartData (element) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getHtml (options) {
|
export function getHtml(options) {
|
||||||
const chartId = nanoid()
|
const chartId = nanoid()
|
||||||
return `
|
return `
|
||||||
<script src="https://cdn.plot.ly/plotly-latest.js" charset="UTF-8"></script>
|
<script src="https://cdn.plot.ly/plotly-latest.js" charset="UTF-8"></script>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ const hintsByCode = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
getResult (source, columns) {
|
getResult(source, columns) {
|
||||||
const result = {
|
const result = {
|
||||||
columns: columns || []
|
columns: columns || []
|
||||||
}
|
}
|
||||||
@@ -52,7 +52,7 @@ export default {
|
|||||||
return result
|
return result
|
||||||
},
|
},
|
||||||
|
|
||||||
prepareForExport (resultSet) {
|
prepareForExport(resultSet) {
|
||||||
const columns = resultSet.columns
|
const columns = resultSet.columns
|
||||||
const rowCount = resultSet.values[columns[0]].length
|
const rowCount = resultSet.values[columns[0]].length
|
||||||
const result = {
|
const result = {
|
||||||
@@ -61,13 +61,15 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
for (let rowNumber = 0; rowNumber < rowCount; rowNumber++) {
|
for (let rowNumber = 0; rowNumber < rowCount; rowNumber++) {
|
||||||
result.data.push(columns.map(column => resultSet.values[column][rowNumber]))
|
result.data.push(
|
||||||
|
columns.map(column => resultSet.values[column][rowNumber])
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return result
|
return result
|
||||||
},
|
},
|
||||||
|
|
||||||
parse (file, config = {}) {
|
parse(file, config = {}) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const defaultConfig = {
|
const defaultConfig = {
|
||||||
delimiter: '', // auto-detect
|
delimiter: '', // auto-detect
|
||||||
@@ -122,7 +124,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
serialize (resultSet) {
|
serialize(resultSet) {
|
||||||
return Papa.unparse(this.prepareForExport(resultSet), { delimiter: '\t' })
|
return Papa.unparse(this.prepareForExport(resultSet), { delimiter: '\t' })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,9 +5,11 @@ import wasmUrl from 'sql.js/dist/sql-wasm.wasm?url'
|
|||||||
let SQL = null
|
let SQL = null
|
||||||
const sqlModuleReady = initSqlJs({
|
const sqlModuleReady = initSqlJs({
|
||||||
locateFile: () => wasmUrl
|
locateFile: () => wasmUrl
|
||||||
}).then(sqlModule => { SQL = sqlModule })
|
}).then(sqlModule => {
|
||||||
|
SQL = sqlModule
|
||||||
|
})
|
||||||
|
|
||||||
function _getDataSourcesFromSqlResult (sqlResult) {
|
function _getDataSourcesFromSqlResult(sqlResult) {
|
||||||
if (!sqlResult) {
|
if (!sqlResult) {
|
||||||
return {}
|
return {}
|
||||||
}
|
}
|
||||||
@@ -19,31 +21,30 @@ function _getDataSourcesFromSqlResult (sqlResult) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default class Sql {
|
export default class Sql {
|
||||||
constructor () {
|
constructor() {
|
||||||
this.db = null
|
this.db = null
|
||||||
}
|
}
|
||||||
|
|
||||||
static build () {
|
static build() {
|
||||||
return sqlModuleReady
|
return sqlModuleReady.then(() => {
|
||||||
.then(() => {
|
|
||||||
return new Sql()
|
return new Sql()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
createDb (buffer) {
|
createDb(buffer) {
|
||||||
if (this.db != null) this.db.close()
|
if (this.db != null) this.db.close()
|
||||||
this.db = new SQL.Database(buffer)
|
this.db = new SQL.Database(buffer)
|
||||||
return this.db
|
return this.db
|
||||||
}
|
}
|
||||||
|
|
||||||
open (buffer) {
|
open(buffer) {
|
||||||
this.createDb(buffer && new Uint8Array(buffer))
|
this.createDb(buffer && new Uint8Array(buffer))
|
||||||
return {
|
return {
|
||||||
ready: true
|
ready: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
exec (sql, params) {
|
exec(sql, params) {
|
||||||
if (this.db === null) {
|
if (this.db === null) {
|
||||||
this.createDb()
|
this.createDb()
|
||||||
}
|
}
|
||||||
@@ -59,7 +60,7 @@ export default class Sql {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
import (tabName, data, progressCounterId, progressCallback, chunkSize = 1500) {
|
import(tabName, data, progressCounterId, progressCallback, chunkSize = 1500) {
|
||||||
if (this.db === null) {
|
if (this.db === null) {
|
||||||
this.createDb()
|
this.createDb()
|
||||||
}
|
}
|
||||||
@@ -80,7 +81,10 @@ export default class Sql {
|
|||||||
}
|
}
|
||||||
this.db.exec('COMMIT')
|
this.db.exec('COMMIT')
|
||||||
count++
|
count++
|
||||||
progressCallback({ progress: 100 * (count / chunksAmount), id: progressCounterId })
|
progressCallback({
|
||||||
|
progress: 100 * (count / chunksAmount),
|
||||||
|
id: progressCounterId
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@@ -88,11 +92,11 @@ export default class Sql {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export () {
|
export() {
|
||||||
return this.db.export()
|
return this.db.export()
|
||||||
}
|
}
|
||||||
|
|
||||||
close () {
|
close() {
|
||||||
if (this.db) {
|
if (this.db) {
|
||||||
this.db.close()
|
this.db.close()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
export default {
|
export default {
|
||||||
* generateChunks (data, size) {
|
*generateChunks(data, size) {
|
||||||
const matrix = Object.keys(data).map(col => data[col])
|
const matrix = Object.keys(data).map(col => data[col])
|
||||||
const [row] = matrix
|
const [row] = matrix
|
||||||
const transposedMatrix = row.map((value, column) => matrix.map(row => row[column]))
|
const transposedMatrix = row.map((value, column) =>
|
||||||
|
matrix.map(row => row[column])
|
||||||
|
)
|
||||||
|
|
||||||
const count = Math.ceil(transposedMatrix.length / size)
|
const count = Math.ceil(transposedMatrix.length / size)
|
||||||
|
|
||||||
@@ -13,13 +15,13 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
getInsertStmt (tabName, columns) {
|
getInsertStmt(tabName, columns) {
|
||||||
const colList = `"${columns.join('", "')}"`
|
const colList = `"${columns.join('", "')}"`
|
||||||
const params = columns.map(() => '?').join(', ')
|
const params = columns.map(() => '?').join(', ')
|
||||||
return `INSERT INTO "${tabName}" (${colList}) VALUES (${params});`
|
return `INSERT INTO "${tabName}" (${colList}) VALUES (${params});`
|
||||||
},
|
},
|
||||||
|
|
||||||
getCreateStatement (tabName, data) {
|
getCreateStatement(tabName, data) {
|
||||||
let result = `CREATE table "${tabName}"(`
|
let result = `CREATE table "${tabName}"(`
|
||||||
for (const col in data) {
|
for (const col in data) {
|
||||||
// Get the first row of values to determine types
|
// Get the first row of values to determine types
|
||||||
@@ -38,7 +40,8 @@ export default {
|
|||||||
type = 'TEXT'
|
type = 'TEXT'
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
default: type = 'TEXT'
|
default:
|
||||||
|
type = 'TEXT'
|
||||||
}
|
}
|
||||||
result += `"${col}" ${type}, `
|
result += `"${col}" ${type}, `
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import Sql from './_sql'
|
|||||||
|
|
||||||
const sqlReady = Sql.build()
|
const sqlReady = Sql.build()
|
||||||
|
|
||||||
function processMsg (sql) {
|
function processMsg(sql) {
|
||||||
const data = this
|
const data = this
|
||||||
switch (data && data.action) {
|
switch (data && data.action) {
|
||||||
case 'open':
|
case 'open':
|
||||||
@@ -28,14 +28,12 @@ function processMsg (sql) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onError (error) {
|
function onError(error) {
|
||||||
return {
|
return {
|
||||||
error: error.message
|
error: error.message
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
registerPromiseWorker(data => {
|
registerPromiseWorker(data => {
|
||||||
return sqlReady
|
return sqlReady.then(processMsg.bind(data)).catch(onError)
|
||||||
.then(processMsg.bind(data))
|
|
||||||
.catch(onError)
|
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -6,11 +6,10 @@ import PromiseWorker from 'promise-worker'
|
|||||||
|
|
||||||
import events from '@/lib/utils/events'
|
import events from '@/lib/utils/events'
|
||||||
|
|
||||||
function getNewDatabase () {
|
function getNewDatabase() {
|
||||||
const worker = new Worker(
|
const worker = new Worker(new URL('./_worker.js', import.meta.url), {
|
||||||
new URL('./_worker.js', import.meta.url),
|
type: 'module'
|
||||||
{ type: 'module' }
|
})
|
||||||
)
|
|
||||||
return new Database(worker)
|
return new Database(worker)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -20,7 +19,7 @@ export default {
|
|||||||
|
|
||||||
let progressCounterIds = 0
|
let progressCounterIds = 0
|
||||||
class Database {
|
class Database {
|
||||||
constructor (worker) {
|
constructor(worker) {
|
||||||
this.dbName = null
|
this.dbName = null
|
||||||
this.schema = null
|
this.schema = null
|
||||||
this.worker = worker
|
this.worker = worker
|
||||||
@@ -31,29 +30,33 @@ class Database {
|
|||||||
const progress = e.data.progress
|
const progress = e.data.progress
|
||||||
if (progress !== undefined) {
|
if (progress !== undefined) {
|
||||||
const id = e.data.id
|
const id = e.data.id
|
||||||
this.importProgresses[id].dispatchEvent(new CustomEvent('progress', {
|
this.importProgresses[id].dispatchEvent(
|
||||||
|
new CustomEvent('progress', {
|
||||||
detail: progress
|
detail: progress
|
||||||
}))
|
})
|
||||||
|
)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
shutDown () {
|
shutDown() {
|
||||||
this.worker.terminate()
|
this.worker.terminate()
|
||||||
}
|
}
|
||||||
|
|
||||||
createProgressCounter (callback) {
|
createProgressCounter(callback) {
|
||||||
const id = progressCounterIds++
|
const id = progressCounterIds++
|
||||||
this.importProgresses[id] = new EventTarget()
|
this.importProgresses[id] = new EventTarget()
|
||||||
this.importProgresses[id].addEventListener('progress', e => { callback(e.detail) })
|
this.importProgresses[id].addEventListener('progress', e => {
|
||||||
|
callback(e.detail)
|
||||||
|
})
|
||||||
return id
|
return id
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteProgressCounter (id) {
|
deleteProgressCounter(id) {
|
||||||
delete this.importProgresses[id]
|
delete this.importProgresses[id]
|
||||||
}
|
}
|
||||||
|
|
||||||
async addTableFromCsv (tabName, data, progressCounterId) {
|
async addTableFromCsv(tabName, data, progressCounterId) {
|
||||||
const result = await this.pw.postMessage({
|
const result = await this.pw.postMessage({
|
||||||
action: 'import',
|
action: 'import',
|
||||||
data,
|
data,
|
||||||
@@ -68,9 +71,12 @@ class Database {
|
|||||||
this.refreshSchema()
|
this.refreshSchema()
|
||||||
}
|
}
|
||||||
|
|
||||||
async loadDb (file) {
|
async loadDb(file) {
|
||||||
const fileContent = file ? await fu.readAsArrayBuffer(file) : null
|
const fileContent = file ? await fu.readAsArrayBuffer(file) : null
|
||||||
const res = await this.pw.postMessage({ action: 'open', buffer: fileContent })
|
const res = await this.pw.postMessage({
|
||||||
|
action: 'open',
|
||||||
|
buffer: fileContent
|
||||||
|
})
|
||||||
|
|
||||||
if (res.error) {
|
if (res.error) {
|
||||||
throw new Error(res.error)
|
throw new Error(res.error)
|
||||||
@@ -85,7 +91,7 @@ class Database {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
async refreshSchema () {
|
async refreshSchema() {
|
||||||
const getSchemaSql = `
|
const getSchemaSql = `
|
||||||
WITH columns as (
|
WITH columns as (
|
||||||
SELECT
|
SELECT
|
||||||
@@ -103,7 +109,7 @@ class Database {
|
|||||||
this.schema = JSON.parse(result.values.objects[0])
|
this.schema = JSON.parse(result.values.objects[0])
|
||||||
}
|
}
|
||||||
|
|
||||||
async execute (commands) {
|
async execute(commands) {
|
||||||
await this.pw.postMessage({ action: 'reopen' })
|
await this.pw.postMessage({ action: 'reopen' })
|
||||||
const results = await this.pw.postMessage({ action: 'exec', sql: commands })
|
const results = await this.pw.postMessage({ action: 'exec', sql: commands })
|
||||||
|
|
||||||
@@ -114,7 +120,7 @@ class Database {
|
|||||||
return results[results.length - 1]
|
return results[results.length - 1]
|
||||||
}
|
}
|
||||||
|
|
||||||
async export (fileName) {
|
async export(fileName) {
|
||||||
const data = await this.pw.postMessage({ action: 'export' })
|
const data = await this.pw.postMessage({ action: 'export' })
|
||||||
|
|
||||||
if (data.error) {
|
if (data.error) {
|
||||||
@@ -124,13 +130,15 @@ class Database {
|
|||||||
events.send('database.export', data.byteLength, { to: 'sqlite' })
|
events.send('database.export', data.byteLength, { to: 'sqlite' })
|
||||||
}
|
}
|
||||||
|
|
||||||
async validateTableName (name) {
|
async validateTableName(name) {
|
||||||
if (name.startsWith('sqlite_')) {
|
if (name.startsWith('sqlite_')) {
|
||||||
throw new Error("Table name can't start with sqlite_")
|
throw new Error("Table name can't start with sqlite_")
|
||||||
}
|
}
|
||||||
|
|
||||||
if (/[^\w]/.test(name)) {
|
if (/[^\w]/.test(name)) {
|
||||||
throw new Error('Table name can contain only letters, digits and underscores')
|
throw new Error(
|
||||||
|
'Table name can contain only letters, digits and underscores'
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (/^(\d)/.test(name)) {
|
if (/^(\d)/.test(name)) {
|
||||||
@@ -140,7 +148,7 @@ class Database {
|
|||||||
await this.execute(`BEGIN; CREATE TABLE "${name}"(id); ROLLBACK;`)
|
await this.execute(`BEGIN; CREATE TABLE "${name}"(id); ROLLBACK;`)
|
||||||
}
|
}
|
||||||
|
|
||||||
sanitizeTableName (tabName) {
|
sanitizeTableName(tabName) {
|
||||||
return tabName
|
return tabName
|
||||||
.replace(/[^\w]/g, '_') // replace everything that is not letter, digit or _ with _
|
.replace(/[^\w]/g, '_') // replace everything that is not letter, digit or _ with _
|
||||||
.replace(/^(\d)/, '_$1') // add _ at beginning if starts with digit
|
.replace(/^(\d)/, '_$1') // add _ at beginning if starts with digit
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
export default {
|
export default {
|
||||||
_migrate (installedVersion, inquiries) {
|
_migrate(installedVersion, inquiries) {
|
||||||
if (installedVersion === 1) {
|
if (installedVersion === 1) {
|
||||||
inquiries.forEach(inquire => {
|
inquiries.forEach(inquire => {
|
||||||
inquire.viewType = 'chart'
|
inquire.viewType = 'chart'
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ const migrate = migration._migrate
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
version: 2,
|
version: 2,
|
||||||
getStoredInquiries () {
|
getStoredInquiries() {
|
||||||
let myInquiries = JSON.parse(localStorage.getItem('myInquiries'))
|
let myInquiries = JSON.parse(localStorage.getItem('myInquiries'))
|
||||||
if (!myInquiries) {
|
if (!myInquiries) {
|
||||||
const oldInquiries = localStorage.getItem('myQueries')
|
const oldInquiries = localStorage.getItem('myQueries')
|
||||||
@@ -22,7 +22,7 @@ export default {
|
|||||||
return (myInquiries && myInquiries.inquiries) || []
|
return (myInquiries && myInquiries.inquiries) || []
|
||||||
},
|
},
|
||||||
|
|
||||||
duplicateInquiry (baseInquiry) {
|
duplicateInquiry(baseInquiry) {
|
||||||
const newInquiry = JSON.parse(JSON.stringify(baseInquiry))
|
const newInquiry = JSON.parse(JSON.stringify(baseInquiry))
|
||||||
newInquiry.name = newInquiry.name + ' Copy'
|
newInquiry.name = newInquiry.name + ' Copy'
|
||||||
newInquiry.id = nanoid()
|
newInquiry.id = nanoid()
|
||||||
@@ -32,21 +32,28 @@ export default {
|
|||||||
return newInquiry
|
return newInquiry
|
||||||
},
|
},
|
||||||
|
|
||||||
isTabNeedName (inquiryTab) {
|
isTabNeedName(inquiryTab) {
|
||||||
return inquiryTab.isPredefined || !inquiryTab.name
|
return inquiryTab.isPredefined || !inquiryTab.name
|
||||||
},
|
},
|
||||||
|
|
||||||
updateStorage (inquiries) {
|
updateStorage(inquiries) {
|
||||||
localStorage.setItem('myInquiries', JSON.stringify({ version: this.version, inquiries }))
|
localStorage.setItem(
|
||||||
|
'myInquiries',
|
||||||
|
JSON.stringify({ version: this.version, inquiries })
|
||||||
|
)
|
||||||
},
|
},
|
||||||
|
|
||||||
serialiseInquiries (inquiryList) {
|
serialiseInquiries(inquiryList) {
|
||||||
const preparedData = JSON.parse(JSON.stringify(inquiryList))
|
const preparedData = JSON.parse(JSON.stringify(inquiryList))
|
||||||
preparedData.forEach(inquiry => delete inquiry.isPredefined)
|
preparedData.forEach(inquiry => delete inquiry.isPredefined)
|
||||||
return JSON.stringify({ version: this.version, inquiries: preparedData }, null, 4)
|
return JSON.stringify(
|
||||||
|
{ version: this.version, inquiries: preparedData },
|
||||||
|
null,
|
||||||
|
4
|
||||||
|
)
|
||||||
},
|
},
|
||||||
|
|
||||||
deserialiseInquiries (str) {
|
deserialiseInquiries(str) {
|
||||||
const inquiries = JSON.parse(str)
|
const inquiries = JSON.parse(str)
|
||||||
let inquiryList = []
|
let inquiryList = []
|
||||||
if (!inquiries.version) {
|
if (!inquiries.version) {
|
||||||
@@ -59,7 +66,9 @@ export default {
|
|||||||
|
|
||||||
// Generate new ids if they are the same as existing inquiries
|
// Generate new ids if they are the same as existing inquiries
|
||||||
inquiryList.forEach(inquiry => {
|
inquiryList.forEach(inquiry => {
|
||||||
const allInquiriesIds = this.getStoredInquiries().map(inquiry => inquiry.id)
|
const allInquiriesIds = this.getStoredInquiries().map(
|
||||||
|
inquiry => inquiry.id
|
||||||
|
)
|
||||||
if (allInquiriesIds.includes(inquiry.id)) {
|
if (allInquiriesIds.includes(inquiry.id)) {
|
||||||
inquiry.id = nanoid()
|
inquiry.id = nanoid()
|
||||||
}
|
}
|
||||||
@@ -68,9 +77,8 @@ export default {
|
|||||||
return inquiryList
|
return inquiryList
|
||||||
},
|
},
|
||||||
|
|
||||||
importInquiries () {
|
importInquiries() {
|
||||||
return fu.importFile()
|
return fu.importFile().then(str => {
|
||||||
.then(str => {
|
|
||||||
const inquires = this.deserialiseInquiries(str)
|
const inquires = this.deserialiseInquiries(str)
|
||||||
|
|
||||||
events.send('inquiry.import', inquires.length)
|
events.send('inquiry.import', inquires.length)
|
||||||
@@ -78,14 +86,14 @@ export default {
|
|||||||
return inquires
|
return inquires
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
export (inquiryList, fileName) {
|
export(inquiryList, fileName) {
|
||||||
const jsonStr = this.serialiseInquiries(inquiryList)
|
const jsonStr = this.serialiseInquiries(inquiryList)
|
||||||
fu.exportToFile(jsonStr, fileName)
|
fu.exportToFile(jsonStr, fileName)
|
||||||
|
|
||||||
events.send('inquiry.export', inquiryList.length)
|
events.send('inquiry.export', inquiryList.length)
|
||||||
},
|
},
|
||||||
|
|
||||||
async readPredefinedInquiries () {
|
async readPredefinedInquiries() {
|
||||||
const res = await fu.readFile('./inquiries.json')
|
const res = await fu.readFile('./inquiries.json')
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
|
|
||||||
|
|||||||
@@ -3,10 +3,12 @@ import time from '@/lib/utils/time'
|
|||||||
import events from '@/lib/utils/events'
|
import events from '@/lib/utils/events'
|
||||||
|
|
||||||
export default class Tab {
|
export default class Tab {
|
||||||
constructor (state, inquiry = {}) {
|
constructor(state, inquiry = {}) {
|
||||||
this.id = inquiry.id || nanoid()
|
this.id = inquiry.id || nanoid()
|
||||||
this.name = inquiry.id ? inquiry.name : null
|
this.name = inquiry.id ? inquiry.name : null
|
||||||
this.tempName = inquiry.name || (state.untitledLastIndex
|
this.tempName =
|
||||||
|
inquiry.name ||
|
||||||
|
(state.untitledLastIndex
|
||||||
? `Untitled ${state.untitledLastIndex}`
|
? `Untitled ${state.untitledLastIndex}`
|
||||||
: 'Untitled')
|
: 'Untitled')
|
||||||
this.query = inquiry.query
|
this.query = inquiry.query
|
||||||
@@ -28,7 +30,7 @@ export default class Tab {
|
|||||||
this.state = state
|
this.state = state
|
||||||
}
|
}
|
||||||
|
|
||||||
async execute () {
|
async execute() {
|
||||||
this.isGettingResults = true
|
this.isGettingResults = true
|
||||||
this.result = null
|
this.result = null
|
||||||
this.error = null
|
this.error = null
|
||||||
@@ -39,7 +41,8 @@ export default class Tab {
|
|||||||
this.time = time.getPeriod(start, new Date())
|
this.time = time.getPeriod(start, new Date())
|
||||||
|
|
||||||
if (this.result && this.result.values) {
|
if (this.result && this.result.values) {
|
||||||
events.send('resultset.create',
|
events.send(
|
||||||
|
'resultset.create',
|
||||||
this.result.values[this.result.columns[0]].length
|
this.result.values[this.result.columns[0]].length
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,14 +2,14 @@ import Lib from 'plotly.js/src/lib'
|
|||||||
import dataUrlToBlob from 'dataurl-to-blob'
|
import dataUrlToBlob from 'dataurl-to-blob'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
async copyText (str, notifyMessage) {
|
async copyText(str, notifyMessage) {
|
||||||
await navigator.clipboard.writeText(str)
|
await navigator.clipboard.writeText(str)
|
||||||
if (notifyMessage) {
|
if (notifyMessage) {
|
||||||
Lib.notifier(notifyMessage, 'long')
|
Lib.notifier(notifyMessage, 'long')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async copyImage (source) {
|
async copyImage(source) {
|
||||||
if (source instanceof HTMLCanvasElement) {
|
if (source instanceof HTMLCanvasElement) {
|
||||||
return this._copyCanvas(source)
|
return this._copyCanvas(source)
|
||||||
} else {
|
} else {
|
||||||
@@ -17,24 +17,29 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async _copyBlob (blob) {
|
async _copyBlob(blob) {
|
||||||
await navigator.clipboard.write([
|
await navigator.clipboard.write([
|
||||||
new ClipboardItem({ // eslint-disable-line no-undef
|
new ClipboardItem({
|
||||||
|
// eslint-disable-line no-undef
|
||||||
[blob.type]: blob
|
[blob.type]: blob
|
||||||
})
|
})
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
|
|
||||||
async _copyFromDataUrl (url) {
|
async _copyFromDataUrl(url) {
|
||||||
const blob = dataUrlToBlob(url)
|
const blob = dataUrlToBlob(url)
|
||||||
await this._copyBlob(blob)
|
await this._copyBlob(blob)
|
||||||
Lib.notifier('Image copied to clipboard successfully', 'long')
|
Lib.notifier('Image copied to clipboard successfully', 'long')
|
||||||
},
|
},
|
||||||
|
|
||||||
async _copyCanvas (canvas) {
|
async _copyCanvas(canvas) {
|
||||||
canvas.toBlob(async (blob) => {
|
canvas.toBlob(
|
||||||
|
async blob => {
|
||||||
await this._copyBlob(blob)
|
await this._copyBlob(blob)
|
||||||
Lib.notifier('Image copied to clipboard successfully', 'long')
|
Lib.notifier('Image copied to clipboard successfully', 'long')
|
||||||
}, 'image/png', 1)
|
},
|
||||||
|
'image/png',
|
||||||
|
1
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
export default {
|
export default {
|
||||||
send (name, value, labels) {
|
send(name, value, labels) {
|
||||||
const event = new CustomEvent('sqliteviz-app-event', {
|
const event = new CustomEvent('sqliteviz-app-event', {
|
||||||
detail: {
|
detail: {
|
||||||
name,
|
name,
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
export default {
|
export default {
|
||||||
isJSON (file) {
|
isJSON(file) {
|
||||||
return file && file.type === 'application/json'
|
return file && file.type === 'application/json'
|
||||||
},
|
},
|
||||||
isNDJSON (file) {
|
isNDJSON(file) {
|
||||||
return file && file.name.endsWith('.ndjson')
|
return file && file.name.endsWith('.ndjson')
|
||||||
},
|
},
|
||||||
isDatabase (file) {
|
isDatabase(file) {
|
||||||
const dbTypes = ['application/vnd.sqlite3', 'application/x-sqlite3']
|
const dbTypes = ['application/vnd.sqlite3', 'application/x-sqlite3']
|
||||||
return file.type
|
return file.type
|
||||||
? dbTypes.includes(file.type)
|
? dbTypes.includes(file.type)
|
||||||
: /\.(db|sqlite(3)?)+$/.test(file.name)
|
: /\.(db|sqlite(3)?)+$/.test(file.name)
|
||||||
},
|
},
|
||||||
|
|
||||||
getFileName (file) {
|
getFileName(file) {
|
||||||
return file.name.replace(/\.[^.]+$/, '')
|
return file.name.replace(/\.[^.]+$/, '')
|
||||||
},
|
},
|
||||||
|
|
||||||
downloadFromUrl (url, fileName) {
|
downloadFromUrl(url, fileName) {
|
||||||
// Create downloader
|
// Create downloader
|
||||||
const downloader = document.createElement('a')
|
const downloader = document.createElement('a')
|
||||||
downloader.href = url
|
downloader.href = url
|
||||||
@@ -29,7 +29,7 @@ export default {
|
|||||||
URL.revokeObjectURL(url)
|
URL.revokeObjectURL(url)
|
||||||
},
|
},
|
||||||
|
|
||||||
async exportToFile (str, fileName, type = 'octet/stream') {
|
async exportToFile(str, fileName, type = 'octet/stream') {
|
||||||
const blob = new Blob([str], { type })
|
const blob = new Blob([str], { type })
|
||||||
const url = URL.createObjectURL(blob)
|
const url = URL.createObjectURL(blob)
|
||||||
this.downloadFromUrl(url, fileName)
|
this.downloadFromUrl(url, fileName)
|
||||||
@@ -40,7 +40,7 @@ export default {
|
|||||||
* it will be an unsettled promise. But it's grabbed by
|
* it will be an unsettled promise. But it's grabbed by
|
||||||
* the garbage collector (tested with FinalizationRegistry).
|
* the garbage collector (tested with FinalizationRegistry).
|
||||||
*/
|
*/
|
||||||
getFileFromUser (type) {
|
getFileFromUser(type) {
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
const uploader = document.createElement('input')
|
const uploader = document.createElement('input')
|
||||||
|
|
||||||
@@ -56,14 +56,13 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
importFile () {
|
importFile() {
|
||||||
return this.getFileFromUser('.json')
|
return this.getFileFromUser('.json').then(file => {
|
||||||
.then(file => {
|
|
||||||
return this.getFileContent(file)
|
return this.getFileContent(file)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
getFileContent (file) {
|
getFileContent(file) {
|
||||||
const reader = new FileReader()
|
const reader = new FileReader()
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
reader.onload = e => resolve(e.target.result)
|
reader.onload = e => resolve(e.target.result)
|
||||||
@@ -71,11 +70,11 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
readFile (path) {
|
readFile(path) {
|
||||||
return fetch(path)
|
return fetch(path)
|
||||||
},
|
},
|
||||||
|
|
||||||
readAsArrayBuffer (file) {
|
readAsArrayBuffer(file) {
|
||||||
const fileReader = new FileReader()
|
const fileReader = new FileReader()
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
export default {
|
export default {
|
||||||
getPeriod (start, end) {
|
getPeriod(start, end) {
|
||||||
const diff = end.getTime() - start.getTime()
|
const diff = end.getTime() - start.getTime()
|
||||||
const seconds = diff / 1000
|
const seconds = diff / 1000
|
||||||
return seconds.toFixed(3) + 's'
|
return seconds.toFixed(3) + 's'
|
||||||
},
|
},
|
||||||
|
|
||||||
debounce (func, ms) {
|
debounce(func, ms) {
|
||||||
let timeout
|
let timeout
|
||||||
return function () {
|
return function () {
|
||||||
clearTimeout(timeout)
|
clearTimeout(timeout)
|
||||||
@@ -13,9 +13,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
sleep (ms) {
|
sleep(ms) {
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
setTimeout(() => { resolve() }, ms)
|
setTimeout(() => {
|
||||||
|
resolve()
|
||||||
|
}, ms)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import events from '@/lib/utils/events'
|
import events from '@/lib/utils/events'
|
||||||
let refresh = false
|
let refresh = false
|
||||||
|
|
||||||
function invokeServiceWorkerUpdateFlow (registration) {
|
function invokeServiceWorkerUpdateFlow(registration) {
|
||||||
const agree = confirm('New version of the app is available. Refresh now?')
|
const agree = confirm('New version of the app is available. Refresh now?')
|
||||||
if (agree) {
|
if (agree) {
|
||||||
if (registration.waiting) {
|
if (registration.waiting) {
|
||||||
@@ -14,7 +14,8 @@ function invokeServiceWorkerUpdateFlow (registration) {
|
|||||||
|
|
||||||
if ('serviceWorker' in navigator) {
|
if ('serviceWorker' in navigator) {
|
||||||
window.addEventListener('load', async () => {
|
window.addEventListener('load', async () => {
|
||||||
const registration = await navigator.serviceWorker.register('service-worker.js')
|
const registration =
|
||||||
|
await navigator.serviceWorker.register('service-worker.js')
|
||||||
// ensure the case when the updatefound event was missed is also handled
|
// ensure the case when the updatefound event was missed is also handled
|
||||||
// by re-invoking the prompt when there's a waiting Service Worker
|
// by re-invoking the prompt when there's a waiting Service Worker
|
||||||
if (registration.waiting) {
|
if (registration.waiting) {
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import Tab from '@/lib/tab'
|
|||||||
import { nanoid } from 'nanoid'
|
import { nanoid } from 'nanoid'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
async addTab ({ state }, inquiry = {}) {
|
async addTab({ state }, inquiry = {}) {
|
||||||
// add new tab only if it was not already opened
|
// add new tab only if it was not already opened
|
||||||
if (!state.tabs.some(openedTab => openedTab.id === inquiry.id)) {
|
if (!state.tabs.some(openedTab => openedTab.id === inquiry.id)) {
|
||||||
const tab = new Tab(state, JSON.parse(JSON.stringify(inquiry)))
|
const tab = new Tab(state, JSON.parse(JSON.stringify(inquiry)))
|
||||||
@@ -15,7 +15,7 @@ export default {
|
|||||||
|
|
||||||
return inquiry.id
|
return inquiry.id
|
||||||
},
|
},
|
||||||
async saveInquiry ({ state }, { inquiryTab, newName }) {
|
async saveInquiry({ state }, { inquiryTab, newName }) {
|
||||||
const value = {
|
const value = {
|
||||||
id: inquiryTab.isPredefined ? nanoid() : inquiryTab.id,
|
id: inquiryTab.isPredefined ? nanoid() : inquiryTab.id,
|
||||||
query: inquiryTab.query,
|
query: inquiryTab.query,
|
||||||
@@ -31,7 +31,9 @@ export default {
|
|||||||
if (newName) {
|
if (newName) {
|
||||||
value.createdAt = new Date()
|
value.createdAt = new Date()
|
||||||
} else {
|
} else {
|
||||||
var inquiryIndex = myInquiries.findIndex(oldInquiry => oldInquiry.id === inquiryTab.id)
|
var inquiryIndex = myInquiries.findIndex(
|
||||||
|
oldInquiry => oldInquiry.id === inquiryTab.id
|
||||||
|
)
|
||||||
value.createdAt = myInquiries[inquiryIndex].createdAt
|
value.createdAt = myInquiries[inquiryIndex].createdAt
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -44,10 +46,10 @@ export default {
|
|||||||
|
|
||||||
return value
|
return value
|
||||||
},
|
},
|
||||||
addInquiry ({ state }, newInquiry) {
|
addInquiry({ state }, newInquiry) {
|
||||||
state.inquiries.push(newInquiry)
|
state.inquiries.push(newInquiry)
|
||||||
},
|
},
|
||||||
deleteInquiries ({ state, commit }, inquiryIdSet) {
|
deleteInquiries({ state, commit }, inquiryIdSet) {
|
||||||
state.inquiries = state.inquiries.filter(
|
state.inquiries = state.inquiries.filter(
|
||||||
inquiry => !inquiryIdSet.has(inquiry.id)
|
inquiry => !inquiryIdSet.has(inquiry.id)
|
||||||
)
|
)
|
||||||
@@ -62,9 +64,10 @@ export default {
|
|||||||
i--
|
i--
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
renameInquiry ({ state, commit }, { inquiryId, newName }) {
|
renameInquiry({ state, commit }, { inquiryId, newName }) {
|
||||||
const renamingInquiry = state.inquiries
|
const renamingInquiry = state.inquiries.find(
|
||||||
.find(inquiry => inquiry.id === inquiryId)
|
inquiry => inquiry.id === inquiryId
|
||||||
|
)
|
||||||
|
|
||||||
renamingInquiry.name = newName
|
renamingInquiry.name = newName
|
||||||
|
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
export default {
|
export default {
|
||||||
setDb (state, db) {
|
setDb(state, db) {
|
||||||
if (state.db) {
|
if (state.db) {
|
||||||
state.db.shutDown()
|
state.db.shutDown()
|
||||||
}
|
}
|
||||||
state.db = db
|
state.db = db
|
||||||
},
|
},
|
||||||
|
|
||||||
updateTab (state, { tab, newValues }) {
|
updateTab(state, { tab, newValues }) {
|
||||||
const { name, id, query, viewType, viewOptions, isSaved } = newValues
|
const { name, id, query, viewType, viewOptions, isSaved } = newValues
|
||||||
const oldId = tab.id
|
const oldId = tab.id
|
||||||
|
|
||||||
@@ -14,19 +14,31 @@ export default {
|
|||||||
state.currentTabId = id
|
state.currentTabId = id
|
||||||
}
|
}
|
||||||
|
|
||||||
if (id) { tab.id = id }
|
if (id) {
|
||||||
if (name) { tab.name = name }
|
tab.id = id
|
||||||
if (query) { tab.query = query }
|
}
|
||||||
if (viewType) { tab.viewType = viewType }
|
if (name) {
|
||||||
if (viewOptions) { tab.viewOptions = viewOptions }
|
tab.name = name
|
||||||
if (isSaved !== undefined) { tab.isSaved = isSaved }
|
}
|
||||||
|
if (query) {
|
||||||
|
tab.query = query
|
||||||
|
}
|
||||||
|
if (viewType) {
|
||||||
|
tab.viewType = viewType
|
||||||
|
}
|
||||||
|
if (viewOptions) {
|
||||||
|
tab.viewOptions = viewOptions
|
||||||
|
}
|
||||||
|
if (isSaved !== undefined) {
|
||||||
|
tab.isSaved = isSaved
|
||||||
|
}
|
||||||
if (isSaved) {
|
if (isSaved) {
|
||||||
// Saved inquiry is not predefined
|
// Saved inquiry is not predefined
|
||||||
delete tab.isPredefined
|
delete tab.isPredefined
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
deleteTab (state, tab) {
|
deleteTab(state, tab) {
|
||||||
const index = state.tabs.indexOf(tab)
|
const index = state.tabs.indexOf(tab)
|
||||||
// If closing tab is the current opened
|
// If closing tab is the current opened
|
||||||
if (tab.id === state.currentTabId) {
|
if (tab.id === state.currentTabId) {
|
||||||
@@ -44,27 +56,29 @@ export default {
|
|||||||
}
|
}
|
||||||
state.tabs.splice(index, 1)
|
state.tabs.splice(index, 1)
|
||||||
},
|
},
|
||||||
setCurrentTabId (state, id) {
|
setCurrentTabId(state, id) {
|
||||||
try {
|
try {
|
||||||
state.currentTabId = id
|
state.currentTabId = id
|
||||||
state.currentTab = state.tabs.find(tab => tab.id === id)
|
state.currentTab = state.tabs.find(tab => tab.id === id)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Can\'t open a tab id:' + id)
|
console.error("Can't open a tab id:" + id)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
updatePredefinedInquiries (state, inquiries) {
|
updatePredefinedInquiries(state, inquiries) {
|
||||||
state.predefinedInquiries = Array.isArray(inquiries) ? inquiries : [inquiries]
|
state.predefinedInquiries = Array.isArray(inquiries)
|
||||||
|
? inquiries
|
||||||
|
: [inquiries]
|
||||||
},
|
},
|
||||||
setLoadingPredefinedInquiries (state, value) {
|
setLoadingPredefinedInquiries(state, value) {
|
||||||
state.loadingPredefinedInquiries = value
|
state.loadingPredefinedInquiries = value
|
||||||
},
|
},
|
||||||
setPredefinedInquiriesLoaded (state, value) {
|
setPredefinedInquiriesLoaded(state, value) {
|
||||||
state.predefinedInquiriesLoaded = value
|
state.predefinedInquiriesLoaded = value
|
||||||
},
|
},
|
||||||
setInquiries (state, value) {
|
setInquiries(state, value) {
|
||||||
state.inquiries = value
|
state.inquiries = value
|
||||||
},
|
},
|
||||||
setIsWorkspaceVisible (state, value) {
|
setIsWorkspaceVisible(state, value) {
|
||||||
state.isWorkspaceVisible = value
|
state.isWorkspaceVisible = value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
tooltipStyle: {
|
tooltipStyle: {
|
||||||
visibility: 'hidden'
|
visibility: 'hidden'
|
||||||
@@ -7,13 +7,15 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
tooltipElement () {
|
tooltipElement() {
|
||||||
return this.$refs.tooltip
|
return this.$refs.tooltip
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
showTooltip (e, tooltipPosition) {
|
showTooltip(e, tooltipPosition) {
|
||||||
const position = tooltipPosition ? tooltipPosition.split('-') : ['top', 'right']
|
const position = tooltipPosition
|
||||||
|
? tooltipPosition.split('-')
|
||||||
|
: ['top', 'right']
|
||||||
const offset = 12
|
const offset = 12
|
||||||
|
|
||||||
if (position[0] === 'top') {
|
if (position[0] === 'top') {
|
||||||
@@ -25,12 +27,13 @@ export default {
|
|||||||
if (position[1] === 'right') {
|
if (position[1] === 'right') {
|
||||||
this.tooltipStyle.left = e.clientX + offset + 'px'
|
this.tooltipStyle.left = e.clientX + offset + 'px'
|
||||||
} else {
|
} else {
|
||||||
this.tooltipStyle.left = e.clientX - offset - this.tooltipElement.offsetWidth + 'px'
|
this.tooltipStyle.left =
|
||||||
|
e.clientX - offset - this.tooltipElement.offsetWidth + 'px'
|
||||||
}
|
}
|
||||||
|
|
||||||
this.tooltipStyle.visibility = 'visible'
|
this.tooltipStyle.visibility = 'visible'
|
||||||
},
|
},
|
||||||
hideTooltip () {
|
hideTooltip() {
|
||||||
this.tooltipStyle.visibility = 'hidden'
|
this.tooltipStyle.visibility = 'hidden'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<logs
|
<logs id="logs" :messages="messages" />
|
||||||
id="logs"
|
|
||||||
:messages="messages"
|
|
||||||
/>
|
|
||||||
<button
|
<button
|
||||||
v-if="hasErrors"
|
v-if="hasErrors"
|
||||||
id="open-workspace-btn"
|
id="open-workspace-btn"
|
||||||
class="secondary"
|
class="secondary"
|
||||||
@click="$router.push('/workspace?hide_schema=1')">
|
@click="$router.push('/workspace?hide_schema=1')"
|
||||||
|
>
|
||||||
Open workspace
|
Open workspace
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -25,7 +23,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
Logs
|
Logs
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
newDb: null,
|
newDb: null,
|
||||||
messages: [],
|
messages: [],
|
||||||
@@ -34,11 +32,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
hasErrors () {
|
hasErrors() {
|
||||||
return this.dataMsg.type === 'error' || this.inquiryMsg.type === 'error'
|
return this.dataMsg.type === 'error' || this.inquiryMsg.type === 'error'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async created () {
|
async created() {
|
||||||
const {
|
const {
|
||||||
data_url: dataUrl,
|
data_url: dataUrl,
|
||||||
data_format: dataFormat,
|
data_format: dataFormat,
|
||||||
@@ -65,7 +63,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async loadData (dataUrl, dataFormat) {
|
async loadData(dataUrl, dataFormat) {
|
||||||
this.newDb = database.getNewDatabase()
|
this.newDb = database.getNewDatabase()
|
||||||
if (dataUrl) {
|
if (dataUrl) {
|
||||||
this.dataMsg = {
|
this.dataMsg = {
|
||||||
@@ -95,7 +93,7 @@ export default {
|
|||||||
}
|
}
|
||||||
this.$store.commit('setDb', this.newDb)
|
this.$store.commit('setDb', this.newDb)
|
||||||
},
|
},
|
||||||
async getSqliteDb (dataUrl) {
|
async getSqliteDb(dataUrl) {
|
||||||
try {
|
try {
|
||||||
const filename = new URL(dataUrl).pathname.split('/').pop()
|
const filename = new URL(dataUrl).pathname.split('/').pop()
|
||||||
const res = await fu.readFile(dataUrl)
|
const res = await fu.readFile(dataUrl)
|
||||||
@@ -114,7 +112,7 @@ export default {
|
|||||||
this.dataMsg.type = 'error'
|
this.dataMsg.type = 'error'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async loadInquiries (inquiryUrl, inquiryIds = []) {
|
async loadInquiries(inquiryUrl, inquiryIds = []) {
|
||||||
if (!inquiryUrl) {
|
if (!inquiryUrl) {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
@@ -148,7 +146,7 @@ export default {
|
|||||||
// Loading indicator is not needed anymore
|
// Loading indicator is not needed anymore
|
||||||
clearTimeout(loadingInquiriesIndicator)
|
clearTimeout(loadingInquiriesIndicator)
|
||||||
},
|
},
|
||||||
async openInquiries (inquiries, maximize) {
|
async openInquiries(inquiries, maximize) {
|
||||||
let tabToOpen = null
|
let tabToOpen = null
|
||||||
const layout = maximize ? this.getLayout(maximize) : undefined
|
const layout = maximize ? this.getLayout(maximize) : undefined
|
||||||
for (const inquiry of inquiries) {
|
for (const inquiry of inquiries) {
|
||||||
@@ -167,7 +165,7 @@ export default {
|
|||||||
this.$store.state.currentTab.execute()
|
this.$store.state.currentTab.execute()
|
||||||
},
|
},
|
||||||
|
|
||||||
getLayout (panelToMaximize) {
|
getLayout(panelToMaximize) {
|
||||||
if (panelToMaximize === 'dataView') {
|
if (panelToMaximize === 'dataView') {
|
||||||
return {
|
return {
|
||||||
sqlEditor: 'hidden',
|
sqlEditor: 'hidden',
|
||||||
@@ -190,7 +188,6 @@ export default {
|
|||||||
#logs {
|
#logs {
|
||||||
margin: 8px auto;
|
margin: 8px auto;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#open-workspace-btn {
|
#open-workspace-btn {
|
||||||
|
|||||||
@@ -5,22 +5,18 @@
|
|||||||
src="~@/assets/images/info.svg"
|
src="~@/assets/images/info.svg"
|
||||||
@click="$modal.show('app-info')"
|
@click="$modal.show('app-info')"
|
||||||
/>
|
/>
|
||||||
<modal
|
<modal modal-id="app-info" class="dialog" content-class="app-info-modal">
|
||||||
modal-id="app-info"
|
|
||||||
class="dialog"
|
|
||||||
content-class="app-info-modal"
|
|
||||||
>
|
|
||||||
<div class="dialog-header">
|
<div class="dialog-header">
|
||||||
App info
|
App info
|
||||||
<close-icon @click="$modal.hide('app-info')"/>
|
<close-icon @click="$modal.hide('app-info')" />
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-body">
|
<div class="dialog-body">
|
||||||
<div v-for="(item, index) in info" :key="index" class="info-item">
|
<div v-for="(item, index) in info" :key="index" class="info-item">
|
||||||
{{item.name}}
|
{{ item.name }}
|
||||||
<div class="divider"/>
|
<div class="divider" />
|
||||||
<div class="options">
|
<div class="options">
|
||||||
<div v-for="(opt, index) in item.info" :key="index">
|
<div v-for="(opt, index) in item.info" :key="index">
|
||||||
{{opt}}
|
{{ opt }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -36,7 +32,7 @@ import { version } from '../../../package.json'
|
|||||||
export default {
|
export default {
|
||||||
name: 'AppDiagnosticInfo',
|
name: 'AppDiagnosticInfo',
|
||||||
components: { CloseIcon },
|
components: { CloseIcon },
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
info: [
|
info: [
|
||||||
{
|
{
|
||||||
@@ -47,7 +43,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async created () {
|
async created() {
|
||||||
const state = this.$store.state
|
const state = this.$store.state
|
||||||
let result = (await state.db.execute('select sqlite_version()')).values
|
let result = (await state.db.execute('select sqlite_version()')).values
|
||||||
this.info.push({
|
this.info.push({
|
||||||
|
|||||||
@@ -10,13 +10,21 @@
|
|||||||
id="loading-predefined-status"
|
id="loading-predefined-status"
|
||||||
v-if="$store.state.loadingPredefinedInquiries"
|
v-if="$store.state.loadingPredefinedInquiries"
|
||||||
>
|
>
|
||||||
<loading-indicator/>
|
<loading-indicator />
|
||||||
Loading predefined inquiries...
|
Loading predefined inquiries...
|
||||||
</div>
|
</div>
|
||||||
<div id="my-inquiries-content" ref="my-inquiries-content" v-show="allInquiries.length > 0">
|
<div
|
||||||
|
id="my-inquiries-content"
|
||||||
|
ref="my-inquiries-content"
|
||||||
|
v-show="allInquiries.length > 0"
|
||||||
|
>
|
||||||
<div id="my-inquiries-toolbar">
|
<div id="my-inquiries-toolbar">
|
||||||
<div id="toolbar-buttons">
|
<div id="toolbar-buttons">
|
||||||
<button id="toolbar-btns-import" class="toolbar" @click="importInquiries">
|
<button
|
||||||
|
id="toolbar-btns-import"
|
||||||
|
class="toolbar"
|
||||||
|
@click="importInquiries"
|
||||||
|
>
|
||||||
Import
|
Import
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@@ -37,7 +45,11 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="toolbar-search">
|
<div id="toolbar-search">
|
||||||
<text-field placeholder="Search inquiry by name" width="300px" v-model="filter"/>
|
<text-field
|
||||||
|
placeholder="Search inquiry by name"
|
||||||
|
width="300px"
|
||||||
|
v-model="filter"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -49,15 +61,20 @@
|
|||||||
<div class="header-container">
|
<div class="header-container">
|
||||||
<div>
|
<div>
|
||||||
<div class="fixed-header" ref="name-th">
|
<div class="fixed-header" ref="name-th">
|
||||||
<check-box ref="mainCheckBox" theme="light" @click="toggleSelectAll"/>
|
<check-box
|
||||||
|
ref="mainCheckBox"
|
||||||
|
theme="light"
|
||||||
|
@click="toggleSelectAll"
|
||||||
|
/>
|
||||||
<div class="name-th">Name</div>
|
<div class="name-th">Name</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="fixed-header">
|
<div class="fixed-header">Created at</div>
|
||||||
Created at
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div
|
||||||
<div class="table-container" :style="{ 'max-height': `${maxTableHeight}px` }">
|
class="table-container"
|
||||||
|
:style="{ 'max-height': `${maxTableHeight}px` }"
|
||||||
|
>
|
||||||
<table ref="table" class="sqliteviz-table">
|
<table ref="table" class="sqliteviz-table">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr
|
<tr
|
||||||
@@ -81,9 +98,13 @@
|
|||||||
@mouseleave="hideTooltip"
|
@mouseleave="hideTooltip"
|
||||||
>
|
>
|
||||||
Predefined
|
Predefined
|
||||||
<span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
|
<span
|
||||||
Predefined inquiries come from the server.
|
class="icon-tooltip"
|
||||||
These inquiries can’t be deleted or renamed.
|
:style="tooltipStyle"
|
||||||
|
ref="tooltip"
|
||||||
|
>
|
||||||
|
Predefined inquiries come from the server. These
|
||||||
|
inquiries can’t be deleted or renamed.
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -98,7 +119,7 @@
|
|||||||
v-if="!inquiry.isPredefined"
|
v-if="!inquiry.isPredefined"
|
||||||
@click="showRenameDialog(inquiry.id)"
|
@click="showRenameDialog(inquiry.id)"
|
||||||
/>
|
/>
|
||||||
<copy-icon @click="duplicateInquiry(index)"/>
|
<copy-icon @click="duplicateInquiry(index)" />
|
||||||
<export-icon
|
<export-icon
|
||||||
@click="exportToFile([inquiry], `${inquiry.name}.json`)"
|
@click="exportToFile([inquiry], `${inquiry.name}.json`)"
|
||||||
tooltip="Export inquiry to file"
|
tooltip="Export inquiry to file"
|
||||||
@@ -106,7 +127,7 @@
|
|||||||
/>
|
/>
|
||||||
<delete-icon
|
<delete-icon
|
||||||
v-if="!inquiry.isPredefined"
|
v-if="!inquiry.isPredefined"
|
||||||
@click="showDeleteDialog((new Set()).add(inquiry.id))"
|
@click="showDeleteDialog(new Set().add(inquiry.id))"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -122,7 +143,7 @@
|
|||||||
<modal modal-id="rename" class="dialog" content-style="width: 560px;">
|
<modal modal-id="rename" class="dialog" content-style="width: 560px;">
|
||||||
<div class="dialog-header">
|
<div class="dialog-header">
|
||||||
Rename inquiry
|
Rename inquiry
|
||||||
<close-icon @click="$modal.hide('rename')"/>
|
<close-icon @click="$modal.hide('rename')" />
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-body">
|
<div class="dialog-body">
|
||||||
<text-field
|
<text-field
|
||||||
@@ -142,12 +163,15 @@
|
|||||||
<modal modal-id="delete" class="dialog" content-style="width: 480px;">
|
<modal modal-id="delete" class="dialog" content-style="width: 480px;">
|
||||||
<div class="dialog-header">
|
<div class="dialog-header">
|
||||||
Delete {{ deleteGroup ? 'inquiries' : 'inquiry' }}
|
Delete {{ deleteGroup ? 'inquiries' : 'inquiry' }}
|
||||||
<close-icon @click="$modal.hide('delete')"/>
|
<close-icon @click="$modal.hide('delete')" />
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-body">
|
<div class="dialog-body">
|
||||||
{{ deleteDialogMsg }}
|
{{ deleteDialogMsg }}
|
||||||
<div v-show="selectedInquiriesCount > selectedNotPredefinedCount" id="note">
|
<div
|
||||||
<img src="~@/assets/images/info.svg">
|
v-show="selectedInquiriesCount > selectedNotPredefinedCount"
|
||||||
|
id="note"
|
||||||
|
>
|
||||||
|
<img src="~@/assets/images/info.svg" />
|
||||||
Note: Predefined inquiries you've selected won't be deleted
|
Note: Predefined inquiries you've selected won't be deleted
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -156,7 +180,7 @@
|
|||||||
<button class="primary" @click="deleteInquiry">Delete</button>
|
<button class="primary" @click="deleteInquiry">Delete</button>
|
||||||
</div>
|
</div>
|
||||||
</modal>
|
</modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -185,7 +209,7 @@ export default {
|
|||||||
LoadingIndicator
|
LoadingIndicator
|
||||||
},
|
},
|
||||||
mixins: [tooltipMixin],
|
mixins: [tooltipMixin],
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
filter: null,
|
filter: null,
|
||||||
newName: null,
|
newName: null,
|
||||||
@@ -201,47 +225,51 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
inquiries () {
|
inquiries() {
|
||||||
return this.$store.state.inquiries
|
return this.$store.state.inquiries
|
||||||
},
|
},
|
||||||
predefinedInquiries () {
|
predefinedInquiries() {
|
||||||
return this.$store.state.predefinedInquiries.map(inquiry => {
|
return this.$store.state.predefinedInquiries.map(inquiry => {
|
||||||
inquiry.isPredefined = true
|
inquiry.isPredefined = true
|
||||||
return inquiry
|
return inquiry
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
predefinedInquiriesIds () {
|
predefinedInquiriesIds() {
|
||||||
return new Set(this.predefinedInquiries.map(inquiry => inquiry.id))
|
return new Set(this.predefinedInquiries.map(inquiry => inquiry.id))
|
||||||
},
|
},
|
||||||
showedInquiries () {
|
showedInquiries() {
|
||||||
let showedInquiries = this.allInquiries
|
let showedInquiries = this.allInquiries
|
||||||
if (this.filter) {
|
if (this.filter) {
|
||||||
showedInquiries = showedInquiries.filter(
|
showedInquiries = showedInquiries.filter(
|
||||||
inquiry => inquiry.name.toUpperCase().indexOf(this.filter.toUpperCase()) >= 0
|
inquiry =>
|
||||||
|
inquiry.name.toUpperCase().indexOf(this.filter.toUpperCase()) >= 0
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
return showedInquiries
|
return showedInquiries
|
||||||
},
|
},
|
||||||
|
|
||||||
allInquiries () {
|
allInquiries() {
|
||||||
return this.predefinedInquiries.concat(this.inquiries)
|
return this.predefinedInquiries.concat(this.inquiries)
|
||||||
},
|
},
|
||||||
processedInquiryIndex () {
|
processedInquiryIndex() {
|
||||||
return this.inquiries.findIndex(inquiry => inquiry.id === this.processedInquiryId)
|
return this.inquiries.findIndex(
|
||||||
|
inquiry => inquiry.id === this.processedInquiryId
|
||||||
|
)
|
||||||
},
|
},
|
||||||
deleteDialogMsg () {
|
deleteDialogMsg() {
|
||||||
if (!this.deleteGroup && (
|
if (
|
||||||
this.processedInquiryIndex === null ||
|
!this.deleteGroup &&
|
||||||
|
(this.processedInquiryIndex === null ||
|
||||||
this.processedInquiryIndex < 0 ||
|
this.processedInquiryIndex < 0 ||
|
||||||
this.processedInquiryIndex > this.inquiries.length
|
this.processedInquiryIndex > this.inquiries.length)
|
||||||
)) {
|
) {
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteItem = this.deleteGroup
|
const deleteItem = this.deleteGroup
|
||||||
? `${this.selectedNotPredefinedCount} ${this.selectedNotPredefinedCount > 1
|
? `${this.selectedNotPredefinedCount} ${
|
||||||
? 'inquiries'
|
this.selectedNotPredefinedCount > 1 ? 'inquiries' : 'inquiry'
|
||||||
: 'inquiry'}`
|
}`
|
||||||
: `"${this.inquiries[this.processedInquiryIndex].name}"`
|
: `"${this.inquiries[this.processedInquiryIndex].name}"`
|
||||||
|
|
||||||
return `Are you sure you want to delete ${deleteItem}?`
|
return `Are you sure you want to delete ${deleteItem}?`
|
||||||
@@ -249,14 +277,16 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
showedInquiries: {
|
showedInquiries: {
|
||||||
handler () {
|
handler() {
|
||||||
this.selectedInquiriesIds = new Set(this.showedInquiries
|
this.selectedInquiriesIds = new Set(
|
||||||
|
this.showedInquiries
|
||||||
.filter(inquiry => this.selectedInquiriesIds.has(inquiry.id))
|
.filter(inquiry => this.selectedInquiriesIds.has(inquiry.id))
|
||||||
.map(inquiry => inquiry.id)
|
.map(inquiry => inquiry.id)
|
||||||
)
|
)
|
||||||
this.selectedInquiriesCount = this.selectedInquiriesIds.size
|
this.selectedInquiriesCount = this.selectedInquiriesIds.size
|
||||||
this.selectedNotPredefinedCount = ([...this.selectedInquiriesIds]
|
this.selectedNotPredefinedCount = [...this.selectedInquiriesIds].filter(
|
||||||
.filter(id => !this.predefinedInquiriesIds.has(id))).length
|
id => !this.predefinedInquiriesIds.has(id)
|
||||||
|
).length
|
||||||
|
|
||||||
if (this.selectedInquiriesIds.size < this.showedInquiries.length) {
|
if (this.selectedInquiriesIds.size < this.showedInquiries.length) {
|
||||||
if (this.$refs.mainCheckBox) {
|
if (this.$refs.mainCheckBox) {
|
||||||
@@ -268,9 +298,11 @@ export default {
|
|||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async created () {
|
async created() {
|
||||||
const loadingPredefinedInquiries = this.$store.state.loadingPredefinedInquiries
|
const loadingPredefinedInquiries =
|
||||||
const predefinedInquiriesLoaded = this.$store.state.predefinedInquiriesLoaded
|
this.$store.state.loadingPredefinedInquiries
|
||||||
|
const predefinedInquiriesLoaded =
|
||||||
|
this.$store.state.predefinedInquiriesLoaded
|
||||||
if (!predefinedInquiriesLoaded && !loadingPredefinedInquiries) {
|
if (!predefinedInquiriesLoaded && !loadingPredefinedInquiries) {
|
||||||
try {
|
try {
|
||||||
this.$store.commit('setLoadingPredefinedInquiries', true)
|
this.$store.commit('setLoadingPredefinedInquiries', true)
|
||||||
@@ -283,7 +315,7 @@ export default {
|
|||||||
this.$store.commit('setLoadingPredefinedInquiries', false)
|
this.$store.commit('setLoadingPredefinedInquiries', false)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.resizeObserver = new ResizeObserver(this.calcMaxTableHeight)
|
this.resizeObserver = new ResizeObserver(this.calcMaxTableHeight)
|
||||||
this.resizeObserver.observe(this.$refs['my-inquiries-content'])
|
this.resizeObserver.observe(this.$refs['my-inquiries-content'])
|
||||||
|
|
||||||
@@ -292,15 +324,15 @@ export default {
|
|||||||
this.calcNameWidth()
|
this.calcNameWidth()
|
||||||
this.calcMaxTableHeight()
|
this.calcMaxTableHeight()
|
||||||
},
|
},
|
||||||
beforeUnmount () {
|
beforeUnmount() {
|
||||||
this.resizeObserver.unobserve(this.$refs['my-inquiries-content'])
|
this.resizeObserver.unobserve(this.$refs['my-inquiries-content'])
|
||||||
this.tableResizeObserver.unobserve(this.$refs.table)
|
this.tableResizeObserver.unobserve(this.$refs.table)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
emitCreateTabEvent () {
|
emitCreateTabEvent() {
|
||||||
eventBus.$emit('createNewInquiry')
|
eventBus.$emit('createNewInquiry')
|
||||||
},
|
},
|
||||||
createdAtFormatted (value) {
|
createdAtFormatted(value) {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
@@ -310,20 +342,24 @@ export default {
|
|||||||
hour: '2-digit',
|
hour: '2-digit',
|
||||||
minute: '2-digit'
|
minute: '2-digit'
|
||||||
}
|
}
|
||||||
return new Date(value).toLocaleDateString('en-GB', dateOptions) + ' ' +
|
return (
|
||||||
|
new Date(value).toLocaleDateString('en-GB', dateOptions) +
|
||||||
|
' ' +
|
||||||
new Date(value).toLocaleTimeString('en-GB', timeOptions)
|
new Date(value).toLocaleTimeString('en-GB', timeOptions)
|
||||||
|
)
|
||||||
},
|
},
|
||||||
calcNameWidth () {
|
calcNameWidth() {
|
||||||
const nameWidth = this.$refs['name-td'] && this.$refs['name-td'][0]
|
const nameWidth =
|
||||||
|
this.$refs['name-td'] && this.$refs['name-td'][0]
|
||||||
? this.$refs['name-td'][0].getBoundingClientRect().width
|
? this.$refs['name-td'][0].getBoundingClientRect().width
|
||||||
: 0
|
: 0
|
||||||
this.$refs['name-th'].style = `width: ${nameWidth}px`
|
this.$refs['name-th'].style = `width: ${nameWidth}px`
|
||||||
},
|
},
|
||||||
calcMaxTableHeight () {
|
calcMaxTableHeight() {
|
||||||
const freeSpace = this.$refs['my-inquiries-content'].offsetHeight - 200
|
const freeSpace = this.$refs['my-inquiries-content'].offsetHeight - 200
|
||||||
this.maxTableHeight = freeSpace - (freeSpace % 40) + 1
|
this.maxTableHeight = freeSpace - (freeSpace % 40) + 1
|
||||||
},
|
},
|
||||||
openInquiry (index) {
|
openInquiry(index) {
|
||||||
const tab = this.showedInquiries[index]
|
const tab = this.showedInquiries[index]
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$store.dispatch('addTab', tab).then(id => {
|
this.$store.dispatch('addTab', tab).then(id => {
|
||||||
@@ -332,13 +368,13 @@ export default {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
showRenameDialog (id) {
|
showRenameDialog(id) {
|
||||||
this.errorMsg = null
|
this.errorMsg = null
|
||||||
this.processedInquiryId = id
|
this.processedInquiryId = id
|
||||||
this.newName = this.inquiries[this.processedInquiryIndex].name
|
this.newName = this.inquiries[this.processedInquiryIndex].name
|
||||||
this.$modal.show('rename')
|
this.$modal.show('rename')
|
||||||
},
|
},
|
||||||
renameInquiry () {
|
renameInquiry() {
|
||||||
if (!this.newName) {
|
if (!this.newName) {
|
||||||
this.errorMsg = "Inquiry name can't be empty"
|
this.errorMsg = "Inquiry name can't be empty"
|
||||||
return
|
return
|
||||||
@@ -351,21 +387,26 @@ export default {
|
|||||||
// hide dialog
|
// hide dialog
|
||||||
this.$modal.hide('rename')
|
this.$modal.hide('rename')
|
||||||
},
|
},
|
||||||
duplicateInquiry (index) {
|
duplicateInquiry(index) {
|
||||||
const newInquiry = storedInquiries.duplicateInquiry(this.showedInquiries[index])
|
const newInquiry = storedInquiries.duplicateInquiry(
|
||||||
|
this.showedInquiries[index]
|
||||||
|
)
|
||||||
this.$store.dispatch('addInquiry', newInquiry)
|
this.$store.dispatch('addInquiry', newInquiry)
|
||||||
},
|
},
|
||||||
showDeleteDialog (idsSet) {
|
showDeleteDialog(idsSet) {
|
||||||
this.deleteGroup = idsSet.size > 1
|
this.deleteGroup = idsSet.size > 1
|
||||||
if (!this.deleteGroup) {
|
if (!this.deleteGroup) {
|
||||||
this.processedInquiryId = idsSet.values().next().value
|
this.processedInquiryId = idsSet.values().next().value
|
||||||
}
|
}
|
||||||
this.$modal.show('delete')
|
this.$modal.show('delete')
|
||||||
},
|
},
|
||||||
deleteInquiry () {
|
deleteInquiry() {
|
||||||
this.$modal.hide('delete')
|
this.$modal.hide('delete')
|
||||||
if (!this.deleteGroup) {
|
if (!this.deleteGroup) {
|
||||||
this.$store.dispatch('deleteInquiries', new Set().add(this.processedInquiryId))
|
this.$store.dispatch(
|
||||||
|
'deleteInquiries',
|
||||||
|
new Set().add(this.processedInquiryId)
|
||||||
|
)
|
||||||
|
|
||||||
// Clear checkbox
|
// Clear checkbox
|
||||||
if (this.selectedInquiriesIds.has(this.processedInquiryId)) {
|
if (this.selectedInquiriesIds.has(this.processedInquiryId)) {
|
||||||
@@ -379,27 +420,31 @@ export default {
|
|||||||
}
|
}
|
||||||
this.selectedInquiriesCount = this.selectedInquiriesIds.size
|
this.selectedInquiriesCount = this.selectedInquiriesIds.size
|
||||||
},
|
},
|
||||||
exportToFile (inquiryList, fileName) {
|
exportToFile(inquiryList, fileName) {
|
||||||
storedInquiries.export(inquiryList, fileName)
|
storedInquiries.export(inquiryList, fileName)
|
||||||
},
|
},
|
||||||
exportSelectedInquiries () {
|
exportSelectedInquiries() {
|
||||||
const inquiryList = this.allInquiries.filter(
|
const inquiryList = this.allInquiries.filter(inquiry =>
|
||||||
inquiry => this.selectedInquiriesIds.has(inquiry.id)
|
this.selectedInquiriesIds.has(inquiry.id)
|
||||||
)
|
)
|
||||||
|
|
||||||
this.exportToFile(inquiryList, 'My sqliteviz inquiries.json')
|
this.exportToFile(inquiryList, 'My sqliteviz inquiries.json')
|
||||||
},
|
},
|
||||||
|
|
||||||
importInquiries () {
|
importInquiries() {
|
||||||
storedInquiries.importInquiries()
|
storedInquiries.importInquiries().then(importedInquiries => {
|
||||||
.then(importedInquiries => {
|
this.$store.commit(
|
||||||
this.$store.commit('setInquiries', this.inquiries.concat(importedInquiries))
|
'setInquiries',
|
||||||
|
this.inquiries.concat(importedInquiries)
|
||||||
|
)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleSelectAll (checked) {
|
toggleSelectAll(checked) {
|
||||||
this.selectAll = checked
|
this.selectAll = checked
|
||||||
this.$refs.rowCheckBox.forEach(item => { item.checked = checked })
|
this.$refs.rowCheckBox.forEach(item => {
|
||||||
|
item.checked = checked
|
||||||
|
})
|
||||||
|
|
||||||
this.selectedInquiriesIds = checked
|
this.selectedInquiriesIds = checked
|
||||||
? new Set(this.showedInquiries.map(inquiry => inquiry.id))
|
? new Set(this.showedInquiries.map(inquiry => inquiry.id))
|
||||||
@@ -407,12 +452,13 @@ export default {
|
|||||||
|
|
||||||
this.selectedInquiriesCount = this.selectedInquiriesIds.size
|
this.selectedInquiriesCount = this.selectedInquiriesIds.size
|
||||||
this.selectedNotPredefinedCount = checked
|
this.selectedNotPredefinedCount = checked
|
||||||
? ([...this.selectedInquiriesIds].filter(id => !this.predefinedInquiriesIds.has(id)))
|
? [...this.selectedInquiriesIds].filter(
|
||||||
.length
|
id => !this.predefinedInquiriesIds.has(id)
|
||||||
|
).length
|
||||||
: 0
|
: 0
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleRow (checked, id) {
|
toggleRow(checked, id) {
|
||||||
const isPredefined = this.predefinedInquiriesIds.has(id)
|
const isPredefined = this.predefinedInquiriesIds.has(id)
|
||||||
if (checked) {
|
if (checked) {
|
||||||
this.selectedInquiriesIds.add(id)
|
this.selectedInquiriesIds.add(id)
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ export default {
|
|||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
mixins: [tooltipMixin],
|
mixins: [tooltipMixin],
|
||||||
methods: {
|
methods: {
|
||||||
onClick () {
|
onClick() {
|
||||||
this.hideTooltip()
|
this.hideTooltip()
|
||||||
this.$emit('click')
|
this.$emit('click')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export default {
|
|||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
mixins: [tooltipMixin],
|
mixins: [tooltipMixin],
|
||||||
methods: {
|
methods: {
|
||||||
onClick () {
|
onClick() {
|
||||||
this.hideTooltip()
|
this.hideTooltip()
|
||||||
this.$emit('click')
|
this.$emit('click')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export default {
|
|||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
mixins: [tooltipMixin],
|
mixins: [tooltipMixin],
|
||||||
methods: {
|
methods: {
|
||||||
onClick () {
|
onClick() {
|
||||||
this.hideTooltip()
|
this.hideTooltip()
|
||||||
this.$emit('click')
|
this.$emit('click')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<nav>
|
<nav>
|
||||||
<div id="nav-links">
|
<div id="nav-links">
|
||||||
<a href="https://sqliteviz.com">
|
<a href="https://sqliteviz.com">
|
||||||
<img src="~@/assets/images/logo_simple.svg">
|
<img src="~@/assets/images/logo_simple.svg" />
|
||||||
</a>
|
</a>
|
||||||
<router-link to="/workspace">Workspace</router-link>
|
<router-link to="/workspace">Workspace</router-link>
|
||||||
<router-link to="/inquiries">Inquiries</router-link>
|
<router-link to="/inquiries">Inquiries</router-link>
|
||||||
@@ -18,11 +18,7 @@
|
|||||||
>
|
>
|
||||||
Save
|
Save
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button id="create-btn" class="primary" @click="createNewInquiry">
|
||||||
id="create-btn"
|
|
||||||
class="primary"
|
|
||||||
@click="createNewInquiry"
|
|
||||||
>
|
|
||||||
Create
|
Create
|
||||||
</button>
|
</button>
|
||||||
<app-diagnostic-info />
|
<app-diagnostic-info />
|
||||||
@@ -32,13 +28,13 @@
|
|||||||
<modal modal-id="save" class="dialog" content-style="width: 560px;">
|
<modal modal-id="save" class="dialog" content-style="width: 560px;">
|
||||||
<div class="dialog-header">
|
<div class="dialog-header">
|
||||||
Save inquiry
|
Save inquiry
|
||||||
<close-icon @click="cancelSave"/>
|
<close-icon @click="cancelSave" />
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-body">
|
<div class="dialog-body">
|
||||||
<div v-show="isPredefined" id="save-note">
|
<div v-show="isPredefined" id="save-note">
|
||||||
<img src="~@/assets/images/info.svg">
|
<img src="~@/assets/images/info.svg" />
|
||||||
Note: Predefined inquiries can't be edited.
|
Note: Predefined inquiries can't be edited. That's why your
|
||||||
That's why your modifications will be saved as a new inquiry. Enter the name for it.
|
modifications will be saved as a new inquiry. Enter the name for it.
|
||||||
</div>
|
</div>
|
||||||
<text-field
|
<text-field
|
||||||
label="Inquiry name"
|
label="Inquiry name"
|
||||||
@@ -70,36 +66,39 @@ export default {
|
|||||||
CloseIcon,
|
CloseIcon,
|
||||||
AppDiagnosticInfo
|
AppDiagnosticInfo
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
name: '',
|
name: '',
|
||||||
errorMsg: null
|
errorMsg: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
currentInquiry () {
|
currentInquiry() {
|
||||||
return this.$store.state.currentTab
|
return this.$store.state.currentTab
|
||||||
},
|
},
|
||||||
isSaved () {
|
isSaved() {
|
||||||
return this.currentInquiry && this.currentInquiry.isSaved
|
return this.currentInquiry && this.currentInquiry.isSaved
|
||||||
},
|
},
|
||||||
isPredefined () {
|
isPredefined() {
|
||||||
return this.currentInquiry && this.currentInquiry.isPredefined
|
return this.currentInquiry && this.currentInquiry.isPredefined
|
||||||
},
|
},
|
||||||
runDisabled () {
|
runDisabled() {
|
||||||
return this.currentInquiry && (!this.$store.state.db || !this.currentInquiry.query)
|
return (
|
||||||
|
this.currentInquiry &&
|
||||||
|
(!this.$store.state.db || !this.currentInquiry.query)
|
||||||
|
)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created() {
|
||||||
eventBus.$on('createNewInquiry', this.createNewInquiry)
|
eventBus.$on('createNewInquiry', this.createNewInquiry)
|
||||||
eventBus.$on('saveInquiry', this.checkInquiryBeforeSave)
|
eventBus.$on('saveInquiry', this.checkInquiryBeforeSave)
|
||||||
document.addEventListener('keydown', this._keyListener)
|
document.addEventListener('keydown', this._keyListener)
|
||||||
},
|
},
|
||||||
beforeUnmount () {
|
beforeUnmount() {
|
||||||
document.removeEventListener('keydown', this._keyListener)
|
document.removeEventListener('keydown', this._keyListener)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
createNewInquiry () {
|
createNewInquiry() {
|
||||||
this.$store.dispatch('addTab').then(id => {
|
this.$store.dispatch('addTab').then(id => {
|
||||||
this.$store.commit('setCurrentTabId', id)
|
this.$store.commit('setCurrentTabId', id)
|
||||||
if (this.$route.path !== '/workspace') {
|
if (this.$route.path !== '/workspace') {
|
||||||
@@ -109,11 +108,11 @@ export default {
|
|||||||
|
|
||||||
events.send('inquiry.create', null, { auto: false })
|
events.send('inquiry.create', null, { auto: false })
|
||||||
},
|
},
|
||||||
cancelSave () {
|
cancelSave() {
|
||||||
this.$modal.hide('save')
|
this.$modal.hide('save')
|
||||||
eventBus.$off('inquirySaved')
|
eventBus.$off('inquirySaved')
|
||||||
},
|
},
|
||||||
checkInquiryBeforeSave () {
|
checkInquiryBeforeSave() {
|
||||||
this.errorMsg = null
|
this.errorMsg = null
|
||||||
this.name = ''
|
this.name = ''
|
||||||
|
|
||||||
@@ -123,10 +122,10 @@ export default {
|
|||||||
this.saveInquiry()
|
this.saveInquiry()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async saveInquiry () {
|
async saveInquiry() {
|
||||||
const isNeedName = storedInquiries.isTabNeedName(this.currentInquiry)
|
const isNeedName = storedInquiries.isTabNeedName(this.currentInquiry)
|
||||||
if (isNeedName && !this.name) {
|
if (isNeedName && !this.name) {
|
||||||
this.errorMsg = 'Inquiry name can\'t be empty'
|
this.errorMsg = "Inquiry name can't be empty"
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const dataSet = this.currentInquiry.result
|
const dataSet = this.currentInquiry.result
|
||||||
@@ -168,7 +167,7 @@ export default {
|
|||||||
eventBus.$emit('inquirySaved')
|
eventBus.$emit('inquirySaved')
|
||||||
events.send('inquiry.save')
|
events.send('inquiry.save')
|
||||||
},
|
},
|
||||||
_keyListener (e) {
|
_keyListener(e) {
|
||||||
if (this.$route.path === '/workspace') {
|
if (this.$route.path === '/workspace') {
|
||||||
// Run query Ctrl+R or Ctrl+Enter
|
// Run query Ctrl+R or Ctrl+Enter
|
||||||
if ((e.key === 'r' || e.key === 'Enter') && (e.ctrlKey || e.metaKey)) {
|
if ((e.key === 'r' || e.key === 'Enter') && (e.ctrlKey || e.metaKey)) {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div @click="colVisible = !colVisible" class="table-name">
|
<div @click="colVisible = !colVisible" class="table-name">
|
||||||
<tree-chevron :expanded="colVisible"/>
|
<tree-chevron :expanded="colVisible" />
|
||||||
{{ name }}
|
{{ name }}
|
||||||
</div>
|
</div>
|
||||||
<div v-show="colVisible" class="columns">
|
<div v-show="colVisible" class="columns">
|
||||||
@@ -20,7 +20,7 @@ export default {
|
|||||||
name: 'TableDescription',
|
name: 'TableDescription',
|
||||||
components: { TreeChevron },
|
components: { TreeChevron },
|
||||||
props: ['name', 'columns'],
|
props: ['name', 'columns'],
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
colVisible: false
|
colVisible: false
|
||||||
}
|
}
|
||||||
@@ -29,7 +29,8 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.table-name, .column {
|
.table-name,
|
||||||
|
.column {
|
||||||
margin-top: 11px;
|
margin-top: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="schema-container">
|
<div id="schema-container">
|
||||||
<div id="schema-filter">
|
<div id="schema-filter">
|
||||||
<text-field placeholder="Search table" width="100%" v-model="filter"/>
|
<text-field placeholder="Search table" width="100%" v-model="filter" />
|
||||||
</div>
|
</div>
|
||||||
<div id="db">
|
<div id="db">
|
||||||
<div @click="schemaVisible = !schemaVisible" class="db-name">
|
<div @click="schemaVisible = !schemaVisible" class="db-name">
|
||||||
<tree-chevron v-show="schema.length > 0" :expanded="schemaVisible"/>
|
<tree-chevron v-show="schema.length > 0" :expanded="schemaVisible" />
|
||||||
{{ dbName }}
|
{{ dbName }}
|
||||||
</div>
|
</div>
|
||||||
<db-uploader id="db-edit" type="small" />
|
<db-uploader id="db-edit" type="small" />
|
||||||
<export-icon tooltip="Export database" @click="exportToFile"/>
|
<export-icon tooltip="Export database" @click="exportToFile" />
|
||||||
<add-table-icon @click="addCsvJson"/>
|
<add-table-icon @click="addCsvJson" />
|
||||||
</div>
|
</div>
|
||||||
<div v-show="schemaVisible" class="schema">
|
<div v-show="schemaVisible" class="schema">
|
||||||
<table-description
|
<table-description
|
||||||
@@ -53,7 +53,7 @@ export default {
|
|||||||
AddTableIcon,
|
AddTableIcon,
|
||||||
CsvJsonImport
|
CsvJsonImport
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
schemaVisible: true,
|
schemaVisible: true,
|
||||||
filter: null,
|
filter: null,
|
||||||
@@ -61,7 +61,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
schema () {
|
schema() {
|
||||||
if (!this.$store.state.db.schema) {
|
if (!this.$store.state.db.schema) {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
@@ -69,18 +69,19 @@ export default {
|
|||||||
return !this.filter
|
return !this.filter
|
||||||
? this.$store.state.db.schema
|
? this.$store.state.db.schema
|
||||||
: this.$store.state.db.schema.filter(
|
: this.$store.state.db.schema.filter(
|
||||||
table => table.name.toUpperCase().indexOf(this.filter.toUpperCase()) !== -1
|
table =>
|
||||||
|
table.name.toUpperCase().indexOf(this.filter.toUpperCase()) !== -1
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
dbName () {
|
dbName() {
|
||||||
return this.$store.state.db.dbName
|
return this.$store.state.db.dbName
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
exportToFile () {
|
exportToFile() {
|
||||||
this.$store.state.db.export(`${this.dbName}.sqlite`)
|
this.$store.state.db.export(`${this.dbName}.sqlite`)
|
||||||
},
|
},
|
||||||
async addCsvJson () {
|
async addCsvJson() {
|
||||||
this.file = await fIo.getFileFromUser('.csv,.json,.ndjson')
|
this.file = await fIo.getFileFromUser('.csv,.json,.ndjson')
|
||||||
await this.$nextTick()
|
await this.$nextTick()
|
||||||
const csvJsonImportModal = this.$refs.addCsvJson
|
const csvJsonImportModal = this.$refs.addCsvJson
|
||||||
@@ -119,7 +120,8 @@ export default {
|
|||||||
background-image: linear-gradient(white 73%, rgba(255, 255, 255, 0));
|
background-image: linear-gradient(white 73%, rgba(255, 255, 255, 0));
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.schema, .db-name {
|
.schema,
|
||||||
|
.db-name {
|
||||||
color: var(--color-text-base);
|
color: var(--color-text-base);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|||||||
@@ -1,15 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-show="visible" class="chart-container" ref="chartContainer">
|
<div v-show="visible" class="chart-container" ref="chartContainer">
|
||||||
<div class="warning chart-warning" v-show="!dataSources && visible">
|
<div class="warning chart-warning" v-show="!dataSources && visible">
|
||||||
There is no data to build a chart. Run your SQL query and make sure the result is not empty.
|
There is no data to build a chart. Run your SQL query and make sure the
|
||||||
|
result is not empty.
|
||||||
</div>
|
</div>
|
||||||
<div class="chart" :style="{ height: !dataSources ? 'calc(100% - 40px)' : '100%' }">
|
<div
|
||||||
|
class="chart"
|
||||||
|
:style="{ height: !dataSources ? 'calc(100% - 40px)' : '100%' }"
|
||||||
|
>
|
||||||
<PlotlyEditor
|
<PlotlyEditor
|
||||||
v-show="visible"
|
v-show="visible"
|
||||||
:data="state.data"
|
:data="state.data"
|
||||||
:layout="state.layout"
|
:layout="state.layout"
|
||||||
:frames="state.frames"
|
:frames="state.frames"
|
||||||
:config="{ editable: true, displaylogo: false, modeBarButtonsToRemove: ['toImage'] }"
|
:config="{
|
||||||
|
editable: true,
|
||||||
|
displaylogo: false,
|
||||||
|
modeBarButtonsToRemove: ['toImage']
|
||||||
|
}"
|
||||||
:dataSources="dataSources"
|
:dataSources="dataSources"
|
||||||
:dataSourceOptions="dataSourceOptions"
|
:dataSourceOptions="dataSourceOptions"
|
||||||
:plotly="plotly"
|
:plotly="plotly"
|
||||||
@@ -21,7 +29,7 @@
|
|||||||
@render="onRender"
|
@render="onRender"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -38,15 +46,17 @@ import events from '@/lib/utils/events'
|
|||||||
export default {
|
export default {
|
||||||
name: 'Chart',
|
name: 'Chart',
|
||||||
props: [
|
props: [
|
||||||
'dataSources', 'initOptions',
|
'dataSources',
|
||||||
'importToPngEnabled', 'importToSvgEnabled',
|
'initOptions',
|
||||||
|
'importToPngEnabled',
|
||||||
|
'importToSvgEnabled',
|
||||||
'forPivot'
|
'forPivot'
|
||||||
],
|
],
|
||||||
emits: ['update:importToSvgEnabled', 'update', 'loadingImageCompleted'],
|
emits: ['update:importToSvgEnabled', 'update', 'loadingImageCompleted'],
|
||||||
components: {
|
components: {
|
||||||
PlotlyEditor: applyPureReactInVue(ReactPlotlyEditor)
|
PlotlyEditor: applyPureReactInVue(ReactPlotlyEditor)
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
plotly,
|
plotly,
|
||||||
state: this.initOptions || {
|
state: this.initOptions || {
|
||||||
@@ -60,20 +70,23 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
dataSourceOptions () {
|
dataSourceOptions() {
|
||||||
return chartHelper.getOptionsFromDataSources(this.dataSources)
|
return chartHelper.getOptionsFromDataSources(this.dataSources)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created() {
|
||||||
// https://github.com/plotly/plotly.js/issues/4555
|
// https://github.com/plotly/plotly.js/issues/4555
|
||||||
plotly.setPlotConfig({
|
plotly.setPlotConfig({
|
||||||
notifyOnLogging: 1
|
notifyOnLogging: 1
|
||||||
})
|
})
|
||||||
this.$watch(
|
this.$watch(
|
||||||
() => this.state && this.state.data && this.state.data
|
() =>
|
||||||
|
this.state &&
|
||||||
|
this.state.data &&
|
||||||
|
this.state.data
|
||||||
.map(trace => `${trace.type}${trace.mode ? '-' + trace.mode : ''}`)
|
.map(trace => `${trace.type}${trace.mode ? '-' + trace.mode : ''}`)
|
||||||
.join(','),
|
.join(','),
|
||||||
(value) => {
|
value => {
|
||||||
events.send('viz_plotly.render', null, {
|
events.send('viz_plotly.render', null, {
|
||||||
type: value,
|
type: value,
|
||||||
pivot: !!this.forPivot
|
pivot: !!this.forPivot
|
||||||
@@ -83,21 +96,21 @@ export default {
|
|||||||
)
|
)
|
||||||
this.$emit('update:importToSvgEnabled', true)
|
this.$emit('update:importToSvgEnabled', true)
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.resizeObserver = new ResizeObserver(this.handleResize)
|
this.resizeObserver = new ResizeObserver(this.handleResize)
|
||||||
this.resizeObserver.observe(this.$refs.chartContainer)
|
this.resizeObserver.observe(this.$refs.chartContainer)
|
||||||
},
|
},
|
||||||
activated () {
|
activated() {
|
||||||
this.useResizeHandler = true
|
this.useResizeHandler = true
|
||||||
},
|
},
|
||||||
deactivated () {
|
deactivated() {
|
||||||
this.useResizeHandler = false
|
this.useResizeHandler = false
|
||||||
},
|
},
|
||||||
beforeUnmount () {
|
beforeUnmount() {
|
||||||
this.resizeObserver.unobserve(this.$refs.chartContainer)
|
this.resizeObserver.unobserve(this.$refs.chartContainer)
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
dataSources () {
|
dataSources() {
|
||||||
// we need to update state.data in order to update the graph
|
// we need to update state.data in order to update the graph
|
||||||
// https://github.com/plotly/react-chart-editor/issues/948
|
// https://github.com/plotly/react-chart-editor/issues/948
|
||||||
if (this.dataSources) {
|
if (this.dataSources) {
|
||||||
@@ -106,41 +119,44 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async handleResize () {
|
async handleResize() {
|
||||||
this.visible = false
|
this.visible = false
|
||||||
await this.$nextTick()
|
await this.$nextTick()
|
||||||
this.visible = true
|
this.visible = true
|
||||||
},
|
},
|
||||||
onRender (data, layout, frames) {
|
onRender(data, layout, frames) {
|
||||||
// TODO: check changes and enable Save button if needed
|
// TODO: check changes and enable Save button if needed
|
||||||
},
|
},
|
||||||
update (data, layout, frames) {
|
update(data, layout, frames) {
|
||||||
this.state = { data, layout, frames }
|
this.state = { data, layout, frames }
|
||||||
this.$emit('update')
|
this.$emit('update')
|
||||||
},
|
},
|
||||||
getOptionsForSave () {
|
getOptionsForSave() {
|
||||||
return chartHelper.getOptionsForSave(this.state, this.dataSources)
|
return chartHelper.getOptionsForSave(this.state, this.dataSources)
|
||||||
},
|
},
|
||||||
async saveAsPng () {
|
async saveAsPng() {
|
||||||
const url = await this.prepareCopy()
|
const url = await this.prepareCopy()
|
||||||
this.$emit('loadingImageCompleted')
|
this.$emit('loadingImageCompleted')
|
||||||
fIo.downloadFromUrl(url, 'chart')
|
fIo.downloadFromUrl(url, 'chart')
|
||||||
},
|
},
|
||||||
|
|
||||||
async saveAsSvg () {
|
async saveAsSvg() {
|
||||||
const url = await this.prepareCopy('svg')
|
const url = await this.prepareCopy('svg')
|
||||||
fIo.downloadFromUrl(url, 'chart')
|
fIo.downloadFromUrl(url, 'chart')
|
||||||
},
|
},
|
||||||
|
|
||||||
saveAsHtml () {
|
saveAsHtml() {
|
||||||
fIo.exportToFile(
|
fIo.exportToFile(
|
||||||
chartHelper.getHtml(this.state),
|
chartHelper.getHtml(this.state),
|
||||||
'chart.html',
|
'chart.html',
|
||||||
'text/html'
|
'text/html'
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
async prepareCopy (type = 'png') {
|
async prepareCopy(type = 'png') {
|
||||||
return await chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, type)
|
return await chartHelper.getImageDataUrl(
|
||||||
|
this.$refs.plotlyEditor.$el,
|
||||||
|
type
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="['pivot-sort-btn', direction] " @click="changeSorting">
|
<div :class="['pivot-sort-btn', direction]" @click="changeSorting">
|
||||||
{{ modelValue.includes('key') ? 'key' : 'value' }}
|
{{ modelValue.includes('key') ? 'key' : 'value' }}
|
||||||
<sort-icon
|
<sort-icon
|
||||||
class="sort-icon"
|
class="sort-icon"
|
||||||
@@ -20,7 +20,7 @@ export default {
|
|||||||
SortIcon
|
SortIcon
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeSorting () {
|
changeSorting() {
|
||||||
if (this.modelValue === 'key_a_to_z') {
|
if (this.modelValue === 'key_a_to_z') {
|
||||||
this.$emit('update:modelValue', 'value_a_to_z')
|
this.$emit('update:modelValue', 'value_a_to_z')
|
||||||
} else if (this.modelValue === 'value_a_to_z') {
|
} else if (this.modelValue === 'value_a_to_z') {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pivot-ui">
|
<div class="pivot-ui">
|
||||||
<div :class="{collapsed}">
|
<div :class="{ collapsed }">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<label>Columns</label>
|
<label>Columns</label>
|
||||||
<multiselect
|
<multiselect
|
||||||
@@ -139,7 +139,12 @@
|
|||||||
import $ from 'jquery'
|
import $ from 'jquery'
|
||||||
import Multiselect from 'vue-multiselect'
|
import Multiselect from 'vue-multiselect'
|
||||||
import PivotSortBtn from './PivotSortBtn'
|
import PivotSortBtn from './PivotSortBtn'
|
||||||
import { renderers, aggregators, zeroValAggregators, twoValAggregators } from '../pivotHelper'
|
import {
|
||||||
|
renderers,
|
||||||
|
aggregators,
|
||||||
|
zeroValAggregators,
|
||||||
|
twoValAggregators
|
||||||
|
} from '../pivotHelper'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'pivotUi',
|
name: 'pivotUi',
|
||||||
@@ -149,23 +154,35 @@ export default {
|
|||||||
Multiselect,
|
Multiselect,
|
||||||
PivotSortBtn
|
PivotSortBtn
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
const aggregatorName = (this.modelValue && this.modelValue.aggregatorName) || 'Count'
|
const aggregatorName =
|
||||||
const rendererName = (this.modelValue && this.modelValue.rendererName) || 'Table'
|
(this.modelValue && this.modelValue.aggregatorName) || 'Count'
|
||||||
|
const rendererName =
|
||||||
|
(this.modelValue && this.modelValue.rendererName) || 'Table'
|
||||||
return {
|
return {
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
renderer: { name: rendererName, fun: $.pivotUtilities.renderers[rendererName] },
|
renderer: {
|
||||||
aggregator: { name: aggregatorName, fun: $.pivotUtilities.aggregators[aggregatorName] },
|
name: rendererName,
|
||||||
|
fun: $.pivotUtilities.renderers[rendererName]
|
||||||
|
},
|
||||||
|
aggregator: {
|
||||||
|
name: aggregatorName,
|
||||||
|
fun: $.pivotUtilities.aggregators[aggregatorName]
|
||||||
|
},
|
||||||
rows: (this.modelValue && this.modelValue.rows) || [],
|
rows: (this.modelValue && this.modelValue.rows) || [],
|
||||||
cols: (this.modelValue && this.modelValue.cols) || [],
|
cols: (this.modelValue && this.modelValue.cols) || [],
|
||||||
val1: (this.modelValue && this.modelValue.vals && this.modelValue.vals[0]) || '',
|
val1:
|
||||||
val2: (this.modelValue && this.modelValue.vals && this.modelValue.vals[1]) || '',
|
(this.modelValue && this.modelValue.vals && this.modelValue.vals[0]) ||
|
||||||
|
'',
|
||||||
|
val2:
|
||||||
|
(this.modelValue && this.modelValue.vals && this.modelValue.vals[1]) ||
|
||||||
|
'',
|
||||||
colOrder: (this.modelValue && this.modelValue.colOrder) || 'key_a_to_z',
|
colOrder: (this.modelValue && this.modelValue.colOrder) || 'key_a_to_z',
|
||||||
rowOrder: (this.modelValue && this.modelValue.rowOrder) || 'key_a_to_z'
|
rowOrder: (this.modelValue && this.modelValue.rowOrder) || 'key_a_to_z'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
valCount () {
|
valCount() {
|
||||||
if (zeroValAggregators.includes(this.aggregator.name)) {
|
if (zeroValAggregators.includes(this.aggregator.name)) {
|
||||||
return 0
|
return 0
|
||||||
}
|
}
|
||||||
@@ -176,47 +193,47 @@ export default {
|
|||||||
|
|
||||||
return 1
|
return 1
|
||||||
},
|
},
|
||||||
renderers () {
|
renderers() {
|
||||||
return renderers
|
return renderers
|
||||||
},
|
},
|
||||||
aggregators () {
|
aggregators() {
|
||||||
return aggregators
|
return aggregators
|
||||||
},
|
},
|
||||||
rowsToSelect () {
|
rowsToSelect() {
|
||||||
return this.keyNames.filter(key => !this.cols.includes(key))
|
return this.keyNames.filter(key => !this.cols.includes(key))
|
||||||
},
|
},
|
||||||
colsToSelect () {
|
colsToSelect() {
|
||||||
return this.keyNames.filter(key => !this.rows.includes(key))
|
return this.keyNames.filter(key => !this.rows.includes(key))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
renderer () {
|
renderer() {
|
||||||
this.returnValue()
|
this.returnValue()
|
||||||
},
|
},
|
||||||
aggregator () {
|
aggregator() {
|
||||||
this.returnValue()
|
this.returnValue()
|
||||||
},
|
},
|
||||||
rows () {
|
rows() {
|
||||||
this.returnValue()
|
this.returnValue()
|
||||||
},
|
},
|
||||||
cols () {
|
cols() {
|
||||||
this.returnValue()
|
this.returnValue()
|
||||||
},
|
},
|
||||||
val1 () {
|
val1() {
|
||||||
this.returnValue()
|
this.returnValue()
|
||||||
},
|
},
|
||||||
val2 () {
|
val2() {
|
||||||
this.returnValue()
|
this.returnValue()
|
||||||
},
|
},
|
||||||
colOrder () {
|
colOrder() {
|
||||||
this.returnValue()
|
this.returnValue()
|
||||||
},
|
},
|
||||||
rowOrder () {
|
rowOrder() {
|
||||||
this.returnValue()
|
this.returnValue()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
returnValue () {
|
returnValue() {
|
||||||
const vals = []
|
const vals = []
|
||||||
for (let i = 1; i <= this.valCount; i++) {
|
for (let i = 1; i <= this.valCount; i++) {
|
||||||
vals.push(this[`val${i}`])
|
vals.push(this[`val${i}`])
|
||||||
@@ -281,7 +298,6 @@ export default {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher:hover {
|
.switcher:hover {
|
||||||
|
|||||||
@@ -1,14 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pivot-container">
|
<div class="pivot-container">
|
||||||
<div class="warning pivot-warning" v-show="!dataSources">
|
<div class="warning pivot-warning" v-show="!dataSources">
|
||||||
There is no data to build a pivot. Run your SQL query and make sure the result is not empty.
|
There is no data to build a pivot. Run your SQL query and make sure the
|
||||||
|
result is not empty.
|
||||||
</div>
|
</div>
|
||||||
<pivot-ui
|
<pivot-ui
|
||||||
:key-names="columns"
|
:key-names="columns"
|
||||||
v-model="pivotOptions"
|
v-model="pivotOptions"
|
||||||
@update="$emit('update')"
|
@update="$emit('update')"
|
||||||
/>
|
/>
|
||||||
<div ref="pivotOutput" class="pivot-output"/>
|
<div ref="pivotOutput" class="pivot-output" />
|
||||||
<div
|
<div
|
||||||
ref="customChartOutput"
|
ref="customChartOutput"
|
||||||
v-show="viewCustomChart"
|
v-show="viewCustomChart"
|
||||||
@@ -21,7 +22,7 @@
|
|||||||
@loadingImageCompleted="$emit('loadingImageCompleted')"
|
@loadingImageCompleted="$emit('loadingImageCompleted')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -37,7 +38,12 @@ import events from '@/lib/utils/events'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'pivot',
|
name: 'pivot',
|
||||||
props: ['dataSources', 'initOptions', 'importToPngEnabled', 'importToSvgEnabled'],
|
props: [
|
||||||
|
'dataSources',
|
||||||
|
'initOptions',
|
||||||
|
'importToPngEnabled',
|
||||||
|
'importToSvgEnabled'
|
||||||
|
],
|
||||||
emits: [
|
emits: [
|
||||||
'loadingImageCompleted',
|
'loadingImageCompleted',
|
||||||
'update',
|
'update',
|
||||||
@@ -48,7 +54,7 @@ export default {
|
|||||||
PivotUi,
|
PivotUi,
|
||||||
Chart
|
Chart
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
resizeObserver: null,
|
resizeObserver: null,
|
||||||
pivotOptions: !this.initOptions
|
pivotOptions: !this.initOptions
|
||||||
@@ -83,25 +89,25 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
columns () {
|
columns() {
|
||||||
return Object.keys(this.dataSources || {})
|
return Object.keys(this.dataSources || {})
|
||||||
},
|
},
|
||||||
|
|
||||||
viewStandartChart () {
|
viewStandartChart() {
|
||||||
return this.pivotOptions.rendererName in $.pivotUtilities.plotly_renderers
|
return this.pivotOptions.rendererName in $.pivotUtilities.plotly_renderers
|
||||||
},
|
},
|
||||||
|
|
||||||
viewCustomChart () {
|
viewCustomChart() {
|
||||||
return this.pivotOptions.rendererName === 'Custom chart'
|
return this.pivotOptions.rendererName === 'Custom chart'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
dataSources () {
|
dataSources() {
|
||||||
this.show()
|
this.show()
|
||||||
},
|
},
|
||||||
'pivotOptions.rendererName': {
|
'pivotOptions.rendererName': {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler () {
|
handler() {
|
||||||
this.$emit(
|
this.$emit(
|
||||||
'update:importToPngEnabled',
|
'update:importToPngEnabled',
|
||||||
this.pivotOptions.rendererName !== 'TSV Export'
|
this.pivotOptions.rendererName !== 'TSV Export'
|
||||||
@@ -115,22 +121,22 @@ export default {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
pivotOptions () {
|
pivotOptions() {
|
||||||
this.show()
|
this.show()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.show()
|
this.show()
|
||||||
// We need to detect resizing because plotly doesn't resize when resize its container
|
// We need to detect resizing because plotly doesn't resize when resize its container
|
||||||
// but it resize on window.resize (we will trigger it manualy in order to make plotly resize)
|
// but it resize on window.resize (we will trigger it manualy in order to make plotly resize)
|
||||||
this.resizeObserver = new ResizeObserver(this.handleResize)
|
this.resizeObserver = new ResizeObserver(this.handleResize)
|
||||||
this.resizeObserver.observe(this.$refs.customChartOutput)
|
this.resizeObserver.observe(this.$refs.customChartOutput)
|
||||||
},
|
},
|
||||||
beforeUnmount () {
|
beforeUnmount() {
|
||||||
this.resizeObserver.unobserve(this.$refs.customChartOutput)
|
this.resizeObserver.unobserve(this.$refs.customChartOutput)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleResize () {
|
handleResize() {
|
||||||
// hack: plotly changes size only on window.resize event,
|
// hack: plotly changes size only on window.resize event,
|
||||||
// so, we trigger it when container resizes (e.g. when move splitter)
|
// so, we trigger it when container resizes (e.g. when move splitter)
|
||||||
if (this.viewStandartChart) {
|
if (this.viewStandartChart) {
|
||||||
@@ -138,7 +144,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
show () {
|
show() {
|
||||||
const options = { ...this.pivotOptions }
|
const options = { ...this.pivotOptions }
|
||||||
if (this.viewStandartChart) {
|
if (this.viewStandartChart) {
|
||||||
options.rendererOptions = {
|
options.rendererOptions = {
|
||||||
@@ -163,7 +169,9 @@ export default {
|
|||||||
|
|
||||||
$(this.$refs.pivotOutput).pivot(
|
$(this.$refs.pivotOutput).pivot(
|
||||||
function (callback) {
|
function (callback) {
|
||||||
const rowCount = !this.dataSources ? 0 : this.dataSources[this.columns[0]].length
|
const rowCount = !this.dataSources
|
||||||
|
? 0
|
||||||
|
: this.dataSources[this.columns[0]].length
|
||||||
for (let i = 1; i <= rowCount; i++) {
|
for (let i = 1; i <= rowCount; i++) {
|
||||||
const row = {}
|
const row = {}
|
||||||
this.columns.forEach(col => {
|
this.columns.forEach(col => {
|
||||||
@@ -181,7 +189,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
getOptionsForSave () {
|
getOptionsForSave() {
|
||||||
const options = { ...this.pivotOptions }
|
const options = { ...this.pivotOptions }
|
||||||
if (this.viewCustomChart) {
|
if (this.viewCustomChart) {
|
||||||
const chartComponent = this.$refs.customChart
|
const chartComponent = this.$refs.customChart
|
||||||
@@ -192,20 +200,22 @@ export default {
|
|||||||
return options
|
return options
|
||||||
},
|
},
|
||||||
|
|
||||||
async saveAsPng () {
|
async saveAsPng() {
|
||||||
if (this.viewCustomChart) {
|
if (this.viewCustomChart) {
|
||||||
this.$refs.customChart.saveAsPng()
|
this.$refs.customChart.saveAsPng()
|
||||||
} else {
|
} else {
|
||||||
const source = this.viewStandartChart
|
const source = this.viewStandartChart
|
||||||
? await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
|
? await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
|
||||||
: (await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)).toDataURL('image/png')
|
: (
|
||||||
|
await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
|
||||||
|
).toDataURL('image/png')
|
||||||
|
|
||||||
this.$emit('loadingImageCompleted')
|
this.$emit('loadingImageCompleted')
|
||||||
fIo.downloadFromUrl(source, 'pivot')
|
fIo.downloadFromUrl(source, 'pivot')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async prepareCopy () {
|
async prepareCopy() {
|
||||||
if (this.viewCustomChart) {
|
if (this.viewCustomChart) {
|
||||||
return await this.$refs.customChart.prepareCopy()
|
return await this.$refs.customChart.prepareCopy()
|
||||||
}
|
}
|
||||||
@@ -215,16 +225,19 @@ export default {
|
|||||||
return await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
|
return await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
|
||||||
},
|
},
|
||||||
|
|
||||||
async saveAsSvg () {
|
async saveAsSvg() {
|
||||||
if (this.viewCustomChart) {
|
if (this.viewCustomChart) {
|
||||||
this.$refs.customChart.saveAsSvg()
|
this.$refs.customChart.saveAsSvg()
|
||||||
} else if (this.viewStandartChart) {
|
} else if (this.viewStandartChart) {
|
||||||
const url = await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'svg')
|
const url = await chartHelper.getImageDataUrl(
|
||||||
|
this.$refs.pivotOutput,
|
||||||
|
'svg'
|
||||||
|
)
|
||||||
fIo.downloadFromUrl(url, 'pivot')
|
fIo.downloadFromUrl(url, 'pivot')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
saveAsHtml () {
|
saveAsHtml() {
|
||||||
if (this.viewCustomChart) {
|
if (this.viewCustomChart) {
|
||||||
this.$refs.customChart.saveAsHtml()
|
this.$refs.customChart.saveAsHtml()
|
||||||
return
|
return
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ export const twoValAggregators = [
|
|||||||
'80% Lower Bound'
|
'80% Lower Bound'
|
||||||
]
|
]
|
||||||
|
|
||||||
export function _getDataSources (pivotData) {
|
export function _getDataSources(pivotData) {
|
||||||
const rowKeys = pivotData.getRowKeys()
|
const rowKeys = pivotData.getRowKeys()
|
||||||
const colKeys = pivotData.getColKeys()
|
const colKeys = pivotData.getColKeys()
|
||||||
|
|
||||||
@@ -49,7 +49,7 @@ export function _getDataSources (pivotData) {
|
|||||||
return Object.assign(dataSources, dataSourcesByCols, dataSourcesByRows)
|
return Object.assign(dataSources, dataSourcesByCols, dataSourcesByRows)
|
||||||
}
|
}
|
||||||
|
|
||||||
function customChartRenderer (data, options) {
|
function customChartRenderer(data, options) {
|
||||||
const propsRef = options.getCustomComponentsProps()
|
const propsRef = options.getCustomComponentsProps()
|
||||||
propsRef.dataSources = _getDataSources(data)
|
propsRef.dataSources = _getDataSources(data)
|
||||||
return null
|
return null
|
||||||
@@ -69,19 +69,21 @@ export const renderers = Object.keys($.pivotUtilities.renderers).map(key => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
export const aggregators = Object.keys($.pivotUtilities.aggregators).map(key => {
|
export const aggregators = Object.keys($.pivotUtilities.aggregators).map(
|
||||||
|
key => {
|
||||||
return {
|
return {
|
||||||
name: key,
|
name: key,
|
||||||
fun: $.pivotUtilities.aggregators[key]
|
fun: $.pivotUtilities.aggregators[key]
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
|
)
|
||||||
|
|
||||||
export async function getPivotCanvas (pivotOutput) {
|
export async function getPivotCanvas(pivotOutput) {
|
||||||
const tableElement = pivotOutput.querySelector('.pvtTable')
|
const tableElement = pivotOutput.querySelector('.pvtTable')
|
||||||
return await html2canvas(tableElement, { logging: false })
|
return await html2canvas(tableElement, { logging: false })
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getPivotHtml (pivotOutput) {
|
export function getPivotHtml(pivotOutput) {
|
||||||
return `
|
return `
|
||||||
<style>
|
<style>
|
||||||
table.pvtTable {
|
table.pvtTable {
|
||||||
|
|||||||
@@ -31,7 +31,7 @@
|
|||||||
<pivot-icon />
|
<pivot-icon />
|
||||||
</icon-button>
|
</icon-button>
|
||||||
|
|
||||||
<div class="side-tool-bar-divider"/>
|
<div class="side-tool-bar-divider" />
|
||||||
|
|
||||||
<icon-button
|
<icon-button
|
||||||
:disabled="!importToPngEnabled || loadingImage"
|
:disabled="!importToPngEnabled || loadingImage"
|
||||||
@@ -67,7 +67,7 @@
|
|||||||
tooltip-position="top-left"
|
tooltip-position="top-left"
|
||||||
@click="prepareCopy"
|
@click="prepareCopy"
|
||||||
>
|
>
|
||||||
<clipboard-icon/>
|
<clipboard-icon />
|
||||||
</icon-button>
|
</icon-button>
|
||||||
</side-tool-bar>
|
</side-tool-bar>
|
||||||
|
|
||||||
@@ -117,7 +117,7 @@ export default {
|
|||||||
ClipboardIcon,
|
ClipboardIcon,
|
||||||
loadingDialog
|
loadingDialog
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
mode: this.initMode || 'chart',
|
mode: this.initMode || 'chart',
|
||||||
importToPngEnabled: true,
|
importToPngEnabled: true,
|
||||||
@@ -129,18 +129,18 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
plotlyInPivot () {
|
plotlyInPivot() {
|
||||||
return this.mode === 'pivot' && this.$refs.viewComponent.viewCustomChart
|
return this.mode === 'pivot' && this.$refs.viewComponent.viewCustomChart
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
mode () {
|
mode() {
|
||||||
this.$emit('update')
|
this.$emit('update')
|
||||||
this.importToPngEnabled = true
|
this.importToPngEnabled = true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async saveAsPng () {
|
async saveAsPng() {
|
||||||
this.loadingImage = true
|
this.loadingImage = true
|
||||||
/*
|
/*
|
||||||
setTimeout does its thing by putting its callback on the callback queue.
|
setTimeout does its thing by putting its callback on the callback queue.
|
||||||
@@ -160,10 +160,10 @@ export default {
|
|||||||
this.$refs.viewComponent.saveAsPng()
|
this.$refs.viewComponent.saveAsPng()
|
||||||
this.exportSignal('png')
|
this.exportSignal('png')
|
||||||
},
|
},
|
||||||
getOptionsForSave () {
|
getOptionsForSave() {
|
||||||
return this.$refs.viewComponent.getOptionsForSave()
|
return this.$refs.viewComponent.getOptionsForSave()
|
||||||
},
|
},
|
||||||
async prepareCopy () {
|
async prepareCopy() {
|
||||||
if ('ClipboardItem' in window) {
|
if ('ClipboardItem' in window) {
|
||||||
this.preparingCopy = true
|
this.preparingCopy = true
|
||||||
this.$modal.show('prepareCopy')
|
this.$modal.show('prepareCopy')
|
||||||
@@ -172,7 +172,7 @@ export default {
|
|||||||
await time.sleep(0)
|
await time.sleep(0)
|
||||||
this.dataToCopy = await this.$refs.viewComponent.prepareCopy()
|
this.dataToCopy = await this.$refs.viewComponent.prepareCopy()
|
||||||
const t1 = performance.now()
|
const t1 = performance.now()
|
||||||
if ((t1 - t0) < 950) {
|
if (t1 - t0 < 950) {
|
||||||
this.$modal.hide('prepareCopy')
|
this.$modal.hide('prepareCopy')
|
||||||
this.copyToClipboard()
|
this.copyToClipboard()
|
||||||
} else {
|
} else {
|
||||||
@@ -186,25 +186,25 @@ export default {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async copyToClipboard () {
|
async copyToClipboard() {
|
||||||
cIo.copyImage(this.dataToCopy)
|
cIo.copyImage(this.dataToCopy)
|
||||||
this.$modal.hide('prepareCopy')
|
this.$modal.hide('prepareCopy')
|
||||||
this.exportSignal('clipboard')
|
this.exportSignal('clipboard')
|
||||||
},
|
},
|
||||||
cancelCopy () {
|
cancelCopy() {
|
||||||
this.dataToCopy = null
|
this.dataToCopy = null
|
||||||
this.$modal.hide('prepareCopy')
|
this.$modal.hide('prepareCopy')
|
||||||
},
|
},
|
||||||
|
|
||||||
saveAsSvg () {
|
saveAsSvg() {
|
||||||
this.$refs.viewComponent.saveAsSvg()
|
this.$refs.viewComponent.saveAsSvg()
|
||||||
this.exportSignal('svg')
|
this.exportSignal('svg')
|
||||||
},
|
},
|
||||||
saveAsHtml () {
|
saveAsHtml() {
|
||||||
this.$refs.viewComponent.saveAsHtml()
|
this.$refs.viewComponent.saveAsHtml()
|
||||||
this.exportSignal('html')
|
this.exportSignal('html')
|
||||||
},
|
},
|
||||||
exportSignal (to) {
|
exportSignal(to) {
|
||||||
const eventLabels = { type: to }
|
const eventLabels = { type: to }
|
||||||
|
|
||||||
if (this.mode === 'chart' || this.plotlyInPivot) {
|
if (this.mode === 'chart' || this.plotlyInPivot) {
|
||||||
|
|||||||
@@ -9,11 +9,9 @@
|
|||||||
>
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th/>
|
<th />
|
||||||
<th>
|
<th>
|
||||||
<div class="cell-data">
|
<div class="cell-data">Row #{{ currentRowIndex + 1 }}</div>
|
||||||
Row #{{ currentRowIndex + 1 }}
|
|
||||||
</div>
|
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@@ -39,11 +37,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="table-footer">
|
<div class="table-footer">
|
||||||
<div class="table-footer-count">
|
<div class="table-footer-count">
|
||||||
{{ rowCount }} {{rowCount === 1 ? 'row' : 'rows'}} retrieved
|
{{ rowCount }} {{ rowCount === 1 ? 'row' : 'rows' }} retrieved
|
||||||
<span v-if="time">in {{ time }}</span>
|
<span v-if="time">in {{ time }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<row-navigator v-model="currentRowIndex" :total="rowCount"/>
|
<row-navigator v-model="currentRowIndex" :total="rowCount" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -61,31 +59,32 @@ export default {
|
|||||||
selectedColumnIndex: Number
|
selectedColumnIndex: Number
|
||||||
},
|
},
|
||||||
emits: ['updateSelectedCell'],
|
emits: ['updateSelectedCell'],
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
selectedCellElement: null,
|
selectedCellElement: null,
|
||||||
currentRowIndex: this.rowIndex
|
currentRowIndex: this.rowIndex
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
columns () {
|
columns() {
|
||||||
return this.dataSet.columns
|
return this.dataSet.columns
|
||||||
},
|
},
|
||||||
rowCount () {
|
rowCount() {
|
||||||
return this.dataSet.values[this.columns[0]].length
|
return this.dataSet.values[this.columns[0]].length
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
const col = this.selectedColumnIndex
|
const col = this.selectedColumnIndex
|
||||||
const row = this.currentRowIndex
|
const row = this.currentRowIndex
|
||||||
const cell = this.$refs.table
|
const cell = this.$refs.table.querySelector(
|
||||||
.querySelector(`td[data-col="${col}"][data-row="${row}"]`)
|
`td[data-col="${col}"][data-row="${row}"]`
|
||||||
|
)
|
||||||
if (cell) {
|
if (cell) {
|
||||||
this.selectCell(cell)
|
this.selectCell(cell)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
async currentRowIndex () {
|
async currentRowIndex() {
|
||||||
await nextTick()
|
await nextTick()
|
||||||
if (this.selectedCellElement) {
|
if (this.selectedCellElement) {
|
||||||
const previouslySelected = this.selectedCellElement
|
const previouslySelected = this.selectedCellElement
|
||||||
@@ -95,16 +94,16 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
isBlob (value) {
|
isBlob(value) {
|
||||||
return value && ArrayBuffer.isView(value)
|
return value && ArrayBuffer.isView(value)
|
||||||
},
|
},
|
||||||
isNull (value) {
|
isNull(value) {
|
||||||
return value === null
|
return value === null
|
||||||
},
|
},
|
||||||
getCellValue (col) {
|
getCellValue(col) {
|
||||||
return this.dataSet.values[col][this.currentRowIndex]
|
return this.dataSet.values[col][this.currentRowIndex]
|
||||||
},
|
},
|
||||||
getCellText (col) {
|
getCellText(col) {
|
||||||
const value = this.getCellValue(col)
|
const value = this.getCellValue(col)
|
||||||
if (this.isNull(value)) {
|
if (this.isNull(value)) {
|
||||||
return 'NULL'
|
return 'NULL'
|
||||||
@@ -114,7 +113,7 @@ export default {
|
|||||||
}
|
}
|
||||||
return value
|
return value
|
||||||
},
|
},
|
||||||
onTableKeydown (e) {
|
onTableKeydown(e) {
|
||||||
const keyCodeMap = {
|
const keyCodeMap = {
|
||||||
38: 'up',
|
38: 'up',
|
||||||
40: 'down'
|
40: 'down'
|
||||||
@@ -130,10 +129,10 @@ export default {
|
|||||||
|
|
||||||
this.moveFocusInTable(this.selectedCellElement, keyCodeMap[e.keyCode])
|
this.moveFocusInTable(this.selectedCellElement, keyCodeMap[e.keyCode])
|
||||||
},
|
},
|
||||||
onCellClick (e) {
|
onCellClick(e) {
|
||||||
this.selectCell(e.target.closest('td'), false)
|
this.selectCell(e.target.closest('td'), false)
|
||||||
},
|
},
|
||||||
selectCell (cell, scrollTo = true) {
|
selectCell(cell, scrollTo = true) {
|
||||||
if (!cell) {
|
if (!cell) {
|
||||||
if (this.selectedCellElement) {
|
if (this.selectedCellElement) {
|
||||||
this.selectedCellElement.ariaSelected = 'false'
|
this.selectedCellElement.ariaSelected = 'false'
|
||||||
@@ -152,19 +151,21 @@ export default {
|
|||||||
|
|
||||||
if (this.selectedCellElement && scrollTo) {
|
if (this.selectedCellElement && scrollTo) {
|
||||||
this.selectedCellElement.scrollIntoView()
|
this.selectedCellElement.scrollIntoView()
|
||||||
this.selectedCellElement.closest('.table-container').scrollTo({ left: 0 })
|
this.selectedCellElement
|
||||||
|
.closest('.table-container')
|
||||||
|
.scrollTo({ left: 0 })
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$emit('updateSelectedCell', this.selectedCellElement)
|
this.$emit('updateSelectedCell', this.selectedCellElement)
|
||||||
},
|
},
|
||||||
moveFocusInTable (initialCell, direction) {
|
moveFocusInTable(initialCell, direction) {
|
||||||
const currentColIndex = +initialCell.dataset.col
|
const currentColIndex = +initialCell.dataset.col
|
||||||
const newColIndex = direction === 'up'
|
const newColIndex =
|
||||||
? currentColIndex - 1
|
direction === 'up' ? currentColIndex - 1 : currentColIndex + 1
|
||||||
: currentColIndex + 1
|
|
||||||
|
|
||||||
const newCell = this.$refs.table
|
const newCell = this.$refs.table.querySelector(
|
||||||
.querySelector(`td[data-col="${newColIndex}"][data-row="${this.currentRowIndex}"]`)
|
`td[data-col="${newColIndex}"][data-row="${this.currentRowIndex}"]`
|
||||||
|
)
|
||||||
if (newCell) {
|
if (newCell) {
|
||||||
this.selectCell(newCell)
|
this.selectCell(newCell)
|
||||||
}
|
}
|
||||||
@@ -180,7 +181,7 @@ table.sqliteviz-table:focus {
|
|||||||
.sqliteviz-table tbody td:hover {
|
.sqliteviz-table tbody td:hover {
|
||||||
background-color: var(--color-bg-light-3);
|
background-color: var(--color-bg-light-3);
|
||||||
}
|
}
|
||||||
.sqliteviz-table tbody td[aria-selected="true"] {
|
.sqliteviz-table tbody td[aria-selected='true'] {
|
||||||
box-shadow: inset 0 0 0 1px var(--color-accent);
|
box-shadow: inset 0 0 0 1px var(--color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -12,13 +12,7 @@
|
|||||||
{{ format.text }}
|
{{ format.text }}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button type="button" class="copy" @click="copyToClipboard">Copy</button>
|
||||||
type="button"
|
|
||||||
class="copy"
|
|
||||||
@click="copyToClipboard"
|
|
||||||
>
|
|
||||||
Copy
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="value-body">
|
<div class="value-body">
|
||||||
<codemirror
|
<codemirror
|
||||||
@@ -30,7 +24,8 @@
|
|||||||
<pre
|
<pre
|
||||||
v-if="currentFormat === 'text'"
|
v-if="currentFormat === 'text'"
|
||||||
:class="['text-value', { 'meta-value': isNull || isBlob }]"
|
:class="['text-value', { 'meta-value': isNull || isBlob }]"
|
||||||
>{{ cellText }}</pre>
|
>{{ cellText }}</pre
|
||||||
|
>
|
||||||
<logs
|
<logs
|
||||||
v-if="messages && messages.length > 0"
|
v-if="messages && messages.length > 0"
|
||||||
:messages="messages"
|
:messages="messages"
|
||||||
@@ -60,7 +55,7 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
cellValue: [String, Number, Uint8Array]
|
cellValue: [String, Number, Uint8Array]
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
formats: [
|
formats: [
|
||||||
{ text: 'Text', value: 'text' },
|
{ text: 'Text', value: 'text' },
|
||||||
@@ -82,13 +77,13 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
isBlob () {
|
isBlob() {
|
||||||
return this.cellValue && ArrayBuffer.isView(this.cellValue)
|
return this.cellValue && ArrayBuffer.isView(this.cellValue)
|
||||||
},
|
},
|
||||||
isNull () {
|
isNull() {
|
||||||
return this.cellValue === null
|
return this.cellValue === null
|
||||||
},
|
},
|
||||||
cellText () {
|
cellText() {
|
||||||
const value = this.cellValue
|
const value = this.cellValue
|
||||||
if (this.isNull) {
|
if (this.isNull) {
|
||||||
return 'NULL'
|
return 'NULL'
|
||||||
@@ -100,14 +95,14 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
currentFormat () {
|
currentFormat() {
|
||||||
this.messages = []
|
this.messages = []
|
||||||
this.formattedJson = ''
|
this.formattedJson = ''
|
||||||
if (this.currentFormat === 'json') {
|
if (this.currentFormat === 'json') {
|
||||||
this.formatJson(this.cellValue)
|
this.formatJson(this.cellValue)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
cellValue () {
|
cellValue() {
|
||||||
this.messages = []
|
this.messages = []
|
||||||
if (this.currentFormat === 'json') {
|
if (this.currentFormat === 'json') {
|
||||||
this.formatJson(this.cellValue)
|
this.formatJson(this.cellValue)
|
||||||
@@ -115,24 +110,23 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
formatJson (jsonStr) {
|
formatJson(jsonStr) {
|
||||||
try {
|
try {
|
||||||
this.formattedJson = JSON.stringify(
|
this.formattedJson = JSON.stringify(JSON.parse(jsonStr), null, 4)
|
||||||
JSON.parse(jsonStr), null, 4
|
|
||||||
)
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e)
|
console.error(e)
|
||||||
this.formattedJson = ''
|
this.formattedJson = ''
|
||||||
this.messages = [{
|
this.messages = [
|
||||||
|
{
|
||||||
type: 'error',
|
type: 'error',
|
||||||
message: 'Can\'t parse JSON.'
|
message: "Can't parse JSON."
|
||||||
}]
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
copyToClipboard () {
|
copyToClipboard() {
|
||||||
cIo.copyText(this.currentFormat === 'json'
|
cIo.copyText(
|
||||||
? this.formattedJson
|
this.currentFormat === 'json' ? this.formattedJson : this.cellValue,
|
||||||
: this.cellValue,
|
|
||||||
'The value is copied to clipboard.'
|
'The value is copied to clipboard.'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -188,7 +182,7 @@ export default {
|
|||||||
background-color: var(--color-bg-light);
|
background-color: var(--color-bg-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.value-viewer-toolbar button[aria-selected="true"] {
|
.value-viewer-toolbar button[aria-selected='true'] {
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,23 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="run-result-panel" ref="runResultPanel">
|
<div class="run-result-panel" ref="runResultPanel">
|
||||||
<component
|
<component
|
||||||
:is="viewValuePanelVisible ? 'splitpanes':'div'"
|
:is="viewValuePanelVisible ? 'splitpanes' : 'div'"
|
||||||
:before="{ size: 50, max: 100 }"
|
:before="{ size: 50, max: 100 }"
|
||||||
:after="{ size: 50, max: 100 }"
|
:after="{ size: 50, max: 100 }"
|
||||||
:default="{ before: 50, after: 50 }"
|
:default="{ before: 50, after: 50 }"
|
||||||
class="run-result-panel-content"
|
class="run-result-panel-content"
|
||||||
>
|
>
|
||||||
<template #left-pane>
|
<template #left-pane>
|
||||||
<div :id="'run-result-left-pane-'+tab.id" class="result-set-container"/>
|
<div
|
||||||
|
:id="'run-result-left-pane-' + tab.id"
|
||||||
|
class="result-set-container"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<div :id="'run-result-result-set-'+tab.id" class="result-set-container"/>
|
<div
|
||||||
|
:id="'run-result-result-set-' + tab.id"
|
||||||
|
class="result-set-container"
|
||||||
|
/>
|
||||||
<template #right-pane v-if="viewValuePanelVisible">
|
<template #right-pane v-if="viewValuePanelVisible">
|
||||||
<div class="value-viewer-container">
|
<div class="value-viewer-container">
|
||||||
<value-viewer
|
<value-viewer
|
||||||
v-show="selectedCell"
|
v-show="selectedCell"
|
||||||
:cellValue="selectedCell
|
:cellValue="
|
||||||
? result.values[result.columns[selectedCell.dataset.col]][selectedCell.dataset.row]
|
selectedCell
|
||||||
: ''"
|
? result.values[result.columns[selectedCell.dataset.col]][
|
||||||
|
selectedCell.dataset.row
|
||||||
|
]
|
||||||
|
: ''
|
||||||
|
"
|
||||||
/>
|
/>
|
||||||
<div v-show="!selectedCell" class="table-preview">
|
<div v-show="!selectedCell" class="table-preview">
|
||||||
No cell selected to view
|
No cell selected to view
|
||||||
@@ -33,7 +43,7 @@
|
|||||||
tooltip-position="top-left"
|
tooltip-position="top-left"
|
||||||
@click="exportToCsv"
|
@click="exportToCsv"
|
||||||
>
|
>
|
||||||
<export-to-csv-icon/>
|
<export-to-csv-icon />
|
||||||
</icon-button>
|
</icon-button>
|
||||||
|
|
||||||
<icon-button
|
<icon-button
|
||||||
@@ -43,7 +53,7 @@
|
|||||||
tooltip-position="top-left"
|
tooltip-position="top-left"
|
||||||
@click="prepareCopy"
|
@click="prepareCopy"
|
||||||
>
|
>
|
||||||
<clipboard-icon/>
|
<clipboard-icon />
|
||||||
</icon-button>
|
</icon-button>
|
||||||
|
|
||||||
<icon-button
|
<icon-button
|
||||||
@@ -54,7 +64,7 @@
|
|||||||
:active="viewRecord"
|
:active="viewRecord"
|
||||||
@click="toggleViewRecord"
|
@click="toggleViewRecord"
|
||||||
>
|
>
|
||||||
<row-icon/>
|
<row-icon />
|
||||||
</icon-button>
|
</icon-button>
|
||||||
|
|
||||||
<icon-button
|
<icon-button
|
||||||
@@ -65,7 +75,7 @@
|
|||||||
:active="viewValuePanelVisible"
|
:active="viewValuePanelVisible"
|
||||||
@click="toggleViewValuePanel"
|
@click="toggleViewValuePanel"
|
||||||
>
|
>
|
||||||
<view-cell-value-icon/>
|
<view-cell-value-icon />
|
||||||
</icon-button>
|
</icon-button>
|
||||||
</side-tool-bar>
|
</side-tool-bar>
|
||||||
|
|
||||||
@@ -80,11 +90,7 @@
|
|||||||
@cancel="cancelCopy"
|
@cancel="cancelCopy"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<teleport
|
<teleport defer :to="resultSetTeleportTarget" :disabled="!enableTeleport">
|
||||||
defer
|
|
||||||
:to="resultSetTeleportTarget"
|
|
||||||
:disabled="!enableTeleport"
|
|
||||||
>
|
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
v-show="result === null && !isGettingResults && !error"
|
v-show="result === null && !isGettingResults && !error"
|
||||||
@@ -93,7 +99,7 @@
|
|||||||
Run your query and get results here
|
Run your query and get results here
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isGettingResults" class="table-preview result-in-progress">
|
<div v-if="isGettingResults" class="table-preview result-in-progress">
|
||||||
<loading-indicator :size="30"/>
|
<loading-indicator :size="30" />
|
||||||
Fetching results...
|
Fetching results...
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@@ -102,7 +108,7 @@
|
|||||||
>
|
>
|
||||||
No rows retrieved according to your query
|
No rows retrieved according to your query
|
||||||
</div>
|
</div>
|
||||||
<logs v-if="error" :messages="[error]"/>
|
<logs v-if="error" :messages="[error]" />
|
||||||
<sql-table
|
<sql-table
|
||||||
v-if="result && !viewRecord"
|
v-if="result && !viewRecord"
|
||||||
:data-set="result"
|
:data-set="result"
|
||||||
@@ -158,7 +164,7 @@ export default {
|
|||||||
time: [String, Number]
|
time: [String, Number]
|
||||||
},
|
},
|
||||||
emits: ['switchTo'],
|
emits: ['switchTo'],
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
resizeObserver: null,
|
resizeObserver: null,
|
||||||
pageSize: 20,
|
pageSize: 20,
|
||||||
@@ -188,11 +194,12 @@ export default {
|
|||||||
Splitpanes
|
Splitpanes
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
resultSetTeleportTarget () {
|
resultSetTeleportTarget() {
|
||||||
if (!this.enableTeleport) {
|
if (!this.enableTeleport) {
|
||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
const base = `#${this.viewValuePanelVisible
|
const base = `#${
|
||||||
|
this.viewValuePanelVisible
|
||||||
? 'run-result-left-pane'
|
? 'run-result-left-pane'
|
||||||
: 'run-result-result-set'
|
: 'run-result-result-set'
|
||||||
}`
|
}`
|
||||||
@@ -200,32 +207,32 @@ export default {
|
|||||||
return base + tabIdPostfix
|
return base + tabIdPostfix
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
activated () {
|
activated() {
|
||||||
this.enableTeleport = true
|
this.enableTeleport = true
|
||||||
},
|
},
|
||||||
deactivated () {
|
deactivated() {
|
||||||
this.enableTeleport = false
|
this.enableTeleport = false
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.resizeObserver = new ResizeObserver(this.handleResize)
|
this.resizeObserver = new ResizeObserver(this.handleResize)
|
||||||
this.resizeObserver.observe(this.$refs.runResultPanel)
|
this.resizeObserver.observe(this.$refs.runResultPanel)
|
||||||
this.calculatePageSize()
|
this.calculatePageSize()
|
||||||
},
|
},
|
||||||
beforeUnmount () {
|
beforeUnmount() {
|
||||||
this.resizeObserver.unobserve(this.$refs.runResultPanel)
|
this.resizeObserver.unobserve(this.$refs.runResultPanel)
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
result () {
|
result() {
|
||||||
this.defaultSelectedCell = null
|
this.defaultSelectedCell = null
|
||||||
this.selectedCell = null
|
this.selectedCell = null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleResize () {
|
handleResize() {
|
||||||
this.calculatePageSize()
|
this.calculatePageSize()
|
||||||
},
|
},
|
||||||
|
|
||||||
calculatePageSize () {
|
calculatePageSize() {
|
||||||
const runResultPanel = this.$refs.runResultPanel
|
const runResultPanel = this.$refs.runResultPanel
|
||||||
// 27 - table footer hight
|
// 27 - table footer hight
|
||||||
// 5 - padding-bottom of rounded table container
|
// 5 - padding-bottom of rounded table container
|
||||||
@@ -234,9 +241,10 @@ export default {
|
|||||||
this.pageSize = Math.max(Math.floor(freeSpace / 35), 20)
|
this.pageSize = Math.max(Math.floor(freeSpace / 35), 20)
|
||||||
},
|
},
|
||||||
|
|
||||||
exportToCsv () {
|
exportToCsv() {
|
||||||
if (this.result && this.result.values) {
|
if (this.result && this.result.values) {
|
||||||
events.send('resultset.export',
|
events.send(
|
||||||
|
'resultset.export',
|
||||||
this.result.values[this.result.columns[0]].length,
|
this.result.values[this.result.columns[0]].length,
|
||||||
{ to: 'csv' }
|
{ to: 'csv' }
|
||||||
)
|
)
|
||||||
@@ -245,9 +253,10 @@ export default {
|
|||||||
fIo.exportToFile(csv.serialize(this.result), 'result_set.csv', 'text/csv')
|
fIo.exportToFile(csv.serialize(this.result), 'result_set.csv', 'text/csv')
|
||||||
},
|
},
|
||||||
|
|
||||||
async prepareCopy () {
|
async prepareCopy() {
|
||||||
if (this.result && this.result.values) {
|
if (this.result && this.result.values) {
|
||||||
events.send('resultset.export',
|
events.send(
|
||||||
|
'resultset.export',
|
||||||
this.result.values[this.result.columns[0]].length,
|
this.result.values[this.result.columns[0]].length,
|
||||||
{ to: 'clipboard' }
|
{ to: 'clipboard' }
|
||||||
)
|
)
|
||||||
@@ -261,7 +270,7 @@ export default {
|
|||||||
await time.sleep(0)
|
await time.sleep(0)
|
||||||
this.dataToCopy = csv.serialize(this.result)
|
this.dataToCopy = csv.serialize(this.result)
|
||||||
const t1 = performance.now()
|
const t1 = performance.now()
|
||||||
if ((t1 - t0) < 950) {
|
if (t1 - t0 < 950) {
|
||||||
this.$modal.hide('prepareCSVCopy')
|
this.$modal.hide('prepareCSVCopy')
|
||||||
this.copyToClipboard()
|
this.copyToClipboard()
|
||||||
} else {
|
} else {
|
||||||
@@ -276,21 +285,21 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
copyToClipboard () {
|
copyToClipboard() {
|
||||||
cIo.copyText(this.dataToCopy, 'CSV copied to clipboard successfully')
|
cIo.copyText(this.dataToCopy, 'CSV copied to clipboard successfully')
|
||||||
this.$modal.hide('prepareCSVCopy')
|
this.$modal.hide('prepareCSVCopy')
|
||||||
},
|
},
|
||||||
|
|
||||||
cancelCopy () {
|
cancelCopy() {
|
||||||
this.dataToCopy = null
|
this.dataToCopy = null
|
||||||
this.$modal.hide('prepareCSVCopy')
|
this.$modal.hide('prepareCSVCopy')
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleViewValuePanel () {
|
toggleViewValuePanel() {
|
||||||
this.viewValuePanelVisible = !this.viewValuePanelVisible
|
this.viewValuePanelVisible = !this.viewValuePanelVisible
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleViewRecord () {
|
toggleViewRecord() {
|
||||||
if (this.viewRecord) {
|
if (this.viewRecord) {
|
||||||
this.defaultSelectedCell = {
|
this.defaultSelectedCell = {
|
||||||
row: this.$refs.recordView.currentRowIndex,
|
row: this.$refs.recordView.currentRowIndex,
|
||||||
@@ -304,7 +313,7 @@ export default {
|
|||||||
this.viewRecord = !this.viewRecord
|
this.viewRecord = !this.viewRecord
|
||||||
},
|
},
|
||||||
|
|
||||||
onUpdateSelectedCell (e) {
|
onUpdateSelectedCell(e) {
|
||||||
this.selectedCell = e
|
this.selectedCell = e
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
tooltip-position="top-left"
|
tooltip-position="top-left"
|
||||||
@click="$emit('switchTo', 'table')"
|
@click="$emit('switchTo', 'table')"
|
||||||
>
|
>
|
||||||
<table-icon/>
|
<table-icon />
|
||||||
</icon-button>
|
</icon-button>
|
||||||
|
|
||||||
<icon-button
|
<icon-button
|
||||||
@@ -30,9 +30,9 @@
|
|||||||
<data-view-icon />
|
<data-view-icon />
|
||||||
</icon-button>
|
</icon-button>
|
||||||
|
|
||||||
<div class="side-tool-bar-divider" v-if="$slots.default"/>
|
<div class="side-tool-bar-divider" v-if="$slots.default" />
|
||||||
|
|
||||||
<slot/>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -3,17 +3,19 @@ import 'codemirror/addon/hint/show-hint.js'
|
|||||||
import 'codemirror/addon/hint/sql-hint.js'
|
import 'codemirror/addon/hint/sql-hint.js'
|
||||||
import store from '@/store'
|
import store from '@/store'
|
||||||
|
|
||||||
function _getHintText (hint) {
|
function _getHintText(hint) {
|
||||||
return typeof hint === 'string' ? hint : hint.text
|
return typeof hint === 'string' ? hint : hint.text
|
||||||
}
|
}
|
||||||
export function getHints (cm, options) {
|
export function getHints(cm, options) {
|
||||||
const result = CM.hint.sql(cm, options)
|
const result = CM.hint.sql(cm, options)
|
||||||
|
|
||||||
// Don't show the hint if there is only one option
|
// Don't show the hint if there is only one option
|
||||||
// and the replacingText is already equals to this option
|
// and the replacingText is already equals to this option
|
||||||
const replacedText = cm.getRange(result.from, result.to).toUpperCase()
|
const replacedText = cm.getRange(result.from, result.to).toUpperCase()
|
||||||
if (result.list.length === 1 &&
|
if (
|
||||||
_getHintText(result.list[0]).toUpperCase() === replacedText) {
|
result.list.length === 1 &&
|
||||||
|
_getHintText(result.list[0]).toUpperCase() === replacedText
|
||||||
|
) {
|
||||||
result.list = []
|
result.list = []
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -21,7 +23,7 @@ export function getHints (cm, options) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const hintOptions = {
|
const hintOptions = {
|
||||||
get tables () {
|
get tables() {
|
||||||
const tables = {}
|
const tables = {}
|
||||||
if (store.state.db.schema) {
|
if (store.state.db.schema) {
|
||||||
store.state.db.schema.forEach(table => {
|
store.state.db.schema.forEach(table => {
|
||||||
@@ -30,7 +32,7 @@ const hintOptions = {
|
|||||||
}
|
}
|
||||||
return tables
|
return tables
|
||||||
},
|
},
|
||||||
get defaultTable () {
|
get defaultTable() {
|
||||||
const schema = store.state.db.schema
|
const schema = store.state.db.schema
|
||||||
return schema && schema.length === 1 ? schema[0].name : null
|
return schema && schema.length === 1 ? schema[0].name : null
|
||||||
},
|
},
|
||||||
@@ -39,11 +41,11 @@ const hintOptions = {
|
|||||||
alignWithWord: false
|
alignWithWord: false
|
||||||
}
|
}
|
||||||
|
|
||||||
export function showHintOnDemand (editor) {
|
export function showHintOnDemand(editor) {
|
||||||
CM.showHint(editor, getHints, hintOptions)
|
CM.showHint(editor, getHints, hintOptions)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function showHint (editor) {
|
export default function showHint(editor) {
|
||||||
// Don't show autocomplete after a space or semicolon or in string literals
|
// Don't show autocomplete after a space or semicolon or in string literals
|
||||||
const token = editor.getTokenAt(editor.getCursor())
|
const token = editor.getTokenAt(editor.getCursor())
|
||||||
const ch = token.string.slice(-1)
|
const ch = token.string.slice(-1)
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
tooltip-position="top-left"
|
tooltip-position="top-left"
|
||||||
@click="$emit('run')"
|
@click="$emit('run')"
|
||||||
>
|
>
|
||||||
<run-icon :disabled="runDisabled"/>
|
<run-icon :disabled="runDisabled" />
|
||||||
</icon-button>
|
</icon-button>
|
||||||
</side-tool-bar>
|
</side-tool-bar>
|
||||||
</div>
|
</div>
|
||||||
@@ -47,7 +47,7 @@ export default {
|
|||||||
IconButton,
|
IconButton,
|
||||||
RunIcon
|
RunIcon
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
query: this.modelValue,
|
query: this.modelValue,
|
||||||
cmOptions: {
|
cmOptions: {
|
||||||
@@ -63,18 +63,18 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
runDisabled () {
|
runDisabled() {
|
||||||
return (!this.$store.state.db || !this.query || this.isGettingResults)
|
return !this.$store.state.db || !this.query || this.isGettingResults
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
query () {
|
query() {
|
||||||
this.$emit('update:modelValue', this.query)
|
this.$emit('update:modelValue', this.query)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onChange: time.debounce((value, editor) => showHint(editor), 400),
|
onChange: time.debounce((value, editor) => showHint(editor), 400),
|
||||||
focus () {
|
focus() {
|
||||||
this.$refs.cm.cminstance?.focus()
|
this.$refs.cm.cminstance?.focus()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,15 +11,15 @@
|
|||||||
<div :id="'above-' + tab.id" class="above" />
|
<div :id="'above-' + tab.id" class="above" />
|
||||||
</template>
|
</template>
|
||||||
<template #right-pane>
|
<template #right-pane>
|
||||||
<div :id="'bottom-'+ tab.id" ref="bottomPane" class="bottomPane" />
|
<div :id="'bottom-' + tab.id" ref="bottomPane" class="bottomPane" />
|
||||||
</template>
|
</template>
|
||||||
</splitpanes>
|
</splitpanes>
|
||||||
|
|
||||||
<div :id="'hidden-'+ tab.id" class="hidden-part" />
|
<div :id="'hidden-' + tab.id" class="hidden-part" />
|
||||||
|
|
||||||
<teleport
|
<teleport
|
||||||
defer
|
defer
|
||||||
:to="enableTeleport ? `#${tab.layout.sqlEditor}-${tab.id}`: undefined"
|
:to="enableTeleport ? `#${tab.layout.sqlEditor}-${tab.id}` : undefined"
|
||||||
:disabled="!enableTeleport"
|
:disabled="!enableTeleport"
|
||||||
>
|
>
|
||||||
<sql-editor
|
<sql-editor
|
||||||
@@ -33,7 +33,7 @@
|
|||||||
|
|
||||||
<teleport
|
<teleport
|
||||||
defer
|
defer
|
||||||
:to="enableTeleport ? `#${tab.layout.table}-${tab.id}`: undefined"
|
:to="enableTeleport ? `#${tab.layout.table}-${tab.id}` : undefined"
|
||||||
:disabled="!enableTeleport"
|
:disabled="!enableTeleport"
|
||||||
>
|
>
|
||||||
<run-result
|
<run-result
|
||||||
@@ -84,51 +84,53 @@ export default {
|
|||||||
RunResult,
|
RunResult,
|
||||||
Splitpanes
|
Splitpanes
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
topPaneSize: this.tab.maximize
|
topPaneSize: this.tab.maximize
|
||||||
? this.tab.layout[this.tab.maximize] === 'above' ? 100 : 0
|
? this.tab.layout[this.tab.maximize] === 'above'
|
||||||
|
? 100
|
||||||
|
: 0
|
||||||
: 50,
|
: 50,
|
||||||
enableTeleport: this.$store.state.isWorkspaceVisible
|
enableTeleport: this.$store.state.isWorkspaceVisible
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
isActive () {
|
isActive() {
|
||||||
return this.tab.id === this.$store.state.currentTabId
|
return this.tab.id === this.$store.state.currentTabId
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
isActive: {
|
isActive: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
async handler () {
|
async handler() {
|
||||||
if (this.isActive) {
|
if (this.isActive) {
|
||||||
await nextTick()
|
await nextTick()
|
||||||
this.$refs.sqlEditor?.focus()
|
this.$refs.sqlEditor?.focus()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'tab.query' () {
|
'tab.query'() {
|
||||||
this.$store.commit('updateTab', {
|
this.$store.commit('updateTab', {
|
||||||
tab: this.tab,
|
tab: this.tab,
|
||||||
newValues: { isSaved: false }
|
newValues: { isSaved: false }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async activated () {
|
async activated() {
|
||||||
this.enableTeleport = true
|
this.enableTeleport = true
|
||||||
if (this.isActive) {
|
if (this.isActive) {
|
||||||
await nextTick()
|
await nextTick()
|
||||||
this.$refs.sqlEditor.focus()
|
this.$refs.sqlEditor.focus()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
deactivated () {
|
deactivated() {
|
||||||
this.enableTeleport = false
|
this.enableTeleport = false
|
||||||
},
|
},
|
||||||
async mounted () {
|
async mounted() {
|
||||||
this.tab.dataView = this.$refs.dataView
|
this.tab.dataView = this.$refs.dataView
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onSwitchView (from, to) {
|
onSwitchView(from, to) {
|
||||||
const fromPosition = this.tab.layout[from]
|
const fromPosition = this.tab.layout[from]
|
||||||
this.tab.layout[from] = this.tab.layout[to]
|
this.tab.layout[from] = this.tab.layout[to]
|
||||||
this.tab.layout[to] = fromPosition
|
this.tab.layout[to] = fromPosition
|
||||||
@@ -136,7 +138,7 @@ export default {
|
|||||||
|
|
||||||
events.send('inquiry.panel', null, { panel: to })
|
events.send('inquiry.panel', null, { panel: to })
|
||||||
},
|
},
|
||||||
onDataViewUpdate () {
|
onDataViewUpdate() {
|
||||||
this.$store.commit('updateTab', {
|
this.$store.commit('updateTab', {
|
||||||
tab: this.tab,
|
tab: this.tab,
|
||||||
newValues: { isSaved: false }
|
newValues: { isSaved: false }
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
v-for="(tab, index) in tabs"
|
v-for="(tab, index) in tabs"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="selectTab(tab.id)"
|
@click="selectTab(tab.id)"
|
||||||
:class="[{'tab-selected': (tab.id === selectedTabId)}, 'tab']"
|
:class="[{ 'tab-selected': tab.id === selectedTabId }, 'tab']"
|
||||||
>
|
>
|
||||||
<div class="tab-name">
|
<div class="tab-name">
|
||||||
<span v-show="!tab.isSaved" class="star">*</span>
|
<span v-show="!tab.isSaved" class="star">*</span>
|
||||||
@@ -13,15 +13,15 @@
|
|||||||
<span v-else class="tab-untitled">{{ tab.tempName }}</span>
|
<span v-else class="tab-untitled">{{ tab.tempName }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<close-icon class="close-icon" :size="10" @click="beforeCloseTab(tab)"/>
|
<close-icon
|
||||||
</div>
|
class="close-icon"
|
||||||
</div>
|
:size="10"
|
||||||
</div>
|
@click="beforeCloseTab(tab)"
|
||||||
<tab
|
|
||||||
v-for="tab in tabs"
|
|
||||||
:key="tab.id"
|
|
||||||
:tab="tab"
|
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<tab v-for="tab in tabs" :key="tab.id" :tab="tab" />
|
||||||
<div v-show="tabs.length === 0" id="start-guide">
|
<div v-show="tabs.length === 0" id="start-guide">
|
||||||
<span class="link" @click="emitCreateTabEvent">Create</span>
|
<span class="link" @click="emitCreateTabEvent">Create</span>
|
||||||
new inquiry from scratch or open one from
|
new inquiry from scratch or open one from
|
||||||
@@ -31,26 +31,33 @@
|
|||||||
<!--Close tab warning dialog -->
|
<!--Close tab warning dialog -->
|
||||||
<modal modal-id="close-warn" class="dialog" content-style="width: 560px;">
|
<modal modal-id="close-warn" class="dialog" content-style="width: 560px;">
|
||||||
<div class="dialog-header">
|
<div class="dialog-header">
|
||||||
Close tab {{
|
Close tab
|
||||||
|
{{
|
||||||
closingTab !== null
|
closingTab !== null
|
||||||
? (closingTab.name || `[${closingTab.tempName}]`)
|
? closingTab.name || `[${closingTab.tempName}]`
|
||||||
: ''
|
: ''
|
||||||
}}
|
}}
|
||||||
<close-icon @click="$modal.hide('close-warn')"/>
|
<close-icon @click="$modal.hide('close-warn')" />
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-body">
|
<div class="dialog-body">
|
||||||
You have unsaved changes. Save changes in {{
|
You have unsaved changes. Save changes in
|
||||||
|
{{
|
||||||
closingTab !== null
|
closingTab !== null
|
||||||
? (closingTab.name || `[${closingTab.tempName}]`)
|
? closingTab.name || `[${closingTab.tempName}]`
|
||||||
: ''
|
: ''
|
||||||
}} before closing?
|
}}
|
||||||
|
before closing?
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-buttons-container">
|
<div class="dialog-buttons-container">
|
||||||
<button class="secondary" @click="closeTab(closingTab)">
|
<button class="secondary" @click="closeTab(closingTab)">
|
||||||
Close without saving
|
Close without saving
|
||||||
</button>
|
</button>
|
||||||
<button class="secondary" @click="$modal.hide('close-warn')">Don't close</button>
|
<button class="secondary" @click="$modal.hide('close-warn')">
|
||||||
<button class="primary" @click="saveAndClose(closingTab)">Save and close</button>
|
Don't close
|
||||||
|
</button>
|
||||||
|
<button class="primary" @click="saveAndClose(closingTab)">
|
||||||
|
Save and close
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</modal>
|
</modal>
|
||||||
</div>
|
</div>
|
||||||
@@ -67,36 +74,36 @@ export default {
|
|||||||
Tab,
|
Tab,
|
||||||
CloseIcon
|
CloseIcon
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
closingTab: null
|
closingTab: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
tabs () {
|
tabs() {
|
||||||
return this.$store.state.tabs
|
return this.$store.state.tabs
|
||||||
},
|
},
|
||||||
selectedTabId () {
|
selectedTabId() {
|
||||||
return this.$store.state.currentTabId
|
return this.$store.state.currentTabId
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created() {
|
||||||
window.addEventListener('beforeunload', this.leavingSqliteviz)
|
window.addEventListener('beforeunload', this.leavingSqliteviz)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
emitCreateTabEvent () {
|
emitCreateTabEvent() {
|
||||||
eventBus.$emit('createNewInquiry')
|
eventBus.$emit('createNewInquiry')
|
||||||
},
|
},
|
||||||
leavingSqliteviz (event) {
|
leavingSqliteviz(event) {
|
||||||
if (this.tabs.some(tab => !tab.isSaved)) {
|
if (this.tabs.some(tab => !tab.isSaved)) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
event.returnValue = ''
|
event.returnValue = ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
selectTab (id) {
|
selectTab(id) {
|
||||||
this.$store.commit('setCurrentTabId', id)
|
this.$store.commit('setCurrentTabId', id)
|
||||||
},
|
},
|
||||||
beforeCloseTab (tab) {
|
beforeCloseTab(tab) {
|
||||||
this.closingTab = tab
|
this.closingTab = tab
|
||||||
if (!tab.isSaved) {
|
if (!tab.isSaved) {
|
||||||
this.$modal.show('close-warn')
|
this.$modal.show('close-warn')
|
||||||
@@ -104,11 +111,11 @@ export default {
|
|||||||
this.closeTab(tab)
|
this.closeTab(tab)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
closeTab (tab) {
|
closeTab(tab) {
|
||||||
this.$modal.hide('close-warn')
|
this.$modal.hide('close-warn')
|
||||||
this.$store.commit('deleteTab', tab)
|
this.$store.commit('deleteTab', tab)
|
||||||
},
|
},
|
||||||
saveAndClose (tab) {
|
saveAndClose(tab) {
|
||||||
eventBus.$on('inquirySaved', () => {
|
eventBus.$on('inquirySaved', () => {
|
||||||
this.closeTab(tab)
|
this.closeTab(tab)
|
||||||
eventBus.$off('inquirySaved')
|
eventBus.$off('inquirySaved')
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
:default="{ before: 20, after: 80 }"
|
:default="{ before: 20, after: 80 }"
|
||||||
>
|
>
|
||||||
<template #left-pane>
|
<template #left-pane>
|
||||||
<schema/>
|
<schema />
|
||||||
</template>
|
</template>
|
||||||
<template #right-pane>
|
<template #right-pane>
|
||||||
<tabs />
|
<tabs />
|
||||||
@@ -29,14 +29,17 @@ export default {
|
|||||||
Splitpanes,
|
Splitpanes,
|
||||||
Tabs
|
Tabs
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
schemaWidth: this.$route.query.hide_schema === '1' ? 0 : 20
|
schemaWidth: this.$route.query.hide_schema === '1' ? 0 : 20
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async beforeCreate () {
|
async beforeCreate() {
|
||||||
const schema = this.$store.state.db.schema
|
const schema = this.$store.state.db.schema
|
||||||
if ((!schema || schema.length === 0) && this.$store.state.tabs.length === 0) {
|
if (
|
||||||
|
(!schema || schema.length === 0) &&
|
||||||
|
this.$store.state.tabs.length === 0
|
||||||
|
) {
|
||||||
const stmt = [
|
const stmt = [
|
||||||
'/*',
|
'/*',
|
||||||
' * Your database is empty. In order to start building charts',
|
' * Your database is empty. In order to start building charts',
|
||||||
@@ -60,10 +63,10 @@ export default {
|
|||||||
events.send('inquiry.create', null, { auto: true })
|
events.send('inquiry.create', null, { auto: true })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
activated () {
|
activated() {
|
||||||
this.$store.commit('setIsWorkspaceVisible', true)
|
this.$store.commit('setIsWorkspaceVisible', true)
|
||||||
},
|
},
|
||||||
deactivated () {
|
deactivated() {
|
||||||
this.$store.commit('setIsWorkspaceVisible', false)
|
this.$store.commit('setIsWorkspaceVisible', false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<main-menu />
|
<main-menu />
|
||||||
<router-view id="main-view" v-slot="{ Component }">
|
<router-view id="main-view" v-slot="{ Component }">
|
||||||
<keep-alive include="Workspace,Inquiries">
|
<keep-alive include="Workspace,Inquiries">
|
||||||
<component :is="Component"/>
|
<component :is="Component" />
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</router-view>
|
</router-view>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { createVfm, VueFinalModal, useVfm } from 'vue-final-modal'
|
|||||||
|
|
||||||
config.global.plugins = [createVfm()]
|
config.global.plugins = [createVfm()]
|
||||||
config.global.components = {
|
config.global.components = {
|
||||||
'modal': VueFinalModal
|
modal: VueFinalModal
|
||||||
}
|
}
|
||||||
const vfm = useVfm()
|
const vfm = useVfm()
|
||||||
config.global.mocks = {
|
config.global.mocks = {
|
||||||
@@ -11,4 +11,4 @@ config.global.mocks = {
|
|||||||
show: modalId => vfm.open(modalId),
|
show: modalId => vfm.open(modalId),
|
||||||
hide: modalId => vfm.close(modalId)
|
hide: modalId => vfm.close(modalId)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,9 +13,9 @@ describe('App.vue', () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
it('Gets inquiries', () => {
|
it('Gets inquiries', () => {
|
||||||
sinon.stub(storedInquiries, 'getStoredInquiries').returns([
|
sinon
|
||||||
{ id: 1 }, { id: 2 }, { id: 3 }
|
.stub(storedInquiries, 'getStoredInquiries')
|
||||||
])
|
.returns([{ id: 1 }, { id: 2 }, { id: 3 }])
|
||||||
const state = {
|
const state = {
|
||||||
predefinedInquiries: [],
|
predefinedInquiries: [],
|
||||||
inquiries: []
|
inquiries: []
|
||||||
@@ -33,7 +33,9 @@ describe('App.vue', () => {
|
|||||||
|
|
||||||
it('Updates inquiries when they change in store', async () => {
|
it('Updates inquiries when they change in store', async () => {
|
||||||
sinon.stub(storedInquiries, 'getStoredInquiries').returns([
|
sinon.stub(storedInquiries, 'getStoredInquiries').returns([
|
||||||
{ id: 1, name: 'foo' }, { id: 2, name: 'baz' }, { id: 3, name: 'bar' }
|
{ id: 1, name: 'foo' },
|
||||||
|
{ id: 2, name: 'baz' },
|
||||||
|
{ id: 3, name: 'bar' }
|
||||||
])
|
])
|
||||||
sinon.spy(storedInquiries, 'updateStorage')
|
sinon.spy(storedInquiries, 'updateStorage')
|
||||||
|
|
||||||
@@ -43,8 +45,7 @@ describe('App.vue', () => {
|
|||||||
}
|
}
|
||||||
const store = createStore({ state, mutations })
|
const store = createStore({ state, mutations })
|
||||||
shallowMount(App, {
|
shallowMount(App, {
|
||||||
global: { stubs: ['router-view'],
|
global: { stubs: ['router-view'], plugins: [store] }
|
||||||
plugins: [store] }
|
|
||||||
})
|
})
|
||||||
|
|
||||||
store.state.inquiries.splice(0, 1, { id: 1, name: 'new foo name' })
|
store.state.inquiries.splice(0, 1, { id: 1, name: 'new foo name' })
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user