Skip to content

Commit 5be1ef5

Browse files
author
minjk-bl
committed
Edit popup component to focus on empty required field
1 parent 6dbf090 commit 5be1ef5

23 files changed

+123
-48
lines changed

‎data/m_library/pandasLibrary.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5023,7 +5023,8 @@ define([
50235023
name: 'i0',
50245024
type: 'var',
50255025
label: 'DataFrame',
5026-
var_type: ['DataFrame', 'Series']
5026+
var_type: ['DataFrame', 'Series'],
5027+
required: true
50275028
}
50285029
],
50295030
output: [

‎html/m_apps/bind.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="vp-bd-type-box concat">
1212
<div>
1313
<label for="vp_bdVariable" class="vp-orange-text w100">DataFrame</label>
14-
<input type="text" id="vp_bdVariable" placeholder="Select variables" readonly="">
14+
<input type="text" id="vp_bdVariable" placeholder="Select variables" readonly="" required="true"t>
1515
</div>
1616
<div>
1717
<label for="vp_bdJoin" class="w100">Join</label>

‎html/m_apps/groupby.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</div>
1010
<div>
1111
<label for="vp_gbBy" class="vp-orange-text w80">Groupby</label>
12-
<input type="text" id="vp_gbBy" placeholder="Groupby columns" readonly="">
12+
<input type="text" id="vp_gbBy" placeholder="Groupby columns" readonly="" required="true">
1313
<label><input type="checkbox" id="vp_gbByGrouper" disabled=""><span>Grouper</span></label>
1414
<div class="vp-gb-by-grouper-box" style="display:none;">
1515
<input type="number" id="vp_gbByGrouperNumber" class="vp-gb-by-number">

‎html/m_apps/pdf.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div class="vp-pdf-df-box">
1313
<label for="vp_pdfVariable" class="vp-orange-text">File Path</label>
1414
<div>
15-
<input type="text" id="vp_pdfFile" class="vp-state vp-input input-single vp-pdf-filepath" index="0" placeholder="" value="" title=""><div id="vp_openFileNavigationBtn" class="vp-file-browser-button"></div>
15+
<input type="text" id="vp_pdfFile" class="vp-state vp-input input-single vp-pdf-filepath" index="0" placeholder="" value="" title="" required="true"><div id="vp_openFileNavigationBtn" class="vp-file-browser-button"></div>
1616
</div>
1717
<label for="vp_pdfReturn">Allocate to</label>
1818
<div>

‎html/m_apps/profiling.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<div class="vp-pf-df-refresh" title="Refresh variable list"><img src="/nbextensions/visualpython/img/refresh.svg"></div>
1919
</div>
2020
<label for="vp_pfReturn" class="vp-orange-text">Allocate to</label>
21-
<input type="text" id="vp_pfReturn" class="vp-input vp-pf-input" placeholder="New variable name">
21+
<input type="text" id="vp_pfReturn" class="vp-input vp-pf-input" placeholder="New variable name" required="true">
2222
<label for="vp_pfTitle">Report Title</label>
2323
<div>
2424
<input type="text" id="vp_pfTitle" class="vp-input vp-pf-input" placeholder="Title name">

‎html/m_apps/reshape.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</div>
2323
<div>
2424
<label for="vp_rsColumns" class="vp-orange-text w100">Columns</label>
25-
<input type="text" id="vp_rsColumns" placeholder="Columns key" readonly="">
25+
<input type="text" id="vp_rsColumns" placeholder="Columns key" readonly="" required="true">
2626
</div>
2727
<div>
2828
<label for="vp_rsValues" class="w100">Values</label>

‎html/m_visualize/chart.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
<tr>
107107
<th class="vp-orange-text">Y Value</th>
108108
<td>
109-
<input type="text" class="vp-input vp-state" id="y" />
109+
<input type="text" class="vp-input vp-state" id="y" required="true"/>
110110
</td>
111111
</tr>
112112
<tr>

‎html/m_visualize/wordCloud.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
</div>
1313
<div class="vp-tab-page-box vp-grid-border-box vp-scrollbar">
1414
<div class="vp-tab-page vp-grid-box" data-type="data">
15-
<label for="data" class="vp-bold">Data</label>
15+
<label for="data" class="vp-bold vp-orange-text">Data</label>
1616
<div>
17-
<input type="text" id="data" class="vp-input vp-state"/>
17+
<input type="text" id="data" class="vp-input vp-state" required="true"/>
1818
<label><input type="checkbox" id="useFile" class="vp-state"><span>Use file</span></label>
1919
<div id="vp_wcOpenFile" class="vp-file-browser-button" style="display:none;"></div>
2020
</div>

‎js/com/com_generator.js

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,9 @@ define([
189189
} else {
190190
suggestInput.setPlaceholder('Type or Select value');
191191
}
192+
if (required === true) {
193+
suggestInput.addAttribute('required', true);
194+
}
192195
suggestInput.setSelectEvent(function(selectedValue) {
193196
// trigger change
194197
$(pageThis.wrapSelector('#' + obj.name)).val(selectedValue);
@@ -202,9 +205,10 @@ define([
202205
$(tag).attr({
203206
'type': 'text',
204207
'id': obj.name,
205-
'class': 'vp-input vp-state'
208+
'class': 'vp-input vp-state',
209+
'required': required === true
206210
});
207-
vp_generateVarSuggestInput(divTag, obj);
211+
vp_generateVarSuggestInput(divTag, obj, required);
208212
tblInput.appendChild(tag);
209213
break;
210214
case 'var_multi':
@@ -244,7 +248,8 @@ define([
244248
'id': obj.name,
245249
'placeholder': (obj.placeholder==undefined?'':obj.placeholder),
246250
'value': (obj.default==undefined?'':obj.default),
247-
'title': (obj.help==undefined?'':obj.help)
251+
'title': (obj.help==undefined?'':obj.help),
252+
'required': required === true
248253
});
249254
// cell metadata test
250255
if (getValue && obj.value != undefined) {
@@ -268,7 +273,8 @@ define([
268273
'id':obj.name,
269274
'placeholder':(obj.placeholder==undefined?'':obj.placeholder),
270275
'value':(obj.default==undefined?'':obj.default),
271-
'title':(obj.help==undefined?'':obj.help)
276+
'title':(obj.help==undefined?'':obj.help),
277+
'required': required === true
272278
});
273279
// cell metadata test
274280
if (getValue && obj.value != undefined) {
@@ -289,7 +295,7 @@ define([
289295
* Generate suggest input
290296
* @param {object} obj
291297
*/
292-
var vp_generateVarSuggestInput = function(divTag, obj) {
298+
var vp_generateVarSuggestInput = function(divTag, obj, required=false) {
293299
var types = obj.var_type;
294300
var defaultValue = obj.value;
295301

@@ -320,6 +326,9 @@ define([
320326
if (obj.placeholder != undefined) {
321327
suggestInput.setPlaceholder(obj.placeholder);
322328
}
329+
if (required === true) {
330+
suggestInput.addAttribute('required', true);
331+
}
323332
suggestInput.setSelectEvent(function(selectedValue) {
324333
// trigger change
325334
$(divTag + ' #' + obj.name).val(selectedValue);

‎js/com/com_generatorV2.js

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -341,6 +341,9 @@ define([
341341
if (obj.placeholder != undefined) {
342342
suggestInput.setPlaceholder(obj.placeholder);
343343
}
344+
if (obj.required === true) {
345+
suggestInput.addAttribute('required', true);
346+
}
344347
suggestInput.setSelectEvent(function(selectedValue) {
345348
// trigger change
346349
$(pageThis.wrapSelector('#' + obj.name)).val(selectedValue);
@@ -354,16 +357,18 @@ define([
354357
id: obj.name,
355358
allowDataType: obj.var_type,
356359
placeholder: obj.placeholder || 'Select data',
357-
value: value
360+
value: value,
361+
required: obj.required === true
358362
});
359363
content = $(dataSelector.toTagString());
360364
break;
361365
case 'var_select':
362366
// suggest input tag
363367
var tag = $('<input/>').attr({
364-
'type': 'text',
365-
'id': obj.name,
366-
'class': 'vp-input vp-state'
368+
type: 'text',
369+
id: obj.name,
370+
class: 'vp-input vp-state',
371+
required: obj.required === true
367372
});
368373
vp_generateVarSuggestInput(pageThis.wrapSelector(), obj);
369374
content = tag;
@@ -398,12 +403,13 @@ define([
398403
break;
399404
case 'input_number':
400405
var input = $('<input/>').attr({
401-
'type':'number',
402-
'class':'vp-input vp-state',
403-
'id':obj.name,
404-
'placeholder':(obj.placeholder==undefined?'Input Number':obj.placeholder),
405-
'value':(obj.default==undefined?'':obj.default),
406-
'title':(obj.help==undefined?'':obj.help)
406+
type: 'number',
407+
class: 'vp-input vp-state',
408+
id: obj.name,
409+
placeholder: (obj.placeholder==undefined?'Input Number':obj.placeholder),
410+
value: (obj.default==undefined?'':obj.default),
411+
title: (obj.help==undefined?'':obj.help),
412+
required: obj.required === true
407413
});
408414
if (obj.step != undefined) {
409415
$(input).attr({ 'step': obj.step });
@@ -430,12 +436,13 @@ define([
430436
// default : input_single
431437
default:
432438
var input = $('<input/>').attr({
433-
'type':'text',
434-
'class':'vp-input input-single vp-state',
435-
'id':obj.name,
436-
'placeholder':(obj.placeholder==undefined?'Input Data':obj.placeholder),
437-
'value':(obj.default==undefined?'':obj.default),
438-
'title':(obj.help==undefined?'':obj.help)
439+
type: 'text',
440+
class: 'vp-input input-single vp-state',
441+
id: obj.name,
442+
placeholder: (obj.placeholder==undefined?'Input Data':obj.placeholder),
443+
value: (obj.default==undefined?'':obj.default),
444+
title: (obj.help==undefined?'':obj.help),
445+
required: obj.required == true
439446
});
440447
// cell metadata test
441448
if (value != undefined) {
@@ -490,6 +497,9 @@ define([
490497
suggestInput.setSuggestList(function() { return varList; });
491498
suggestInput.setNormalFilter(false);
492499
suggestInput.setValue(defaultValue);
500+
if (obj.required === true) {
501+
suggestInput.addAttribute('required', true);
502+
}
493503
if (obj.placeholder != undefined) {
494504
suggestInput.setPlaceholder(obj.placeholder);
495505
}

‎js/com/component/DataSelector.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ define([
2323
// type: 'data',
2424
// pageThis: this,
2525
// id: 'targetId',
26+
// classes: '',
27+
// placeholder: '',
2628
// select: function(value, dtype) {
2729
// ;
2830
// }
@@ -56,6 +58,7 @@ define([
5658
// additional options
5759
classes: '',
5860
placeholder: 'Select variable',
61+
required: false,
5962
...this.prop
6063
}
6164

@@ -338,7 +341,9 @@ define([
338341
}
339342
return `
340343
<div class="vp-ds-box vp-ds-box-${this.uuid} vp-ds-uninit">
341-
<input type="text" class="vp-ds-target vp-input vp-state ${this.prop.classes}" id="${this.prop.id}" value="${value}" placeholder="${this.prop.placeholder}"/>
344+
<input type="text" class="vp-ds-target vp-input vp-state ${this.prop.classes}"
345+
id="${this.prop.id}" value="${value}"
346+
placeholder="${this.prop.placeholder}" ${this.prop.required?'required="required"':''}/>
342347
<span class="vp-ds-filter"><img src="/nbextensions/visualpython/img/filter.svg"/></span>
343348
</div>
344349
`;

‎js/com/component/PopupComponent.js

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -376,8 +376,10 @@ define([
376376
}
377377
break;
378378
case 'run':
379-
that.save();
380-
that.run();
379+
let result = that.run();
380+
if (result) {
381+
that.save();
382+
}
381383
break;
382384
case 'show-detail':
383385
$(that.wrapSelector('.vp-popup-run-detailbox')).show();
@@ -396,8 +398,10 @@ define([
396398
that.save();
397399
break;
398400
case 'add':
399-
that.save();
400-
that.run(false);
401+
let result = that.run(false);
402+
if (result) {
403+
that.save();
404+
}
401405
break;
402406
}
403407
});
@@ -698,7 +702,35 @@ define([
698702
return sigText;
699703
}
700704

705+
/**
706+
* Check if required option is filled
707+
* @returns true if it's ok / false if there is empty required option
708+
*/
709+
checkRequiredOption() {
710+
let requiredFilled = true;
711+
let requiredTags = $(this.wrapSelector('input[required=true],input[required=required]'));
712+
713+
if (requiredTags) {
714+
for (let i = 0; i < requiredTags.length; i++) {
715+
let thisTag = $(requiredTags[i]);
716+
// if it's visible and empty, focus on it
717+
if (thisTag.is(':visible') && thisTag.val() == '') {
718+
$(requiredTags[i]).focus();
719+
requiredFilled = false;
720+
break;
721+
}
722+
}
723+
}
724+
725+
return requiredFilled;
726+
}
727+
701728
run(execute=true, addcell=true) {
729+
// check required
730+
if (this.checkRequiredOption() === false) {
731+
return null;
732+
}
733+
702734
let code = this.generateCode();
703735
let mode = this.config.executeMode;
704736
let sigText = this.getSigText();

‎js/m_apps/Bind.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -407,6 +407,7 @@ define([
407407
variableInput.setSuggestList(function () { return mappedList; });
408408
variableInput.setNormalFilter(true);
409409
variableInput.setValue(defaultValue);
410+
variableInput.addAttribute('required', true);
410411
$(this.wrapSelector('#' + id)).replaceWith(function() {
411412
return variableInput.toTagString();
412413
});

‎js/m_apps/File.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -310,19 +310,19 @@ define([
310310
);
311311
} else if (selectedType == 'pickle') {
312312
$(prefix + '#path').parent().html(
313-
com_util.formatString('<input type="text" class="vp-input vp-state" id="path" index="0" placeholder="" value="" title=""><div id="vp_openFileNavigationBtn" class="{0}"></div>'
313+
com_util.formatString('<input type="text" class="vp-input vp-state" id="path" index="0" placeholder="" value="" title="" required="true"><div id="vp_openFileNavigationBtn" class="{0}"></div>'
314314
, 'vp-file-browser-button')
315315
);
316316
} else {
317317
$(this.fileState[pageType]['fileResultState']['pathInputId']).parent().html(
318-
com_util.formatString('<input type="text" class="vp-input vp-state" id="{0}" index="0" placeholder="" value="" title=""><div id="vp_openFileNavigationBtn" class="{1}"></div>'
318+
com_util.formatString('<input type="text" class="vp-input vp-state" id="{0}" index="0" placeholder="" value="" title="" required="true"><div id="vp_openFileNavigationBtn" class="{1}"></div>'
319319
, 'i1'
320320
, 'vp-file-browser-button')
321321
);
322322
}
323323
} else {
324324
$(this.fileState[pageType]['fileResultState']['pathInputId']).parent().html(
325-
com_util.formatString('<input type="text" class="vp-input vp-state" id="{0}" index="0" placeholder="" value="" title=""><div id="vp_openFileNavigationBtn" class="{1}"></div>'
325+
com_util.formatString('<input type="text" class="vp-input vp-state" id="{0}" index="0" placeholder="" value="" title="" required="true"><div id="vp_openFileNavigationBtn" class="{1}"></div>'
326326
, 'i0'
327327
, 'vp-file-browser-button')
328328
);

‎js/m_apps/Frame.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -545,6 +545,7 @@ define([
545545
variableInput.addClass('vp-state');
546546
variableInput.setPlaceholder('Select variable');
547547
variableInput.setSuggestList(function () { return mappedList; });
548+
variableInput.addAttribute('required', true);
548549
variableInput.setSelectEvent(function (value) {
549550
$(this.wrapSelector()).val(value);
550551
$(this.wrapSelector()).trigger('change');

‎js/m_apps/Groupby.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,7 @@ define([
395395
variableInput.setPlaceholder('Select variable');
396396
variableInput.setSuggestList(function () { return mappedList; });
397397
variableInput.setNormalFilter(true);
398+
variableInput.addAttribute('required', true);
398399
variableInput.setValue(defaultValue);
399400

400401
return variableInput.toTagString();

‎js/m_apps/Profiling.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@ define([
6262

6363
// click menu
6464
$(this.wrapSelector('.vp-pf-menu-item')).on('click', function() {
65+
// check required filled
66+
if (that.checkRequiredOption() === false) {
67+
return ;
68+
}
69+
6570
var type = $(this).data('type');
6671
var df = $(that.wrapSelector('#vp_pfVariable')).val();
6772
var saveas = $(that.wrapSelector('#vp_pfReturn')).val();
@@ -204,6 +209,7 @@ define([
204209
variableInput.setPlaceholder('Select variable');
205210
variableInput.setSuggestList(function () { return mappedList; });
206211
variableInput.setNormalFilter(true);
212+
variableInput.addAttribute('required', true);
207213
variableInput.setValue(beforeValue);
208214

209215
return variableInput.toTagString();

‎js/m_apps/Reshape.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,7 @@ define([
353353
variableInput.setSuggestList(function () { return mappedList; });
354354
variableInput.setNormalFilter(true);
355355
variableInput.setValue(defaultValue);
356+
variableInput.addAttribute('required', true);
356357
$(this.wrapSelector('#' + id)).replaceWith(function() {
357358
return variableInput.toTagString();
358359
});

‎js/m_apps/Subset.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -756,6 +756,7 @@ define([
756756
});
757757
variableInput.setNormalFilter(true);
758758
variableInput.setValue(prevValue);
759+
variableInput.addAttribute('required', true);
759760
$(that.wrapSelector('.' + VP_DS_PANDAS_OBJECT)).replaceWith(function() {
760761
return variableInput.toTagString();
761762
});

0 commit comments

Comments
 (0)