ui: add ProblemSelectAutoComplete for contest_edit

packages/hydrooj/src/handler/problem.ts

@@ -591,9 +591,7 @@ export class ProblemCreateHandler extends Handler {
 export class ProblemPrefixListHandler extends Handler {
     @param('prefix', Types.Name)
     async get(domainId: string, prefix: string) {
-        this.response.body = {
-            pdocs: await problem.getPrefixList(domainId, prefix),
-        };
+        this.response.body = await problem.getPrefixList(domainId, prefix);
     }
 }
 

packages/ui-default/.eslintrc.js

@@ -50,19 +50,18 @@ module.exports = {
   rules: {
     // FIXME A bug with eslint-parser
     'template-curly-spacing': 'off',
-    indent: 'off',
 
     'comma-dangle': [
       'error',
       'always-multiline',
     ],
-    // indent: [
-    //   'error',
-    //   2,
-    //   {
-    //     SwitchCase: 0,
-    //   },
-    // ],
+    indent: [
+      'error',
+      2,
+      {
+        SwitchCase: 0,
+      },
+    ],
     'max-len': ['error', 150],
     quotes: 'warn',
     'class-methods-use-this': 'off',

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;

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

@@ -1,12 +0,0 @@
-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/pages/contest_edit.page.js

@@ -0,0 +1,9 @@
+import { NamedPage } from 'vj/misc/Page';
+import ProblemSelectAutoComplete from 'vj/components/autocomplete/ProblemSelectAutoComplete';
+
+const page = new NamedPage(['contest_edit', 'contest_create'], () => {
+  console.log($('[name="pids"]'));
+  ProblemSelectAutoComplete.getOrConstruct($('[name="pids"]'));
+});
+
+export default page;

packages/ui-default/templates/components/form.html

@@ -47,6 +47,7 @@
 {% set disabled = args.disabled or false %}
 {% set required = args.required or false %}
 {% set autofocus = args.autofocus or false %}
+{% set noAutocomplete = args.noAutocomplete or false %}
 {% set extra_style = args.extra_style or false %}
 {% set date = args.date or false %}
 {% set time = args.time or false %}
@@ -54,6 +55,7 @@
   {% if disabled %}disabled{% endif %}
   {% if required %}required{% endif %}
   {% if autofocus %}autofocus data-autofocus{% endif %}
+  {% if noAutocomplete %}autocomplete="off"{% endif %}
   {% if date %}data-pick-date{% endif %}
   {% if time %}data-pick-time{% endif %}
   {% if extra_style %}style="{{extra_style}}"{% endif %}

packages/ui-default/templates/contest_edit.html

@@ -62,7 +62,9 @@
                columns:null,
                label:'Problems',
                name:'pids',
-               value:pids
+               value:pids,
+               noAutocomplete:true,
+               placeholder:_("Seperated with ','")
              }) }}
           {{ form.form_textarea({
                columns:null,