Merge pull request #113 from socialblue/develop

release new sql code highlighting

Author: mbroersen

README.md

@@ -22,6 +22,12 @@ Publish Laravel-Query-Adviser
 php artisan vendor:publish --provider="Socialblue\LaravelQueryAdviser\LaravelQueryAdviserServiceProvider"
 ```
 
+** publish the front-end application after updating **
+```bash
+php artisan vendor:publish --tag=public --force
+```
+
+
 **When updating from `0.13.2` to `0.14.0` please use**
 
 ```bash

package-lock.json

@@ -7,22 +7,22 @@
     "watch": "mix watch"
   },
   "devDependencies": {
-    "bulma": "^0.7.5",
+    "bulma": "^0.9.4",
     "bulma-extensions": "^6.2.7",
     "cross-env": "^5.2.1",
-    "highlight.js": "^11.6.0",
     "laravel-mix": "^6.0.49",
     "node-sass": "^7.0.3",
     "postcss": "^8.4.16",
     "resolve-url-loader": "^4.0.0",
     "sass": "^1.54.9",
     "sass-loader": "^12.6.0",
     "sql-formatter": "^10.6.0",
+    "sql-highlight": "^4.2.1",
     "v-clipboard": "^2.2.3",
     "vue": "^2.7.10",
-    "vue-json-pretty": "^1.9.2",
     "vue-loader": "^15.10.0",
     "vue-router": "^3.6.5",
     "vue-template-compiler": "^2.7.10"
-  }
+  },
+  "dependencies": {}
 }

package.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=1b85ca16b9b43cd073884e9e5d4692a4",
-    "/css/app.css": "/css/app.css?id=2d7161bbcbcf464e7be644297f4184f9"
+    "/js/app.js": "/js/app.js?id=812eb08c08eea5cf829d679ca810bca8",
+    "/css/app.css": "/css/app.css?id=b1e5df534d3e9de7ba4cdaa2a4ebeba4"
 }

public/css/app.css

@@ -45,7 +45,7 @@
                         </div>
                     </template>
                 </div>
-                <pre class="highlight" ref="sqlcode" ><code class="language-sql">{{prettyPrint(query.sql)}}</code></pre>
+                <sqlHighlight :sql="query.sql" />
                 <time :datetime="dateTime">{{ dateTime }}</time>
 
             </div>
@@ -72,10 +72,13 @@
 </template>
 
 <script>
-import highlight from "../mixin/hightlight";
+import sqlHighlight from "./sql-highlight";
+import { format } from 'sql-formatter';
 
 export default {
-    mixins: [highlight],
+    components: {
+        sqlHighlight
+    },
 
     props: {
         query: {
@@ -115,6 +118,13 @@ export default {
 
         clipboardSuccess() {
             window.EventBus.$emit('show-notification', {message: 'Query is copied to your clipboard'});
+        },
+
+        format(sql) {
+            return format(`${sql};`, {
+                language: 'mysql',
+                keywordCase: "upper",
+            });
         }
     },
 

public/js/app.js

@@ -42,10 +42,7 @@
 </template>
 
 <script>
-    import highlight from "../mixin/hightlight";
-
     export default {
-        mixins: [highlight],
 
         data() {
             return {

public/mix-manifest.json

@@ -37,7 +37,9 @@ export default {
                 method,
                 body,
                 headers
-            }).then(() => this.hide());
+            }).then(() => {
+                this.$router.push({name: 'sessions'});
+            });
         },
 
         hide() {

resources/assets/js/components/query-block.vue

@@ -78,7 +78,7 @@
 
         methods: {
             openSession() {
-                this.$router.push('session', {id: this.id});
+                this.$router.push({name: 'session', params: {id: this.id}});
             }
         }
     }

resources/assets/js/components/query-execute.vue

@@ -0,0 +1,40 @@
+<template>
+    <code class="sql-hl" >
+        <pre><span v-for="segment in segments" :class="`sql-hl-${segment.name}`">{{segment.content}}</span></pre>
+    </code>
+</template>
+
+<script>
+    import { format } from 'sql-formatter';
+    import { getSegments } from 'sql-highlight';
+
+    export default {
+        props: {
+            sql: {
+                type: String,
+                default: () => "",
+            },
+        },
+
+        computed: {
+            formatted() {
+                return format(`${this.sql};`, {
+                    language: 'mysql',
+                    keywordCase: 'lower',
+                    tabWidth: 4,
+                    linesBetweenQueries: 2,
+                });
+            },
+
+            segments() {
+                return getSegments(this.formatted);
+            },
+        },
+        methods: {
+            copyToClipboard() {
+
+            }
+        }
+    }
+
+</script>

resources/assets/js/components/session-import.vue

@@ -6,7 +6,7 @@ import Vue from 'vue';
 
 const routes = [
     {
-        path: '/query-adviser/session',
+        path: '/query-adviser/session/:sessionKey',
         name: 'session',
         components: {default: Session},
         meta: {permission: 1},

resources/assets/js/components/session.vue

@@ -30,6 +30,13 @@
                     <query-statistics v-bind="session" />
                 </div>
             </template>
+            <div v-else-if="loading" class="hero-body">
+                <div class="container">
+                    <h1 class="title">
+                        Loading..
+                    </h1>
+                </div>
+            </div>
             <div v-else class="hero-body">
                 <div class="container">
                     <h1 class="title" v-if="sessions.length > 0">
@@ -120,6 +127,7 @@
                 isActive: false,
                 hasQueries: false,
                 activeSessionsId: null,
+                loading: false,
             }
         },
 
@@ -144,10 +152,14 @@
             },
 
             getList() {
+                this.loading = true;
+
                 return fetch('/query-adviser/api/session/list').then((response) => {
                     return response.json();
                 }).then((sessions) => {
                     this.sessions = sessions;
+                }).finally(() => {
+                    this.loading = false;
                 })
             },
 
@@ -189,14 +201,21 @@
             }
         },
 
-        mounted() {
-            this.getList();
-            this.pollActiveSession();
+        beforeRouteEnter(to, from, next) {
+
+            next((vm) => {
+                vm.getList();
+                vm.pollActiveSession();
+            });
         },
 
         beforeRouteUpdate(to, from, next) {
             if (to.name === 'session-export') {
                 this.exportSession(to).then(next);
+            } else if (to.name === 'sessions') {
+                this.getList();
+                this.pollActiveSession();
+                next();
             } else {
                 next();
             }

resources/assets/js/components/sql-highlight.vue

@@ -3,7 +3,6 @@
 @import "~bulma-extensions/bulma-quickview/src/sass/index.sass";
 @import "~bulma-extensions/bulma-checkradio/src/sass/index.sass";
 @import "~bulma-extensions/bulma-steps/src/sass/index.sass";
-@import "~highlight.js/styles/night-owl.css";
 
 .component-fade-enter-active, .component-fade-leave-active {
     transition: all 1.4s ease;
@@ -14,5 +13,34 @@
     opacity: 0;
     bottom: -200px;
     position: fixed;
+}
+
+.sql-hl {
+    padding: 0;
+
+    pre {
+        display: block;
+        background: rgba(0, 0, 0, 1);
+
+        .sql-hl-string {
+            color: rgba(0, 220, 40, .9);
+        }
+
+        .sql-hl-special {
+            color: rgba(213, 213, 0, .9);
+        }
 
+        .sql-hl-keyword {
+            color: rgba(255, 150, 0, .9);
+            text-transform: uppercase;
+        }
+
+        .sql-hl-number {
+            color: rgba(0, 120, 220, .9);
+        }
+    }
 }
+
+
+
+

resources/assets/js/mixin/hightlight.js

@@ -1,9 +1,6 @@
 <?php
 use Illuminate\Support\Facades\Route;
-
-Route::get('/', 'QueryController@index');
-Route::get('/session', 'QueryController@index');
-
+use Socialblue\LaravelQueryAdviser\Http\Controllers\QueryController;
 
 /**
  * Api routes
@@ -25,3 +22,7 @@
     Route::post('/session/import', 'SessionController@import');
 });
 
+
+Route::get('/', [QueryController::class, 'index']);
+Route::get('{any}', [QueryController::class, 'index'])
+    ->where('any','^(?!(api)).*$');