Skip to content

Commit c7c1053

Browse files
author
Guillaume Chau
committed
feat(state inspector): limit number of root fields
1 parent fe3d96d commit c7c1053

File tree

2 files changed

+112
-32
lines changed

2 files changed

+112
-32
lines changed
Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<template>
2+
<div
3+
class="data-fields"
4+
>
5+
<template v-if="isFieldsArray">
6+
<data-field
7+
v-for="field in displayedFields"
8+
:key="field.key"
9+
:field="field"
10+
:depth="0"
11+
:path="field.key"
12+
:editable="field.editable"
13+
:force-collapse="forceCollapse"
14+
:is-state-field="isStateField(field)"
15+
/>
16+
</template>
17+
<template v-else>
18+
<data-field
19+
v-for="(value, key) in displayedFields"
20+
:key="key"
21+
:field="{ value, key }"
22+
:depth="0"
23+
:path="key"
24+
:editable="false"
25+
/>
26+
</template>
27+
<VueButton
28+
v-if="fieldsCount > limit"
29+
v-tooltip="'Show more'"
30+
icon-left="more_horiz"
31+
class="icon-button flat more"
32+
@click="showMore()"
33+
/>
34+
</div>
35+
</template>
36+
37+
<script>
38+
import DataField from './DataField.vue'
39+
40+
export default {
41+
components: {
42+
DataField
43+
},
44+
45+
props: {
46+
fields: {
47+
type: [Array, Object],
48+
required: true
49+
},
50+
51+
forceCollapse: String
52+
},
53+
54+
data () {
55+
return {
56+
limit: 20
57+
}
58+
},
59+
60+
computed: {
61+
isFieldsArray () {
62+
return Array.isArray(this.fields)
63+
},
64+
65+
displayedFields () {
66+
if (this.isFieldsArray) {
67+
return this.fields.slice(0, this.limit)
68+
} else {
69+
return Object.keys(this.fields)
70+
.slice(0, this.limit)
71+
.reduce((obj, key) => {
72+
obj[key] = this.fields[key]
73+
return obj
74+
}, {})
75+
}
76+
},
77+
78+
fieldsCount () {
79+
if (this.isFieldsArray) {
80+
return this.fields.length
81+
} else {
82+
return Object.keys(this.fields).length
83+
}
84+
}
85+
},
86+
87+
methods: {
88+
isStateField (field) {
89+
return field && field.type === 'state'
90+
},
91+
92+
showMore () {
93+
this.limit += 20
94+
}
95+
}
96+
}
97+
</script>
98+
99+
<style lang="stylus" scoped>
100+
.more
101+
width 20px
102+
height @width
103+
>>> .vue-ui-icon
104+
width 16px
105+
height @width
106+
</style>

packages/app-frontend/src/components/StateInspector.vue

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -23,40 +23,18 @@
2323
/>
2424
<span class="key">{{ toDisplayType(dataType) }}</span>
2525
</div>
26-
<div
26+
<StateFields
2727
v-show="isExpanded(dataType)"
28-
class="data-fields"
29-
>
30-
<template v-if="Array.isArray(state[dataType])">
31-
<data-field
32-
v-for="field in state[dataType]"
33-
:key="field.key"
34-
:field="field"
35-
:depth="0"
36-
:path="field.key"
37-
:editable="field.editable"
38-
:force-collapse="forceCollapse"
39-
:is-state-field="isStateField(field)"
40-
/>
41-
</template>
42-
<template v-else>
43-
<data-field
44-
v-for="(value, key) in state[dataType]"
45-
:key="key"
46-
:field="{ value, key }"
47-
:depth="0"
48-
:path="key"
49-
:editable="false"
50-
/>
51-
</template>
52-
</div>
28+
:fields="state[dataType]"
29+
:force-collapse="forceCollapse"
30+
/>
5331
</div>
5432
</div>
5533
</template>
5634

5735
<script>
5836
import Vue from 'vue'
59-
import DataField from './DataField.vue'
37+
import StateFields from './StateFields.vue'
6038
6139
const keyOrder = {
6240
props: 1,
@@ -74,7 +52,7 @@ const keyOrder = {
7452
7553
export default {
7654
components: {
77-
DataField
55+
StateFields
7856
},
7957
8058
props: {
@@ -152,10 +130,6 @@ export default {
152130
this.forceCollapse = value ? 'expand' : 'collapse'
153131
Vue.set(this.expandedState, key, value)
154132
})
155-
},
156-
157-
isStateField (field) {
158-
return field && field.type === 'state'
159133
}
160134
}
161135
}

0 commit comments

Comments
 (0)