Sorting and filtering on students list

- Filter all planned internships starting from selected date - Order by start date
BenjaVR · Nov 21, 2019 · 4dff7d0 · 4dff7d0
1 parent addd954
commit 4dff7d0
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 9 deletions.
diff --git a/src/components/students/StudentsTable.tsx b/src/components/students/StudentsTable.tsx
@@ -1,8 +1,9 @@
-import { Button, Col, Modal, notification, Popconfirm, Row, Spin, Table, Tooltip } from "antd";
+import { Button, Col, DatePicker, Modal, notification, Popconfirm, Row, Spin, Table, Tooltip } from "antd";
 import { ColumnFilterItem, ColumnProps } from "antd/lib/table";
+import moment from "moment";
 import React from "react";
 import { emptyFilterOptionValue, exactMatchOrDefaultOptionFilter, hasElementWithId } from "../../helpers/filters";
-import { stringSorter } from "../../helpers/sorters";
+import { dateSorter, stringSorter } from "../../helpers/sorters";
 import { Department } from "../../models/Department";
 import { Education } from "../../models/Education";
 import { School } from "../../models/School";
@@ -47,6 +48,7 @@ class StudentsTable extends React.Component<IStudentsTableProps, IStudentTableSt
         this.renderPlannedCell = this.renderPlannedCell.bind(this);
         this.handleClosePlanningDetails = this.handleClosePlanningDetails.bind(this);
         this.handleDeleteInternshipForStudent = this.handleDeleteInternshipForStudent.bind(this);
+        this.handleFilterStudentsByInternshipDate = this.handleFilterStudentsByInternshipDate.bind(this);
     }
 
     public render(): React.ReactNode {
@@ -268,7 +270,7 @@ class StudentsTable extends React.Component<IStudentsTableProps, IStudentTableSt
             {
                 title: "Bevestigd",
                 key: "isConfirmed",
-                render: (record: Student) => (record.isConfirmed ? "Ja" : "Nee"),
+                render: (record: Student) => (record.isConfirmed ? "Ja" : "-"),
                 filters: [{ text: "Bevestigd", value: "1" }, { text: "Niet bevestigd", value: "0" }],
                 onFilter: (value, record: Student) =>
                     exactMatchOrDefaultOptionFilter(value, record.isConfirmed ? "1" : "0"),
@@ -277,9 +279,62 @@ class StudentsTable extends React.Component<IStudentsTableProps, IStudentTableSt
                 title: "Ingepland",
                 key: "isPlanned",
                 render: (record: Student) => this.renderPlannedCell(record),
-                filters: [{ text: "Ingepland", value: "1" }, { text: "Niet ingepland", value: "0" }],
-                onFilter: (value, record: Student) =>
-                    exactMatchOrDefaultOptionFilter(value, record.isPlanned ? "1" : "0"),
+                sorter: (a, b) => {
+                    if (a.internship === undefined) {
+                        if (b.internship === undefined) {
+                            return 0;
+                        }
+                        return -1;
+                    }
+                    if (b.internship === undefined) {
+                        return 1;
+                    }
+                    return dateSorter(a.internship.startDate, b.internship.startDate);
+                },
+                filterDropdown: ({
+                    confirm,
+                    selectedKeys,
+                    setSelectedKeys,
+                    clearFilters,
+                }: {
+                    confirm: () => void;
+                    selectedKeys: any[];
+                    setSelectedKeys: (x: any) => void;
+                    clearFilters: () => void;
+                }) => {
+                    return (
+                        <div className="ant-table-filter-dropdown">
+                            <DatePicker
+                                placeholder="Ingepland vanaf ..."
+                                format="DD/MM/YYYY"
+                                value={selectedKeys[0]}
+                                // tslint:disable-next-line: jsx-no-lambda
+                                onChange={(selectedDate) => {
+                                    setSelectedKeys([selectedDate]);
+                                    if (selectedDate === undefined || selectedDate === null) {
+                                        clearFilters();
+                                    }
+                                }}
+                                style={{ width: 188, padding: "7px 8px", display: "block" }}
+                            />
+                            <div className="ant-table-filter-dropdown-btns">
+                                <a onClick={confirm}>OK</a>
+                                <a style={{ float: "right" }} onClick={clearFilters}>
+                                    Reset
+                                </a>
+                            </div>
+                        </div>
+                    );
+                },
+                onFilter: (value: moment.Moment | undefined | null, record: Student) => {
+                    if (value !== undefined && value !== null) {
+                        return (
+                            record.internship !== undefined &&
+                            record.internship.startDate.startOf("day").isSameOrAfter(value.startOf("day"))
+                        );
+                    }
+                    return true;
+                },
             },
             {
                 title: "Acties",
@@ -292,13 +347,16 @@ class StudentsTable extends React.Component<IStudentsTableProps, IStudentTableSt
     }
 
     private renderPlannedCell(student: Student): React.ReactNode {
-        if (!student.isPlanned) {
-            return "Nee";
+        if (!student.isPlanned || student.internship === undefined) {
+            return "-";
         }
         const openPlanningsDetailsFn = () => this.showPlanningDetails(student);
         return (
             <React.Fragment>
-                <span>Ja</span>
+                <span>
+                    {student.internship.startDate.format("DD/MM/YYYY")} -{" "}
+                    {student.internship.endDate.format("DD/MM/YYYY")}
+                </span>
                 &nbsp; (<a onClick={openPlanningsDetailsFn}>details</a>)
             </React.Fragment>
         );
@@ -317,6 +375,10 @@ class StudentsTable extends React.Component<IStudentsTableProps, IStudentTableSt
         });
     }
 
+    private handleFilterStudentsByInternshipDate(): void {
+        // TODO
+    }
+
     private getSchoolFilters(): ColumnFilterItem[] {
         const filters: ColumnFilterItem[] = this.props.schools.map((school) => {
             return {

diff --git a/src/helpers/sorters.ts b/src/helpers/sorters.ts
@@ -1,3 +1,5 @@
+import moment from "moment";
+
 export function stringSorter(string1: string, string2: string): -1 | 0 | 1 {
     if (string1 < string2) {
         return -1;
@@ -27,3 +29,23 @@ export function sortByProp<T>(a: T | undefined, b: T | undefined, sortProp: keyo
     }
     return 0;
 }
+
+export function dateSorter(date1: moment.Moment | undefined, date2: moment.Moment): -1 | 0 | 1 {
+    if (date1 === undefined && date2 === undefined) {
+        return 0;
+    }
+    if (date1 === undefined && date2 !== undefined) {
+        return -1;
+    }
+    if (date1 !== undefined && date2 === undefined) {
+        return 1;
+    }
+
+    if (date1!.isBefore(date2!)) {
+        return -1;
+    }
+    if (date1!.isAfter(date2)) {
+        return 1;
+    }
+    return 0;
+}