Untitled
unknown
plain_text
a year ago
55 kB
4
Indexable
Never
import React, { useEffect, useRef, useState } from 'react'; // styles import { makeStyles } from '@material-ui/core/styles'; import { Card, Typography, Box, Chip, TextareaAutosize, FormControlLabel, Checkbox } from '@mui/material'; import { Button, Dropdown, DropdownMenu, DropdownItem, DropdownToggle, Col, Form, Input, Label, Modal, ModalBody, ModalHeader, Row } from "reactstrap"; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import FullCalendar from '@fullcalendar/react'; import timeGridPlugin from '@fullcalendar/timegrid' import dayGridPlugin from '@fullcalendar/daygrid'; import BootstrapTheme from "@fullcalendar/bootstrap"; import EngineeringIcon from '@mui/icons-material/Engineering'; import UpgradeIcon from '@mui/icons-material/Upgrade'; import KeyboardReturnIcon from '@mui/icons-material/KeyboardReturn'; import LocalShippingIcon from '@mui/icons-material/LocalShipping'; import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; import GppGoodIcon from '@mui/icons-material/GppGood'; import ReportProblemIcon from '@mui/icons-material/ReportProblem'; import BugReportIcon from '@mui/icons-material/BugReport'; import CloseIcon from '@mui/icons-material/Close'; import MiscellaneousServicesIcon from '@mui/icons-material/MiscellaneousServices'; import GroupsIcon from '@mui/icons-material/Groups'; import "react-datepicker/dist/react-datepicker.css"; // Стилове на DatePicker компонента // services import { getAllEvents, getAllNomenclatures, getNomenclatureTypes, getEventById } from '../../services/EventService'; // helpers import * as helpers from '../../helpers/Helper'; import { getNomenclatureNameForApi, getNomenclatureIdForApi, getNomenclatureNameByType } from './eventHelper'; //css // import "@fullcalendar/bootstrap/main.css"; const useStyles = makeStyles((theme) => ({ root: {}, titleText: { color: '#4B4B4B', fontWeight: 'bold', marginBottom: '1em', padding: '1em', fontSize: '1rem' }, itemTitle: { color: '#4B4B4B', fontWeight: 'bold', padding: '1em', fontSize: '1rem' }, title: { marginLeft: '10px' }, filterHeader: { marginTop: '20px', marginLeft: '10px', }, '.MuiPickersDay-root.Mui-selected': { width: '24px', height: '24px', borderRadius: '50%', backgroundColor: '#209214!important', }, menuList: { '.MuiMenu-list': { display: 'flex !important', flexDirection: 'column !important' } }, select: { minWidth: '200px' }, menuItemColumn: { display: 'block', padding: '10px' }, filterColumn: { minWidth: 'fit-content' }, datePickerFromDate: { marginLeft: '30px', flex: '0 0 1em' }, datePickerInput: { '& div': { padding: '5px' } }, filtersRow: { display: 'flex', flexDirection: 'row', justifyContent: 'center', }, addBtn: { alignSelf: 'end', minWidth: 'fit-content' }, applyBtn: { margin: '10px', textAlign: 'center' }, selectedItemsContainer: { display: 'flex', alignItems: 'center', gap: theme.spacing(1), flexWrap: 'wrap', margin: '20px 10rem 0px 1rem', }, selectedChip: { backgroundColor: '#556ee6', color: 'white', borderRadius: '10px', }, fullCalendar: { zIndex: 1, '& .fc-toolbar.fc-header-toolbar': { margin: '20px', }, '& .fc-toolbar-title': { color: '#495057' }, '& .table-bordered th, .table-bordered td, .table-bordered': { border: '1px solid #eff2f7' }, '& .fc-daygrid-day-top': { position: 'absolute' }, '& .fc-daygrid-event-harness': { margin: '0 20px', borderRadius: '10px', '& .fc-h-event': { borderRadius: '10px' }, }, '& .fc-event-main': { overflow: 'hidden' }, '& .fc-toolbar-chunk': { display: 'flex', justifyContent: 'center', alignItems: 'center', } }, customEvent: { color: 'black', overflow: 'hidden' }, input: { display: 'block', width: '100%', height: 'calc(1.5em + 0.94rem + 2px)', padding: '0.47rem 0.75rem', fontSize: '0.8125rem', fontWeight: 400, lineHeight: 1.5, color: '#495057', backgroundColor: '#fff', backgroundClip: 'padding-box', border: '1px solid #ced4da', borderRadius: '0.25rem', transition: 'borderColor 0.15s ease-in-out, box-shadow 0.15s ease-in-out', '&[type="date"]::-webkit-calendar-picker-indicator': { background: 'transparent', bottom: 0, color: 'transparent', cursor: 'pointer', height: 'auto', left: 0, position: 'absolute', right: 0, top: 0, width: 'auto', } }, formLabelMain: { fontWeight: 700, } })) const Events = () => { const classes = useStyles(); const [dateFilters, setDateFilters] = useState({ 'fromDate': null, 'toDate': null }); // const [selectedNomenclature, setSelectedNomenclature] = useState(''); // const [selectedNomenclatureType, setSelectedNomenclatureType] = useState(''); // const [nomenclatures, setNomenclatures] = useState([]); // const [nomenclatureTypes, setNomenclatureTypes] = useState([]); const [highlightedDays, setHighlightedDays] = useState([]); // const [selectedItems, setSelectedItems] = useState([]); // const [selectedNomenclatureData, setSelectedNomenclatureData] = useState({}); const [modal, setModal] = useState(false); const [event, setEvent] = useState({}); // const [lastSelectedDateFilterName, setLastSelectedDateFilterName] = useState(''); const [eventsLoaded, setEventsLoaded] = useState(false); const [clearEventsBtnClicked, setClearEventsBtnClicked] = useState(false); const calendarRef = useRef(); // const [nomenclatureEventDropdown, setNomenclatureEventDropdown] = useState(false) // const [eventTypeDropdown, setEventTypeDropdown] = useState(false) const [eventSubjects, setEventSubjects] = useState([]) // const [showMonthDropdown, setShowMonthDropdown] = useState(false); const [hasCancelledStatus, setHasCancelledStatus] = useState(true); const [selectedNomenclatureDataTest, setSelectedNomenclatureDataTest] = useState({}); const [severities, setSeverities] = useState({ 'critical': true, 'high': true, 'medium': true, 'low': true, 'informational': true, }); const [statuses, setStatuses] = useState({ 'unconfirmed': true, 'confirmed': true, 'cancelled': true, }); const [types, setTypes] = useState({ 'maintenance': true, 'upgrade': true, 'rollback': true, 'deployment': true, 'shutdown': true, 'security': true, 'third party issue': true, 'bug fix': true, 'meeting': true, 'other': true, }); const severityColor = { 'critical': '#ff4646', 'high': '#ec9900', 'medium': '#caca00', 'low': '#7d7dec', 'informational': '#25bef0', } const iconType = { 'maintenance': <EngineeringIcon />, 'upgrade': <UpgradeIcon />, 'rollback': <KeyboardReturnIcon />, 'deployment': <LocalShippingIcon />, 'shutdown': <PowerSettingsNewIcon />, 'security': <GppGoodIcon />, 'third party issue': <ReportProblemIcon />, 'bug fix': <BugReportIcon />, 'meeting': <GroupsIcon />, 'other': <MiscellaneousServicesIcon />, } // const [calendarApi, setCalendarApi] = useState(null); const [currentMonth, setCurrentMonth] = useState(null); useEffect(() => { getNewEventData(); getAllNomenclatures() .then(data => { // setNomenclatures(data.result); }) }, []) // useEffect(() => { // if (dateFilters.fromDate !== null || // dateFilters.toDate !== null || // selectedNomenclatureData?.NomEventSeverity?.length || // selectedNomenclatureData?.NomEventStatus?.length || // selectedNomenclatureData?.NomEventType?.length) { // if (dateFilters?.fromDate !== null || dateFilters?.toDate !== null) { // calendarRef.current = new Date(dateFilters[lastSelectedDateFilterName]) // // calendarRef.current.calendar.state.currentDate = new Date(dateFilters[lastSelectedDateFilterName]) // } // else { // calendarRef.current = new Date() // // calendarRef.current.calendar.state.currentDate = new Date() // } // const properFromDate = getProperDate(dateFilters?.fromDate); // const properToDate = getProperDate(dateFilters?.toDate); // const filters = getNomenclatureFilter(properFromDate, properToDate, selectedNomenclatureData); // getAllEvents(filters) // .then(data => { // setHighlightedDays(data.result); // }) // } // else if (!selectedNomenclatureData?.NomEventSeverity?.length // && !selectedNomenclatureData?.NomEventStatus?.length // && !selectedNomenclatureData?.NomEventType?.length && eventsLoaded && !clearEventsBtnClicked) { // getAllEvents() // .then(data => { // setHighlightedDays(data.result); // }) // } // setClearEventsBtnClicked(false); // }, [dateFilters.fromDate, // dateFilters.toDate, // selectedNomenclatureData?.NomEventSeverity?.length, // selectedNomenclatureData?.NomEventStatus?.length, // selectedNomenclatureData?.NomEventType?.length]) useEffect(() => { if (dateFilters.fromDate !== null || dateFilters.toDate !== null || selectedNomenclatureDataTest?.NomEventSeverity?.length || selectedNomenclatureDataTest?.NomEventStatus?.length || selectedNomenclatureDataTest?.NomEventType?.length) { getNewEventData(currentMonth ? currentMonth : ''); } else if (!selectedNomenclatureDataTest?.NomEventSeverity?.length && !selectedNomenclatureDataTest?.NomEventStatus?.length && !selectedNomenclatureDataTest?.NomEventType?.length && eventsLoaded && !clearEventsBtnClicked) { getAllEvents() .then(data => { setHighlightedDays(data.result); }) } setClearEventsBtnClicked(false); }, [dateFilters.fromDate, dateFilters.toDate, selectedNomenclatureDataTest?.NomEventSeverity?.length, selectedNomenclatureDataTest?.NomEventStatus?.length, selectedNomenclatureDataTest?.NomEventType?.length]) useEffect(() => { // currentMonth could be 0 if January is selected if (currentMonth || currentMonth === 0) { console.log('useEffect currentMonth', currentMonth) getNewEventData(currentMonth); } }, [currentMonth]); // const handleNomenclatureChange = (event) => { // setSelectedNomenclature(event); // getNomenclatureTypes(event) // .then(data => { // setNomenclatureTypes(data.result); // }) // } // const handleNomenclatureTypeChange = (event) => { // setSelectedNomenclatureType(event?.alias); // } // handling click on event on calendar const handleEventClick = arg => { const event = highlightedDays.filter(e => e.id === arg?.event.id)[0]; const startDate = event?.startDatetime.split('T')[0]; const endDate = event?.endDatetime.split('T')[0]; const startHours = event?.startDatetime.split('T')[1].split(':')[0] + ":" + event?.startDatetime.split('T')[1].split(':')[1]; const endHours = event?.endDatetime.split('T')[1].split(':')[0] + ":" + event?.endDatetime.split('T')[1].split(':')[1]; setEvent({ id: event?.id, title: event?.title, startDate: startDate, endDate: endDate, startHours: startHours, severity: event?.severity, status: event?.status, endHours: endHours, description: event?.description, }); toggle(event?.id); }; // const handleChangeFilter = (name, e) => { // e.persist(); // const date = e.target.value; // const d = new Date(date) // const day = d.getDate(); // const month = d.getMonth() + 1; // const year = d.getFullYear(); // const dateToCheck = date ? year + '-' + ('0' + month.toString()).slice(-2) + '-' + ('0' + day.toString()).slice(-2) : null; // let formattedFromDate = '' // let formattedToDate = ''; // let dateFotmatted = ''; // setLastSelectedDateFilterName(name); // if (name === 'toDate') { // dateFotmatted = // dateFilters?.fromDate ? // dateFilters?.fromDate // : dateToCheck; // let startDateTimeToCheck = new Date(dateFotmatted); // let endDateTimeToCheck = new Date(dateToCheck); // if (startDateTimeToCheck.getTime() > endDateTimeToCheck.getTime()) { // formattedToDate = dateToCheck // formattedFromDate = formattedToDate; // } else { // formattedToDate = dateToCheck // formattedFromDate = dateFilters?.fromDate; // } // } else if (name === 'fromDate') { // dateFotmatted = // dateFilters?.toDate ? // dateFilters?.toDate // : dateToCheck; // let startDateTimeToCheck = new Date(dateToCheck); // let endDateTimeToCheck = new Date(dateFotmatted); // if (startDateTimeToCheck.getTime() > endDateTimeToCheck.getTime()) { // formattedFromDate = dateToCheck // formattedToDate = formattedFromDate; // } else { // formattedFromDate = dateToCheck // formattedToDate = dateFilters?.toDate; // } // } // //change both dates to the yyyy-mm-dd format // formattedFromDate = formattedFromDate ? // formattedFromDate // : dateToCheck // formattedToDate = formattedToDate ? // formattedToDate // : dateToCheck // setDateFilters((prevState) => { // return ({ // ...prevState, // ['fromDate']: formattedFromDate, // ['toDate']: formattedToDate // }) // }) // } // const handleMonthSelect = (event) => { // const newMonth = event.target.value; // if (calendarApi) { // calendarApi.gotoDate(newMonth); // } // setShowMonthDropdown(false); // }; // const handleAddItemClick = () => { // let correctNomenclatureType = selectedNomenclatureType ? selectedNomenclatureType : // (nomenclatureTypes?.length ? nomenclatureTypes[0].alias : '') // if (correctNomenclatureType && !selectedItems.filter(el => el.selectedNomenclatureType === correctNomenclatureType)[0]) { // setSelectedItems((prevState) => { // return [ // ...prevState, // { 'selectedNomenclatureType': correctNomenclatureType, 'selectedNomenclature': selectedNomenclature } // ] // }); // setSelectedNomenclatureData((prevState) => { // return { // ...prevState, // [selectedNomenclature]: prevState[selectedNomenclature] // ? [...prevState[selectedNomenclature], getNomenclatureIdForApi(selectedNomenclature, correctNomenclatureType)] // : [getNomenclatureIdForApi(selectedNomenclature, correctNomenclatureType)] // } // }) // } // if (selectedNomenclatureType !== correctNomenclatureType) { // setSelectedNomenclatureType(correctNomenclatureType); // } // }; // const handleRemoveItemClick = (itemToRemove) => { // setSelectedItems(selectedItems.filter((item) => item.selectedNomenclatureType !== itemToRemove.selectedNomenclatureType)); // const idOfItemToRemove = getNomenclatureIdForApi(itemToRemove['selectedNomenclature'], itemToRemove['selectedNomenclatureType']) // setSelectedNomenclatureData((prevState) => { // const updatedNomenclature = prevState[itemToRemove.selectedNomenclature].filter( // (id) => id !== idOfItemToRemove // ); // return { // ...prevState, // [itemToRemove.selectedNomenclature]: updatedNomenclature // } // }) // }; const handleChangeEventFilter = (e, type) => { const eventName = e.target.name; if (type === 'severity') { setSeverities((prevState) => { return { ...prevState, [eventName]: e.target.checked } }) setSelectedNomenclatureDataTest((prevState) => { return { ...prevState, ['NomEventSeverity']: prevState['NomEventSeverity'] ? [...prevState['NomEventSeverity'], getNomenclatureIdForApi('NomEventSeverity', eventName)] : [getNomenclatureIdForApi('NomEventSeverity', eventName)] } }) } else if (type === 'status') { if (eventName === 'cancelled') { setHasCancelledStatus(!hasCancelledStatus) } setStatuses((prevState) => { return { ...prevState, [eventName]: e.target.checked } }) setSelectedNomenclatureDataTest((prevState) => { return { ...prevState, ['NomEventStatus']: prevState['NomEventStatus'] ? [...prevState['NomEventStatus'], getNomenclatureIdForApi('NomEventStatus', eventName)] : [getNomenclatureIdForApi('NomEventStatus', eventName)] } }) } else if (type === 'type') { setTypes((prevState) => { return { ...prevState, [eventName]: e.target.checked } }) setSelectedNomenclatureDataTest((prevState) => { return { ...prevState, ['NomEventType']: prevState['NomEventType'] ? [...prevState['NomEventType'], getNomenclatureIdForApi('NomEventType', eventName)] : [getNomenclatureIdForApi('NomEventType', eventName)] } }) } } // const clearNomenclature = () => { // setDateFilters((prevState) => ({ // 'fromDate': null, // 'toDate': null, // })); // calendarRef.current = new Date(); // setSelectedNomenclature(''); // setSelectedNomenclatureType(''); // setSelectedNomenclatureData({}); // setSelectedItems([]); // setNomenclatureTypes([]); // setClearEventsBtnClicked(true); // getAllEvents() // .then(data => { // setHighlightedDays(data.result); // }) // getAllNomenclatures() // .then(data => { // setNomenclatures(data.result); // }) // } const getNewEventData = (newMonth = '') => { const currentDate = new Date(calendarRef?.current?.calendar?.currentData?.currentDate); // Get raw dates with the provided month or currentDate const startRawDate = new Date(currentDate.getFullYear(), newMonth ? newMonth : currentDate.getMonth(), 1); const endRawDate = new Date(currentDate.getFullYear(), newMonth ? newMonth + 1 : currentDate.getMonth() + 1, 0); const properFromDate = getProperFromAndEndDate(startRawDate); const properToDate = getProperFromAndEndDate(endRawDate); const filters = getNomenclatureFilterTest(properFromDate, properToDate, selectedNomenclatureDataTest); getAllEvents(filters) .then(data => { setEventsLoaded(true); setHighlightedDays(data.result); }) } const getProperFromAndEndDate = (date) => { let day = date.getDate(); let month = date.getMonth() + 1; let year = date.getFullYear(); const properDate = date ? month + '/' + day + '/' + year : '' return properDate; } // const getNomenclatureFilter = (properFromDate, properToDate, selectedNomenclatureData) => { // let filter = []; // if (properFromDate) { // filter.push(`fromDate=${properFromDate}`) // } // if (properToDate) { // filter.push(`toDate=${properToDate}`) // } // Object.keys(selectedNomenclatureData).forEach((nomenclature) => { // if (selectedNomenclatureData[nomenclature].length) { // const nomenclatureApiName = getNomenclatureNameForApi(nomenclature) // filter.push(`${nomenclatureApiName}=${selectedNomenclatureData[nomenclature]}`) // } // }) // filter = filter.length ? '?' + filter.join('&') : '' // return filter; // } const getNomenclatureFilterTest = (properFromDate, properToDate, selectedNomenclatureData) => { let filter = []; if (properFromDate) { filter.push(`fromDate=${properFromDate}`) } if (properToDate) { filter.push(`toDate=${properToDate}`) } const severityIdFilters = []; const statusIdFilters = []; const typeIdFilters = []; Object.keys(severities).forEach((type) => { if (severities[type] === true) { const id = getNomenclatureIdForApi('NomEventSeverity', type); severityIdFilters.push(id); } }) Object.keys(statuses).forEach((type) => { if (statuses[type] === true) { const id = getNomenclatureIdForApi('NomEventStatus', type); statusIdFilters.push(id); } }) Object.keys(types).forEach((type) => { if (types[type] === true) { const id = getNomenclatureIdForApi('NomEventType', type); typeIdFilters.push(id); } }) severityIdFilters?.length && filter.push(`severitiesIds=${severityIdFilters}`) statusIdFilters?.length && filter.push(`statusesIds=${statusIdFilters}`) typeIdFilters?.length && filter.push(`eventTypesIds=${typeIdFilters}`) filter = filter.length ? '?' + filter.join('&') : '' return filter; } // get correct event names for the week days const getHighlatedDays = () => { return highlightedDays?.map((event) => { const isCancelled = event.status === 'cancelled' ? true : false const backgroundColor = isCancelled ? '#E0E0E0' : (severityColor[event?.severity] ? severityColor[event?.severity] : 'blue') return { id: event.id, title: event.title, start: event.startDatetime, end: event.endDatetime, severity: event.severity, type: event.type, status: event.status, description: event.description, backgroundColor: backgroundColor, } }) } // handling the modal state const toggle = (eventId = null) => { if (modal) { setModal(false); setEvent(null); setEventSubjects([]); } else { setModal(true); if (eventId) { getEventById(eventId) .then(data => { setEventSubjects((prevState) => { return data?.result?.subjects }) }) } } }; // events shown in each calendar day const eventContent = (arg) => { const event = highlightedDays.filter(event => event.id === arg.event.id)[0] const cancelledIcon = event?.status === 'cancelled' ? <CloseIcon sx={{ color: 'red' }} /> : null const Icon = iconType[event?.type] ? iconType[event?.type] : null const localeTimeString = arg.event.start.toLocaleTimeString(); const formatHours = ('0' + localeTimeString.split(' ')[0].split(':')[0]).slice(-2); const formatMinutes = ('0' + localeTimeString.split(' ')[0].split(':')[1]).slice(-2); const amPmformat = localeTimeString.split(' ')[1]; const time = `${formatHours}:${formatMinutes} ${amPmformat}`; return ( <div className={classes.customEvent}> <Box sx={{ display: 'inline-block', mr: '20px', fontWeight: '600', fontSize: '1em' }}>{time}</Box> {cancelledIcon ? <Box sx={{ display: 'inline-block', mr: '10px' }}>{cancelledIcon}</Box> : null} <Box sx={{ display: 'inline-block', mr: '10px' }}>{Icon}</Box> <Box sx={{ display: 'inline-block', fontWeight: '700' }}>{arg.event.title}</Box> </div> ); }; return ( <> <LocalizationProvider dateAdapter={AdapterDayjs}> <div className="page-content"> <div className="container-fluid containter-nav-tabs"> <Card className="card-fix-height"> {/* <Typography className={classes.titleText} sx={{ ...helpers.colorBasedOnTheme }}>Calendar</Typography> */} {/* <Row className={classes.filterHeader}> <Row> <Col className={classes.datePickerFromDate}> <label className="form-label">Start Date</label> <input className={classes.input} type="date" value={dateFilters?.fromDate ? dateFilters?.fromDate : 'dd/mm/yyyy'} onChange={(e) => handleChangeFilter('fromDate', e)} id="fromDate-input" /> </Col> <Col className={classes.datePickerToDate}> <div> <label className="form-label">End Date</label> <input className={classes.input} type="date" value={dateFilters?.toDate ? dateFilters?.toDate : 'dd/mm/yyyy'} onChange={(e) => handleChangeFilter('toDate', e)} id="toDate-input" /> </div> </Col> <Col className={classes.filterColumn}> <label className="form-label">Nomenclature event</label> <Dropdown isOpen={nomenclatureEventDropdown} toggle={() => setNomenclatureEventDropdown(!nomenclatureEventDropdown)} > <DropdownToggle tag="button" className="btn btn-primary"> {selectedNomenclature ? selectedNomenclature : 'Select a nomenclature'} <i className="mdi mdi-chevron-down" /> </DropdownToggle> <DropdownMenu> <DropdownItem onClick={() => setSelectedNomenclature('')}>No nomenclature</DropdownItem> <div className="dropdown-divider"></div> { nomenclatures?.length && nomenclatures.map((item) => { return <DropdownItem onClick={() => handleNomenclatureChange(item)} value={item}>{item}</DropdownItem> }) } </DropdownMenu> </Dropdown> </Col> {selectedNomenclature ? <Col className={classes.filterColumn}> <label className="form-label">Event Type</label> <Dropdown isOpen={eventTypeDropdown} toggle={() => setEventTypeDropdown(!eventTypeDropdown)} > <DropdownToggle tag="button" className="btn btn-primary"> {selectedNomenclatureType ? selectedNomenclatureType : 'Select event type'} <i className="mdi mdi-chevron-down" /> </DropdownToggle> <DropdownMenu> <div className="dropdown-divider"></div> { nomenclatureTypes?.length && nomenclatureTypes.map((item) => { return <DropdownItem onClick={() => handleNomenclatureTypeChange(item)} value={item.alias}>{item.alias}</DropdownItem> }) } </DropdownMenu> </Dropdown> </Col> : null} {selectedNomenclature ? <Col className={classes.addBtn}> <Button onClick={handleAddItemClick} color={'primary'}>Add filter</Button> </Col> : null } <Col className={classes.addBtn}> { dateFilters?.fromDate || dateFilters?.toDate || selectedNomenclatureData?.NomEventSeverity?.length || selectedNomenclatureData?.NomEventStatus?.length || selectedNomenclatureData?.nomenclatureType?.length ? <Button onClick={clearNomenclature} color={'primary'}>Clear filters</Button> : null } </Col> </Row> </Row> */} {/* <Col> <Box mt={'20px'}> <Col className={classes.title}> {selectedItems.length > 0 && <label className="form-label">Event Type</label>} </Col> <Box className={classes.selectedItemsContainer}> {selectedItems && selectedItems.map((item) => ( <Chip key={item.selectedNomenclatureType} label={item.selectedNomenclatureType} onDelete={() => handleRemoveItemClick(item)} className={classes.selectedChip} /> ))} </Box> </Box> </Col> */} <Col> <Box mt={'20px'}> <Col className={classes.title}> <label className="form-label">Severity filter:</label> <Box sx={{ display: 'inline-block', marginLeft: '15px' }}> {Object.entries(severities).map(([key, value], i) => ( <FormControlLabel label={key} control={ <Checkbox checked={value} name={key} onChange={(e) => handleChangeEventFilter(e, 'severity')} sx={{ "&.Mui-checked": { color: severityColor[key] } }} /> } /> ))} <FormControlLabel label={'cancelled'} control={ <Checkbox checked={hasCancelledStatus} name={'cancelled'} onChange={(e) => handleChangeEventFilter(e, 'status')} sx={{ "&.Mui-checked": { color: 'grey' } }} /> } /> </Box> </Col> </Box> </Col> <Col> <Box mt={'20px'}> <Col className={classes.title}> <label className="form-label">Type filter:</label> <Box sx={{ display: 'inline-block', marginLeft: '15px' }}> {Object.entries(types).map(([key, value], i) => ( <FormControlLabel label={key} control={ <> <Checkbox sx={{ ml: '5px' }} checked={value} name={key} onChange={(e) => handleChangeEventFilter(e, 'type')} color='secondary' /> <Box sx={{ mr: '2px' }}>{iconType[key]}</Box> </> } /> ))} </Box> </Col> </Box> </Col> <div className={classes.fullCalendar}> <FullCalendar plugins={[ BootstrapTheme, dayGridPlugin, timeGridPlugin, ]} ref={calendarRef} // slotDuration={"00:15:00"} handleWindowResize={true} initialView={'dayGridMonth'} height={700} datesSet={event => { // As the calendar starts from prev month and end in next month I take the day between the rang let currentMonth = new Date(calendarRef?.current?.calendar?.currentData?.currentDate).getMonth(); setCurrentMonth(currentMonth); }} headerToolbar={{ start: "", center: "prev title next", end: "today dayGridMonth,timeGridWeek,timeGridDay", }} eventDisplay={'block'} themeSystem={'bootstrap'} slotEventOverlap={false} eventRender={info => { info.el.style.marginLeft = '30px' info.el.style.borderRadius = '10px' }} events={getHighlatedDays()} eventClick={handleEventClick} eventContent={eventContent} customButtons={{ 'custom-header': { text: 'Custom Header', click: () => { // Handle the click event if needed }, }, }} // headerToolbar={headerToolbarOptions} // dayCellContent={renderDayCellContent} // onReady={({ calendar }) => { // setCalendarApi(calendar); // }} /> {/* {showMonthDropdown && ( <select className="month-dropdown" onChange={handleMonthSelect}> {calendarApi && calendarApi.getDate().toLocaleString('default', { month: 'long' })} {Array.from({ length: 12 }, (_, i) => { const month = new Date(0, i); return ( <option key={i} value={month} > {month.toLocaleString('default', { month: 'long' })} </option> ); })} </select> )} */} </div> <Modal isOpen={modal} centered toggle={() => setModal(false)} > <ModalHeader toggle={toggle} tag="h5" className="py-3 px-4 border-bottom-0"> </ModalHeader> <ModalBody className="p-4"> <Form> <Row> <Col className="col-6"> <div className="mb-3"> <Label className={classes.formLabelMain}>Event Name</Label> <Input name="title" type="text" disabled={true} value={event ? event?.title : ""} /> </div> </Col> <Col className="col-12"> <div className="mb-3"> <Label className={classes.formLabelMain}>Start date</Label> <Input name="startTime" type="text" disabled={true} value={event ? event?.startDate : ""} /> </div> </Col> <Col className="col-12"> <div className="mb-3"> <Label className={classes.formLabelMain}>End date</Label> <Input name="endTime" type="text" disabled={true} value={event ? event?.endDate : ""} /> </div> </Col> <Col className="col-12"> <div className="mb-3"> <Label className={classes.formLabelMain}>Start hours</Label> <Input name="startTime" type="text" disabled={true} value={event ? event?.startHours : ""} /> </div> </Col> <Col className="col-12"> <div className="mb-3"> <Label className={classes.formLabelMain}>End hours</Label> <Input name="endTime" type="text" disabled={true} value={event ? event?.endHours : ""} /> </div> </Col> <Col className="col-12"> <div className="mb-3"> <Label className={classes.formLabelMain}>Severity</Label> <Input name="status" type="text" disabled={true} value={event ? event?.severity : ""} /> </div> </Col> <Col className="col-12"> <div className="mb-3"> <Label className={classes.formLabelMain}>Status</Label> <Input name="status" type="text" disabled={true} value={event ? event?.status : ""} /> </div> </Col> {eventSubjects?.length && <Col className="col-12"> <div className="mb-3"> <Label className={classes.formLabelMain}>Event subjects</Label> { eventSubjects?.length > 0 && eventSubjects?.map((subject) => { return <div className="mb-4"> <Label className="form-label">Subject name</Label> <Input name="status" type="text" disabled={true} value={subject ? subject?.name : ""} /> { subject.deploymentType && <> <Label className="form-label">Deployment type</Label> <Input name="status" type="text" disabled={true} value={subject.deploymentType} /> </> } </div> }) } </div> </Col> } <Col className="col-12"> <div className="mb-3"> <Label className={classes.formLabelMain}>Description</Label> <TextareaAutosize name="description" className='form-control' disabled={true} value={event ? event?.description : ""} /> </div> </Col> </Row> <Row className="mt-2"> <Col className="col-12 text-center"> <button type="button" className="btn btn-light me-2" onClick={toggle} > Close </button> </Col> </Row> </Form> </ModalBody> </Modal> </Card> </div> </div > </LocalizationProvider > </> ) } export default Events;