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

2026-08-17 21:25:54 +02:00 · 2024-01-08 22:12:23 +05:30
parent 7aaa1876c8
commit 2ed987fe10
8 changed files with 510 additions and 241 deletions
@@ -10,6 +10,7 @@ import { getHostUrl } from "../../../utils/Utils";
 import { useNavigate } from "react-router-dom";
 import Table from "react-bootstrap/Table";
 import * as HoverCard from "@radix-ui/react-hover-card";
+import SelectFolder from "../../../premitives/SelectFolder";

 function PdfFileComponent({
  pdfData,
@@ -22,7 +23,9 @@ function PdfFileComponent({
  const [rename, setRename] = useState("");
  const [renameValue, setRenameValue] = useState("");
  const inputRef = useRef(null);
-
+  const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
+  const [selectDoc, setSelectDoc] = useState();
+  const contextMenu = ["Download", "Rename", "Delete", "Move"];
  const navigate = useNavigate();

  //to focus input box on press rename to change doc name
@@ -212,19 +215,63 @@ function PdfFileComponent({
    };

    const handleMenuItemClick = (selectType, data) => {
-      // console.log("data",data)
-      if (selectType === "Download") {
-        // console.log("download")
-        const pdfName = data && data.Name;
-        const pdfUrl = data && data.SignedUrl ? data.SignedUrl : data.URL;
-        saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
-      } else if (selectType === "Rename") {
-        // console.log("rename")
-        setRenameValue(data.Name);
-        setRename(data.objectId);
+      switch (selectType) {
+        case "Download":
+          const pdfName = data && data.Name;
+          const pdfUrl = data && data.SignedUrl ? data.SignedUrl : data.URL;
+          saveAs(
+            pdfUrl,
+            `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`
+          );
+          break;
+        case "Rename":
+          setRenameValue(data.Name);
+          setRename(data.objectId);
+          break;
+        case "Delete":
+          handleDeleteDocument(data);
+          break;
+
+        case "Move":
+          handleMoveDocument(data);
+          break;
      }
    };

+    //function for delete document
+    const handleDeleteDocument = async (docData) => {
+      const docId = docData.objectId;
+      const data = {
+        IsArchive: true
+      };
+
+      await axios
+        .put(
+          `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+            "_appName"
+          )}_Document/${docId}`,
+          data,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+              "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+            }
+          }
+        )
+        .then((result) => {
+          const res = result.data;
+          const updatedData = pdfData.filter((x) => x.objectId !== docId);
+          setPdfData(updatedData);
+        })
+        .catch((err) => {
+          console.log("err", err);
+        });
+    };
+    const handleMoveDocument = async (docData) => {
+      setIsOpenMoveModal(true);
+      setSelectDoc(docData);
+    };
    const sanitizeFileName = (pdfName) => {
      // Replace spaces with underscore
      return pdfName.replace(/ /g, "_");
@@ -236,6 +283,13 @@ function PdfFileComponent({
      }
    };

+    const signersName = () => {
+      const getSignersName = signerExist.map((data) => data.Name);
+      const signerName = getSignersName.join(",");
+
+      return <span className="statusSpan">{signerName} </span>;
+    };
+
    return listType === "table" ? (
      data.Type === "Folder" ? (
        <tr onClick={() => handleOnclikFolder(data)}>
@@ -355,14 +409,6 @@ function PdfFileComponent({
              sideOffset={5}
              align="end"
            >
-              {/* <ContextMenu.Item
-                    onClick={() => handleMenuItemClick("Download", data)}
-                    onSelect={(e) => console.log("event", e)}
-                    className="ContextMenuItem"
-                  >
-                    Download
-                  </ContextMenu.Item> */}
-
              <ContextMenu.Item
                onClick={() => handleMenuItemClick("Rename", data)}
                className="ContextMenuItem"
@@ -428,14 +474,6 @@ function PdfFileComponent({
              sideOffset={5}
              align="end"
            >
-              {/* <ContextMenu.Item
-               onClick={() => handleMenuItemClick("Download", data)}
-               onSelect={(e) => console.log("event", e)}
-               className="ContextMenuItem"
-             >
-               Download
-             </ContextMenu.Item> */}
-
              <ContextMenu.Item
                onClick={() => handleMenuItemClick("Rename", data)}
                className="ContextMenuItem"
@@ -447,7 +485,7 @@ function PdfFileComponent({
        </ContextMenu.Root>
      </div>
    ) : (
-      <HoverCard.Root>
+      <HoverCard.Root openDelay={0} closeDelay={100}>
        <HoverCard.Trigger asChild>
          <div>
            <ContextMenu.Root>
@@ -518,9 +556,22 @@ function PdfFileComponent({
                  sideOffset={5}
                  align="end"
                >
-                  <ContextMenu.Item
+                  {contextMenu.map((menuType, ind) => {
+                    return (
+                      <ContextMenu.Item
+                        key={ind}
+                        onClick={() => handleMenuItemClick(menuType, data)}
+                        // onSelect={(e) => console.log("event", e)}
+                        className="ContextMenuItem"
+                      >
+                        {menuType}
+                      </ContextMenu.Item>
+                    );
+                  })}
+
+                  {/* <ContextMenu.Item
                    onClick={() => handleMenuItemClick("Download", data)}
-                    onSelect={(e) => console.log("event", e)}
+                    // onSelect={(e) => console.log("event", e)}
                    className="ContextMenuItem"
                  >
                    Download
@@ -532,6 +583,18 @@ function PdfFileComponent({
                  >
                    Rename
                  </ContextMenu.Item>
+                  <ContextMenu.Item
+                    onClick={() => handleMenuItemClick("Delete", data)}
+                    className="ContextMenuItem"
+                  >
+                    Delete
+                  </ContextMenu.Item>
+                  <ContextMenu.Item
+                    onClick={() => handleMenuItemClick("Move", data)}
+                    className="ContextMenuItem"
+                  >
+                    Move
+                  </ContextMenu.Item> */}
                </ContextMenu.Content>
              </ContextMenu.Portal>
            </ContextMenu.Root>
@@ -554,13 +617,7 @@ function PdfFileComponent({
            {signerExist && (
              <>
                <strong style={{ fontSize: "13px" }}>Signers: </strong>
-                {signerExist.map((data, key) => {
-                  return (
-                    <React.Fragment key={key}>
-                      <span className="statusSpan">{data.Name}, </span>
-                    </React.Fragment>
-                  );
-                })}
+                {signersName()}
              </>
            )}
            <HoverCard.Arrow className="HoverCardArrow" />
@@ -569,41 +626,113 @@ function PdfFileComponent({
      </HoverCard.Root>
    );
  };
-  //component to handle type of document and render according to type

-  return isList ? (
-    <div className="container" style={{ overflowX: "auto" }}>
-      <Table striped bordered hover>
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Created Date</th>
-            <th>Type</th>
-            <th>Status</th>
-            <th>Action</th>
-          </tr>
-        </thead>
-        <tbody>
+  //function for move document from one folder to another folder
+  const handleMoveFolder = async (selectFolderData) => {
+    const selecFolderId = selectDoc?.Folder?.objectId;
+    const moveFolderId = selectFolderData?.ObjectId;
+    let updateDocId = selectDoc?.objectId;
+    let updateData;
+    const checkExist = moveFolderId
+      ? selecFolderId === moveFolderId
+        ? true
+        : false
+      : false;
+
+    if (!checkExist) {
+      if (moveFolderId) {
+        updateData = {
+          Folder: {
+            __type: "Pointer",
+            className: `${localStorage.getItem("_appName")}_Document`,
+            objectId: moveFolderId
+          }
+        };
+      } else {
+        updateData = {
+          Folder: undefined
+        };
+      }
+
+      await axios
+        .put(
+          `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+            "_appName"
+          )}_Document/${updateDocId}`,
+          updateData,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+              "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+            }
+          }
+        )
+
+        .then((Listdata) => {
+          // console.log("Listdata ", Listdata);
+          const json = Listdata.data;
+
+          const updatedData = pdfData.filter((x) => x.objectId !== updateDocId);
+          setPdfData(updatedData);
+        })
+        .catch((err) => {
+          console.log("err", err);
+        });
+
+      setIsOpenMoveModal(false);
+    } else {
+      alert("folder already exist!");
+      setIsOpenMoveModal(false);
+    }
+  };
+
+  //component to handle type of document and render according to type
+  return (
+    <>
+      {isList ? (
+        <div className="container" style={{ overflowX: "auto" }}>
+          <Table striped bordered hover>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Created Date</th>
+                <th>Type</th>
+                <th>Status</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {pdfData.map((data, ind) => {
+                return (
+                  <React.Fragment key={ind}>
+                    {handleFolderData(data, ind, "table")}
+                  </React.Fragment>
+                );
+              })}
+            </tbody>
+          </Table>
+        </div>
+      ) : (
+        <div className="pdfContainer">
          {pdfData.map((data, ind) => {
            return (
-              <React.Fragment key={ind}>
-                {handleFolderData(data, ind, "table")}
-              </React.Fragment>
+              <div className="box" key={ind}>
+                {handleFolderData(data, ind, "list")}
+              </div>
            );
          })}
-        </tbody>
-      </Table>
-    </div>
-  ) : (
-    <div className="pdfContainer">
-      {pdfData.map((data, ind) => {
-        return (
-          <div className="box" key={ind}>
-            {handleFolderData(data, ind, "list")}
-          </div>
-        );
-      })}
-    </div>
+        </div>
+      )}
+      {isOpenMoveModal && (
+        <SelectFolder
+          onSuccess={handleMoveFolder}
+          isOpenModal={isOpenMoveModal}
+          folderCls={"contracts_Document"}
+          setIsOpenMoveModal={setIsOpenMoveModal}
+        />
+      )}
+    </>
  );
 }

@@ -12,6 +12,7 @@
  overflow: hidden;
  padding: 5px;
  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  z-index: 99;
 }

 .ContextMenuItem,
@@ -502,6 +503,7 @@ a {
  }

 }
+
@media (min-width: 310px) and (max-width:550px) {

  .pdfContainer {
@@ -9,6 +9,8 @@ import { themeColor, iconColor } from "../../utils/ThemeColor/backColor";
 import { getDrive } from "../../utils/Utils";
 import AlertComponent from "../component/alertComponent";
 import { useNavigate } from "react-router-dom";
+import Title from "../component/Title";
+import Parse from "parse";

 function PdfFile() {
  const navigate = useNavigate();
@@ -54,7 +56,9 @@ function PdfFile() {
      isLoad: true,
      message: "This might take some time"
    };
+
    setIsLoading(load);
+
    const driveDetails = await getDrive();
    if (driveDetails) {
      if (driveDetails.length > 0) {
@@ -62,7 +66,7 @@ function PdfFile() {
      }
      const data = [
        {
-          name: "OpenSignDrive™",
+          name: "OpenSign™ Drive",
          objectId: ""
        }
      ];
@@ -85,8 +89,11 @@ function PdfFile() {
      isLoad: true,
      message: "This might take some time"
    };
+
    setIsLoading(load);
+
    const driveDetails = await getDrive(docId);
+
    if (driveDetails) {
      if (driveDetails.length > 0) {
        setPdfData(driveDetails);
@@ -111,43 +118,53 @@ function PdfFile() {
    setIsFolder(true);
  };
  //function for handle folder name path
-  const handleRoute = (data) => {
+  const handleRoute = (index) => {
    let loadObj = {
      isLoad: true,
      message: "This might take some time"
    };
-    if (data.name === "LegaDrive™") {
-      setIsLoading(loadObj);
-      if (docId) {
-        setDocId();
-      } else {
-        setTimeout(() => {
-          const loadObj = {
-            isLoad: false
-          };
-          setIsLoading(loadObj);
-        }, 1000);
+    // if (data.name === "OpenSign™ Drive") {
+    //   setIsLoading(loadObj);
+    //   if (docId) {
+    //     setDocId();
+    //   } else {
+    //     setTimeout(() => {
+    //       const loadObj = {
+    //         isLoad: false
+    //       };
+    //       setIsLoading(loadObj);
+    //     }, 1000);
+    //   }
+    // } else if (data.name === folderName[folderName.length - 1].name) {
+    //   setIsLoading(loadObj);
+    //   setTimeout(() => {
+    //     const loadObj = {
+    //       isLoad: false
+    //     };
+    //     setIsLoading(loadObj);
+    //   }, 1000);
+    // } else {
+    //   const findIndex = folderName.findIndex(
+    //     (fold) => fold.objectId === data.objectId
+    //   );
+    //   const newFolder = folderName.slice(0, findIndex + 1);
+
+    //   setFolderName(newFolder);
+    //   const getLastId = newFolder[newFolder.length - 1];
+
+    //   setDocId(getLastId.objectId);
+    //   setIsLoading(loadObj);
+    // }
+
+    const updateFolderName = folderName.filter((x, i) => {
+      if (i <= index) {
+        return x;
      }
-    } else if (data.name === folderName[folderName.length - 1].name) {
-      setIsLoading(loadObj);
-      setTimeout(() => {
-        const loadObj = {
-          isLoad: false
-        };
-        setIsLoading(loadObj);
-      }, 1000);
-    } else {
-      const findIndex = folderName.findIndex(
-        (fold) => fold.objectId === data.objectId
-      );
-      const newFolder = folderName.slice(0, findIndex + 1);
+    });

-      setFolderName(newFolder);
-      const getLastId = newFolder[newFolder.length - 1];
-
-      setDocId(getLastId.objectId);
-      setIsLoading(loadObj);
-    }
+    setFolderName(updateFolderName);
+    const getLastId = updateFolderName[updateFolderName.length - 1];
+    setDocId(getLastId.objectId);
  };

  //function for add new folder name
@@ -160,7 +177,6 @@ function PdfFile() {
  const handleAddFolder = async () => {
    if (newFolderName) {
      setIsFolderLoader(true);
-
      const getParentObjId = folderName[folderName.length - 1];
      const parentId = getParentObjId && getParentObjId.objectId;
      let data;
@@ -329,8 +345,38 @@ function PdfFile() {
    };
  }, [isShowSort]);

+  const handleFolderTab = (folderData, isMove) => {
+    return folderData.map((data, id) => {
+      return (
+        <>
+          <span
+            key={id}
+            onClick={() => handleRoute(id)}
+            style={{
+              color: "#a64b4e",
+              fontWeight: "400",
+              cursor: "pointer"
+            }}
+          >
+            {data.name}
+            <span
+              style={{
+                color: "#a64b4e",
+                fontWeight: "200",
+                cursor: "pointer",
+                margin: "0 4px"
+              }}
+            >
+              &gt;
+            </span>
+          </span>
+        </>
+      );
+    });
+  };
  return (
    <div className="folderComponent ">
+      <Title title={"OpenSign™ Drive"} drive={true} />
      <div>
        <AlertComponent
          isShow={isAlert.isShow}
@@ -479,31 +525,7 @@ function PdfFile() {
                }}
                className="folderPath"
              >
-                {folderName.map((data, id) => {
-                  return (
-                    <span
-                      key={id}
-                      onClick={() => handleRoute(data)}
-                      style={{
-                        color: "#a64b4e",
-                        fontWeight: "400",
-                        cursor: "pointer"
-                      }}
-                    >
-                      {data.name}
-                      <span
-                        style={{
-                          color: "#a64b4e",
-                          fontWeight: "200",
-                          cursor: "pointer",
-                          margin: "0 4px"
-                        }}
-                      >
-                        &gt;
-                      </span>
-                    </span>
-                  );
-                })}
+                {handleFolderTab(folderName)}
              </div>
              <div className="dropMenuBD">
                <div
@@ -1,10 +1,10 @@
 import React from "react";
 import { Helmet } from "react-helmet";

-function Title({ title }) {
+function Title({ title, drive }) {
  return (
    <Helmet>
-      <title>{`${title} - OpenSign™`}</title>
+      <title>{drive ? title : `${title} - OpenSign™`}</title>
      <meta name="description" content={`${title} - OpenSign™`} />
      <link
        rel="icon"
@@ -10,7 +10,9 @@ import PdfRequestFiles from "./Component/PdfRequestFiles";
 import LegaDrive from "./Component/LegaDrive/LegaDrive";
 import PageNotFound from "./Component/PageNotFound";
 import TemplatePlaceHolder from "./Component/TemplatePlaceholder";
-
+import Parse from "parse";
+Parse.serverURL = localStorage.getItem("baseUrl");
+Parse.initialize(localStorage.getItem("parseAppId"));
 // `AppRoutes` is used to define route path of app and
 // it expose to host app, check moduleFederation.config.js for more
 function AppRoutes() {
@@ -0,0 +1,6 @@
+.hrStyle{
+    border-top-width: 1px !important;
+    color: inherit !important;
+    height: 0px !important;
+    margin-bottom: 10px !important;
+}
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import Alert from "./Alert";
+import { themeColor } from "../utils/ThemeColor/backColor";

 const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
  const folderPtr = {
@@ -20,7 +21,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {

  const fetchFolder = async () => {
    try {
-    const FolderQuery = new Parse.Query(folderCls);
+      const FolderQuery = new Parse.Query(folderCls);
      if (parentFolderId) {
        FolderQuery.equalTo("Folder", folderPtr);
        FolderQuery.equalTo("Type", "Folder");
@@ -98,28 +99,39 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
  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">
+        <h1 style={{ fontWeight: "500", fontSize: "1rem" }}>Create Folder</h1>
+        <div style={{ fontSize: "15px", marginTop: "2px" }}>
          <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"
+            style={{
+              padding: "2px 3px",
+              width: "100%",
+              border: "1px solid #c3bcbc",
+              borderRadius: "5px"
+            }}
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
          />
        </div>
-        <div className="text-xs mt-2">
+        <div style={{ fontSize: "15px", marginTop: "2px" }}>
          <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"
+            style={{
+              padding: "2px 3px",
+              width: "100%",
+              border: "1px solid #c3bcbc",
+              borderRadius: "5px"
+            }}
          >
            <option>select</option>
            {folderList.length > 0 &&
@@ -133,7 +145,17 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
        <div>
          <button
            onClick={handleCreateFolder}
-            className="flex items-center rounded p-2 bg-[#33bbff] text-white mt-3"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              borderRadius: "5px",
+              backgroundColor: themeColor(),
+              color: "white",
+              marginTop: "22px",
+              outline: "none",
+              border: "none",
+              padding: "4px 7px"
+            }}
          >
            <i className="fa-solid fa-plus mr-1"></i>
            <span>Create</span>
@@ -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 `}