edit user role part1

Signed-off-by: shanghaikid <jiangruiyi@gmail.com>

client/src/pages/user/Types.ts

@@ -11,10 +11,20 @@ export interface CreateUserParams {
   roles: string[];
 }
 
+export interface UpdateUserRoleParams {
+  roles: string[];
+}
+
+export interface UpdateUserRoleProps {
+  handleUpdate: (data: UpdateUserRoleParams) => void;
+  handleClose: () => void;
+  roles: string[];
+}
+
 export interface CreateUserProps {
   handleCreate: (data: CreateUserParams) => void;
   handleClose: () => void;
-  roles: Option[]
+  roles: Option[];
 }
 
 export interface UpdateUserProps {

client/src/pages/user/UpdateUserRole.tsx

@@ -0,0 +1,96 @@
+import {
+  makeStyles,
+  Theme,
+  Checkbox,
+  FormGroup,
+  FormControlLabel,
+} from '@material-ui/core';
+import { FC, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import { useFormValidation } from '@/hooks/Form';
+import { formatForm } from '@/utils/Form';
+import { UpdateUserRoleProps, UpdateUserRoleParams } from './Types';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  input: {
+    margin: theme.spacing(2, 0, 0.5),
+  },
+  dialogWrapper: {
+    maxWidth: theme.spacing(70),
+    '& .MuiFormControlLabel-root': {
+      width: theme.spacing(20),
+    },
+  },
+}));
+
+const UpdateUserRole: FC<UpdateUserRoleProps> = ({
+  handleUpdate,
+  handleClose,
+  roles,
+}) => {
+  const { t: commonTrans } = useTranslation();
+  const { t: userTrans } = useTranslation('user');
+  const { t: btnTrans } = useTranslation('btn');
+  const { t: warningTrans } = useTranslation('warning');
+
+  const [form, setForm] = useState<UpdateUserRoleParams>({
+    roles: [],
+  });
+
+  // selected Role
+  const checkedForm = useMemo(() => {
+    return formatForm(form);
+  }, [form]);
+
+  const { validation, checkIsValid, disabled } = useFormValidation(checkedForm);
+
+  const classes = useStyles();
+
+  const handleInputChange = (key: 'username' | 'password', value: string) => {
+    setForm(v => ({ ...v, [key]: value }));
+  };
+
+  const handleCreateUser = () => {
+    handleUpdate(form);
+  };
+
+  return (
+    <DialogTemplate
+      title={userTrans('createTitle')}
+      handleClose={handleClose}
+      confirmLabel={btnTrans('create')}
+      handleConfirm={handleCreateUser}
+      confirmDisabled={disabled}
+      dialogClass={classes.dialogWrapper}
+    >
+      <>
+        <FormGroup row>
+          {roles.map((r: any, index: number) => (
+            <FormControlLabel
+              control={<Checkbox />}
+              key={index}
+              label={r.label}
+              value={r.value}
+              onChange={(e: React.ChangeEvent<{}>, checked: boolean) => {
+                let newRoles = [...form.roles];
+
+                if (!checked) {
+                  newRoles = newRoles.filter(
+                    (n: string | number) => n === r.vlaue
+                  );
+                } else {
+                  newRoles.push(r.value);
+                }
+
+                setForm(v => ({ ...v, roles: [...newRoles] }));
+              }}
+            />
+          ))}
+        </FormGroup>
+      </>
+    </DialogTemplate>
+  );
+};
+
+export default UpdateUserRole;

client/src/pages/user/User.tsx

@@ -9,12 +9,14 @@ import {
   DeleteUserParams,
   UpdateUserParams,
   UserData,
+  UpdateUserRoleParams,
 } from './Types';
 import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
 import { rootContext } from '@/context/Root';
 import { useNavigationHook } from '@/hooks/Navigation';
 import { ALL_ROUTER_TYPES } from '@/router/Types';
 import CreateUser from './CreateUser';
+import UpdateUserRole from './UpdateUserRole';
 import UpdateUser from './Update';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -70,6 +72,19 @@ const Users = () => {
     handleCloseDialog();
   };
 
+  const handleUpdateUserRole = async (data: UpdateUserRoleParams) => {
+    // await UserHttp.createUser(data);
+    // console.log(data, data.roles);
+    // // assign user role if
+    // await UserHttp.updateUserRole({
+    //   username: data.username,
+    //   roles: data.roles,
+    // });
+    // fetchUsers();
+    // openSnackBar(successTrans('create', { name: userTrans('user') }));
+    // handleCloseDialog();
+  };
+
   const handleUpdate = async (data: UpdateUserParams) => {
     await UserHttp.updateUser(data);
     fetchUsers();
@@ -124,11 +139,11 @@ const Users = () => {
           type: 'custom',
           params: {
             component: (
-              <CreateUser
-                handleCreate={handleCreate}
+              <UpdateUserRole
+                handleUpdate={handleUpdateUserRole}
                 handleClose={handleCloseDialog}
                 roles={roles.results.map((r: any) => {
-                  return { label: r.role.name, value: r.role.name };
+                  return r.role.name;
                 })}
               />
             ),