Untitled
unknown
plain_text
a year ago
55 kB
4
Indexable
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;