Merge branch 'add-family-acc' of WrenchBoard/Users-Wrench into master

2023-05-10 15:56:56 +00:00
parent 1e0dbbfff7 6a1d5f549f
commit f3c4efa409
5 changed files with 186 additions and 96 deletions
@@ -1,76 +1,89 @@
 import React, { useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";

-export default function FamilyTable({ className, familyList }) {
+export default function FamilyTable({ className, familyList, loader }) {
  const filterCategories = ["All Categories", "Explore", "Featured"];
  console.log(familyList)
  const [selectedCategory, setCategory] = useState(filterCategories[0]);
  return (
    <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
        className || ""
      }`}
    >
      <div className="relative w-full overflow-x-auto sm:rounded-lg">
-        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-          <tbody>
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
+            <thead className="sticky top-0">
            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
-              <td className="py-4">Name</td>
-              <td className="py-4 text-center">Last Login</td>
-              <td className="py-4 text-center">No of Tasks</td>
-              <td className="py-4 text-right"></td>
+              <th className="py-4">Name</th>
+              <th className="py-4 text-center">Last Login</th>
+              <th className="py-4 text-center">No of Tasks</th>
+              <th className="py-4 text-right">Status</th>
            </tr>
-            {familyList?.length > 0 &&
-              familyList?.map(({firstname, lastname, age,added}, idx) => (
-                <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50" key={idx}>
-                  <td className=" py-4">
-                    <div className="flex space-x-2 items-center">
-                      <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                        <img
-                          src={dataImage1}
-                          alt="data"
-                          className="w-full h-full"
-                        />
-                      </div>
-                      <div className="flex flex-col">
-                        <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                          {`${firstname} ${lastname} (${age})`}
-                        </h1>
-                        <span className="text-sm text-thin-light-gray">
-                          Added <span className="text-purple">{` ${added}`}</span>
-                        </span>
-                      </div>
-                    </div>
-                  </td>
-                  <td className="text-center py-4 px-2">
-                    <div className="flex space-x-1 items-center justify-center">
-                      <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        10-10-2019
-                      </span>
-                    </div>
-                  </td>
-                  <td className="text-center py-4 px-2">
-                    <div className="flex space-x-1 items-center justify-center">
-                      <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        100
-                      </span>
-                    </div>
-                  </td>
-
-                  <td className="text-right py-4 px-2">
-                    <button
-                      type="button"
-                      className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            </thead>
+          <tbody className="overflow-y-scroll h-auto">
+            {loader ? (
+              <div className="signup btn-loader"></div>
+            ) : (
+              <>
+                {familyList?.length > 0 ? (
+                  familyList?.map(({ firstname, lastname, age }, idx) => (
+                    <tr
+                      className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+                      key={idx}
                    >
-                      Manage
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            {familyList?.length <= 0 && (
-              <div className="min-h-[400px] flex items-center justify-center text-black text-2xl text-center">
-                Nothing to see here
-              </div>
+                      <td className=" py-4">
+                        <div className="flex space-x-2 items-center">
+                          <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                            <img
+                              src={dataImage1}
+                              alt="data"
+                              className="w-full h-full"
+                            />
+                          </div>
+                          <div className="flex flex-col">
+                            <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                              {`${firstname} ${lastname} (${age})`}
+                            </h1>
+                            <span className="text-sm text-thin-light-gray">
+                              Added{" "}
+                              <span className="text-purple">10-10-2029</span>
+                            </span>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="text-center py-4 px-2">
+                        <div className="flex space-x-1 items-center justify-center">
+                          <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                            10-10-2019
+                          </span>
+                        </div>
+                      </td>
+                      <td className="text-center py-4 px-2">
+                        <div className="flex space-x-1 items-center justify-center">
+                          <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                            100
+                          </span>
+                        </div>
+                      </td>
+                      <td className="text-right py-4 px-2">
+                        <button
+                          type="button"
+                          className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                        >
+                          Manage
+                        </button>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr class="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                    <td class="p-2" colspan="4">
+                      No Family Accounts Found!
+                    </td>
+                  </tr>
+                )}
+              </>
            )}
          </tbody>
        </table>
@@ -11,6 +11,8 @@ export default function FamilyAcc() {
  const [familyList, setFamilyList] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const [loader, setLoader] = useState(false);
+  const [popUp, setPopUp] = useState(false);
+  const [listReload, setListReload] = useState(false);
  const [msgErr, setMsgErr] = useState("");
  const [formData, setFormData] = useState({
    first_name: "",
@@ -19,6 +21,10 @@ export default function FamilyAcc() {

  const apiCall = useMemo(() => new SiteService(), []);

+  const popUpHandler = () => {
+    setPopUp(!popUp);
+  };
+
  //   tab handler
  const filterHandler = (value) => {
    setValue(value);
@@ -62,6 +68,7 @@ export default function FamilyAcc() {
        const { data } = res;
        if (data?.internal_return > 0 && data?.status == "OK") {
          setLoader(false);
+          setListReload((prev) => !prev);
          setIsOpen(false);
        } else {
          setLoader(false);
@@ -79,35 +86,42 @@ export default function FamilyAcc() {
      setTimeout(() => {
        setMsgErr(null);
      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      setFormData({
+        first_name: "",
+        last_name: "",
+      });
    }
  };

-  useEffect(() => {
-    // member listing
-    const memberList = async () => {
-      try {
-        let reqData = {
-          member_id: localStorage.getItem("member_id"),
-          uid: localStorage.getItem("uid"),
-          sessionid: localStorage.getItem("session_token"),
-          limit: 20,
-          offset: 0,
-          action: 22010,
-        };
+  // member listing
+  const memberList = useCallback(async () => {
+    setLoader(true);
+    try {
+      let reqData = {
+        member_id: localStorage.getItem("member_id"),
+        uid: localStorage.getItem("uid"),
+        sessionid: localStorage.getItem("session_token"),
+        limit: 20,
+        offset: 1,
+        action: 22010,
+      };

-        let res = await apiCall.familyListings(reqData);
-        const { data } = res;
-        if (data?.internal_return >= 0 && data?.status == "OK") {
-          let { result_list } = data;
-          setFamilyList(result_list);
-        } else return;
-      } catch (error) {
-        throw new Error(error);
-      }
-    };
+      let res = await apiCall.familyListings(reqData);
+      const { data } = res;
+      if (data?.internal_return >= 0 && data?.status == "OK") {
+        let { result_list } = data;
+        setFamilyList(result_list);
+        setLoader(false);
+      } else return;
+    } catch (error) {
+      setLoader(false);
+      throw new Error(error);
+    }
+  }, [apiCall]);
+
+  useEffect(() => {
    memberList();
-  }, []);
-  console.log(familyList);
+  }, [listReload, memberList]);

  return (
    <Layout>
@@ -130,6 +144,7 @@ export default function FamilyAcc() {
                  title="Add members"
                  isOpen={isOpen}
                  setIsOpen={setIsOpen}
+                  modalHandler={popUpHandler}
                >
                  <FamilyForm
                    value={formData}
@@ -151,7 +166,7 @@ export default function FamilyAcc() {
              ></div>
            </div>
          </div>
-          <FamilyTable familyList={familyList} />
+          <FamilyTable familyList={familyList} loader={loader} />
        </div>
      </div>
    </Layout>
@@ -1,7 +1,14 @@
-import React, { useState } from "react";
-
-const CustomPopUp = ({ name, btn_class, title, children, isOpen, setIsOpen }) => {
+import React, { useEffect } from "react";

+const CustomPopUp = ({
+  name,
+  btn_class,
+  title,
+  children,
+  isOpen,
+  setIsOpen,
+  modalHandler,
+}) => {
  const handleOpen = () => {
    setIsOpen(true);
  };
@@ -10,6 +17,15 @@ const CustomPopUp = ({ name, btn_class, title, children, isOpen, setIsOpen }) =>
    setIsOpen(false);
  };

+  useEffect(() => {
+    if (modalHandler) {
+      document.body.style.overflowY = "hidden";
+    }
+    return () => {
+      document.body.style.overflowY = "unset";
+    };
+  });
+
  return (
    <div>
      <button onClick={handleOpen} className={btn_class}>
@@ -17,15 +33,26 @@ const CustomPopUp = ({ name, btn_class, title, children, isOpen, setIsOpen }) =>
      </button>

      {isOpen && (
-        <div className={`fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50 transition-opacity ${isOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}>
-          <div className="bg-white rounded-md p-6 shadow-lg transform transition-all duration-300 ease-in-out lg:max-w-[400px] lg:min-h-[300px] max-w-[300px] min-h-[200px] w-full">
-            <div className="w-full flex justify-end">
-              <button onClick={handleClose}>
-                <CloseIcon />
-              </button>
+        <div className="modal-com">
+          <div
+            className={`fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50`}
+          ></div>
+          <div className="children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ">
+            <div className="bg-white rounded-md p-6 shadow-lg transform transition-all duration-300 ease-in-out dark:bg-dark-white logout-modal-wrapper lg:w-[460px] lg:h-auto  max-[467px]:max-w-[26rem]">
+              <div className="w-full flex items-center justify-between lg:px-4 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
+                {title && (
+                  <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide cursor-default">
+                    {title}
+                  </h1>
+                )}
+                <button onClick={handleClose}>
+                  <CloseIcon />
+                </button>
+              </div>
+              <div className="logout-modal-body w-full flex flex-col items-center px-4 py-8">
+                {children && children}
+              </div>
            </div>
-            {title && <h2 className="text-xl font-bold mb-2">{title}</h2>}
-            {children}
          </div>
        </div>
      )}
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";

-export default function ModalCom({ action, children, situation }) {
+export default function ModalCom({ action, children, situation, isOpen }) {
  useEffect(() => {
    if (situation) {
      document.body.style.overflowY = "hidden";
@@ -13,7 +13,7 @@ export default function ModalCom({ action, children, situation }) {
  return (
    <div className="modal-com">
      <div
-        onClick={action}
+        onClick={action || isOpen}
        className="fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
      ></div>
      <div className="children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ">
@@ -732,4 +732,39 @@ TODO: Responsive ===========================
 /* For IE10 */
 .content-wrapper select::-ms-expand {
  display: none;
+}
+
+/* JOBS DETAILS ALERT */
+.alert-box{
+  animation-name: scale;
+  animation-duration: .5s;
+  animation-timing-function: linear;
+}
+
+@keyframes scale {
+  0%{transform: scale(0)}
+  50%{transform: scale(1.1)}
+  100%{transform: scale(1)}
+}
+/* END OF JOBS DETAILS ALERT */
+
+
+/* Update table scrollbar */
+.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track{
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: transparent;
+  border-radius: 10px;
+}
+
+.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar {
+  width: 10px;
+  background-color: transparent;
+}
+
+.update-table::-webkit-scrollbar-thumb, .update-table > *::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  border-top-right-radius: 50px;
+  border-bottom-right-radius: 50px;
+  background-color: #fff;
+  background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
 }