Skip to content

add filtering for Vuex state #418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jan 12, 2018
Merged

add filtering for Vuex state #418

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6de5e4d
add filtering for Vuex state
bartlomieju Sep 25, 2017
29b6f75
reuse already existing helper functions when filtering vuex state
bartlomieju Oct 22, 2017
0d2ae90
lint: add global HTMLDocument
posva Nov 7, 2017
3cd9498
lint: remove useless return and comma
posva Nov 7, 2017
6998866
test(vuex-filter): add test for vuex state search
posva Nov 7, 2017
539afbe
Merge branch 'master' into filter-state
posva Nov 7, 2017
4b941c7
Merge branch 'master' into filter-state
posva Nov 7, 2017
d87c05f
lint: newline at the end of file
posva Nov 7, 2017
04c6bd8
Merge remote-tracking branch 'upstream/master' into filter-state
Dec 22, 2017
f40c6cf
Fix failing tests
Dec 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 37 additions & 6 deletions src/devtools/views/vuex/VuexStateInspector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<template>
<scroll-pane>
<action-header slot="header">
<div class="search">
<i class="material-icons">search</i>
<input placeholder="Filter inspected state" v-model.trim="filter">
</div>
<a class="button export" @click="copyStateToClipboard" title="Export Vuex State">
<i class="material-icons">content_copy</i>
<span>Export</span>
Expand All @@ -26,7 +30,7 @@
</transition>
</action-header>
<div slot="scroll" class="vuex-state-inspector">
<state-inspector :state="inspectedState" />
<state-inspector :state="filteredState" />
</div>
</scroll-pane>
</template>
Expand All @@ -36,7 +40,7 @@ import ScrollPane from 'components/ScrollPane.vue'
import ActionHeader from 'components/ActionHeader.vue'
import StateInspector from 'components/StateInspector.vue'

import { stringify, parse } from 'src/util'
import { searchDeepInObject, sortByKey, stringify, parse } from 'src/util'
import debounce from 'lodash.debounce'
import { mapGetters } from 'vuex'

Expand All @@ -50,12 +54,39 @@ export default {
return {
showStateCopiedMessage: false,
showBadJSONMessage: false,
showImportStatePopup: false
showImportStatePopup: false,
filter: '',
}
},
computed: mapGetters('vuex', [
'inspectedState'
]),
computed: {
...mapGetters('vuex', [
'inspectedState'
]),
filteredState() {
const filtered = {};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about reusing what is in ComponentStateInspector? So we just need to build the array of properties before filtering them:

const inspectedState = [].concat(
        ...Object.keys(this.inspectedState).map(
          type => Object.keys(this.inspectedState[type]).map(
            key => ({
              key,
              type,
              value: this.inspectedState[type][key]
            })
          )
        )
      )

      return groupBy(sortByKey(inspectedState.filter(el => {
        return searchDeepInObject({
          [el.key]: el.value
        }, this.filter)
      })), 'type')

It would probably be nice to refactor the last part in the future so it's reused

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea, I'll do it first thing when I have some spare time.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't worry, I can add it myself as well. Thanks a lot for taking the time to contribute to the devtools! 😄


Object.keys(this.inspectedState).forEach((stateProperty) => {
const inspectedStateProperty = this.inspectedState[stateProperty];

const filteredStateProperty = {};

Object.keys(inspectedStateProperty).forEach((key) => {
const match = searchDeepInObject({
[key]: inspectedStateProperty[key]
}, this.filter);

if (match) {
filteredStateProperty[key] = inspectedStateProperty[key];
}
});


filtered[stateProperty] = filteredStateProperty
});

return filtered;
},
},
watch: {
showImportStatePopup (val) {
if (val) {
Expand Down