feat(ui): SQL formatter has been implemented for editor

bahattincinic · Jun 7, 2024 · 1e5697b · 1e5697b
1 parent 8f0800e
commit 1e5697b
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 8 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -15,6 +15,7 @@
     "core-js": "^3.8.3",
     "js-cookie": "^3.0.5",
     "pinia": "^2.1.7",
+    "prettier-plugin-sql": "^0.18.0",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
     "primevue": "^3.52.0",
@@ -31,7 +32,7 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
-    "prettier": "^3.2.5"
+    "prettier": "^3.3.1"
   },
   "eslintConfig": {
     "root": true,

diff --git a/ui/src/components/ComponentModal.vue b/ui/src/components/ComponentModal.vue
@@ -31,6 +31,14 @@
               </div>
 
               <div class="flex justify-content-end">
+                <Button
+                  icon="pi pi-code"
+                  class="mr-1"
+                  aria-label="Format SQL"
+                  severity="secondary"
+                  @click="formatSQL"
+                  v-tooltip.bottom="'Click to format SQL.'"
+                />
                 <Button
                   icon="pi pi-receipt"
                   class="mr-1"
@@ -230,6 +238,8 @@ import BarChartComponent from '@/components/BarChartComponent';
 import LineChartComponent from '@/components/LineChartComponent';
 import { runQuery, waitAsyncTask } from '@/services/user';
 import SQLEditor from '@/components/SQLEditor';
+import prettier from 'prettier/standalone';
+import sqlPlugin from 'prettier-plugin-sql';
 
 export default {
   name: 'ComponentModal',
@@ -394,6 +404,13 @@ export default {
     toggleDetailSection(section) {
       this.detailSection = section === this.detailSection ? '' : section;
     },
+    async formatSQL() {
+      this.form.query = await prettier.format(this.form.query, {
+        parser: 'sql',
+        plugins: [sqlPlugin],
+        keywordCase: 'upper',
+      });
+    },
     onError(err) {
       this.$toast.add({
         severity: 'error',

diff --git a/ui/src/components/SQLEditor.vue b/ui/src/components/SQLEditor.vue
@@ -83,6 +83,7 @@ export default {
               [/\bselect\b/i, 'keyword'],
               [/\bfrom\b/i, 'keyword'],
               [/\bwhere\b/i, 'keyword'],
+              [/\blimit\b/i, 'keyword'],
               [/\border by\b/i, 'keyword'],
               [/\bgroup by\b/i, 'keyword'],
             ],