ui: add alert/prompt/confirm helper function (#1018)

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

@@ -1,9 +1,8 @@
 import $ from 'jquery';
-import DomainSelectAutoComplete from 'vj/components/autocomplete/DomainSelectAutoComplete';
-import { ActionDialog, ConfirmDialog } from 'vj/components/dialog';
+import { confirm, prompt } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
-import { i18n, request, tpl } from 'vj/utils';
+import { i18n, request } from 'vj/utils';
 
 const page = new NamedPage([
   'problem_create', 'problem_edit', 'problem_solution', 'problem_submit',
@@ -16,53 +15,30 @@ const page = new NamedPage([
   });
   $(document).on('click', '[name="problem-sidebar__rejudge"]', (ev) => {
     ev.preventDefault();
-    new ConfirmDialog({
-      $body: tpl.typoMsg(i18n('Confirm rejudge this problem?')),
-    }).open().then((action) => {
-      if (action !== 'yes') return;
-      $(ev.currentTarget).closest('form').trigger('submit');
+    confirm(i18n('Confirm rejudge this problem?')).then((yes) => {
+      if (yes) $(ev.currentTarget).closest('form').trigger('submit');
     });
   });
-  $(document).on('click', '[name="problem-sidebar__copy"]', () => {
-    $(tpl`<div style="display: none" class="dialog__body--problem-copy">
-  <div class="row"><div class="columns">
-    <h1>${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;
+  $(document).on('click', '[name="problem-sidebar__copy"]', async () => {
+    const res = await prompt(i18n('Copy Problem'), {
+      target: {
+        type: 'domain',
+        label: i18n('Target'),
+        required: true,
+        autofocus: true,
       },
-    }).open().then(async (action) => {
-      if (action !== 'ok') return;
-      const target = $('[name="target"]').val();
-      if (!target) return;
-      try {
-        const res = await request.post('', {
-          operation: 'copy',
-          target,
-        });
-        window.location.href = res.url;
-      } catch (error) {
-        Notification.error(error.message);
-      }
     });
+    if (!res) return;
+    try {
+      const { url } = await request.post('..', {
+        operation: 'copy',
+        pids: [UiContext.pdoc.docId],
+        target: res.target,
+      });
+      window.location.href = url;
+    } catch (error) {
+      Notification.error(error.message);
+    }
   });
 });