Merge pull request 'pramod_Task-#280 - Fetched & Display Contact List in Directory' (#107) from pramod_Task-#280 into Feature_Directory

Reviewed-on: #107

src/components/Directory/ListViewDirectory.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+
+const getEmailIcon = (type) => {
+  switch (type) {
+    case 'work': return "bx bx-briefcase me-1 " ;
+    case 'personal': return "bx bx-user me-1";
+    case 'support': return "bxr headphone-mic me-1";
+    case 'billing': return "bx bx-receipt me-1";
+    default: return "bx bx-envelope me-1";
+  }
+};
+
+const getPhoneIcon = (type) => {
+  switch (type) {
+    case 'business': return "bx bx-briefcase me-1 ";
+    case 'home': return "bx bx-mobile me-1 ";
+    case 'personal': return "bx bx-user me-1 ";
+    case 'landline': return "bx bx-phone me-1 ";
+    case 'fax': return "bx bx-printer me-1";
+    case 'whatsapp': return "bxl-whatsapp me-1";
+    case 'emergency': return "bx bx-error-circle me-1";
+    default: return "bx bx-phone me-1";
+  }
+};
+
+const ListViewDirectory = ({ contact }) => {
+  return (
+    <tr key={contact.id} >
+      <td className="text-start">{`${contact.name}`}</td>
+
+      {/* Emails */}
+      <td colSpan="2">
+        <div className="d-flex flex-column align-items-start px-1">
+          {contact.contactEmails?.map((email, index) => (
+            <span key={email.id}>
+             <i className={getEmailIcon(email.label)} style={{fontSize:"12px"}}></i>
+              <a href={`mailto:${email.email}`} className="text-decoration-none">{email.emailAddress}</a>
+            </span>
+          ))}
+        </div>
+      </td>
+
+      {/* Phones */}
+      <td>
+        <div className="d-flex flex-column align-items-start">
+          {contact.contactPhones?.map((phone, index) => (
+            <span key={phone.id}>
+             <i className={getPhoneIcon(phone.label)} style={{fontSize:"12px"}}></i>
+              {phone.phoneNumber}
+            </span>
+          ))}
+        </div>
+      </td>
+
+      {/* Organization */}
+      <td className="text-start">{contact.organization}</td>
+
+      {/* Tags */}
+      <td>
+        <div className="d-flex flex-column align-items-start">
+          {contact.tags?.map((tag, index) => (
+            <span key={index} className="badge bg-light text-dark mb-1">{tag}</span>
+          ))}
+        </div>
+      </td>
+
+      {/* Actions */}
+  <td className="align-middle text-center ">
+        <i className='bx bx-edit bx-sm text-primary cursor-pointer'></i>
+         <i className='bx bx-trash bx-sm text-danger cursor-pointer'></i>
+      </td>
+    </tr>
+  );
+};
+
+export default ListViewDirectory;

src/components/master/CreateRole.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useFeatures } from "../../hooks/useMasterRole";
 
 import { useForm } from 'react-hook-form';
@@ -24,27 +24,30 @@ const schema = z.object({
 });
 
 
-const CreateRole = ({modalType,onClose}) => {
 
- const[isLoading,setIsLoading] = useState(false)
 
- const {masterFeatures} = useFeatures()
+const CreateRole = ({ modalType, onClose }) => {
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const popoverRefs = useRef([]);
+  const { masterFeatures } = useFeatures()
 
   const {
     register,
     handleSubmit,
     formState: { errors },
 
-} = useForm({
+  } = useForm({
     resolver: zodResolver(schema),
     defaultValues: {
       role: "",
       description: "",
       selectedPermissions: [],
     },
-});
+  });
 
-const onSubmit = (values) => {
+  const onSubmit = (values) => {
     setIsLoading(true)
     const result = {
 
@@ -56,29 +59,39 @@ const onSubmit = (values) => {
       })),
     };
 
-  MasterRespository.createRole(result).then((resp)=>{
+    MasterRespository.createRole(result).then((resp) => {
       setIsLoading(false)
-    const cachedData = getCachedData( "Application Role" ); 
+      const cachedData = getCachedData("Application Role");
       const updatedData = [...cachedData, resp.data];
       cacheData("Application Role", updatedData);
-    showToast( "Application Role Added successfully.", "success" );  
+      showToast("Application Role Added successfully.", "success");
       onClose()
-  } ).catch( ( err ) =>
-  {
+    }).catch((err) => {
 
       showToast(err?.response?.data?.message, "error");
-    setIsLoading( false )
+      setIsLoading(false)
       onClose()
     })
 
 
-};
-const [descriptionLength, setDescriptionLength] = useState(0);
-const maxDescriptionLength = 255;
-useEffect(() => {
+  };
+  const [descriptionLength, setDescriptionLength] = useState(0);
+  const maxDescriptionLength = 255;
+  useEffect(() => {
     setDescriptionLength(0);
-}, []);
-
+  }, []);
+  useEffect(() => {
+    popoverRefs.current.forEach((el) => {
+      if (el) {
+        new bootstrap.Popover(el, {
+          trigger: "focus",
+          placement: "right",
+          html: true,
+          content: el.getAttribute("data-bs-content"), // use inline content from attribute
+        });
+      }
+    });
+  }, [masterFeatures]);
 
   return (
 
@@ -119,7 +132,8 @@ useEffect(() => {
       <div className="col-12 col-md-12  border">
 
 
-  {masterFeatures.map((feature) => (
+        {masterFeatures.map((feature, featureIndex) => (
+
           <React.Fragment key={feature.id}>
             <div className="row my-1" key={feature.id} style={{ marginLeft: "0px" }}>
 
@@ -132,7 +146,9 @@ useEffect(() => {
 
 
               <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
-        {feature.featurePermissions.map((perm) => (
+                {feature.featurePermissions.map((perm, permIndex) => {
+                  const refIndex = (featureIndex * 10) + permIndex;
+                  return (
                     <div className="d-flex me-3 mb-2" key={perm.id}>
                       <label className="form-check-label" htmlFor={perm.id}>
                         <input
@@ -144,8 +160,36 @@ useEffect(() => {
                         />
                         {perm.name}
                       </label>
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <div
+                          key={refIndex}
+                          ref={(el) =>
+                            (popoverRefs.current[refIndex] = el)
+                          }
+                          tabIndex="0"
+                          className="d-flex align-items-center avatar-group justify-content-center"
+                          data-bs-toggle="popover" refIndex
+                          data-bs-trigger="focus"
+                          data-bs-placement="right"
+                          data-bs-html="true"
+                          data-bs-content={`
+                                      <div class="border border-secondary rounded custom-popover p-2 px-3">
+                                        ${perm.description}
                                       </div>
-        ))}
+                                    `}
+                        >
+                          &nbsp;
+
+                          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" className="bi bi-info-circle" viewBox="0 0 16 16">
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+
+                  )
+                })}
               </div>
 
             </div>
@@ -157,7 +201,7 @@ useEffect(() => {
           <p className="text-danger">{errors.selectedPermissions.message}</p>
         )}
         {!masterFeatures && <p>Loading...</p>}
-</div>
+      </div>
 
 
       {
@@ -165,7 +209,7 @@ useEffect(() => {
 
           <div className="col-12 text-center">
             <button type="submit" className="btn btn-sm btn-primary me-3">
-         {isLoading? "Please Wait...":"Submit"}       
+              {isLoading ? "Please Wait..." : "Submit"}
             </button>
             <button
               type="reset"

src/components/master/EditRole.jsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
-import { useForm ,Controller} from 'react-hook-form';
+import React, { useEffect, useState, useRef } from "react";
+import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import {  useFeatures} from "../../hooks/useMasterRole";
+import { useFeatures } from "../../hooks/useMasterRole";
 import { MasterRespository } from "../../repositories/MastersRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
@@ -26,9 +26,10 @@ const updateSchema = z.object({
 
 
 
-const  EditMaster=({master,onClose})=> {
-  const [isLoading,setIsLoading] = useState(false)
-  const {masterFeatures} = useFeatures()
+const EditMaster = ({ master, onClose }) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const { masterFeatures } = useFeatures()
+  const popoverRefs = useRef([]);
 
   const buildDefaultPermissions = () => {
     const defaults = {};
@@ -46,15 +47,11 @@ const  EditMaster=({master,onClose})=> {
 
 
   const initialPermissions = buildDefaultPermissions();
- 
-  
-
-  
   const {
     register,
     handleSubmit,
     formState: { errors, dirtyFields },
-    setError,reset
+    setError, reset
   } = useForm({
     resolver: zodResolver(updateSchema),
     defaultValues: {
@@ -92,13 +89,13 @@ const  EditMaster=({master,onClose})=> {
     }
 
     const updatedRole = {
-      id:master?.item?.id,
+      id: master?.item?.id,
       role: data.role,
       description: data.description,
       featuresPermission: updatedPermissions,
     };
-    MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp)=>{ 
-      setIsLoading( false )
+    MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp) => {
+      setIsLoading(false)
 
 
       const cachedData = getCachedData("Application Role");
@@ -111,11 +108,11 @@ const  EditMaster=({master,onClose})=> {
 
         cacheData("Application Role", updatedData);
       }
-      showToast( "Application Role Updated successfully.", "success" );
+      showToast("Application Role Updated successfully.", "success");
       setIsLoading(false)
       onClose()
-    }).catch((Err)=>{
-      showToast( Err.message, "error" );
+    }).catch((Err) => {
+      showToast(Err.message, "error");
       setIsLoading(false)
     })
 
@@ -133,6 +130,18 @@ const  EditMaster=({master,onClose})=> {
   const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
   const maxDescriptionLength = 255;
 
+  useEffect(() => {
+    popoverRefs.current.forEach((el) => {
+      if (el) {
+        new bootstrap.Popover(el, {
+          trigger: "focus",
+          placement: "right",
+          html: true,
+          content: el.getAttribute("data-bs-content"), // use inline content from attribute
+        });
+      }
+    });
+  }, [masterFeatures]);
 
   return (
 
@@ -168,8 +177,8 @@ const  EditMaster=({master,onClose})=> {
 
       <div className="col-12 col-md-12 mx-2s " >
 
-          {masterFeatures.map((feature) => (
-             <div className="row my-3" key={feature.id} style={{marginLeft:"0px"}}>
+        {masterFeatures.map((feature, featureIndex) => (
+          <div className="row my-3" key={feature.id} style={{ marginLeft: "0px" }}>
 
             <div className="col-12 col-md-3 d-flex text-start align-items-center" style={{ wordWrap: 'break-word' }}>
               <span className="fs">{feature.name}</span>
@@ -178,8 +187,12 @@ const  EditMaster=({master,onClose})=> {
 
             </div>
             <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
-                {feature.featurePermissions.map((perm) => (
+              {feature.featurePermissions.map((perm, permIndex) => {
+                const refIndex = (featureIndex * 10) + permIndex;
+                return (
+
                   <div className="d-flex me-3 mb-2" key={perm.id}>
+
                     <label className="form-check-label" htmlFor={perm.id}>
                       <input
                         type="checkbox"
@@ -192,8 +205,38 @@ const  EditMaster=({master,onClose})=> {
 
                       {perm.name}
                     </label>
+
+
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <div
+                        key={refIndex}
+                        ref={(el) =>
+                          (popoverRefs.current[refIndex] = el)
+                        }
+                        tabIndex="0"
+                        className="d-flex align-items-center avatar-group justify-content-center"
+                        data-bs-toggle="popover" refIndex
+                        data-bs-trigger="focus"
+                        data-bs-placement="right"
+                        data-bs-html="true"
+                        data-bs-content={`
+                                      <div class="border border-secondary rounded custom-popover p-2 px-3">
+                                        ${perm.description}
                                       </div>
-                ))}
+                                    `}
+                      >
+                        &nbsp;
+                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" className="bi bi-info-circle" viewBox="0 0 16 16">
+                          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+
+
             </div>
           </div>
         ))}

src/hooks/useDirectory.js

@@ -0,0 +1,38 @@
+import {useState} from "react"
+import {DirectoryRepository} from "../repositories/DirectoryRepository";
+import {cacheData, getCachedData} from "../slices/apiDataManager";
+
+export const useDirectory = () =>
+{
+    const [ contacts, setContacts ] = useState( [] )
+    const [ loading, setLoading ] = useState( false )
+    const [ error, setError ] = useState();
+
+
+
+    const fetch = async() =>
+    {
+        const cache_contacts = getCachedData( "contacts" );
+        if ( !cache_contacts )
+        {
+            setLoading(true)
+           try
+        {
+            const response = await DirectoryRepository.GetContacts();
+               setContacts( response.data )
+               cacheData("contacts",response.data)
+        } catch ( error )
+        {
+               setError( error );
+               setLoading(false)
+        }  
+        }
+       
+    }
+
+    useState( () =>
+    {
+        fetch()
+    }, [] )
+    return {contacts,loading,error}
+}

src/pages/Directory/Directory.jsx

@@ -3,11 +3,16 @@ import Breadcrumb from "../../components/common/Breadcrumb";
 import IconButton from "../../components/common/IconButton";
 import GlobalModel from "../../components/common/GlobalModel";
 import ManageDirectory from "../../components/Directory/ManageDirectory";
+import ListViewDirectory from "../../components/Directory/ListViewDirectory";
+import {useDirectory} from "../../hooks/useDirectory";
+
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
-  const closedModel = () => setIsOpenModal(false);
+  const closedModel = () => setIsOpenModal( false );
   
+  const {contacts} = useDirectory();
+  console.log(contacts)
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
@@ -17,17 +22,17 @@ const Directory = () => {
         ]}
       ></Breadcrumb>
 
-      <GlobalModel isOpen={isOpenModal} closeModal={closedModel}>
+      <GlobalModel isOpen={isOpenModal} closeModal={closedModel} size="lg">
         <ManageDirectory />
       </GlobalModel>
 
-      <div className="row">
+      <div className="card p-2">
         <div className="row mx-0 px-0">
           <div className="col-md-4 col-6 flex-grow-1 mb-2 px-1">
             <input
               type="search"
               className="form-control form-control-sm"
-              placeholder="Search projects..."
+              placeholder="Search Contact..."
             />
           </div>
           <div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1">
@@ -43,22 +48,30 @@ const Directory = () => {
         </div>
         <div className="table-responsive text-nowrap py-2 ">
           <table className="table px-2">
-            <thead>
+            <thead >
               <tr> 
-                <th className="text-start" colSpan="2">
-                  Name
-                </th>
-                <th className="px-2">
+                <th>
                   <div className="d-flex align-items-center gap-1">
+                    <IconButton
+                      size={12}
+                      iconClass="bx bx-user"
+                      color="secondary"
+                      onClick={() => alert("User icon clicked")}
+                    />
+                    <span>Name</span>
+                  </div>
+                </th>
+                <th colSpan="2" className="px-2 text-center">
+                  <div className="d-flex text-center align-items-center gap-1 justify-content-center">
                     <IconButton
                       size={12}
                       iconClass="bx bx-envelope"
                       color="primary"
-                      onClick={() => alert("User icon clicked")}
                     />
                     <span>Email</span>
                   </div>
                 </th>
+
                 <th className="mx-2">
                   <div className="d-flex align-items-center m-0 p-0 gap-1">
                     <IconButton
@@ -87,7 +100,7 @@ const Directory = () => {
                       data-bs-toggle="dropdown"
                       aria-expanded="false"
                     >
-                      Type <i className="bx bx-filter bx-sm"></i>
+                      Category <i className="bx bx-filter bx-sm"></i>
                     </a>
                     {/* <ul className="dropdown-menu p-2 text-capitalize">
                           {[
@@ -124,11 +137,9 @@ const Directory = () => {
               </tr>
             </thead>
             <tbody className="table-border-bottom-0 overflow-auto ">
-              <tr>
-                <td colSpan="12" className="text-center py-4">
-                  comming soon....
-                </td>
-              </tr>
+              {contacts.map((contact) => (
+                <ListViewDirectory contact={contact} />
+              ))}
             </tbody>
           </table>
         </div>

src/repositories/DirectoryRepository.jsx

@@ -0,0 +1,5 @@
+import {api} from "../utils/axiosClient";
+
+export const DirectoryRepository = {
+    GetContacts: () => api.get('/api/directory'),
+}

src/utils/constants.jsx

@@ -16,7 +16,7 @@ export const VIEW_PROJECT_INFRA = "c7b68e33-72f0-474f-bd96-77636427ecc8"
 export const REGULARIZE_ATTENDANCE ="57802c4a-00aa-4a1f-a048-fd2f70dd44b6"
 
 
-export const ASSIGN_TO_PROJECT = "fbd213e0-0250-46f1-9f5f-4b2a1e6e76a3";
+export const ASSIGN_TO_PROJECT = "b94802ce-0689-4643-9e1d-11c86950c35b";
 
 export const INFRASTRUCTURE = "9666de86-d7c7-4d3d-acaa-fcd6d6b81f3c";
 
@@ -24,4 +24,4 @@ export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"
 
 export const VIEW_TASK = "9fcc5f87-25e3-4846-90ac-67a71ab92e3c"
 
-export const ASSIGN_REPORT_TASK = "d135a4b0-4f9a-4903-ab9c-4843839ebdee"
+export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"