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}});
             }
         }
     }