Fix query preview (#1044)

laravel · Apr 6, 2021 · 162bd1a · 162bd1a
1 parent b30b949
commit 162bd1a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 11 deletions.
diff --git a/public/app.js b/public/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=44cad02cd377aaf1fb4e",
+    "/app.js": "/app.js?id=60cc74bc741ed103bd40",
     "/app-dark.css": "/app-dark.css?id=bc22d805b64b5a2ecaaa",
     "/app.css": "/app.css?id=d2d43f24f2a54d31e084"
 }
diff --git a/resources/js/screens/queries/preview.vue b/resources/js/screens/queries/preview.vue
@@ -1,21 +1,18 @@
 <script type="text/ecmascript-6">
     import hljs from 'highlight.js/lib/highlight';
     import sql from 'highlight.js/lib/languages/sql';
-    import StandardSqlFormatter from 'sql-formatter/src/languages/StandardSqlFormatter';
+    import { format } from 'sql-formatter';
 
     export default {
-        data(){
-            return {
-                sqlFormatter: new StandardSqlFormatter({}),
-            };
-        },
-
-        methods:{
+        methods: {
             highlightSQL() {
                 this.$nextTick(() => {
                     hljs.registerLanguage('sql', sql);
                     hljs.highlightBlock(this.$refs.sqlcode);
                 });
+            },
+            formatSql(sql) {
+                return format(sql);
             }
         }
     }
@@ -56,7 +53,7 @@
             <div class="card mt-5">
                 <div class="card-header"><h5>Query</h5></div>
 
-                <pre class="code-bg p-4 mb-0 text-white" ref="sqlcode">{{sqlFormatter.format(slotProps.entry.content.sql)}}</pre>
+                <pre class="code-bg p-4 mb-0 text-white" ref="sqlcode">{{ formatSql(slotProps.entry.content.sql) }}</pre>
             </div>
         </div>
     </preview-screen>