Merge branch 'calendar_filtering' of MERMS/MermsPanelReactJS into master

src/component/calendar/Calendar.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useQuery } from '@tanstack/react-query'
 
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
@@ -25,14 +25,7 @@ export default function Calendar(){
     const category = receievedEvents?.category  //EVENT CATEGORIES 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)
 
@@ -47,11 +40,14 @@ export default function Calendar(){
     const handleAddNewEvent = () => {
         if(newEvent.title && newEvent.color){
             const eventToAdd = {...newEvent}
-            setDummyEvents(prev => ([...prev, eventToAdd]))
+            setDefaultCategory(prev => ([...prev, eventToAdd]))
             setNewEvent({title: '', color: ''})
         }
     }
 
+    const handleActiveCategory = (id) => {
+        setActiveCategory(id)
+    }
 
     return(
         <>
@@ -79,38 +75,54 @@ export default function Calendar(){
                                 :
                                 <>
                                     <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={`fc-event 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={`${color} form-check-label`} htmlFor={item.cid}>
+                                                        {item.description}
+                                                        </label>
                                                 </div>
-                                            ))} */}
+                                            )
+                                        }
+                                        )}
+
+                                        {/* <div id="external-events">
                                             <ExternalDraggable category={category} />
-                                            {/* <div className="form-check">
+                                        </div> */}
-                                                <input className="form-check-input" type="checkbox" value={removeAfterDrop}
+
-                                                    id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
+                                        {/* <div className="form-check">
-                                                    <label className="form-check-label" htmlFor="defaultCheck1">
+                                            <input className="form-check-input" type="checkbox" value={removeAfterDrop}
-                                                        Remove After Drop
+                                                id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
-                                                    </label>
+                                                <label className="form-check-label" htmlFor="defaultCheck1">
-                                            </div> */}
+                                                    Remove After Drop
-                                        </div>
+                                                </label>
+                                        </div> */}
                                     </div>
                                     <div className="col-xl-9">
                                         <div className="event-calendar">
                                             <EventCalendar 
                                                 removeAfterDrop={removeAfterDrop} 
                                                 eventList={eventList}
+                                                activeCategory={activeCategory}
                                             />
                                         </div>
                                     </div>

src/component/calendar/EventCalendar.jsx

@@ -6,7 +6,7 @@ import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
 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 [currentEvents, setCurrentEvents] = useState([]);
 
@@ -79,9 +79,11 @@ export default function EventCalendar({removeAfterDrop, eventList}) {
   }
 
   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)
-  },[eventList])
+  },[activeCategory])
 
   return (
     <div className="demo-app">

src/css/calendar/_calendar.scss

@@ -31,13 +31,14 @@
 .fc-event {
   border-radius: 2px;
   border: none;
-  cursor: move;
+  // cursor: move;
   font-size: 13px;
   margin: 5px 0px;
   padding: 10px 10px 10px 40px;
   text-align: left;
   position:relative;
   &:before {
+    display: none;
     content:'';
     position:absolute;
     width:15px;