Skip to content
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.

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

Editable vuex state #724

Merged
merged 7 commits into from
Aug 1, 2018
Merged
Changes from all commits
Commits
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
46 changes: 46 additions & 0 deletions cypress/integration/vuex-edit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { suite } from '../utils/suite'

suite('vuex edit', () => {
it('should edit state', () => {
cy.get('.vuex-tab').click()
// using the decrease button
cy.get('.data-field').eq(0)
.find('.actions .vue-ui-button').eq(1)
.click({ force: true })
.click({ force: true })

cy.get('#target').iframe().then(({ get }) => {
get('#counter p').contains('-2')
})

// using the increase button
cy.get('.data-field').eq(0).click()
.find('.actions .vue-ui-button').eq(2)
.click({ force: true })
.click({ force: true })

cy.get('#target').iframe().then(({ get }) => {
get('#counter p').contains('0')
})

// using the edit input
cy.get('.data-field').eq(0).click()
.find('.actions .vue-ui-button').eq(0).click({ force: true })
cy.get('.edit-input').type('12')
cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()

cy.get('#target').iframe().then(({ get }) => {
get('#counter p').contains('12')
})

// change count back to 1
cy.get('.data-field').eq(0).click()
.find('.actions .vue-ui-button').eq(0).click({ force: true })
cy.get('.edit-input').type('0')
cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()

cy.get('#target').iframe().then(({ get }) => {
get('#counter p').contains('0')
})
})
})
2 changes: 1 addition & 1 deletion shells/dev/target/NativeTypes.vue
Original file line number Diff line number Diff line change
@@ -60,7 +60,7 @@ const proxy1 = new Proxy(sum, handler)
export default {
components: {
TestComponent: {
props: { bar: { default: 'hey' }},
props: { bar: { default: 'hey' } },
data: () => ({ foo: '42' }),
computed: {
parentComp () { return this.$parent }
13 changes: 13 additions & 0 deletions src/backend/vuex.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { stringify, parse } from 'src/util'
import SharedData from 'src/shared-data'
import { set } from '../util'

export function initVuexBackend (hook, bridge) {
const store = hook.store
@@ -159,6 +160,18 @@ export function initVuexBackend (hook, bridge) {
return resultState
}

bridge.on('vuex:edit-state', ({ index, value, path }) => {
let parsedValue
if (value) {
parsedValue = parse(value, true)
}
set(store.state, path, parsedValue)
bridge.send('vuex:inspected-state', {
index,
snapshot: getSnapshot()
})
})

function takeSnapshot (index) {
snapshots.push({
index,
6 changes: 6 additions & 0 deletions src/devtools/components/DataField.vue
Original file line number Diff line number Diff line change
@@ -182,6 +182,7 @@
:removable="isSubfieldsEditable"
:renamable="editable && valueType === 'plain-object'"
:force-collapse="forceCollapse"
:is-state-field="isStateField"
/>
<span
v-if="formattedSubFields.length > limit"
@@ -201,6 +202,7 @@
:force-collapse="forceCollapse"
editable
removable
:is-state-field="isStateField"
@cancel-edit="addingValue = false"
@submit-edit="addingValue = false"
/>
@@ -261,6 +263,10 @@ export default {
forceCollapse: {
type: String,
default: null
},
isStateField: {
type: Boolean,
default: false
}
},

5 changes: 5 additions & 0 deletions src/devtools/components/StateInspector.vue
Original file line number Diff line number Diff line change
@@ -35,6 +35,7 @@
:path="field.key"
:editable="field.editable"
:force-collapse="forceCollapse"
:is-state-field="isStateField(field)"
/>
</template>
<template v-else>
@@ -140,6 +141,10 @@ export default {
this.forceCollapse = value ? 'expand' : 'collapse'
Vue.set(this.expandedState, key, value)
})
},

isStateField (field) {
return field && field.type === 'state'
}
}
}
5 changes: 4 additions & 1 deletion src/devtools/index.js
Original file line number Diff line number Diff line change
@@ -141,7 +141,10 @@ function initApp (shell) {
bridge.on('vuex:inspected-state', ({ index, snapshot }) => {
snapshotsCache.set(index, snapshot)
store.commit('vuex/RECEIVE_STATE', snapshot)
if (store.state.vuex.inspectedIndex === index) {

if (index === -1) {
store.commit('vuex/UPDATE_BASE_STATE', snapshot)
} else if (store.state.vuex.inspectedIndex === index) {
store.commit('vuex/UPDATE_INSPECTED_STATE', snapshot)
}

17 changes: 12 additions & 5 deletions src/devtools/mixins/data-field-edit.js
Original file line number Diff line number Diff line change
@@ -167,11 +167,18 @@ export default {
},

sendEdit (args) {
bridge.send('set-instance-data', {
id: this.inspectedInstance.id,
path: this.path,
...args
})
if (this.isStateField) {
this.$store.dispatch('vuex/editState', {
path: this.path,
args
})
} else {
bridge.send('set-instance-data', {
id: this.inspectedInstance.id,
path: this.path,
...args
})
}
},

transformSpecialTokens (str, display) {
26 changes: 19 additions & 7 deletions src/devtools/views/vuex/VuexStateInspector.vue
Original file line number Diff line number Diff line change
@@ -131,13 +131,25 @@ export default {
filteredState () {
const inspectedState = [].concat(
...Object.keys(this.inspectedState).map(
type => Object.keys(this.inspectedState[type]).map(
key => ({
key,
type,
value: this.inspectedState[type][key]
})
)
type => {
let processedState
if (!Array.isArray(this.inspectedState[type])) {
processedState = Object.keys(this.inspectedState[type]).map(key => ({
key,
editable: type === 'state',
value: this.inspectedState[type][key]
}))
} else {
processedState = this.inspectedState[type]
}

return processedState.map(
item => ({
type,
...item
})
)
}
)
)

8 changes: 8 additions & 0 deletions src/devtools/views/vuex/actions.js
Original file line number Diff line number Diff line change
@@ -76,6 +76,14 @@ export function updateFilter ({ commit }, filter) {
commit('UPDATE_FILTER', filter)
}

export function editState ({ state }, { path, args }) {
bridge.send('vuex:edit-state', {
index: state.inspectedIndex,
path,
...args
})
}

function travelTo (state, commit, index, apply = true) {
return new Promise((resolve) => {
Resolve.travel = resolve
4 changes: 4 additions & 0 deletions src/devtools/views/vuex/module.js
Original file line number Diff line number Diff line change
@@ -72,6 +72,10 @@ const mutations = {
state.lastReceivedState = value
},

'UPDATE_BASE_STATE' (state, value) {
state.base = value
},

'TIME_TRAVEL' (state, index) {
state.activeIndex = index
},