From 7e12cbdefc7c7791f9f876fff4c03fe273145d62 Mon Sep 17 00:00:00 2001
From: xion <xiongxiao1012@outlook.com>
Date: Sat, 28 Sep 2024 13:06:48 +0800
Subject: [PATCH] feat: add edit user

---
 src/App.tsx                      |   2 +
 src/pages/user/edit/List.tsx     | 198 +++++++++++++++++++++++++++++++
 src/pages/user/index.tsx         |  14 +++
 src/pages/user/layouts/index.tsx |  46 +++++++
 src/pages/user/store/index.ts    |  69 +++++++++++
 theme                            |   2 +-
 6 files changed, 330 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/user/edit/List.tsx
 create mode 100644 src/pages/user/index.tsx
 create mode 100644 src/pages/user/layouts/index.tsx
 create mode 100644 src/pages/user/store/index.ts

diff --git a/src/App.tsx b/src/App.tsx
index ac2b3a3..8e9dbb6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import { App as CodeEditorApp } from './pages/code-editor';
 import { App as MapApp } from './pages/map';
 import { App as PromptApp } from './pages/prompt';
 import { App as AiAgentApp } from './pages/ai-agent';
+import { App as UserApp } from './pages/user';
 import '@abearxiong/container/dist/container.css';
 
 export const App = () => {
@@ -26,6 +27,7 @@ export const App = () => {
             <Route path='/map/*' element={<MapApp />} />
             <Route path='/prompt/*' element={<PromptApp />} />
             <Route path='/agent/*' element={<AiAgentApp />} />
+            <Route path='/user/*' element={<UserApp />} />
             <Route path='/404' element={<div>404</div>} />
             <Route path='*' element={<div>404</div>} />
           </Routes>
diff --git a/src/pages/user/edit/List.tsx b/src/pages/user/edit/List.tsx
new file mode 100644
index 0000000..4862107
--- /dev/null
+++ b/src/pages/user/edit/List.tsx
@@ -0,0 +1,198 @@
+import { Button, Input, message, Modal, Table } from 'antd';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+import { useUserStore } from '../store';
+import { useShallow } from 'zustand/react/shallow';
+import { Form } from 'antd';
+import { useNavigate } from 'react-router';
+import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined } from '@ant-design/icons';
+import clsx from 'clsx';
+import { isObjectNull } from '@/utils/is-null';
+import { CardBlank } from '@/components/card/CardBlank';
+
+const FormModal = () => {
+  const [form] = Form.useForm();
+  const userStore = useUserStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        updateData: state.updateData,
+        setFormData: state.setFormData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = userStore.showEdit;
+    if (open) {
+      const isNull = isObjectNull(userStore.formData);
+      if (isNull) {
+        form.setFieldsValue({});
+      } else form.setFieldsValue(userStore.formData);
+    }
+  }, [userStore.showEdit]);
+  const onFinish = async (values: any) => {
+    userStore.updateData(values);
+  };
+  const onClose = () => {
+    userStore.setShowEdit(false);
+    form.setFieldsValue({});
+    userStore.setFormData({});
+  };
+  const isEdit = userStore.formData.id;
+  return (
+    <Modal
+      title={isEdit ? 'Edit' : 'Add'}
+      open={userStore.showEdit}
+      onClose={() => userStore.setShowEdit(false)}
+      destroyOnClose
+      footer={false}
+      width={800}
+      onCancel={onClose}>
+      <Form
+        form={form}
+        onFinish={onFinish}
+        labelCol={{
+          span: 4,
+        }}
+        wrapperCol={{
+          span: 20,
+        }}>
+        <Form.Item name='id' hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item name='username' label='username'>
+          <Input />
+        </Form.Item>
+        <Form.Item name='description' label='description'>
+          <Input.TextArea rows={4} />
+        </Form.Item>
+        <Form.Item label=' ' colon={false}>
+          <Button type='primary' htmlType='submit'>
+            Submit
+          </Button>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export const List = () => {
+  const navicate = useNavigate();
+  const userStore = useUserStore(
+    useShallow((state) => {
+      return {
+        setFormData: state.setFormData,
+        setShowEdit: state.setShowEdit,
+        list: state.list,
+        deleteData: state.deleteData,
+        getList: state.getList,
+        loading: state.loading,
+        updateData: state.updateData,
+        formData: state.formData,
+      };
+    }),
+  );
+  const [codeEdit, setCodeEdit] = useState(false);
+  const [code, setCode] = useState('');
+  useEffect(() => {
+    userStore.getList();
+  }, []);
+
+  const onAdd = () => {
+    userStore.setFormData({});
+    userStore.setShowEdit(true);
+  };
+  return (
+    <div className='w-full h-full flex flex-col'>
+      <div className='flex flex-grow overflow-hidden h-full'>
+        <div className='flex-grow overflow-auto scrollbar bg-gray-100'>
+          <div className='flex  flex-wrap   gap-x-10 gap-y-4 rounded pt-10  justify-center'>
+            {userStore.list.length > 0 &&
+              userStore.list.map((item) => {
+                return (
+                  <Fragment key={item.id}>
+                    <div
+                      className='flex text-sm gap flex-col w-[400px] max-h-[400px] bg-white p-4 rounded-lg'
+                      key={item.id}
+                      onClick={() => {
+                        setCode(item.code);
+                        userStore.setFormData(item);
+                        setCodeEdit(true);
+                      }}>
+                      <div className='px-4 cursor-pointer'>
+                        <div
+                          className='font-bold'
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            // message.success('copy code success');
+                          }}>
+                          {item.username || '-'}
+                        </div>
+                        <div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div>
+                      </div>
+                      <div className='flex mt-2 '>
+                        <Button.Group>
+                          <Button
+                            onClick={(e) => {
+                              userStore.setFormData(item);
+                              userStore.setShowEdit(true);
+                              setCodeEdit(false);
+                              e.stopPropagation();
+                            }}
+                            icon={<EditOutlined />}></Button>
+                          <Button
+                            onClick={(e) => {
+                              userStore.deleteData(item.id);
+                              e.stopPropagation();
+                            }}
+                            icon={<DeleteOutlined />}></Button>
+                        </Button.Group>
+                      </div>
+                    </div>
+                  </Fragment>
+                );
+              })}
+            <CardBlank className='w-[400px]' />
+            {userStore.list.length == 0 && (
+              <div className='text-center' key={'no-data'}>
+                No Data
+              </div>
+            )}
+          </div>
+        </div>
+        <div className={clsx('bg-gray-100 border-l border-bg-slate-300 w-[600px] flex-shrink-0', !codeEdit && 'hidden', 'hidden')}>
+          <div className='bg-white  p-2'>
+            <div className='mt-2 ml-2 flex gap-2'>
+              <Button
+                onClick={() => {
+                  setCodeEdit(false);
+                  userStore.setFormData({});
+                }}
+                icon={<LeftOutlined />}></Button>
+              <Button
+                onClick={() => {
+                  console.log('save', userStore.formData);
+                  userStore.updateData({ ...userStore.formData, code });
+                }}
+                icon={<SaveOutlined />}></Button>
+            </div>
+          </div>
+          <div className='h-[94%] p-2 rounded-2 shadow-sm'>
+            <Input.TextArea
+              value={code}
+              onChange={(value) => {
+                // setCode(value);
+              }}
+              className='h-full max-h-full scrollbar'
+              style={{ overflow: 'auto' }}
+            />
+          </div>
+        </div>
+      </div>
+      <FormModal />
+    </div>
+  );
+};
diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx
new file mode 100644
index 0000000..d02cc86
--- /dev/null
+++ b/src/pages/user/index.tsx
@@ -0,0 +1,14 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { List } from './edit/List';
+import { Main } from './layouts';
+export const App = () => {
+  return (
+    <Routes>
+      <Route element={<Main />}>
+        <Route path='/' element={<Navigate to='/user/edit/list' />}></Route>
+        <Route path='edit/list' element={<List />} />
+      </Route>
+    </Routes>
+  );
+};
+
diff --git a/src/pages/user/layouts/index.tsx b/src/pages/user/layouts/index.tsx
new file mode 100644
index 0000000..378382a
--- /dev/null
+++ b/src/pages/user/layouts/index.tsx
@@ -0,0 +1,46 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { Outlet, useLocation } from 'react-router';
+import { useUserStore } from '../store';
+import { useEffect } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+
+export const Main = () => {
+  const containerStore = useUserStore(
+    useShallow((state) => {
+      return {
+        setFormData: state.setFormData,
+        setShowEdit: state.setShowEdit,
+      };
+    }),
+  );
+  const location = useLocation();
+  const isEdit = location.pathname.includes('edit/list');
+  return (
+    <div className='flex w-full h-full flex-col'>
+      <div className='layout-menu'>
+        User
+        <Button
+          className={!isEdit ? 'hidden' : 'hidden'}
+          icon={<PlusOutlined />}
+          onClick={() => {
+            console.log('add');
+            containerStore.setFormData({});
+            containerStore.setShowEdit(true);
+          }}
+        />
+      </div>
+      <div
+        className='flex'
+        style={{
+          height: 'calc(100vh - 3rem)',
+        }}>
+        <div className='flex-grow overflow-hidden'>
+          <div className='w-full h-full rounded-lg'>
+            <Outlet />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/user/store/index.ts b/src/pages/user/store/index.ts
new file mode 100644
index 0000000..8fca1cd
--- /dev/null
+++ b/src/pages/user/store/index.ts
@@ -0,0 +1,69 @@
+import { create } from 'zustand';
+import { query } from '@/modules';
+import { message } from 'antd';
+type UserStore = {
+  showEdit: boolean;
+  setShowEdit: (showEdit: boolean) => void;
+  formData: any;
+  setFormData: (formData: any) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  list: any[];
+  getList: () => Promise<void>;
+  updateData: (data: any) => Promise<void>;
+  deleteData: (id: string) => Promise<void>;
+};
+export const useUserStore = create<UserStore>((set, get) => {
+  return {
+    showEdit: false,
+    setShowEdit: (showEdit) => set({ showEdit }),
+    formData: {},
+    setFormData: (formData) => set({ formData }),
+    loading: false,
+    setLoading: (loading) => set({ loading }),
+    list: [],
+    getList: async () => {
+      set({ loading: true });
+
+      const res = await query.post({
+        path: 'user',
+        key: 'list',
+      });
+      set({ loading: false });
+      if (res.code === 200) {
+        set({ list: res.data });
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+    updateData: async (data) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'user',
+        key: 'update',
+        data,
+      });
+      if (res.code === 200) {
+        message.success('Success');
+        set({ showEdit: false, formData: [] });
+        getList();
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+    deleteData: async (id) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'user',
+        key: 'delete',
+        id,
+      });
+      if (res.code === 200) {
+        getList();
+        message.success('Success');
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+  };
+});
diff --git a/theme b/theme
index 6f6d64b..36f865b 160000
--- a/theme
+++ b/theme
@@ -1 +1 @@
-Subproject commit 6f6d64b06574609f5b468f2011d2c21600261419
+Subproject commit 36f865b026b70cd8f90a44f4d3b5f9dced9709af