ui: add selectUser api

packages/ui-default/components/navigation/navigation.page.js

@@ -1,9 +1,7 @@
 import $ from 'jquery';
 import Slideout from 'slideout';
-import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
-import { ActionDialog } from 'vj/components/dialog';
-import createHint from 'vj/components/hint';
 import Notification from 'vj/components/notification';
+import selectUser from 'vj/components/selectUser';
 import { AutoloadPage } from 'vj/misc/Page';
 import i18n from 'vj/utils/i18n';
 import request from 'vj/utils/request';
@@ -17,46 +15,16 @@ function handleNavLogoutClick(ev) {
   ev.preventDefault();
 }
 
-function handlerSwitchAccount(ev) {
+async function handlerSwitchAccount(ev) {
-  let userSelector;
-  const promise = new ActionDialog({
-    $body: tpl`
-      <div>
-        <div class="row"><div class="columns">
-          <h1 name="select_user_text">${i18n('Select User')}</h1>
-        </div></div>
-        <div class="row">
-          <div class="columns">
-            <label>
-              ${i18n('Username / UID')}
-              <input name="switch_account_target" type="text" class="textbox" autocomplete="off" data-autofocus>
-            </label>
-          </div>
-        </div>
-      </div>
-    `,
-    onDispatch(action) {
-      if (action === 'ok' && userSelector.value() === null) {
-        userSelector.focus();
-        return false;
-      }
-      return true;
-    },
-  }).open();
-  userSelector = UserSelectAutoComplete.getOrConstruct($('[name="switch_account_target"]'));
-  createHint('Hint::icon::switch_account', $('[name="select_user_text"]'));
-  promise.then(async (action) => {
-    if (action !== 'ok') return;
-    const target = userSelector.value();
-    if (!target) return;
-    try {
-      await request.get('/account', { uid: target._id });
-      window.location.reload();
-    } catch (error) {
-      Notification.error(error.message);
-    }
-  });
   ev.preventDefault();
+  const target = await selectUser('Hint::icon::switch_account');
+  if (!target) return;
+  try {
+    await request.get('/account', { uid: target._id });
+    window.location.reload();
+  } catch (error) {
+    Notification.error(error.message);
+  }
 }
 
 let $trigger;

packages/ui-default/components/selectUser.ts

@@ -0,0 +1,44 @@
+import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
+import { ActionDialog } from 'vj/components/dialog';
+import i18n from 'vj/utils/i18n';
+import tpl from 'vj/utils/tpl';
+import createHint from './hint';
+
+let inserted = false;
+
+export default async function selectUser(hint?: string) {
+  if (!inserted) {
+    const el = $(tpl`<div style="display: none" class="dialog__body--user-select">
+      <div class="row"><div class="columns">
+        <h1 name="select_user_hint">${i18n('Select User')}</h1>
+      </div></div>
+      <div class="row">
+        <div class="columns">
+          <label>${i18n('Username / UID')}
+            <input name="user" type="text" class="textbox" autocomplete="off" data-autofocus>
+          </label>
+        </div>
+      </div>
+    </div>`);
+    el.appendTo(document.body);
+    if (hint) createHint(hint, $('[name="select_user_hint"]'));
+    inserted = true;
+  }
+  const userSelector = UserSelectAutoComplete.getOrConstruct($('.dialog__body--user-select [name="user"]')) as any;
+  const userSelectDialog = new ActionDialog({
+    $body: $('.dialog__body--user-select > div'),
+    onDispatch(action) {
+      if (action === 'ok' && userSelector.value() === null) {
+        userSelector.focus();
+        return false;
+      }
+      return true;
+    },
+  });
+  userSelector.clear();
+  const action = await userSelectDialog.open();
+  if (action !== 'ok') return null;
+  return userSelector.value();
+}
+
+window.Hydro.components.selectUser = selectUser;

packages/ui-default/pages/home_messages.page.jsx

@@ -1,9 +1,8 @@
 import $ from 'jquery';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
-import { ActionDialog } from 'vj/components/dialog';
 import VjNotification from 'vj/components/notification';
+import selectUser from 'vj/components/selectUser';
 import { NamedPage } from 'vj/misc/Page';
 import api, { gql } from 'vj/utils/api';
 import loadReactRedux from 'vj/utils/loadReactRedux';
@@ -55,32 +54,12 @@ const page = new NamedPage('home_messages', () => {
       notification.show();
     };
 
-    const userSelector = UserSelectAutoComplete.getOrConstruct($('.dialog__body--user-select [name="user"]'));
-    const userSelectDialog = new ActionDialog({
-      $body: $('.dialog__body--user-select > div'),
-      onDispatch(action) {
-        if (action === 'ok' && userSelector.value() === null) {
-          userSelector.focus();
-          return false;
-        }
-        return true;
-      },
-    });
-    userSelectDialog.clear = function () {
-      userSelector.clear();
-      return this;
-    };
-
     createRoot($('#messagePad').get(0)).render(
       <Provider store={store}>
         <MessagePadApp
           onAdd={async () => {
-            const action = await userSelectDialog.clear().open();
+            const user = await selectUser();
-            if (action !== 'ok') {
+            if (user) createDialog(user);
-              return;
-            }
-            const user = userSelector.value();
-            createDialog(user);
           }}
         />
       </Provider>,

packages/ui-default/templates/home_messages.html

@@ -1,20 +1,5 @@
 {% extends "layout/home_base.html" %}
 {% block home_content %}
-<div style="display: none" class="dialog__body--user-select">
-  <div>
-    <div class="row"><div class="columns">
-      <h1>{{ _('Select User') }}</h1>
-    </div></div>
-    <div class="row">
-      <div class="columns">
-        <label>
-          {{ _('Username / UID') }}
-          <input name="user" type="text" class="textbox" autocomplete="off" data-autofocus>
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
 <div class="section">
   <div id="messagePad">
     {{ noscript_note.render() }}