@@ -14,8 +14,9 @@ define([
1414'vp_base/js/com/component/SuggestInput' ,
1515'vp_base/js/com/component/VarSelector2' ,
1616'vp_base/js/com/component/DataSelector' ,
17+ 'vp_base/js/com/component/MultiSelector' ,
1718'vp_base/js/com/component/FileNavigation'
18- ] , function ( com_util , com_makeDom , SuggestInput , VarSelector2 , DataSelector , FileNavigation ) {
19+ ] , function ( com_util , com_makeDom , SuggestInput , VarSelector2 , DataSelector , MultiSelector , FileNavigation ) {
1920/**
2021 * show result after code executed
2122 */
@@ -39,6 +40,7 @@ define([
3940'var_select' :'Select Variable' ,
4041'var_multi' :'Select N-Variables' ,
4142'col_select' :'Select Column' ,
43+ 'col_multi' :'Select Columns' ,
4244'textarea' :'Input textarea' ,
4345'input_number' :'Input number' ,
4446'input_text' :'Input text' ,
@@ -149,6 +151,7 @@ define([
149151
150152}
151153
154+ bindMultiSelector ( pageThis ) ;
152155bindAutoComponentEvent ( pageThis ) ;
153156}
154157
@@ -174,7 +177,7 @@ define([
174177} else if ( output === true ) {
175178requiredFontStyle = 'vp-bold' ;
176179}
177- var lblTag = $ ( `<label>${ label } </label>` ) . attr ( {
180+ var lblTag = $ ( `<label>${ label || com_util . optionToLabel ( name ) } </label>` ) . attr ( {
178181'for' :name ,
179182'class' :requiredFontStyle ,
180183'title' :'(' + name + ')'
@@ -315,7 +318,8 @@ define([
315318case 'option_select' :
316319var optSlct = $ ( '<select></select>' ) . attr ( {
317320'class' :'vp-select option-select vp-state' ,
318- 'id' :obj . name
321+ 'id' :obj . name ,
322+ 'title' :( obj . help == undefined ?'' :obj . help ) ,
319323} ) ;
320324obj . options . forEach ( ( opt , idx , arr ) => {
321325var label = ( obj . options_label != undefined ?obj . options_label [ idx ] :opt ) ;
@@ -368,6 +372,7 @@ define([
368372let dataSelector = new DataSelector ( {
369373pageThis :pageThis ,
370374id :obj . name ,
375+ type :obj . comp_type || 'data' ,
371376allowDataType :obj . var_type ,
372377placeholder :obj . placeholder || 'Select data' ,
373378value :value ,
@@ -382,7 +387,8 @@ define([
382387id :obj . name ,
383388class :'vp-input vp-state' ,
384389placeholder :obj . placeholder || 'Select data' ,
385- required :obj . required === true
390+ required :obj . required === true ,
391+ title :( obj . help == undefined ?'' :obj . help ) ,
386392} ) ;
387393vp_generateVarSuggestInput ( pageThis . wrapSelector ( ) , obj ) ;
388394content = tag ;
@@ -393,7 +399,8 @@ define([
393399'id' :obj . name ,
394400'class' :'vp-select var-multi vp-state' ,
395401// multiple selection true
396- 'multiple' :true
402+ 'multiple' :true ,
403+ 'title' :( obj . help == undefined ?'' :obj . help ) ,
397404} ) ;
398405vp_generateVarSelect ( tag , obj . var_type , obj . value ) ;
399406content = tag ;
@@ -402,10 +409,28 @@ define([
402409var tag = $ ( '<input/>' ) . attr ( {
403410'type' :'text' ,
404411'id' :obj . name ,
405- 'class' :'vp-input vp-state'
412+ 'class' :'vp-input vp-state' ,
413+ 'title' :( obj . help == undefined ?'' :obj . help ) ,
406414} ) ;
407415content = tag ;
408416break ;
417+ case 'col_multi' :
418+ var tag1 = $ ( '<div></div>' ) . attr ( {
419+ 'id' :obj . name + '_auto_comp' ,
420+ 'class' :'vp-auto-multi-column' ,
421+ 'data-id' :obj . name ,
422+ 'data-target' :obj . comp_target || 'i0' ,
423+ 'style' :'height: 150px;' ,
424+ 'title' :( obj . help == undefined ?'' :obj . help ) ,
425+ } ) ;
426+ var tag2 = $ ( '<input/>' ) . attr ( {
427+ type :'hidden' ,
428+ id :obj . name ,
429+ class :'vp-input vp-state' ,
430+ } )
431+ var tag = $ ( '<div></div>' ) . append ( tag1 ) . append ( tag2 ) ;
432+ content = tag ;
433+ break ;
409434case 'textarea' :
410435var textarea = $ ( `<textarea id="${ obj . name } " class="vp-textarea vp-state">${ ( obj . default == undefined ?'' :obj . default ) } </textarea>` ) ;
411436// cell metadata test
@@ -710,6 +735,12 @@ define([
710735case 'dtype' :
711736value = $ ( pageThis . wrapSelector ( parent + ' #' + obj . name ) ) . val ( ) ;
712737break ;
738+ case 'col_multi' :
739+ let colList = pageThis . autoGen [ obj . name ] . getDataList ( ) ;
740+ pageThis . state [ obj . name ] = colList . map ( data => { return data . code } ) ;
741+ value = colList . map ( data => { return data . code } ) . join ( ',' ) ;
742+ $ ( pageThis . wrapSelector ( '#' + obj . name ) ) . val ( value ) ;
743+ break ;
713744case 'file-open' :
714745case 'file-save' :
715746case 'table' :
@@ -1236,6 +1267,50 @@ define([
12361267return $ ( '<input value="tabblock"/>' ) ;
12371268}
12381269
1270+ var bindMultiSelector = function ( pageThis ) {
1271+ //====================================================================
1272+ // for column multi selector
1273+ //====================================================================
1274+ $ ( pageThis . wrapSelector ( '.vp-auto-multi-column' ) ) . each ( ( idx , tag ) => {
1275+ let compId = tag . id ;
1276+ let id = $ ( tag ) . data ( 'id' ) ;
1277+ let targetId = $ ( tag ) . data ( 'target' ) ;
1278+ let colSelector = new MultiSelector (
1279+ pageThis . wrapSelector ( '#' + compId ) ,
1280+ { mode :'columns' , parent :( pageThis . state [ targetId ] || '' ) , selectedList :pageThis . state [ compId ] }
1281+ ) ;
1282+ pageThis . autoGen = {
1283+ [ id ] :colSelector ,
1284+ ...pageThis . autoGen
1285+ } ;
1286+ $ ( pageThis . wrapSelector ( '#' + targetId ) ) . on ( 'change' , function ( ) {
1287+ let targetVariable = $ ( this ) . val ( ) ;
1288+ let colSelector = new MultiSelector (
1289+ pageThis . wrapSelector ( '#' + compId ) ,
1290+ {
1291+ mode :'columns' , parent :targetVariable , selectedList :pageThis . state [ compId ] ,
1292+ change :function ( type , list ) {
1293+ let value = list . map ( data => { return data . code } ) . join ( ',' ) ;
1294+ if ( list . length == 0 ) {
1295+ value = '' ;
1296+ } else if ( list . length > 1 ) {
1297+ value = '[' + value + ']' ;
1298+ }
1299+ pageThis . state [ compId ] = list . map ( data => { return data . code } ) ;
1300+ pageThis . state [ id ] = value ;
1301+ $ ( pageThis . wrapSelector ( '#' + id ) ) . val ( value ) ;
1302+ }
1303+ } ,
1304+ ) ;
1305+ pageThis . autoGen = {
1306+ [ id ] :colSelector ,
1307+ ...pageThis . autoGen
1308+ } ;
1309+ } ) ;
1310+
1311+ } ) ;
1312+ }
1313+
12391314var bindAutoComponentEvent = function ( pageThis ) {
12401315let selector = pageThis . wrapSelector ( ) ;
12411316// Auto-component selector
@@ -1499,7 +1574,6 @@ define([
14991574$ ( pageThis . wrapSelector ( '#' + id ) ) . val ( code ) ;
15001575} ) ;
15011576
1502-
15031577//====================================================================
15041578// Event for tabBlock
15051579//====================================================================