core&ui: add new features about domain (#528)

Co-authored-by: undefined <i@undefined.moe>

- Add navigation hint
- Update homework/contest filter by assign
- Allow empty query for DomainSelectAutoComplete

packages/ui-default/components/autocomplete/components/DomainSelectAutoComplete.tsx

@@ -44,7 +44,7 @@ DomainSelectAutoComplete.defaultProps = {
   listStyle: {},
   multi: false,
   selectedKeys: [],
-  allowEmptyQuery: false,
+  allowEmptyQuery: true,
   freeSolo: false,
   freeSoloConverter: (input) => input,
 };

packages/ui-default/pages/problem_main.page.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import _ from 'lodash';
+import DomainSelectAutoComplete from 'vj/components/autocomplete/DomainSelectAutoComplete';
 import { ActionDialog, ConfirmDialog } from 'vj/components/dialog';
 import Dropdown from 'vj/components/dropdown/Dropdown';
 import createHint from 'vj/components/hint';
@@ -176,19 +177,35 @@ async function handleOperation(operation) {
     }).open();
     if (action !== 'yes') return;
   } else if (operation === 'copy') {
-    const action = await new ActionDialog({
-      $body: tpl`
-        <div class="typo">
-          <label>
-            ${i18n('Target')}
-            <div class="textbox-container">
-              <input name="target" type="text" class="textbox" data-autofocus>
-            </div>
-          </label>
+    $(tpl`
+      <div style="display: none" class="dialog__body--problem-copy">
+        <div class="row"><div class="columns">
+          <h1 name="select_user_hint">${i18n('Copy Problems')}</h1>
+        </div></div>
+        <div class="row">
+          <div class="columns">
+            <label>
+              ${i18n('Target')}
+              <div class="textbox-container">
+                <input name="target" type="text" class="textbox" data-autofocus>
+              </div>
+            </label>
+          </div>
         </div>
-      `,
+      </div>
+    `).appendTo(document.body);
+    const domainSelector = DomainSelectAutoComplete.getOrConstruct($('.dialog__body--problem-copy [name="target"]'));
+    const copyDialog = await new ActionDialog({
+      $body: $('.dialog__body--problem-copy > div'),
+      onDispatch(action) {
+        if (action === 'ok' && domainSelector.value() === null) {
+          domainSelector.focus();
+          return false;
+        }
+        return true;
+      },
     }).open();
-    if (action !== 'ok') return;
+    if (copyDialog !== 'ok') return;
     const target = $('[name="target"]').val();
     if (!target) return;
     payload.target = target;

packages/ui-default/pages/problem_sidebar.page.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import DomainSelectAutoComplete from 'vj/components/autocomplete/DomainSelectAutoComplete';
 import { ActionDialog, ConfirmDialog } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
@@ -22,17 +23,31 @@ const page = new NamedPage([
     });
   });
   $(document).on('click', '[name="problem-sidebar__copy"]', () => {
-    new ActionDialog({
-      $body: tpl`
-        <div class="typo">
-          <label>
-            ${i18n('Target')}
-            <div class="textbox-container">
-              <input name="target" type="text" class="textbox" data-autofocus>
-            </div>
-          </label>
+    $(tpl`<div style="display: none" class="dialog__body--problem-copy">
+  <div class="row"><div class="columns">
+    <h1 name="select_user_hint">${i18n('Copy Problem')}</h1>
+  </div></div>
+  <div class="row">
+    <div class="columns">
+      <label>
+      ${i18n('Target')}
+        <div class="textbox-container">
+          <input name="target" type="text" class="textbox" data-autofocus>
         </div>
-      `,
+      </label>
+    </div>
+  </div>
+</div>`).appendTo(document.body);
+    const domainSelector = DomainSelectAutoComplete.getOrConstruct($('.dialog__body--problem-copy [name="target"]')) as any;
+    new ActionDialog({
+      $body: $('.dialog__body--problem-copy > div'),
+      onDispatch(action) {
+        if (action === 'ok' && domainSelector.value() === null) {
+          domainSelector.focus();
+          return false;
+        }
+        return true;
+      },
     }).open().then(async (action) => {
       if (action !== 'ok') return;
       const target = $('[name="target"]').val();

packages/ui-default/templates/home_domain.html

@@ -33,6 +33,15 @@
             <img src="{{ avatarUrl(ddoc.avatar, 32) }}" width="32" height="32">
           </td>
           <td class="col--name">
+            <form class="form--inline" method="post">
+              <input type="hidden" name="id" value="{{ ddoc['_id'] }}">
+              {% set _show = handler.user.pinnedDomains.includes(ddoc._id) %}
+              <input type="hidden" name="operation" value="{{ "unstar" if _show else "star" }}">
+              <button class="star{% if _show %} activated{% endif %}" type="submit">
+                <span class="starred--hide"><span class="icon icon-star--outline" data-tooltip="{{ _('Star') }}"></span></span>
+                <span class="starred--show"><span class="icon icon-star" data-tooltip="{{ _('Unstar') }}"></span></span>
+              </button>
+            </form>
             {{ ddoc['name'] }} ({{ ddoc['_id'] }})
           </td>
           <td class="col--role">

packages/ui-default/templates/partials/nav.html

@@ -31,6 +31,27 @@
         </ol>
       </li>
     {% else %}
+      <li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-custom-class="nav__dropdown" data-dropdown-target="#menu-nav-domain" data-dropdown-disabledconstrainToWindow data-dropdown-trigger-desktop-only>
+        <span class="nav__item"><span class="icon"><img class="small user-profile-avatar v-center" loading="lazy" src="{{ avatarUrl(UiContext.domain.avatar|default('')) }}" width="20" height="20"></span> {{ UiContext.domain.name }} <span class="icon icon-expand_more nojs--hide"></span></span>
+        <ol class="dropdown-target menu" id="menu-nav-domain">
+          {%- if handler.user.domains|length -%}
+          {%- for ddoc in handler.user.domains -%}
+            <li class="menu__item">
+              <a href="{{ url('homepage', domainId=ddoc['_id']) }}" class="menu__link">
+                <span class="icon"><img class="small user-profile-avatar v-center" loading="lazy" src="{{ avatarUrl(ddoc.avatar|default('')) }}" width="20" height="20"></span>
+                {{ ddoc['name'] }}{% if ddoc['name'] != ddoc['_id']%} ({{ ddoc['_id'] }}){% endif %}
+              </a>
+            </li>
+          {%- endfor -%}
+          <li class="menu__seperator"></li>
+          {%- endif -%}
+          <li class="menu__item">
+            <a href="{{ url('home_domain') }}" class="menu__link">
+              <span class="icon icon-wrench"></span> {{ _('Manage') }}
+            </a>
+          </li>
+        </ol>
+      </li>
       <li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-custom-class="nav__dropdown" data-dropdown-target="#menu-nav-user" data-dropdown-disabledconstrainToWindow data-dropdown-trigger-desktop-only>
         <a href="{{ url('user_detail', uid=handler.user._id) }}" class="nav__item">{{ handler.user.uname }} <span class="icon icon-expand_more nojs--hide"></span></a>
         <ol class="dropdown-target menu" id="menu-nav-user">