Domain Auto Complete Selector

vj4/handler/domain.py

@@ -17,6 +17,8 @@
 from vj4.handler import base
 from vj4.handler import training as training_handler
 from vj4.util import validator
+from vj4.util import misc
+from vj4.util import options
 
 
 @app.route('/', 'domain_main')
@@ -343,3 +345,26 @@ async def post_add(self, *, role: str):
   async def post_delete(self, *, role: str):
     await domain.delete_roles(self.domain_id, (await self.request.post()).getall('role'))
     self.json_or_redirect(self.url)
+
+
+@app.route('/domain/search', 'domain_search')
+class DomainSearchHandler(base.Handler):
+  def modify_ddoc(self, ddict, key):
+    ddoc = ddict[key]
+    gravatar_url = options.cdn_prefix.rstrip('/') + '/img/team_avatar.png'
+    if ddoc.get('gravatar', ''):
+      gravatar_url = misc.gravatar_url(ddoc['gravatar'])
+
+    ddict[key] = {**ddoc,
+                  'gravatar_url': gravatar_url}
+
+  @base.require_priv(builtin.PRIV_USER_PROFILE)
+  @base.get_argument
+  @base.route_argument
+  @base.sanitize
+  async def get(self, *, q: str):
+    ddocs = await domain.get_prefix_search(q, domain.PROJECTION_PUBLIC, 20)
+
+    for i in range(len(ddocs)):
+      self.modify_ddoc(ddocs, i)
+    self.json(ddocs)

vj4/model/domain.py

@@ -11,7 +11,11 @@
 from vj4.util import argmethod
 from vj4.util import validator
 
-PROJECTION_PUBLIC = {'uid': 1}
+PROJECTION_PUBLIC = {
+  '_id': 1,
+  'name': 1,
+  'gravatar': 1
+}
 
 
 @argmethod.wrap
@@ -318,12 +322,25 @@ def get_join_settings(ddoc, now):
   return join_settings
 
 
+@argmethod.wrap
+async def get_prefix_search(prefix: str, fields={}, limit: int=50):
+  regex = r'\A\Q{0}\E'.format(prefix.replace(r'\E', r'\E\\E\Q'))
+  coll = db.coll('domain')
+  udocs = await coll.find({'$or': [{'_id': {'$regex': regex}},
+                                   {'name': {'$regex': regex}}]},
+                          projection=fields) \
+                    .limit(limit) \
+                    .to_list()
+  return udocs
+
+
 @argmethod.wrap
 async def ensure_indexes():
   coll = db.coll('domain')
   await coll.create_index('owner_uid')
   user_coll = db.coll('domain.user')
   await user_coll.create_index('uid')
+  await user_coll.create_index('name')
   await user_coll.create_index([('domain_id', 1),
                                 ('uid', 1)], unique=True)
   await user_coll.create_index([('domain_id', 1),

vj4/model/user.py

@@ -195,7 +195,7 @@ async def set_default(uid: int):
 @argmethod.wrap
 async def get_prefix_list(prefix: str, fields=PROJECTION_VIEW, limit: int=50):
   prefix = prefix.lower()
-  regex = '\\A\\Q{0}\\E'.format(prefix.replace('\\E', '\\E\\\\E\\Q'))
+  regex = r'\A\Q{0}\E'.format(prefix.replace(r'\E', r'\E\\E\Q'))
   coll = db.coll('user')
   udocs = await coll.find({'uname_lower': {'$regex': regex}}, projection=fields) \
                     .limit(limit) \

vj4/ui/components/autocomplete/DomainSelectAutoComplete.js

@@ -0,0 +1,43 @@
+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(domain) {
+  return domain._id;
+}
+
+function getItems(val) {
+  return request.get('/domain/search', { q: val });
+}
+
+function renderItem(domain) {
+  return tpl`
+    <div class="media">
+      <div class="media__left medium">
+        <img class="small domain-profile-avatar" src="${domain.gravatar_url}" width="30" height="30">
+      </div>
+      <div class="media__body medium">
+        <div class="domain-select__name">${domain.name}</div>
+        <div class="domain-select__id">ID = ${domain._id}</div>
+      </div>
+    </div>
+  `;
+}
+
+export default class DomainSelectAutoComplete extends AutoComplete {
+  static DOMAttachKey = 'vjDomainSelectAutoCompleteInstance';
+
+  constructor($dom, options) {
+    super($dom, {
+      classes: 'domain-select',
+      items: getItems,
+      render: renderItem,
+      text: getText,
+      ...options,
+    });
+  }
+}
+
+_.assign(DomainSelectAutoComplete, DOMAttachedObject);

vj4/ui/components/autocomplete/domainselectautocomplete.page.styl

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

vj4/ui/pages/problem_copy.page.js

@@ -0,0 +1,8 @@
+import { NamedPage } from 'vj/misc/PageLoader';
+import DomainSelectAutoComplete from 'vj/components/autocomplete/DomainSelectAutoComplete';
+
+const page = new NamedPage('problem_copy', async () => {
+  const domainSelector = DomainSelectAutoComplete.getOrConstruct($('.section__body [name="src_domain_id"]'));
+});
+
+export default page;

vj4/ui/pages/problem_detail.page.js

@@ -3,6 +3,7 @@ import { NamedPage } from 'vj/misc/PageLoader';
 import Navigation from 'vj/components/navigation';
 import Notification from 'vj/components/notification';
 import { ConfirmDialog, ActionDialog } from 'vj/components/dialog';
+import DomainSelectAutoComplete from 'vj/components/autocomplete/DomainSelectAutoComplete';
 import loadReactRedux from 'vj/utils/loadReactRedux';
 import delay from 'vj/utils/delay';
 import request from 'vj/utils/request';
@@ -210,22 +211,23 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     $('.loader-container').hide();
   }
 
+  const domainSelector = DomainSelectAutoComplete.getOrConstruct($('.dialog__body--copy-to [name="domain_id"]'));
   const copyProblemToDialog = new ActionDialog({
     $body: $('.dialog__body--copy-to > div'),
     onDispatch(action) {
-      const $domainId = copyProblemToDialog.$dom.find('[name="domain_id"]');
-      if (action === 'ok' && $domainId.val() === '') {
-        $domainId.focus();
+      if (action === 'ok' && domainSelector.value() === null) {
+        domainSelector.focus();
         return false;
       }
       return true;
     },
   });
   copyProblemToDialog.clear = function () {
-    this.$dom.find('[name="domain_id"]').val('');
+    domainSelector.clear();
     return this;
   };
 
+
   async function handleClickCopyProblem() {
     const action = await copyProblemToDialog.clear().open();
     if (action !== 'ok') {

vj4/ui/templates/problem_copy.html

@@ -9,7 +9,7 @@
             <div class="medium-8 columns">
               <label>
                 {{ _('Copy from') }}
-                <input name="src_domain_id" placeholder="{{ _('Domain ID') }}" class="textbox" autofocus>
+                <input name="src_domain_id" placeholder="{{ _('Domain ID') }}" class="textbox" autocomplete="off">
               </label>
             </div>
             <div class="medium-2 columns">