Scheduler errors when applying grouping
moaazelsayed opened this issue · comments
Scheduler errors when applying grouping with 1 resource.
No error occurs before integrating grouping.
The end goal is replicating 'housekeeping schedule' in the overview video: https://devexpress.github.io/devextreme-reactive/react/scheduler/docs/guides/getting-started/ that includes editing and drag/drop provider.
Error:
TypeError: Cannot read property 'name' of undefined
checkCellElementsMeta
C:/Users/Admin/Desktop/src/plugins/integrated-grouping/computeds.ts:210
207 | [CellElementsMeta, (viewName: string) => GroupOrientation, SchedulerView, boolean], boolean
208 | > = (
209 | cellElementsMeta, groupOrientation, currentView, allDayPanelExists,
> 210 | ) => groupOrientation(currentView.name) === HORIZONTAL_GROUP_ORIENTATION
211 | || !allDayPanelExists || !cellElementsMeta.getCellRects;
212 |
213 | const initializeCellElementsData: PureComputed<
Code:
/* eslint-disable react/no-unused-state */
import * as React from 'react';
import Paper from '@material-ui/core/Paper';
import {
EditingState,
GroupingState,
IntegratedEditing,
IntegratedGrouping,
ViewState
} from '@devexpress/dx-react-scheduler';
import {
AllDayPanel,
Appointments,
AppointmentForm,
AppointmentTooltip,
ConfirmationDialog,
DateNavigator,
DayView,
DragDropProvider,
EditRecurrenceMenu,
GroupingPanel,
MonthView,
Resources,
Scheduler,
TodayButton,
Toolbar,
ViewSwitcher,
WeekView,
} from '@devexpress/dx-react-scheduler-material-ui';
import { appointments } from './demo-data/appointments';
import {
teal, indigo,
} from '@material-ui/core/colors';
const SHIFT_KEY = 16;
const members = [{
text: 'Bobby Fish',
id: 1,
color: indigo,
}, {
text: 'Mikasa Ackerman',
id: 2,
color: teal,
},{
text: 'Allice Walker',
id: 3,
color: indigo,
},{
text: 'Armine Walters',
id: 4,
color: teal,
},{
text: 'Erene Yager',
id: 5,
color: indigo,
},{
text: 'Justiene Alberts',
id: 6,
color: teal,
}];
export default class Demo extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
data: appointments,
currentDate: '2018-06-27',
isShiftPressed: false,
addedAppointment: {},
appointmentChanges: {},
editingAppointment: undefined,
grouping: [{
resourceName: 'members',
}],
resources: [{
fieldName: 'members',
title: 'Members',
instances: members,
allowMultiple: true,
}],
};
this.commitChanges = this.commitChanges.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.onKeyUp = this.onKeyUp.bind(this);
this.changeAddedAppointment = this.changeAddedAppointment.bind(this);
this.changeAppointmentChanges = this.changeAppointmentChanges.bind(this);
this.changeEditingAppointment = this.changeEditingAppointment.bind(this);
}
componentDidMount() {
window.addEventListener('keydown', this.onKeyDown);
window.addEventListener('keyup', this.onKeyUp);
}
componentWillUnmount() {
window.removeEventListener('keydown');
window.removeEventListener('keyup');
}
onKeyDown(event) {
if (event.keyCode === SHIFT_KEY) {
this.setState({ isShiftPressed: true });
}
}
onKeyUp(event) {
if (event.keyCode === SHIFT_KEY) {
this.setState({ isShiftPressed: false });
}
}
changeAddedAppointment(addedAppointment) {
this.setState({ addedAppointment });
}
changeAppointmentChanges(appointmentChanges) {
this.setState({ appointmentChanges });
}
changeEditingAppointment(editingAppointment) {
this.setState({ editingAppointment });
}
commitChanges({ added, changed, deleted }) {
this.setState((state) => {
let { data } = state;
const { isShiftPressed } = this.state;
if (added) {
const startingAddedId = data.length > 0 ? data[data.length - 1].id + 1 : 0;
data = [...data, { id: startingAddedId, ...added }];
}
if (changed) {
if (isShiftPressed) {
const changedAppointment = data.find(appointment => changed[appointment.id]);
const startingAddedId = data.length > 0 ? data[data.length - 1].id + 1 : 0;
data = [
...data,
{ ...changedAppointment, id: startingAddedId, ...changed[changedAppointment.id] },
];
} else {
data = data.map(appointment => (
changed[appointment.id]
? { ...appointment, ...changed[appointment.id] }
: appointment));
}
}
if (deleted !== undefined) {
data = data.filter(appointment => appointment.id !== deleted);
}
return { data };
});
}
render() {
const {
addedAppointment,
appointmentChanges,
currentDate,
data,
editingAppointment,
grouping,
resources
} = this.state;
return (
<Paper>
<Scheduler
data={data}
height={660}
>
<ViewState
currentDate={currentDate}
/>
<EditingState
onCommitChanges={this.commitChanges}
addedAppointment={addedAppointment}
onAddedAppointmentChange={this.changeAddedAppointment}
appointmentChanges={appointmentChanges}
onAppointmentChangesChange={this.changeAppointmentChanges}
editingAppointment={editingAppointment}
onEditingAppointmentChange={this.changeEditingAppointment}
/>
<GroupingState
grouping={grouping}
/>
<IntegratedGrouping />
<IntegratedEditing />
<DayView
startDayHour={8}
endDayHour={20}
/>
<WeekView
startDayHour={8}
endDayHour={20}
/>
<MonthView />
<Appointments />
<AllDayPanel />
<Resources
data={resources}
mainResourceName="members"
/>
<EditRecurrenceMenu />
<ConfirmationDialog />
<Toolbar />
<ViewSwitcher />
<DateNavigator />
<TodayButton />
<AppointmentTooltip
showOpenButton
showDeleteButton
/>
<AppointmentForm />
<GroupingPanel />
<DragDropProvider />
</Scheduler>
</Paper>
);
}
}
Hi,
Please share a runnable sample to demonstrate the issue. We'll research it and do our best to find a solution.
in src/demo.js
This is taken straight from the scheduler demo files for React on your site with some things switched around and combined:
https://devexpress.github.io/devextreme-reactive/react/scheduler/docs/guides/editing
https://devexpress.github.io/devextreme-reactive/react/scheduler/docs/guides/grouping
https://devexpress.github.io/devextreme-reactive/react/scheduler/docs/guides/view-switching
const Caregiver = {
id: '',
CompatibilityScores:[{
}],
WeeklySchedule:[{
date: '',
startTime: '',
endTime:''
}],
weeklyHoursNeeded:'num',
weeklyHoursConsumed: 'num'
}
const Client = {
id:'',
CompatibilityScores:[{
careGiverID: '',
score: ''
},{
careGiverID: '',
score: ''
}],
AppointmentNeeded: [{
date: '',
startTime: '',
endTime: ''
},{
date: '',
startTime: '',
endTime: ''
}]
}
const checkSchedule = (clientSchedule, caregiverSchedule) => {
const allMatchedSlots = [];
clientSchedule.forEach((apt) => {
caregiverSchedule.forEach((avail)=>{
if (apt.date === avail.date && apt.startTime >= avail.startTime && apt.endTime <= avail.endTime){
allMatchedSlots.push(apt);
}
});
});
return allMatchedSlots;
}
and for the dataset of appointments in src/demo-data/appointments.js:
export const appointments = [
{
title: 'Website Re-Design Plan',
startDate: new Date(2018, 5, 25, 9, 35),
endDate: new Date(2018, 5, 25, 11, 30),
id: 0,
location: 'Room 1',
members:[ 1 ],
}, {
title: 'Book Flights to San Fran for Sales Trip',
startDate: new Date(2018, 5, 25, 12, 11),
endDate: new Date(2018, 5, 25, 13, 0),
id: 1,
location: 'Room 1',
members:[ 3 ],
}, {
title: 'Install New Router in Dev Room',
startDate: new Date(2018, 5, 25, 14, 30),
endDate: new Date(2018, 5, 25, 15, 35),
id: 2,
location: 'Room 2',
members:[ 4 ],
}, {
title: 'Approve Personal Computer Upgrade Plan',
startDate: new Date(2018, 5, 26, 10, 0),
endDate: new Date(2018, 5, 26, 11, 0),
id: 3,
location: 'Room 2',
members:[ 5, ],
}, {
title: 'Final Budget Review',
startDate: new Date(2018, 5, 26, 12, 0),
endDate: new Date(2018, 5, 26, 13, 35),
id: 4,
location: 'Room 2',
members:[ 6 ],
}, {
title: 'New Brochures',
startDate: new Date(2018, 5, 26, 14, 30),
endDate: new Date(2018, 5, 26, 15, 45),
id: 5,
location: 'Room 2',
members:[ 2 ],
}, {
title: 'Install New Database',
startDate: new Date(2018, 5, 27, 9, 45),
endDate: new Date(2018, 5, 27, 11, 15),
id: 6,
location: 'Room 1',
members:[ 2 ],
}, {
title: 'Approve New Online Marketing Strategy',
startDate: new Date(2018, 5, 27, 12, 0),
endDate: new Date(2018, 5, 27, 14, 0),
id: 7,
location: 'Room 3',
members:[ 1 ],
}, {
title: 'Upgrade Personal Computers',
startDate: new Date(2018, 5, 27, 15, 15),
endDate: new Date(2018, 5, 27, 16, 30),
id: 8,
location: 'Room 3',
members:[ 2 ],
}, {
title: 'Customer Workshop',
startDate: new Date(2018, 5, 28, 11, 0),
endDate: new Date(2018, 5, 28, 12, 0),
id: 9,
location: 'Room 3',
members:[ 6 ],
}, {
title: 'Prepare 2015 Marketing Plan',
startDate: new Date(2018, 5, 28, 11, 0),
endDate: new Date(2018, 5, 28, 13, 30),
id: 10,
location: 'Room 1',
members:[ 5 ],
}, {
title: 'Brochure Design Review',
startDate: new Date(2018, 5, 28, 14, 0),
endDate: new Date(2018, 5, 28, 15, 30),
id: 11,
location: 'Room 2',
members:[ 2 ],
}, {
title: 'Create Icons for Website',
startDate: new Date(2018, 5, 29, 10, 0),
endDate: new Date(2018, 5, 29, 11, 30),
id: 12,
location: 'Room 2',
members:[ 1 ],
}, {
title: 'Upgrade Server Hardware',
startDate: new Date(2018, 5, 29, 14, 30),
endDate: new Date(2018, 5, 29, 16, 0),
id: 13,
location: 'Room 3',
members:[ 4 ],
}, {
title: 'Submit New Website Design',
startDate: new Date(2018, 5, 29, 16, 30),
endDate: new Date(2018, 5, 29, 18, 0),
id: 14,
location: 'Room 3',
members:[ 5 ],
}, {
title: 'Launch New Website',
startDate: new Date(2018, 5, 29, 12, 20),
endDate: new Date(2018, 5, 29, 14, 0),
id: 15,
location: 'Room 2',
members:[ 6 ],
}, {
title: 'Website Re-Design Plan',
startDate: new Date(2018, 6, 2, 9, 30),
endDate: new Date(2018, 6, 2, 15, 30),
id: 16,
location: 'Room 1',
members:[ 2 ],
}, {
title: 'Book Flights to San Fran for Sales Trip',
startDate: new Date(2018, 6, 2, 12, 0),
endDate: new Date(2018, 6, 2, 13, 0),
id: 17,
location: 'Room 3',
members:[ 2 ],
}, {
title: 'Install New Router in Dev Room',
startDate: new Date(2018, 6, 2, 14, 30),
endDate: new Date(2018, 6, 2, 17, 30),
id: 18,
location: 'Room 2',
members:[ 4 ],
}, {
title: 'Approve Personal Computer Upgrade Plan',
startDate: new Date(2018, 6, 2, 16, 0),
endDate: new Date(2018, 6, 3, 9, 0),
id: 19,
location: 'Room 2',
members:[ 1 ],
}, {
title: 'Final Budget Review',
startDate: new Date(2018, 6, 3, 10, 15),
endDate: new Date(2018, 6, 3, 13, 35),
id: 20,
location: 'Room 1',
members:[ 3 ],
}, {
title: 'New Brochures',
startDate: new Date(2018, 6, 3, 14, 30),
endDate: new Date(2018, 6, 3, 15, 45),
id: 21,
location: 'Room 3',
members:[ 5 ],
}, {
title: 'Install New Database',
startDate: new Date(2018, 6, 3, 15, 45),
endDate: new Date(2018, 6, 4, 12, 15),
id: 22,
location: 'Room 3',
members:[ 3 ],
}, {
title: 'Approve New Online Marketing Strategy',
startDate: new Date(2018, 6, 4, 12, 35),
endDate: new Date(2018, 6, 4, 14, 15),
id: 23,
location: 'Room 3',
members:[ 6 ],
}, {
title: 'Upgrade Personal Computers',
startDate: new Date(2018, 6, 4, 15, 15),
endDate: new Date(2018, 6, 4, 20, 30),
id: 24,
location: 'Room 2',
members:[ 2 ],
}, {
title: 'Customer Workshop',
startDate: new Date(2018, 6, 5, 6, 0),
endDate: new Date(2018, 6, 5, 14, 20),
id: 25,
location: 'Room 1',
members:[ 1 ],
}, {
title: 'Customer Workshop',
startDate: new Date(2018, 6, 5, 14, 35),
endDate: new Date(2018, 6, 5, 16, 20),
id: 26,
location: 'Room 1',
members:[ 5 ],
}, {
title: 'Customer Workshop 2',
startDate: new Date(2018, 6, 5, 10, 0),
endDate: new Date(2018, 6, 5, 11, 20),
id: 27,
location: 'Room 2',
members:[ 6 ],
}, {
title: 'Prepare 2015 Marketing Plan',
startDate: new Date(2018, 6, 5, 20, 0),
endDate: new Date(2018, 6, 6, 13, 30),
id: 28,
location: 'Room 3',
members:[ 4 ],
}, {
title: 'Brochure Design Review',
startDate: new Date(2018, 6, 6, 14, 10),
endDate: new Date(2018, 6, 6, 15, 30),
id: 29,
location: 'Room 3',
members:[ 2 ],
}, {
title: 'Create Icons for Website',
startDate: new Date(2018, 6, 6, 10, 0),
endDate: new Date(2018, 6, 7, 14, 30),
id: 30,
location: 'Room 1',
members:[ 2 ],
}, {
title: 'Upgrade Server Hardware',
startDate: new Date(2018, 6, 3, 9, 30),
endDate: new Date(2018, 6, 3, 12, 25),
id: 31,
location: 'Room 2',
members:[ 2 ],
}, {
title: 'Submit New Website Design',
startDate: new Date(2018, 6, 3, 12, 30),
endDate: new Date(2018, 6, 3, 18, 0),
id: 32,
location: 'Room 2',
members:[ 3 ],
}, {
title: 'Launch New Website',
startDate: new Date(2018, 6, 3, 12, 20),
endDate: new Date(2018, 6, 3, 14, 10),
id: 33,
location: 'Room 2',
members:[ 2 ],
}, {
title: 'Book Flights to San Fran for Sales Trip',
startDate: new Date(2018, 5, 26, 0, 0),
endDate: new Date(2018, 5, 27, 0, 0),
id: 34,
location: 'Room 1',
members:[ 6 ],
}, {
title: 'Customer Workshop',
startDate: new Date(2018, 5, 29, 10, 0),
endDate: new Date(2018, 5, 30, 14, 30),
id: 35,
location: 'Room 1',
members:[ 2 ],
}, {
title: 'Google AdWords Strategy',
startDate: new Date(2018, 6, 3, 0, 0),
endDate: new Date(2018, 6, 4, 10, 30),
id: 36,
location: 'Room 3',
members:[ 1 ],
}, {
title: 'Rollout of New Website and Marketing Brochures',
startDate: new Date(2018, 6, 5, 10, 0),
endDate: new Date(2018, 6, 9, 14, 30),
id: 37,
location: 'Room 3',
members:[ 3 ],
}, {
title: 'Update NDA Agreement',
startDate: new Date(2018, 6, 1, 10, 0),
endDate: new Date(2018, 6, 3, 14, 30),
id: 38,
location: 'Room 2',
members:[ 4 ],
}, {
title: 'Customer Workshop',
startDate: new Date(2018, 6, 1),
endDate: new Date(2018, 6, 2),
allDay: true,
id: 39,
location: 'Room 1',
members:[ 1 ],
},
];
Thank you for using Devextreme Reactive. We use GitHub issues to track bug and feature requests. We process incoming issues as soon as possible. Issues that have been inactive for 30 days are closed. If you have an active DevExtreme license, you can contact us in our Support Center for updates. Otherwise, post your question on StackOverflow.