Plannings detail for student

BenjaVR · Feb 18, 2019 · e3293d5 · e3293d5 · BenjaVR · Feb 18, 2019
1 parent 2336cd2
commit e3293d5
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 20 deletions.
diff --git a/src/components/planning/PlanningDetailsModal.tsx b/src/components/planning/PlanningDetailsModal.tsx
@@ -1,4 +1,4 @@
-import { Card, Col, List, Modal, Row } from "antd";
+import { Card, Col, Modal, Row } from "antd";
 import moment from "moment";
 import React from "react";
 import { studentsPlannedInDay } from "../../helpers/filters";
@@ -111,10 +111,6 @@ class PlanningDetailsModal extends React.Component<IPlanningDetailsModalProps, I
 
     private renderStudent(student: Student): React.ReactNode {
         const education = this.getEducationById(student.educationId);
-        const internshipAmountOfDays = student.internship !== undefined
-            ? student.internship.endDate.diff(student.internship.startDate, "days") + 1
-            : 0;
-
         return (
             <Card key={student.id} className={styles.studentCard} bodyStyle={{ padding: 12 }}>
                 <Row type="flex" justify="space-between" align="middle">
@@ -132,7 +128,7 @@ class PlanningDetailsModal extends React.Component<IPlanningDetailsModalProps, I
                             <React.Fragment>
                                 <span>{student.internship.startDate.format("DD/MM/YY")} - {student.internship.endDate.format("DD/MM/YY")}</span>
                                 &nbsp;
-                                <span className={styles.internshipDays}>({internshipAmountOfDays} {singleOrPlural(internshipAmountOfDays, "dag", "dagen")})</span>
+                                <span className={styles.internshipDays}>({student.internshipNumberOfDays} {singleOrPlural(student.internshipNumberOfDays, "dag", "dagen")})</span>
                             </React.Fragment>
                         }
                     </Col>

diff --git a/src/components/students/StudentsPage.tsx b/src/components/students/StudentsPage.tsx
@@ -1,9 +1,11 @@
 import { Col, notification, Row } from "antd";
 import React from "react";
+import { Department } from "../../models/Department";
 import { Education } from "../../models/Education";
 import { School } from "../../models/School";
 import { Student } from "../../models/Student";
 import { AnyRouteComponentProps } from "../../routes";
+import { DepartmentsRepository } from "../../services/repositories/DepartmentsRepository";
 import { EducationsRepository } from "../../services/repositories/EducationsRepository";
 import { SchoolsRepository } from "../../services/repositories/SchoolsRepository";
 import { StudentsRepository } from "../../services/repositories/StudentsRepository";
@@ -22,6 +24,8 @@ interface IStudentsPageState {
     isFetchingSchools: boolean;
     educations: Education[];
     isFetchingEducations: boolean;
+    departments: Department[];
+    isFetchingDepartments: boolean;
 }
 
 export default class StudentsPage extends React.Component<StudentsPageProps, IStudentsPageState> {
@@ -41,6 +45,8 @@ export default class StudentsPage extends React.Component<StudentsPageProps, ISt
             isFetchingSchools: true,
             educations: [],
             isFetchingEducations: true,
+            departments: [],
+            isFetchingDepartments: true,
         };
 
         this.unsubscribeFromStudents = () => { return; };
@@ -75,6 +81,13 @@ export default class StudentsPage extends React.Component<StudentsPageProps, ISt
                     educations,
                 });
             });
+        DepartmentsRepository.getDepartmentsByName()
+            .then((departments) => {
+                this.setState({
+                    isFetchingDepartments: false,
+                    departments,
+                });
+            });
     }
 
     public componentWillUnmount(): void {
@@ -96,6 +109,8 @@ export default class StudentsPage extends React.Component<StudentsPageProps, ISt
                             isLoadingSchools={this.state.isFetchingSchools}
                             educations={this.state.educations}
                             isLoadingEducations={this.state.isFetchingEducations}
+                            departments={this.state.departments}
+                            isLoadingDepartments={this.state.isFetchingDepartments}
                         />
                     </Col>
                 </Row>

diff --git a/src/components/students/StudentsTable.module.scss b/src/components/students/StudentsTable.module.scss
@@ -0,0 +1,3 @@
+.studentInternshipModalFooter {
+    text-align: right;
+}
diff --git a/src/components/students/StudentsTable.tsx b/src/components/students/StudentsTable.tsx
@@ -1,12 +1,15 @@
-import { Button, Col, Popconfirm, Row, Spin, Table, Tooltip, Modal } from "antd";
+import { Button, Col, Modal, notification, Popconfirm, Row, Spin, Table, Tooltip } from "antd";
 import { ColumnFilterItem, ColumnProps } from "antd/lib/table";
 import React from "react";
 import { emptyFilterOptionValue, exactMatchOrDefaultOptionFilter, hasElementWithId } from "../../helpers/filters";
 import { stringSorter } from "../../helpers/sorters";
+import { Department } from "../../models/Department";
 import { Education } from "../../models/Education";
 import { School } from "../../models/School";
 import { Student } from "../../models/Student";
+import { StudentsRepository } from "../../services/repositories/StudentsRepository";
 import styles from "../DataTable.module.scss";
+import specificStyles from "./StudentsTable.module.scss";
 
 interface IStudentsTableProps {
     isLoading: boolean;
@@ -15,6 +18,8 @@ interface IStudentsTableProps {
     isLoadingSchools: boolean;
     educations: Education[];
     isLoadingEducations: boolean;
+    departments: Department[];
+    isLoadingDepartments: boolean;
     deleteStudent: (student: Student) => Promise<void>;
     onAddStudentRequest: () => void;
     onEditStudentRequest: (student: Student) => void;
@@ -23,6 +28,7 @@ interface IStudentsTableProps {
 interface IStudentTableState {
     isPlanningDetailsOpen: boolean;
     selectedStudentPlanningDetails: Student | undefined;
+    isDeletingInternship: boolean;
 }
 
 class StudentsTable extends React.Component<IStudentsTableProps, IStudentTableState> {
@@ -33,17 +39,26 @@ class StudentsTable extends React.Component<IStudentsTableProps, IStudentTableSt
         this.state = {
             isPlanningDetailsOpen: false,
             selectedStudentPlanningDetails: undefined,
+            isDeletingInternship: false,
         };
 
         this.renderSchoolName = this.renderSchoolName.bind(this);
         this.renderActions = this.renderActions.bind(this);
         this.renderTableTitle = this.renderTableTitle.bind(this);
         this.renderPlannedCell = this.renderPlannedCell.bind(this);
         this.handleClosePlanningDetails = this.handleClosePlanningDetails.bind(this);
+        this.handleDeleteInternshipForStudent = this.handleDeleteInternshipForStudent.bind(this);
     }
 
     public render(): React.ReactNode {
+        const selectedStudent = this.state.selectedStudentPlanningDetails;
+        const deleteStudentFn = () => selectedStudent !== undefined
+            ? this.handleDeleteInternshipForStudent(selectedStudent)
+            : {};
         const columns = this.getTableColumns();
+        const departmentsNameForStudent = selectedStudent !== undefined
+            ? this.getDepartmentNameForStudent(selectedStudent)
+            : undefined;
         return (
             <React.Fragment>
                 <Table
@@ -57,18 +72,35 @@ class StudentsTable extends React.Component<IStudentsTableProps, IStudentTableSt
                     scroll={{ x: true }}
                     className={styles.table}
                 />
-                <Modal
-                    title={this.state.selectedStudentPlanningDetails === undefined
-                        ? "Stage"
-                        : `Stage voor ${this.state.selectedStudentPlanningDetails.fullName}`}
-                    visible={this.state.isPlanningDetailsOpen}
-                    closable={true}
-                    maskClosable={true}
-                    onCancel={this.handleClosePlanningDetails}
-                    footer={null}
-                >
-                    <span>heh</span>
-                </Modal>
+                {selectedStudent !== undefined && selectedStudent.internship !== undefined &&
+                    <Modal
+                        confirmLoading={this.props.isLoadingDepartments}
+                        title={`Stage voor ${selectedStudent.fullName}`}
+                        visible={this.state.isPlanningDetailsOpen}
+                        closable={true}
+                        maskClosable={true}
+                        onCancel={this.handleClosePlanningDetails}
+                        footer={(
+                            <div className={specificStyles.studentInternshipModalFooter}>
+                                <Popconfirm title="Ben je zeker dat je deze stage wilt verwijderen?" onConfirm={deleteStudentFn}>
+                                    <Button type="danger" ghost={true} loading={this.state.isDeletingInternship}>Stage verwijderen</Button>
+                                </Popconfirm>
+                            </div>
+                        )}
+                    >
+                        <p>
+                            Van <b>{selectedStudent.internship.startDate.format("DD/MM/YYYY")}</b> tot en met <b>{selectedStudent.internship.endDate.format("DD/MM/YYYY")}</b>
+                            &nbsp;
+                            <i>({selectedStudent.internshipNumberOfDays} {selectedStudent.internshipNumberOfDays === 1 ? "dag" : "dagen"})</i>
+                            {departmentsNameForStudent !== undefined &&
+                                <React.Fragment>
+                                    &nbsp;in <b>{departmentsNameForStudent}</b>
+                                </React.Fragment>
+                            }
+                            .
+                        </p>
+                    </Modal>
+                }
             </React.Fragment>
         );
     }
@@ -142,6 +174,21 @@ class StudentsTable extends React.Component<IStudentsTableProps, IStudentTableSt
         );
     }
 
+    private handleDeleteInternshipForStudent(student: Student): void {
+        StudentsRepository.removeInternshipForStudent(student)
+            .then(() => {
+                this.setState({
+                    isPlanningDetailsOpen: false,
+                    selectedStudentPlanningDetails: undefined,
+                });
+            })
+            .catch(() => {
+                notification.error({
+                    message: "Kon stage niet verwijderen, probeer later opnieuw",
+                });
+            });
+    }
+
     private generateTableRowKey(record: Student, index: number): string {
         return record.id || index.toString();
     }
@@ -160,10 +207,21 @@ class StudentsTable extends React.Component<IStudentsTableProps, IStudentTableSt
         if (education === undefined) {
             return "";
         }
-
         return education.name;
     }
 
+    private getDepartmentNameForStudent(student: Student): string | undefined {
+        if (student.internship === undefined || student.internship.departmentId === undefined) {
+            return undefined;
+        }
+        const studentsDepartmentId = student.internship.departmentId;
+        const department = this.props.departments.find((d) => studentsDepartmentId === d.id);
+        if (department === undefined) {
+            return undefined;
+        }
+        return department.name;
+    }
+
     private getTableColumns(): Array<ColumnProps<Student>> {
         return [
             {

diff --git a/src/models/Student.ts b/src/models/Student.ts
@@ -19,6 +19,12 @@ export class Student extends ModelBase<IStudent> {
         return `${this.firstName} ${this.lastName}`;
     }
 
+    public get internshipNumberOfDays(): number {
+        return this.internship !== undefined
+            ? this.internship.endDate.diff(this.internship.startDate, "days") + 1
+            : 0;
+    }
+
     constructor(
         public firstName: string,
         public lastName: string | undefined,

diff --git a/src/services/repositories/StudentsRepository.ts b/src/services/repositories/StudentsRepository.ts
@@ -94,6 +94,19 @@ export class StudentsRepository {
         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"));
+        }
+
+        const studentDocRef = FirestoreRefs.getStudentDocRef(student.id);
+
+        student.isPlanned = false;
+        student.internship = undefined;
+
+        await studentDocRef.update(student.getEntity("update"));
+    }
+
     public static async updateStudent(student: Student, doNotUpdateTimestamp: boolean = false): Promise<void> {
         if (student.id === undefined) {
             return Promise.reject(Error("Student should have an id"));