refactor events module

yyx990803 · yyx990803 · commit 393f5db72d7e · 2017-01-04T17:55:17.000-05:00
diff --git a/src/devtools/views/events/EventInspector.vue b/src/devtools/views/events/EventInspector.vue
@@ -32,18 +32,11 @@ import ActionHeader from 'components/ActionHeader.vue'
 import { mapGetters } from 'vuex'
 
 export default {
-
   components: {
     DataField,
     ScrollPane,
     ActionHeader
   },
-  data () {
-    return {
-      showStateCopiedMessage: false,
-      eventDataAsString: ''
-    }
-  },
   computed: {
     ...mapGetters('events', [
       'activeEvent'
diff --git a/src/devtools/views/events/EventsHistory.vue b/src/devtools/views/events/EventsHistory.vue
@@ -3,9 +3,9 @@
     <action-header slot="header">
       <div class="search">
         <i class="search-icon material-icons">search</i>
-        <input placeholder="Filter events" v-model.trim="filter" @input="filterEvents">
+        <input placeholder="Filter events" v-model.trim="filter">
       </div>
-      <a class="button reset" :class="{ disabled: !rawEvents.length }" @click="reset" title="Clear Log">
+      <a class="button reset" :class="{ disabled: !events.length }" @click="reset" title="Clear Log">
         <i class="material-icons small">do_not_disturb</i>
         <span>Clear</span>
       </a>
@@ -15,14 +15,14 @@
       </a>
     </action-header>
     <div slot="scroll" class="history">
-      <div v-if="events.length === 0" class="no-events">
+      <div v-if="filteredEvents.length === 0" class="no-events">
         No events found
       </div>
       <div class="entry"
         v-else
-        v-for="(event, index) in events"
-        :class="{ active: activeEventIndex === index }"
-        @click="step(index)">
+        v-for="event in filteredEvents"
+        :class="{ active: inspectedIndex === events.indexOf(event) }"
+        @click="step(events.indexOf(event))">
         <div class="event">
           <div class="component-name">
             <span class="angle-bracket">&lt;</span>{{event.instanceName}}<span class="angle-bracket">&gt;</span>
@@ -45,44 +45,40 @@
 import ScrollPane from 'components/ScrollPane.vue'
 import ActionHeader from 'components/ActionHeader.vue'
 
-import { mapState } from 'vuex'
+import { mapState, mapGetters, mapMutations } from 'vuex'
 
 export default {
   components: {
     ScrollPane,
     ActionHeader
   },
   computed: {
-    ...mapState('events', {
-      enabled: state => state.enabled,
-      rawEvents: state => state.events,
-      events: state => state.filteredEvents,
-      activeEventIndex: state => state.activeFilteredEventIndex
-    })
+    filter: {
+      get () {
+        return this.$store.state.events.filter
+      },
+      set (filter) {
+        this.$store.commit('events/UPDATE_FILTER', filter)
+      }
+    },
+    ...mapState('events', [
+      'enabled',
+      'events',
+      'inspectedIndex'
+    ]),
+    ...mapGetters('events', [
+      'filteredEvents'
+    ])
   },
+  methods: mapMutations('events', {
+    step: 'STEP',
+    reset: 'RESET',
+    toggleRecording: 'TOGGLE'
+  }),
   filters: {
     formatTime (timestamp) {
       return (new Date(timestamp)).toString().match(/\d\d:\d\d:\d\d/)[0]
     }
-  },
-  data () {
-    return {
-      filter: ''
-    }
-  },
-  methods: {
-    step (index) {
-      this.$store.commit('events/STEP', index)
-    },
-    reset () {
-      this.$store.commit('events/RESET')
-    },
-    filterEvents () {
-      this.$store.commit('events/FILTER_EVENTS', this.filter)
-    },
-    toggleRecording () {
-      this.$store.commit('events/TOGGLE')
-    }
   }
 }
 </script>
diff --git a/src/devtools/views/events/module.js b/src/devtools/views/events/module.js
@@ -6,37 +6,33 @@ const enabled = storage.get(ENABLED_KEY)
 const state = {
   enabled: enabled == null ? true : enabled,
   events: [],
-  filteredEvents: [],
-  activeFilteredEventIndex: 0,
-  newEventCount: 0
+  inspectedIndex: -1,
+  newEventCount: 0,
+  filter: ''
 }
 
 const mutations = {
   'EMIT' (state, payload) {
-    if (state.events.length === state.filteredEvents.length) {
-      state.filteredEvents.push(payload)
-    }
     state.events.push(payload)
-    state.activeFilteredEventIndex = state.filteredEvents.length - 1
+    if (!state.filter) {
+      state.inspectedIndex = state.events.length - 1
+    }
   },
   'RESET' (state) {
     state.events = []
-    state.filteredEvents = []
+    state.inspectedIndex = -1
   },
-  'STEP' (state, n) {
-    state.activeFilteredEventIndex = n
+  'STEP' (state, index) {
+    state.inspectedIndex = index
   },
   'RESET_NEW_EVENT_COUNT' (state) {
     state.newEventCount = 0
   },
   'INCREASE_NEW_EVENT_COUNT' (state) {
     state.newEventCount++
   },
-  'FILTER_EVENTS' (state, filter) {
-    state.filteredEvents = state.events.filter(event => {
-      return event.eventName.toLowerCase().includes(filter) || event.instanceName.toLowerCase().includes(filter)
-    })
-    state.activeFilteredEventIndex = state.filteredEvents.length - 1
+  'UPDATE_FILTER' (state, filter) {
+    state.filter = filter
   },
   'TOGGLE' (state) {
     storage.set(ENABLED_KEY, state.enabled = !state.enabled)
@@ -45,7 +41,12 @@ const mutations = {
 }
 
 const getters = {
-  activeEvent: state => state.filteredEvents[state.activeFilteredEventIndex]
+  activeEvent: state => {
+    return state.events[state.inspectedIndex]
+  },
+  filteredEvents: state => {
+    return state.events.filter(e => e.eventName.indexOf(state.filter) > -1)
+  }
 }
 
 export default {
diff --git a/src/devtools/views/vuex/VuexHistory.vue b/src/devtools/views/vuex/VuexHistory.vue
@@ -3,7 +3,7 @@
     <action-header slot="header">
       <div class="search">
         <i class="material-icons">search</i>
-        <input :class="{ invalid: filterRegexInvalid }" placeholder="Filter mutations" v-model="filter">
+        <input :class="{ invalid: filterRegexInvalid }" placeholder="Filter mutations" v-model.trim="filter">
       </div>
       <a class="button commit-all" :class="{ disabled: !history.length }" @click="commitAll" title="Commit All">
         <i class="material-icons">get_app</i>
@@ -20,11 +20,11 @@
     </action-header>
     <div slot="scroll" class="history">
       <div class="entry" :class="{ active: activeIndex === -1, inspected: inspectedIndex === -1 }" @click="step(-1)">
-        <span>Base State</span>
+        <span class="mutation-type">Base State</span>
         <span class="entry-actions">
           <a v-if="inspectedIndex === -1 && activeIndex !== -1" class="action"
              @click.stop="timeTravelToSelected" title="Time Travel to This State">
-            <i class="material-icons">restore</i>
+            <i class="material-icons medium">restore</i>
             <span>Time Travel</span>
           </a>
         </span>
@@ -141,7 +141,7 @@ $inspected_color = #af90d5
   color #881391
   cursor pointer
   padding 10px 20px
-  font-size 14px
+  font-size 12px
   background-color #fff
   box-shadow 0 1px 5px rgba(0,0,0,.12)
   height 40px
@@ -173,9 +173,9 @@ $inspected_color = #af90d5
       border-left 4px solid darken($inspected_color, 15%)
       padding-left 16px
   .mutation-type
-    display inline-block
-    vertical-align middle
+    line-height 20px
   .material-icons, span, a
+    display inline-block
     vertical-align middle
   .label
     float right

No events found