diff --git a/src/components/students/StudentsTable.tsx b/src/components/students/StudentsTable.tsx index 29a7492..112e43e 100644 --- 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 (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 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 ( +
+ { + setSelectedKeys([selectedDate]); + if (selectedDate === undefined || selectedDate === null) { + clearFilters(); + } + }} + style={{ width: 188, padding: "7px 8px", display: "block" }} + /> +
+ OK + + Reset + +
+
+ ); + }, + 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 this.showPlanningDetails(student); return ( - Ja + + {student.internship.startDate.format("DD/MM/YYYY")} -{" "} + {student.internship.endDate.format("DD/MM/YYYY")} +   (details) ); @@ -317,6 +375,10 @@ class StudentsTable extends React.Component { return { diff --git a/src/helpers/sorters.ts b/src/helpers/sorters.ts index 76b9adc..ef44a0e 100644 --- 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(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; +}