From a605a40f12beeda8eb381749508152690c9b6444 Mon Sep 17 00:00:00 2001
From: BenjaVR <benjamin.v.renterghem@gmail.com>
Date: Tue, 26 Feb 2019 19:09:59 +0100
Subject: [PATCH] Delete/edit internships from the planning page

---
 .../planning/PlanningDetailsModal.module.scss | 18 ++++--
 .../planning/PlanningDetailsModal.tsx         | 46 ++++++++++---
 .../planning/PlanningsFormModal.tsx           | 11 +++-
 src/components/planning/PlanningsPage.tsx     | 64 +++++++++++++++++++
 .../repositories/StudentsRepository.ts        | 15 +++++
 5 files changed, 138 insertions(+), 16 deletions(-)

diff --git a/src/components/planning/PlanningDetailsModal.module.scss b/src/components/planning/PlanningDetailsModal.module.scss
index a5f217d..c80ddde 100644
--- a/src/components/planning/PlanningDetailsModal.module.scss
+++ b/src/components/planning/PlanningDetailsModal.module.scss
@@ -1,3 +1,5 @@
+@import "../../variables.scss";
+
 .title {
     font-weight: 400;
 
@@ -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;
-}
\ No newline at end of file
+}
+
+.actionButton {
+    margin: 0 4px;
+}
diff --git a/src/components/planning/PlanningDetailsModal.tsx b/src/components/planning/PlanningDetailsModal.tsx
index 8ff1a4d..6997df3 100644
--- a/src/components/planning/PlanningDetailsModal.tsx
+++ b/src/components/planning/PlanningDetailsModal.tsx
@@ -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";
@@ -16,6 +16,8 @@ interface IPlanningDetailsModalProps {
     selectedDate: moment.Moment | undefined;
     isVisible: boolean;
     onCloseRequested: () => void;
+    handleEditInternship: (student: Student) => void;
+    handleDeleteInternship: (student: Student) => void;
 }
 
 interface IPlanningDetailsModalState {
@@ -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>
@@ -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>
         );
diff --git a/src/components/planning/PlanningsFormModal.tsx b/src/components/planning/PlanningsFormModal.tsx
index abfdd97..f0afcf5 100644
--- a/src/components/planning/PlanningsFormModal.tsx
+++ b/src/components/planning/PlanningsFormModal.tsx
@@ -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";
@@ -19,6 +19,7 @@ interface IPlanningsFormModalProps {
     studentToPlan: Student | undefined;
     departments: Department[];
     areDepartmentsLoading: boolean;
+    isEdit: boolean;
     onCloseRequest: () => void;
     submitInternship(internship: IStudentInternship): Promise<void>;
 }
@@ -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);
 
diff --git a/src/components/planning/PlanningsPage.tsx b/src/components/planning/PlanningsPage.tsx
index 7f7b155..a20aaab 100644
--- a/src/components/planning/PlanningsPage.tsx
+++ b/src/components/planning/PlanningsPage.tsx
@@ -26,6 +26,7 @@ interface IPlanningsPageState {
     showOnlyConfirmedStudents: boolean;
     isCalendarLoading: boolean;
     isAddInternshipModalVisible: boolean;
+    isEditInternshipModalVisible: boolean;
     departments: Department[];
     areDepartmentsLoading: boolean;
     educations: Education[];
@@ -57,6 +58,7 @@ class PlanningsPage extends React.Component<PlanningsPageProps, IPlanningsPageSt
             showOnlyConfirmedStudents: true,
             isCalendarLoading: false,
             isAddInternshipModalVisible: false,
+            isEditInternshipModalVisible: false,
             departments: [],
             areDepartmentsLoading: false,
             educations: [],
@@ -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 {
@@ -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}
@@ -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>
         );
@@ -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,
@@ -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) {
@@ -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;
diff --git a/src/services/repositories/StudentsRepository.ts b/src/services/repositories/StudentsRepository.ts
index c6b3c0e..b4f5216 100644
--- a/src/services/repositories/StudentsRepository.ts
+++ b/src/services/repositories/StudentsRepository.ts
@@ -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"));