feat: direct input json for table

README.md

@@ -2,12 +2,18 @@
 
 Web viewer for [site-audit-seo](https://github.com/viasite/site-audit-seo).
 
-Demo:
-- [Default report](https://viasite.github.io/site-audit-seo-viewer/?url=https://site-audit.viasite.ru/reports/blog.popstas.ru-default.json)
-- [Lighthouse report](https://viasite.github.io/site-audit-seo-viewer/?url=https://site-audit.viasite.ru/reports/blog.popstas.ru-lighthouse.json)
-- [Default + Basic Lighthouse report](https://viasite.github.io/site-audit-seo-viewer/?url=https://site-audit.viasite.ru/reports/blog.popstas.ru-default-plus-lighthouse.json)
+## Features:
+- Show interactive table
+- Focused on page info for site audit scans,
+- But can prettify any table data in json format
+- You can direct input json data into inline editor
 
-# TODO
+## Demo:
+- [Default report](https://viasite.github.io/json-viewer/?url=https://site-audit.viasite.ru/reports/blog.popstas.ru-default.json)
+- [Lighthouse report](https://viasite.github.io/json-viewer/?url=https://site-audit.viasite.ru/reports/blog.popstas.ru-lighthouse.json)
+- [Default + Basic Lighthouse report](https://viasite.github.io/json-viewer/?url=https://site-audit.viasite.ru/reports/blog.popstas.ru-default-plus-lighthouse.json)
+
+## TODO
 - show diff between reports
 - Don't show empty fields
 - Scan server don't really changing, due websockets server in nuxt.config.js

components/ReportHistory.vue

@@ -17,6 +17,23 @@
 
     <button :class="{'input-clear': true, hidden: !isCurrentJsonInHistory}" @click="removeCurrentFromHistory" title="Remove current report from history">&cross;</button>
 
+    <button
+      :class="{'input-clear': true, hidden: !isCurrentJsonInHistory}"
+      @click="itemsJsonUrl = 'input'" title="Convert JSON to table">input</button>
+    <MonacoEditor
+      v-if="itemsJsonUrl === 'input'"
+      class="jsonRaw"
+      language="json"
+      :options="{
+        //validate: true,
+        minimap: {
+          enabled: false
+        },
+      }"
+      @editorWillMount="editorMounted"
+      v-model="jsonRaw">
+    </MonacoEditor >
+
     <a :href="getShareUrl(itemsJsonUrl)" target="_blank">share</a> ,
     <a :href="itemsJsonUrl" target="_blank">json</a>
     <template v-if="$router.options.base == '/'">
@@ -33,7 +50,7 @@
 
 <style lang="scss">
 .report-history {
-  display: inline-block;
+  //display: inline-block;
 
   &__sort {
     width: 128px;
@@ -82,16 +99,22 @@
     background: none;
     border: none;
   }
+
+  .jsonRaw {
+    margin: 10px 0;
+    height: 50vh;
+  }
 }
 
 </style>
 
 <script>
 import FilterPresetButton from "~/components/FilterPresetButton";
 import "vue-awesome/icons/filter";
+import MonacoEditor from 'vue-monaco'
 
 export default {
-  components: {},
+  components: { MonacoEditor },
 
   computed: {
     itemsJsonUrl: {
@@ -112,6 +135,15 @@ export default {
       }
     },
 
+    jsonRaw: {
+      get() {
+        return this.$store.state.jsonRaw;
+      },
+      set(val) {
+        this.$store.commit('jsonRaw', val);
+      }
+    },
+
     options() {
       const opts = [];
       for (let url in this.jsonUrlHistory) {
@@ -182,6 +214,25 @@ export default {
     getShareUrl(url) {
       return this.$router.options.base + `?url=${url}`;
     },
+
+    editorMounted(monaco) {
+      /*window.MonacoEnvironment = {
+        getWorkerUrl: function (workerId, label) {
+          return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
+              self.MonacoEnvironment = { baseUrl: '${window.location.origin}/' };
+              importScripts('${window.location.origin}/vs/base/worker/workerMain.js');
+          `)}`;
+        }
+      };*/
+
+      // console.log("monaco:", monaco);
+
+      // monaco.trigger('anyString', 'editor.action.formatDocument');
+
+      /*monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: true,
+      });*/
+    },
   },
 };
 </script>

nuxt.config.js

@@ -1,3 +1,5 @@
+// import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
+
 module.exports = {
   ssr: false,
 
@@ -77,6 +79,11 @@ module.exports = {
   ** Build configuration
   */
   build: {
+    /*plugins: [
+      new MonacoWebpackPlugin({
+        languages: ['json']
+      }),
+    ]*/
     /*
     ** Run ESLint on save
     */

package.json

@@ -36,6 +36,7 @@
     "js-yaml": "^3.13.1",
     "json-query": "^2.2.2",
     "lodash": "^4.17.11",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "nuxt": "^2.14.6",
     "nuxt-i18n": "^6.15.1",
     "nuxt-socket-io": "^1.1.13",
@@ -46,6 +47,7 @@
     "style-loader": "^0.23.1",
     "vue-awesome": "^3.2.0",
     "vue-chat-scroll": "^1.4.0",
+    "vue-monaco": "^1.2.2",
     "vue-style-loader": "^4.1.2",
     "vue-tables-2": "^1.6.25",
     "vue-tour": "^1.5.0",

pages/index.scss

@@ -214,7 +214,7 @@ header {
 // ItemDetails and Stats components use it
 .item-details {
   // padding: 15px;
-  
+
   max-width: 100vw;
   @media(min-width: 1000px) {
     max-width: 1000px;
@@ -448,6 +448,7 @@ header {
     position: sticky;
     top: 0;
     box-shadow: 0 0 3px #ccc;
+    vertical-align: top;
   }
   .VueTables__filters-row th {
     top: 45px;
@@ -584,4 +585,4 @@ header {
 .advanced-button {
   border: none;
   float: right;
-}
+}

pages/index.vue

@@ -539,7 +539,16 @@ export default {
     isNewUser() {
       return this.$store.state.visitCount < this.$store.state.newUserVisits;
     },
+
+    jsonInput() {
+      try {
+        return JSON.parse(this.$store.state.jsonRaw);
+      } catch (e) {
+        return false;
+      }
+    },
   },
+  // end of computed
 
   watch: {
     q(q) {
@@ -560,6 +569,18 @@ export default {
       await this.changeJsonUrl(this.itemsJsonUrl, forceDefaultColumns);
     },
 
+    async jsonInput(val) {
+      // return false;
+      // const forceDefaultColumns = !this.$route.query["fields"];
+      const forceDefaultColumns = true;
+      await this.changeJsonUrl('input', forceDefaultColumns);
+
+      if (val) {
+        // format json
+        // this.$store.commit('jsonRaw', JSON.stringify(val, null, '  '))
+      }
+    },
+
     displayMode(val) {
       this.changeDisplayMode(val);
     }
@@ -869,7 +890,11 @@ export default {
           break;
         }
       }
-      if (!defaultPreset) return;
+
+      if (!defaultPreset) {
+        // all fields
+        defaultPreset = { columns: this.availableFields.map(f => f.name) };
+      }
 
       fields = [...defaultPreset.columns];
 
@@ -925,7 +950,15 @@ export default {
       this.jsonLoading = true;
       this.$store.commit('filteredItems', []);
       try {
-        let itemsJson = await this.$axios.$get(itemsJsonUrl);
+        let itemsJson;
+        if (itemsJsonUrl === 'input') {
+          // load input json
+          itemsJson = this.jsonInput;
+        } else {
+          // load url json
+          itemsJson = await this.$axios.$get(itemsJsonUrl);
+        }
+
         if (Array.isArray(itemsJson)) itemsJson = this.buildJsonInfo(itemsJson);
         // console.log('itemsJson.items: ', itemsJson.items);
         // console.log('itemsJson.fields: ', itemsJson.fields);

plugins/localStorage.js

@@ -4,6 +4,7 @@ export default ({store}) => {
   createPersistedState({
     paths: [
       'itemsJsonUrl',
+      'jsonRaw',
       'jsonUrlHistory',
       'compareList',
       'scanHistory',

store/index.js

@@ -10,6 +10,7 @@ export const state = () => ({
 
   // constants
   itemsJsonUrl: process.env.JSON_URL || '',
+  jsonRaw: '',
   flags: {
     footer: !process.env.NO_FOOTER,
     login: !process.env.NO_LOGIN,
@@ -351,6 +352,10 @@ export const mutations = {
     }
   },
 
+  jsonRaw(state, newValue) {
+    state.jsonRaw = newValue;
+  },
+
   jsonUrlHistory(state, newValue) {
     state.jsonUrlHistory = newValue;
   },
@@ -488,6 +493,7 @@ export const actions = {
     // default field (or use first field)
     let defaultField = state.allFields.find(f => f.default);
     if (!defaultField) defaultField = state.allFields[0];
+    if (!defaultField) return;
     // console.log('defaultField: ', defaultField);
     commit('defaultField', defaultField.name);