diff --git a/src/app/App.tsx b/src/app/App.tsx index 8981edb..c131057 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -5,6 +5,7 @@ import {LayoutProvider, LayoutSplashScreen} from '../_digifi/layout/core' import {MasterInit} from '../_digifi/layout/MasterInit' import {AuthInit} from './modules/auth' import {ThemeModeProvider} from '../_digifi/partials' +import { CustomModalProvider } from '../context/CustomModal' const App = () => { return ( @@ -12,10 +13,12 @@ const App = () => { - - - - + + + + + + diff --git a/src/app/modules/employers/employers-list/signatory-list/core/_models.ts b/src/app/modules/employers/employers-list/signatory-list/core/_models.ts index bbd02c6..a7920e7 100644 --- a/src/app/modules/employers/employers-list/signatory-list/core/_models.ts +++ b/src/app/modules/employers/employers-list/signatory-list/core/_models.ts @@ -4,16 +4,16 @@ export type User = { name?: string avatar?: string // email?: string - position?: string - role?: string - last_login?: string - two_steps?: boolean - joined_day?: string - online?: boolean - initials?: { - label: string - state: string - } + // position?: string + // role?: string + // last_login?: string + // two_steps?: boolean + // joined_day?: string + // online?: boolean + // initials?: { + // label: string + // state: string + // } uid?: string added?: string updated?: string @@ -27,8 +27,8 @@ export type UsersQueryResponse = Response> export const initialUser: User = { avatar: 'avatars/300-6.jpg', - position: 'Art Director', - role: 'Administrator', + // position: 'Art Director', + // role: 'Administrator', name: '', email: '', } 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 d8f1f10..385d087 100644 --- a/src/app/modules/employers/employers-list/users-list/UsersList.tsx +++ b/src/app/modules/employers/employers-list/users-list/UsersList.tsx @@ -7,9 +7,13 @@ import {UserEditModal} from './user-edit-modal/UserEditModal' import {KTCard} from '../../../../../_digifi/helpers' import { ToolbarWrapper } from '../../../../../_digifi/layout/components/toolbar' import { Content } from '../../../../../_digifi/layout/components/content' +import { AddSignatoryModal } from './add-signatory-modal/Modal' +import { useCustomModal } from '../../../../../context/CustomModal' const UsersList = () => { const {itemIdForUpdate} = useListView() + const {MODALNAMES, showCustomModal} = useCustomModal() + return ( <> @@ -17,6 +21,7 @@ const UsersList = () => { {itemIdForUpdate !== undefined && } + {(showCustomModal && showCustomModal.name == MODALNAMES.addSignatory) && } ) } diff --git a/src/app/modules/employers/employers-list/users-list/add-signatory-modal/Modal.tsx b/src/app/modules/employers/employers-list/users-list/add-signatory-modal/Modal.tsx new file mode 100644 index 0000000..79e1cd5 --- /dev/null +++ b/src/app/modules/employers/employers-list/users-list/add-signatory-modal/Modal.tsx @@ -0,0 +1,46 @@ +import {useEffect} from 'react' +import { ModalHeader } from './ModalHeader' +import { ModalFormWrapper } from './ModalFormWrapper' + + +const AddSignatoryModal = () => { + + useEffect(() => { + document.body.classList.add('modal-open') + return () => { + document.body.classList.remove('modal-open') + } + }, []) + + return ( + <> + + {/* begin::Modal Backdrop */} +
+ {/* end::Modal Backdrop */} + + ) +} + +export {AddSignatoryModal} diff --git a/src/app/modules/employers/employers-list/users-list/add-signatory-modal/ModalForm.tsx b/src/app/modules/employers/employers-list/users-list/add-signatory-modal/ModalForm.tsx new file mode 100644 index 0000000..38c0cf7 --- /dev/null +++ b/src/app/modules/employers/employers-list/users-list/add-signatory-modal/ModalForm.tsx @@ -0,0 +1,333 @@ +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 { initialUser, User } from "../../signatory-list/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"; +import { useCustomModal } from "../../../../../../context/CustomModal"; + +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"), + phone: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), + title: Yup.string() + .min(3, "Minimum 3 symbols") + .max(50, "Maximum 50 symbols") + .required("required"), +}); + +const ModalForm: FC = ({ user, isUserLoading }) => { + const response:any = useAllResponse() + + const {closeCustomModal} = useCustomModal() + + 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); + closeCustomModal() + }; + + 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); + 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.title && formik.errors.title && ( + //
+ // {formik.errors.title} + //
+
+
+ {formik.errors.title} +
+
+ )} +
+ {/* end::Input group */} + + {/* begin::Input group */} +
+ {/* begin::Label */} + + {/* end::Label */} + + {/* begin::Input */} + + {/* end::Input */} + {formik.touched.phone && formik.errors.phone && ( +
+
+ {formik.errors.phone} +
+
+ )} +
+ {/* end::Input group */} + + {/* begin::Input group */} +
+ {/* begin::Label */} + + {/* end::Label */} + + {/* begin::Input */} + + {/* end::Input */} + {formik.touched.email && formik.errors.email && ( +
+
+ {formik.errors.email} +
+
+ )} +
+ {/* end::Input group */} + + +
+ {/* end::Scroll */} + + {/* begin::Actions */} +
+ + + +
+ {/* end::Actions */} +
+ {(formik.isSubmitting || isUserLoading) && } + + ); +}; + +export { ModalForm }; diff --git a/src/app/modules/employers/employers-list/users-list/add-signatory-modal/ModalFormWrapper.tsx b/src/app/modules/employers/employers-list/users-list/add-signatory-modal/ModalFormWrapper.tsx new file mode 100644 index 0000000..a694464 --- /dev/null +++ b/src/app/modules/employers/employers-list/users-list/add-signatory-modal/ModalFormWrapper.tsx @@ -0,0 +1,40 @@ +import {useQuery} from 'react-query' +import {ModalForm} from './ModalForm' +import {isNotEmpty, QUERIES} from '../../../../../../_digifi/helpers' +import {useListView} from '../core/ListViewProvider' +import {getUserById} from '../core/_requests' + +const ModalFormWrapper = () => { + const {itemIdForUpdate, setItemIdForUpdate} = useListView() + const enabledQuery: boolean = isNotEmpty(itemIdForUpdate) + const { + isLoading, + data: user, + error, + } = useQuery( + `${QUERIES.USERS_LIST}-user-${itemIdForUpdate}`, + () => { + return getUserById(itemIdForUpdate) + }, + { + cacheTime: 0, + enabled: enabledQuery, + onError: (err) => { + setItemIdForUpdate(undefined) + console.error(err) + }, + } + ) + + if (!itemIdForUpdate) { + return + } + + if (!isLoading && !error && user) { + return + } + + return null +} + +export {ModalFormWrapper} diff --git a/src/app/modules/employers/employers-list/users-list/add-signatory-modal/ModalHeader.tsx b/src/app/modules/employers/employers-list/users-list/add-signatory-modal/ModalHeader.tsx new file mode 100644 index 0000000..c70da9c --- /dev/null +++ b/src/app/modules/employers/employers-list/users-list/add-signatory-modal/ModalHeader.tsx @@ -0,0 +1,34 @@ +import {KTIcon} from '../../../../../../_digifi/helpers' +import {useListView} from '../core/ListViewProvider' +import { useCustomModal } from '../../../../../../context/CustomModal' + +const ModalHeader = () => { + const {setItemIdForUpdate, itemIdForUpdate} = useListView() + const {closeCustomModal} = useCustomModal() + + const onClose = () => { + setItemIdForUpdate(undefined) + closeCustomModal() + } + + return ( +
+ {/* begin::Modal title */} +

Add Signatory

+ {/* end::Modal title */} + + {/* begin::Close */} +
+ +
+ {/* end::Close */} +
+ ) +} + +export {ModalHeader} 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 336fd03..c402c47 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 @@ -6,6 +6,7 @@ import {ID, KTIcon, QUERIES} from '../../../../../../../_digifi/helpers' import {useListView} from '../../core/ListViewProvider' import {useQueryResponse} from '../../core/QueryResponseProvider' import {deleteUser} from '../../core/_requests' +import { useCustomModal } from '../../../../../../../context/CustomModal' type Props = { id: ID @@ -16,6 +17,8 @@ const UserActionsCell: FC = ({id}) => { const {query} = useQueryResponse() const queryClient = useQueryClient() + const {MODALNAMES, openCustomModal} = useCustomModal() + useEffect(() => { MenuComponent.reinitialization() }, []) @@ -58,7 +61,7 @@ const UserActionsCell: FC = ({id}) => { {/* begin::Menu item */} 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 0555d03..adf76f9 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 @@ -207,7 +207,7 @@ const UserEditModalForm: FC = ({ user, isUserLoading }) => { {/* begin::Input */} void + openCustomModal: (name: string, data: DataProps)=>void, + MODALNAMES: ModalNames +} + +type ShowModalProps = { + name?: string + data?: { + [index: string]: string | number | undefined; + } +} + +type DataProps = { + [index: string]: string | number | undefined; +} + +type ModalNames = { + [index: string]: string; +} + +const MODALNAMES:ModalNames = { + addSignatory: 'add signatory' +} + +const CustomModalContext = createContext({ + MODALNAMES: {}, + openCustomModal: ()=>{}, + closeCustomModal: ()=>{}, + showCustomModal: {name: '', data: {}} +}) + +const CustomModalProvider = ({children}:{children:ReactNode}) => { + const [showCustomModal, setShowCustomModal] = useState({ + name: '', + data:{} + }) + + const closeCustomModal = () => { + setShowCustomModal({name: '', data:{}}) + } + const openCustomModal = (name:string, data:DataProps) => { + setShowCustomModal({name, data}) + } + + return ( + + {children} + + ) +} + +const useCustomModal = () => useContext(CustomModalContext) + +export {CustomModalProvider, useCustomModal}