add/Choose form to link user and ui changes

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) {

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 }) => {
           </p>
         </div>
       </div>
-      {isOpen && (
+      <ModalUi 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 `}
         >
@@ -262,7 +343,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
             </div>
           </div>
         </div>
-      )}
+      )} */}
     </div>
   );
 };

apps/OpenSign/src/index.css

@@ -4,4 +4,15 @@
 
 body{
     background-color: white;
-}
+}
+
+/* Custom CSS to hide scrollbar */
+.hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  
+.hide-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+  

apps/OpenSign/src/primitives/ModalUi.js

@@ -0,0 +1,26 @@
+import React from "react";
+const ModalUi = ({ children, title, isOpen, handleClose }) => {
+
+  return (
+    <>
+      {isOpen && (
+        <div className="fixed z-[999] top-0 left-0 w-[100%] h-[100%] bg-black bg-opacity-[75%]">
+          <div className="fixed z-[1000] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 md:min-w-500px overflow-y-auto hide-scrollbar">
+            <div className="flex justify-between bg-[#32a3ac] rounded-t items-center py-[10px] px-[20px] text-white">
+              <div className="text-[1.2rem] font-normal">{title}</div>
+              <div
+                className="text-[1.5rem] cursor-pointer"
+                onClick={() => handleClose && handleClose()}
+              >
+                &times;
+              </div>
+            </div>
+            <div >{children}</div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ModalUi;

apps/OpenSign/src/primitives/TemplateForm.js

@@ -302,13 +302,13 @@ const TemplateForm = () => {
         <SelectFolder onSuccess={handleFolder} folderCls={templateCls} />
         <div className="flex items-center mt-3 gap-2 text-white">
           <button
-            className="px-2 py-2 uppercase rounded shadow-md bg-sky-300 text-xs font-semibold"
+            className="bg-[#1ab6ce] rounded-sm shadow-md text-[14px] font-semibold uppercase text-white py-1.5 px-2.5 focus:outline-none"
             type="submit"
           >
             Submit
           </button>
           <div
-            className="px-2 py-2 uppercase rounded shadow-md bg-blue-500 text-xs font-semibold"
+            className="bg-[#188ae2] rounded-sm shadow-md text-[14px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
             onClick={() => handleReset()}
           >
             Reset

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'],
       };