feat: add change user-config
This commit is contained in:
@@ -1,22 +1,18 @@
|
||||
import { Fragment, useEffect, useState } from 'react';
|
||||
import { useUserStore } from '../store';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import EditOutlined from '@ant-design/icons/EditOutlined';
|
||||
import SaveOutlined from '@ant-design/icons/SaveOutlined';
|
||||
import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
|
||||
import LeftOutlined from '@ant-design/icons/LeftOutlined';
|
||||
import PlusOutlined from '@ant-design/icons/PlusOutlined';
|
||||
import clsx from 'clsx';
|
||||
import { isObjectNull } from '@/utils/is-null';
|
||||
import { CardBlank } from '@kevisual/components/card/CardBlank.tsx';
|
||||
import { Dialog, ButtonGroup, Button, DialogContent, DialogTitle } from '@mui/material';
|
||||
import { Dialog, ButtonGroup, Button, DialogContent, DialogTitle, Tooltip } from '@mui/material';
|
||||
import { IconButton } from '@kevisual/components/button/index.tsx';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useModal } from '@kevisual/components/modal/Confirm.tsx';
|
||||
import { TextField } from '@mui/material';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { pick } from 'lodash-es';
|
||||
|
||||
import { useAdminStore } from '../admin/store/admin-store';
|
||||
import { SquareAsterisk, Edit as EditOutlined, Trash as DeleteOutlined, Plus as PlusOutlined, UserPen } from 'lucide-react';
|
||||
import { toast } from 'react-toastify';
|
||||
const FormModal = () => {
|
||||
const { control, handleSubmit, reset } = useForm();
|
||||
const userStore = useUserStore(
|
||||
@@ -30,7 +26,7 @@ const FormModal = () => {
|
||||
};
|
||||
}),
|
||||
);
|
||||
|
||||
const adminStore = useAdminStore(useShallow((state) => state));
|
||||
useEffect(() => {
|
||||
const open = userStore.showEdit;
|
||||
if (open) {
|
||||
@@ -46,7 +42,12 @@ const FormModal = () => {
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
const pickValues = pick(values, ['id', 'username', 'description']);
|
||||
userStore.updateData(pickValues);
|
||||
if (pickValues.id) {
|
||||
userStore.updateData(pickValues);
|
||||
} else {
|
||||
const newPickValues = pick(values, ['username', 'description', 'password']);
|
||||
adminStore.createNewUser(newPickValues);
|
||||
}
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
@@ -69,7 +70,7 @@ const FormModal = () => {
|
||||
}}>
|
||||
<DialogTitle>{isEdit ? t('Edit') : t('Add')}</DialogTitle>
|
||||
<DialogContent>
|
||||
<form onSubmit={handleSubmit(onFinish)}>
|
||||
<form className='flex flex-col gap-6 pt-4' onSubmit={handleSubmit(onFinish)}>
|
||||
<Controller name='username' control={control} defaultValue='' render={({ field }) => <TextField {...field} label='username' fullWidth />} />
|
||||
<Controller
|
||||
name='description'
|
||||
@@ -77,6 +78,60 @@ const FormModal = () => {
|
||||
defaultValue=''
|
||||
render={({ field }) => <TextField {...field} label='description' multiline rows={4} fullWidth />}
|
||||
/>
|
||||
{!isEdit && (
|
||||
<Controller
|
||||
name='password'
|
||||
control={control}
|
||||
defaultValue=''
|
||||
render={({ field }) => <TextField {...field} label='password' type='password' fullWidth />}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<Button type='submit' variant='contained'>
|
||||
{t('Submit')}
|
||||
</Button>
|
||||
<Button className='ml-2' type='button' onClick={onClose}>
|
||||
{t('Cancel')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
export const NameModal = () => {
|
||||
const { control, handleSubmit, reset } = useForm();
|
||||
const userStore = useUserStore(useShallow((state) => state));
|
||||
const adminStore = useAdminStore(useShallow((state) => state));
|
||||
const onFinish = async (values: any) => {
|
||||
const check = await adminStore.checkUserExist(values.username);
|
||||
if (check === false) {
|
||||
const uid = userStore.formData.id;
|
||||
if (!uid) {
|
||||
toast.error('获取用户id失败');
|
||||
return;
|
||||
}
|
||||
const res = await adminStore.changeName(uid, values.username);
|
||||
if (res.code === 200) {
|
||||
userStore.setShowNameEdit(false);
|
||||
userStore.getList();
|
||||
}
|
||||
} else {
|
||||
toast.error('用户名已存在，请重新输入');
|
||||
}
|
||||
};
|
||||
const onClose = () => {
|
||||
userStore.setShowNameEdit(false);
|
||||
reset({});
|
||||
userStore.setFormData({});
|
||||
};
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Dialog open={userStore.showNameEdit} onClose={() => userStore.setShowNameEdit(false)}>
|
||||
<DialogTitle>修改用户名</DialogTitle>
|
||||
<DialogContent>
|
||||
<form className='flex flex-col gap-6 pt-4' onSubmit={handleSubmit(onFinish)}>
|
||||
<Controller name='username' control={control} defaultValue='' render={({ field }) => <TextField {...field} label='username' fullWidth />} />
|
||||
<div>
|
||||
<Button type='submit' variant='contained'>
|
||||
{t('Submit')}
|
||||
@@ -90,7 +145,6 @@ const FormModal = () => {
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export const List = () => {
|
||||
const [modal, contextHolder] = useModal();
|
||||
const userStore = useUserStore(
|
||||
@@ -98,15 +152,16 @@ export const List = () => {
|
||||
return {
|
||||
setFormData: state.setFormData,
|
||||
setShowEdit: state.setShowEdit,
|
||||
setShowNameEdit: state.setShowNameEdit,
|
||||
list: state.list,
|
||||
deleteData: state.deleteData,
|
||||
getList: state.getList,
|
||||
loading: state.loading,
|
||||
updateData: state.updateData,
|
||||
formData: state.formData,
|
||||
};
|
||||
}),
|
||||
);
|
||||
const adminStore = useAdminStore(useShallow((state) => state));
|
||||
useEffect(() => {
|
||||
userStore.getList();
|
||||
}, []);
|
||||
@@ -119,7 +174,7 @@ export const List = () => {
|
||||
<div className='w-full h-full flex'>
|
||||
<div className='p-2'>
|
||||
<IconButton onClick={onAdd} variant='contained'>
|
||||
<PlusOutlined />
|
||||
<PlusOutlined className='w-4 h-4' />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className='flex grow overflow-hidden h-full'>
|
||||
@@ -151,27 +206,57 @@ export const List = () => {
|
||||
variant='contained'
|
||||
color='primary'
|
||||
sx={{ color: 'white', '& .MuiButton-root': { color: 'white', minWidth: '32px', width: '32px', height: '32px', padding: '6px' } }}>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
userStore.setFormData(item);
|
||||
userStore.setShowEdit(true);
|
||||
e.stopPropagation();
|
||||
}}>
|
||||
<EditOutlined />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
modal.confirm({
|
||||
title: 'Delete',
|
||||
content: 'Are you sure delete this data?',
|
||||
onOk: () => {
|
||||
userStore.deleteData(item.id);
|
||||
},
|
||||
});
|
||||
e.stopPropagation();
|
||||
}}>
|
||||
<DeleteOutlined />
|
||||
</Button>
|
||||
<Tooltip title='编辑'>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
userStore.setFormData(item);
|
||||
userStore.setShowEdit(true);
|
||||
e.stopPropagation();
|
||||
}}>
|
||||
<EditOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title='修改用户名'>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
userStore.setFormData(item);
|
||||
userStore.setShowNameEdit(true);
|
||||
e.stopPropagation();
|
||||
}}>
|
||||
<UserPen />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title='重置密码'>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
modal.confirm({
|
||||
title: '重置密码',
|
||||
content: 'Are you sure reset password?',
|
||||
onOk: () => {
|
||||
adminStore.resetPassword(item.id);
|
||||
},
|
||||
});
|
||||
e.stopPropagation();
|
||||
}}>
|
||||
<SquareAsterisk />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title='禁用'>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
modal.confirm({
|
||||
title: 'Delete',
|
||||
content: 'Are you sure delete this data?',
|
||||
onOk: async () => {
|
||||
await adminStore.deleteUser(item.id);
|
||||
userStore.getList();
|
||||
},
|
||||
});
|
||||
e.stopPropagation();
|
||||
}}>
|
||||
<DeleteOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
@@ -188,6 +273,7 @@ export const List = () => {
|
||||
</div>
|
||||
</div>
|
||||
<FormModal />
|
||||
<NameModal />
|
||||
{contextHolder}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { TextField } from '@mui/material';
|
||||
import { InputAdornment, TextField, Tooltip } from '@mui/material';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { Button } from '@mui/material';
|
||||
import { useUserStore } from '../store';
|
||||
@@ -10,6 +10,8 @@ import UploadOutlined from '@ant-design/icons/UploadOutlined';
|
||||
import PandaPNG from '@/assets/panda.png';
|
||||
import { FileUpload } from '../module/FileUpload';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Edit } from 'lucide-react';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
export const Profile = () => {
|
||||
const { t } = useTranslation();
|
||||
@@ -73,7 +75,7 @@ export const Profile = () => {
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className='w-full h-full bg-amber-50 p-4 '>
|
||||
<div className='w-full h-full bg-amber-50 p-4 text-primary'>
|
||||
<div className=' shadow-lg p-4 bg-white rounded-lg'>
|
||||
<div className='text-2xl'>{t('Profile')}</div>
|
||||
<div className='text-sm text-secondary'>{t('Edit your profile')}</div>
|
||||
@@ -87,7 +89,38 @@ export const Profile = () => {
|
||||
<Controller
|
||||
name='username'
|
||||
control={control}
|
||||
render={({ field }) => <TextField {...field} label={t('Name')} className='w-full border rounded-lg p-2' disabled />}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
label={t('Name')}
|
||||
className='w-full border rounded-lg p-2'
|
||||
disabled
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: (
|
||||
<Tooltip title={t('Apply Change Name')}>
|
||||
<InputAdornment position='end'>
|
||||
<Edit
|
||||
className='w-4 h-4 cursor-pointer text-primary'
|
||||
onClick={() => {
|
||||
console.log('onClick edit');
|
||||
toast.info('联系客服修改，因为名称和上传文件绑定了。', {
|
||||
autoClose: 20000,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</InputAdornment>
|
||||
</Tooltip>
|
||||
),
|
||||
onKeyDown: (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
// setSearch(field.value);
|
||||
}
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name='avatar'
|
||||
|
||||
Reference in New Issue
Block a user