Skip to content

Commit

Permalink
Delete/edit internships from the planning page
Browse files Browse the repository at this point in the history
  • Loading branch information
BenjaVR committed Feb 26, 2019
1 parent 59020af commit a605a40
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 16 deletions.
18 changes: 13 additions & 5 deletions src/components/planning/PlanningDetailsModal.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import "../../variables.scss";

.title {
font-weight: 400;

Expand All @@ -18,14 +20,20 @@
margin: 2px !important;
}

.studentName {
font-weight: bold;
.studentCol {
@media screen and (max-width: $breakpoint_sm) {
text-align: center;
}
}

.studentDateRangeCol {
text-align: right;
.studentName {
font-weight: bold;
}

.internshipDays {
font-style: italic;
}
}

.actionButton {
margin: 0 4px;
}
46 changes: 37 additions & 9 deletions src/components/planning/PlanningDetailsModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Card, Col, Modal, Row } from "antd";
import { Button, Card, Col, Modal, Popconfirm, Row, Tooltip } from "antd";
import moment from "moment";
import React from "react";
import { studentsPlannedInDay } from "../../helpers/filters";
Expand All @@ -16,6 +16,8 @@ interface IPlanningDetailsModalProps {
selectedDate: moment.Moment | undefined;
isVisible: boolean;
onCloseRequested: () => void;
handleEditInternship: (student: Student) => void;
handleDeleteInternship: (student: Student) => void;
}

interface IPlanningDetailsModalState {
Expand Down Expand Up @@ -111,19 +113,19 @@ class PlanningDetailsModal extends React.Component<IPlanningDetailsModalProps, I

private renderStudent(student: Student): React.ReactNode {
const education = this.getEducationById(student.educationId);
const deleteFunc = () => this.props.handleDeleteInternship(student);
const editFunc = () => this.props.handleEditInternship(student);
return (
<Card key={student.id} className={styles.studentCard} bodyStyle={{ padding: 12 }}>
<Row type="flex" justify="space-between" align="middle">
<Col>
<React.Fragment>
<span className={styles.studentName}>{student.fullName}</span>
&nbsp;
<Col span={24} sm={10} className={styles.studentCol}>
<span className={styles.studentName}>{student.fullName}</span>
&nbsp;
{education !== undefined &&
<span>({education.name})</span>
}
</React.Fragment>
<span>({education.name})</span>
}
</Col>
<Col className={styles.studentDateRangeCol}>
<Col span={24} sm={10} className={styles.studentCol}>
{student.internship !== undefined &&
<React.Fragment>
<span>{student.internship.startDate.format("DD/MM/YY")} - {student.internship.endDate.format("DD/MM/YY")}</span>
Expand All @@ -132,6 +134,32 @@ class PlanningDetailsModal extends React.Component<IPlanningDetailsModalProps, I
</React.Fragment>
}
</Col>
<Col span={24} sm={4} className={styles.studentCol}>
<Tooltip title="Bewerken">
<Button
size="small"
icon="edit"
type="primary"
ghost={true}
onClick={editFunc}
className={styles.actionButton}
/>
</Tooltip>
<Tooltip title="Verwijderen">
<Popconfirm
title="Weet u zeker dat u deze stage wilt verwijderen?"
onConfirm={deleteFunc}
>
<Button
size="small"
icon="delete"
type="danger"
ghost={true}
className={styles.actionButton}
/>
</Popconfirm>
</Tooltip>
</Col>
</Row>
</Card>
);
Expand Down
11 changes: 9 additions & 2 deletions src/components/planning/PlanningsFormModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import FormItem from "antd/lib/form/FormItem";
import moment from "moment";
import React from "react";
import { isMomentDayAfterOrTheSameAsOtherDay } from "../../helpers/comparers";
import { studentsPlannedFullyInRange, studentsPlannedPartiallyInRange, studentsPlannedInDay } from "../../helpers/filters";
import { studentsPlannedFullyInRange, studentsPlannedInDay, studentsPlannedPartiallyInRange } from "../../helpers/filters";
import { nameof } from "../../helpers/nameof";
import { FormValidationTrigger } from "../../helpers/types";
import { Department } from "../../models/Department";
Expand All @@ -19,6 +19,7 @@ interface IPlanningsFormModalProps {
studentToPlan: Student | undefined;
departments: Department[];
areDepartmentsLoading: boolean;
isEdit: boolean;
onCloseRequest: () => void;
submitInternship(internship: IStudentInternship): Promise<void>;
}
Expand Down Expand Up @@ -248,7 +249,13 @@ class PlanningsFormModal extends React.Component<PlanningsFormModalProps, IPlann
StudentsRepository.getPlannedStudentsWithDepartment(department)
.then((studentsWithDepartment) => {
const students = studentsPlannedFullyInRange(studentsWithDepartment, internship.startDate, internship.endDate)
.concat(studentsPlannedPartiallyInRange(studentsWithDepartment, internship.startDate, internship.endDate));
.concat(studentsPlannedPartiallyInRange(studentsWithDepartment, internship.startDate, internship.endDate))
.filter((student) => {
if (this.props.isEdit === false || this.props.studentToPlan === undefined) {
return true;
}
return student.id !== this.props.studentToPlan.id;
});

const isCrossingTheCapacityLimits = department.totalCapacity <= department.getUsedCapacity(students);

Expand Down
64 changes: 64 additions & 0 deletions src/components/planning/PlanningsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ interface IPlanningsPageState {
showOnlyConfirmedStudents: boolean;
isCalendarLoading: boolean;
isAddInternshipModalVisible: boolean;
isEditInternshipModalVisible: boolean;
departments: Department[];
areDepartmentsLoading: boolean;
educations: Education[];
Expand Down Expand Up @@ -57,6 +58,7 @@ class PlanningsPage extends React.Component<PlanningsPageProps, IPlanningsPageSt
showOnlyConfirmedStudents: true,
isCalendarLoading: false,
isAddInternshipModalVisible: false,
isEditInternshipModalVisible: false,
departments: [],
areDepartmentsLoading: false,
educations: [],
Expand All @@ -82,8 +84,12 @@ class PlanningsPage extends React.Component<PlanningsPageProps, IPlanningsPageSt
this.handleNextMonth = this.handleNextMonth.bind(this);
this.handlePrevMonth = this.handlePrevMonth.bind(this);
this.handleToday = this.handleToday.bind(this);
this.handleEditInternship = this.handleEditInternship.bind(this);
this.handleDeleteInternship = this.handleDeleteInternship.bind(this);
this.addInternshipForStudent = this.addInternshipForStudent.bind(this);
this.editInternshipForStudent = this.editInternshipForStudent.bind(this);
this.closeAddInternshipModal = this.closeAddInternshipModal.bind(this);
this.closeEditInternshipModal = this.closeEditInternshipModal.bind(this);
}

public componentDidMount(): void {
Expand Down Expand Up @@ -154,6 +160,20 @@ class PlanningsPage extends React.Component<PlanningsPageProps, IPlanningsPageSt
studentToPlan={this.state.selectedStudentToPlan}
departments={this.state.departments}
areDepartmentsLoading={this.state.areDepartmentsLoading}
isEdit={false}
/>
<PlanningsFormModal
title={this.state.plannedStudentToEdit === undefined
? "Stage bewerken"
: `Stage bewerken voor ${this.state.plannedStudentToEdit.fullName}`}
okText="Bewerk"
isVisible={this.state.isEditInternshipModalVisible}
submitInternship={this.editInternshipForStudent}
onCloseRequest={this.closeEditInternshipModal}
studentToPlan={this.state.plannedStudentToEdit}
departments={this.state.departments}
areDepartmentsLoading={this.state.areDepartmentsLoading}
isEdit={true}
/>
<PlanningDetailsModal
departments={this.state.departments}
Expand All @@ -162,6 +182,8 @@ class PlanningsPage extends React.Component<PlanningsPageProps, IPlanningsPageSt
selectedDate={this.state.selectedDateForPlanningDetail}
isVisible={this.state.isPlanningsDetailVisible}
onCloseRequested={this.handlePlanningsDetailClose}
handleEditInternship={this.handleEditInternship}
handleDeleteInternship={this.handleDeleteInternship}
/>
</React.Fragment>
);
Expand Down Expand Up @@ -340,6 +362,23 @@ class PlanningsPage extends React.Component<PlanningsPageProps, IPlanningsPageSt
this.calendarRef.setValue(moment(), "changePanel");
}

private handleEditInternship(student: Student): void {
this.setState({
isEditInternshipModalVisible: true,
plannedStudentToEdit: student,
});
}

private handleDeleteInternship(student: Student): void {
StudentsRepository.removeInternshipForStudent(student)
.then(() => {
this.loadNotPlannedStudents();
notification.success({
message: "Stage succesvol verwijderd",
});
});
}

private openAddInternshipModal(student: Student): void {
this.setState({
selectedStudentToPlan: student,
Expand All @@ -351,6 +390,10 @@ class PlanningsPage extends React.Component<PlanningsPageProps, IPlanningsPageSt
this.setState({ isAddInternshipModalVisible: false });
}

private closeEditInternshipModal(): void {
this.setState({ isEditInternshipModalVisible: false });
}

private addInternshipForStudent(internship: IStudentInternship): Promise<void> {
return new Promise<void>((resolve, reject): void => {
if (this.state.selectedStudentToPlan === undefined) {
Expand All @@ -373,6 +416,27 @@ class PlanningsPage extends React.Component<PlanningsPageProps, IPlanningsPageSt
});
}

private editInternshipForStudent(internship: IStudentInternship): Promise<void> {
return new Promise<void>((resolve, reject): void => {
if (this.state.plannedStudentToEdit === undefined) {
return reject("No student edited");
}
StudentsRepository.updateInternshipForStudent(internship, this.state.plannedStudentToEdit)
.then(() => {
notification.success({
message: "Stage succesvol bewerkt",
});
return resolve();
})
.catch((error) => {
notification.error({
message: "Kon stage niet bewerken",
});
return reject(error);
});
});
}

private doMonthChange(action: "next" | "prev"): void {
if (this.calendarRef === null) {
return;
Expand Down
15 changes: 15 additions & 0 deletions src/services/repositories/StudentsRepository.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,21 @@ export class StudentsRepository {
await studentDocRef.update(student.getEntity("update"));
}

public static async updateInternshipForStudent(internship: IStudentInternship, student: Student): Promise<void> {
if (student.isPlanned === false) {
return Promise.reject(Error("Student is not planned, so cannot update internship"));
}
if (student.id === undefined) {
return Promise.reject(Error("Student should have an id"));
}

const studentDocRef = FirestoreRefs.getStudentDocRef(student.id);

student.internship = internship;

await studentDocRef.update(student.getEntity("update"));
}

public static async removeInternshipForStudent(student: Student): Promise<void> {
if (student.id === undefined) {
return Promise.reject(Error("Student should have an id"));
Expand Down

1 comment on commit a605a40

@BenjaVR
Copy link
Owner

@BenjaVR BenjaVR commented on a605a40 Feb 26, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#62

Please sign in to comment.