diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/tools/index.ts | 3 | ||||
-rw-r--r-- | src/tools/sql-prettify/index.ts | 26 | ||||
-rw-r--r-- | src/tools/sql-prettify/sql-prettify.service.test.ts | 6 | ||||
-rw-r--r-- | src/tools/sql-prettify/sql-prettify.service.ts | 0 | ||||
-rw-r--r-- | src/tools/sql-prettify/sql-prettify.vue | 112 |
5 files changed, 146 insertions, 1 deletions
diff --git a/src/tools/index.ts b/src/tools/index.ts index eeed10c..22613d3 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -21,6 +21,7 @@ import { tool as mathEvaluator } from './math-evaluator'; import { tool as qrCodeGenerator } from './qr-code-generator'; import { tool as randomPortGenerator } from './random-port-generator'; import { tool as romanNumeralConverter } from './roman-numeral-converter'; +import { tool as sqlPrettify } from './sql-prettify'; import { tool as textStatistics } from './text-statistics'; import { tool as tokenGenerator } from './token-generator'; import { tool as urlEncoder } from './url-encoder'; @@ -53,7 +54,7 @@ export const toolsByCategory: ToolCategory[] = [ { name: 'Development', icon: LockOpen, - components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer], + components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify], }, { name: 'Math', diff --git a/src/tools/sql-prettify/index.ts b/src/tools/sql-prettify/index.ts new file mode 100644 index 0000000..426845f --- /dev/null +++ b/src/tools/sql-prettify/index.ts @@ -0,0 +1,26 @@ +import { Database } from '@vicons/tabler'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'SQL prettify and format', + path: '/sql-prettify', + description: 'Format and prettify your SQL queries online (it supports various SQL dialects).', + keywords: [ + 'sql', + 'prettify', + 'beautify', + 'GCP BigQuery', + 'IBM DB2', + 'Apache Hive', + 'MariaDB', + 'MySQL', + 'Couchbase N1QL', + 'Oracle PL/SQL', + 'PostgreSQL', + 'Amazon Redshift', + 'Spark', + 'SQL Server Transact-SQL', + ], + component: () => import('./sql-prettify.vue'), + icon: Database, +}); diff --git a/src/tools/sql-prettify/sql-prettify.service.test.ts b/src/tools/sql-prettify/sql-prettify.service.test.ts new file mode 100644 index 0000000..aadcd84 --- /dev/null +++ b/src/tools/sql-prettify/sql-prettify.service.test.ts @@ -0,0 +1,6 @@ +import { expect, describe, it } from 'vitest'; +// import { } from './sql-prettify.service'; +// +// describe('sql-prettify', () => { +// +// })
\ No newline at end of file diff --git a/src/tools/sql-prettify/sql-prettify.service.ts b/src/tools/sql-prettify/sql-prettify.service.ts new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/tools/sql-prettify/sql-prettify.service.ts diff --git a/src/tools/sql-prettify/sql-prettify.vue b/src/tools/sql-prettify/sql-prettify.vue new file mode 100644 index 0000000..8e05158 --- /dev/null +++ b/src/tools/sql-prettify/sql-prettify.vue @@ -0,0 +1,112 @@ +<template> + <div style="flex: 0 0 100%"> + <div style="margin: 0 auto; width: 600px"> + <n-space n-space item-style="flex: 1 1 0"> + <div> + <n-form-item label="Dialect"> + <n-select + v-model:value="config.language" + :options="[ + { label: 'GCP BigQuery', value: 'bigquery' }, + { label: 'IBM DB2', value: 'db2' }, + { label: 'Apache Hive', value: 'hive' }, + { label: 'MariaDB', value: 'mariadb' }, + { label: 'MySQL', value: 'mysql' }, + { label: 'Couchbase N1QL', value: 'n1ql' }, + { label: 'Oracle PL/SQL', value: 'plsql' }, + { label: 'PostgreSQL', value: 'postgresql' }, + { label: 'Amazon Redshift', value: 'redshift' }, + { label: 'Spark', value: 'spark' }, + { label: 'Standard SQL', value: 'sql' }, + { label: 'sqlite', value: 'sqlite' }, + { label: 'SQL Server Transact-SQL', value: 'tsql' }, + ]" + /> + </n-form-item> + </div> + <div> + <n-form-item label="Keyword case"> + <n-select + v-model:value="config.keywordCase" + :options="[ + { label: 'UPPERCASE', value: 'upper' }, + { label: 'lowercase', value: 'lower' }, + { label: 'Preserve', value: 'preserve' }, + ]" + /> + </n-form-item> + </div> + <div> + <n-form-item label="Indent style"> + <n-select + v-model:value="config.indentStyle" + :options="[ + { label: 'Standard', value: 'standard' }, + { label: 'Tabular left', value: 'tabularLeft' }, + { label: 'Tabular right', value: 'tabularRight' }, + ]" + /> + </n-form-item> + </div> + </n-space> + </div> + </div> + + <n-form-item label="Your SQL query"> + <n-input + ref="inputElement" + v-model:value="rawSQL" + placeholder="Put your SQL query here..." + type="textarea" + rows="20" + autocomplete="off" + autocorrect="off" + autocapitalize="off" + spellcheck="false" + /> + </n-form-item> + <n-form-item label="Prettify version of your query"> + <n-card class="result-card" :style="`min-height: ${inputElementHeight ?? 400}px`"> + <n-config-provider :hljs="hljs"> + <n-code :code="prettySQL" language="sql" :trim="false" /> + </n-config-provider> + <n-button v-if="prettySQL" class="copy-button" secondary @click="copy">Copy</n-button> + </n-card> + </n-form-item> +</template> + +<script setup lang="ts"> +import { useCopy } from '@/composable/copy'; +import { useElementSize } from '@vueuse/core'; +import hljs from 'highlight.js/lib/core'; +import sqlHljs from 'highlight.js/lib/languages/sql'; +import { format as formatSQL, type FormatFnOptions } from 'sql-formatter'; +import { computed, reactive, ref } from 'vue'; +hljs.registerLanguage('sql', sqlHljs); + +const inputElement = ref<HTMLElement>(); +const { height: inputElementHeight } = useElementSize(inputElement); + +const config = reactive<Partial<FormatFnOptions>>({ + keywordCase: 'upper', + useTabs: false, + language: 'sql', + indentStyle: 'standard', + tabulateAlias: true, +}); + +const rawSQL = ref('select field1,field2,field3 from my_table where my_condition;'); +const prettySQL = computed(() => formatSQL(rawSQL.value, config)); +const { copy } = useCopy({ source: prettySQL }); +</script> + +<style lang="less" scoped> +.result-card { + position: relative; + .copy-button { + position: absolute; + top: 10px; + right: 10px; + } +} +</style> |