Compare commits

...

6 Commits

Author SHA1 Message Date
victorAnumudu 4505a6fbcd contact page api added 2025-01-24 21:15:16 +01:00
victorAnumudu 4367364d4f bug fix 2025-01-24 16:03:50 +01:00
victorAnumudu b2b0bf8af6 label color fixed 2025-01-24 15:08:43 +01:00
victor.ebuka fcde22d4cb Merge branch 'calendar_filtering' of MERMS/MermsPanelReactJS into master 2025-01-24 12:40:05 +00:00
victorAnumudu 56125b427d calendar filtering started 2025-01-24 13:38:47 +01:00
victor.ebuka 16066d030b Merge branch 'scroll-fix' of MERMS/MermsPanelReactJS into master 2025-01-23 20:17:08 +00:00
8 changed files with 302 additions and 372 deletions
+33 -21
View File
@@ -1,4 +1,4 @@
import React, { useCallback, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS"; import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
@@ -25,14 +25,7 @@ export default function Calendar(){
const category = receievedEvents?.category //EVENT CATEGORIES FROM API const category = receievedEvents?.category //EVENT CATEGORIES FROM API
const eventList = receievedEvents?.list //EVENT LIST FROM API const eventList = receievedEvents?.list //EVENT LIST FROM API
const events = [ const [activeCategory, setActiveCategory] = useState('1')
{id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
{id: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
{id: '3333', title: 'Client Call', color: 'fc-event-danger', start: new Date('2025-01-22')},
{id: '4444', title: 'Interview', color: 'fc-event-success', start: new Date('2025-01-1')}
]
const [dummyEvents, setDummyEvents] = useState(events)
const [removeAfterDrop, setRemoveAfterDrop] = useState(false) const [removeAfterDrop, setRemoveAfterDrop] = useState(false)
@@ -47,11 +40,14 @@ export default function Calendar(){
const handleAddNewEvent = () => { const handleAddNewEvent = () => {
if(newEvent.title && newEvent.color){ if(newEvent.title && newEvent.color){
const eventToAdd = {...newEvent} const eventToAdd = {...newEvent}
setDummyEvents(prev => ([...prev, eventToAdd])) // setDefaultCategory(prev => ([...prev, eventToAdd]))
setNewEvent({title: '', color: ''}) setNewEvent({title: '', color: ''})
} }
} }
const handleActiveCategory = (id) => {
setActiveCategory(id)
}
return( return(
<> <>
@@ -79,24 +75,40 @@ export default function Calendar(){
: :
<> <>
<div className="col-xl-3"> <div className="col-xl-3">
<div id="external-events">
{/* <button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal"> {/* <button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
Add New Event Add New Event
</button> </button>
<p className="mt-3"> <p className="mt-3">
Drag and drop your event or click in the calendar. Drag and drop your event or click in the calendar.
</p> */} </p> */}
{/* {dummyEvents.map((item, index) => (
<div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} {category.map((item, index) => {
draggable="true" let color = item?.cid == '1' ? 'fc-event-success' : item?.cid == '2' ? 'fc-event-danger' : item?.cid == '3' ? 'fc-event-warning' : 'fc-event-primary'
onDragStart={() => return (
handleDragStart({...item}) // <div key={index} className={`fc-event ${color}`} data-color={`${color}`}
} // // draggable={false}
> // // onDragStart={() =>
<span></span> {item.title} // // handleDragStart({...item})
// // }
// >
// <span>{item.description}</span>
// </div>
<div key={index} className={`form-check ${color}`}>
<input className="form-check-input" type="radio" value={item.cid}
id={item.cid} name='category' checked={item.cid == activeCategory} onChange={() => handleActiveCategory(item.cid)} />
<label className={`w-100 form-check-label`} htmlFor={item.cid}>
{item.description}
</label>
</div> </div>
))} */} )
}
)}
{/* <div id="external-events">
<ExternalDraggable category={category} /> <ExternalDraggable category={category} />
</div> */}
{/* <div className="form-check"> {/* <div className="form-check">
<input className="form-check-input" type="checkbox" value={removeAfterDrop} <input className="form-check-input" type="checkbox" value={removeAfterDrop}
id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} /> id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
@@ -105,12 +117,12 @@ export default function Calendar(){
</label> </label>
</div> */} </div> */}
</div> </div>
</div>
<div className="col-xl-9"> <div className="col-xl-9">
<div className="event-calendar"> <div className="event-calendar">
<EventCalendar <EventCalendar
removeAfterDrop={removeAfterDrop} removeAfterDrop={removeAfterDrop}
eventList={eventList} eventList={eventList}
activeCategory={activeCategory}
/> />
</div> </div>
</div> </div>
+5 -3
View File
@@ -6,7 +6,7 @@ import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction'; import interactionPlugin from '@fullcalendar/interaction';
import { INITIAL_EVENTS, createEventId } from './event-utils'; import { INITIAL_EVENTS, createEventId } from './event-utils';
export default function EventCalendar({removeAfterDrop, eventList}) { export default function EventCalendar({removeAfterDrop, eventList, activeCategory}) {
const [weekendsVisible, setWeekendsVisible] = useState(true); const [weekendsVisible, setWeekendsVisible] = useState(true);
const [currentEvents, setCurrentEvents] = useState([]); const [currentEvents, setCurrentEvents] = useState([]);
@@ -79,9 +79,11 @@ export default function EventCalendar({removeAfterDrop, eventList}) {
} }
useEffect(()=>{ useEffect(()=>{
let newEventList = eventList.map(item => ({...item, start: new Date(item?.start)})) // let newEventList = eventList?.map(item => ({...item, start: new Date(item?.start)}))
let newEventList = eventList?.filter(item => (Number(item.category) == Number(activeCategory)))?.map(item => ({...item, start: new Date(item?.start)}))
console.log('newEventList', newEventList)
setCurrentEvents(newEventList) setCurrentEvents(newEventList)
},[eventList]) },[activeCategory])
return ( return (
<div className="demo-app"> <div className="demo-app">
+59 -173
View File
@@ -1,12 +1,49 @@
import React from "react"; "use client"
import React, { useEffect, useState } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS"; import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage"; import getImage from "../../utils/getImage";
import { 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,
queryFn: () => contactData()
})
const contactsData = contacts?.data?.calendar_data?.contacts
const [activeContactUID, setActiveContactUID] = useState(null)
const [activeDetail, setActiveDetail] = useState(null)
const changeActiveUID = (uid) => {
setActiveContactUID(uid)
let detail = contactsData.filter(item => item.uid == uid)
setActiveDetail(detail)
}
return( return(
<> <>
<BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} /> <BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} />
{isFetching ?
<>
<div className="row">
<div className="col-12">
<p className='text-mute'>Loading...</p>
</div>
</div>
</>
: isError ?
<div className="row">
<div className="col-12">
<p className='text-danger'>{error.message}</p>
</div>
</div>
:
<div className="row"> <div className="row">
{/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/} {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
<div className="col-12"> <div className="col-12">
@@ -109,8 +146,11 @@ export default function Contacts(){
</div> </div>
</div> </div>
<div className="mail-msg scrollbar scroll_dark"> <div className="mail-msg scrollbar scroll_dark">
<div className="mail-msg-item"> {contactsData && contactsData.map((contact, index)=> {
<a href="javascript:void(0)"> const isActive = (contact.uid == activeContactUID) || (!activeContactUID && index == 0)
return (
<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="media align-items-center">
<div className="mr-3"> <div className="mr-3">
<div className="bg-img"> <div className="bg-img">
@@ -119,193 +159,37 @@ export default function Contacts(){
</div> </div>
<div className="w-100"> <div className="w-100">
<div className="mail-msg-item-titel justify-content-between"> <div className="mail-msg-item-titel justify-content-between">
<p>Martin smith</p> <p>{contact.sender}</p>
<p className="d-none d-xl-block">06:59 <span> PM </span></p> {/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
<p className="d-none d-xl-block"><span>{getCustomTime(contact.added)}</span></p>
</div> </div>
<h5 className="mb-0 my-2">Saas Designer</h5> <h5 className="mb-0 my-2">{contact.title}</h5>
<p>Since there is not an "all the above" category, I'll take the opportunity to enthusiastically congratulate you on the very high quality.</p> <p>{contact.message.length < 150 ? contact.message : contact.message.substring(0,151) + '...' }</p>
<p className="d-xl-none">06:59 <span> PM </span></p> <p className="d-xl-none"><span>{getCustomTime(contact.added)}</span></p>
</div>
</div>
</a>
</div>
<div className="mail-msg-item">
<a href="javascript:void(0)">
<div className="media align-items-center">
<div className="mr-3">
<div className="bg-img">
<img src={getImage("avtar/02.jpg")} className="img-fluid" alt="user" />
</div>
</div>
<div className="w-100">
<div className="mail-msg-item-titel justify-content-between">
<p>DutcaPatrick</p>
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 className="mb-0 my-2">Mobile app Designer </h5>
<p>Very nice template, lots of pages and good documentation.</p>
<p className="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div className="mail-msg-item">
<a href="javascript:void(0)">
<div className="media align-items-center">
<div className="mr-3">
<div className="bg-img">
<img src={getImage("avtar/03.jpg")} className="img-fluid" alt="user" />
</div>
</div>
<div className="w-100">
<div className="mail-msg-item-titel justify-content-between">
<p>m_morsch</p>
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 className="mb-0 my-2">Landing page Designer</h5>
<p>Excellent and at a great price... thank you very much!</p>
<p className="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div className="mail-msg-item">
<a href="javascript:void(0)">
<div className="media align-items-center">
<div className="mr-3">
<div className="bg-img">
<img src={getImage("avtar/04.jpg")} className="img-fluid" alt="user" />
</div>
</div>
<div className="w-100">
<div className="mail-msg-item-titel justify-content-between">
<p>AnnaHorno</p>
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 className="mb-0 my-2">Re-Design ios app</h5>
<p>Solved my theme problem in 10 minutes. We thank you.</p>
<p className="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div className="mail-msg-item">
<a href="javascript:void(0)">
<div className="media align-items-center">
<div className="mr-3">
<div className="bg-img">
<img src={getImage("avtar/05.jpg")} className="img-fluid" alt="user" />
</div>
</div>
<div className="w-100">
<div className="mail-msg-item-titel justify-content-between">
<p>Wdcorbitt</p>
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 className="mb-0 my-2">Mobil UX/UI Designer</h5>
<p>Asked for information and received it EXTREMELY quickly. Great layout - good code - great price! </p>
<p className="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div className="mail-msg-item">
<a href="javascript:void(0)">
<div className="media align-items-center">
<div className="mr-3">
<div className="bg-img">
<img src={getImage("avtar/06.jpg")} className="img-fluid" alt="user" />
</div>
</div>
<div className="w-100">
<div className="mail-msg-item-titel justify-content-between">
<p>Anne Smith</p>
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 className="mb-0 my-2">Jobly Opportunity</h5>
<p>Mentor has so many features and layouts. Its a great choice.</p>
<p className="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div className="mail-msg-item">
<a href="javascript:void(0)">
<div className="media align-items-center">
<div className="mr-3">
<div className="bg-img">
<img src={getImage("avtar/07.jpg")} className="img-fluid" alt="user" />
</div>
</div>
<div className="w-100">
<div className="mail-msg-item-titel justify-content-between">
<p>Paul Flavius</p>
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 className="mb-0 my-2">Saas Designer</h5>
<p>There are many people in the world with amazing talents who realize only a small percentage of their potential. </p>
<p className="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div className="mail-msg-item">
<a href="javascript:void(0)">
<div className="media align-items-center">
<div className="mr-3">
<div className="bg-img">
<img src="assets/img/avtar/08.jpg" className="img-fluid" alt="user" />
</div>
</div>
<div className="w-100">
<div className="mail-msg-item-titel justify-content-between">
<p>Sara Lisbon</p>
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 className="mb-0 my-2">UI Designer</h5>
<p>We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln.</p>
<p className="d-xl-none">06:59 <span> PM </span></p>
</div>
</div>
</a>
</div>
<div className="mail-msg-item">
<a href="javascript:void(0)">
<div className="media align-items-center">
<div className="mr-3">
<div className="bg-img">
<img src="assets/img/avtar/09.jpg" className="img-fluid" alt="user" />
</div>
</div>
<div className="w-100">
<div className="mail-msg-item-titel justify-content-between">
<p>Annahorno</p>
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
</div>
<h5 className="mb-0 my-2">Saas Designer</h5>
<p>One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
<p className="d-xl-none">06:59 <span> PM </span></p>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
)
})}
</div> </div>
</div> </div>
</div> </div>
<div className="col-xxl-6 border-t border-xxl-t"> <div className="col-xxl-6 border-t border-xxl-t">
<div className="mail-chat py-5 px-5"> <div className="mail-chat py-5 px-5">
<div className="media align-items-center"> <div className="media align-items-center">
<div className="bg-img mr-3"> <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>
<div> <div>
<h4 className="mb-0">Dutca Patrick</h4> <h4 className="mb-0">{activeContactUID ? activeDetail[0].sender : contactsData[0].sender}</h4>
<p>30 Min ago</p> <p>{activeContactUID ? getCustomTime(activeDetail[0].added) : getCustomTime(contactsData[0].added)}</p>
</div> </div>
</div> </div>
<div className="mt-4 d-flex justify-content-between"> <div className="mt-4 d-flex justify-content-between">
<div> <div>
<h3>Landing page Designer...</h3> <h3>{activeContactUID ? activeDetail[0].title : contactsData[0].title}</h3>
</div> </div>
<div className="d-flex"> <div className="d-flex">
{/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/} {/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
@@ -313,10 +197,11 @@ export default function Contacts(){
</div> </div>
</div> </div>
<div> <div>
<p className="my-4">hey adminjon...</p> <p>{activeContactUID ? activeDetail[0].message : contactsData[0].message}</p>
{/* <p className="my-4">hey adminjon...</p>
<p className="mb-2">I truly believe Augustines words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p> <p className="mb-2">I truly believe Augustines words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
<p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p> <p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>
<p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p> <p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p> */}
{/*<div className="my-5">*/} {/*<div className="my-5">*/}
{/* <p>Have lovely Day,</p>*/} {/* <p>Have lovely Day,</p>*/}
{/* <p>adminjon</p>*/} {/* <p>adminjon</p>*/}
@@ -358,6 +243,7 @@ export default function Contacts(){
</div> </div>
</div> </div>
</div> </div>
}
</> </>
) )
} }
+14 -1
View File
@@ -31,13 +31,14 @@
.fc-event { .fc-event {
border-radius: 2px; border-radius: 2px;
border: none; border: none;
cursor: move; // cursor: move;
font-size: 13px; font-size: 13px;
margin: 5px 0px; margin: 5px 0px;
padding: 10px 10px 10px 40px; padding: 10px 10px 10px 40px;
text-align: left; text-align: left;
position:relative; position:relative;
&:before { &:before {
display: none;
content:''; content:'';
position:absolute; position:absolute;
width:15px; width:15px;
@@ -49,6 +50,9 @@
&-primary { &-primary {
@include hex-rgba($primary, 0.2); @include hex-rgba($primary, 0.2);
color:$primary; color:$primary;
& label {
color:$primary;
}
&:before { &:before {
@include hex-rgba($primary, 0.8); @include hex-rgba($primary, 0.8);
} }
@@ -59,6 +63,9 @@
&-warning { &-warning {
@include hex-rgba($warning, 0.2); @include hex-rgba($warning, 0.2);
color:$warning; color:$warning;
& label {
color:$warning;
}
&:before { &:before {
@include hex-rgba($warning, 0.8); @include hex-rgba($warning, 0.8);
} }
@@ -69,6 +76,9 @@
&-danger { &-danger {
@include hex-rgba($danger, 0.2); @include hex-rgba($danger, 0.2);
color:$danger; color:$danger;
& label {
color:$danger;
}
&:before { &:before {
@include hex-rgba($danger, 0.8); @include hex-rgba($danger, 0.8);
} }
@@ -79,6 +89,9 @@
&-success { &-success {
@include hex-rgba($success, 0.2); @include hex-rgba($success, 0.2);
color:$success; color:$success;
& label {
color:$success;
}
&:before { &:before {
@include hex-rgba($success, 0.8); @include hex-rgba($success, 0.8);
} }
+1 -3
View File
@@ -40,9 +40,7 @@
align-items: center; align-items: center;
} }
.mail-msg{ .mail-msg{
max-height: 500px; max-height: 747px;
min-height: 400px;
// max-height: 747px;
overflow-y: auto; overflow-y: auto;
outline: none; outline: none;
@include laptop { @include laptop {
+2 -1
View File
@@ -5,7 +5,8 @@ const queryKeys = {
product: ['product-data'], product: ['product-data'],
product_url: ['product_url'], product_url: ['product_url'],
myproduct_provision: ['myproduct_provision'], myproduct_provision: ['myproduct_provision'],
calendar_events: ['calendar_events'] calendar_events: ['calendar_events'],
contacts: ['contacts']
} }
export default queryKeys export default queryKeys
+5
View File
@@ -122,6 +122,11 @@ export const productData = () => {
return getAuxEnd(`/panel/account/products`) return getAuxEnd(`/panel/account/products`)
} }
// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
export const contactData = () => {
return getAuxEnd(`/panel/contacts`)
}
// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION // FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
export const productsURL = () => { export const productsURL = () => {
return getAuxEnd(`/panel/account/products/url`) return getAuxEnd(`/panel/account/products/url`)
+13
View File
@@ -0,0 +1,13 @@
function getCustomTime(dateStr) {
let date = new Date(dateStr);
if(isNaN(date)){
return '00:00'
}
const hours = date.getHours()
const minutes = date.getMinutes()
return `${hours}:${minutes} ${hours >= 12 ? 'PM' : 'AM'}`
}
export default getCustomTime