Add Add User Modal

toggle-corp · Feb 11, 2025 · 352b1af · 352b1af
1 parent a757f8a
commit 352b1af
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 1 deletion.
diff --git a/src/views/UserManagement/UserTable/AddUserModal/index.tsx b/src/views/UserManagement/UserTable/AddUserModal/index.tsx
@@ -0,0 +1,95 @@
+import { useCallback } from 'react';
+import {
+    emailCondition,
+    getErrorObject,
+    ObjectSchema,
+    PartialForm,
+    requiredStringCondition,
+    useForm,
+} from '@togglecorp/toggle-form';
+import {
+    Button,
+    Modal,
+    TextInput,
+} from '@togglecorp/toggle-ui';
+
+import styles from './styles.module.css';
+
+interface Props {
+    onClose: () => void;
+}
+
+type PartialFormType = PartialForm<{
+    email: string;
+}>;
+
+type FormSchema = ObjectSchema<PartialFormType>;
+type FormSchemaFields = ReturnType<FormSchema['fields']>;
+
+const AddFormSchema: FormSchema = {
+    fields: (): FormSchemaFields => ({
+        email: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [emailCondition],
+        },
+    }),
+};
+
+const defaultFormValues: PartialFormType = {};
+
+function AddUserFormModal(props: Props) {
+    const {
+        onClose,
+    } = props;
+    const {
+        value,
+        error: formError,
+        setFieldValue,
+    } = useForm(AddFormSchema, { value: defaultFormValues });
+
+    const handleFormSubmit = useCallback(() => {}, []);
+
+    const error = getErrorObject(formError);
+    return (
+        <Modal
+            heading="Add User"
+            onClose={onClose}
+            size="small"
+            footer={(
+                <div className={styles.footerContent}>
+                    <Button
+                        name="cancel"
+                        variant="default"
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        name="cancel"
+                        variant="primary"
+                    >
+                        Send
+                    </Button>
+                </div>
+
+            )}
+        >
+            <form
+                className={styles.form}
+                onSubmit={handleFormSubmit}
+            >
+                <TextInput
+                    className={styles.fullSizeInput}
+                    label="Email"
+                    name="email"
+                    autoFocus
+                    onChange={setFieldValue}
+                    value={value?.email}
+                    error={error?.email}
+                />
+            </form>
+        </Modal>
+    );
+}
+
+export default AddUserFormModal;
diff --git a/src/views/UserManagement/UserTable/AddUserModal/styles.module.css b/src/views/UserManagement/UserTable/AddUserModal/styles.module.css
@@ -0,0 +1,6 @@
+.footer-content{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--cms-ui-spacing-md);
+}
diff --git a/src/views/UserManagement/UserTable/index.tsx b/src/views/UserManagement/UserTable/index.tsx
@@ -1,4 +1,5 @@
 import {
+    useCallback,
     useMemo,
     useState,
 } from 'react';
@@ -18,6 +19,7 @@ import {
 
 import Container from '#components/Container';
 
+import AddUserFormModal from './AddUserModal';
 import UserActions from './UserActions';
 
 import styles from './styles.module.css';
@@ -79,6 +81,14 @@ const statusLabelSelector = (option: { key: string }) => option.key;
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const [page, setPage] = useState<number>(1);
+    const [showAddModal, setShowAddModal] = useState(false);
+
+    const handleAddUserFormModalClose = useCallback(
+        () => {
+            setShowAddModal(false);
+        },
+        [],
+    );
 
     const columns = useMemo(() => ([
         // FIXME : Add Element Column
@@ -153,7 +163,7 @@ export function Component() {
                     <Button
                         name="Add Content"
                         variant="primary"
-                        onClick={() => { }}
+                        onClick={() => setShowAddModal(true)}
                         icons={<IoAddCircleOutline />}
                     >
                         Add user
@@ -179,6 +189,9 @@ export function Component() {
                 columns={columns}
                 keySelector={userKeySelector}
             />
+            {showAddModal && (
+                <AddUserFormModal onClose={handleAddUserFormModalClose} />
+            )}
         </Container>
     );
 }

diff --git a/src/views/UserManagement/UserTable/styles.module.css b/src/views/UserManagement/UserTable/styles.module.css
@@ -7,8 +7,11 @@
 
     }
     .table {
+        background-color: var(--cms-ui-color-white-card);
         .header-row {
+
             .header-cell {
+                background-color: var(--cms-ui-color-blue-100);
                 >* {
                     font-weight: bold;
                 }