Skip to content

Commit c025bbe

Browse files
author
minjk-bl
committed
Apps > Groupby - almost finish (except Grouper)
1 parent 5eb5a46 commit c025bbe

2 files changed

Lines changed: 144 additions & 42 deletions

File tree

‎css/common/groupby.css‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,11 @@
2626
padding: 10px;
2727
margin-top: 5px;
2828
height: 180px;
29-
30-
display: grid;
31-
grid-template-rows: 30px;
32-
grid-row-gap: 5px;
3329
overflow: auto;
3430
}
31+
.vp-gb-adv-item {
32+
margin-bottom: 5px;
33+
}
3534
.vp-gb-adv-method-box {
3635
position: relative;
3736
display: inline-block;
@@ -50,4 +49,22 @@
5049
.vp-gb-adv-item-delete {
5150
display: inline-block;
5251
padding-left: 5px;
52+
}
53+
.vp-gb-naming-box label {
54+
height: 30px;
55+
line-height: 30px;
56+
vertical-align: middle;
57+
font-weight: bold;
58+
margin-bottom: 5px;
59+
}
60+
.vp-gb-naming-item label {
61+
width: 100px;
62+
height: 30px;
63+
line-height: 30px;
64+
vertical-align: middle;
65+
margin-bottom: 5px;
66+
text-overflow: ellipsis;
67+
white-space: nowrap;
68+
overflow: hidden;
69+
font-weight: bold;
5370
}

‎src/common/vpGroupby.js‎

Lines changed: 123 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ define([
9898
_loadState(state) {
9999
var {
100100
variable, groupby, display, method, advanced, allocateTo, resetIndex,
101-
advPageDom, advColList, advNamingDict
101+
advPageDom, advColList, advNamingList
102102
} = state;
103103

104104
$(this._wrapSelector('#vp_gbVariable')).val(variable);
@@ -120,8 +120,8 @@ define([
120120
advColList.forEach((arr, idx) => {
121121
$($(this._wrapSelector('.vp-gb-adv-col'))[idx]).data('list', arr);
122122
});
123-
advNamingDict.forEach((dict, idx) => {
124-
$($(this._wrapSelector('.vp-gb-adv-naming'))[idx]).data('dict', dict);
123+
advNamingList.forEach((obj, idx) => {
124+
$($(this._wrapSelector('.vp-gb-adv-naming'))[idx]).data('dict', obj);
125125
});
126126
}
127127

@@ -185,7 +185,7 @@ define([
185185

186186
advPageDom: '',
187187
advColList: [],
188-
advNamingDict: []
188+
advNamingList: []
189189
};
190190
this.popup = {
191191
type: '',
@@ -265,7 +265,7 @@ define([
265265
page.appendLine('</div>');
266266

267267
// Advanced box
268-
page.appendFormatLine('<div class="{0}" style="display: none;">', 'vp-gb-adv-box');
268+
page.appendFormatLine('<div class="{0} {1}" style="display: none;">', 'vp-gb-adv-box', 'vp-apiblock-scrollbar');
269269
page.appendLine(this.renderAdvancedItem());
270270
page.appendFormatLine('<button id="{0}" class="{1}">{2}</button>', 'vp_gbAdvAdd', 'vp-button', '+ Add');
271271
page.appendLine('</div>'); // end of adv-box
@@ -315,6 +315,21 @@ define([
315315
$(this._wrapSelector()).hide();
316316
}
317317

318+
renderVariableList(varList, defaultValue='') {
319+
var tag = new sb.StringBuilder();
320+
tag.appendFormatLine('<select id="{0}">', 'vp_gbVariable');
321+
varList.forEach(vObj => {
322+
// varName, varType
323+
var label = vObj.varName;
324+
tag.appendFormatLine('<option value="{0}" data-type="{1}" {2}>{3}</option>'
325+
, vObj.varName, vObj.varType
326+
, defaultValue == vObj.varName?'selected':''
327+
, label);
328+
});
329+
tag.appendLine('</select>'); // VP_VS_VARIABLES
330+
return tag.toString();
331+
}
332+
318333
renderAdvancedItem() {
319334
var page = new sb.StringBuilder();
320335
page.appendFormatLine('<div class="{0}">', 'vp-gb-adv-item');
@@ -368,23 +383,42 @@ define([
368383
renderColumnSelector(previousList, includeList) {
369384
this.popup.ColSelector = new vpColumnSelector(this._wrapSelector('.' + APP_POPUP_BODY), this.state.variable, previousList, includeList);
370385
}
371-
372-
renderVariableList(varList, defaultValue='') {
373-
var tag = new sb.StringBuilder();
374-
tag.appendFormatLine('<select id="{0}">', 'vp_gbVariable');
375-
varList.forEach(vObj => {
376-
// varName, varType
377-
var label = vObj.varName;
378-
tag.appendFormatLine('<option value="{0}" data-type="{1}" {2}>{3}</option>'
379-
, vObj.varName, vObj.varType
380-
, defaultValue == vObj.varName?'selected':''
381-
, label);
382-
});
383-
tag.appendLine('</select>'); // VP_VS_VARIABLES
384-
return tag.toString();
386+
387+
renderNamingBox(columns, method, previousDict) {
388+
var page = new sb.StringBuilder();
389+
page.appendFormatLine('<div class="{0}">', 'vp-gb-naming-box');
390+
if (columns && columns.length > 0) {
391+
page.appendFormatLine('<label>Replace {0} as ...</label>', method);
392+
columns.forEach(col => {
393+
page.appendFormatLine('<div class="{0}">', 'vp-gb-naming-item');
394+
page.appendFormatLine('<label>{0}</label>', col);
395+
var previousValue = '';
396+
if (previousDict[col]) {
397+
previousValue = previousDict[col];
398+
}
399+
page.appendFormatLine('<input type="text" class="{0}" placeholder="{1}" value="{2}" data-code="{3}"/>'
400+
, 'vp-gb-naming-text', 'Name to replace ' + method, previousValue, col);
401+
page.appendLine('</div>');
402+
});
403+
} else {
404+
var previousValue = '';
405+
if (previousDict[method]) {
406+
previousValue = previousDict[method];
407+
}
408+
page.appendFormatLine('<div class="{0}">', 'vp-gb-naming-item');
409+
page.appendFormatLine('<label>{0}</label>', method);
410+
page.appendFormatLine('<input type="text" class="{0}" placeholder="{1}" value="{2}" data-code="{3}"/>'
411+
, 'vp-gb-naming-text', 'Name to replace ' + method, previousValue, method);
412+
page.appendLine('</div>');
413+
}
414+
page.appendLine('</div>');
415+
return page.toString();
385416
}
417+
418+
386419

387420
openInnerPopup(targetSelector, title='Select columns', includeList=[]) {
421+
this.popup.type = 'column';
388422
this.popup.targetSelector = targetSelector;
389423
this.renderColumnSelector(this.popup.targetSelector.data('list'), includeList);
390424

@@ -399,6 +433,18 @@ define([
399433
$(this._wrapSelector('.' + APP_POPUP_BOX)).hide();
400434
}
401435

436+
openNamingPopup(targetSelector, columns, method) {
437+
this.popup.type = 'naming';
438+
this.popup.targetSelector = targetSelector;
439+
$(this._wrapSelector('.' + APP_POPUP_BODY)).html(this.renderNamingBox(columns, method, $(this.popup.targetSelector).data('dict')));
440+
441+
// set title
442+
$(this._wrapSelector('.' + APP_POPUP_BOX + ' .' + APP_TITLE)).text('Replace naming');
443+
444+
// show popup box
445+
$(this._wrapSelector('.' + APP_POPUP_BOX)).show();
446+
}
447+
402448
loadVariableList() {
403449
var that = this;
404450
// load using kernel
@@ -536,23 +582,26 @@ define([
536582
//====================================================================
537583
// Advanced box Events
538584
//====================================================================
585+
// add advanced item
586+
$(document).on('click', this._wrapSelector('#vp_gbAdvAdd'), function() {
587+
$(that.renderAdvancedItem()).insertBefore($(that._wrapSelector('#vp_gbAdvAdd')));
588+
});
589+
539590
// advanced item - column change event
540591
$(document).on('change', this._wrapSelector('.vp-gb-adv-col'), function(event) {
541592
var colList = event.colList;
542593
var idx = $(that._wrapSelector('.vp-gb-adv-col')).index(this);
543-
that.state.advColList[idx] = colList;
544-
});
545-
546-
// advanced item - naming change event
547-
$(document).on('change', this._wrapSelector('.vp-gb-adv-naming'), function(event) {
548-
var result = event.result;
549-
var idx = $(that._wrapSelector('.vp-gb-adv-naming')).index(this);
550-
that.state.advNamingDict[idx] = result;
551-
});
594+
595+
// if there's change, reset display namings
596+
var previousList = that.state.advColList[idx];
597+
if (!previousList || colList.length !== previousList.length
598+
|| !colList.slice().sort().every((val, idx) => { return val === previousList.slice().sort()[idx]})) {
599+
that.state.advNamingList = []
600+
$(that._wrapSelector('.vp-gb-adv-naming')).val('');
601+
$(that._wrapSelector('.vp-gb-adv-naming')).data('dict', {});
602+
}
552603

553-
// add advanced item
554-
$(document).on('click', this._wrapSelector('#vp_gbAdvAdd'), function() {
555-
$(that.renderAdvancedItem()).insertBefore($(that._wrapSelector('#vp_gbAdvAdd')));
604+
that.state.advColList[idx] = colList;
556605
});
557606

558607
// edit target columns
@@ -584,7 +633,19 @@ define([
584633
$(parentDiv).find('.vp-gb-adv-method-box').hide();
585634
});
586635

587-
// edit columns naming // TODO:
636+
// advanced item - naming change event
637+
$(document).on('change', this._wrapSelector('.vp-gb-adv-naming'), function(event) {
638+
var namingDict = event.namingDict;
639+
var idx = $(that._wrapSelector('.vp-gb-adv-naming')).index(this);
640+
that.state.advNamingList[idx] = namingDict;
641+
});
642+
643+
// edit columns naming
644+
$(document).on('click', this._wrapSelector('.vp-gb-adv-naming-selector'), function() {
645+
var columns = $(this).parent().find('.vp-gb-adv-col').data('list');
646+
var method = $(this).parent().find('.vp-gb-adv-method').val();
647+
that.openNamingPopup($(this).parent().find('.vp-gb-adv-naming'), columns, method);
648+
});
588649

589650
// delete advanced item
590651
$(document).on('click', this._wrapSelector('.vp-gb-adv-item-delete'), function() {
@@ -658,12 +719,32 @@ define([
658719
// ok input popup
659720
$(document).on('click', this._wrapSelector('.' + APP_POPUP_OK), function() {
660721
// ok input popup
661-
var colList = that.popup.ColSelector.getColumnList();
722+
if (that.popup.type == 'column') {
723+
var colList = that.popup.ColSelector.getColumnList();
724+
725+
$(that.popup.targetSelector).val(colList.join(','));
726+
$(that.popup.targetSelector).data('list', colList);
727+
$(that.popup.targetSelector).trigger({ type: 'change', colList: colList });
728+
that.closeInnerPopup();
729+
} else {
730+
var dict = {};
731+
// get dict
732+
var tags = $(that._wrapSelector('.vp-gb-naming-text'));
733+
for (var i = 0; i < tags.length; i++) {
734+
var key = $(tags[i]).data('code');
735+
var val = $(tags[i]).val();
736+
if (val && val != '') {
737+
dict[key] = "'" + val + "'";
738+
}
739+
}
662740

663-
$(that.popup.targetSelector).val(colList.join(','));
664-
$(that.popup.targetSelector).data('list', colList);
665-
$(that.popup.targetSelector).trigger({ type: 'change', colList: colList });
666-
that.closeInnerPopup();
741+
console.log(dict);
742+
743+
$(that.popup.targetSelector).val(Object.values(dict).join(','));
744+
$(that.popup.targetSelector).data('dict', dict);
745+
$(that.popup.targetSelector).trigger({ type: 'change', namingDict: dict });
746+
that.closeInnerPopup();
747+
}
667748
});
668749

669750
// cancel input popup
@@ -772,6 +853,8 @@ define([
772853
}
773854
}
774855

856+
console.log('advColumnDict', advColumnDict);
857+
775858
// if target columns not selected
776859
if (Object.keys(advColumnDict).length == 1) {
777860
var noColList = advColumnDict['nothing'];
@@ -815,15 +898,17 @@ define([
815898
Object.keys(advColumnDict).forEach(key => {
816899
var colList = advColumnDict[key];
817900
var tmpList2 = [];
901+
var useTuple = false;
818902
colList.forEach(obj => {
819903
if (obj.naming && obj.naming != undefined) {
820904
tmpList2.push(vpCommon.formatString("({0}, {1})", obj.naming, obj.method));
905+
useTuple = true;
821906
} else {
822907
tmpList2.push(obj.method);
823908
}
824909
});
825910
var tmpStr = tmpList2.join(',');
826-
if (tmpList2.length > 1) {
911+
if (tmpList2.length > 1 || useTuple) {
827912
tmpStr = '[' + tmpStr + ']';
828913
}
829914
tmpList1.push(vpCommon.formatString("{0}: {1}", key, tmpStr));

0 commit comments

Comments
 (0)