Ms2/iam interface

src/management-system-v2/app/(dashboard)/iam/roles/[roleId]/page.tsx

@@ -25,17 +25,17 @@ function RolePage({ params: { roleId } }: { params: { roleId: string } }) {
 
   const items: Items = role
     ? [
-        {
-          key: 'members',
-          label: 'Manage Members',
-          children: <RoleMembers role={role} isLoadingRole={isLoading} />,
-        },
-        { key: 'permissions', label: 'Permissions', children: <RolePermissions role={role} /> },
         {
           key: 'generalData',
           label: 'General Data',
           children: <RoleGeneralData roleId={roleId} />,
         },
+        { key: 'permissions', label: 'Permissions', children: <RolePermissions role={role} /> },
+        {
+          key: 'members',
+          label: 'Manage Members',
+          children: <RoleMembers role={role} isLoadingRole={isLoading} />,
+        },
       ]
     : [];
 
@@ -58,7 +58,9 @@ function RolePage({ params: { roleId } }: { params: { roleId: string } }) {
       }
     >
       <Skeleton loading={isLoading}>
-        <Tabs items={items} />
+        <div style={{ maxWidth: '800px', margin: 'auto' }}>
+          <Tabs items={items} />
+        </div>
       </Skeleton>
     </Content>
   );

src/management-system-v2/app/(dashboard)/iam/roles/header-actions.tsx

@@ -1,68 +1,34 @@
 'use client';
 
-import { ApiRequestBody, usePostAsset } from '@/lib/fetch-data';
+import { usePostAsset } from '@/lib/fetch-data';
 import { AuthCan } from '@/lib/iamComponents';
-import { ImportOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, App, Input, Modal } from 'antd';
-import { ComponentProps, FC, ReactNode, useEffect, useState } from 'react';
-
-type PostUserField = keyof ApiRequestBody<'/users', 'post'>;
-
-const modalStructureWithoutPassword: {
-  dataKey: PostUserField;
-  label: string;
-  type: string;
-}[] = [
-  {
-    dataKey: 'firstName',
-    label: 'First Name',
-    type: 'text',
-  },
-  {
-    dataKey: 'lastName',
-    label: 'Last Name',
-    type: 'text',
-  },
-  {
-    dataKey: 'username',
-    label: 'Username Name',
-    type: 'text',
-  },
-  {
-    dataKey: 'email',
-    label: 'Email',
-    type: 'email',
-  },
-];
-
-const fieldNameToLabel: Record<PostUserField, string> = modalStructureWithoutPassword.reduce(
-  (acc, curr) => {
-    acc[curr.dataKey] = curr.label;
-    return acc;
-  },
-  {} as Record<PostUserField, string>,
-);
-
-const CreateUserModal: FC<{
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Form, App, Input, Modal, DatePicker } from 'antd';
+import { FC, ReactNode, useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import germanLocale from 'antd/es/date-picker/locale/de_DE';
+import { useRouter } from 'next/navigation';
+
+type PostRoleKeys = 'name' | 'description' | 'expiration';
+
+const CreateRoleModal: FC<{
   modalOpen: boolean;
   close: () => void;
 }> = ({ modalOpen, close }) => {
   const [form] = Form.useForm();
+  const router = useRouter();
   const { message: messageApi } = App.useApp();
-  type ErrorsObject = { [field in PostUserField]?: ReactNode[] };
+  type ErrorsObject = { [field in PostRoleKeys]?: ReactNode[] };
   const [formatError, setFormatError] = useState<ErrorsObject>({});
-
-  const { mutateAsync: postUser, isLoading } = usePostAsset('/users', {
+  const { mutateAsync: postRole, isLoading } = usePostAsset('/roles', {
     onError(e) {
       if (!(typeof e === 'object' && e !== null && 'errors' in e)) {
         return;
       }
 
-      const errors: { [key in PostUserField]?: ReactNode[] } = {};
-
-      function appendError(key: PostUserField, error: string) {
-        error = error.replace(key, fieldNameToLabel[key]);
+      const errors: { [key in PostRoleKeys]?: ReactNode[] } = {};
 
+      function appendError(key: PostRoleKeys, error: string) {
         if (key in errors) {
           errors[key]!.push(<p key={errors[key]?.length}>{error}</p>);
         } else {
@@ -71,11 +37,9 @@ const CreateUserModal: FC<{
       }
 
       for (const error of e.errors as string[]) {
-        if (error.includes('username')) appendError('username', error);
-        else if (error.includes('email')) appendError('email', error);
-        else if (error.includes('firstName')) appendError('firstName', error);
-        else if (error.includes('lastName')) appendError('lastName', error);
-        else if (error.includes('password')) appendError('password', error);
+        if (error.includes('name')) appendError('name', error);
+        else if (error.includes('description')) appendError('description', error);
+        else if (error.includes('expiration')) appendError('expiration', error);
       }
 
       setFormatError(errors);
@@ -87,81 +51,58 @@ const CreateUserModal: FC<{
     setFormatError({});
   }, [form, modalOpen]);
 
-  const submitData = async (
-    values: Record<keyof ApiRequestBody<'/users', 'post'> | 'confirm_password', string>,
-  ) => {
-    debugger;
+  const submitData = async (values: Record<'name' | 'description' | 'expirationDayJs', 'post'>) => {
+    let expiration;
+    if (typeof values.expirationDayJs === 'object')
+      expiration = (values.expirationDayJs as dayjs.Dayjs).toISOString();
+
     try {
-      await postUser({
+      const newRole = await postRole({
         body: {
-          email: values.email,
-          firstName: values.firstName,
-          lastName: values.lastName,
-          username: values.username,
-          password: values.password,
+          name: values.name,
+          description: values.description,
+          expiration,
         },
       });
-      messageApi.success({ content: 'Account created' });
-      close();
+      messageApi.success({ content: 'Role created' });
+      router.push(`/iam/roles/${newRole.id}`);
     } catch (e) {
-      messageApi.error({ content: 'An error ocurred' });
+      messageApi.error({ content: 'Something went wrong' });
     }
   };
 
   return (
-    <Modal open={modalOpen} onCancel={close} footer={null}>
+    <Modal open={modalOpen} onCancel={close} footer={null} title="Create a new role">
       <Form form={form} layout="vertical" onFinish={submitData}>
-        {modalStructureWithoutPassword.map((formField) => (
-          <Form.Item
-            key={formField.dataKey}
-            label={formField.label}
-            name={formField.dataKey}
-            validateStatus={formField.dataKey in formatError ? 'error' : ''}
-            help={formField.dataKey in formatError ? formatError[formField.dataKey] : ''}
-            hasFeedback
-            required
-          >
-            <Input type={formField.type} />
-          </Form.Item>
-        ))}
+        <Form.Item
+          label="Name"
+          name="name"
+          help={formatError.name}
+          validateStatus={formatError.name && 'error'}
+        >
+          <Input />
+        </Form.Item>
 
         <Form.Item
-          name="password"
-          label="Password"
-          rules={[
-            {
-              required: true,
-              message: 'Please input your password!',
-            },
-          ]}
-          validateStatus={'password' in formatError ? 'error' : ''}
-          help={'password' in formatError ? formatError.password : ''}
-          hasFeedback
+          label="Description"
+          name="description"
+          help={formatError.description}
+          validateStatus={formatError.description && 'error'}
         >
-          <Input.Password />
+          <Input.TextArea placeholder="input placeholder" />
         </Form.Item>
 
         <Form.Item
-          name="confirm_password"
-          label="Confirm Password"
-          dependencies={['password']}
-          hasFeedback
-          rules={[
-            {
-              required: true,
-              message: 'Please confirm your password!',
-            },
-            ({ getFieldValue }) => ({
-              validator(_, value) {
-                if (!value || getFieldValue('password') === value) {
-                  return Promise.resolve();
-                }
-                return Promise.reject(new Error('The new password that you entered do not match!'));
-              },
-            }),
-          ]}
+          label="Expiration"
+          name="expirationDayJs"
+          help={formatError.expiration}
+          validateStatus={formatError.expiration && 'error'}
         >
-          <Input.Password />
+          <DatePicker
+            // NOTE german locale hard coded
+            locale={germanLocale}
+            allowClear={true}
+          />
         </Form.Item>
 
         <Form.Item>
@@ -175,17 +116,17 @@ const CreateUserModal: FC<{
 };
 
 const HeaderActions: FC = () => {
-  const [createUserModalOpen, setCreateUserModalOpen] = useState(false);
+  const [createRoleModalOpen, setCreateRoleModalOpen] = useState(false);
 
   return (
     <>
-      <CreateUserModal
-        modalOpen={createUserModalOpen}
-        close={() => setCreateUserModalOpen(false)}
+      <CreateRoleModal
+        modalOpen={createRoleModalOpen}
+        close={() => setCreateRoleModalOpen(false)}
       />
 
-      <AuthCan action="create" resource="User">
-        <Button type="primary" onClick={() => setCreateUserModalOpen(true)}>
+      <AuthCan action="create" resource="Role">
+        <Button type="primary" onClick={() => setCreateRoleModalOpen(true)}>
           <PlusOutlined /> Create
         </Button>
       </AuthCan>