Test for DataSelector component

minjk-bl · minjk-bl · commit ea6ff4bf2c43 · 2022-05-06T10:31:09.000+09:00
diff --git a/css/component/dataSelector.css b/css/component/dataSelector.css
@@ -1,4 +1,47 @@
 /* Code Preview */
+.vp-dataselector {
+    position: absolute;
+    top: calc(50% - 200px);
+    left: calc(50% - 200px);
+    width: 400px;
+    height: 400px;
+    background: white;
+    border: 1px solid var(--border-gray-color);
+    z-index: 999;
+    /* font */
+    font-family: AppleSDGothicNeo;
+    font-size: 14px;
+    color: var(--font-primary);
+}
+.vp-ds-variable-box {
+    border: 1px solid var(--border-gray-color);
+    height: 100px;
+    grid-row-gap: 0px;
+}
+.vp-ds-var-item {
+    height: 25px;
+    border-bottom: 1px solid var(--border-gray-color);
+}
+.vp-ds-var-item:hover {
+    background: var(--light-gray-color);
+    color: var(--font-hightlight);
+    cursor: pointer;
+}
+.vp-ds-var-item.selected {
+    background: var(--light-gray-color);
+    color: var(--font-hightlight);
+    font-weight: bold;
+}
+.vp-ds-var-data {
+    padding-left: 5px;
+}
+.vp-ds-var-type {
+    border-left: 1px solid var(--border-gray-color);
+    padding-left: 5px;
+}
+.vp-ds-option-box {
+
+}
 .vp-ds-preview {
     width: 100%;
     height: 35px;
diff --git a/html/component/dataSelector.html b/html/component/dataSelector.html
@@ -1,16 +1,26 @@
 <body>
-    <div>
-        <div class="vp-grid-col-p50">
-            <label>Variable</label>
-            <label>Data Type</label>
+    <div class="vp-dataselector">
+        <div class="vp-inner-popup-header">
+            <label class="vp-inner-popup-title">Data Selector</label>
+            <img class="vp-inner-popup-close" src="/nbextensions/visualpython/img/close_big.svg" title="Close data selector"/>
         </div>
-        <div class="vp-variable-box">
-            <div class="vp-grid-box">
+        <div class="vp-inner-popup-body vp-scrollbar">
+            <div class="vp-grid-col-p50">
+                <label class="vp-bold">Data</label>
+                <label class="vp-bold">Type</label>
+            </div>
+            <div class="vp-ds-variable-box vp-grid-box vp-scrollbar">
                 
             </div>
+            <div class="vp-ds-option-box">
+                Option Page
+            </div>
         </div>
-        <div class="vp-option-box">
-            
+        <div class="vp-inner-popup-footer">
+            <input type="text" /> <!-- CodeMirror needed -->
+            <div class="vp-inner-popup-button-box">
+                <button type="button" class="vp-button activated" id="vp_dsOk">OK</button>
+            </div>
         </div>
     </div>
 </body>
diff --git a/js/m_apps/SampleApp.js b/js/m_apps/SampleApp.js
@@ -16,8 +16,9 @@ define([
     'vp_base/js/com/com_util',
     'vp_base/js/com/com_Const',
     'vp_base/js/com/com_String',
-    'vp_base/js/com/component/PopupComponent'
-], function(com_util, com_Const, com_String, PopupComponent) {
+    'vp_base/js/com/component/PopupComponent',
+    'vp_base/js/com/component/DataSelector'
+], function(com_util, com_Const, com_String, PopupComponent, DataSelector) {
 
     /**
      * SampleApp
@@ -32,22 +33,29 @@ define([
             super._bindEvent();
             /** Implement binding events */
             var that = this;
-            this.$target.on('click', function(evt) {
-                var target = evt.target;
-                if ($(that.wrapSelector()).find(target).length > 0) {
-                    // Sample : getDataList from Kernel
-                    vpKernel.getDataList().then(function(resultObj) {
-                        vpLog.display(VP_LOG_TYPE.DEVELOP, resultObj);
-                    }).catch(function(err) {
-                        vpLog.display(VP_LOG_TYPE.DEVELOP, err);
-                    });
-                }
+            
+            $(this.wrapSelector('#sample')).on('click', function() {
+                let dataSelector = new DataSelector({
+                    type: 'data',
+                    target: $(that.wrapSelector('#sample')),
+                    finish: function() {
+                        
+                    }
+                });
+                dataSelector.open();
             });
         }
 
         templateForBody() {
             /** Implement generating template */
-            return 'This is sample.';
+            return `This is sample.
+            <input type="text" id="sample" class="vp-state vp-input" placeholder="Click to edit" readonly="" />`;
+        }
+
+        render() {
+            super.render();
+
+
         }
 
         generateCode() {
