Skip to content

Commit d4d33e9

Browse files
author
minjk-bl
committed
Test DataSelector component
1 parent fd96ad1 commit d4d33e9

File tree

4 files changed

+114
-13
lines changed

4 files changed

+114
-13
lines changed

‎css/component/dataSelector.css

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
/* Code Preview */
22
.vp-dataselector {
3+
display: none;
34
position: absolute;
4-
top: calc(50% - 200px);
5+
top: calc(50% - 225px);
56
left: calc(50% - 200px);
67
width: 400px;
7-
height: 400px;
8+
height: 450px;
89
background: white;
910
border: 1px solid var(--border-gray-color);
1011
z-index: 999;
@@ -40,7 +41,11 @@
4041
padding-left: 5px;
4142
}
4243
.vp-ds-option-box {
43-
44+
height: calc(100% - 140px);
45+
margin-top: 10px;
46+
}
47+
.vp-ds-option-inner-box {
48+
height: calc(100% - 30px);
4449
}
4550
.vp-ds-preview {
4651
width: 100%;

‎html/component/dataSelector.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,20 @@
99
<label class="vp-bold">Data</label>
1010
<label class="vp-bold">Type</label>
1111
</div>
12-
<div class="vp-ds-variable-box vp-grid-box vp-scrollbar">
12+
<div class="vp-ds-variable-box vp-grid-box vp-scrollbar vp-no-selection">
1313

1414
</div>
15+
<hr style="margin: 0px;"/>
1516
<div class="vp-ds-option-box">
16-
Option Page
17+
<label class="vp-bold">Option Page</label>
18+
<div class="vp-ds-option-inner-box">
19+
20+
</div>
1721
</div>
1822
</div>
1923
<div class="vp-inner-popup-footer">
20-
<input type="text" /> <!-- CodeMirror needed -->
2124
<div class="vp-inner-popup-button-box">
25+
<button type="button" class="vp-button" id="vp_dsCancel">Cancel</button>
2226
<button type="button" class="vp-button activated" id="vp_dsOk">OK</button>
2327
</div>
2428
</div>

‎js/com/component/DataSelector.js

Lines changed: 99 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ define([
1616
'vp_base/js/com/component/Component',
1717
'vp_base/js/com/component/SuggestInput',
1818
'vp_base/js/com/component/MultiSelector'
19-
], function(dataHTML, dataCss, com_String, com_util, Component, MultiSelector) {
19+
], function(dataHTML, dataCss, com_String, com_util, Component, SuggestInput, MultiSelector) {
2020
//========================================================================
2121
// [CLASS] DataSelector
2222
//========================================================================
@@ -42,6 +42,8 @@ define([
4242
...this.state
4343
}
4444

45+
this.columnSelector = null;
46+
4547
}
4648

4749
_bindEvent() {
@@ -52,17 +54,21 @@ define([
5254
that.close();
5355
});
5456

57+
// Click cancel
58+
$(that.wrapSelector('#vp_dsCancel')).on('click', function() {
59+
that.close();
60+
});
61+
5562
// Click ok
5663
$(that.wrapSelector('#vp_dsOk')).on('click', function() {
5764
// TODO: set target value
58-
let newValue = that.state.data;
65+
let newValue = that.generateCode();
5966

6067
$(that.state.target).val(newValue);
6168
$(that.state.target).data('type', that.state.dataType);
6269
that.state.finish(newValue);
6370
that.close();
6471
});
65-
6672
}
6773

6874
/**
@@ -73,7 +79,9 @@ define([
7379

7480
// Click variable item
7581
$(that.wrapSelector('.vp-ds-var-item')).off('click');
76-
$(that.wrapSelector('.vp-ds-var-item')).on('click', function() {
82+
// $(that.wrapSelector('.vp-ds-var-item')).on('click', function() {
83+
$(that.wrapSelector('.vp-ds-var-item')).single_double_click(function(evt) {
84+
// single click
7785
$(that.wrapSelector('.vp-ds-var-item')).removeClass('selected');
7886
$(this).addClass('selected');
7987

@@ -82,7 +90,21 @@ define([
8290
that.state.data = data;
8391
that.state.dataType = dataType;
8492

85-
// TODO: load preview
93+
// render option page
94+
that.renderOptionPage();
95+
}, function(evt) {
96+
// double click to select directly
97+
let data = $(this).find('.vp-ds-var-data').text();
98+
let dataType = $(this).find('.vp-ds-var-type').text();
99+
that.state.data = data;
100+
that.state.dataType = dataType;
101+
102+
let newValue = that.generateCode();
103+
104+
$(that.state.target).val(newValue);
105+
$(that.state.target).data('type', that.state.dataType);
106+
that.state.finish(newValue);
107+
that.close();
86108
});
87109
}
88110

@@ -117,19 +139,91 @@ define([
117139
return dataHTML;
118140
}
119141

142+
templateForSlicing() {
143+
return `
144+
<div>
145+
<label>Type start/end index for slicing.</label>
146+
</div>
147+
<div>
148+
<input type="number" class="vp-input" id="vp_dsStart" placeholder="Start value"/>
149+
<input type="number" class="vp-input" id="vp_dsEnd" placeholder="End value"/>
150+
</div>
151+
`;
152+
}
153+
120154
render() {
121155
super.render();
122156

123157
this.loadVariables();
124158
}
125159

160+
renderOptionPage() {
161+
// initialize page and variables
162+
$(this.wrapSelector('.vp-ds-option-inner-box')).html('');
163+
this.columnSelector = null;
164+
165+
switch (this.state.dataType) {
166+
case 'DataFrame':
167+
// column selecting
168+
this.columnSelector = new MultiSelector(this.wrapSelector('.vp-ds-option-inner-box'),
169+
{ mode: 'columns', parent: [this.state.data] }
170+
);
171+
break;
172+
case 'Series':
173+
case 'list':
174+
case 'ndarray':
175+
// slicing
176+
$(this.wrapSelector('.vp-ds-option-inner-box')).html(this.templateForSlicing());
177+
break;
178+
default:
179+
break;
180+
}
181+
}
182+
183+
generateCode() {
184+
let { data, dataType } = this.state;
185+
let code = new com_String();
186+
187+
switch (dataType) {
188+
case 'DataFrame':
189+
code.append(data);
190+
if (this.columnSelector != null) {
191+
let result = this.columnSelector.getDataList();
192+
let columnList = [];
193+
result && result.forEach(obj => {
194+
columnList.push(obj.code);
195+
});
196+
if (columnList.length > 0) {
197+
code.appendFormat('[{0}]', columnList.join(', '));
198+
}
199+
}
200+
break;
201+
case 'Series':
202+
case 'list':
203+
case 'ndarray':
204+
code.append(data);
205+
// start / end value
206+
let start = $(this.wrapSelector('#vp_dsStart')).val();
207+
let end = $(this.wrapSelector('#vp_dsEnd')).val();
208+
if ((start && start != '') || (end && end != '')) {
209+
code.appendFormat('[{0}:{1}]', start, end);
210+
}
211+
break;
212+
default:
213+
code.append(data);
214+
break;
215+
}
216+
return code.toString();
217+
}
218+
126219
open() {
127220
$(this.wrapSelector()).show();
128221
}
129222

130223
close() {
131224
$(this.wrapSelector()).remove();
132225
}
226+
133227
}
134228

135229
return DataSelector;

‎js/m_apps/SampleApp.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,6 @@ define([
5454

5555
render() {
5656
super.render();
57-
58-
5957
}
6058

6159
generateCode() {

0 commit comments

Comments
 (0)