feat: show human columns

pages/index.vue

@@ -42,6 +42,10 @@
       </div>
 
       <div class="table-actions">
+        <el-checkbox class="human-columns-switch" v-model="showHumanColumns">
+          Human column names
+        </el-checkbox>
+
         <button class="btn btn-excel" @click="getXlsx">
           <icon name="file-excel"></icon> xlsx
         </button>
@@ -186,6 +190,15 @@ export default {
       return this.$store.state.filteredItems;
     },
 
+    showHumanColumns: {
+      get() {
+        return this.$store.state.showHumanColumns;
+      },
+      set(val) {
+        this.$store.commit('showHumanColumns', val);
+      }
+    },
+
     fieldsWithoutComments() {
       return this.$store.state.fields.map(f => {
         f = {...f};
@@ -351,7 +364,11 @@ export default {
     headings() {
       let h = {};
       this.fields.forEach(field => {
-        h[field.name] = field.title.split("_").join(" ") || field.name;
+        if (this.showHumanColumns) {
+          h[field.name] = field.comment || field.title.split("_").join(" ") || field.name;
+        } else {
+          h[field.name] = field.title.split("_").join(" ") || field.name;
+        }
       });
       return h;
     },

plugins/localStorage.js

@@ -1,7 +1,13 @@
 import createPersistedState from 'vuex-persistedstate';
 
-export default ({ store }) => {
+export default ({store}) => {
   createPersistedState({
-    paths: ['itemsJsonUrl', 'jsonUrlHistory', 'visitCount', 'openGroups', 'currentJsonSort']
+    paths: [
+      'itemsJsonUrl',
+      'jsonUrlHistory',
+      'visitCount',
+      'openGroups',
+      'showHumanColumns',
+      'currentJsonSort'],
   })(store);
 };

store/index.js

@@ -89,6 +89,7 @@ export const state = () => ({
   allFields: [],
   defaultField: '',
   openGroups: true,
+  showHumanColumns: true,
   currentJsonSort: 'added',
   q: '',
   columnPresets: {},
@@ -319,6 +320,9 @@ export const mutations = {
   openGroups(state, newValue) {
     state.openGroups = newValue;
   },
+  showHumanColumns(state, newValue) {
+    state.showHumanColumns = newValue;
+  },
   currentJsonSort(state, newValue) {
     state.currentJsonSort = newValue;
   },