@@ -50,7 +50,7 @@ define([
5050/**
5151 *
5252 *@param {string } frameSelector query for parent component
53- *@param {Object } config parent:[], selectedList=[], includeList=[]
53+ *@param {Object } config parent:[], selectedList=[], includeList=[], excludeList=[], allowAdd=true/false
5454 */
5555constructor ( frameSelector , config ) {
5656super ( frameSelector , config , { } ) ;
@@ -62,12 +62,13 @@ define([
6262// configuration
6363this . config = this . state ;
6464
65- var { mode, type, parent, dataList= [ ] , selectedList= [ ] , includeList= [ ] , excludeList= [ ] } = this . config ;
65+ var { mode, type, parent, dataList= [ ] , selectedList= [ ] , includeList= [ ] , excludeList= [ ] , allowAdd = false } = this . config ;
6666this . mode = mode ; // variable / columns / index / ndarray0 / ndarray1 / methods / data(given data)
6767this . parent = parent ;
6868this . selectedList = selectedList ;
6969this . includeList = includeList ;
7070this . excludeList = excludeList ;
71+ this . allowAdd = allowAdd ;
7172
7273this . dataList = dataList ; // [ { value, code, type }, ... ]
7374this . pointer = { start :- 1 , end :- 1 } ;
@@ -305,6 +306,11 @@ define([
305306tag . appendFormatLine ( '<div class="{0}">' , APP_SELECT_RIGHT ) ;
306307var selectedList = this . dataList . filter ( data => that . selectedList . includes ( data . code ) ) ;
307308tag . appendLine ( this . renderSelectedBox ( selectedList ) ) ;
309+ if ( this . allowAdd ) {
310+ // add item
311+ tag . appendLine ( '<input type="text" class="vp-cs-add-item-name vp-input wp100" placeholder="New item to add" value="">' ) ;
312+ tag . appendLine ( '<div class="vp-cs-add-item-btn vp-icon-plus"></div>' ) ;
313+ }
308314tag . appendLine ( '</div>' ) ; // APP_SELECT_RIGHT
309315tag . appendLine ( '</div>' ) ; // APP_SELECT_CONTAINER
310316return tag . toString ( ) ;
@@ -360,7 +366,7 @@ define([
360366var addedTags = $ ( that . wrapSelector ( '.' + APP_SELECT_RIGHT + ' .' + APP_SELECT_ITEM + '.added' ) ) ;
361367var addedList = [ ] ;
362368for ( var i = 0 ; i < addedTags . length ; i ++ ) {
363- var value = $ ( addedTags [ i ] ) . attr ( 'data-colname ' ) ;
369+ var value = $ ( addedTags [ i ] ) . attr ( 'data-name ' ) ;
364370addedList . push ( value ) ;
365371}
366372var filteredList = that . dataList . filter ( x => x . value . includes ( searchValue ) && ! addedList . includes ( x . value ) ) ;
@@ -488,6 +494,75 @@ define([
488494$ ( that . wrapSelector ( '.' + APP_SELECT_ITEM + '.selected' ) ) . removeClass ( 'selected' ) ;
489495that . pointer = { start :- 1 , end :- 1 } ;
490496} ) ;
497+
498+ // add new item
499+ $ ( this . wrapSelector ( '.vp-cs-add-item-btn' ) ) . on ( 'click' , function ( event ) {
500+ let newItemName = $ ( that . wrapSelector ( '.vp-cs-add-item-name' ) ) . val ( ) ;
501+ that . _addNewItem ( newItemName ) ;
502+ } ) ;
503+ // add new item (by pushing enter key)
504+ $ ( this . wrapSelector ( '.vp-cs-add-item-name' ) ) . on ( 'keyup' , function ( event ) {
505+ var keycode = event . keyCode
506+ ?event . keyCode
507+ :event . which ;
508+ if ( keycode == 13 ) { // enter
509+ let newItemName = $ ( this ) . val ( ) ;
510+ that . _addNewItem ( newItemName ) ;
511+ }
512+ } ) ;
513+ }
514+
515+ _addNewItem ( newItemName ) {
516+ if ( newItemName && newItemName !== '' ) {
517+ // check if it is already exist
518+ // - if it is already added, just select that item
519+ // get added items
520+ var addedTags = $ ( this . wrapSelector ( '.' + APP_SELECT_RIGHT + ' .' + APP_SELECT_ITEM + '.added' ) ) ;
521+ var addedList = [ ] ;
522+ for ( var i = 0 ; i < addedTags . length ; i ++ ) {
523+ var value = $ ( addedTags [ i ] ) . attr ( 'data-name' ) ;
524+ addedList . push ( value ) ;
525+ }
526+ if ( addedList . includes ( newItemName ) ) {
527+ // just select that item and do nothing
528+ var targetTag = $ ( this . wrapSelector ( `.vp-cs-select-item.added[data-name="${ newItemName } "]` ) ) ;
529+ this . pointer = { start :targetTag . index ( ) , end :- 1 } ;
530+ // un-select others
531+ $ ( this . wrapSelector ( '.' + APP_SELECT_ITEM ) ) . removeClass ( 'selected' ) ;
532+ targetTag . addClass ( 'selected' ) ;
533+ return ;
534+ }
535+ var filteredList = this . dataList . filter ( x => x . value === newItemName ) ;
536+ if ( filteredList . length > 0 ) {
537+ // already exist -> move it to selected-box
538+ var targetTag = $ ( this . wrapSelector ( `.vp-cs-select-item[data-name="${ newItemName } "]` ) ) ;
539+ $ ( targetTag ) . appendTo (
540+ $ ( this . wrapSelector ( '.' + APP_SELECT_BOX + '.right' ) )
541+ ) ;
542+ this . pointer = { start :targetTag . index ( ) , end :- 1 } ;
543+ // un-select others
544+ $ ( this . wrapSelector ( '.' + APP_SELECT_ITEM ) ) . removeClass ( 'selected' ) ;
545+ targetTag . addClass ( 'added' ) ;
546+ targetTag . addClass ( 'selected' ) ;
547+ return ;
548+ }
549+
550+ // add item
551+ let newItemIndex = this . dataList . length ;
552+ var targetTag = $ ( `<div class="${ APP_SELECT_ITEM } ${ APP_DRAGGABLE } added selected" data-idx="${ newItemIndex } " data-name="${ newItemName } " data-type="object" data-code="'${ newItemName } '" title="${ newItemName } : Added manually">
553+ <span>${ newItemName } </span>
554+ </div>` ) ;
555+ $ ( targetTag ) . appendTo (
556+ $ ( this . wrapSelector ( '.' + APP_SELECT_BOX + '.right' ) )
557+ ) ;
558+ this . pointer = { start :targetTag . index ( ) , end :- 1 } ;
559+ // un-select others
560+ $ ( this . wrapSelector ( '.' + APP_SELECT_ITEM ) ) . removeClass ( 'selected' ) ;
561+ // clear item input
562+ $ ( this . wrapSelector ( '.vp-cs-add-item-name' ) ) . val ( '' ) ;
563+ // bind draggable
564+ this . bindDraggable ( ) ;
565+ }
491566}
492567
493568bindDraggable ( ) {