File tree Expand file tree Collapse file tree 2 files changed +112
-32
lines changed
packages/app-frontend/src/components Expand file tree Collapse file tree 2 files changed +112
-32
lines changed Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change 23
23
/>
24
24
<span class =" key" >{{ toDisplayType(dataType) }}</span >
25
25
</div >
26
- <div
26
+ <StateFields
27
27
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
+ />
53
31
</div >
54
32
</div >
55
33
</template >
56
34
57
35
<script >
58
36
import Vue from ' vue'
59
- import DataField from ' ./DataField .vue'
37
+ import StateFields from ' ./StateFields .vue'
60
38
61
39
const keyOrder = {
62
40
props: 1 ,
@@ -74,7 +52,7 @@ const keyOrder = {
74
52
75
53
export default {
76
54
components: {
77
- DataField
55
+ StateFields
78
56
},
79
57
80
58
props: {
@@ -152,10 +130,6 @@ export default {
152
130
this .forceCollapse = value ? ' expand' : ' collapse'
153
131
Vue .set (this .expandedState , key, value)
154
132
})
155
- },
156
-
157
- isStateField (field ) {
158
- return field && field .type === ' state'
159
133
}
160
134
}
161
135
}
You can’t perform that action at this time.
0 commit comments