Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitda11e6e

Browse files
author
minjk-bl
committed
Apps > Bind, ColumnSelector changed to MultiSelector
1 parent1db2fab commitda11e6e

File tree

6 files changed

+510
-286
lines changed

6 files changed

+510
-286
lines changed

‎css/common/bind.css‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,20 @@
77
overflow: hidden;
88
}
99

10-
.vp-bd-df-box {
10+
.vp-bd-grid-box {
11+
display: grid;
12+
grid-template-rows:30px;
13+
grid-row-gap:5px;
14+
}
15+
.vp-bd-grid-boxlabel {
16+
font-weight: bold;
17+
}
18+
.vp-bd-grid-boxselect,
19+
.vp-bd-grid-boxinput {
20+
width:160px;
21+
}
22+
23+
.vp-bd-type-box {
1124
display: grid;
1225
grid-template-rows:30px;
1326
grid-row-gap:5px;
@@ -18,10 +31,3 @@
1831
cursor: pointer;
1932
margin-left:5px;
2033
}
21-
.vp-bd-df-boxlabel {
22-
font-weight: bold;
23-
}
24-
.vp-bd-df-boxselect,
25-
.vp-bd-df-boxinput {
26-
width:160px;
27-
}
File renamed without changes.

‎src/common/component/vpColumnSelector.js‎renamed to ‎src/common/component/vpMultiSelector.js‎

Lines changed: 129 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* Project Name : Visual Python
33
* Description : GUI-based Python code generator
4-
* File Name :vpColumnSelector.js
4+
* File Name :vpMultiSelector.js
55
* Author : Black Logic
66
* Note : Groupby app
77
* License : GNU GPLv3 with Visual Python special exception
@@ -42,65 +42,113 @@ define([
4242

4343

4444
//========================================================================
45-
// [CLASS]ColumnSelector
45+
// [CLASS]MultiSelector
4646
//========================================================================
47-
classColumnSelector{
47+
classMultiSelector{
4848

4949
/**
5050
*
5151
*@param {string} frameSelector query for parent component
52-
*@param {Object} config dataframe:[], selectedList=[], includeList=[]
53-
*@param {Array<string>} dataframe dataframe variable name
54-
*@param {Array<string>} selectedList
55-
*@param {Array<string>} includeList
52+
*@param {Object} config parent:[], selectedList=[], includeList=[]
5653
*/
5754
constructor(frameSelector,config){
5855
this.uuid='u'+vpCommon.getUUID();
5956
this.frameSelector=frameSelector;
6057

6158
// configuration
62-
var{ dataframe, selectedList=[], includeList=[]}=config;
63-
this.dataframe=dataframe;
59+
this.config=config;
60+
61+
var{ mode, type, parent, selectedList=[], includeList=[]}=config;
62+
this.mode=mode;
63+
this.parent=parent;
6464
this.selectedList=selectedList;
6565
this.includeList=includeList;
6666

67-
this.columnList=[];
67+
this.dataList=[];
6868
this.pointer={start:-1,end:-1};
6969

7070
varthat=this;
71-
if(dataframe&&dataframe.length>1){
72-
kernelApi.getCommonColumnList(dataframe,function(result){
73-
varcolList=JSON.parse(result);
74-
colList=colList.map(function(x){
71+
72+
switch(mode){
73+
case'columns':
74+
this._getColumnList(parent,function(dataList){
75+
that._executeCallback(dataList);
76+
});
77+
break;
78+
case'variable':
79+
this._getVariableList(type,function(dataList){
80+
that._executeCallback(dataList);
81+
})
82+
break;
83+
}
84+
}
85+
86+
_executeCallback(dataList){
87+
this.dataList=dataList;
88+
if(this.includeList&&this.includeList.length>0){
89+
this.dataList=dataList.filter(data=>this.includeList.includes(data.code));
90+
}else{
91+
this.dataList=dataList;
92+
}
93+
94+
// load
95+
this.load();
96+
}
97+
98+
_getVariableList(type,callback){
99+
kernelApi.searchVarList(type,function(result){
100+
try{
101+
vardataList=JSON.parse(result);
102+
dataList=dataList.map(function(x,idx){
75103
return{
76104
...x,
77-
value:x.label,
78-
code:x.value
105+
value:x.varName,
106+
code:x.varName,
107+
type:x.varType,
108+
location:idx
79109
};
80110
});
81-
if(includeList&&includeList.length>0){
82-
that.columnList=colList.filter(col=>includeList.includes(col.code));
83-
}else{
84-
that.columnList=colList;
111+
callback(dataList);
112+
}catch(e){
113+
callback([]);
114+
}
115+
});
116+
}
117+
118+
_getColumnList(parent,callback){
119+
if(parent&&parent.length>1){
120+
kernelApi.getCommonColumnList(parent,function(result){
121+
try{
122+
varcolList=JSON.parse(result);
123+
colList=colList.map(function(x){
124+
return{
125+
...x,
126+
value:x.label,
127+
code:x.value,
128+
type:x.dtype
129+
};
130+
});
131+
callback(colList);
132+
}catch(e){
133+
callback([]);
85134
}
86-
that.load();
87135
});
88136
}else{
89-
kernelApi.getColumnList(dataframe,function(result){
90-
varcolList=JSON.parse(result);
91-
colList=colList.map(function(x){
92-
return{
93-
...x,
94-
value:x.label,
95-
code:x.value
96-
};
97-
});
98-
if(includeList&&includeList.length>0){
99-
that.columnList=colList.filter(col=>includeList.includes(col.code));
100-
}else{
101-
that.columnList=colList;
137+
kernelApi.getColumnList(parent,function(result){
138+
try{
139+
varcolList=JSON.parse(result);
140+
colList=colList.map(function(x){
141+
return{
142+
...x,
143+
value:x.label,
144+
code:x.value,
145+
type:x.dtype
146+
};
147+
});
148+
callback(colList);
149+
}catch(e){
150+
callback([]);
102151
}
103-
that.load();
104152
});
105153
}
106154
}
@@ -111,40 +159,40 @@ define([
111159

112160
load(){
113161
$(vpCommon.wrapSelector(this.frameSelector)).html(this.render());
114-
vpCommon.loadCssForDiv(this._wrapSelector(),Jupyter.notebook.base_url+vpConst.BASE_PATH+vpConst.STYLE_PATH+'common/component/columnSelector.css');
162+
vpCommon.loadCssForDiv(this._wrapSelector(),Jupyter.notebook.base_url+vpConst.BASE_PATH+vpConst.STYLE_PATH+'common/component/multiSelector.css');
115163
this.bindEvent();
116164
this.bindDraggable();
117165
}
118166

119-
getColumnList(){
167+
getDataList(){
120168
varcolTags=$(this._wrapSelector('.'+APP_SELECT_ITEM+'.added:not(.moving)'));
121-
varcolList=[];
169+
vardataList=[];
122170
if(colTags.length>0){
123171
for(vari=0;i<colTags.length;i++){
124-
varcolName=$(colTags[i]).data('colname');
125-
varcolDtype=$(colTags[i]).data('dtype');
126-
varcolCode=$(colTags[i]).data('code');
127-
if(colCode){
128-
colList.push({name:colName,dtype:colDtype,code:colCode});
172+
varname=$(colTags[i]).data('name');
173+
vartype=$(colTags[i]).data('type');
174+
varcode=$(colTags[i]).data('code');
175+
if(code){
176+
dataList.push({name:name,type:type,code:code});
129177
}
130178
}
131179
}
132-
returncolList;
180+
returndataList;
133181
}
134182

135183
render(){
136184
varthat=this;
137185

138186
vartag=newsb.StringBuilder();
139187
tag.appendFormatLine('<div class="{0} {1}">',APP_SELECT_CONTAINER,this.uuid);
140-
//colselect - left
188+
// select - left
141189
tag.appendFormatLine('<div class="{0}">',APP_SELECT_LEFT);
142190
// tag.appendFormatLine('<input type="text" class="{0}" placeholder="{1}"/>'
143191
// , APP_SELECT_SEARCH, 'Search Column');
144192
varvpSearchSuggest=newvpSuggestInputText.vpSuggestInputText();
145193
vpSearchSuggest.addClass(APP_SELECT_SEARCH);
146-
vpSearchSuggest.setPlaceholder('SearchColumn');
147-
vpSearchSuggest.setSuggestList(function(){returnthat.columnList;});
194+
vpSearchSuggest.setPlaceholder('Search'+this.mode);
195+
vpSearchSuggest.setSuggestList(function(){returnthat.dataList;});
148196
vpSearchSuggest.setSelectEvent(function(value){
149197
$(this.wrapSelector()).val(value);
150198
$(this.wrapSelector()).trigger('change');
@@ -153,77 +201,77 @@ define([
153201
tag.appendLine(vpSearchSuggest.toTagString());
154202
tag.appendFormatLine('<i class="fa fa-search search-icon"></i>')
155203

156-
varselectionList=this.columnList.filter(col=>!that.selectedList.includes(col.code));
157-
tag.appendLine(this.renderColumnSelectionBox(selectionList));
204+
varselectionList=this.dataList.filter(data=>!that.selectedList.includes(data.code));
205+
tag.appendLine(this.renderSelectionBox(selectionList));
158206
tag.appendLine('</div>');// APP_SELECT_LEFT
159-
//colselect - buttons
207+
// select - buttons
160208
tag.appendFormatLine('<div class="{0}">',APP_SELECT_BTN_BOX);
161209
tag.appendFormatLine('<button type="button" class="{0}" title="{1}">{2}</button>'
162-
,APP_SELECT_ADD_ALL_BTN,'Add allcolumns','<img src="/nbextensions/visualpython/resource/arrow_right_double.svg"/></i>');
210+
,APP_SELECT_ADD_ALL_BTN,'Add allitems','<img src="/nbextensions/visualpython/resource/arrow_right_double.svg"/></i>');
163211
tag.appendFormatLine('<button type="button" class="{0}" title="{1}">{2}</button>'
164-
,APP_SELECT_ADD_BTN,'Add selectedcolumns','<img src="/nbextensions/visualpython/resource/arrow_right.svg"/></i>');
212+
,APP_SELECT_ADD_BTN,'Add selecteditems','<img src="/nbextensions/visualpython/resource/arrow_right.svg"/></i>');
165213
tag.appendFormatLine('<button type="button" class="{0}" title="{1}">{2}</button>'
166-
,APP_SELECT_DEL_BTN,'Remove selectedcolumns','<img src="/nbextensions/visualpython/resource/arrow_left.svg"/>');
214+
,APP_SELECT_DEL_BTN,'Remove selecteditems','<img src="/nbextensions/visualpython/resource/arrow_left.svg"/>');
167215
tag.appendFormatLine('<button type="button" class="{0}" title="{1}">{2}</button>'
168-
,APP_SELECT_DEL_ALL_BTN,'Remove allcolumns','<img src="/nbextensions/visualpython/resource/arrow_left_double.svg"/>');
216+
,APP_SELECT_DEL_ALL_BTN,'Remove allitems','<img src="/nbextensions/visualpython/resource/arrow_left_double.svg"/>');
169217
tag.appendLine('</div>');// APP_SELECT_BTNS
170-
//colselect - right
218+
// select - right
171219
tag.appendFormatLine('<div class="{0}">',APP_SELECT_RIGHT);
172-
varselectedList=this.columnList.filter(col=>that.selectedList.includes(col.code));
173-
tag.appendLine(this.renderColumnSelectedBox(selectedList));
220+
varselectedList=this.dataList.filter(data=>that.selectedList.includes(data.code));
221+
tag.appendLine(this.renderSelectedBox(selectedList));
174222
tag.appendLine('</div>');// APP_SELECT_RIGHT
175223
tag.appendLine('</div>');// APP_SELECT_CONTAINER
176224
returntag.toString();
177225
}
178226

179-
renderColumnSelectionBox(colList){
227+
renderSelectionBox(dataList){
180228
vartag=newsb.StringBuilder();
181229
tag.appendFormatLine('<div class="{0} {1} {2} {3}">',APP_SELECT_BOX,'left',APP_DROPPABLE,'no-selection');
182-
// getcoldata and make draggable items
183-
colList&&colList.forEach((col,idx)=>{
184-
//col.array parsing
185-
varcolInfo=vpCommon.safeString(col.array);
186-
// rendercolumn box
187-
tag.appendFormatLine('<div data-idx="{2}" data-colname="{3}" data-dtype="{4}" data-code="{5}" title="{6}"><span>{7}</span></div>'
188-
,APP_SELECT_ITEM,APP_DRAGGABLE,col.location,col.value,col.dtype,col.code,col.label+': \n'+colInfo,col.label);
230+
// get data and make draggable items
231+
dataList&&dataList.forEach((data,idx)=>{
232+
//for column : data.array parsing
233+
varinfo=vpCommon.safeString(data.array);
234+
// renderitem box
235+
tag.appendFormatLine('<div data-idx="{2}" data-name="{3}" data-type="{4}" data-code="{5}" title="{6}"><span>{7}</span></div>'
236+
,APP_SELECT_ITEM,APP_DRAGGABLE,data.location,data.value,data.type,data.code,info?data.value+': \n'+info:'',data.value);
189237
});
190238
tag.appendLine('</div>');// APP_SELECT_BOX
191239
returntag.toString();
192240
}
193241

194-
renderColumnSelectedBox(colList){
242+
renderSelectedBox(dataList){
195243
vartag=newsb.StringBuilder();
196244
tag.appendFormatLine('<div class="{0} {1} {2} {3}">',APP_SELECT_BOX,'right',APP_DROPPABLE,'no-selection');
197-
// getcoldata and make draggable items
198-
colList&&colList.forEach((col,idx)=>{
199-
//col.array parsing
200-
varcolInfo=vpCommon.safeString(col.array);
201-
// rendercolumn box
202-
tag.appendFormatLine('<div data-idx="{3}" data-colname="{4}" data-dtype="{5}" data-code="{6}" title="{7}"><span>{8}</span></div>'
203-
,APP_SELECT_ITEM,APP_DRAGGABLE,'added',col.location,col.value,col.dtype,col.code,col.label+': \n'+colInfo,col.label);
245+
// get data and make draggable items
246+
dataList&&dataList.forEach((data,idx)=>{
247+
//for column : data.array parsing
248+
varinfo=vpCommon.safeString(data.array);
249+
// renderitem box
250+
tag.appendFormatLine('<div data-idx="{3}" data-name="{4}" data-type="{5}" data-code="{6}" title="{7}"><span>{8}</span></div>'
251+
,APP_SELECT_ITEM,APP_DRAGGABLE,'added',data.location,data.value,data.type,data.code,info?data.value+': \n'+info:'',data.value);
204252
});
205253
tag.appendLine('</div>');// APP_SELECT_BOX
206254
returntag.toString();
207255
}
208256

209257
bindEvent(){
210258
varthat=this;
211-
// item indexing - search columns
259+
// item indexing - search
212260
$(this._wrapSelector('.'+APP_SELECT_SEARCH)).on('change',function(event){
213261
varsearchValue=$(this).val();
214262

215-
// filter addedcolumns
263+
// filter addeditems
216264
varaddedTags=$(that._wrapSelector('.'+APP_SELECT_RIGHT+' .'+APP_SELECT_ITEM+'.added'));
217-
varaddedColumnList=[];
265+
varaddedList=[];
218266
for(vari=0;i<addedTags.length;i++){
219267
varvalue=$(addedTags[i]).attr('data-colname');
220-
addedColumnList.push(value);
268+
addedList.push(value);
221269
}
222-
varfilteredColumnList=that.columnList.filter(x=>x.value.includes(searchValue)&&!addedColumnList.includes(x.value));
270+
varfilteredList=that.dataList.filter(x=>x.value.includes(searchValue)&&!addedList.includes(x.value));
223271

224-
//column indexing
272+
//items indexing
225273
$(that._wrapSelector('.'+APP_SELECT_BOX+'.left')).replaceWith(function(){
226-
returnthat.renderColumnSelectionBox(filteredColumnList);
274+
returnthat.renderSelectionBox(filteredList);
227275
});
228276

229277
// draggable
@@ -414,7 +462,7 @@ define([
414462
}
415463
}
416464

417-
returnColumnSelector;
465+
returnMultiSelector;
418466
});
419467

420468
/* End of file */

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp