Edit MultiSelector to able to select show or hide note

minjk-bl · minjk-bl · commit ba2b46eb2f71 · 2023-06-14T13:17:55.000+09:00
diff --git a/visualpython/css/component/multiSelector.css b/visualpython/css/component/multiSelector.css
@@ -5,7 +5,7 @@
     grid-template-columns: calc(47% - 15px) 50px calc(47% - 15px);
     grid-auto-rows: 100%;
 }
-.vp-cs-select-search {
+.vp-cs-select-container input.vp-cs-select-search {
     width: 100%;
 }
 .vp-cs-select-search::after {
diff --git a/visualpython/js/com/component/MultiSelector.js b/visualpython/js/com/component/MultiSelector.js
@@ -45,6 +45,13 @@ define([
     //========================================================================
     // [CLASS] MultiSelector
     //========================================================================
+    /**
+     * MultiSelector
+     * Usage
+     * this._columnSelector = new MultiSelector(this.wrapSelector('#multi-selector-id'),
+                        { mode: 'columns', parent: [data], selectedList: this.state.indexing, allowAdd: true }
+                    );
+     */
     class MultiSelector extends Component {
 
         /**
@@ -62,19 +69,31 @@ define([
             // configuration
             this.config = this.state;
 
-            var { mode, type, parent, dataList=[], selectedList=[], includeList=[], excludeList=[], allowAdd=false } = this.config;
+            var { 
+                mode, type, parent, 
+                dataList=[], selectedList=[], includeList=[], excludeList=[], 
+                allowAdd=false, showDescription=true,
+                change=null
+            } = this.config;
             this.mode = mode;   // variable / columns / index / ndarray0 / ndarray1 / methods / data(given data)
             this.parent = parent;
             this.selectedList = selectedList;
             this.includeList = includeList;
             this.excludeList = excludeList;
-            this.allowAdd = allowAdd;
+            this.allowAdd = allowAdd;                    // allow adding new item
+            this.showDescription = showDescription; // show description on the top of the box
+
+            this.change = change;  // function (type=('add'|'remove'), list=[])
 
             this.dataList = dataList;   // [ { value, code, type }, ... ]
             this.pointer = { start: -1, end: -1 };
 
             var that = this;
 
+            if (parent === '') {
+                this._executeCallback([]);
+                return;
+            }
             switch (mode) {
                 case 'columns':
                     this._getColumnList(parent, function(dataList) {
@@ -238,6 +257,7 @@ define([
             $(this.frameSelector).html(this.render());
             this.bindEvent();
             this.bindDraggable();
+            this._bindItemClickEvent();
         }
 
         getDataList() {
@@ -260,7 +280,9 @@ define([
             var that = this;
 
             var tag = new com_String();
-            tag.appendLine('<label>Drag-and-drop columns to right to select.</label>');
+            if (this.showDescription === true) {
+                tag.appendLine('<label>Drag-and-drop columns to right to select.</label>');
+            }
             tag.appendFormatLine('<div class="{0} {1}">', APP_SELECT_CONTAINER, this.uuid);
             // select - left
             tag.appendFormatLine('<div class="{0}">', APP_SELECT_LEFT);
@@ -275,6 +297,7 @@ define([
                 $(this.wrapSelector()).val(value);
                 $(this.wrapSelector()).trigger('change');
             });
+            vpSearchSuggest.setAutoFocus(false);
             vpSearchSuggest.setNormalFilter(true);
             tag.appendLine(vpSearchSuggest.toTagString());
             tag.appendFormatLine('<i class="fa fa-search search-icon"></i>')
@@ -378,6 +401,7 @@ define([
 
                 // draggable
                 that.bindDraggable();
+                that._bindItemClickEvent();
             });
 
             // item indexing - add all
@@ -388,6 +412,8 @@ define([
                 $(that.wrapSelector('.' + APP_SELECT_ITEM)).addClass('added');
                 $(that.wrapSelector('.' + APP_SELECT_ITEM + '.selected')).removeClass('selected');
                 that.pointer = { start: -1, end: -1 };
+
+                that.change && that.change('add', that.getDataList());
             });
 
             // item indexing - add
@@ -400,6 +426,8 @@ define([
                 $(that.wrapSelector('.' + APP_SELECT_ITEM + selector)).addClass('added');
                 $(that.wrapSelector('.' + APP_SELECT_ITEM + selector)).removeClass('selected');
                 that.pointer = { start: -1, end: -1 };
+
+                that.change && that.change('add', that.getDataList());
             });
 
             // item indexing - del
@@ -420,6 +448,8 @@ define([
                 selectedTag.removeClass('added');
                 selectedTag.removeClass('selected');
                 that.pointer = { start: -1, end: -1 };
+
+                that.change && that.change('remove', that.getDataList());
             });
 
             // item indexing - delete all
@@ -437,12 +467,16 @@ define([
                 $(that.wrapSelector('.' + APP_SELECT_ITEM)).removeClass('added');
                 $(that.wrapSelector('.' + APP_SELECT_ITEM + '.selected')).removeClass('selected');
                 that.pointer = { start: -1, end: -1 };
+
+                that.change && that.change('remove', that.getDataList());
             });
 
             // add new item
             $(this.wrapSelector('.vp-cs-add-item-btn')).on('click', function(event) {
                 let newItemName = $(that.wrapSelector('.vp-cs-add-item-name')).val();
                 that._addNewItem(newItemName);
+
+                that.change && that.change('add', that.getDataList());
             });
             // add new item (by pushing enter key)
             $(this.wrapSelector('.vp-cs-add-item-name')).on('keyup', function(event) {
@@ -452,6 +486,8 @@ define([
                 if (keycode == 13) { // enter
                     let newItemName = $(this).val();
                     that._addNewItem(newItemName);
+
+                    that.change && that.change('add', that.getDataList());
                 }
             });
 
@@ -522,6 +558,8 @@ define([
             $(this.wrapSelector('.vp-cs-del-item')).on('click', function(event) {
                 $(this).closest('.' + APP_SELECT_ITEM).remove();
                 that.pointer = { start: -1, end: -1 };
+
+                that.change && that.change('remove', that.getDataList());
             });
         }
 
@@ -629,13 +667,15 @@ define([
                     if ($(this).hasClass('right')) {
                         // add
                         $(dropGroup).addClass('added');
+                        that.change && that.change('add', that.getDataList());
                     } else {
                         // del
                         $(dropGroup).removeClass('added');
                         // sort
                         $(droppedOn).find('.' + APP_SELECT_ITEM).sort(function(a, b) {
                             return ($(b).data('idx')) < ($(a).data('idx')) ? 1 : -1;
                         }).appendTo( $(droppedOn) );
+                        that.change && that.change('remove', that.getDataList());
                     }
                     // remove selection
                     $(droppableQuery).find('.selected').removeClass('selected');

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`grid-template-columns: calc(47% - 15px) 50px calc(47% - 15px);`
`6`	`6`	`grid-auto-rows: 100%;`
`7`	`7`	`}`
`8`		`-.vp-cs-select-search {`
	`8`	`+.vp-cs-select-container input.vp-cs-select-search {`
`9`	`9`	`width: 100%;`
`10`	`10`	`}`
`11`	`11`	`.vp-cs-select-search::after {`