feat(react-scheduler): add horizontal grouping by resources

packages/dx-react-grid/docs/guides/fixed-columns.md

@@ -9,10 +9,7 @@ The Grid allows you to fix one or more first and last columns. Fixed columns rem
   - WebView for Android before 5.0
   - Internet Explorer
 
-- Currently, there are issues with fixed columns support in Microsoft Edge:
-  - [sticky elements flicker on scroll](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18769340/)
-  - [nested sticky positioning element will not stick](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18940617/)
-  - [sticky causes border to dissapear on table elements](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16792336/)
+Scrolling issues have also been noticed in Microsoft Edge. They are caused by the browser's implementation of sticky positioning.
 
 ## Related Plugins
 

packages/dx-react-scheduler-demos/src/demo-data/grouping.js

@@ -0,0 +1,181 @@
+export const data = [
+  {
+    title: 'Website Re-Design Plan',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 21, 9, 30),
+    endDate: new Date(2018, 4, 21, 11, 30),
+    id: 0,
+  }, {
+    title: 'Book Flights to San Fran for Sales Trip',
+    priorityId: 1,
+    startDate: new Date(2018, 4, 24, 10, 0),
+    endDate: new Date(2018, 4, 24, 12, 0),
+    id: 1,
+  }, {
+    title: 'Install New Router in Dev Room',
+    priorityId: 1,
+    startDate: new Date(2018, 4, 21, 13),
+    endDate: new Date(2018, 4, 21, 15, 30),
+    id: 2,
+  }, {
+    title: 'Approve Personal Computer Upgrade Plan',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 22, 10, 0),
+    endDate: new Date(2018, 4, 22, 11, 0),
+    id: 3,
+  }, {
+    title: 'Final Budget Review',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 22, 12, 0),
+    endDate: new Date(2018, 4, 22, 13, 35),
+    id: 4,
+  }, {
+    title: 'New Brochures',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 21, 13, 0),
+    endDate: new Date(2018, 4, 21, 15, 15),
+    id: 5,
+  }, {
+    title: 'Install New Database',
+    priorityId: 1,
+    startDate: new Date(2018, 4, 22, 9),
+    endDate: new Date(2018, 4, 22, 12, 15),
+    id: 6,
+  }, {
+    title: 'Approve New Online Marketing Strategy',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 23, 12, 0),
+    endDate: new Date(2018, 4, 23, 14, 0),
+    id: 7,
+  }, {
+    title: 'Upgrade Personal Computers',
+    priorityId: 1,
+    startDate: new Date(2018, 4, 21, 9),
+    endDate: new Date(2018, 4, 21, 11, 30),
+    id: 8,
+  }, {
+    title: 'Prepare 2018 Marketing Plan',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 24, 11, 0),
+    endDate: new Date(2018, 4, 24, 13, 30),
+    id: 9,
+  }, {
+    title: 'Brochure Design Review',
+    priorityId: 1,
+    startDate: new Date(2018, 4, 23, 11, 0),
+    endDate: new Date(2018, 4, 23, 13, 30),
+    id: 10,
+  }, {
+    title: 'Create Icons for Website',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 25, 10, 0),
+    endDate: new Date(2018, 4, 25, 11, 30),
+    id: 0,
+  }, {
+    title: 'Upgrade Server Hardware',
+    priorityId: 1,
+    startDate: new Date(2018, 4, 25, 9, 0),
+    endDate: new Date(2018, 4, 25, 15, 0),
+    id: 11,
+  }, {
+    title: 'Submit New Website Design',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 25, 16, 30),
+    endDate: new Date(2018, 4, 25, 18, 0),
+    id: 12,
+  }, {
+    title: 'Launch New Website',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 25, 12, 20),
+    endDate: new Date(2018, 4, 25, 14, 0),
+    id: 13,
+  }, {
+    title: 'Google AdWords Strategy',
+    priorityId: 1,
+    startDate: new Date(2018, 4, 28, 9, 0, 0),
+    endDate: new Date(2018, 4, 28, 12, 0, 0),
+    id: 14,
+  }, {
+    title: 'Rollout of New Website and Marketing Brochures',
+    priorityId: 1,
+    startDate: new Date(2018, 4, 28, 13, 0, 0),
+    endDate: new Date(2018, 4, 28, 15, 30, 0),
+    id: 15,
+  }, {
+    title: 'Non-Compete Agreements',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 29, 13, 0, 0),
+    endDate: new Date(2018, 4, 29, 15, 45, 0),
+    id: 16,
+  }, {
+    title: 'Approve Hiring of John Jeffers',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 29, 9, 0, 0),
+    endDate: new Date(2018, 4, 29, 12, 0, 0),
+    id: 17,
+  }, {
+    title: 'Update NDA Agreement',
+    priorityId: 1,
+    startDate: new Date(2018, 4, 29, 11, 0, 0),
+    endDate: new Date(2018, 4, 29, 14, 15, 0),
+    id: 18,
+  }, {
+    title: 'Update Employee Files with New NDA',
+    priorityId: 1,
+    startDate: new Date(2018, 5, 1, 9, 0, 0),
+    endDate: new Date(2018, 5, 1, 11, 45, 0),
+    id: 19,
+  }, {
+    title: 'Submit Questions Regarding New NDA',
+    priorityId: 1,
+    startDate: new Date(2018, 4, 30, 10, 0, 0),
+    endDate: new Date(2018, 4, 30, 11, 30, 0),
+    id: 20,
+  }, {
+    title: 'Submit Signed NDA',
+    priorityId: 1,
+    startDate: new Date(2018, 4, 30, 13, 0, 0),
+    endDate: new Date(2018, 4, 30, 15, 0, 0),
+    id: 21,
+  }, {
+    title: 'Review Revenue Projections',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 30, 11, 0, 0),
+    endDate: new Date(2018, 4, 30, 14, 0, 0),
+    id: 22,
+  }, {
+    title: 'Comment on Revenue Projections',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 28, 10, 0, 0),
+    endDate: new Date(2018, 4, 28, 13, 0, 0),
+    id: 23,
+  }, {
+    title: 'Provide New Health Insurance Docs',
+    priorityId: 2,
+    startDate: new Date(2018, 5, 1, 12, 0, 0),
+    endDate: new Date(2018, 5, 1, 15, 0, 0),
+    id: 24,
+  }, {
+    title: 'Review Changes to Health Insurance Coverage',
+    priorityId: 2,
+    startDate: new Date(2018, 4, 31, 9, 0, 0),
+    endDate: new Date(2018, 4, 31, 13, 0, 0),
+    id: 25,
+  }, {
+    title: 'Review Training Course for any Ommissions',
+    priorityId: 1,
+    startDate: new Date(2018, 4, 31, 11, 0, 0),
+    endDate: new Date(2018, 4, 31, 14, 0, 0),
+    id: 26,
+  },
+];
+
+export const priorityData = [
+  {
+    text: 'Low Priority',
+    id: 1,
+  }, {
+    text: 'High Priority',
+    id: 2,
+  },
+];

packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/basic.jsx

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import Paper from '@material-ui/core/Paper';
+import {
+  ViewState, GroupingState, IntegratedGrouping, IntegratedEditing, EditingState,
+} from '@devexpress/dx-react-scheduler';
+import {
+  Scheduler,
+  Resources,
+  Appointments,
+  AppointmentTooltip,
+  GroupingPanel,
+  DayView,
+  DragDropProvider,
+  AppointmentForm,
+} from '@devexpress/dx-react-scheduler-material-ui';
+import {
+  teal, indigo,
+} from '@material-ui/core/colors';
+
+const appointments = [{
+  id: 0,
+  title: 'Watercolor Landscape',
+  members: [1, 2],
+  roomId: 1,
+  startDate: new Date(2017, 4, 28, 9, 30),
+  endDate: new Date(2017, 4, 28, 12, 0),
+}, {
+  id: 1,
+  title: 'Oil Painting for Beginners',
+  members: [1],
+  roomId: 2,
+  startDate: new Date(2017, 4, 28, 12, 30),
+  endDate: new Date(2017, 4, 28, 14, 30),
+}, {
+  id: 2,
+  title: 'Testing',
+  members: [1, 2],
+  roomId: 1,
+  startDate: new Date(2017, 4, 29, 12, 30),
+  endDate: new Date(2017, 4, 29, 14, 30),
+}, {
+  id: 3,
+  title: 'Final exams',
+  members: [1, 2],
+  roomId: 2,
+  startDate: new Date(2017, 4, 29, 9, 30),
+  endDate: new Date(2017, 4, 29, 12, 0),
+}];
+
+const owners = [{
+  text: 'Andrew Glover',
+  id: 1,
+  color: indigo,
+}, {
+  text: 'Arnie Schwartz',
+  id: 2,
+  color: teal,
+}];
+
+const locations = [
+  { text: 'Room 1', id: 1 },
+  { text: 'Room 2', id: 2 },
+];
+
+export default class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: appointments,
+      resources: [{
+        fieldName: 'members',
+        title: 'Members',
+        instances: owners,
+        allowMultiple: true,
+      }, {
+        fieldName: 'roomId',
+        title: 'Location',
+        instances: locations,
+      }],
+      grouping: [{
+        resourceName: 'roomId',
+      }, {
+        resourceName: 'members',
+      }],
+    };
+
+    this.commitChanges = this.commitChanges.bind(this);
+  }
+
+  commitChanges({ added, changed, deleted }) {
+    this.setState((state) => {
+      let { data } = state;
+      if (added) {
+        const startingAddedId = data.length > 0 ? data[data.length - 1].id + 1 : 0;
+        data = [...data, { id: startingAddedId, ...added }];
+      }
+      if (changed) {
+        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 { data, resources, grouping } = this.state;
+
+    return (
+      <Paper>
+        <Scheduler
+          data={data}
+        >
+          <ViewState
+            defaultCurrentDate="2017-05-28"
+          />
+          <EditingState
+            onCommitChanges={this.commitChanges}
+          />
+          <GroupingState
+            grouping={grouping}
+          />
+
+          <DayView
+            startDayHour={9}
+            endDayHour={15}
+            intervalCount={2}
+          />
+          <Appointments />
+          <Resources
+            data={resources}
+            mainResourceName="members"
+          />
+
+          <IntegratedGrouping />
+          <IntegratedEditing />
+
+          <AppointmentTooltip showOpenButton />
+          <AppointmentForm />
+          <GroupingPanel />
+          <DragDropProvider />
+        </Scheduler>
+      </Paper>
+    );
+  }
+}