fix input search issue on traceback: when search content is empty, user can not input any more.

mindinsight/ui/src/locales/en-us.json

@@ -4,6 +4,7 @@
     "browserWarning": "Your browser may cause some functions to become invalid or unavailable. You are advised to use Chrome 65 or later.",
     "timeout": "Timeout. Try again.",
     "noData": "No data",
+    "emptyData": "No data",
     "reset": "Reset",
     "tagFilterPlaceHolder": "Enter tag (regular expression supported)",
     "dataError": "The obtained data is abnormal.",

mindinsight/ui/src/locales/zh-cn.json

@@ -4,6 +4,7 @@
     "browserWarning": "您当前的浏览器可能导致部分功能失效或不可使用，建议使用Chrome 65版本以上的浏览器。",
     "timeout": "超时，请重新请求。",
     "noData": "暂无数据",
+    "emptyData": "无数据",
     "reset": "重置",
     "tagFilterPlaceHolder": "请输入需要的标签(支持正则表达式)",
     "dataError": "获取到的数据异常",

mindinsight/ui/src/mixins/modelData.vue

@@ -773,6 +773,19 @@ export default {
           list = list.concat(item.options);
         });
         this.searchOptions = list;
+        if (!this.searchOptions.length) {
+          this.$nextTick(()=>{
+            if (this.$refs.barKeyEmptyInput) {
+              this.$refs.barKeyEmptyInput.focus();
+            }
+          });
+        } else {
+          this.$nextTick(()=>{
+            if (this.$refs.barKeyInput) {
+              this.$refs.barKeyInput.focus();
+            }
+          });
+        }
       } else {
         // Model traceability drop-down box on the right
         const queryString = this.keyWord;
@@ -787,6 +800,19 @@ export default {
           list = list.concat(item.options);
         });
         this.showOptions = list;
+        if (!this.showOptions.length) {
+          this.$nextTick(()=>{
+            if (this.$refs.keyEmptyInput) {
+              this.$refs.keyEmptyInput.focus();
+            }
+          });
+        } else {
+          this.$nextTick(()=>{
+            if (this.$refs.keyInput) {
+              this.$refs.keyInput.focus();
+            }
+          });
+        }
       }
     },
 

mindinsight/ui/src/views/train-manage/data-traceback.vue

@@ -52,7 +52,8 @@ limitations under the License.
                   <div class="select-inner-input">
                     <el-input v-model="keyWord"
                               v-on:input="myfilter"
-                              :placeholder="$t('public.search')">
+                              :placeholder="$t('public.search')"
+                              ref="keyInput">
                     </el-input>
                   </div>
                   <button type="text"
@@ -79,6 +80,28 @@ limitations under the License.
                            :disabled="item.disabled"
                            :title="item.disabled ? $t('modelTraceback.mustExist') : ''">
                 </el-option>
+                <div slot="empty">
+                  <div class="select-input-button empty-container">
+                  <div class="select-inner-input">
+                    <el-input v-model="keyWord"
+                              v-on:input="myfilter"
+                              :placeholder="$t('public.search')"
+                              ref="keyEmptyInput">
+                    </el-input>
+                  </div>
+                  <button type="text"
+                          class="select-all-button"
+                          disabled>
+                    {{ $t('public.selectAll')}}
+                  </button>
+                  <button type="text"
+                          class="deselect-all-button"
+                          disabled>
+                    {{ $t('public.deselectAll')}}
+                  </button>
+                  <div class="search-no-data">{{$t('public.emptyData')}}</div>
+                </div>
+                </div>
               </el-select>
             </div>
           </div>
@@ -1473,6 +1496,19 @@ export default {
         ? this.createFilter(queryString, restaurants)
         : restaurants;
       this.checkOptions = results;
+      if (!this.checkOptions.length) {
+        this.$nextTick(()=>{
+          if (this.$refs.keyEmptyInput) {
+            this.$refs.keyEmptyInput.focus();
+          }
+        });
+      } else {
+        this.$nextTick(()=>{
+          if (this.$refs.keyInput) {
+            this.$refs.keyInput.focus();
+          }
+        });
+      }
     },
 
     /**
@@ -2137,6 +2173,16 @@ export default {
   border: none;
   background: none;
 }
+.empty-container {
+  padding-top: 6px;
+}
+.search-no-data {
+  padding: 10px 0;
+  margin: 0;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
 .btn-disabled {
   cursor: not-allowed !important;
 }

mindinsight/ui/src/views/train-manage/model-traceback.vue

@@ -72,7 +72,8 @@ limitations under the License.
                     <div class="select-inner-input">
                       <el-input v-model="barKeyWord"
                                 @input="myfilter('left')"
-                                :placeholder="$t('public.search')"></el-input>
+                                :placeholder="$t('public.search')"
+                                ref="barKeyInput"></el-input>
                     </div>
                     <button type="text"
                             @click="barAllSelect"
@@ -103,6 +104,27 @@ limitations under the License.
                                $t('modelTraceback.mustExist') : ''">
                     </el-option>
                   </el-option-group>
+                  <div slot="empty">
+                    <div class="select-input-button empty-container">
+                      <div class="select-inner-input">
+                        <el-input v-model="barKeyWord"
+                                  @input="myfilter('left')"
+                                  :placeholder="$t('public.search')"
+                                  ref="barKeyEmptyInput"></el-input>
+                      </div>
+                      <button type="text"
+                              class="select-all-button"
+                              disabled>
+                        {{$t('public.selectAll')}}
+                      </button>
+                      <button type="text"
+                              class="deselect-all-button"
+                              disabled>
+                        {{$t('public.deselectAll')}}
+                      </button>
+                      <div class="search-no-data">{{$t('public.emptyData')}}</div>
+                    </div>
+                  </div>
                 </el-select>
               </div>
             </div>
@@ -172,7 +194,8 @@ limitations under the License.
                     <div class="select-inner-input">
                       <el-input v-model="keyWord"
                                 @input="myfilter"
-                                :placeholder="$t('public.search')"></el-input>
+                                :placeholder="$t('public.search')"
+                                ref="keyInput"></el-input>
                     </div>
                     <button type="text"
                             @click="allSelect"
@@ -202,6 +225,28 @@ limitations under the License.
                                :title="item.disabled ? $t('modelTraceback.mustExist') : ''">
                     </el-option>
                   </el-option-group>
+                  <div slot="empty">
+                    <div class="select-input-button empty-container">
+                      <div class="select-inner-input">
+                        <el-input v-model="keyWord"
+                                  @input="myfilter"
+                                  :placeholder="$t('public.search')"
+                                  ref="keyEmptyInput"></el-input>
+                      </div>
+                      <button type="text"
+                              class="select-all-button"
+                              disabled>
+                        {{$t('public.selectAll')}}
+                      </button>
+                      <button type="text"
+                              @click="deselectAll"
+                              class="deselect-all-button"
+                              disabled>
+                        {{$t('public.deselectAll')}}
+                      </button>
+                      <div class="search-no-data">{{$t('public.emptyData')}}</div>
+                    </div>
+                  </div>
                 </el-select>
               </div>
               <div class="label-legend"
@@ -1825,6 +1870,16 @@ export default {
   border: none;
   background: none;
 }
+.empty-container {
+  padding-top: 6px;
+}
+.search-no-data {
+  padding: 10px 0;
+  margin: 0;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
 
 #model-traceback-con {
   display: flex;