ui: fix selectUser (#1031)

packages/components/frontend/autocomplete/AutoComplete.tsx

@@ -126,10 +126,8 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
     else onChange(selectedKeys.filter((v) => v?.trim().length).join(','));
   };
 
-  let first = !multi;
   useEffect(() => {
-    if (first) first = false;
-    else dispatchChange();
+    dispatchChange();
     if (!multi) return; // Load pre-selected items only in multi mode
     const ids = [];
     for (const key of selectedKeys) if (!valueCache[key]) ids.push(key);
@@ -161,7 +159,6 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
       setSelectedKeys([key]);
       inputRef.current.value = key;
     }
-    dispatchChange();
     if (!shouldKeepOpen) {
       setItemList([]);
       setCurrentItem(null);

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

@@ -4,14 +4,14 @@ import PropTypes from 'prop-types';
 import { forwardRef } from 'react';
 import { api } from 'vj/utils';
 
-const UserSelectAutoComplete = forwardRef<AutoCompleteHandle<Udoc>, AutoCompleteProps<Udoc> & { byId?: boolean }>((props, ref) => (
+const UserSelectAutoComplete = forwardRef<AutoCompleteHandle<Udoc>, AutoCompleteProps<Udoc>>((props, ref) => (
   <AutoComplete<Udoc>
     ref={ref as any}
     cacheKey="user"
     queryItems={(query) => api('users', { search: query }, ['_id', 'uname', 'displayName', 'avatarUrl'])}
     fetchItems={(ids) => api('users', { auto: ids }, ['_id', 'uname', 'displayName'])}
     itemText={(user) => user.uname + (user.displayName ? ` (${user.displayName})` : '')}
-    itemKey={(user) => ((props.multi || props.byId || /^[+-]?\d+$/.test(user.uname.trim())) ? user._id.toString() : user.uname)}
+    itemKey={(user) => ((props.multi || /^[+-]?\d+$/.test(user.uname.trim())) ? user._id.toString() : user.uname)}
     renderItem={(user) => (
       <div className="media">
         <div className="media__left medium">

packages/ui-default/components/dialog/index.tsx

@@ -113,7 +113,7 @@ export class ConfirmDialog extends Dialog {
 }
 
 export interface Field {
-  type: 'text' | 'checkbox' | 'user' | 'domain';
+  type: 'text' | 'checkbox' | 'user' | 'userId' | 'username' | 'domain';
   placeholder?: string;
   label?: string;
   autofocus?: boolean;
@@ -121,13 +121,23 @@ export interface Field {
   default?: string;
 }
 
-export async function prompt<T extends string>(title: string, fields: Record<T, Field>) {
-  let valueCache: Record<T, string | number | boolean> = {} as any;
+type Result<T extends string, R extends Record<T, Field>> = {
+  [K in keyof R]: ('text' | 'password' | 'username' | 'domain') extends R[K]['type'] ? string
+    : R[K]['type'] extends 'checkbox' ? boolean
+      : R[K]['type'] extends 'userId' ? number
+        : R[K]['type'] extends 'user' ? any
+          : never;
+};
+
+export async function prompt<T extends string, R extends Record<T, Field>>(title: string, fields: R): Promise<Result<T, R>> {
+  let valueCache: Result<T, R> = {} as any;
   const defaultValues = Object.fromEntries(Object.entries(fields)
-    .map(([name, field]: [T, Field]) => [name, field.default || ''])) as Record<T, string | number | boolean>;
+    .map(([name, field]: [T, Field]) => [name, field.default || ''])) as Result<T, R>;
 
   const Component = () => {
     const [values, setValues] = React.useState(defaultValues);
+    const [selected, setSelected] = React.useState<Partial<Result<T, R>>>({});
+    const refs = React.useRef<Partial<Record<T, React.RefObject<any>>>>({});
 
     React.useEffect(() => {
       valueCache = values;
@@ -139,23 +149,27 @@ export async function prompt<T extends string>(title: string, fields: Record<T,
       </div></div>
       {Object.entries(fields).map(([name, field]: [string, Field]) => <div className="row" key={name}>
         <div className="columns">
-          {['text', 'user', 'domain'].includes(field.type) && <label>
+          {['text', 'user', 'userId', 'username', 'domain'].includes(field.type) && <label>
             {field.label}
             <div className="textbox-container">
-              {field.type === 'text'
+              {['text', 'password'].includes(field.type)
                 ? <input
-                  type="text"
+                  type={field.type}
                   className="textbox"
                   data-autofocus={field.autofocus}
                   defaultValue={field.default}
                   onChange={(e) => setValues({ ...values, [name]: e.target.value })}
                 />
-                : field.type === 'user'
+                : ['userId', 'username', 'user'].includes(field.type)
                   ? <UserSelectAutoComplete
                     data-autofocus={field.autofocus}
-                    selectedKeys={values[name] ? [values[name].toString()] : []}
-                    onChange={(e) => setValues({ ...values, [name]: +e })}
-                    byId
+                    ref={(el) => { refs.current[name] = el; }}
+                    selectedKeys={selected[name] ? [selected[name].toString()] : []}
+                    onChange={(e) => {
+                      const val = refs.current[name].getSelectedItems()[0];
+                      setValues({ ...values, [name]: field.type === 'username' ? val.uname : field.type === 'userId' ? val._id : val });
+                      setSelected({ ...selected, [name]: e });
+                    }}
                   />
                   : <DomainSelectAutoComplete
                     data-autofocus={field.autofocus}

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

@@ -18,7 +18,7 @@ async function handlerSwitchAccount(ev) {
   const target = await selectUser('Hint::icon::switch_account');
   if (!target) return;
   try {
-    const res = await request.get(`/account/${target}`);
+    const res = await request.get(`/account/${target._id}`);
     if (res.url) window.location.href = res.url;
     else window.location.reload();
   } catch (error) {

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

@@ -48,7 +48,7 @@ const page = new NamedPage('manage_user_priv', () => {
 
   async function handleClickSelectUser() {
     const target = await selectUser();
-    if (!target) return;
+    if (!target?._id) return;
     const user = await request.get(`/user/${target._id}`);
     handleOpenUserPrivDialog(user.udoc);
   }