Merge pull request 'Adding Export button in Directory.' (#213) from Kartik_Task#512_Exportbutton into Issues_Jun_3W

Reviewed-on: #213

src/pages/Directory/Directory.jsx

@@ -345,6 +345,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             loading={loading}
             IsActive={IsActive}
             setOpenBucketModal={setOpenBucketModal}
+            contactsToExport={contacts}
           />
         </div>
       </div>

src/pages/Directory/DirectoryPageHeader.jsx

@@ -1,4 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+import { exportToCSV, exportToExcel, printTable, exportToPDF } from "../../utils/tableExportUtils";
 
 const DirectoryPageHeader = ({
   searchText,
@@ -17,22 +19,72 @@ const DirectoryPageHeader = ({
   loading,
   IsActive,
   setOpenBucketModal,
+  contactsToExport, // This prop receives the paginated data (currentItems)
 }) => {
-  const [filtered, setFiltered] = useState();
+  const [filtered, setFiltered] = useState(0);
+
+  const handleExport = (type) => {
+    // Check if there's data to export
+    if (!contactsToExport || contactsToExport.length === 0) {
+      console.warn("No data to export. The current view is empty.");
+      // Optionally, you might want to show a user-friendly toast message here
+      // showToast("No data to export on the current page.", "info");
+      return;
+    }
+
+    // --- Core Change: Map contactsToExport to a simplified format ---
+    // const simplifiedContacts = contactsToExport.map(contact => ({
+    //   Name: contact.name || '',
+    //   Organization: contact.organization || '', // Added Organization
+    //   Email: contact.contactEmails && contact.contactEmails.length > 0 ? contact.contactEmails[0].emailAddress : '',
+    //   Phone: contact.contactPhones && contact.contactPhones.length > 0 ? contact.contactPhones[0].phoneNumber : '', // Changed 'Contact' to 'Phone' for clarity
+    //   Category: contact.contactCategory ? contact.contactCategory.name : '', // Changed 'Role' to 'Category'
+    // }));
+
+    const simplifiedContacts = contactsToExport.map(contact => ({
+      Name: contact.name || '',
+      Organization: contact.organization || '',
+      Email: contact.contactEmails && contact.contactEmails.length > 0
+        ? contact.contactEmails.map(email => email.emailAddress).join(', ')
+        : '',
+      Phone: contact.contactPhones && contact.contactPhones.length > 0
+        ? contact.contactPhones.map(phone => phone.phoneNumber).join(', ')
+        : '',
+      Category: contact.contactCategory ? contact.contactCategory.name : '',
+    }));
+
+    console.log("Kaerik", simplifiedContacts)
+    switch (type) {
+      case "csv":
+        exportToCSV(simplifiedContacts, "directory_contacts");
+        break;
+      case "excel":
+        exportToExcel(simplifiedContacts, "directory_contacts");
+        break;
+      case "pdf":
+        exportToPDF(simplifiedContacts, "directory_contacts");
+        break;
+      case "print":
+        printTable(simplifiedContacts, "directory_contacts");
+        break;
+      default:
+        break;
+    }
+  };
 
   useEffect(() => {
     setFiltered(
       tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length
     );
   }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
+
   return (
     <>
-      {/* <div className="row">vikas</div> */}
       <div className="row mx-0 px-0 align-items-center mt-2">
         <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
           <input
             type="search"
-            className="form-control"
+            className="form-control me-2"
             placeholder="Search Contact..."
             value={searchText}
             onChange={(e) => setSearchText(e.target.value)}
@@ -41,8 +93,7 @@ const DirectoryPageHeader = ({
           <div className="d-flex gap-2 ">
             <button
               type="button"
-              className={`btn  btn-sm p-1 ${
+              className={`btn btn-xs ${!listView ? "btn-primary" : "btn-outline-primary"
-                !listView ? "btn-primary" : "btn-outline-primary"
                 }`}
               onClick={() => setListView(false)}
               data-bs-toggle="tooltip"
@@ -55,8 +106,7 @@ const DirectoryPageHeader = ({
             </button>
             <button
               type="button"
-              className={`btn  btn-sm p-1 ${
+              className={`btn btn-xs ${listView ? "btn-primary" : "btn-outline-primary"
-                listView ? "btn-primary" : "btn-outline-primary"
                 }`}
               onClick={() => setListView(true)}
               data-bs-toggle="tooltip"
@@ -76,8 +126,7 @@ const DirectoryPageHeader = ({
                 aria-expanded="false"
               >
                 <i
-                  className={`fa-solid fa-filter ms-1 fs-5 ${
+                  className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"
-                    filtered > 0 ? "text-primary" : "text-muted"
                     }`}
                 ></i>
 
@@ -170,23 +219,59 @@ const DirectoryPageHeader = ({
             </div>
           </div>
         </div>
-        <div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
+        <div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end align-items-center gap-0">
-          <label className="switch switch-primary align-self-start mb-2">
+          <label className="switch switch-primary mb-0">
             <input
               type="checkbox"
               className="switch-input me-3"
               onChange={() => setIsActive(!IsActive)}
-              value={IsActive}
+              checked={!IsActive}
               disabled={loading}
             />
             <span className="switch-toggle-slider">
               <span className="switch-on"></span>
               <span className="switch-off"></span>
             </span>
-            <span className=" list-inline-item ms-12 ">
+            <span className="ms-12 ">
               Show Inactive Contacts
             </span>
           </label>
+
+          {/* Export Dropdown */}
+          <div className="btn-group">
+            <button
+              type="button"
+              className="btn btn-sm btn-icon rounded-pill dropdown-toggle hide-arrow"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+              aria-label="Export options"
+              style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+            >
+              <i className="bx bx-dots-vertical-rounded bx-sm"></i>
+            </button>
+            <ul className="dropdown-menu">
+              <li>
+                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("print"); }}>
+                  <i className="bx bx-printer me-1"></i> Print
+                </a>
+              </li>
+              <li>
+                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("csv"); }}>
+                  <i className="bx bx-file me-1"></i> CSV
+                </a>
+              </li>
+              <li>
+                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("excel"); }}>
+                  <i className="bx bxs-file-export me-1"></i> Excel
+                </a>
+              </li>
+              <li>
+                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("pdf"); }}>
+                  <i className="bx bxs-file-pdf me-1"></i> PDF
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
     </>