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

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

@@ -3,9 +3,9 @@ import moment from 'moment';
 import LanguageSelectAutoComplete from 'vj/components/autocomplete/LanguageSelectAutoComplete';
 import ProblemSelectAutoComplete from 'vj/components/autocomplete/ProblemSelectAutoComplete';
 import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
-import { ConfirmDialog } from 'vj/components/dialog';
+import { confirm } from 'vj/components/dialog';
 import { NamedPage } from 'vj/misc/Page';
-import { i18n, request, tpl } from 'vj/utils';
+import { i18n, request } from 'vj/utils';
 
 const page = new NamedPage(['contest_edit', 'contest_create', 'homework_create', 'homework_edit'], (pagename) => {
   ProblemSelectAutoComplete.getOrConstruct($('[name="pids"]'), { multi: true, clearDefaultValue: false });
@@ -42,12 +42,11 @@ const page = new NamedPage(['contest_edit', 'contest_create', 'homework_create',
         });
       }
       const message = `Confirm deleting this ${pagename.split('_')[0]}? Its files and status will be deleted as well.`;
-      return new ConfirmDialog({
-        $body: tpl.typoMsg(i18n(message)),
-      }).open().then((action) => {
-        if (action !== 'yes') return;
-        confirmed = true;
-        ev.target.click();
+      confirm(i18n(message)).then((yes) => {
+        if (yes) {
+          confirmed = true;
+          ev.target.click();
+        }
       });
     });
     setInterval(() => {

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

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
-import { ActionDialog, ConfirmDialog, InfoDialog } from 'vj/components/dialog';
+import { ActionDialog, confirm, InfoDialog } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
 import {
@@ -101,14 +101,8 @@ const page = new NamedPage('domain_user', () => {
     if (selectedUsers === null) {
       return;
     }
-    const action = await new ConfirmDialog({
-      $body: tpl`
-        <div class="typo">
-          <p>${i18n('Confirm removing the selected users?')}</p>
-          <p>${i18n('Their account will not be deleted and they will be with the guest role until they re-join the domain.')}</p>
-        </div>`,
-    }).open();
-    if (action !== 'yes') return;
+    if (!(await confirm(`${i18n('Confirm removing the selected users?')}
+${i18n('Their account will not be deleted and they will be with the guest role until they re-join the domain.')}`))) return;
     try {
       await request.post('', {
         operation: 'kick',

packages/ui-default/pages/problem_config.page.tsx

@@ -3,14 +3,14 @@ import $ from 'jquery';
 import yaml from 'js-yaml';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { ConfirmDialog } from 'vj/components/dialog/index';
+import { confirm, prompt } from 'vj/components/dialog/index';
 import Notification from 'vj/components/notification';
 import { configYamlFormat } from 'vj/components/problemconfig/ProblemConfigEditor';
 import uploadFiles from 'vj/components/upload';
 import download from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
 import {
-  i18n, loadReactRedux, pjax, request, tpl,
+  i18n, loadReactRedux, pjax, request,
 } from 'vj/utils';
 
 const page = new NamedPage('problem_config', () => {
@@ -41,8 +41,9 @@ const page = new NamedPage('problem_config', () => {
 
   async function handleClickRename(ev: JQuery.ClickEvent<Document, undefined, any, any>) {
     const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
-    // eslint-disable-next-line no-alert
-    const newName = prompt(i18n('Enter a new name for the file: '));
+    const newName = (await prompt(i18n('Enter a new name for the file: '), {
+      name: { required: true, type: 'text', autofocus: true },
+    }))?.name as string;
     if (!newName) return;
     try {
       await request.post('./files', {
@@ -60,10 +61,7 @@ const page = new NamedPage('problem_config', () => {
 
   async function handleClickRemove(ev: JQuery.ClickEvent<Document, undefined, any, any>) {
     const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
-    const action = await new ConfirmDialog({
-      $body: tpl.typoMsg(i18n('Confirm to delete the file?')),
-    }).open();
-    if (action !== 'yes') return;
+    if (!(await confirm(i18n('Confirm to delete the file?')))) return;
     try {
       await request.post('./files', {
         operation: 'delete_files',

packages/ui-default/pages/problem_detail.page.tsx

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import yaml from 'js-yaml';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { ConfirmDialog } from 'vj/components/dialog';
+import { confirm } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
@@ -316,10 +316,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
         </a>
       </li>));
       $(document).on('click', '#clearAnswers', async () => {
-        const result = await new ConfirmDialog({
-          $body: tpl.typoMsg(i18n('All changes will be lost. Are you sure to clear all answers?')),
-        }).open();
-        if (result === 'yes') await clearAns();
+        if (await confirm(i18n('All changes will be lost. Are you sure to clear all answers?'))) await clearAns();
       });
     }
     const ele = document.createElement('div');

packages/ui-default/pages/problem_files.page.tsx

@@ -4,7 +4,7 @@ import { map } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import FileSelectAutoComplete from 'vj/components/autocomplete/FileSelectAutoComplete';
-import { ActionDialog, ConfirmDialog, InfoDialog } from 'vj/components/dialog/index';
+import { ActionDialog, confirm, InfoDialog } from 'vj/components/dialog/index';
 import createHint from 'vj/components/hint';
 import Notification from 'vj/components/notification';
 import { previewFile } from 'vj/components/preview/preview.page';
@@ -255,10 +255,7 @@ const page = new NamedPage('problem_files', () => {
 
   async function handleClickRemove(ev, type) {
     const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
-    const action = await new ConfirmDialog({
-      $body: tpl.typoMsg(i18n('Confirm to delete the file?')),
-    }).open();
-    if (action !== 'yes') return;
+    if (!(await confirm(i18n('Confirm to delete the file?')))) return;
     try {
       await request.post('./files', {
         operation: 'delete_files',
@@ -275,10 +272,7 @@ const page = new NamedPage('problem_files', () => {
   async function handleClickRemoveSelected(type) {
     const selectedFiles = ensureAndGetSelectedFiles(type);
     if (selectedFiles === null) return;
-    const action = await new ConfirmDialog({
-      $body: tpl.typoMsg(i18n('Confirm to delete the selected files?')),
-    }).open();
-    if (action !== 'yes') return;
+    if (!(await confirm(i18n('Confirm to delete the selected files?')))) return;
     try {
       await request.post('', {
         operation: 'delete_files',

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

@@ -5,15 +5,14 @@ import _ from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import ProblemSelectAutoComplete from 'vj/components/autocomplete/components/ProblemSelectAutoComplete';
-import DomainSelectAutoComplete from 'vj/components/autocomplete/DomainSelectAutoComplete';
-import { ActionDialog, ConfirmDialog, Dialog } from 'vj/components/dialog';
+import { confirm, Dialog, prompt } from 'vj/components/dialog';
 import Dropdown from 'vj/components/dropdown/Dropdown';
 import createHint from 'vj/components/hint';
 import Notification from 'vj/components/notification';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
 import {
-  addSpeculationRules, delay, i18n, pjax, request, tpl,
+  addSpeculationRules, delay, i18n, pjax, request,
 } from 'vj/utils';
 
 const list = [];
@@ -177,33 +176,28 @@ function ensureAndGetSelectedPids() {
   return selectedPids;
 }
 
-let refDiv: any;
-
 async function handleOperation(operation: string) {
   const pids = ensureAndGetSelectedPids();
   if (pids === null) return;
   const payload: any = {};
   if (operation === 'delete') {
-    const action = await new ConfirmDialog({
-      $body: tpl.typoMsg(i18n('Confirm to delete the selected problems?')),
-    }).open();
-    if (action !== 'yes') return;
+    if (!(await confirm(i18n('Confirm to delete the selected problems?')))) return;
   } else if (operation === 'copy') {
-    const $target = $(refDiv).find('[name="target"]');
-    const domainSelector: any = DomainSelectAutoComplete.getOrConstruct($target);
-    const copyDialog = await new ActionDialog({
-      $body: refDiv,
-      onDispatch(action) {
-        if (action === 'ok' && domainSelector.value() === null) {
-          domainSelector.focus();
-          return false;
-        }
-        return true;
+    const res = await prompt(i18n('Copy Problems'), {
+      target: {
+        type: 'domain',
+        label: i18n('Target'),
+        required: true,
+        autofocus: true,
       },
-    }).open();
-    if (copyDialog !== 'ok') return;
-    payload.target = domainSelector.value()._id;
-    payload.hidden = $(refDiv).find('[name="hidden"]').prop('checked');
+      hidden: {
+        type: 'checkbox',
+        label: i18n('Hidden'),
+      },
+    });
+    if (!res) return;
+    payload.target = res.target;
+    payload.hidden = res.hidden;
   }
   try {
     await request.post('', { operation, pids, ...payload });
@@ -277,8 +271,8 @@ function buildSearchContainer() {
 
 async function handleDownload(ev) {
   let name = 'Export';
-  // eslint-disable-next-line no-alert
-  if (ev.shiftKey) name = prompt(i18n('Filename'), name);
+  if (ev.shiftKey) name = (await prompt(i18n('Filename'), { name: { type: 'text', default: name } }))?.name as string;
+  if (!name) return;
   const pids = ensureAndGetSelectedPids();
   if (pids) await downloadProblemSet(pids, name);
 }
@@ -414,30 +408,6 @@ const page = new NamedPage(['problem_main'], () => {
   const $body = $('body');
   $body.addClass('display-mode');
   $('.section.display-mode').removeClass('display-mode');
-  $(tpl(
-    <div style={{ display: 'none' }} className="dialog__body--problem-copy">
-      <div className="row"><div className="columns">
-        <h1>{i18n('Copy Problems')}</h1>
-      </div></div>
-      <div className="row">
-        <div className="medium-8 columns">
-          <label>
-            {i18n('Target')}
-            <div className="textbox-container">
-              <input name="target" type="text" className="textbox" data-autofocus />
-            </div>
-          </label>
-        </div>
-        <div className="medium-4 columns">
-          <label className="checkbox">
-            {i18n('Hidden')}
-            <input name="hidden" type="checkbox" />
-          </label>
-        </div>
-      </div>
-    </div>,
-  )).appendTo(document.body);
-  refDiv = $('.dialog__body--problem-copy > div');
 
   buildSearchContainer();
   buildLegacyCategoryFilter();

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);
+    }
   });
 });
 

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

@@ -1,7 +1,7 @@
 import $ from 'jquery';
-import { ConfirmDialog } from 'vj/components/dialog';
+import { confirm } from 'vj/components/dialog';
 import { NamedPage } from 'vj/misc/Page';
-import { i18n, request, tpl } from 'vj/utils';
+import { i18n, request } from 'vj/utils';
 
 export default new NamedPage('training_edit', () => {
   let confirmed = false;
@@ -13,10 +13,8 @@ export default new NamedPage('training_edit', () => {
       });
     }
     const message = 'Confirm deleting this training? Its files and status will be deleted as well.';
-    return new ConfirmDialog({
-      $body: tpl.typoMsg(i18n(message)),
-    }).open().then((action) => {
-      if (action !== 'yes') return;
+    return confirm(i18n(message)).then((yes) => {
+      if (!yes) return;
       confirmed = true;
       ev.target.click();
     });