feat: implement document delete and move funationality in openSign-drive

microfrontends/SignDocuments/src/premitives/SelectFolder.js

@@ -1,48 +1,85 @@
 import React, { useEffect, useState } from "react";
-import Parse from "parse";
 import CreateFolder from "./CreateFolder";
-import ModalUi from './ModalUi'
+import ModalUi from "./ModalUi";
+import axios from "axios";
+import { themeColor } from "../utils/ThemeColor/backColor";
+import "../css/selectFolder.css";
 
-const SelectFolder = ({ required, onSuccess, folderCls }) => {
-  const [isOpen, SetIsOpen] = useState(false);
+const SelectFolder = ({
+  required,
+  onSuccess,
+  folderCls,
+  isOpenModal,
+  setIsOpenMoveModal
+}) => {
   const [clickFolder, setClickFolder] = useState("");
-  const [selectFolder, setSelectedFolder] = useState({});
+  // const [selectFolder, setSelectedFolder] = useState({});
   const [folderList, setFolderList] = useState([]);
   const [tabList, setTabList] = useState([]);
   const [isLoader, setIsLoader] = useState(false);
-  const [folderPath, setFolderPath] = useState("");
+  // const [folderPath, setFolderPath] = useState("");
   const [isAdd, setIsAdd] = useState(false);
   useEffect(() => {
-    if (isOpen) {
+    if (isOpenModal) {
       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);
+    // try {
+    //   console.log("folder",folderCls,folderPtr)
+    //   const FolderQuery = new Parse.Query('contracts_Document');
+    //   console.log("folder",FolderQuery)
+    //   if (folderPtr) {
+    //     FolderQuery.equalTo("Folder", folderPtr);
+    //     FolderQuery.equalTo("Type", "Folder");
+    //   } else {
+    //     FolderQuery.doesNotExist("Folder");
+    //     FolderQuery.equalTo("Type", "Folder");
+    //   }
+    //   console.log("newres",FolderQuery)
+    //   const res = await FolderQuery.count();
+    //   console.log("res",res)
+    //   // if (res) {
+    //   //   const result = JSON.parse(JSON.stringify(res));
+    //   //   if (result) {
+    //   //     setFolderList(result);
+    //   //     setIsLoader(false);
+    //   //   }
+    //   //   setIsLoader(false);
+    //   // }
+    // } catch (error) {
+    //   setIsLoader(false);
+    // }
+    let url;
+    const classUrl = `${localStorage.getItem("baseUrl")}classes/${folderCls}`;
+
+    if (folderPtr) {
+      url = `${classUrl}?where={"Folder": {"__type":"Pointer","className":${folderCls},"objectId":"${folderPtr.objectId}"},"Type":"Folder"}`;
+    } else {
+      url = `${classUrl}?where={"Folder":{"$exists":false},"Type":"Folder"}`;
+    }
+    try {
+      const res = await axios.get(url, {
+        headers: {
+          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
         }
+      });
+
+      if (res.data.results) {
+        setFolderList(res.data.results);
         setIsLoader(false);
+        setIsAdd(false);
       }
-    } catch (error) {
+      setIsLoader(false);
+    } catch (err) {
+      console.log("err", err);
       setIsLoader(false);
     }
   };
@@ -77,15 +114,15 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
     tabList.forEach((t) => {
       url = url + " / " + t.Name;
     });
-    setFolderPath(url);
-    setSelectedFolder(clickFolder);
+    // setFolderPath(url);
+    // setSelectedFolder(clickFolder);
     if (onSuccess) {
       onSuccess(clickFolder);
     }
-    SetIsOpen(false);
+    setIsOpenMoveModal(false);
   };
   const handleCancel = () => {
-    SetIsOpen(false);
+    setIsOpenMoveModal(false);
     setClickFolder({});
     setFolderList([]);
     setTabList([]);
@@ -113,7 +150,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
         setTabList(list);
       } else {
         setClickFolder({});
-        setSelectedFolder({});
+        // setSelectedFolder({});
         setFolderList([]);
         setTabList([]);
       }
@@ -135,9 +172,10 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
       fetchFolder();
     }
   };
+
   return (
     <div className="text-xs mt-2">
-      <div>
+      {/* <div>
         <label className="block">
           Select Folder
           {required && <span style={{ color: "red", fontSize: 13 }}> *</span>}
@@ -168,84 +206,132 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
             {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> */}
+      <ModalUi
+        id="asd"
+        title={"Select Folder"}
+        isOpen={isOpenModal}
+        handleClose={handleCancel}
+      >
+        {" "}
+        <div style={{ width: "100%", padding: "1rem" }}>
+          <div
+            style={{
+              paddingTop: "2px",
+              color: "#ac4848",
+              fontSize: "14px",
+              fontWeight: "500"
+            }}
+          >
+            <span
+              style={{ cursor: "pointer" }}
+              title="Root"
+              onClick={(e) => {
+                setIsAdd(false);
+                removeTabListItem(e);
+              }}
+            >
+              Root /{" "}
+            </span>
+            {tabList &&
+              tabList.map((tab, i) => (
+                <React.Fragment key={`${tab.objectId}-${i}`}>
+                  <span
+                    style={{ cursor: "pointer" }}
+                    title={tab.Name}
+                    onClick={(e) => {
+                      setIsAdd(false);
+                      removeTabListItem(e, i);
+                    }}
                   >
-                    <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>
+                    {tab.Name}
+                  </span>
+                  {" / "}
+                </React.Fragment>
+              ))}
+            <hr className="hrStyle" />
           </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>
+          <div style={{ margin: "2px 0 3px 0" }}>
+            {!isAdd &&
+              folderList.length > 0 &&
+              folderList.map((folder) => (
+                <div
+                  key={folder.Name}
+                  style={{
+                    border: "1.7px solid #c3bcbc",
+                    padding: "6px",
+                    marginBottom: "5px",
+                    cursor: "pointer"
+                  }}
+                  onClick={() => handleSelect(folder)}
+                >
+                  <div
+                    style={{ display: "flex", alignItems: "center", gap: "2" }}
+                  >
+                    <i
+                      style={{ color: "#33bbff", fontSize: "1.4rem" }}
+                      className="fa fa-folder   "
+                      aria-hidden="true"
+                    ></i>
+                    <span
+                      style={{
+                        fontWeight: "500",
+                        marginLeft: "10px",
+                        fontSize: "14px"
+                      }}
+                    >
+                      {folder.Name}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            {isAdd && (
+              <CreateFolder
+                parentFolderId={clickFolder && clickFolder.ObjectId}
+                folderCls={folderCls}
+                onSuccess={handleAddFolder}
+                setIsAdd={setIsAdd}
+              />
+            )}
+            {isLoader && (
+              <div style={{ display: "flex", justifyContent: "center" }}>
+                <i
+                  style={{ fontSize: "30px" }}
+                  className="fa-solid fa-spinner fa-spin-pulse "
+                ></i>
+              </div>
+            )}
+          </div>
+        </div>
+        <hr className="hrStyle" />
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: "0 16px"
+          }}
+        >
+          <div
+            style={{ fontSize: "30px", cursor: "pointer", color: themeColor() }}
+            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
+            style={{ fontSize: "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 `}