Merge pull request 'UI Misaligned on Toggling 'Show Inactive Contact' When No Inactive Contacts Exist in Directory at projects.' (#236) from Kartik_bug#649 into Issues_July_2W

Reviewed-on: #236

public/assets/vendor/css/core.css

@@ -836,7 +836,7 @@ progress {
 }
 
 .row {
-  --bs-gutter-x: 1.625rem;
+  --bs-gutter-x: 3.625rem;
   --bs-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;

src/pages/Directory/Directory.jsx

@@ -361,25 +361,35 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         </div>
       </div>
       <div className="card-minHeight mt-0">
-        {(viewType === "card" || viewType === "list" || viewType === "notes") && (
+        {/* LIST VIEW */}
-          <div className="d-flex flex-column justify-content-center align-items-center text-center">
-            {!loading && (viewType === "card" || viewType === "list") && contacts?.length === 0 && (
-              <p className="mt-10">No contact found</p>
-            )}
-            {!loading &&
-              (viewType === "card" || viewType === "list") &&
-              contacts?.length > 0 &&
-              currentItems.length === 0 && (
-                <p className="mt-10">No matching contact found</p>
-              )}
-          </div>
-        )}
-
         {viewType === "list" && (
-          <div className="card cursor-pointer mt-5">
+          <div className="card cursor-pointer mt-3">
-            <div className="card-body p-2 pb-1">
+            <div className="card-body p-2 pb-1" style={{ minHeight: "200px" }}>
               <DirectoryListTableHeader>
-                {!loading &&
+                {!loading && contacts?.length === 0 ? (
+                  <tr>
+                    <td colSpan="6">
+                      <div
+                        className="d-flex justify-content-center align-items-center"
+                        style={{ height: "150px",marginLeft: "230px" }}
+                      >
+                        <p className="mb-0 text-muted">No contact found</p>
+                      </div>
+                    </td>
+                  </tr>
+                ) : !loading && contacts?.length > 0 && currentItems.length === 0 ? (
+                  <tr>
+                    <td colSpan="6">
+                      <div
+                        className="d-flex justify-content-center align-items-center"
+                        style={{ height: "150px" }}
+                      >
+                        <p className="mb-0 text-muted">No matching contact found</p>
+                      </div>
+                    </td>
+                  </tr>
+                ) : (
+                  !loading &&
                   currentItems.map((contact) => (
                     <ListViewDirectory
                       key={contact.id}
@@ -392,16 +402,33 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                       IsDeleted={setDeleteContact}
                       restore={handleDeleteContact}
                     />
-                  ))}
+                  ))
+                )}
               </DirectoryListTableHeader>
             </div>
           </div>
         )}
 
+        {/* CARD VIEW */}
         {viewType === "card" && (
+          <>
+            {contacts?.length === 0 && !loading ? (
+              <div
+                className="d-flex justify-content-center align-items-center text-center"
+                style={{ minHeight: "200px" }}
+              >
+                <p className="text-muted mb-0">No contact found</p>
+              </div>
+            ) : currentItems.length === 0 && !loading ? (
+              <div
+                className="d-flex justify-content-center align-items-center text-center"
+                style={{ minHeight: "250px" }}
+              >
+                <p className="text-muted mb-0">No matching contact found</p>
+              </div>
+            ) : (
               <div className="row mt-4">
-            {!loading &&
+                {currentItems.map((contact) => (
-              currentItems.map((contact) => (
                   <div
                     key={contact.id}
                     className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
@@ -420,7 +447,10 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                 ))}
               </div>
             )}
+          </>
+        )}
 
+        {/* NOTES VIEW */}
         {viewType === "notes" && (
           <div className="mt-0">
             <NotesCardViewDirectory
@@ -433,7 +463,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
           </div>
         )}
 
-        {/* Pagination */}
+        {/* PAGINATION */}
         {!loading &&
           viewType !== "notes" &&
           contacts?.length > 0 &&
@@ -464,7 +494,10 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                   </li>
                 ))}
 
-                <li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
+                <li
+                  className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                    }`}
+                >
                   <button
                     className="page-link"
                     onClick={() => paginate(currentPage + 1)}
@@ -476,6 +509,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             </nav>
           )}
       </div>
+
     </div>
   );
 };

src/pages/project/ProjectDetails.jsx

@@ -139,7 +139,7 @@ const ProjectDetails = () => {
       }
       case "directory": {
         return (
-          <div className="row">
+          <div className="row mt-2">
             <Directory IsPage={false} prefernceContacts={projectDetails.id} />
           </div>
         );