feat: Drop database #1841 (#1943)

### What problem does this PR solve?

feat: Drop database #1841 

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

gui/app/(dashboard)/actions.ts

@@ -1,20 +1,18 @@
 'use server';
 
 import { ApiUrl } from '@/lib/constant/api';
-import { CreateOption } from '@/lib/constant/common';
-import { get, post } from '@/lib/request';
+import { CreateOption, DropOption } from '@/lib/constant/common';
+import { drop, get, post } from '@/lib/request';
 
-export async function deleteProduct(formData: FormData) {
-  // let id = Number(formData.get('id'));
-  // await deleteProductById(id);
-  // revalidatePath('/');
-}
-
-export async function createDatabaseAction(formData: FormData) {
-  // let id = Number(formData.get('id'));
-  // await deleteProductById(id);
-  // revalidatePath('/');
-}
+export const listDatabase = async () => {
+  try {
+    const x = await get(`${ApiUrl.databases}`);
+    console.log('🚀 ~ x:', x);
+    return x;
+  } catch (error) {
+    console.log('🚀 ~ error:', error);
+  }
+};
 
 export const createDatabase = async (params: {
   database_name: string;
@@ -31,9 +29,24 @@ export const createDatabase = async (params: {
   }
 };
 
-export const listDatabase = async () => {
+export const dropDatabase = async (params: {
+  database_name: string;
+  drop_option: DropOption;
+}) => {
   try {
-    const x = await get(`${ApiUrl.databases}`);
+    const x = await drop(`${ApiUrl.databases}/${params.database_name}`, {
+      drop_option: params.drop_option
+    });
+    console.log('🚀 ~ x:', x);
+    return x;
+  } catch (error) {
+    console.log('🚀 ~ error:', error);
+  }
+};
+
+export const showDatabase = async (params: { database_name: string }) => {
+  try {
+    const x = await get(`${ApiUrl.database}/${params.database_name}`);
     console.log('🚀 ~ x:', x);
     return x;
   } catch (error) {

gui/app/(dashboard)/database-card.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { toast } from '@/components/hooks/use-toast';
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import { DropOption } from '@/lib/constant/common';
+import { DropdownMenuItem } from '@radix-ui/react-dropdown-menu';
+import { useRouter } from 'next/navigation';
+import { dropDatabase } from './actions';
+import DeleteIcon from '/public/delete.svg';
+import MoreIcon from '/public/more.svg';
+
+export const DeleteDropdown = ({
+  children,
+  deleteItem
+}: React.PropsWithChildren<{ deleteItem: () => void }>) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem className="cursor-pointer" onClick={deleteItem}>
+          <div className="flex items-center justify-between w-full">
+            <span>Drop</span>
+            <DeleteIcon className="h-4 w-4"></DeleteIcon>
+          </div>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export function DatabaseCard({ data }: { data: string }) {
+  const router = useRouter();
+  const handleDelete = async () => {
+    const ret = await dropDatabase({
+      database_name: data,
+      drop_option: DropOption.IgnoreIfNotExists
+    });
+    if (ret.error_code === 0) {
+      router.refresh();
+      toast({
+        title: 'Drop Success',
+        description: ''
+      });
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-sm ">
+      <CardHeader className="pt-3">
+        <div className="text-right">
+          <DeleteDropdown deleteItem={handleDelete}>
+            <MoreIcon className="h-5 w-5 inline-block cursor-pointer"></MoreIcon>
+          </DeleteDropdown>
+        </div>
+        <CardTitle className="text-1xl">{data}</CardTitle>
+        <CardDescription>db description</CardDescription>
+      </CardHeader>
+    </Card>
+  );
+}

gui/app/(dashboard)/page.tsx

@@ -1,9 +1,4 @@
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardTitle
-} from '@/components/ui/card';
+import { Card, CardHeader, CardTitle } from '@/components/ui/card';
 import AddIcon from '/public/add.svg';
 
 import {
@@ -14,6 +9,7 @@ import {
   SelectValue
 } from '@radix-ui/react-select';
 import { listDatabase } from './actions';
+import { DatabaseCard } from './database-card';
 import { DatabaseCreatingDialog } from './database-creating-dialog';
 
 interface IDatabaseSelectProps {
@@ -51,12 +47,7 @@ export default async function HomePage({
   return (
     <div className="grid grid-cols-4 gap-4">
       {ret.databases.map((x: string, idx: number) => (
-        <Card className="w-full max-w-sm" key={idx}>
-          <CardHeader>
-            <CardTitle className="text-1xl">{x}</CardTitle>
-            <CardDescription>db description</CardDescription>
-          </CardHeader>
-        </Card>
+        <DatabaseCard key={idx} data={x}></DatabaseCard>
       ))}
       <Card className="w-full max-w-sm">
         <DatabaseCreatingDialog>

gui/lib/constant/api.ts

@@ -1,3 +1,4 @@
 export const ApiUrl = {
-  databases: 'databases'
+  databases: 'databases',
+  database: 'database'
 };

gui/lib/constant/common.ts

@@ -2,3 +2,8 @@ export enum CreateOption {
   Error = 'error',
   IgnoreIfExists = 'ignore_if_exists'
 }
+
+export enum DropOption {
+  Error = 'error',
+  IgnoreIfNotExists = 'ignore_if_not_exists'
+}

gui/lib/request.ts

@@ -1,4 +1,4 @@
-const baseUrl = 'http://127.0.0.1:23820/';
+const baseUrl = 'http://127.0.0.1:3000/';
 
 export const request = async (
   url: string,
@@ -34,3 +34,6 @@ export const get = (url: string, params?: Record<string, string>) =>
 
 export const post = (url: string, params: Record<string, string>) =>
   request(url, params, 'POST');
+
+export const drop = (url: string, params: Record<string, string>) =>
+  request(url, params, 'DELETE');