From 4d6fd451a177ae632db03fa8dab41f1556525b8a Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 12 Mar 2023 15:15:33 +0800
Subject: [PATCH] feat(admin): add delete button in server entry image

---
 server/admin/app/ra/i18n/custom.ts          |  2 +
 server/admin/app/ra/routes/system/index.tsx | 84 +++++++++++++--------
 2 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/server/admin/app/ra/i18n/custom.ts b/server/admin/app/ra/i18n/custom.ts
index 5dba6d5a..2711694b 100644
--- a/server/admin/app/ra/i18n/custom.ts
+++ b/server/admin/app/ra/i18n/custom.ts
@@ -11,6 +11,7 @@ export const englishCustom = {
       operateSuccess: 'Operate Success',
       operateFailed: 'Operate Failed',
       upload: 'Upload',
+      delete: 'Delete',
     },
     menu: {
       network: 'Tailchat Network',
@@ -89,6 +90,7 @@ export const chineseCustom = {
       operateSuccess: '操作成功',
       operateFailed: '操作失败',
       upload: '上传',
+      delete: '删除',
     },
     menu: {
       network: 'Tailchat 网络',
diff --git a/server/admin/app/ra/routes/system/index.tsx b/server/admin/app/ra/routes/system/index.tsx
index dfb6c25c..999f9c91 100644
--- a/server/admin/app/ra/routes/system/index.tsx
+++ b/server/admin/app/ra/routes/system/index.tsx
@@ -1,13 +1,14 @@
 import React, { PropsWithChildren } from 'react';
 import { request } from '../../request';
 import { useRequest } from 'ahooks';
-import { CircularProgress, Box, Grid, Input } from '@mui/material';
+import { CircularProgress, Box, Grid, Input, Button } from '@mui/material';
 import { useTranslate, useNotify } from 'react-admin';
 import DoneIcon from '@mui/icons-material/Done';
 import ClearIcon from '@mui/icons-material/Clear';
 import { useEditValue } from '../../utils/hooks';
 import { Image } from '../../components/Image';
 import LoadingButton from '@mui/lab/LoadingButton';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 const SystemItem: React.FC<
   PropsWithChildren<{
@@ -70,32 +71,41 @@ export const SystemConfig: React.FC = React.memo(() => {
 
   const {
     loading: loadingServerEntryImage,
-    run: handleUploadServerEntryImage,
+    run: handleChangeServerEntryImage,
   } = useRequest(
-    async (file: File) => {
+    async (file: File | null) => {
       try {
-        const formdata = new FormData();
-        formdata.append('file', file);
-
-        const { data } = await request.put('/file/upload', formdata, {
-          headers: {
-            'Content-Type': 'multipart/form-data',
-          },
-        });
-
-        const fileInfo = data.files[0];
-
-        if (!fileInfo) {
-          throw new Error('not get file');
+        if (file) {
+          const formdata = new FormData();
+          formdata.append('file', file);
+
+          const { data } = await request.put('/file/upload', formdata, {
+            headers: {
+              'Content-Type': 'multipart/form-data',
+            },
+          });
+
+          const fileInfo = data.files[0];
+
+          if (!fileInfo) {
+            throw new Error('not get file');
+          }
+
+          const url = fileInfo.url;
+          await request.patch('/config/client', {
+            key: 'serverEntryImage',
+            value: url,
+          });
+          refresh();
+        } else {
+          // delete
+          await request.patch('/config/client', {
+            key: 'serverEntryImage',
+            value: '',
+          });
+          refresh();
         }
 
-        const url = fileInfo.url;
-        await request.patch('/config/client', {
-          key: 'serverEntryImage',
-          value: url,
-        });
-        refresh();
-
         notify('custom.common.operateSuccess', {
           type: 'info',
         });
@@ -163,20 +173,30 @@ export const SystemConfig: React.FC = React.memo(() => {
               onChange={(e) => {
                 const file = e.target.files[0];
                 if (file) {
-                  handleUploadServerEntryImage(file);
+                  handleChangeServerEntryImage(file);
                 }
               }}
             />
           </LoadingButton>
 
-          <div style={{ marginTop: 10 }}>
-            {config?.serverEntryImage && (
-              <Image
-                style={{ maxWidth: '100%', maxHeight: 360 }}
-                src={config?.serverEntryImage}
-              />
-            )}
-          </div>
+          {config?.serverEntryImage && (
+            <div style={{ marginTop: 10 }}>
+              <div>
+                <Image
+                  style={{ maxWidth: '100%', maxHeight: 360 }}
+                  src={config?.serverEntryImage}
+                />
+              </div>
+
+              <Button
+                variant="outlined"
+                startIcon={<DeleteIcon />}
+                onClick={() => handleChangeServerEntryImage(null)}
+              >
+                {translate('custom.common.delete')}
+              </Button>
+            </div>
+          )}
         </div>
       </SystemItem>
     </Box>