ui(admin): add role edit form

resources/scripts/components/admin/roles/RoleEditContainer.tsx

@@ -1,13 +1,21 @@
-import React, { useEffect, useState } from 'react';
-import tw from 'twin.macro';
-import { useRouteMatch } from 'react-router-dom';
 import { action, Action, Actions, createContextStore, useStoreActions } from 'easy-peasy';
+import React, { useEffect, useState } from 'react';
+// import { useHistory } from 'react-router';
+import { useRouteMatch } from 'react-router-dom';
+import tw from 'twin.macro';
+import { object, string } from 'yup';
 import { Role } from '@/api/admin/roles/getRoles';
 import getRole from '@/api/admin/roles/getRole';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import Spinner from '@/components/elements/Spinner';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { ApplicationStore } from '@/state';
+import { Form, Formik, FormikHelpers } from 'formik';
+import updateRole from '@/api/admin/roles/updateRole';
+import AdminBox from '@/components/admin/AdminBox';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import Field from '@/components/elements/Field';
+import Button from '@/components/elements/Button';
 
 interface ctx {
     role: Role | undefined;
@@ -22,6 +30,97 @@ export const Context = createContextStore<ctx>({
     }),
 });
 
+interface Values {
+    name: string;
+    description: string;
+}
+
+const EditInformationContainer = () => {
+    // const history = useHistory();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const role = Context.useStoreState(state => state.role);
+    const setRole = Context.useStoreActions(actions => actions.setRole);
+
+    if (role === undefined) {
+        return (
+            <></>
+        );
+    }
+
+    const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('role');
+
+        updateRole(role.id, name, description)
+            .then(() => setRole({ ...role, name, description }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'role', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: role.name,
+                description: role.description || '',
+            }}
+            validationSchema={object().shape({
+                name: string().required().min(1),
+                description: string().max(255, ''),
+            })}
+        >
+            {
+                ({ isSubmitting, isValid }) => (
+                    <React.Fragment>
+                        <AdminBox title={'Edit Role'} css={tw`relative`}>
+                            <SpinnerOverlay visible={isSubmitting}/>
+
+                            <Form css={tw`mb-0`}>
+                                <div>
+                                    <Field
+                                        id={'name'}
+                                        name={'name'}
+                                        label={'Name'}
+                                        type={'text'}
+                                    />
+                                </div>
+
+                                <div css={tw`mt-6`}>
+                                    <Field
+                                        id={'description'}
+                                        name={'description'}
+                                        label={'description'}
+                                        type={'text'}
+                                    />
+                                </div>
+
+                                <div css={tw`w-full flex flex-row items-center mt-6`}>
+                                    {/* <div css={tw`flex`}> */}
+                                    {/*     <RoleDeleteButton */}
+                                    {/*         roleId={role.id} */}
+                                    {/*         onDeleted={() => history.push('/admin/roles')} */}
+                                    {/*     /> */}
+                                    {/* </div> */}
+
+                                    <div css={tw`flex ml-auto`}>
+                                        <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                            Save
+                                        </Button>
+                                    </div>
+                                </div>
+                            </Form>
+                        </AdminBox>
+                    </React.Fragment>
+                )
+            }
+        </Formik>
+    );
+};
+
 const RoleEditContainer = () => {
     const match = useRouteMatch<{ id?: string }>();
 
@@ -72,6 +171,8 @@ const RoleEditContainer = () => {
             </div>
 
             <FlashMessageRender byKey={'role'} css={tw`mb-4`}/>
+
+            <EditInformationContainer/>
         </AdminContentBlock>
     );
 };