feat: display mode: view (without fields list)

popstas · Sep 4, 2020 · ef880e6 · ef880e6
1 parent c3c1306
commit ef880e6
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/pages/index.scss b/pages/index.scss
@@ -12,7 +12,8 @@
   }
 }
 
-.help-tour-button {
+.help-tour-button,
+.display-mode-switch {
   float: left;
   margin: 4px 3px 6px 0;
 }
@@ -427,3 +428,13 @@
     }
   }
 }
+
+// view mode
+.mode-view {
+  .current-json .total,
+  .available-fields,
+  .query-input
+  {
+    display: none;
+  }
+}
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,20 +1,24 @@
 <template>
-  <section class="container">
+  <section class="container" :class="[ `mode-${displayMode}`]">
     <v-tour name="introTour" :steps="introTourSteps" :options="{ highlight: true }"></v-tour>
 
-    <div class="current-json">
-
+    <header>
       <el-button
         class="help-tour-button"
         :plain="!isNewUser"
         :type="isNewUser ? 'primary' : ''" @click="startIntroTour"
         :size="isNewUser ? '' : 'mini'"
       >Help tour</el-button>
 
+      <el-radio-group class="display-mode-switch" v-model="displayMode" size="mini">
+        <el-radio-button label="view">view</el-radio-button>
+        <el-radio-button label="edit">edit</el-radio-button>
+      </el-radio-group>
+
       <ReportHistory></ReportHistory>
 
-      total: {{ filteredItems.length }}
-    </div>
+      <div class="total">total: {{ filteredItems.length }}</div>
+    </header>
     <br>
 
     <div v-if="jsonLoadError">
@@ -105,7 +109,7 @@ export default {
       jsonLoading: true,
       introTourSteps: [ // tolang
         {
-          target: '.current-json',
+          target: '.report-history',
           header: {
             title: 'Get Started',
           },
@@ -190,6 +194,15 @@ export default {
       return this.$store.state.filteredItems;
     },
 
+    displayMode: {
+      get() {
+        return this.$store.state.displayMode;
+      },
+      set(val) {
+        this.$store.commit('displayMode', val);
+      }
+    },
+
     showHumanColumns: {
       get() {
         return this.$store.state.showHumanColumns;

diff --git a/store/index.js b/store/index.js
@@ -91,6 +91,7 @@ export const state = () => ({
   openGroups: true,
   showHumanColumns: true,
   currentJsonSort: 'added',
+  displayMode: 'view',
   q: '',
   columnPresets: {},
   filterPresets: [],
@@ -326,6 +327,9 @@ export const mutations = {
   currentJsonSort(state, newValue) {
     state.currentJsonSort = newValue;
   },
+  displayMode(state, newValue) {
+    state.displayMode = newValue;
+  },
   q(state, newValue) {
     if (!newValue) newValue = '';
     state.q = newValue;