Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

issue/264 - Support drag and drop of calendar events closes #264 #270

Merged
merged 6 commits into from
Apr 22, 2020
Merged

issue/264 - Support drag and drop of calendar events closes #264 #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6f2623c
Update dependency dev-express react scheduler to latest
Minusome Apr 20, 2020
247bade
Implemented task dnd using DragDropProvider
Minusome Apr 20, 2020
4760aa3
Update task on backend
Minusome Apr 20, 2020
6cc92aa
Offset the reminder date if start date is modified
Minusome Apr 21, 2020
edcbd74
Update frontend snapshot
Minusome Apr 21, 2020
4c4cc8d
Bug fix: inconsistent task data
Minusome Apr 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions doto-frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
"private": true,
"dependencies": {
"@date-io/date-fns": "^1.3.11",
"@devexpress/dx-react-core": "^2.5.1",
"@devexpress/dx-react-scheduler": "^2.5.1",
"@devexpress/dx-react-scheduler-material-ui": "^2.5.1",
"@devexpress/dx-react-core": "^2.6.2",
"@devexpress/dx-react-scheduler": "^2.6.2",
"@devexpress/dx-react-scheduler-material-ui": "^2.6.2",
"@material-ui/core": "^4.9.5",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4",
Expand Down
26 changes: 26 additions & 0 deletions doto-frontend/src/components/pages/Calendar/Calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ const Calendar = () => {
const addNewTask = (newTask, currentDate) => {
const { newTaskOrder, updatedTask } = addTaskToSchedule(newTask, tasks, currentDate);
newTask.taskId = uuidv4();
newTask.id = newTask.taskId;
setTasks(newTaskOrder);
handleClose();

Expand All @@ -93,6 +94,30 @@ const Calendar = () => {
setTasks(newTasks);
};

const onCommitChanges = ({ added, changed, deleted }) => {
// Currently adding and deleting are both no-ops
// TODO - consider refactoring adding and deleting to use built-in components and pass logic through here
if (changed) {
const updatedTasks = tasks.map(task => {
if (changed[task.id]) {
const { startDate: newStartDate } = changed[task.id];
const { reminderDate, startDate: oldStartDate } = task;
if (newStartDate && reminderDate) {
// Offset the reminder date by the difference of the start dates
task.reminderDate = new Date(reminderDate.getTime() + (newStartDate - oldStartDate));
}
const updatedTask = { ...task, ...changed[task.id] };
updatedTask.duration = Math.ceil((updatedTask.endDate - updatedTask.startDate) / 60000);
DotoService.updateTask(updatedTask);
return updatedTask;
}
return task;
});
updatedTasks.sort((a, b) => a.startDate - b.startDate);
setTasks(updatedTasks);
}
};

return (
<div className="page-layout">
<div
Expand Down Expand Up @@ -127,6 +152,7 @@ const Calendar = () => {
tasks={tasks}
onTaskDeleted={deleteTask}
onTaskStatusUpdated={handleTaskStatusUpdated}
onCommitChanges={onCommitChanges}
/>
</div>
{listView && <CalendarListView tasks={tasks} onTaskStatusUpdated={handleTaskStatusUpdated} />}
Expand Down
58 changes: 33 additions & 25 deletions doto-frontend/src/components/pages/Calendar/CalendarComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from "react";
import "./Calendar.css";
import { ViewState } from "@devexpress/dx-react-scheduler";
import { ViewState, EditingState, IntegratedEditing } from "@devexpress/dx-react-scheduler";
import PropTypes from "prop-types";
import {
Scheduler,
Expand All @@ -13,17 +13,18 @@ import {
TodayButton,
Appointments,
AppointmentTooltip,
DragDropProvider,
} from "@devexpress/dx-react-scheduler-material-ui";
import { Checkbox, Grid } from "@material-ui/core";
import DoneIcon from "@material-ui/icons/Done";
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogTitle from '@material-ui/core/DialogTitle';
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogTitle from "@material-ui/core/DialogTitle";

const CalendarComponent = ({ tasks, onTaskStatusUpdated, onTaskDeleted }) => {
const CalendarComponent = ({ tasks, onTaskStatusUpdated, onTaskDeleted, onCommitChanges }) => {
return (
<Scheduler data={tasks} currentView={MonthView} editable={true}>
<ViewState />
Expand All @@ -35,14 +36,19 @@ const CalendarComponent = ({ tasks, onTaskStatusUpdated, onTaskDeleted }) => {
<DateNavigator />
<TodayButton />
<Appointments appointmentComponent={Appointment} />
<EditingState onCommitChanges={onCommitChanges} />
<IntegratedEditing />
<DragDropProvider />
<AppointmentTooltip
contentComponent={props => <Content {...props} onTaskStatusUpdated={onTaskStatusUpdated} onTaskDeleted={onTaskDeleted} />}
contentComponent={props => (
<Content {...props} onTaskStatusUpdated={onTaskStatusUpdated} onTaskDeleted={onTaskDeleted} />
)}
/>
</Scheduler>
);
};

export function Content ({ children, appointmentData, style, onTaskStatusUpdated, onTaskDeleted, ...restProps }) {
export function Content({ children, appointmentData, style, onTaskStatusUpdated, onTaskDeleted, ...restProps }) {
const [open, setOpen] = useState(false);
const handleClickOpen = () => {
setOpen(true);
Expand All @@ -52,21 +58,20 @@ export function Content ({ children, appointmentData, style, onTaskStatusUpdated
setOpen(false);
};

const deleteTask = (taskId) => {
const deleteTask = taskId => {
onTaskDeleted(taskId);
document.getElementById("grid").click();
};

return (
<AppointmentTooltip.Content {...restProps} appointmentData={appointmentData}>
<Grid container alignItems="center">

<div className="footer-container">
<div>
<Checkbox
checked={appointmentData.isComplete}
color="primary"
onClick={() => onTaskStatusUpdated(appointmentData.taskId)}
<Checkbox
checked={appointmentData.isComplete}
color="primary"
onClick={() => onTaskStatusUpdated(appointmentData.taskId)}
/>
<span>{appointmentData.isComplete ? "Task complete" : "Task incomplete"}</span>
</div>
Expand All @@ -77,22 +82,25 @@ export function Content ({ children, appointmentData, style, onTaskStatusUpdated
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description">
<DialogTitle id="alert-dialog-title">{"Are you sure you want to delete this task?"}</DialogTitle>
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Are you sure you want to delete this task?"}
</DialogTitle>
<DialogActions>
<Button onClick={() => deleteTask(appointmentData.taskId)} color="primary" autoFocus>
Yes
</Button>
<Button onClick={handleClose} color="primary">
No
</Button>
<Button onClick={() => deleteTask(appointmentData.taskId)} color="primary" autoFocus>
Yes
</Button>
<Button onClick={handleClose} color="primary">
No
</Button>
</DialogActions>
</Dialog>
</div>
</Grid>
</AppointmentTooltip.Content>
);
};
}

const Appointment = ({ children, style, ...restProps }) => (
<Appointments.Appointment
Expand Down
11 changes: 2 additions & 9 deletions doto-frontend/src/components/pages/Settings/__snapshots__/SettingsPage.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ exports[`<SettingsPage /> component being rendered Make sure render matches snap
aria-hidden="true"
className="MuiSvgIcon-root IconLarge"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
Expand Down Expand Up @@ -66,7 +65,6 @@ exports[`<SettingsPage /> component being rendered Make sure render matches snap
aria-hidden="true"
className="MuiSvgIcon-root IconLarge"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
Expand Down Expand Up @@ -96,7 +94,6 @@ exports[`<SettingsPage /> component being rendered Make sure render matches snap
aria-hidden="true"
className="MuiSvgIcon-root IconLarge"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
Expand Down Expand Up @@ -133,7 +130,6 @@ exports[`<SettingsPage /> component being rendered Make sure render matches snap
aria-hidden="true"
className="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
Expand Down Expand Up @@ -169,7 +165,6 @@ exports[`<SettingsPage /> component being rendered Make sure render matches snap
aria-hidden="true"
className="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
Expand Down Expand Up @@ -312,7 +307,7 @@ exports[`<SettingsPage /> component being rendered Make sure render matches snap
onFocus={[Function]}
required={false}
type="text"
value="09:47 PM"
value="02:40 PM"
/>
<div
className="MuiInputAdornment-root MuiInputAdornment-positionEnd"
Expand Down Expand Up @@ -343,7 +338,6 @@ exports[`<SettingsPage /> component being rendered Make sure render matches snap
aria-hidden="true"
className="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
Expand Down Expand Up @@ -406,7 +400,7 @@ exports[`<SettingsPage /> component being rendered Make sure render matches snap
onFocus={[Function]}
required={false}
type="text"
value="09:47 PM"
value="02:40 PM"
/>
<div
className="MuiInputAdornment-root MuiInputAdornment-positionEnd"
Expand Down Expand Up @@ -437,7 +431,6 @@ exports[`<SettingsPage /> component being rendered Make sure render matches snap
aria-hidden="true"
className="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
Expand Down
6 changes: 5 additions & 1 deletion doto-frontend/src/helpers/DotoService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ const baseUrl =
const taskMapper = data => {
return {
taskId: data.taskId,
id: data.taskId,
title: data.title,
startDate: new Date(data.startDate),
endDate: new Date(data.endDate),
duration: data.duration,
...(data.description && { description: data.description }),
...(data.priority && { priority: data.priority }),
...(data.location && { location: data.location }),
Expand All @@ -35,9 +37,11 @@ const DotoService = {
}
},
updateTask: async task => {
// Strip the 'id' property because its only needed by dev-express scheduler
const { id, ...mongoTask } = task;
const updatedTask = {
user: CookieManager.get("email"),
...task,
...mongoTask,
};
axios({
method: "put",
Expand Down
Loading