ui: add ProblemSelectAutoComplete

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

@@ -0,0 +1,41 @@
+import _ from 'lodash';
+import tpl from 'vj/utils/tpl';
+import request from 'vj/utils/request';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import AutoComplete from '.';
+
+function getText(pdoc) {
+    return pdoc.docId;
+}
+
+function getItems(val) {
+    return request.get('/problem/list', { q: val });
+}
+
+function renderItem(pdoc) {
+    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__id">ID = ${pdoc.docId}</div>
+      </div>
+    </div>
+  `;
+}
+
+export default class ProblemSelectAutoComplete extends AutoComplete {
+    static DOMAttachKey = 'vjProblemSelectAutoCompleteInstance';
+
+    constructor($dom, options) {
+        super($dom, {
+            classes: 'problem-select',
+            items: getItems,
+            render: renderItem,
+            text: getText,
+            ...options,
+        });
+    }
+}
+
+_.assign(ProblemSelectAutoComplete, DOMAttachedObject);
+window.Hydro.components.UserSelectAutoComplete = ProblemSelectAutoComplete;

packages/ui-default/components/autocomplete/autoComplete.page.js

@@ -0,0 +1,12 @@
+import { AutoloadPage } from 'vj/misc/Page';
+import UserSelectAutoComplete from './UserSelectAutoComplete';
+import DomainSelectAutoComplete from './DomainSelectAutoComplete';
+import ProblemSelectAutoComplete from './ProblemSelectAutoComplete';
+
+const page = new AutoloadPage('autocomplete', () => {
+    UserSelectAutoComplete.getOrConstruct($('[autocomplete="user"]'));
+    DomainSelectAutoComplete.getOrConstruct($('[autocomplete="domain"]'));
+    ProblemSelectAutoComplete.getOrConstruct($('[autocomplete="problem"]'));
+});
+
+export default page;

packages/ui-default/components/autocomplete/problemselectautocomplete.page.styl

@@ -0,0 +1,6 @@
+.menu.problem-select
+  width: rem(200px)
+
+.problem-select__uid
+  font-size: rem($font-size-small)
+  color: $userselect-uid-color