feat(admin/pages/admins): 添加 New 页面

issue9 · Oct 26, 2024 · ea19aa2 · ea19aa2
1 parent a74e0e6
commit ea19aa2
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 5 deletions.
diff --git a/admin/src/components/form/choice/choice.tsx b/admin/src/components/form/choice/choice.tsx
@@ -89,14 +89,11 @@ export default function <T extends Value, M extends boolean>(props: Props<T, M>)
             }}>
                 <input tabIndex={props.tabindex} class="hidden peer" disabled={props.disabled} readOnly={props.readonly} />
                 <div class="input">
-                    <Switch>
-                        <Match when={props.accessor.getValue() === undefined || (props.multiple && (props.accessor.getValue() as Array<T>).length === 0)}>
-                            <span class="placeholder" innerHTML={props.placeholder ?? '&#160;'} />
-                        </Match>
+                    <Switch fallback={<span class="placeholder" innerHTML={props.placeholder ?? '&#160;'} />}>
                         <Match when={props.multiple && (props.accessor.getValue() as Array<T>).length > 0}>
                             <MultipleActivator access={props.accessor as Accessor<Array<T>>} />
                         </Match>
-                        <Match when={!props.multiple}><SingleActivator access={props.accessor as Accessor<T>} /></Match>
+                        <Match when={!props.multiple && props.accessor.getValue()}><SingleActivator access={props.accessor as Accessor<T>} /></Match>
                     </Switch>
                 </div>
                 <Icon class="expand" icon="expand_all" />

diff --git a/admin/src/messages/cmn-Hans.ts b/admin/src/messages/cmn-Hans.ts
@@ -117,6 +117,7 @@ const messages: Messages = {
                 name: '姓名',
                 nickname: '昵称',
                 resetPassword: '重置密码',
+                addSuccessful: '添加成功',
                 areYouSureResetPassword: '确定要重置用户的登录密码？',
                 successfullyResetPassword: '重置密码成功',
                 lockUser: '锁定该用户',

diff --git a/admin/src/messages/en.ts b/admin/src/messages/en.ts
@@ -115,6 +115,7 @@ const messages = {
                 name: 'name',
                 nickname: 'nick name',
                 resetPassword: 'Reset password',
+                addSuccessful: 'Add user successful',
                 areYouSureResetPassword: 'Are you sure reset user password',
                 successfullyResetPassword: 'Successfully reset password',
                 lockUser: 'Lock user',

diff --git a/admin/src/pages/admins/index.ts b/admin/src/pages/admins/index.ts
@@ -6,11 +6,13 @@ import { MenuItem, Route } from '@/app/options/route';
 import { Pages } from '@/pages/pages';
 import { default as Admins } from './admins';
 import { default as Edit } from './edit';
+import { default as New } from './new';
 import { SexSelector, StateSelector } from './selector';
 
 export class admins implements Pages {
     static Admins = Admins;
     static Edit = Edit;
+    static New = New;
 
     static SexSelector = SexSelector;
 
@@ -29,6 +31,7 @@ export class admins implements Pages {
     routes(): Array<Route> {
         return [
             { path: this.#prefix, component: ()=>Admins({routePrefix: this.#prefix}) },
+            { path: this.#prefix + '/0', component: New },
             { path: this.#prefix + '/:id', component: Edit },
         ];
     }

diff --git a/admin/src/pages/admins/new.tsx b/admin/src/pages/admins/new.tsx
@@ -0,0 +1,43 @@
+// SPDX-FileCopyrightText: 2024 caixw
+//
+// SPDX-License-Identifier: MIT
+
+import { useNavigate } from '@solidjs/router';
+import { JSX } from 'solid-js';
+import { unwrap } from 'solid-js/store';
+
+import { useApp } from '@/app';
+import { Button, Form, FormAccessor, Page, Password, TextField } from '@/components';
+import { roles } from '@/pages/roles';
+import { SexSelector } from './selector';
+import { Admin, Sex, zeroAdmin } from './types';
+
+export default function(): JSX.Element {
+    const ctx = useApp();
+    const nav = useNavigate();
+
+    const form = new FormAccessor<Admin>(zeroAdmin(), ctx, async (obj) => {
+        const o = unwrap(obj);
+        delete o.id;
+        delete o.created;
+        return await ctx.api.post('/admins', obj);
+    }, () => {
+        ctx.notify(ctx.locale().t('_i.page.admin.addSuccessful'), undefined, 'success');
+        nav(-1);
+    });
+
+    return <Page title="_i.page.admin.admin" class="max-w-xs">
+        <Form formAccessor={form} class="flex flex-col">
+            <TextField class='w-full' accessor={form.accessor<string>('username')} label={ctx.locale().t('_i.page.current.username')} />
+            <TextField class='w-full' accessor={form.accessor<string>('name')} label={ctx.locale().t('_i.page.admin.name')} />
+            <TextField class='w-full' accessor={form.accessor<string>('nickname')} label={ctx.locale().t('_i.page.admin.nickname')} />
+            <Password class='w-full' autocomplete='new-password' accessor={form.accessor<string>('password')} label={ctx.locale().t('_i.page.current.password')} />
+            <roles.Selector class="w-full" multiple accessor={form.accessor<Array<string>>('roles')} label={ctx.locale().t('_i.page.roles.roles')} />
+            <SexSelector class='w-full' accessor={form.accessor<Sex>('sex')} />
+            <div class="w-full flex justify-end gap-5">
+                <Button type="button" palette='secondary' onClick={()=>nav(-1)}>{ctx.locale().t('_i.cancel')}</Button>
+                <Button type="submit" palette='primary'>{ctx.locale().t('_i.ok')}</Button>
+            </div>
+        </Form>
+    </Page>;
+}