From d53ad76e8b2f5b01ecb75a5ac3742bf890b7359f Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Thu, 6 Jun 2024 21:04:36 +0100 Subject: [PATCH] initial commit --- .../table/columns/UserActionsCell.tsx | 6 +- .../employers-list/users-list/UsersList.tsx | 4 +- .../table/columns/UserActionsCell.tsx | 11 + .../user-edit-modal/UserEditModal.tsx | 2 + .../UserEditModalForm copy.tsx | 575 +++++++++++++++++ .../user-edit-modal/UserEditModalForm.tsx | 581 ++++++++++-------- .../user-edit-modal/UserEditModalHeader.tsx | 4 +- 7 files changed, 910 insertions(+), 273 deletions(-) create mode 100644 src/app/modules/employers/employers-list/users-list/user-edit-modal/UserEditModalForm copy.tsx diff --git a/src/app/modules/employers/employers-list/signatory-list/table/columns/UserActionsCell.tsx b/src/app/modules/employers/employers-list/signatory-list/table/columns/UserActionsCell.tsx index ead87e4..254a12f 100644 --- a/src/app/modules/employers/employers-list/signatory-list/table/columns/UserActionsCell.tsx +++ b/src/app/modules/employers/employers-list/signatory-list/table/columns/UserActionsCell.tsx @@ -56,12 +56,12 @@ const UserActionsCell: FC = ({id}) => { {/* end::Menu item */} - {/* begin::Menu item */} -
+ {/* begin::Menu item */} + {/*
Add Signatory -
+
*/} {/* end::Menu item */} {/* begin::Menu item */} diff --git a/src/app/modules/employers/employers-list/users-list/UsersList.tsx b/src/app/modules/employers/employers-list/users-list/UsersList.tsx index 986a141..d8f1f10 100644 --- a/src/app/modules/employers/employers-list/users-list/UsersList.tsx +++ b/src/app/modules/employers/employers-list/users-list/UsersList.tsx @@ -1,6 +1,6 @@ import {ListViewProvider, useListView} from './core/ListViewProvider' import {QueryRequestProvider} from './core/QueryRequestProvider' -import {QueryResponseProvider, useAllResponse} from './core/QueryResponseProvider' +import {QueryResponseProvider} from './core/QueryResponseProvider' import {UsersListHeader} from './components/header/UsersListHeader' import {UsersTable} from './table/UsersTable' import {UserEditModal} from './user-edit-modal/UserEditModal' @@ -9,8 +9,6 @@ import { ToolbarWrapper } from '../../../../../_digifi/layout/components/toolbar import { Content } from '../../../../../_digifi/layout/components/content' const UsersList = () => { - const response = useAllResponse() - console.log('RESPONSE', response) const {itemIdForUpdate} = useListView() return ( <> diff --git a/src/app/modules/employers/employers-list/users-list/table/columns/UserActionsCell.tsx b/src/app/modules/employers/employers-list/users-list/table/columns/UserActionsCell.tsx index 9a91389..336fd03 100644 --- a/src/app/modules/employers/employers-list/users-list/table/columns/UserActionsCell.tsx +++ b/src/app/modules/employers/employers-list/users-list/table/columns/UserActionsCell.tsx @@ -56,6 +56,17 @@ const UserActionsCell: FC = ({id}) => { {/* end::Menu item */} + {/* begin::Menu item */} +
+ + Add Signatory + +
+ {/* end::Menu item */} +
+
+
+ {/* begin::Menu item */}
{ + useEffect(() => { document.body.classList.add('modal-open') return () => { diff --git a/src/app/modules/employers/employers-list/users-list/user-edit-modal/UserEditModalForm copy.tsx b/src/app/modules/employers/employers-list/users-list/user-edit-modal/UserEditModalForm copy.tsx new file mode 100644 index 0000000..b7d1229 --- /dev/null +++ b/src/app/modules/employers/employers-list/users-list/user-edit-modal/UserEditModalForm copy.tsx @@ -0,0 +1,575 @@ +import { FC, useState } from "react"; +import * as Yup from "yup"; +import { useFormik } from "formik"; +import { isNotEmpty, toAbsoluteUrl } from "../../../../../../_digifi/helpers"; +import { initialUser, User } from "../core/_models"; +import clsx from "clsx"; +import { useListView } from "../core/ListViewProvider"; +import { UsersListLoading } from "../components/loading/UsersListLoading"; +import { createUser, updateUser } from "../core/_requests"; +import { useAllResponse, useQueryResponse } from "../core/QueryResponseProvider"; + +type Props = { + isUserLoading: boolean; + user: User; +}; + +const editUserSchema = Yup.object().shape({ + // email: Yup.string() + // .email('Wrong email format') + // .min(3, 'Minimum 3 symbols') + // .max(50, 'Maximum 50 symbols') + // .required('required'), + name: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), + percent_interest: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), + max_loan: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), + tenor: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), + retirement_age: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("is required"), + sector: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), + salary_source: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), +}); + +const UserEditModalForm: FC = ({ user, isUserLoading }) => { + const response:any = useAllResponse() + console.log('response', response) + + const { setItemIdForUpdate } = useListView(); + const { refetch, isLoading } = useQueryResponse(); + + const [userForEdit] = useState({ + ...user, + avatar: user.avatar || initialUser.avatar, + role: user.role || initialUser.role, + position: user.position || initialUser.position, + name: user.name || initialUser.name, + email: user.email || initialUser.email, + }); + + const cancel = (withRefresh?: boolean) => { + if (withRefresh) { + refetch(); + } + setItemIdForUpdate(undefined); + }; + + const blankImg = toAbsoluteUrl("media/svg/avatars/blank.svg"); + const userAvatarImg = toAbsoluteUrl(`media/${userForEdit.avatar}`); + + const formik = useFormik({ + initialValues: userForEdit, + validationSchema: editUserSchema, + onSubmit: async (values, { setSubmitting }) => { + console.log('values', values) + setSubmitting(true); + // try { + // if (isNotEmpty(values.id)) { + // await updateUser(values); + // } else { + // await createUser(values); + // } + // } catch (ex) { + // console.error(ex); + // } finally { + // setSubmitting(true); + // cancel(true); + // } + }, + }); + + return ( + <> +
+ {/* begin::Scroll */} +
+ {/* begin::Input group */} + {/*
+ + + +
+
+ + + + + + + + + + +
+
Allowed file types: png, jpg, jpeg.
+
*/} + {/* end::Input group */} + + {/* begin::Input group */} +
+ {/* begin::Label */} + + {/* end::Label */} + + {/* begin::Input */} + + {formik.touched.name && formik.errors.name && ( +
+
+ {formik.errors.name} +
+
+ )} + {/* end::Input */} +
+ {/* end::Input group */} + + {/* begin::Input group */} +
+ {/* begin::Label */} + + {/* end::Label */} + + {/* begin::Input */} + + {/* end::Input */} + {formik.touched.percent_interest && formik.errors.percent_interest && ( + //
+ // {formik.errors.percent_interest} + //
+
+
+ {formik.errors.percent_interest} +
+
+ )} +
+ {/* end::Input group */} + + {/* begin::Input group */} +
+ {/* begin::Label */} + + {/* end::Label */} + + {/* begin::Input */} + + {/* end::Input */} + {formik.touched.max_loan && formik.errors.max_loan && ( +
+
+ {formik.errors.max_loan} +
+
+ )} +
+ {/* end::Input group */} + + {/* begin::Input group */} +
+ {/* begin::Label */} + + {/* end::Label */} + + {/* begin::Input */} + + {/* end::Input */} + {formik.touched.tenor && formik.errors.tenor && ( +
+
+ {formik.errors.tenor} +
+
+ )} +
+ {/* end::Input group */} + + {/* begin::Input group */} +
+ {/* begin::Label */} + + {/* end::Label */} + + {/* begin::Input */} + + {/* end::Input */} + {formik.touched.retirement_age && formik.errors.retirement_age && ( +
+
+ {formik.errors.retirement_age} +
+
+ )} +
+ {/* end::Input group */} + + {/* begin::Input group */} +
+ + + {/* end::Input */} + {formik.touched.sector && formik.errors.sector && ( +
+
+ {formik.errors.sector} +
+
+ )} +
+ {/* end::Input group */} + + {/* begin::Input group */} +
+ {/* begin::Label */} + + {/* end::Label */} + + {/* begin::Input */} + + {/* end::Input */} + {formik.touched.salary_source && formik.errors.salary_source && ( +
+
+ {formik.errors.salary_source} +
+
+ )} +
+ {/* end::Input group */} + + + + + + {/* begin::Input group */} + {/*
+ +
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
*/} + {/* end::Input group */} +
+ {/* end::Scroll */} + + {/* begin::Actions */} +
+ + + +
+ {/* end::Actions */} +
+ {(formik.isSubmitting || isUserLoading) && } + + ); +}; + +export { UserEditModalForm }; diff --git a/src/app/modules/employers/employers-list/users-list/user-edit-modal/UserEditModalForm.tsx b/src/app/modules/employers/employers-list/users-list/user-edit-modal/UserEditModalForm.tsx index 6e8b0ec..c06679c 100644 --- a/src/app/modules/employers/employers-list/users-list/user-edit-modal/UserEditModalForm.tsx +++ b/src/app/modules/employers/employers-list/users-list/user-edit-modal/UserEditModalForm.tsx @@ -1,34 +1,60 @@ -import {FC, useState} from 'react' -import * as Yup from 'yup' -import {useFormik} from 'formik' -import {isNotEmpty, toAbsoluteUrl} from '../../../../../../_digifi/helpers' -import {initialUser, User} from '../core/_models' -import clsx from 'clsx' -import {useListView} from '../core/ListViewProvider' -import {UsersListLoading} from '../components/loading/UsersListLoading' -import {createUser, updateUser} from '../core/_requests' -import {useQueryResponse} from '../core/QueryResponseProvider' +import { FC, useState } from "react"; +import * as Yup from "yup"; +import { useFormik } from "formik"; +import { isNotEmpty, toAbsoluteUrl } from "../../../../../../_digifi/helpers"; +import { initialUser, User } from "../core/_models"; +import clsx from "clsx"; +import { useListView } from "../core/ListViewProvider"; +import { UsersListLoading } from "../components/loading/UsersListLoading"; +import { createUser, updateUser } from "../core/_requests"; +import { useAllResponse, useQueryResponse } from "../core/QueryResponseProvider"; type Props = { - isUserLoading: boolean - user: User -} + isUserLoading: boolean; + user: User; +}; const editUserSchema = Yup.object().shape({ - email: Yup.string() - .email('Wrong email format') - .min(3, 'Minimum 3 symbols') - .max(50, 'Maximum 50 symbols') - .required('Email is required'), + // email: Yup.string() + // .email('Wrong email format') + // .min(3, 'Minimum 3 symbols') + // .max(50, 'Maximum 50 symbols') + // .required('required'), name: Yup.string() - .min(3, 'Minimum 3 symbols') - .max(50, 'Maximum 50 symbols') - .required('Name is required'), -}) + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), + percent_interest: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), + max_loan: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), + tenor: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), + retirement_age: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("is required"), + sector: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), + salary_source: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), +}); -const UserEditModalForm: FC = ({user, isUserLoading}) => { - const {setItemIdForUpdate} = useListView() - const {refetch} = useQueryResponse() +const UserEditModalForm: FC = ({ user, isUserLoading }) => { + const response:any = useAllResponse() + + const { setItemIdForUpdate } = useListView(); + const { refetch, isLoading } = useQueryResponse(); const [userForEdit] = useState({ ...user, @@ -37,73 +63,73 @@ const UserEditModalForm: FC = ({user, isUserLoading}) => { position: user.position || initialUser.position, name: user.name || initialUser.name, email: user.email || initialUser.email, - }) + }); const cancel = (withRefresh?: boolean) => { if (withRefresh) { - refetch() + refetch(); } - setItemIdForUpdate(undefined) - } + setItemIdForUpdate(undefined); + }; - const blankImg = toAbsoluteUrl('media/svg/avatars/blank.svg') - const userAvatarImg = toAbsoluteUrl(`media/${userForEdit.avatar}`) + const blankImg = toAbsoluteUrl("media/svg/avatars/blank.svg"); + const userAvatarImg = toAbsoluteUrl(`media/${userForEdit.avatar}`); const formik = useFormik({ initialValues: userForEdit, validationSchema: editUserSchema, - onSubmit: async (values, {setSubmitting}) => { - setSubmitting(true) + onSubmit: async (values, { setSubmitting }) => { + setSubmitting(true); try { if (isNotEmpty(values.id)) { - await updateUser(values) + await updateUser(values); } else { - await createUser(values) + await createUser(values); } } catch (ex) { - console.error(ex) + console.error(ex); } finally { - setSubmitting(true) - cancel(true) + setSubmitting(true); + cancel(true); } }, - }) + }); return ( <> -
+ {/* begin::Scroll */}
{/* begin::Input group */} -
- {/* begin::Label */} - - {/* end::Label */} + {/*
+ + - {/* begin::Image input */}
- {/* begin::Preview existing avatar */}
- {/* end::Preview existing avatar */} - {/* begin::Label */} - {/* */} - {/* end::Label */} + - {/* begin::Cancel */} - {/* - */} - {/* end::Cancel */} + - {/* begin::Remove */} - {/* - */} - {/* end::Remove */} +
- {/* end::Image input */} - - {/* begin::Hint */} - {/*
Allowed file types: png, jpg, jpeg.
*/} - {/* end::Hint */} -
+
Allowed file types: png, jpg, jpeg.
+
*/} {/* end::Input group */} {/* begin::Input group */} -
+
{/* begin::Label */} - + {/* end::Label */} {/* begin::Input */} {formik.touched.name && formik.errors.name && ( -
-
- {formik.errors.name} +
+
+ {formik.errors.name}
)} @@ -180,219 +197,253 @@ const UserEditModalForm: FC = ({user, isUserLoading}) => { {/* end::Input group */} {/* begin::Input group */} -
+
{/* begin::Label */} - + {/* end::Label */} {/* begin::Input */} {/* end::Input */} - {formik.touched.email && formik.errors.email && ( -
- {formik.errors.email} + {formik.touched.percent_interest && formik.errors.percent_interest && ( + //
+ // {formik.errors.percent_interest} + //
+
+
+ {formik.errors.percent_interest} +
)}
{/* end::Input group */} {/* begin::Input group */} -
+
{/* begin::Label */} - + {/* end::Label */} - {/* begin::Roles */} - {/* begin::Input row */} -
- {/* begin::Radio */} -
- {/* begin::Input */} - - {/* end::Input */} - {/* begin::Label */} - - {/* end::Label */} + {/* begin::Input */} + + {/* end::Input */} + {formik.touched.max_loan && formik.errors.max_loan && ( +
+
+ {formik.errors.max_loan} +
- {/* end::Radio */} -
- {/* end::Input row */} -
- {/* begin::Input row */} -
- {/* begin::Radio */} -
- {/* begin::Input */} - - {/* end::Input */} - {/* begin::Label */} - - {/* end::Label */} -
- {/* end::Radio */} -
- {/* end::Input row */} -
- {/* begin::Input row */} -
- {/* begin::Radio */} -
- {/* begin::Input */} - - - {/* end::Input */} - {/* begin::Label */} - - {/* end::Label */} -
- {/* end::Radio */} -
- {/* end::Input row */} -
- {/* begin::Input row */} -
- {/* begin::Radio */} -
- {/* begin::Input */} - - {/* end::Input */} - {/* begin::Label */} - - {/* end::Label */} -
- {/* end::Radio */} -
- {/* end::Input row */} -
- {/* begin::Input row */} -
- {/* begin::Radio */} -
- {/* begin::Input */} - - {/* end::Input */} - {/* begin::Label */} - - {/* end::Label */} -
- {/* end::Radio */} -
- {/* end::Input row */} - {/* end::Roles */} + )}
{/* end::Input group */} + + {/* begin::Input group */} +
+ {/* begin::Label */} + + {/* end::Label */} + + {/* begin::Input */} + + {/* end::Input */} + {formik.touched.tenor && formik.errors.tenor && ( +
+
+ {formik.errors.tenor} +
+
+ )} +
+ {/* end::Input group */} + + {/* begin::Input group */} +
+ {/* begin::Label */} + + {/* end::Label */} + + {/* begin::Input */} + + {/* end::Input */} + {formik.touched.retirement_age && formik.errors.retirement_age && ( +
+
+ {formik.errors.retirement_age} +
+
+ )} +
+ {/* end::Input group */} + + {/* begin::Input group */} +
+ + + {/* end::Input */} + {formik.touched.sector && formik.errors.sector && ( +
+
+ {formik.errors.sector} +
+
+ )} +
+ {/* end::Input group */} + + {/* begin::Input group */} +
+ {/* begin::Label */} + + {/* end::Label */} + + {/* begin::Input */} + + {/* end::Input */} + {formik.touched.salary_source && formik.errors.salary_source && ( +
+
+ {formik.errors.salary_source} +
+
+ )} +
+ {/* end::Input group */} +
{/* end::Scroll */} {/* begin::Actions */} -
+
@@ -401,7 +452,7 @@ const UserEditModalForm: FC = ({user, isUserLoading}) => { {(formik.isSubmitting || isUserLoading) && } - ) -} + ); +}; -export {UserEditModalForm} +export { UserEditModalForm }; diff --git a/src/app/modules/employers/employers-list/users-list/user-edit-modal/UserEditModalHeader.tsx b/src/app/modules/employers/employers-list/users-list/user-edit-modal/UserEditModalHeader.tsx index cb0f5b6..7d292dc 100644 --- a/src/app/modules/employers/employers-list/users-list/user-edit-modal/UserEditModalHeader.tsx +++ b/src/app/modules/employers/employers-list/users-list/user-edit-modal/UserEditModalHeader.tsx @@ -2,12 +2,12 @@ import {KTIcon} from '../../../../../../_digifi/helpers' import {useListView} from '../core/ListViewProvider' const UserEditModalHeader = () => { - const {setItemIdForUpdate} = useListView() + const {setItemIdForUpdate, itemIdForUpdate} = useListView() return (
{/* begin::Modal title */} -

Add User

+

{itemIdForUpdate ? 'Edit Employer' : 'Add Employer'}

{/* end::Modal title */} {/* begin::Close */}