Edit popup component to focus on empty required field

minjk-bl · minjk-bl · commit 5be1ef5de7a8 · 2022-06-22T18:05:24.000+09:00
diff --git a/data/m_library/pandasLibrary.js b/data/m_library/pandasLibrary.js
@@ -5023,7 +5023,8 @@ define([
                     name: 'i0',
                     type: 'var',
                     label: 'DataFrame',
-                    var_type: ['DataFrame', 'Series']
+                    var_type: ['DataFrame', 'Series'],
+                    required: true
                 }
             ],
             output: [
diff --git a/html/m_apps/bind.html b/html/m_apps/bind.html
@@ -11,7 +11,7 @@
         <div class="vp-bd-type-box concat">
             <div>
                 <label for="vp_bdVariable" class="vp-orange-text w100">DataFrame</label>
-                <input type="text" id="vp_bdVariable" placeholder="Select variables" readonly="">
+                <input type="text" id="vp_bdVariable" placeholder="Select variables" readonly="" required="true"t>
             </div>
             <div>
                 <label for="vp_bdJoin" class="w100">Join</label>
diff --git a/html/m_apps/groupby.html b/html/m_apps/groupby.html
@@ -9,7 +9,7 @@
         </div>
         <div>
             <label for="vp_gbBy" class="vp-orange-text w80">Groupby</label>
-            <input type="text" id="vp_gbBy" placeholder="Groupby columns" readonly="">
+            <input type="text" id="vp_gbBy" placeholder="Groupby columns" readonly="" required="true">
             <label><input type="checkbox" id="vp_gbByGrouper" disabled=""><span>Grouper</span></label>
             <div class="vp-gb-by-grouper-box" style="display:none;">
                 <input type="number" id="vp_gbByGrouperNumber" class="vp-gb-by-number">
diff --git a/html/m_apps/pdf.html b/html/m_apps/pdf.html
@@ -12,7 +12,7 @@
             <div class="vp-pdf-df-box">
                 <label for="vp_pdfVariable" class="vp-orange-text">File Path</label>
                 <div>
-                    <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>
+                    <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>
                 </div>
                 <label for="vp_pdfReturn">Allocate to</label>
                 <div>
diff --git a/html/m_apps/profiling.html b/html/m_apps/profiling.html
@@ -18,7 +18,7 @@
                     <div class="vp-pf-df-refresh" title="Refresh variable list"><img src="/nbextensions/visualpython/img/refresh.svg"></div>
                 </div>
                 <label for="vp_pfReturn" class="vp-orange-text">Allocate to</label>
-                <input type="text" id="vp_pfReturn" class="vp-input vp-pf-input" placeholder="New variable name">
+                <input type="text" id="vp_pfReturn" class="vp-input vp-pf-input" placeholder="New variable name" required="true">
                 <label for="vp_pfTitle">Report Title</label>
                 <div>
                     <input type="text" id="vp_pfTitle" class="vp-input vp-pf-input" placeholder="Title name">
diff --git a/html/m_apps/reshape.html b/html/m_apps/reshape.html
@@ -22,7 +22,7 @@
             </div>
             <div>
                 <label for="vp_rsColumns" class="vp-orange-text w100">Columns</label>
-                <input type="text" id="vp_rsColumns" placeholder="Columns key" readonly="">
+                <input type="text" id="vp_rsColumns" placeholder="Columns key" readonly="" required="true">
             </div>
             <div>
                 <label for="vp_rsValues" class="w100">Values</label>
diff --git a/html/m_visualize/chart.html b/html/m_visualize/chart.html
@@ -106,7 +106,7 @@
                         <tr>
                             <th class="vp-orange-text">Y Value</th>
                             <td>
-                                <input type="text" class="vp-input vp-state" id="y" />
+                                <input type="text" class="vp-input vp-state" id="y" required="true"/>
                             </td>
                         </tr>
                         <tr>
diff --git a/html/m_visualize/wordCloud.html b/html/m_visualize/wordCloud.html
@@ -12,9 +12,9 @@
                 </div>
                 <div class="vp-tab-page-box vp-grid-border-box vp-scrollbar">
                     <div class="vp-tab-page vp-grid-box" data-type="data">
-                        <label for="data" class="vp-bold">Data</label>
+                        <label for="data" class="vp-bold vp-orange-text">Data</label>
                         <div>
-                            <input type="text" id="data" class="vp-input vp-state"/>
+                            <input type="text" id="data" class="vp-input vp-state" required="true"/>
                             <label><input type="checkbox" id="useFile" class="vp-state"><span>Use file</span></label>
                             <div id="vp_wcOpenFile" class="vp-file-browser-button" style="display:none;"></div>
                         </div>
diff --git a/js/com/com_generator.js b/js/com/com_generator.js
@@ -189,6 +189,9 @@ define([
                     } else {
                         suggestInput.setPlaceholder('Type or Select value');
                     }
+                    if (required === true) {
+                        suggestInput.addAttribute('required', true);
+                    }
                     suggestInput.setSelectEvent(function(selectedValue) {
                         // trigger change
                         $(pageThis.wrapSelector('#' + obj.name)).val(selectedValue);
@@ -202,9 +205,10 @@ define([
                 $(tag).attr({
                     'type': 'text',
                     'id': obj.name,
-                    'class': 'vp-input vp-state'
+                    'class': 'vp-input vp-state',
+                    'required': required === true
                 });
-                vp_generateVarSuggestInput(divTag, obj);
+                vp_generateVarSuggestInput(divTag, obj, required);
                 tblInput.appendChild(tag);
                 break;
             case 'var_multi':
@@ -244,7 +248,8 @@ define([
                     'id': obj.name,
                     'placeholder': (obj.placeholder==undefined?'':obj.placeholder),
                     'value': (obj.default==undefined?'':obj.default),
-                    'title': (obj.help==undefined?'':obj.help)
+                    'title': (obj.help==undefined?'':obj.help),
+                    'required': required === true
                 });
                 // cell metadata test
                 if (getValue && obj.value != undefined) {
@@ -268,7 +273,8 @@ define([
                     'id':obj.name,
                     'placeholder':(obj.placeholder==undefined?'':obj.placeholder),
                     'value':(obj.default==undefined?'':obj.default),
-                    'title':(obj.help==undefined?'':obj.help)
+                    'title':(obj.help==undefined?'':obj.help),
+                    'required': required === true
                 });
                 // cell metadata test
                 if (getValue && obj.value != undefined) {
@@ -289,7 +295,7 @@ define([
      * Generate suggest input
      * @param {object} obj
      */
-    var vp_generateVarSuggestInput = function(divTag, obj) {
+    var vp_generateVarSuggestInput = function(divTag, obj, required=false) {
         var types = obj.var_type;
         var defaultValue = obj.value;
 
@@ -320,6 +326,9 @@ define([
             if (obj.placeholder != undefined) {
                 suggestInput.setPlaceholder(obj.placeholder);
             }
+            if (required === true) {
+                suggestInput.addAttribute('required', true);
+            }
             suggestInput.setSelectEvent(function(selectedValue) {
                 // trigger change
                 $(divTag + ' #' + obj.name).val(selectedValue);
diff --git a/js/com/com_generatorV2.js b/js/com/com_generatorV2.js
@@ -341,6 +341,9 @@ define([
                 if (obj.placeholder != undefined) {
                     suggestInput.setPlaceholder(obj.placeholder);
                 }
+                if (obj.required === true) {
+                    suggestInput.addAttribute('required', true);
+                }
                 suggestInput.setSelectEvent(function(selectedValue) {
                     // trigger change
                     $(pageThis.wrapSelector('#' + obj.name)).val(selectedValue);
@@ -354,16 +357,18 @@ define([
                     id: obj.name,
                     allowDataType: obj.var_type, 
                     placeholder: obj.placeholder || 'Select data',
-                    value: value
+                    value: value,
+                    required: obj.required === true
                 });
                 content = $(dataSelector.toTagString());
                 break;
             case 'var_select':
                 // suggest input tag
                 var tag = $('<input/>').attr({
-                    'type': 'text',
-                    'id': obj.name,
-                    'class': 'vp-input vp-state'
+                    type: 'text',
+                    id: obj.name,
+                    class: 'vp-input vp-state',
+                    required: obj.required === true
                 });
                 vp_generateVarSuggestInput(pageThis.wrapSelector(), obj);
                 content = tag;
@@ -398,12 +403,13 @@ define([
                 break;
             case 'input_number':
                 var input = $('<input/>').attr({
-                    'type':'number',
-                    'class':'vp-input vp-state',
-                    'id':obj.name,
-                    'placeholder':(obj.placeholder==undefined?'Input Number':obj.placeholder),
-                    'value':(obj.default==undefined?'':obj.default),
-                    'title':(obj.help==undefined?'':obj.help)
+                    type: 'number',
+                    class: 'vp-input vp-state',
+                    id: obj.name,
+                    placeholder: (obj.placeholder==undefined?'Input Number':obj.placeholder),
+                    value: (obj.default==undefined?'':obj.default),
+                    title: (obj.help==undefined?'':obj.help),
+                    required: obj.required === true
                 });
                 if (obj.step != undefined) {
                     $(input).attr({ 'step': obj.step });
@@ -430,12 +436,13 @@ define([
             // default : input_single
             default:
                 var input = $('<input/>').attr({
-                    'type':'text',
-                    'class':'vp-input input-single vp-state',
-                    'id':obj.name,
-                    'placeholder':(obj.placeholder==undefined?'Input Data':obj.placeholder),
-                    'value':(obj.default==undefined?'':obj.default),
-                    'title':(obj.help==undefined?'':obj.help)
+                    type: 'text',
+                    class: 'vp-input input-single vp-state',
+                    id: obj.name,
+                    placeholder: (obj.placeholder==undefined?'Input Data':obj.placeholder),
+                    value: (obj.default==undefined?'':obj.default),
+                    title: (obj.help==undefined?'':obj.help),
+                    required: obj.required == true
                 });
                 // cell metadata test
                 if (value != undefined) {
@@ -490,6 +497,9 @@ define([
             suggestInput.setSuggestList(function() { return varList; });
             suggestInput.setNormalFilter(false);
             suggestInput.setValue(defaultValue);
+            if (obj.required === true) {
+                suggestInput.addAttribute('required', true);
+            }
             if (obj.placeholder != undefined) {
                 suggestInput.setPlaceholder(obj.placeholder);
             }
diff --git a/js/com/component/DataSelector.js b/js/com/component/DataSelector.js
@@ -23,6 +23,8 @@ define([
     //     type: 'data',
     //     pageThis: this,
     //     id: 'targetId',
+    //     classes: '',
+    //     placeholder: '',
     //     select: function(value, dtype) {
     //         ;
     //     }
@@ -56,6 +58,7 @@ define([
                 // additional options
                 classes: '',
                 placeholder: 'Select variable',
+                required: false,
                 ...this.prop
             }
 
@@ -338,7 +341,9 @@ define([
             }
             return `
                 <div class="vp-ds-box vp-ds-box-${this.uuid} vp-ds-uninit">
-                    <input type="text" class="vp-ds-target vp-input vp-state ${this.prop.classes}" id="${this.prop.id}" value="${value}" placeholder="${this.prop.placeholder}"/>
+                    <input type="text" class="vp-ds-target vp-input vp-state ${this.prop.classes}" 
+                            id="${this.prop.id}" value="${value}" 
+                            placeholder="${this.prop.placeholder}" ${this.prop.required?'required="required"':''}/>
                     <span class="vp-ds-filter"><img src="/nbextensions/visualpython/img/filter.svg"/></span>
                 </div>
             `;
diff --git a/js/com/component/PopupComponent.js b/js/com/component/PopupComponent.js
@@ -376,8 +376,10 @@ define([
                         }
                         break;
                     case 'run':
-                        that.save();
-                        that.run();
+                        let result = that.run();
+                        if (result) {
+                            that.save();
+                        }
                         break;
                     case 'show-detail':
                         $(that.wrapSelector('.vp-popup-run-detailbox')).show();
@@ -396,8 +398,10 @@ define([
                         that.save();
                         break;
                     case 'add':
-                        that.save();
-                        that.run(false);
+                        let result = that.run(false);
+                        if (result) {
+                            that.save();
+                        }
                         break;
                 }
             });
@@ -698,7 +702,35 @@ define([
             return sigText;
         }
 
+        /**
+         * Check if required option is filled
+         * @returns true if it's ok / false if there is empty required option
+         */
+        checkRequiredOption() {
+            let requiredFilled = true;
+            let requiredTags = $(this.wrapSelector('input[required=true],input[required=required]'));
+
+            if (requiredTags) {
+                for (let i = 0; i < requiredTags.length; i++) {
+                    let thisTag = $(requiredTags[i]);
+                    // if it's visible and empty, focus on it
+                    if (thisTag.is(':visible') && thisTag.val() == '') {
+                        $(requiredTags[i]).focus();
+                        requiredFilled = false;
+                        break;
+                    }
+                }
+            }
+
+            return requiredFilled;
+        }
+
         run(execute=true, addcell=true) {
+            // check required
+            if (this.checkRequiredOption() === false) {
+                return null;
+            }
+
             let code = this.generateCode();
             let mode = this.config.executeMode;
             let sigText = this.getSigText();
diff --git a/js/m_apps/Bind.js b/js/m_apps/Bind.js
@@ -407,6 +407,7 @@ define([
             variableInput.setSuggestList(function () { return mappedList; });
             variableInput.setNormalFilter(true);
             variableInput.setValue(defaultValue);
+            variableInput.addAttribute('required', true);
             $(this.wrapSelector('#' + id)).replaceWith(function() {
                 return variableInput.toTagString();
             });
diff --git a/js/m_apps/File.js b/js/m_apps/File.js
@@ -310,19 +310,19 @@ define([
                     );
                 } else if (selectedType == 'pickle') {
                     $(prefix + '#path').parent().html(
-                        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>'
+                        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>'
                         , 'vp-file-browser-button')
                     );
                 } else {
                     $(this.fileState[pageType]['fileResultState']['pathInputId']).parent().html(
-                        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>'
+                        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>'
                             , 'i1'
                             , 'vp-file-browser-button')
                     );
                 }
             } else {
                 $(this.fileState[pageType]['fileResultState']['pathInputId']).parent().html(
-                    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>'
+                    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>'
                         , 'i0'
                         , 'vp-file-browser-button')
                 );
diff --git a/js/m_apps/Frame.js b/js/m_apps/Frame.js
@@ -545,6 +545,7 @@ define([
             variableInput.addClass('vp-state');
             variableInput.setPlaceholder('Select variable');
             variableInput.setSuggestList(function () { return mappedList; });
+            variableInput.addAttribute('required', true);
             variableInput.setSelectEvent(function (value) {
                 $(this.wrapSelector()).val(value);
                 $(this.wrapSelector()).trigger('change');
diff --git a/js/m_apps/Groupby.js b/js/m_apps/Groupby.js
@@ -395,6 +395,7 @@ define([
             variableInput.setPlaceholder('Select variable');
             variableInput.setSuggestList(function () { return mappedList; });
             variableInput.setNormalFilter(true);
+            variableInput.addAttribute('required', true);
             variableInput.setValue(defaultValue);
 
             return variableInput.toTagString();
diff --git a/js/m_apps/Profiling.js b/js/m_apps/Profiling.js
@@ -62,6 +62,11 @@ define([
 
             // click menu
             $(this.wrapSelector('.vp-pf-menu-item')).on('click', function() {
+                // check required filled
+                if (that.checkRequiredOption() === false) {
+                    return ;
+                }
+
                 var type = $(this).data('type');
                 var df = $(that.wrapSelector('#vp_pfVariable')).val();
                 var saveas = $(that.wrapSelector('#vp_pfReturn')).val();
@@ -204,6 +209,7 @@ define([
             variableInput.setPlaceholder('Select variable');
             variableInput.setSuggestList(function () { return mappedList; });
             variableInput.setNormalFilter(true);
+            variableInput.addAttribute('required', true);
             variableInput.setValue(beforeValue);
 
             return variableInput.toTagString();
diff --git a/js/m_apps/Reshape.js b/js/m_apps/Reshape.js
@@ -353,6 +353,7 @@ define([
             variableInput.setSuggestList(function () { return mappedList; });
             variableInput.setNormalFilter(true);
             variableInput.setValue(defaultValue);
+            variableInput.addAttribute('required', true);
             $(this.wrapSelector('#' + id)).replaceWith(function() {
                 return variableInput.toTagString();
             });
diff --git a/js/m_apps/Subset.js b/js/m_apps/Subset.js
@@ -756,6 +756,7 @@ define([
                     });
                     variableInput.setNormalFilter(true);
                     variableInput.setValue(prevValue);
+                    variableInput.addAttribute('required', true);
                     $(that.wrapSelector('.' + VP_DS_PANDAS_OBJECT)).replaceWith(function() {
                         return variableInput.toTagString();
                     });
diff --git a/js/m_ml/dataSplit.js b/js/m_ml/dataSplit.js
diff --git a/js/m_ml/evaluation.js b/js/m_ml/evaluation.js
diff --git a/js/m_visualize/Chart.js b/js/m_visualize/Chart.js
diff --git a/js/m_visualize/WordCloud.js b/js/m_visualize/WordCloud.js
