From da42fe97ae4b0b05ed316af3d97a5cd3a56d7b5c Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Thu, 21 Dec 2023 21:40:42 +0530 Subject: [PATCH] add/Choose form to link user and ui changes --- .../src/components/fields/CreateFolder.js | 12 +- .../src/components/fields/SelectFolder.js | 97 ++++- apps/OpenSign/src/index.css | 13 +- apps/OpenSign/src/primitives/ModalUi.js | 26 ++ apps/OpenSign/src/primitives/TemplateForm.js | 4 +- .../cloud/parsefunction/reportsJson.js | 24 ++ .../src/Component/TemplatePlaceholder.js | 225 +++++------ .../src/Component/component/AddRoleModal.js | 70 ++++ .../src/Component/component/EditTemplate.js | 102 +++++ .../src/Component/component/LinkUserModal.js | 32 +- .../src/Component/component/header.js | 12 +- .../Component/component/signerListPlace.js | 56 ++- .../SignDocuments/src/css/AddUser.css | 33 +- .../SignDocuments/src/css/ModalUi.css | 71 ++++ .../component => premitives}/AddUser.js | 4 +- .../SignDocuments/src/premitives/Alert.js | 30 ++ .../src/premitives/CreateFolder.js | 147 ++++++++ .../SignDocuments/src/premitives/ModalUi.js | 29 ++ .../src/premitives/SelectFolder.js | 348 ++++++++++++++++++ .../component => premitives}/SelectSigners.js | 4 +- 20 files changed, 1150 insertions(+), 189 deletions(-) create mode 100644 apps/OpenSign/src/primitives/ModalUi.js create mode 100644 microfrontends/SignDocuments/src/Component/component/AddRoleModal.js create mode 100644 microfrontends/SignDocuments/src/Component/component/EditTemplate.js create mode 100644 microfrontends/SignDocuments/src/css/ModalUi.css rename microfrontends/SignDocuments/src/{Component/component => premitives}/AddUser.js (98%) create mode 100644 microfrontends/SignDocuments/src/premitives/Alert.js create mode 100644 microfrontends/SignDocuments/src/premitives/CreateFolder.js create mode 100644 microfrontends/SignDocuments/src/premitives/ModalUi.js create mode 100644 microfrontends/SignDocuments/src/premitives/SelectFolder.js rename microfrontends/SignDocuments/src/{Component/component => premitives}/SelectSigners.js (96%) diff --git a/apps/OpenSign/src/components/fields/CreateFolder.js b/apps/OpenSign/src/components/fields/CreateFolder.js index 2aa0c2432..18c30feea 100644 --- a/apps/OpenSign/src/components/fields/CreateFolder.js +++ b/apps/OpenSign/src/components/fields/CreateFolder.js @@ -20,16 +20,16 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => { const fetchFolder = async () => { try { - const fetchFolder = new Parse.Query(folderCls); + const FolderQuery = new Parse.Query(folderCls); if (parentFolderId) { - fetchFolder.equalTo("Folder", folderPtr); - fetchFolder.equalTo("Type", "Folder"); + FolderQuery.equalTo("Folder", folderPtr); + FolderQuery.equalTo("Type", "Folder"); } else { - fetchFolder.doesNotExist("Folder"); - fetchFolder.equalTo("Type", "Folder"); + FolderQuery.doesNotExist("Folder"); + FolderQuery.equalTo("Type", "Folder"); } - const res = await fetchFolder.find(); + const res = await FolderQuery.find(); if (res) { const result = JSON.parse(JSON.stringify(res)); if (result) { diff --git a/apps/OpenSign/src/components/fields/SelectFolder.js b/apps/OpenSign/src/components/fields/SelectFolder.js index 878bb269b..56709612d 100644 --- a/apps/OpenSign/src/components/fields/SelectFolder.js +++ b/apps/OpenSign/src/components/fields/SelectFolder.js @@ -1,6 +1,7 @@ import React, { useEffect, useState } from "react"; import Parse from "parse"; import CreateFolder from "./CreateFolder"; +import ModalUi from "../../primitives/ModalUi"; const SelectFolder = ({ required, onSuccess, folderCls }) => { const [isOpen, SetIsOpen] = useState(false); @@ -19,20 +20,21 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => { setTabList([]); fetchFolder(); } + // eslint-disable-next-line }, [isOpen]); const fetchFolder = async (folderPtr) => { setIsLoader(true); try { - const fetchFolder = new Parse.Query(folderCls); + const FolderQuery = new Parse.Query(folderCls); if (folderPtr) { - fetchFolder.equalTo("Folder", folderPtr); - fetchFolder.equalTo("Type", "Folder"); + FolderQuery.equalTo("Folder", folderPtr); + FolderQuery.equalTo("Type", "Folder"); } else { - fetchFolder.doesNotExist("Folder"); - fetchFolder.equalTo("Type", "Folder"); + FolderQuery.doesNotExist("Folder"); + FolderQuery.equalTo("Type", "Folder"); } - const res = await fetchFolder.find(); + const res = await FolderQuery.find(); if (res) { const result = JSON.parse(JSON.stringify(res)); if (result) { @@ -168,7 +170,86 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {

- {isOpen && ( + +
+
+ removeTabListItem(e)} + > + Root /{" "} + + {tabList && + tabList.map((tab, i) => ( + + removeTabListItem(e, i)} + > + {tab.Name} + + {" / "} + + ))} +
+
+
+ {!isAdd && + folderList.length > 0 && + folderList.map((folder) => ( +
handleSelect(folder)} + > +
+ + {folder.Name} +
+
+ ))} + {isAdd && ( + + )} + {isLoader && ( +
+ +
+ )} +
+
+
+
+
+ {isAdd ? ( + + ) : ( + + )} +
+
+ +
+
+ + {/* {isOpen && (
@@ -262,7 +343,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
- )} + )} */} ); }; diff --git a/apps/OpenSign/src/index.css b/apps/OpenSign/src/index.css index fe65ac025..3dbcaa369 100644 --- a/apps/OpenSign/src/index.css +++ b/apps/OpenSign/src/index.css @@ -4,4 +4,15 @@ body{ background-color: white; -} \ No newline at end of file +} + +/* Custom CSS to hide scrollbar */ +.hide-scrollbar::-webkit-scrollbar { + display: none; + } + +.hide-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + \ No newline at end of file diff --git a/apps/OpenSign/src/primitives/ModalUi.js b/apps/OpenSign/src/primitives/ModalUi.js new file mode 100644 index 000000000..a732273dc --- /dev/null +++ b/apps/OpenSign/src/primitives/ModalUi.js @@ -0,0 +1,26 @@ +import React from "react"; +const ModalUi = ({ children, title, isOpen, handleClose }) => { + + return ( + <> + {isOpen && ( +
+
+
+
{title}
+
handleClose && handleClose()} + > + × +
+
+
{children}
+
+
+ )} + + ); +}; + +export default ModalUi; diff --git a/apps/OpenSign/src/primitives/TemplateForm.js b/apps/OpenSign/src/primitives/TemplateForm.js index 05f8d7d6f..1f2a8eb56 100644 --- a/apps/OpenSign/src/primitives/TemplateForm.js +++ b/apps/OpenSign/src/primitives/TemplateForm.js @@ -302,13 +302,13 @@ const TemplateForm = () => {
handleReset()} > Reset diff --git a/apps/OpenSignServer/cloud/parsefunction/reportsJson.js b/apps/OpenSignServer/cloud/parsefunction/reportsJson.js index cb52eca29..238846b83 100644 --- a/apps/OpenSignServer/cloud/parsefunction/reportsJson.js +++ b/apps/OpenSignServer/cloud/parsefunction/reportsJson.js @@ -32,6 +32,18 @@ export default function reportJson(id, userId) { $gt: { __type: 'Date', iso: new Date().toISOString() }, }, Placeholders: { $ne: null }, + Signers: { + $inQuery: { + where: { + UserId: { + __type: 'Pointer', + className: '_User', + objectId: currentUserId, + }, + }, + className: 'contracts_Contactbook', + }, + }, }, keys: [ 'Name', @@ -168,6 +180,18 @@ export default function reportJson(id, userId) { $gt: { __type: 'Date', iso: new Date().toISOString() }, }, Placeholders: { $ne: null }, + Signers: { + $inQuery: { + where: { + UserId: { + __type: 'Pointer', + className: '_User', + objectId: currentUserId, + }, + }, + className: 'contracts_Contactbook', + }, + }, }, keys: ['Name', 'URL', 'ExtUserPtr.Name', 'Signers.Name', 'Signers.UserId', 'AuditTrail'], }; diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 2c96c3a50..fa794e82c 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -30,6 +30,9 @@ import ModalComponent from "./component/modalComponent"; import "../css/AddUser.css"; import Title from "./component/Title"; import LinkUserModal from "./component/LinkUserModal"; +import EditTemplate from "./component/EditTemplate"; +import ModalUi from "../premitives/ModalUi"; +import AddRoleModal from "./component/AddRoleModal"; const TemplatePlaceholder = () => { const navigate = useNavigate(); const { templateId } = useParams(); @@ -152,7 +155,7 @@ const TemplatePlaceholder = () => { const [roleName, setRoleName] = useState(""); const [isAddUser, setIsAddUser] = useState({}); const [isCreateDoc, setIsCreateDoc] = useState(false); - + const [isEditTemplate, setIsEditTemplate] = useState(false); const senderUser = localStorage.getItem( `Parse/${localStorage.getItem("parseAppId")}/currentUser` @@ -176,6 +179,8 @@ const TemplatePlaceholder = () => { }); } }, [divRef.current]); + + // `fetchTemplate` function in used to get Template from server and setPlaceholder ,setSigner if present const fetchTemplate = async () => { // const params = { templateId: templateId }; // const templateDeatils = await axios.post( @@ -338,6 +343,7 @@ const TemplatePlaceholder = () => { } }; + // `getSignerPos` is used to get placeholder position when user place it and save it in array const getSignerPos = (item, monitor) => { const posZIndex = zIndex + 1; setZIndex(posZIndex); @@ -831,6 +837,8 @@ const TemplatePlaceholder = () => { console.log("axois err ", err); }); }; + + // `handleCreateDocModal` is used to create Document from template when user click on yes from modal const handleCreateDocModal = async () => { setIsCreateDocModal(false); setIsCreateDoc(true); @@ -846,10 +854,14 @@ const TemplatePlaceholder = () => { } }; + // `handleAddSigner` is used to open Add Role Modal const handleAddSigner = () => { setIsModalRole(true); setRoleName(""); }; + + // `handleAddRole` function is called when use click on add button in addRole modal + // save Role in entry in signerList and user const handleAddRole = (e) => { e.preventDefault(); const count = signersdata.length > 0 ? signersdata.length + 1 : 1; @@ -861,14 +873,20 @@ const TemplatePlaceholder = () => { setSignersData((prevArr) => [...prevArr, obj]); setIsModalRole(false); setRoleName(""); + setUniqueId(Id); + setIsMailSend(false); }; + // `handleDeleteUser` function is used to delete record and placeholder when user click on delete which is place next user name in recipients list const handleDeleteUser = (Id) => { const removeUser = signersdata.filter((x) => x.Id !== Id); setSignersData(removeUser); const removePlaceholderUser = signerPos.filter((x) => x.Id !== Id); setSignerPos(removePlaceholderUser); + setIsMailSend(false); }; + // `handleLinkUser` is used to open Add/Choose Signer Modal when user can link existing or new User with placeholder + // and update entry in signersList const handleLinkUser = (id) => { setIsAddUser({ [id]: true }); }; @@ -893,19 +911,56 @@ const TemplatePlaceholder = () => { return { ...x }; }); setSignersData(updateSigner); + setIsMailSend(false); }; + // `closePopup` is used to close Add/Choose signer modal const closePopup = () => { setIsAddUser({}); }; + + // `handleRoleChange` function is call when user update Role name from recipients list const handleRoleChange = (event, roleId) => { // Update the role when the content changes const updatedRoles = signersdata.map((role) => - role.Id === roleId ? { ...role, Role: event.target.textContent } : role + role.Id === roleId ? { ...role, Role: event.target.value } : role ); setSignersData(updatedRoles); + setIsMailSend(false); }; + // `handleOnBlur` function is call when user click outside input box + const handleOnBlur = (updateRole, roleId) => { + // Update the role when the content changes + if (!updateRole) { + const updatedRoles = signersdata.map((role) => + role.Id === roleId ? { ...role, Role: roleName } : role + ); + setSignersData(updatedRoles); + } + }; + + const handleEditTemplateModal = () => { + setIsEditTemplate(!isEditTemplate); + }; + + const handleEditTemplateForm = (data) => { + console.log("data", data); + setIsEditTemplate(false); + const updateTemplate = pdfDetails.map((x) => { + return { ...x, ...data }; + }); + console.log("updateTemplate ", updateTemplate); + setPdfDetails(updateTemplate); + setIsMailSend(false); + }; + + const handleCloseRoleModal = () => { + setIsModalRole(false); + }; + + console.log("pdfDetails ", pdfDetails) + console.log("signerPos ", signerPos) return (
@@ -949,52 +1004,34 @@ const TemplatePlaceholder = () => { }} > {/* this modal is used show alert set placeholder for all signers before send mail */} - - <Modal show={isSendAlert}> - <Modal.Header className="bg-danger"> - <span style={{ color: "white" }}>Fields required</span> - </Modal.Header> - - {/* signature modal */} - <Modal.Body> + <ModalUi + headerColor={"#dc3545"} + isOpen={isSendAlert} + title={"Fields required"} + handleClose={() => setIsSendAlert(false)} + > + <div style={{ height: "100%", padding: 20 }}> <p>Please add field for all recipients.</p> - </Modal.Body> - - <Modal.Footer> - <button - onClick={() => setIsSendAlert(false)} - style={{ - color: "black" - }} - type="button" - className="finishBtn" - > - Close - </button> - </Modal.Footer> - </Modal> + </div> + </ModalUi> {/* this modal is used show send mail message and after send mail success message */} - <Modal show={isCreateDocModal}> - {/* signature modal */} - <Modal.Body> + <ModalUi + isOpen={isCreateDocModal} + title={"Create Document"} + handleClose={() => setIsCreateDocModal(false)} + > + <div style={{ height: "100%", padding: 20 }}> <p>Do you want to create document right now ?</p> - </Modal.Body> - <Modal.Footer> + <div + style={{ + height: "1px", + backgroundColor: "#9f9f9f", + width: "100%", + marginBottom: "15px" + }} + ></div> {currentEmail.length > 0 && ( <> - <button - onClick={() => { - setIsCreateDocModal(false); - }} - style={{ - color: "black" - }} - type="button" - className="finishBtn" - > - No - </button> - <button onClick={() => { handleCreateDocModal(); @@ -1008,16 +1045,22 @@ const TemplatePlaceholder = () => { > Yes </button> + <button + onClick={() => { + setIsCreateDocModal(false); + }} + style={{ + color: "black" + }} + type="button" + className="finishBtn" + > + No + </button> </> )} - </Modal.Footer> - </Modal> - {isCreateDoc && <Loader isLoading={isLoading} />} - <ModalComponent - isShow={isShowEmail} - type={"signersAlert"} - setIsShowEmail={setIsShowEmail} - /> + </div> + </ModalUi> {/* pdf header which contain funish back button */} <Header completeBtnTitle={"Save"} @@ -1032,6 +1075,7 @@ const TemplatePlaceholder = () => { alertSendEmail={alertSendEmail} isShowHeader={true} currentSigner={true} + setIsEditTemplate={handleEditTemplateModal} dataTut4="reactourFour" /> <div data-tut="reactourThird"> @@ -1115,6 +1159,7 @@ const TemplatePlaceholder = () => { setUniqueId={setUniqueId} handleDeleteUser={handleDeleteUser} handleRoleChange={handleRoleChange} + handleOnBlur={handleOnBlur} /> <div data-tut="reactourSecond"> <FieldsComponent @@ -1141,66 +1186,14 @@ const TemplatePlaceholder = () => { )} </DndProvider> <div> - <Modal show={isModalRole}> - <Modal.Header className={"bg-info"}> - <span style={{ color: "white" }}>Add Role</span> - </Modal.Header> - <Modal.Body> - <form - style={{ display: "flex", flexDirection: "column" }} - onSubmit={handleAddRole} - > - <input - value={roleName} - onChange={(e) => setRoleName(e.target.value)} - placeholder={ - signersdata.length > 0 - ? "User " + (signersdata.length + 1) - : "User 1" - } - className="addUserInput" - /> - <p - style={{ - color: "grey", - fontSize: 11, - margin: "2px 0 10px 5px" - }} - > - e.g: Account, Hr, Director, Manager, New joinee etc... - </p> - <div> - <div - style={{ - height: "1px", - backgroundColor: "#9f9f9f", - width: "100%", - marginBottom: "15px" - }} - ></div> - <button - type="submit" - style={{ - background: "#00a2b7" - }} - className="finishBtn" - > - Add - </button> - <button - onClick={() => setIsModalRole(false)} - style={{ - color: "black" - }} - type="button" - className="finishBtn" - > - Close - </button> - </div> - </form> - </Modal.Body> - </Modal> + <AddRoleModal + isModalRole={isModalRole} + roleName={roleName} + signersdata={signersdata} + setRoleName={setRoleName} + handleAddRole={handleAddRole} + handleCloseRoleModal={handleCloseRoleModal} + /> </div> <div> <LinkUserModal @@ -1210,6 +1203,16 @@ const TemplatePlaceholder = () => { closePopup={closePopup} /> </div> + <ModalUi + title={"Edit Template"} + isOpen={isEditTemplate} + handleClose={handleEditTemplateModal} + > + <EditTemplate + template={pdfDetails?.[0]} + onSuccess={handleEditTemplateForm} + /> + </ModalUi> </div> ); }; diff --git a/microfrontends/SignDocuments/src/Component/component/AddRoleModal.js b/microfrontends/SignDocuments/src/Component/component/AddRoleModal.js new file mode 100644 index 000000000..69c5fb36f --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/component/AddRoleModal.js @@ -0,0 +1,70 @@ +import React from "react"; +import ModalUi from "../../premitives/ModalUi"; + +const AddRoleModal = (props) => { + return ( + <ModalUi + title={"Add Role"} + isOpen={props.isModalRole} + handleClose={props.handleCloseRoleModal} + > + <div className="addusercontainer"> + <form + style={{ display: "flex", flexDirection: "column" }} + onSubmit={props.handleAddRole} + > + <input + value={props.roleName} + onChange={(e) => props.setRoleName(e.target.value)} + placeholder={ + props.signersdata.length > 0 + ? "User " + (props.signersdata.length + 1) + : "User 1" + } + className="addUserInput" + /> + <p + style={{ + color: "grey", + fontSize: 11, + margin: "2px 0 10px 5px" + }} + > + e.g: Account, Hr, Director, Manager, New joinee etc... + </p> + <div> + <div + style={{ + height: "1px", + backgroundColor: "#9f9f9f", + width: "100%", + marginBottom: "15px" + }} + ></div> + <button + type="submit" + style={{ + background: "#00a2b7" + }} + className="finishBtn" + > + Add + </button> + <button + onClick={props.handleCloseRoleModal} + style={{ + color: "black" + }} + type="button" + className="finishBtn" + > + Close + </button> + </div> + </form> + </div> + </ModalUi> + ); +}; + +export default AddRoleModal; diff --git a/microfrontends/SignDocuments/src/Component/component/EditTemplate.js b/microfrontends/SignDocuments/src/Component/component/EditTemplate.js new file mode 100644 index 000000000..bf6a01ef9 --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/component/EditTemplate.js @@ -0,0 +1,102 @@ +import React, { useState, useEffect } from "react"; +import "../../css/AddUser.css"; +// import SelectFolder from "../../premitives/SelectFolder"; + +const EditTemplate = ({ template, onSuccess }) => { + const [folder, setFolder] = useState({ ObjectId: "", Name: "" }); + const [formData, setFormData] = useState({ + Name: template?.Name || "", + Note: template?.Note || "", + Description: template?.Description || "" + }); + + console.log("template", template); + const handleStrInput = (e) => { + setFormData({ ...formData, [e.target.name]: e.target.value }); + }; + const handleFolder = (data) => { + console.log("handleFolder ", data) + setFolder(data); + }; + + // Define a function to handle form submission + const handleSubmit = async (e) => { + e.preventDefault(); + e.stopPropagation(); + const data = {...formData } + onSuccess(data); + }; + + return ( + <div className="addusercontainer"> + <div className="form-wrapper"> + <form onSubmit={handleSubmit}> + <div> + <label htmlFor="name" style={{ fontSize: 13 }}> + File + </label> + <div + style={{ + padding: "0.5rem 0.75rem", + border: "1px solid #d1d5db", + borderRadius: "0.375rem", + fontSize: "0.75rem", + fontWeight: "700" + }} + > + file selected : {template.URL?.split("/")[3]?.split("_")[1]} + </div> + </div> + <div className="form-section"> + <label htmlFor="name" style={{ fontSize: 13 }}> + Name + <span style={{ color: "red", fontSize: 13 }}> *</span> + </label> + <input + type="text" + name="Name" + value={formData.Name} + onChange={(e) => handleStrInput(e)} + required + className="addUserInput" + /> + </div> + <div className="form-section"> + <label htmlFor="Note" style={{ fontSize: 13 }}> + Note + </label> + <input + type="text" + name="Note" + id="Note" + value={formData.Note} + onChange={(e) => handleStrInput(e)} + className="addUserInput" + /> + </div> + <div className="form-section"> + <label htmlFor="Description" style={{ fontSize: 13 }}> + Description + </label> + <input + type="text" + name="Description" + id="Description" + value={formData.Description} + onChange={(e) => handleStrInput(e)} + className="addUserInput" + /> + </div> + {/* <SelectFolder onSuccess={handleFolder} folderCls={"contracts_Template"} /> */} + <div className="buttoncontainer"> + <button type="submit" className="submitbutton"> + Submit + </button> + </div> + </form> + </div> + </div> + ); +}; + +export default EditTemplate; diff --git a/microfrontends/SignDocuments/src/Component/component/LinkUserModal.js b/microfrontends/SignDocuments/src/Component/component/LinkUserModal.js index 05572e78d..0f5d9645b 100644 --- a/microfrontends/SignDocuments/src/Component/component/LinkUserModal.js +++ b/microfrontends/SignDocuments/src/Component/component/LinkUserModal.js @@ -1,33 +1,16 @@ import React from "react"; -import Modal from "react-bootstrap/Modal"; -import SelectSigners from "./SelectSigners"; -import AddUser from "./AddUser"; +import SelectSigners from "../../premitives/SelectSigners"; +import AddUser from "../../premitives/AddUser"; +import ModalUi from "../../premitives/ModalUi"; const LinkUserModal = (props) => { return ( - <Modal show={props.isAddUser[props.uniqueId]}> - <Modal.Header - className={"bg-info"} - style={{ - display: "flex", - justifyContent: "space-between", - alignItems: "center" - }} - > - <span style={{ color: "white" }}>Add/Choose Signer</span> - <span - style={{ color: "white", cursor: "pointer" }} - onClick={() => props.closePopup()} - > - X - </span> - </Modal.Header> - <Modal.Body> - <SelectSigners + <ModalUi title={"Add/Choose Signer"} isOpen={props.isAddUser[props.uniqueId]} handleClose={props.closePopup}> + <SelectSigners details={props.handleAddUser} closePopup={props.closePopup} /> - <div style={{ display: "flex", alignItems: "center", gap: 5 }}> + <div style={{ display: "flex", alignItems: "center", gap: 5 }}> <span style={{ height: 1, @@ -45,8 +28,7 @@ const LinkUserModal = (props) => { ></span> </div> <AddUser details={props.handleAddUser} closePopup={props.closePopup} /> - </Modal.Body> - </Modal> + </ModalUi> ); }; diff --git a/microfrontends/SignDocuments/src/Component/component/header.js b/microfrontends/SignDocuments/src/Component/component/header.js index 4d66d968a..cdf13b65f 100644 --- a/microfrontends/SignDocuments/src/Component/component/header.js +++ b/microfrontends/SignDocuments/src/Component/component/header.js @@ -35,7 +35,8 @@ function Header({ alreadySign, isSignYourself, setIsEmail, - completeBtnTitle + completeBtnTitle, + setIsEditTemplate }) { const isMobile = window.innerWidth < 767; const navigate = useNavigate(); @@ -346,7 +347,7 @@ function Header({ }} > <i - class="fa fa-envelope" + className="fa fa-envelope" style={{ marginRight: "2px" }} aria-hidden="true" ></i> @@ -552,6 +553,11 @@ function Header({ )} <div> + {setIsEditTemplate && ( + <button onClick={() => setIsEditTemplate(true)} style={{border:"none", outline:"none", textAlign:"center"}}> + <i className="fa-solid fa-gear fa-lg"></i> + </button> + )} <button onClick={() => { navigate(-1); @@ -724,7 +730,7 @@ function Header({ onClick={() => setIsEmail(true)} > <i - class="fa fa-envelope" + className="fa fa-envelope" style={{ color: "white", fontSize: "15px", diff --git a/microfrontends/SignDocuments/src/Component/component/signerListPlace.js b/microfrontends/SignDocuments/src/Component/component/signerListPlace.js index 50ef2c81e..0dce932a5 100644 --- a/microfrontends/SignDocuments/src/Component/component/signerListPlace.js +++ b/microfrontends/SignDocuments/src/Component/component/signerListPlace.js @@ -13,7 +13,8 @@ function SignerListPlace({ setUniqueId, setRoleName, handleDeleteUser, - handleRoleChange + handleRoleChange, + handleOnBlur }) { const color = [ "#93a3db", @@ -45,7 +46,7 @@ function SignerListPlace({ "#cc9900" ]; const [isHover, setIsHover] = useState(); - + const [isEdit, setIsEdit] = useState(false); //function for onhover signer name change background color const onHoverStyle = (ind, blockColor) => { const style = { @@ -107,7 +108,7 @@ function SignerListPlace({ padding: "5px" }} > - <span className="signedStyle">Reicipents</span> + <span className="signedStyle">Recipients</span> </div> <div className="signerList"> @@ -183,24 +184,47 @@ function SignerListPlace({ }} > {obj.Name ? ( - <span className="userName">{obj.Name}</span> + <span + className="userName" + style={{ cursor: "default" }} + > + {obj.Name} + </span> ) : ( <> - {handleRoleChange ? ( - <span - className="userName" - contentEditable - onBlur={(e) => handleRoleChange(e, obj.Id)} - > - {obj.Role} - </span> - ) : ( - <span className="userName">{obj.Role}</span> - )} + <span + className="userName" + onClick={() => { + setIsEdit({ [obj.Id]: true }); + setRoleName(obj.Role); + }} + > + {isEdit?.[obj.Id] && handleRoleChange ? ( + <input + style={{ + backgroundColor: "transparent", + width: "inherit" + }} + value={obj.Role} + onChange={(e) => handleRoleChange(e, obj.Id)} + onBlur={() => { + setIsEdit({}); + handleOnBlur(obj.Role, obj.Id); + }} + /> + ) : ( + obj.Role + )} + </span> </> )} {obj.Email && ( - <span className="useEmail">{obj.Email}</span> + <span + className="useEmail" + style={{ cursor: "default" }} + > + {obj.Email} + </span> )} </div> </div> diff --git a/microfrontends/SignDocuments/src/css/AddUser.css b/microfrontends/SignDocuments/src/css/AddUser.css index 712df7668..0e52ba2a0 100644 --- a/microfrontends/SignDocuments/src/css/AddUser.css +++ b/microfrontends/SignDocuments/src/css/AddUser.css @@ -50,23 +50,30 @@ } .submitbutton { - background-color: #1ab6ce; - font-size: 0.875rem; - color: white; - padding: 0.5rem 1rem; - border-radius: 0.5rem; - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2); + background: #1ab6ce; + border-radius: 2px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); + border: none; + text-transform: uppercase; + font-size: 13px; + font-weight: 600; + padding: 0.375rem 0.75rem; + text-align: center; + color: #ffffff; outline: none; } - /* For classes: bg-[#188ae2] text-sm text-white px-4 py-2 rounded ml-2 shadow focus:outline-none */ .resetbutton { background-color: #188ae2; - font-size: 0.875rem; - color: white; - padding: 0.5rem 1rem; - border-radius: 0.5rem; - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2); - margin-left: 0.5rem; + border-radius: 2px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); + border: none; + text-transform: uppercase; + font-size: 13px; + font-weight: 600; + padding: 0.375rem 0.75rem; + text-align: center; + color: #ffffff; outline: none; + margin-left: 8px; } \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/css/ModalUi.css b/microfrontends/SignDocuments/src/css/ModalUi.css new file mode 100644 index 000000000..68ba3ae79 --- /dev/null +++ b/microfrontends/SignDocuments/src/css/ModalUi.css @@ -0,0 +1,71 @@ +.modaloverlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.75); + justify-content: center; + align-items: center; + z-index: 900; +} + +.modalcontainer { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + z-index: 901; + max-height: 80%; + min-width: 500px; + overflow-y: auto; + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* Internet Explorer and Edge */ +} + +/* Hide scrollbar for Webkit browsers */ +.modalcontainer::-webkit-scrollbar { + display: none; +} + +.modalheader { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + border-bottom: 1px solid #ccc; + color: #ffffff; +} + +/* Styling for the modal title */ +.modaltitle { + font-size: 1.2rem; + font-weight:normal; +} + +/* Styling for the close button */ +.closebtn { + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; +} + +@media (max-width:767px) { + + .modalcontainer { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + z-index: 1000; + max-height: 80%; + overflow-y: auto; + } +} \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/Component/component/AddUser.js b/microfrontends/SignDocuments/src/premitives/AddUser.js similarity index 98% rename from microfrontends/SignDocuments/src/Component/component/AddUser.js rename to microfrontends/SignDocuments/src/premitives/AddUser.js index b4c76395b..07b6b1217 100644 --- a/microfrontends/SignDocuments/src/Component/component/AddUser.js +++ b/microfrontends/SignDocuments/src/premitives/AddUser.js @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import Parse from "parse"; import axios from "axios"; -import "../../css/AddUser.css"; +import "../css/AddUser.css"; const AddUser = (props) => { const [name, setName] = useState(""); const [phone, setPhone] = useState(""); @@ -209,7 +209,7 @@ const AddUser = (props) => { </div> )} <div className="form-wrapper"> - <div style={{ fontSize: 14 }}>Add User</div> + <div style={{ fontSize: 14, fontWeight: "700" }}>Add User</div> {isUserExist && ( <div className="form-section"> diff --git a/microfrontends/SignDocuments/src/premitives/Alert.js b/microfrontends/SignDocuments/src/premitives/Alert.js new file mode 100644 index 000000000..72e3d1458 --- /dev/null +++ b/microfrontends/SignDocuments/src/premitives/Alert.js @@ -0,0 +1,30 @@ +import React from "react"; + +const Alert = ({ children, type }) => { + const textcolor = type ? theme(type) : theme(); + function theme(color) { + switch (color) { + case "success": + return "border-[#c3e6cb] bg-[#d4edda] text-[#155724]"; + case "info": + return "border-[#adcdeb] bg-[#c1daf0] text-[#153756]"; + case "danger": + return "border-[#f0a8a8] bg-[#f4bebe] text-[#c42121]"; + default: + return "border-[#d6d6d6] bg-[#d9d9d9] text-[#575757]"; + } + } + return ( + <> + {children && ( + <div + className={`z-40 fixed top-20 left-1/2 transform -translate-x-1/2 border-[1px] text-sm ${textcolor} rounded py-[.75rem] px-[1.25rem] `} + > + {children} + </div> + )} + </> + ); +}; + +export default Alert; diff --git a/microfrontends/SignDocuments/src/premitives/CreateFolder.js b/microfrontends/SignDocuments/src/premitives/CreateFolder.js new file mode 100644 index 000000000..b9967570e --- /dev/null +++ b/microfrontends/SignDocuments/src/premitives/CreateFolder.js @@ -0,0 +1,147 @@ +import React, { useEffect, useState } from "react"; +import Parse from "parse"; +import Alert from "./Alert"; + +const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => { + const folderPtr = { + __type: "Pointer", + className: folderCls, + objectId: parentFolderId + }; + const [name, setName] = useState(""); + const [folderList, setFolderList] = useState([]); + const [isAlert, setIsAlert] = useState(false); + const [selectedParent, setSelectedParent] = useState(); + const [alert, setAlert] = useState({ type: "info", message: "" }); + useEffect(() => { + fetchFolder(); + // eslint-disable-next-line + }, []); + + const fetchFolder = async () => { + try { + const FolderQuery = new Parse.Query(folderCls); + if (parentFolderId) { + FolderQuery.equalTo("Folder", folderPtr); + FolderQuery.equalTo("Type", "Folder"); + } else { + FolderQuery.doesNotExist("Folder"); + FolderQuery.equalTo("Type", "Folder"); + } + + const res = await FolderQuery.find(); + if (res) { + const result = JSON.parse(JSON.stringify(res)); + if (result) { + setFolderList(result); + } + } + } catch (error) { + console.log("Err ", error); + } + }; + const handleCreateFolder = async (event) => { + event.preventDefault(); + if (name) { + const currentUser = Parse.User.current(); + const exsitQuery = new Parse.Query(folderCls); + exsitQuery.equalTo("Name", name); + exsitQuery.equalTo("Type", "Folder"); + if (parentFolderId) { + exsitQuery.equalTo("Folder", folderPtr); + } + const templExist = await exsitQuery.first(); + if (templExist) { + setAlert({ type: "dange", message: "Folder already exist!" }); + setIsAlert(true); + setTimeout(() => { + setIsAlert(false); + }, 1000); + } else { + const template = new Parse.Object(folderCls); + template.set("Name", name); + template.set("Type", "Folder"); + + if (selectedParent) { + template.set("Folder", { + __type: "Pointer", + className: folderCls, + objectId: selectedParent + }); + } else if (parentFolderId) { + template.set("Folder", folderPtr); + } + template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id)); + const res = await template.save(); + if (res) { + if (onSuccess) { + setAlert({ + type: "success", + message: "Folder created successfully!" + }); + setIsAlert(true); + setTimeout(() => { + setIsAlert(false); + }, 1000); + onSuccess(res); + } + } + } + } else { + setAlert({ type: "info", message: "Please fill folder name" }); + setIsAlert(true); + setTimeout(() => { + setIsAlert(false); + }, 1000); + } + }; + const handleOptions = (e) => { + setSelectedParent(e.target.value); + }; + return ( + <div> + {isAlert && <Alert type={alert.type}>{alert.message}</Alert>} + <div id="createFolder"> + <h1 className="text-base font-semibold">Create Folder</h1> + <div className="text-xs mt-2"> + <label className="block"> + Name<span style={{ color: "red", fontSize: 13 }}> *</span> + </label> + <input + className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs" + value={name} + onChange={(e) => setName(e.target.value)} + required + /> + </div> + <div className="text-xs mt-2"> + <label className="block">Parent Folder</label> + <select + value={selectedParent} + onChange={handleOptions} + className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs" + > + <option>select</option> + {folderList.length > 0 && + folderList.map((x) => ( + <option key={x.objectId} value={x.objectId}> + {x.Name} + </option> + ))} + </select> + </div> + <div> + <button + onClick={handleCreateFolder} + className="flex items-center rounded p-2 bg-[#33bbff] text-white mt-3" + > + <i className="fa-solid fa-plus mr-1"></i> + <span>Create</span> + </button> + </div> + </div> + </div> + ); +}; + +export default CreateFolder; diff --git a/microfrontends/SignDocuments/src/premitives/ModalUi.js b/microfrontends/SignDocuments/src/premitives/ModalUi.js new file mode 100644 index 000000000..68fe937c9 --- /dev/null +++ b/microfrontends/SignDocuments/src/premitives/ModalUi.js @@ -0,0 +1,29 @@ +import React from "react"; +import "../css/ModalUi.css"; +const ModalUi = ({ children, title, isOpen, handleClose, headerColor }) => { + return ( + <> + {isOpen && ( + <div className="modaloverlay"> + <div className="modalcontainer"> + {title && <div + style={{ background: headerColor ? headerColor : "#32a3ac" }} + className="modalheader" + > + <div className="modaltitle">{title}</div> + <div + className="closebtn" + onClick={() => handleClose && handleClose()} + > + × + </div> + </div>} + <div>{children}</div> + </div> + </div> + )} + </> + ); +}; + +export default ModalUi; diff --git a/microfrontends/SignDocuments/src/premitives/SelectFolder.js b/microfrontends/SignDocuments/src/premitives/SelectFolder.js new file mode 100644 index 000000000..c917155a5 --- /dev/null +++ b/microfrontends/SignDocuments/src/premitives/SelectFolder.js @@ -0,0 +1,348 @@ +import React, { useEffect, useState } from "react"; +import Parse from "parse"; +import CreateFolder from "./CreateFolder"; +import ModalUi from './ModalUi' + +const SelectFolder = ({ required, onSuccess, folderCls }) => { + const [isOpen, SetIsOpen] = useState(false); + const [clickFolder, setClickFolder] = useState(""); + const [selectFolder, setSelectedFolder] = useState({}); + const [folderList, setFolderList] = useState([]); + const [tabList, setTabList] = useState([]); + const [isLoader, setIsLoader] = useState(false); + const [folderPath, setFolderPath] = useState(""); + const [isAdd, setIsAdd] = useState(false); + useEffect(() => { + if (isOpen) { + setIsAdd(false); + setClickFolder({}); + setFolderList([]); + setTabList([]); + fetchFolder(); + } + }, [isOpen]); + const fetchFolder = async (folderPtr) => { + setIsLoader(true); + try { + const FolderQuery = new Parse.Query(folderCls); + if (folderPtr) { + FolderQuery.equalTo("Folder", folderPtr); + FolderQuery.equalTo("Type", "Folder"); + } else { + FolderQuery.doesNotExist("Folder"); + FolderQuery.equalTo("Type", "Folder"); + } + + const res = await FolderQuery.find(); + if (res) { + const result = JSON.parse(JSON.stringify(res)); + if (result) { + setFolderList(result); + setIsLoader(false); + } + setIsLoader(false); + } + } catch (error) { + setIsLoader(false); + } + }; + const handleSelect = (item) => { + setFolderList([]); + setClickFolder({ ObjectId: item.objectId, Name: item.Name }); + if (tabList.length > 0) { + const tab = tabList.some((x) => x.objectId === item.objectId); + if (!tab) { + setTabList((tabs) => [...tabs, item]); + const folderPtr = { + __type: "Pointer", + className: folderCls, + objectId: item.objectId + }; + fetchFolder(folderPtr); + } + } else { + setTabList((tabs) => [...tabs, item]); + const folderPtr = { + __type: "Pointer", + className: folderCls, + objectId: item.objectId + }; + + fetchFolder(folderPtr); + } + }; + + const handleSubmit = () => { + let url = "Root"; + tabList.forEach((t) => { + url = url + " / " + t.Name; + }); + setFolderPath(url); + setSelectedFolder(clickFolder); + if (onSuccess) { + onSuccess(clickFolder); + } + SetIsOpen(false); + }; + const handleCancel = () => { + SetIsOpen(false); + setClickFolder({}); + setFolderList([]); + setTabList([]); + }; + + const removeTabListItem = async (e, i) => { + e.preventDefault(); + // setEditable(false); + if (!isAdd) { + setIsLoader(true); + let folderPtr; + if (i) { + setFolderList([]); + let list = tabList.filter((itm, j) => { + if (j <= i) { + return itm; + } + }); + let _len = list.length - 1; + folderPtr = { + __type: "Pointer", + className: folderCls, + objectId: list[_len].objectId + }; + setTabList(list); + } else { + setClickFolder({}); + setSelectedFolder({}); + setFolderList([]); + setTabList([]); + } + fetchFolder(folderPtr); + } + }; + const handleCreate = () => { + setIsAdd(!isAdd); + }; + const handleAddFolder = () => { + setFolderList([]); + if (clickFolder && clickFolder.ObjectId) { + fetchFolder({ + __type: "Pointer", + className: folderCls, + objectId: clickFolder.ObjectId + }); + } else { + fetchFolder(); + } + }; + return ( + <div className="text-xs mt-2"> + <div> + <label className="block"> + Select Folder + {required && <span style={{ color: "red", fontSize: 13 }}> *</span>} + </label> + </div> + <div className="rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center"> + <div> + <i + className="far fa-folder-open text-[40px] text-[#33bbff]" + style={{ fontSize: "40px" }} + aria-hidden="true" + ></i> + </div> + <div className="font-semibold "> + <div className="flex items-center gap-2"> + <p> + {selectFolder && selectFolder.Name ? selectFolder.Name : "Root"} + </p> + <div className="text-black text-sm" onClick={() => SetIsOpen(true)}> + <i + className="fa fa-pencil" + title="Select Folder" + aria-hidden="true" + ></i> + </div> + </div> + <p className="text-[10px] text-gray-400"> + {selectFolder && selectFolder.Name ? `(${folderPath})` : ""} + </p> + </div> + </div> + <ModalUi id="asd" title={"Select Folder"} isOpen={isOpen} handleClose={handleCancel}> <div className="w-full min-w-[300px] md:min-w-[500px] px-3"> + <div className="py-2 text-[#ac4848] text-[14px] font-[500]"> + <span + className="cursor-pointer" + title="Root" + onClick={(e) => removeTabListItem(e)} + > + Root /{" "} + </span> + {tabList && + tabList.map((tab, i) => ( + <React.Fragment key={`${tab.objectId}-${i}`}> + <span + className="cursor-pointer" + title={tab.Name} + onClick={(e) => removeTabListItem(e, i)} + > + {tab.Name} + </span> + {" / "} + </React.Fragment> + ))} + <hr /> + </div> + <div className="mt-2 mb-3"> + {!isAdd && + folderList.length > 0 && + folderList.map((folder) => ( + <div + key={folder.Name} + className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer" + onClick={() => handleSelect(folder)} + > + <div className="flex items-center gap-2"> + <i + className="fa fa-folder text-[#33bbff] text-[1.4rem]" + aria-hidden="true" + ></i> + <span className="font-semibold">{folder.Name}</span> + </div> + </div> + ))} + {isAdd && ( + <CreateFolder + parentFolderId={clickFolder && clickFolder.ObjectId} + folderCls={folderCls} + onSuccess={handleAddFolder} + /> + )} + {isLoader && ( + <div className="flex justify-center"> + <i className="fa-solid fa-spinner fa-spin-pulse text-[30px]"></i> + </div> + )} + </div> + </div> + <hr /> + <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]"> + <div + className="text-[30px] cursor-pointer text-[#33bbff]" + title="Save Here" + onClick={handleCreate} + > + {isAdd ? ( + <i className="fa-solid fa-arrow-left" aria-hidden="true"></i> + ) : ( + <i className="fa-solid fa-square-plus" aria-hidden="true"></i> + )} + </div> + <div + className="text-[30px] cursor-pointer" + title="Save Here" + onClick={handleSubmit} + > + <i className="fas fa-save" aria-hidden="true"></i> + </div> + </div></ModalUi> + {/* {isOpen && ( + <div + className={`fixed z-40 top-20 left-1/2 transform -translate-x-1/2 border-[1px] text-sm bg-white rounded `} + > + <div className="flex justify-between items-center py-[.75rem] px-[1.25rem] bg-[#f5f5f5]"> + <div className="font-semibold text-lg text-black"> + Select Folder + </div> + <div + onClick={handleCancel} + className="px-2 py-1 border-[1px] border-[#8a8a8a] bg-white rounded cursor-pointer" + > + <i className="fa-solid fa-xmark"></i> + </div> + </div> + <hr /> + <div className="w-full min-w-[300px] md:min-w-[500px] px-3"> + <div className="py-2 text-[#ac4848] text-[14px] font-[500]"> + <span + className="cursor-pointer" + title="Root" + onClick={(e) => removeTabListItem(e)} + > + Root /{" "} + </span> + {tabList && + tabList.map((tab, i) => ( + <React.Fragment key={`${tab.objectId}-${i}`}> + <span + className="cursor-pointer" + title={tab.Name} + onClick={(e) => removeTabListItem(e, i)} + > + {tab.Name} + </span> + {" / "} + </React.Fragment> + ))} + <hr /> + </div> + <div className="mt-2 mb-3"> + {!isAdd && + folderList.length > 0 && + folderList.map((folder) => ( + <div + key={folder.Name} + className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer" + onClick={() => handleSelect(folder)} + > + <div className="flex items-center gap-2"> + <i + className="fa fa-folder text-[#33bbff] text-[1.4rem]" + aria-hidden="true" + ></i> + <span className="font-semibold">{folder.Name}</span> + </div> + </div> + ))} + {isAdd && ( + <CreateFolder + parentFolderId={clickFolder && clickFolder.ObjectId} + folderCls={folderCls} + onSuccess={handleAddFolder} + /> + )} + {isLoader && ( + <div className="flex justify-center"> + <i className="fa-solid fa-spinner fa-spin-pulse text-[30px]"></i> + </div> + )} + </div> + </div> + <hr /> + <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]"> + <div + className="text-[30px] cursor-pointer text-[#33bbff]" + title="Save Here" + onClick={handleCreate} + > + {isAdd ? ( + <i className="fa-solid fa-arrow-left" aria-hidden="true"></i> + ) : ( + <i className="fa-solid fa-square-plus" aria-hidden="true"></i> + )} + </div> + <div + className="text-[30px] cursor-pointer" + title="Save Here" + onClick={handleSubmit} + > + <i className="fas fa-save" aria-hidden="true"></i> + </div> + </div> + </div> + )} */} + </div> + ); +}; + +export default SelectFolder; diff --git a/microfrontends/SignDocuments/src/Component/component/SelectSigners.js b/microfrontends/SignDocuments/src/premitives/SelectSigners.js similarity index 96% rename from microfrontends/SignDocuments/src/Component/component/SelectSigners.js rename to microfrontends/SignDocuments/src/premitives/SelectSigners.js index 12f88e894..86683de0e 100644 --- a/microfrontends/SignDocuments/src/Component/component/SelectSigners.js +++ b/microfrontends/SignDocuments/src/premitives/SelectSigners.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; import Parse from "parse"; -import "../../css/AddUser.css"; +import "../css/AddUser.css"; import AsyncSelect from "react-select/async"; const customStyles = { @@ -68,7 +68,7 @@ const SelectSigners = (props) => { <div className="addusercontainer"> <div className="form-wrapper"> <div className="form-section"> - <label style={{ fontSize: 14 }}>Choose User</label> + <label style={{ fontSize: 14 , fontWeight: "700"}}>Choose User</label> <AsyncSelect cacheOptions defaultOptions