Improve contacts
This commit is contained in:
CHIEFSOFT\ameye
@@ -1,13 +1,13 @@
|
||||
"use client"
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { contactData } from "../../services/services";
|
||||
import {useMutation, useQuery} from "@tanstack/react-query";
|
||||
import {contactData} from "../../services/services";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import getCustomTime from "../../utils/getCustomTime";
|
||||
|
||||
export default function Contacts(){
|
||||
export default function Contacts() {
|
||||
|
||||
// const {data:contacts, isFetching, isError, error} = useQuery({
|
||||
// queryKey: queryKeys.contacts,
|
||||
@@ -30,7 +30,7 @@ export default function Contacts(){
|
||||
console.log(error)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(res?.data?.resultCode != '0'){
|
||||
if (res?.data?.resultCode != '0') {
|
||||
throw({message: 'Something went wrong'})
|
||||
}
|
||||
setFiltererdContactData(res?.data?.contacts)
|
||||
@@ -46,29 +46,29 @@ export default function Contacts(){
|
||||
const changeActiveCategoryUID = (id) => {
|
||||
let filteredConData = []
|
||||
setActiveCategoryUID(id)
|
||||
if(id == '0'){
|
||||
if (id == '0') {
|
||||
filteredConData = contactsData
|
||||
}else{
|
||||
} else {
|
||||
filteredConData = contactsData.filter(item => item.category == id)
|
||||
}
|
||||
setFiltererdContactData(filteredConData)
|
||||
changeActiveUID(filteredConData[0]?.uid)
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
useEffect(() => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
getContactData.mutate(reqData)
|
||||
},[])
|
||||
}, [])
|
||||
|
||||
const contactsData = getContactData?.data?.data?.contacts // LIST OF CONTACTS
|
||||
const contactsCategory = getContactData?.data?.data?.category // LIST OF CATEGORY
|
||||
|
||||
return(
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} />
|
||||
<BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']}/>
|
||||
{getContactData?.isPending ?
|
||||
<>
|
||||
<div className="row">
|
||||
@@ -95,7 +95,9 @@ export default function Contacts(){
|
||||
<div className="row justify-content-center">
|
||||
<div className="d-none col-12">
|
||||
<div className="text-center mail-sidebar-title px-4">
|
||||
<a href="#" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
|
||||
<a href="#"
|
||||
className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i
|
||||
className="fa fa-plus pl-2"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
@@ -103,36 +105,42 @@ export default function Contacts(){
|
||||
<ul className="pl-0">
|
||||
<li className="py-2">
|
||||
<a href="#">
|
||||
<span className="nav align-items-center">
|
||||
<span
|
||||
className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Inbox</span>
|
||||
</span>
|
||||
<span className="nav-item ml-auto text-right">
|
||||
<span className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="#">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-paper-plane-o pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Replied Mail</span>
|
||||
<span
|
||||
className="nav-item ml-auto text-right">
|
||||
<span
|
||||
className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{/*<li className="py-2">*/}
|
||||
{/* <a href="#">*/}
|
||||
{/* <span*/}
|
||||
{/* className="nav align-items-center">*/}
|
||||
{/* <span>*/}
|
||||
{/* <i className="fa fa-paper-plane-o pr-4"></i>*/}
|
||||
{/* </span>*/}
|
||||
{/* <span>*/}
|
||||
{/* <span>Replied Mail</span>*/}
|
||||
{/* </span>*/}
|
||||
{/* </span>*/}
|
||||
{/* </a>*/}
|
||||
{/*</li>*/}
|
||||
|
||||
</ul>
|
||||
|
||||
<ul className="pl-0 mt-5">
|
||||
<li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}>
|
||||
<li className="py-2"
|
||||
onClick={() => changeActiveCategoryUID('0')}
|
||||
style={{cursor: 'pointer'}}>
|
||||
<div>
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
@@ -145,7 +153,9 @@ export default function Contacts(){
|
||||
</div>
|
||||
</li>
|
||||
{contactsCategory && contactsCategory.map(item => (
|
||||
<li key={item?.cid} className="py-2" onClick={()=>changeActiveCategoryUID(`${item?.cid}`)} style={{cursor: 'pointer'}}>
|
||||
<li key={item?.cid} className="py-2"
|
||||
onClick={() => changeActiveCategoryUID(`${item?.cid}`)}
|
||||
style={{cursor: 'pointer'}}>
|
||||
<div>
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
@@ -201,25 +211,31 @@ export default function Contacts(){
|
||||
</div>
|
||||
</div>
|
||||
<div className="mail-msg scrollbar scroll_dark">
|
||||
{contactsData && filteredContactData?.map((contact, index)=> {
|
||||
{contactsData && filteredContactData?.map((contact, index) => {
|
||||
const isActive = (contact?.uid == activeContactUID) || (!activeContactUID && index == 0)
|
||||
return (
|
||||
<div key={contact?.uid} onClick={()=>changeActiveUID(contact?.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}>
|
||||
<div key={contact?.uid}
|
||||
onClick={() => changeActiveUID(contact?.uid)}
|
||||
className={`mail-msg-item ${isActive && 'bg-light'}`}>
|
||||
<a href="#">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" />
|
||||
<img src={getImage("avtar/01.jpg")}
|
||||
className="img-fluid" alt="user"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>{contact?.sender}</p>
|
||||
<div
|
||||
className="mail-msg-item-titel justify-content-between">
|
||||
<p><span style={{fontSize: '14px' , color: '#148399', fontWeight:'bolder'}}>{contact?.sender}</span></p>
|
||||
{/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
|
||||
<p className="d-none d-xl-block"><span>{new Date(contact?.added).toDateString()}</span></p>
|
||||
<p className="d-none d-xl-block">
|
||||
<span style={{fontSize: '14px'}}>{new Date(contact?.added).toDateString()}</span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">{contact?.title}</h5>
|
||||
<p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0,101) + ' ...' }</p>
|
||||
<p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0, 101) + ' ...'}</p>
|
||||
<p className="d-xl-none">
|
||||
<span>
|
||||
{new Date(contact?.added).toDateString()}
|
||||
@@ -240,10 +256,11 @@ export default function Contacts(){
|
||||
<div className="mail-chat py-5 px-5">
|
||||
<div className="media align-items-center">
|
||||
<div className="bg-img mr-3">
|
||||
<img src={getImage("avtar/03.jpg")} className="img-fluid" alt="user" />
|
||||
<img src={getImage("avtar/03.jpg")} className="img-fluid"
|
||||
alt="user"/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0">{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}</h4>
|
||||
<h4 className="mb-0" style={{color: '#148399'}}>{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}</h4>
|
||||
<p>{activeContactUID ? new Date(activeDetail[0]?.added).toDateString() : new Date(filteredContactData[0]?.added).toDateString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -269,34 +286,41 @@ export default function Contacts(){
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-light mail-f px-4 py-3">
|
||||
<div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
|
||||
<p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
|
||||
<a href="#" className="text-primary"><i className="fa fa-microphone"></i></a>
|
||||
</div>
|
||||
<div className="collapse" id="editer">
|
||||
<div className="form-group">
|
||||
<textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="collapse" id="forward">
|
||||
<div className="form-group">
|
||||
<input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex align-items-center justify-content-between py-2">
|
||||
<div>
|
||||
{/*<ul className="nav">*/}
|
||||
{/* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/}
|
||||
{/* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/}
|
||||
{/* <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/}
|
||||
{/*</ul>*/}
|
||||
</div>
|
||||
<div>
|
||||
{/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*<div className="bg-light mail-f px-4 py-3">*/}
|
||||
{/* <div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">*/}
|
||||
{/* <p>Click here to <a href="#editer" data-toggle="collapse"*/}
|
||||
{/* className="text-primary px-1">Reply</a>or<a*/}
|
||||
{/* href="#forward" data-toggle="collapse"*/}
|
||||
{/* className="text-primary px-1">Forward</a></p>*/}
|
||||
{/* <a href="#" className="text-primary"><i*/}
|
||||
{/* className="fa fa-microphone"></i></a>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="collapse" id="editer">*/}
|
||||
{/* <div className="form-group">*/}
|
||||
{/* <textarea className="form-control mt-3"*/}
|
||||
{/* id="exampleFormControlTextarea1" rows="3"*/}
|
||||
{/* placeholder="Type here..."></textarea>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="collapse" id="forward">*/}
|
||||
{/* <div className="form-group">*/}
|
||||
{/* <input className="form-control mt-3" id="exampleFormControl"*/}
|
||||
{/* placeholder="Email Address"/>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="d-flex align-items-center justify-content-between py-2">*/}
|
||||
{/* <div>*/}
|
||||
{/* /!*<ul className="nav">*!/*/}
|
||||
{/* /!* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*!/*/}
|
||||
{/* /!* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*!/*/}
|
||||
{/* /!* <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*!/*/}
|
||||
{/* /!*</ul>*!/*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* /!*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*!/*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -30,8 +30,8 @@ export default function UserMenu() {
|
||||
<ul id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-bs-parent="#sidebarNav">
|
||||
<li className={`${pathname == siteLinks.dash ? 'active' : ''}`}><Link to={siteLinks.dash}>Home</Link></li>
|
||||
<li className={`${pathname == siteLinks.calendar ? 'active' : ''}`}><Link to={siteLinks.calendar}>Calendar</Link></li>
|
||||
<li className={`${pathname == siteLinks.contacts ? 'active' : ''}`}><Link to={siteLinks.contacts}>Contacts</Link></li>
|
||||
<li className={`${pathname == siteLinks.comments ? 'active' : ''}`}><Link to={siteLinks.comments}>Comments</Link></li>
|
||||
<li className={`${pathname == siteLinks.contacts ? 'active' : ''}`}><Link to={siteLinks.contacts}>Sites Contacts</Link></li>
|
||||
<li className={`${pathname == siteLinks.comments ? 'active' : ''}`}><Link to={siteLinks.comments}>Sites Comments</Link></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className={`${pathname == siteLinks.reports ? 'active' : ''}`}>
|
||||
|
||||
Reference in New Issue
Block a user