feat(database):imeplement database create

Author: CorrectRoadH

dashboard/src/pages/business/database/blocks/postgre.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { DatabaseConnectionConfig } from '../../../../types'
+import { DatabaseConnectConfig } from "@/api/openapi";
 import styles from '../style/blocks.module.less';
 import { Button, Card,Typography } from '@arco-design/web-react';
 const { Text, Title } = Typography;
 
 interface PostgresProps {
-    config: DatabaseConnectionConfig
+    config: DatabaseConnectConfig
 }
 const Postgres = ({config}:PostgresProps)=>{
     return (

dashboard/src/pages/business/database/blocks/redis.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { DatabaseConnectionConfig } from '../../../../types'
 import styles from '../style/blocks.module.less';
 import { Button, Card,Typography } from '@arco-design/web-react';
 const { Text, Title } = Typography;
+import { DatabaseConnectConfig } from "@/api/openapi";
 
 interface RedisProps {
-    config: DatabaseConnectionConfig
+    config: DatabaseConnectConfig
 }
 const Redis = ({config}:RedisProps)=>{
     return (

dashboard/src/pages/business/database/create-database-editor.tsx

@@ -42,13 +42,13 @@ const CreateDatabase = () => {
         form.validate().then((res)=>{
             const config:DatabaseConnectConfig = {
                 title: res.title,
-                "id": uuid(),
-                "databaseType":"redis",
-                "host": res.host,
-                "port": Number(res.port),
-                "username":"",
+                id: uuid(),
+                databaseType:"redis",
+                host: res.host,
+                port: Number(res.port),
+                username:"",
                 password: res?.password || "",
-                "database":""
+                database:""
             }
             console.log(config)
             axios.post("/admin/v1/database/test", config).then((res) => {
@@ -77,11 +77,27 @@ const CreateDatabase = () => {
             onOk={()=>{
                 form.validate().then((res)=>{
                     setConfirmLoading(true);
-                    console.log(res)
-                    createDatabase(res).then((res)=>{
+
+                    const config:DatabaseConnectConfig = {
+                        title: res?.title || "",
+                        id: uuid(),
+                        databaseType: res.type,
+                        host: res.host,
+                        port: Number(res.port),
+                        username: res?.username || "",
+                        password: res?.password || "",
+                        database: res?.database || ""
+                    }
+        
+                    console.log(config)
+                    createDatabase(config).then(()=>{
                         toast.success("create success");
+                        setConfirmLoading(false);
+                        setVisible(false);    
+                    }).catch((err)=>{
+                        toast.error(err.response.data.msg);
+                        setConfirmLoading(false);
                     })
-                    setConfirmLoading(false);
                 })
             }}
 

dashboard/src/pages/business/database/overview.tsx

@@ -1,29 +1,18 @@
-import React, { useEffect, useState } from "react";
-import { Card, Divider, Typography,Grid } from "@arco-design/web-react";
-import { DatabaseConnectionConfig } from "../../../types";
-import axios from "axios";
+import React from "react";
+import { Card, Divider, Typography,Grid, Skeleton } from "@arco-design/web-react";
 import Redis from "./blocks/redis";
 import Postgres from "./blocks/postgre";
 import CreateDatabase from "./create-database-editor";
+import { useDatabase } from "@/api";
 
 
 const { Row, Col } = Grid;
 const { Title } = Typography;
 
 const Overview = () => {
 
-    // TODO extract to a hook
-    const [data, setData] = useState<DatabaseConnectionConfig[]>([]);
-    
-    const fetchData = () => {
-        axios.get('/admin/v1/database').then((res) => {
-            setData(res.data.dataSourceConfig);
-        });
-    }
+    const {database,isLoading} = useDatabase(); 
 
-    useEffect(() => {
-        fetchData()
-    }, []);
     return (
         <Card>
             <Typography.Title heading={5}>
@@ -34,36 +23,40 @@ const Overview = () => {
 
             <Title heading={6}>Redis</Title>
 
-            <Row>
+            <Row gutter={20}>
+                <Skeleton loading={isLoading} text={{ rows: 2, width: 60 }} animation>
                 {
-                    data
+                    database
                         .filter((item) => item.databaseType === 'redis')
                         .map((item) => (
                                 <Col key={`database-item-${item.id}`} span={6}>
                                     <Redis config={item} />
                                 </Col> 
                             ))
                 }
+                </Skeleton>
             </Row>
 
             <Divider />
 
             <div>
                 <Title heading={6}>Postgres</Title>
 
-                <Row>
-                {
-                    data
-                        .filter((item) => item.databaseType === 'postgres')
-                        .map((item) => (
-                            <>  
-                                <Col key={item.id} span={6}>
-                                    <Postgres config={item} />
-                                </Col>
-                            </>
-                        ))
-                }
-            </Row>
+                <Row gutter={20}>
+                    <Skeleton loading={isLoading} text={{ rows: 2, width: 60 }} animation>
+                    {
+                        database
+                            .filter((item) => item.databaseType === 'postgres')
+                            .map((item) => (
+                                <>  
+                                    <Col key={item.id} span={6}>
+                                        <Postgres config={item} />
+                                    </Col>
+                                </>
+                            ))
+                    }
+                    </Skeleton>
+                </Row>
             </div>
 
 

dashboard/src/pages/business/workplace/business-item.tsx

@@ -1,14 +1,14 @@
 import { Button, Card, Drawer, Grid, Skeleton, Typography } from '@arco-design/web-react';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import styles from './style/overview.module.less';
 import BusinessEditor from './business-editor';
-import { BusinessType } from '../../../types/type';
+import { Business } from '@/api/openapi';
 
 const { Row, Col } = Grid;
 
 const { Title,Text } = Typography;
 interface BusinessItemProps {
-    business: BusinessType;
+    business: Business;
 }
 
 const BusinessItem = ({business}:BusinessItemProps) => {

dashboard/src/pages/business/workplace/overview.tsx

@@ -8,7 +8,6 @@ import {
 } from '@arco-design/web-react';
 import styles from './style/overview.module.less';
 import BusinessItem from './business-item';
-import { BusinessType } from '@/types';
 import CreateBusinessEditor from './create-business-editor';
 import { useBusiness } from '@/api';
 

dashboard/src/types/index.ts

@@ -9,7 +9,7 @@ interface DatabaseConnectionConfig{
     database: string;
 }
 type BusinessType = {
-    title: string;
+    title?: string;
     id: string;
     type: string;
   };

internal/adapter/in/restful/route/admin_server.go

@@ -222,7 +222,12 @@ func (a *adminApiService) GetDatabaseConfigureList(ctx echo.Context) error {
 }
 
 func (a *adminApiService) CreateDatabase(ctx echo.Context) error {
-	err := a.databaseUseCase.CreateDatabase(ctx.Request().Context(), domain.DatabaseConnectConfig{})
+	var databaseConnectConfig codegen.DatabaseConnectConfig
+	if err := ctx.Bind(&databaseConnectConfig); err != nil {
+		return ctx.JSON(http.StatusBadRequest, err)
+	}
+
+	err := a.databaseUseCase.CreateDatabase(ctx.Request().Context(), convertDatabaseConnectConfig(databaseConnectConfig))
 	if err != nil {
 		return ctx.JSON(http.StatusInternalServerError, codegen.ResponseInternalServerError{
 			Status: utils.Ptr("error"),

internal/adapter/out/admin/database_adapter.go

@@ -30,7 +30,8 @@ func NewDatabaseAdapter(config domain.PostgresConfig) out.DatabasePort {
 }
 
 func (d *DatabaseAdapter) CreateDatabaseConnectConfig(config domain.DatabaseConnectConfig) error {
-	return d.db.Create(&config).Error
+	fmt.Println(config)
+	return d.db.Create(config).Error
 }
 
 func (d *DatabaseAdapter) DatabaseConnectConfig(configId string) (domain.DatabaseConnectConfig, error) {