feat: 创建群组对话框

client/ui/App.tsx

@@ -21,6 +21,7 @@ import useAsyncEffect from "./useAsyncEffect.ts"
 import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx"
 import Chat from "../api/client_data/Chat.ts"
 import AddContactDialog from './dialog/AddContactDialog.tsx'
+import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 import DataCaches from "../api/DataCaches.ts"
 
@@ -62,6 +63,7 @@ export default function App() {
     const [userInfo, setUserInfo] = React.useState(null as unknown as User)
 
     const addContactDialogRef = React.useRef<Dialog>(null)
+    const createGroupDialogRef = React.useRef<Dialog>(null)
 
     const chatInfoDialogRef = React.useRef<Dialog>(null)
     const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
@@ -152,6 +154,9 @@ export default function App() {
 
             <AddContactDialog
                 addContactDialogRef={addContactDialogRef} />
+                
+            <CreateGroupDialog
+                createGroupDialogRef={createGroupDialogRef} />
 
             <mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
                 <mdui-button-icon slot="top">
@@ -179,6 +184,7 @@ export default function App() {
                     <ContactsList
                         openChatInfoDialog={openChatInfoDialog}
                         addContactDialogRef={addContactDialogRef as any}
+                        createGroupDialogRef={createGroupDialogRef}
                         display={navigationItemSelected == "Contacts"} />
                 }
             </div>

client/ui/AppMobile.tsx

@@ -20,6 +20,7 @@ import useAsyncEffect from "./useAsyncEffect.ts"
 import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx"
 import Chat from "../api/client_data/Chat.ts"
 import AddContactDialog from './dialog/AddContactDialog.tsx'
+import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 import DataCaches from "../api/DataCaches.ts"
 
@@ -58,6 +59,7 @@ export default function AppMobile() {
     })
 
     const addContactDialogRef = React.useRef<Dialog>(null)
+    const createGroupDialogRef = React.useRef<Dialog>(null)
 
     const chatInfoDialogRef = React.useRef<Dialog>(null)
     const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
@@ -176,6 +178,9 @@ export default function AppMobile() {
 
             <AddContactDialog
                 addContactDialogRef={addContactDialogRef} />
+                
+            <CreateGroupDialog
+                createGroupDialogRef={createGroupDialogRef} />
 
             <mdui-top-app-bar style={{
                 position: 'sticky',
@@ -221,6 +226,7 @@ export default function AppMobile() {
                     <ContactsList
                         openChatInfoDialog={openChatInfoDialog}
                         addContactDialogRef={addContactDialogRef as any}
+                        createGroupDialogRef={createGroupDialogRef}
                         display={navigationItemSelected == "Contacts"} />
                 }
             </div>

client/ui/dialog/CreateGroupDialog.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { Button, Dialog, TextField } from "mdui"
+import useEventListener from "../useEventListener.ts"
+import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
+import Client from "../../api/Client.ts"
+
+import * as CryptoJS from 'crypto-js'
+import data from "../../Data.ts"
+import EventBus from "../../EventBus.ts"
+
+interface Refs {
+    createGroupDialogRef: React.MutableRefObject<Dialog | null>
+}
+
+export default function CreateGroupDialog({
+    createGroupDialogRef,
+}: Refs) {
+    const inputGroupNameRef = React.useRef<TextField>(null)
+    const inputGroupIdRef = React.useRef<TextField>(null)
+
+    async function createGroup() {
+        const re = await Client.invoke("Chat.createGroup", {
+            title: inputGroupNameRef.current!.value,
+            id: inputGroupIdRef.current!.value,
+            token: data.access_token,
+        })
+
+        if (checkApiSuccessOrSncakbar(re, "添加失敗")) return
+        snackbar({
+            message: "创建成功!",
+            placement: "top",
+        })
+        EventBus.emit('ContactsList.updateContacts')
+
+        inputGroupNameRef.current!.value = ''
+        inputGroupIdRef.current!.value = ''
+        createGroupDialogRef.current!.open = false
+    }
+
+    return (
+        <mdui-dialog close-on-overlay-click close-on-esc headline="创建群组" ref={createGroupDialogRef}>
+            <mdui-text-field clearable label="群组名称" ref={inputGroupNameRef as any} onKeyDown={(event) => {
+                if (event.key == 'Enter')
+                    inputGroupIdRef.current!.click()
+            }}></mdui-text-field>
+            <mdui-text-field style={{ marginTop: "10px", }} clearable label="群组 ID (可选)" ref={inputGroupIdRef as any} onKeyDown={(event) => {
+                if (event.key == 'Enter')
+                    createGroup()
+            }}></mdui-text-field>
+            <mdui-button slot="action" variant="text" onClick={() => createGroupDialogRef.current!.open = false}>取消</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={() => createGroup()}>创建</mdui-button>
+        </mdui-dialog>
+    )
+}