ui: add ProblemSelectAutoComplete for contest_edit

packages/ui-default/components/autocomplete/ProblemSelectAutoComplete.js

@@ -2,21 +2,21 @@ import _ from 'lodash';
 import tpl from 'vj/utils/tpl';
 import request from 'vj/utils/request';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
-import AutoComplete from '.';
+import AutoComplete from './index';
 
 function getText(pdoc) {
-    return pdoc.docId;
+  return pdoc.docId;
 }
 
-function getItems(val) {
-    return request.get('/problem/list', { q: val });
+function getItems(prefix) {
+  return request.get('/problem/list', { prefix });
 }
 
 function renderItem(pdoc) {
-    return tpl`
+  return tpl`
     <div class="media">
       <div class="media__body medium">
-        <div class="problem-select__name">${pdoc.pid ? `${pdoc.pid}` : ''}${pdoc.title}</div>
+        <div class="problem-select__name">${pdoc.pid ? `${pdoc.pid} ` : ''}${pdoc.title}</div>
         <div class="problem-select__id">ID = ${pdoc.docId}</div>
       </div>
     </div>
@@ -24,18 +24,18 @@ function renderItem(pdoc) {
 }
 
 export default class ProblemSelectAutoComplete extends AutoComplete {
-    static DOMAttachKey = 'vjProblemSelectAutoCompleteInstance';
+  static DOMAttachKey = 'vjProblemSelectAutoCompleteInstance';
 
-    constructor($dom, options) {
-        super($dom, {
-            classes: 'problem-select',
-            items: getItems,
-            render: renderItem,
-            text: getText,
-            ...options,
-        });
-    }
+  constructor($dom, options) {
+    super($dom, {
+      classes: 'problem-select',
+      items: getItems,
+      render: renderItem,
+      text: getText,
+      ...options,
+    });
+  }
 }
 
 _.assign(ProblemSelectAutoComplete, DOMAttachedObject);
-window.Hydro.components.UserSelectAutoComplete = ProblemSelectAutoComplete;
+window.Hydro.components.ProblemSelectAutoComplete = ProblemSelectAutoComplete;