Skip to content

Commit 639be85

Browse files
author
minjk-bl
committed
Edit DataSelector able to add new item as a column on dataframe
1 parent 8e52e10 commit 639be85

File tree

5 files changed

+95
-10
lines changed

5 files changed

+95
-10
lines changed

‎visualpython/css/component/dataSelector.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,8 @@
9595
.vp-ds-df-option-box {
9696
height: 100%;
9797
}
98-
.vp-ds-df-multiselector {
98+
.vp-ds-df-multiselector,
99+
.vp-ds-df-index-box {
99100
height: calc(100% - 25px);
100101
}
101102
.vp-nd-row-box,

‎visualpython/css/component/multiSelector.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,4 +68,14 @@
6868
}
6969
.vp-cs-select-btn-box button:hover {
7070
background: #F8F8F8;
71+
}
72+
.vp-cs-add-item-name {
73+
padding-right: 25px;
74+
}
75+
.vp-cs-add-item-btn {
76+
display: inline-block;
77+
position: absolute;
78+
right: 35px;
79+
bottom: 63px;
80+
cursor: pointer;
7181
}

‎visualpython/html/component/dataSelector.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020

2121
</div>
2222
</div>
23-
<hr style="margin: 0px;"/>
2423
<div class="vp-ds-option-box">
2524
<label class="vp-bold">Option Page</label>
2625
<div class="vp-ds-option-inner-box">

‎visualpython/js/com/component/DataSelector.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@ define([
368368
<div class="vp-ds-df-multiselector" ${this.state.useIndex===true?'style="display:none;"':''}>
369369
</div>
370370
<div class="vp-ds-df-index-box" ${this.state.useIndex===false?'style="display:none;"':''}>
371-
<div><label>Index selected.</label>
371+
<div style="height:100%;"><label>Index selected.</label>
372372
<div class="vp-cs-select-container no-selection">
373373
<div class="vp-cs-select-left">
374374
<input type="text" class="vp-input wp100" placeholder="Search" value="" readonly>
@@ -384,9 +384,9 @@ define([
384384
-->
385385
<!-- LAB: img to url -->
386386
<button type="button" class="vp-cs-select-add-all-btn" title="Add all items"><div class="vp-icon-arrow-right-double"></div></button>
387-
<button type="button" class="vp-cs-select-add-btn vp-icon-arrow-right" title="Add selected items"><div class="vp-icon-arrow-right"></div></button>
388-
<button type="button" class="vp-cs-select-del-btn vp-icon-arrow-left" title="Remove selected items"><div class="vp-icon-arrow-left"></div></button>
389-
<button type="button" class="vp-cs-select-del-all-btn vp-icon-arrow-left-double" title="Remove all items"><div class="vp-icon-arrow-left-double"></div></button>
387+
<button type="button" class="vp-cs-select-add-btn" title="Add selected items"><div class="vp-icon-arrow-right"></div></button>
388+
<button type="button" class="vp-cs-select-del-btn" title="Remove selected items"><div class="vp-icon-arrow-left"></div></button>
389+
<button type="button" class="vp-cs-select-del-all-btn" title="Remove all items"><div class="vp-icon-arrow-left-double"></div></button>
390390
</div>
391391
<div class="vp-cs-select-right">
392392
<div class="vp-cs-select-box right vp-cs-droppable no-selection vp-scrollbar ui-droppable">
@@ -548,7 +548,7 @@ define([
548548
$(this.wrapSelector('.vp-ds-option-inner-box')).html(this.templateForMultiSelector());
549549
// column selecting
550550
this._columnSelector = new MultiSelector(this.wrapSelector('.vp-ds-df-multiselector'),
551-
{ mode: 'columns', parent: [data], selectedList: this.state.indexing }
551+
{ mode: 'columns', parent: [data], selectedList: this.state.indexing, allowAdd: true }
552552
);
553553

554554
// bind event

‎visualpython/js/com/component/MultiSelector.js

Lines changed: 78 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -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
*/
5555
constructor(frameSelector, config) {
5656
super(frameSelector, config, {});
@@ -62,12 +62,13 @@ define([
6262
// configuration
6363
this.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;
6666
this.mode = mode; // variable / columns / index / ndarray0 / ndarray1 / methods / data(given data)
6767
this.parent = parent;
6868
this.selectedList = selectedList;
6969
this.includeList = includeList;
7070
this.excludeList = excludeList;
71+
this.allowAdd = allowAdd;
7172

7273
this.dataList = dataList; // [ { value, code, type }, ... ]
7374
this.pointer = { start: -1, end: -1 };
@@ -305,6 +306,11 @@ define([
305306
tag.appendFormatLine('<div class="{0}">', APP_SELECT_RIGHT);
306307
var selectedList = this.dataList.filter(data => that.selectedList.includes(data.code));
307308
tag.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+
}
308314
tag.appendLine('</div>'); // APP_SELECT_RIGHT
309315
tag.appendLine('</div>'); // APP_SELECT_CONTAINER
310316
return tag.toString();
@@ -360,7 +366,7 @@ define([
360366
var addedTags = $(that.wrapSelector('.' + APP_SELECT_RIGHT + ' .' + APP_SELECT_ITEM + '.added'));
361367
var addedList = [];
362368
for (var i = 0; i < addedTags.length; i++) {
363-
var value = $(addedTags[i]).attr('data-colname');
369+
var value = $(addedTags[i]).attr('data-name');
364370
addedList.push(value);
365371
}
366372
var 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');
489495
that.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

493568
bindDraggable() {

0 commit comments

Comments
 (0)