From 0facd0b43315a9796a4cda6c3d76007893df10a7 Mon Sep 17 00:00:00 2001 From: undefined Date: Thu, 6 Oct 2022 20:15:39 +0800 Subject: [PATCH] ui: add selectUser api --- .../components/navigation/navigation.page.js | 52 ++++--------------- packages/ui-default/components/selectUser.ts | 44 ++++++++++++++++ .../ui-default/pages/home_messages.page.jsx | 27 ++-------- .../ui-default/templates/home_messages.html | 15 ------ 4 files changed, 57 insertions(+), 81 deletions(-) create mode 100644 packages/ui-default/components/selectUser.ts diff --git a/packages/ui-default/components/navigation/navigation.page.js b/packages/ui-default/components/navigation/navigation.page.js index 1f3391ee9..567efb3c0 100644 --- a/packages/ui-default/components/navigation/navigation.page.js +++ b/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) { - let userSelector; - const promise = new ActionDialog({ - $body: tpl` -
-
-

${i18n('Select User')}

-
-
-
- -
-
-
- `, - 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); - } - }); +async function handlerSwitchAccount(ev) { 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; diff --git a/packages/ui-default/components/selectUser.ts b/packages/ui-default/components/selectUser.ts new file mode 100644 index 000000000..49c384f27 --- /dev/null +++ b/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``); + 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; diff --git a/packages/ui-default/pages/home_messages.page.jsx b/packages/ui-default/pages/home_messages.page.jsx index 15ef3ba60..d8ef2a0de 100644 --- a/packages/ui-default/pages/home_messages.page.jsx +++ b/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( { - const action = await userSelectDialog.clear().open(); - if (action !== 'ok') { - return; - } - const user = userSelector.value(); - createDialog(user); + const user = await selectUser(); + if (user) createDialog(user); }} /> , diff --git a/packages/ui-default/templates/home_messages.html b/packages/ui-default/templates/home_messages.html index 6c96dd2ea..86ff50fdf 100644 --- a/packages/ui-default/templates/home_messages.html +++ b/packages/ui-default/templates/home_messages.html @@ -1,20 +1,5 @@ {% extends "layout/home_base.html" %} {% block home_content %} -
{{ noscript_note.render() }}