From 433c24e8d1848b1c0fe17b2a6baf4223e84743e7 Mon Sep 17 00:00:00 2001
From: BenjaVR <benjamin.v.renterghem@gmail.com>
Date: Sun, 6 Jan 2019 21:51:24 +0100
Subject: [PATCH] EducationsPage (based on SchoolsPage)

---
 ...able.module.scss => DataTable.module.scss} |   0
 web/src/components/EducationsTable.tsx        | 180 ------------------
 web/src/components/Root.tsx                   |   1 +
 .../educations/EducationsFormModal.tsx        | 118 ++++++++++++
 .../components/educations/EducationsPage.tsx  | 162 ++++++++++++++++
 .../components/educations/EducationsTable.tsx | 107 +++++++++++
 .../layouts/AuthenticatedLayout.tsx           |  10 +-
 .../components/schools/SchoolList.module.scss |   7 -
 ...hoolFormModal.tsx => SchoolsFormModal.tsx} |  14 +-
 web/src/components/schools/SchoolsPage.tsx    |  34 ++--
 .../{SchoolList.tsx => SchoolsTable.tsx}      |  65 +++----
 web/src/routes.ts                             |   8 +
 12 files changed, 459 insertions(+), 247 deletions(-)
 rename web/src/components/{EducationsTable.module.scss => DataTable.module.scss} (100%)
 delete mode 100644 web/src/components/EducationsTable.tsx
 create mode 100644 web/src/components/educations/EducationsFormModal.tsx
 create mode 100644 web/src/components/educations/EducationsPage.tsx
 create mode 100644 web/src/components/educations/EducationsTable.tsx
 delete mode 100644 web/src/components/schools/SchoolList.module.scss
 rename web/src/components/schools/{SchoolFormModal.tsx => SchoolsFormModal.tsx} (88%)
 rename web/src/components/schools/{SchoolList.tsx => SchoolsTable.tsx} (59%)

diff --git a/web/src/components/EducationsTable.module.scss b/web/src/components/DataTable.module.scss
similarity index 100%
rename from web/src/components/EducationsTable.module.scss
rename to web/src/components/DataTable.module.scss
diff --git a/web/src/components/EducationsTable.tsx b/web/src/components/EducationsTable.tsx
deleted file mode 100644
index 6d9f5cc..0000000
--- a/web/src/components/EducationsTable.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { Button, Col, notification, Popconfirm, Row, Table } from "antd";
-import { ColumnProps } from "antd/lib/table";
-import React from "react";
-import { stringSorter } from "../helpers/sorters";
-import { IEducation } from "../models/Education";
-import { EducationsService } from "../services/EducationsService";
-import styles from "./EducationsTable.module.scss";
-
-interface IEducationsTableProps {
-}
-
-interface IEducationsTableState {
-    educations: IEducation[];
-    loading: boolean;
-}
-
-class EducationsTable extends React.Component<IEducationsTableProps, IEducationsTableState> {
-
-    private educationsService = new EducationsService();
-
-    private columns: Array<ColumnProps<IEducation>> = [
-        {
-            title: "Naam",
-            dataIndex: "name",
-            key: "name",
-            sorter: (a, b) => stringSorter(a.name, b.name),
-        },
-        {
-            title: "Acties",
-            key: "actions",
-            width: 120,
-            align: "center",
-            render: (record: IEducation) => this.renderRowActions(record),
-        },
-    ];
-
-    constructor(props: IEducationsTableProps) {
-        super(props);
-
-        this.state = {
-            educations: [],
-            loading: true,
-        };
-
-        this.renderRowActions = this.renderRowActions.bind(this);
-        this.renderTableTitle = this.renderTableTitle.bind(this);
-        this.handleRequestAddEducation = this.handleRequestAddEducation.bind(this);
-        this.handleDeleteEducation = this.handleDeleteEducation.bind(this);
-        this.handleRequestEditEducation = this.handleRequestEditEducation.bind(this);
-    }
-
-    public componentDidMount(): void {
-        this.educationsService.subscribe((educations): void => {
-            this.setState({
-                educations,
-                loading: false,
-            });
-        });
-    }
-
-    public render(): React.ReactNode {
-        return (
-            <React.Fragment>
-                <Table
-                    title={this.renderTableTitle}
-                    columns={this.columns}
-                    rowKey={this.generateTableRowKey}
-                    dataSource={this.state.educations}
-                    loading={this.state.loading}
-                    size="middle"
-                    scroll={{ x: true }}
-                    className={styles.table}
-                />
-            </React.Fragment>
-        );
-    }
-
-    private renderTableTitle(): React.ReactNode {
-        return (
-            <Row type="flex" justify="space-between" align="middle">
-                <Col className={styles.col}>
-                    <h2 className={styles.tableTitleText}>Opleidingen</h2>
-                </Col>
-                <Col className={styles.col}>
-                    <Button icon="plus" type="primary" onClick={this.handleRequestAddEducation}>
-                        Nieuwe opleiding
-                    </Button>
-                </Col>
-            </Row>
-        );
-    }
-
-    private renderRowActions(record: IEducation): React.ReactNode {
-        const deleteFunc = () => { this.handleDeleteEducation(record); };
-        const editFunc = () => { this.handleRequestEditEducation(record); };
-        return (
-            <React.Fragment>
-                <Button
-                    size="small"
-                    icon="edit"
-                    type="primary"
-                    ghost={true}
-                    onClick={editFunc}
-                    className={styles.actionButton}
-                />
-                <Popconfirm
-                    title="Weet u zeker dat u deze opleiding wilt verwijderen?"
-                    onConfirm={deleteFunc}
-                >
-                    <Button
-                        size="small"
-                        icon="delete"
-                        type="danger"
-                        ghost={true}
-                        className={styles.actionButton}
-                    />
-                </Popconfirm>
-            </React.Fragment>
-        );
-    }
-
-    private handleRequestAddEducation(): void {
-
-    }
-
-    private handleDeleteEducation(education: IEducation): void {
-        this.setState({ loading: true });
-        this.educationsService.delete(education)
-            .then(() => {
-                notification.success({
-                    message: "Opleiding succesvol verwijderd",
-                });
-            })
-            .catch((error) => {
-                notification.error({
-                    message: "Opleiding kon niet worden verwijderd",
-                    description: error,
-                });
-            })
-            .finally(() => {
-                this.setState({
-                    loading: false,
-                });
-            });
-    }
-
-    private handleRequestEditEducation(education: IEducation): void {
-
-    }
-
-    private addEducation(education: IEducation): void {
-        this.setState({ loading: true });
-
-        this.educationsService.add({
-            enabled: true,
-            name: Math.random().toString(10),
-        }).then(() => {
-            notification.success({
-                message: `Opleiding ${education.name} succesvol toegevoegd`,
-            });
-        }).catch((error) => {
-            notification.error({
-                message: "Kon opleiding niet toevoegen",
-                description: error,
-            });
-        }).finally(() => {
-            this.setState({ loading: false });
-        });
-    }
-
-    private editEducation(education: IEducation): void {
-
-    }
-
-    private generateTableRowKey(record: IEducation, index: number): string {
-        return record.id || index.toString();
-    }
-}
-
-export default EducationsTable;
diff --git a/web/src/components/Root.tsx b/web/src/components/Root.tsx
index 2ab772f..570940b 100644
--- a/web/src/components/Root.tsx
+++ b/web/src/components/Root.tsx
@@ -16,6 +16,7 @@ const Root: React.FunctionComponent = () => (
                     <PrivateRoute exact={true} path={routes.planningsRoute.url} component={routes.planningsRoute.component} />
                     <PrivateRoute exact={true} path={routes.studentsRoute.url} component={routes.studentsRoute.component} />
                     <PrivateRoute exact={true} path={routes.schoolsRoute.url} component={routes.schoolsRoute.component} />
+                    <PrivateRoute exact={true} path={routes.educationsRoute.url} component={routes.educationsRoute.component} />
                     <PrivateRoute exact={true} path={routes.departmentsRoute.url} component={routes.departmentsRoute.component} />
 
                     <Redirect to={routes.logInRoute.url} />
diff --git a/web/src/components/educations/EducationsFormModal.tsx b/web/src/components/educations/EducationsFormModal.tsx
new file mode 100644
index 0000000..323bcea
--- /dev/null
+++ b/web/src/components/educations/EducationsFormModal.tsx
@@ -0,0 +1,118 @@
+import { Form, Input, Modal } from "antd";
+import { FormComponentProps } from "antd/lib/form";
+import FormItem from "antd/lib/form/FormItem";
+import React from "react";
+import { FormValidationTrigger } from "../../helpers/types";
+import { IEducation } from "../../models/Education";
+
+interface IEducationFormModalProps {
+    title: string;
+    okText: string;
+    isVisible: boolean;
+    educationToEdit: IEducation | undefined;
+    onCloseRequest: () => void;
+    submitEducation(education: IEducation): Promise<void>;
+}
+
+type EducationFormModalProps = IEducationFormModalProps & FormComponentProps;
+
+interface IEducationFormModalState {
+    isSubmitting: boolean;
+    formValidateTrigger: FormValidationTrigger;
+}
+
+class EducationFormModal extends React.Component<EducationFormModalProps, IEducationFormModalState> {
+
+    constructor(props: EducationFormModalProps) {
+        super(props);
+
+        this.state = {
+            isSubmitting: false,
+            formValidateTrigger: "",
+        };
+
+        this.doClose = this.doClose.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+    }
+
+    public componentDidUpdate(prevProps: EducationFormModalProps): void {
+        // Populate the form if it is just opened and if a education to edit is passed.
+        if (this.props.educationToEdit !== undefined
+            && this.props.isVisible === true
+            && prevProps.isVisible === false) {
+            this.props.form.setFieldsValue({
+                name: this.props.educationToEdit.name,
+            });
+        }
+    }
+
+    public render(): React.ReactNode {
+        const { getFieldDecorator } = this.props.form;
+
+        return (
+            <Modal
+                visible={this.props.isVisible}
+                title={this.props.title}
+                onCancel={this.doClose}
+                onOk={this.handleOk}
+                okText={this.props.okText}
+                confirmLoading={this.state.isSubmitting}
+            >
+                <Form>
+                    <FormItem>
+                        {getFieldDecorator<IEducation>("name", {
+                            validateTrigger: this.state.formValidateTrigger,
+                            rules: [
+                                { required: true, message: "Naam mag niet leeg zijn" },
+                            ],
+                        })(
+                            <Input
+                                autoFocus={true}
+                                placeholder="Naam"
+                                disabled={this.state.isSubmitting}
+                            />,
+                        )}
+                    </FormItem>
+                </Form>
+            </Modal>
+        );
+    }
+
+    private doClose(): void {
+        this.props.form.resetFields();
+        this.props.onCloseRequest();
+    }
+
+    private handleOk(): void {
+        // Do real-time validation (while typing) only after the first submit.
+        this.setState({
+            formValidateTrigger: "onChange",
+        });
+
+        const fields: Array<keyof IEducation> = ["name"];
+        this.props.form.validateFieldsAndScroll(fields, (errors, values) => {
+            if (!errors) {
+                this.setState({
+                    isSubmitting: true,
+                });
+
+                const education: IEducation = {
+                    ...values,
+                };
+                this.props.submitEducation(education)
+                    .then(() => {
+                        this.doClose();
+                    })
+                    .finally(() => {
+                        this.setState({
+                            isSubmitting: false,
+                        });
+                    });
+            }
+        });
+    }
+}
+
+const WrappedEducationFormModal = Form.create<IEducationFormModalProps>()(EducationFormModal);
+
+export default WrappedEducationFormModal;
diff --git a/web/src/components/educations/EducationsPage.tsx b/web/src/components/educations/EducationsPage.tsx
new file mode 100644
index 0000000..40979d8
--- /dev/null
+++ b/web/src/components/educations/EducationsPage.tsx
@@ -0,0 +1,162 @@
+import { Col, notification, Row } from "antd";
+import React from "react";
+import { IEducation } from "../../models/Education";
+import { RoutePageComponentProps, routes } from "../../routes";
+import { EducationsService } from "../../services/EducationsService";
+import EducationsTable from "../educations/EducationsTable";
+import AuthenticatedLayout from "../layouts/AuthenticatedLayout";
+import EducationFormModal from "./EducationsFormModal";
+
+type EducationsPageProps = RoutePageComponentProps;
+
+interface IEducationsPageState {
+    educations: IEducation[];
+    isFetching: boolean;
+    isAddEducationModalVisible: boolean;
+    isEditEducationModalVisible: boolean;
+    educationToEdit: IEducation | undefined;
+}
+
+export default class EducationsPage extends React.Component<EducationsPageProps, IEducationsPageState> {
+
+    private readonly educationsService = new EducationsService();
+
+    constructor(props: EducationsPageProps) {
+        super(props);
+
+        this.state = {
+            educations: [],
+            isFetching: true,
+            isAddEducationModalVisible: false,
+            isEditEducationModalVisible: false,
+            educationToEdit: undefined,
+        };
+
+        this.openAddEducationModal = this.openAddEducationModal.bind(this);
+        this.closeAddEducationModal = this.closeAddEducationModal.bind(this);
+        this.openEditEducationModal = this.openEditEducationModal.bind(this);
+        this.closeEditEducationModal = this.closeEditEducationModal.bind(this);
+        this.addEducation = this.addEducation.bind(this);
+        this.editEducation = this.editEducation.bind(this);
+        this.deleteEducation = this.deleteEducation.bind(this);
+    }
+
+    public componentDidMount(): void {
+        this.educationsService.subscribe((educations) => {
+            this.setState({
+                isFetching: false,
+                educations,
+            });
+        });
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <React.Fragment>
+                <AuthenticatedLayout router={{ history: this.props.history }} initialRoute={routes.educationsRoute}>
+                    <Row>
+                        <Col>
+                            <EducationsTable
+                                isLoading={this.state.isFetching}
+                                educations={this.state.educations}
+                                deleteEducation={this.deleteEducation}
+                                onAddEducationRequest={this.openAddEducationModal}
+                                onEditEducationRequest={this.openEditEducationModal}
+                            />
+                        </Col>
+                    </Row>
+                </AuthenticatedLayout>
+                <EducationFormModal
+                    title="Nieuwe opleiding toevoegen"
+                    okText="Voeg toe"
+                    isVisible={this.state.isAddEducationModalVisible}
+                    submitEducation={this.addEducation}
+                    onCloseRequest={this.closeAddEducationModal}
+                    educationToEdit={undefined}
+                />
+                <EducationFormModal
+                    title="Opleiding bewerken"
+                    okText="Bewerk"
+                    isVisible={this.state.isEditEducationModalVisible}
+                    submitEducation={this.editEducation}
+                    onCloseRequest={this.closeEditEducationModal}
+                    educationToEdit={this.state.educationToEdit}
+                />
+            </React.Fragment>
+        );
+    }
+
+    private openAddEducationModal(): void {
+        this.setState({ isAddEducationModalVisible: true });
+    }
+
+    private closeAddEducationModal(): void {
+        this.setState({ isAddEducationModalVisible: false });
+    }
+
+    private openEditEducationModal(education: IEducation): void {
+        this.setState({
+            isEditEducationModalVisible: true,
+            educationToEdit: education,
+        });
+    }
+
+    private closeEditEducationModal(): void {
+        this.setState({ isEditEducationModalVisible: false });
+    }
+
+    private addEducation(education: IEducation): Promise<void> {
+        return new Promise<void>((resolve, reject): void => {
+            this.educationsService.add(education)
+                .then(() => {
+                    notification.success({
+                        message: `Opleiding "${education.name}" succesvol toegevoegd`,
+                    });
+                    resolve();
+                })
+                .catch(() => {
+                    notification.error({
+                        message: "Kon opleiding niet toevoegen",
+                    });
+                    reject();
+                });
+        });
+    }
+
+    private editEducation(education: IEducation): Promise<void> {
+        education.id = this.state.educationToEdit!.id;
+        return new Promise<void>((resolve, reject): void => {
+            this.educationsService.update(education)
+                .then(() => {
+                    notification.success({
+                        message: `Opleiding "${education.name}" succesvol bewerkt`,
+                    });
+                    resolve();
+                })
+                .catch(() => {
+                    notification.error({
+                        message: "Kon opleiding niet bewerken",
+                    });
+                    reject();
+                });
+        });
+    }
+
+    private deleteEducation(education: IEducation): Promise<void> {
+        return new Promise<void>((resolve, reject): void => {
+            this.educationsService.delete(education)
+                .then(() => {
+                    notification.success({
+                        message: `Opleiding "${education.name}" succesvol verwijderd`,
+                    });
+                    resolve();
+                })
+                .catch(() => {
+                    notification.error({
+                        message: `Kon opleiding "${education.name}" niet verwijderen, probeer later opnieuw`,
+                    });
+                    reject();
+                });
+        });
+    }
+}
diff --git a/web/src/components/educations/EducationsTable.tsx b/web/src/components/educations/EducationsTable.tsx
new file mode 100644
index 0000000..8fad6a4
--- /dev/null
+++ b/web/src/components/educations/EducationsTable.tsx
@@ -0,0 +1,107 @@
+import { Button, Col, Popconfirm, Row, Table, Tooltip } from "antd";
+import { ColumnProps } from "antd/lib/table";
+import React from "react";
+import { stringSorter } from "../../helpers/sorters";
+import { IEducation } from "../../models/Education";
+import styles from "../DataTable.module.scss";
+
+interface IEducationsTableProps {
+    isLoading: boolean;
+    educations: IEducation[];
+    deleteEducation: (education: IEducation) => Promise<void>;
+    onAddEducationRequest: () => void;
+    onEditEducationRequest: (education: IEducation) => void;
+}
+
+class EducationsTable extends React.Component<IEducationsTableProps> {
+
+    private columns: Array<ColumnProps<IEducation>> = [
+        {
+            title: "Naam",
+            dataIndex: "name",
+            key: "name",
+            sorter: (a, b) => stringSorter(a.name, b.name),
+        },
+        {
+            title: "Acties",
+            key: "actions",
+            width: 120,
+            align: "center",
+            render: (record: IEducation) => this.renderActions(record),
+        },
+    ];
+
+    constructor(props: IEducationsTableProps) {
+        super(props);
+
+        this.renderActions = this.renderActions.bind(this);
+        this.renderTableTitle = this.renderTableTitle.bind(this);
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <Table
+                title={this.renderTableTitle}
+                columns={this.columns}
+                rowKey={this.generateTableRowKey}
+                dataSource={this.props.educations}
+                loading={this.props.isLoading}
+                size="middle"
+                bordered={true}
+                scroll={{ x: true }}
+                className={styles.table}
+            />
+        );
+    }
+
+    private renderActions(education: IEducation): React.ReactNode {
+        const deleteFunc = () => this.props.deleteEducation(education);
+        const editFunc = () => this.props.onEditEducationRequest(education);
+        return (
+            <React.Fragment>
+                <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 opleiding wilt verwijderen?"
+                        onConfirm={deleteFunc}
+                    >
+                        <Button
+                            size="small"
+                            icon="delete"
+                            type="danger"
+                            ghost={true}
+                            className={styles.actionButton}
+                        />
+                    </Popconfirm>
+                </Tooltip>
+            </React.Fragment>
+        );
+    }
+
+    private renderTableTitle(): React.ReactNode {
+        return (
+            <Row type="flex" justify="space-between" align="middle">
+                <Col className={styles.col}>
+                    <Button icon="plus" type="primary" onClick={this.props.onAddEducationRequest}>
+                        Nieuwe opleiding
+                    </Button>
+                </Col>
+            </Row>
+        );
+    }
+
+    private generateTableRowKey(record: IEducation, index: number): string {
+        return record.id || index.toString();
+    }
+}
+
+export default EducationsTable;
diff --git a/web/src/components/layouts/AuthenticatedLayout.tsx b/web/src/components/layouts/AuthenticatedLayout.tsx
index 9d2aba2..5c16c4b 100644
--- a/web/src/components/layouts/AuthenticatedLayout.tsx
+++ b/web/src/components/layouts/AuthenticatedLayout.tsx
@@ -11,6 +11,7 @@ import styles from "./AuthenticatedLayout.module.scss";
 
 interface IAuthenticatedLayoutProps {
     router: RouterProps;
+    initialRoute: IRoute;
 }
 
 interface IAuthenticatedLayoutState {
@@ -32,6 +33,7 @@ class AuthenticatedLayout extends React.Component<IAuthenticatedLayoutProps, IAu
         { route: routes.planningsRoute, iconType: "calendar" },
         { route: routes.studentsRoute, iconType: "team" },
         { route: routes.schoolsRoute, iconType: "bank" },
+        { route: routes.educationsRoute, iconType: "edit" },
         { route: routes.departmentsRoute, iconType: "home" },
     ];
 
@@ -39,7 +41,7 @@ class AuthenticatedLayout extends React.Component<IAuthenticatedLayoutProps, IAu
         super(props);
 
         this.state = {
-            activeMenuItem: this.menuItems[0],
+            activeMenuItem: this.getMenuItemByUrl(props.initialRoute.url) || this.menuItems[0],
             isSidebarCollapsed: false,
         };
 
@@ -150,7 +152,7 @@ class AuthenticatedLayout extends React.Component<IAuthenticatedLayoutProps, IAu
     }
 
     private handleSelectMenuItem(selectParam: SelectParam): void {
-        const newMenuItem = this.menuItems.find((menuItem) => menuItem.route.url === selectParam.key);
+        const newMenuItem = this.getMenuItemByUrl(selectParam.key);
 
         if (newMenuItem !== undefined) {
             this.setState({
@@ -176,6 +178,10 @@ class AuthenticatedLayout extends React.Component<IAuthenticatedLayoutProps, IAu
             });
     }
 
+    private getMenuItemByUrl(url: string): IMenuItem | undefined {
+        return this.menuItems.find((menuItem) => menuItem.route.url === url);
+    }
+
     private getUsername(): string {
         const user = Firebase.auth().currentUser;
 
diff --git a/web/src/components/schools/SchoolList.module.scss b/web/src/components/schools/SchoolList.module.scss
deleted file mode 100644
index 8a22adb..0000000
--- a/web/src/components/schools/SchoolList.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.actionButton {
-    margin: 0 4px;
-}
-
-.tableTitleText {
-    margin: 0;
-}
diff --git a/web/src/components/schools/SchoolFormModal.tsx b/web/src/components/schools/SchoolsFormModal.tsx
similarity index 88%
rename from web/src/components/schools/SchoolFormModal.tsx
rename to web/src/components/schools/SchoolsFormModal.tsx
index 8126f5b..0457c1c 100644
--- a/web/src/components/schools/SchoolFormModal.tsx
+++ b/web/src/components/schools/SchoolsFormModal.tsx
@@ -5,7 +5,7 @@ import React from "react";
 import { FormValidationTrigger } from "../../helpers/types";
 import { ISchool } from "../../models/School";
 
-interface ISchoolFormModalProps {
+interface ISchoolsFormModalProps {
     title: string;
     okText: string;
     isVisible: boolean;
@@ -14,14 +14,14 @@ interface ISchoolFormModalProps {
     submitSchool(school: ISchool): Promise<void>;
 }
 
-type SchoolFormModalProps = ISchoolFormModalProps & FormComponentProps;
+type SchoolFormModalProps = ISchoolsFormModalProps & FormComponentProps;
 
-interface ISchoolFormModalState {
+interface ISchoolsFormModalState {
     isSubmitting: boolean;
     formValidateTrigger: FormValidationTrigger;
 }
 
-class SchoolFormModal extends React.Component<SchoolFormModalProps, ISchoolFormModalState> {
+class SchoolsFormModal extends React.Component<SchoolFormModalProps, ISchoolsFormModalState> {
 
     constructor(props: SchoolFormModalProps) {
         super(props);
@@ -67,6 +67,7 @@ class SchoolFormModal extends React.Component<SchoolFormModalProps, ISchoolFormM
                             ],
                         })(
                             <Input
+                                autoFocus={true}
                                 placeholder="Naam"
                                 disabled={this.state.isSubmitting}
                             />,
@@ -112,6 +113,5 @@ class SchoolFormModal extends React.Component<SchoolFormModalProps, ISchoolFormM
     }
 }
 
-const WrappedSchoolFormModal = Form.create<ISchoolFormModalProps>()(SchoolFormModal);
-
-export default WrappedSchoolFormModal;
+const WrappedSchoolsFormModal = Form.create<ISchoolsFormModalProps>()(SchoolsFormModal);
+export default WrappedSchoolsFormModal;
diff --git a/web/src/components/schools/SchoolsPage.tsx b/web/src/components/schools/SchoolsPage.tsx
index 2c83ade..e2dd767 100644
--- a/web/src/components/schools/SchoolsPage.tsx
+++ b/web/src/components/schools/SchoolsPage.tsx
@@ -1,20 +1,19 @@
 import { Col, notification, Row } from "antd";
 import React from "react";
 import { ISchool } from "../../models/School";
-import { RoutePageComponentProps } from "../../routes";
+import { RoutePageComponentProps, routes } from "../../routes";
 import { SchoolsService } from "../../services/SchoolsService";
-import EducationsTable from "../EducationsTable";
 import AuthenticatedLayout from "../layouts/AuthenticatedLayout";
-import SchoolFormModal from "./SchoolFormModal";
-import SchoolList from "./SchoolList";
+import SchoolFormModal from "./SchoolsFormModal";
+import SchoolList from "./SchoolsTable";
 
 type SchoolsPageProps = RoutePageComponentProps;
 
 interface ISchoolsPageState {
     schools: ISchool[];
     isFetching: boolean;
-    isAddSchoolModalVisible: boolean;
-    isEditSchoolModalVisible: boolean;
+    isAddSchoolsModalVisible: boolean;
+    isEditSchoolsModalVisible: boolean;
     schoolToEdit: ISchool | undefined;
 }
 
@@ -28,8 +27,8 @@ export default class SchoolsPage extends React.Component<SchoolsPageProps, IScho
         this.state = {
             schools: [],
             isFetching: true,
-            isAddSchoolModalVisible: false,
-            isEditSchoolModalVisible: false,
+            isAddSchoolsModalVisible: false,
+            isEditSchoolsModalVisible: false,
             schoolToEdit: undefined,
         };
 
@@ -54,9 +53,9 @@ export default class SchoolsPage extends React.Component<SchoolsPageProps, IScho
     public render(): React.ReactNode {
         return (
             <React.Fragment>
-                <AuthenticatedLayout router={{ history: this.props.history }}>
+                <AuthenticatedLayout router={{ history: this.props.history }} initialRoute={routes.schoolsRoute}>
                     <Row>
-                        <Col xl={12} span={24}>
+                        <Col>
                             <SchoolList
                                 isLoading={this.state.isFetching}
                                 schools={this.state.schools}
@@ -65,15 +64,12 @@ export default class SchoolsPage extends React.Component<SchoolsPageProps, IScho
                                 onEditSchoolRequest={this.openEditSchoolModal}
                             />
                         </Col>
-                        <Col xl={12} span={24}>
-                            <EducationsTable />
-                        </Col>
                     </Row>
                 </AuthenticatedLayout>
                 <SchoolFormModal
                     title="Nieuwe school toevoegen"
                     okText="Voeg toe"
-                    isVisible={this.state.isAddSchoolModalVisible}
+                    isVisible={this.state.isAddSchoolsModalVisible}
                     submitSchool={this.addSchool}
                     onCloseRequest={this.closeAddSchoolModal}
                     schoolToEdit={undefined}
@@ -81,7 +77,7 @@ export default class SchoolsPage extends React.Component<SchoolsPageProps, IScho
                 <SchoolFormModal
                     title="School bewerken"
                     okText="Bewerk"
-                    isVisible={this.state.isEditSchoolModalVisible}
+                    isVisible={this.state.isEditSchoolsModalVisible}
                     submitSchool={this.editSchool}
                     onCloseRequest={this.closeEditSchoolModal}
                     schoolToEdit={this.state.schoolToEdit}
@@ -91,22 +87,22 @@ export default class SchoolsPage extends React.Component<SchoolsPageProps, IScho
     }
 
     private openAddSchoolModal(): void {
-        this.setState({ isAddSchoolModalVisible: true });
+        this.setState({ isAddSchoolsModalVisible: true });
     }
 
     private closeAddSchoolModal(): void {
-        this.setState({ isAddSchoolModalVisible: false });
+        this.setState({ isAddSchoolsModalVisible: false });
     }
 
     private openEditSchoolModal(school: ISchool): void {
         this.setState({
-            isEditSchoolModalVisible: true,
+            isEditSchoolsModalVisible: true,
             schoolToEdit: school,
         });
     }
 
     private closeEditSchoolModal(): void {
-        this.setState({ isEditSchoolModalVisible: false });
+        this.setState({ isEditSchoolsModalVisible: false });
     }
 
     private addSchool(school: ISchool): Promise<void> {
diff --git a/web/src/components/schools/SchoolList.tsx b/web/src/components/schools/SchoolsTable.tsx
similarity index 59%
rename from web/src/components/schools/SchoolList.tsx
rename to web/src/components/schools/SchoolsTable.tsx
index 77e6d0c..48938f3 100644
--- a/web/src/components/schools/SchoolList.tsx
+++ b/web/src/components/schools/SchoolsTable.tsx
@@ -1,11 +1,11 @@
-import { Button, Col, Popconfirm, Row, Table } from "antd";
+import { Button, Col, Popconfirm, Row, Table, Tooltip } from "antd";
 import { ColumnProps } from "antd/lib/table";
 import React from "react";
 import { stringSorter } from "../../helpers/sorters";
 import { ISchool } from "../../models/School";
-import styles from "./SchoolList.module.scss";
+import styles from "../DataTable.module.scss";
 
-interface ISchoolListProps {
+interface ISchoolsTableProps {
     isLoading: boolean;
     schools: ISchool[];
     deleteSchool: (school: ISchool) => Promise<void>;
@@ -13,7 +13,7 @@ interface ISchoolListProps {
     onEditSchoolRequest: (school: ISchool) => void;
 }
 
-class SchoolList extends React.Component<ISchoolListProps> {
+class SchoolsTable extends React.Component<ISchoolsTableProps> {
 
     private columns: Array<ColumnProps<ISchool>> = [
         {
@@ -31,7 +31,7 @@ class SchoolList extends React.Component<ISchoolListProps> {
         },
     ];
 
-    constructor(props: ISchoolListProps) {
+    constructor(props: ISchoolsTableProps) {
         super(props);
 
         this.renderActions = this.renderActions.bind(this);
@@ -41,14 +41,15 @@ class SchoolList extends React.Component<ISchoolListProps> {
     public render(): React.ReactNode {
         return (
             <Table
-                rowKey={this.getTableRowKey}
                 title={this.renderTableTitle}
                 columns={this.columns}
+                rowKey={this.generateTableRowKey}
                 dataSource={this.props.schools}
                 loading={this.props.isLoading}
-                bordered={true}
                 size="middle"
-                scroll={{ x: 250 }}
+                bordered={true}
+                scroll={{ x: true }}
+                className={styles.table}
             />
         );
     }
@@ -58,27 +59,30 @@ class SchoolList extends React.Component<ISchoolListProps> {
         const editFunc = () => this.props.onEditSchoolRequest(school);
         return (
             <React.Fragment>
-                <Button
-                    size="small"
-                    icon="edit"
-                    type="primary"
-                    ghost={true}
-                    className={styles.actionButton}
-                    onClick={editFunc}
-                />
-                <Popconfirm
-                    title="Weet u zeker dat u deze school wilt verwijderen?"
-                    onConfirm={deleteFunc}
-                >
+                <Tooltip title="Bewerken">
                     <Button
                         size="small"
-                        icon="delete"
-                        type="danger"
+                        icon="edit"
+                        type="primary"
                         ghost={true}
+                        onClick={editFunc}
                         className={styles.actionButton}
                     />
-                </Popconfirm>
-
+                </Tooltip>
+                <Tooltip title="Verwijderen">
+                    <Popconfirm
+                        title="Weet u zeker dat u deze school wilt verwijderen?"
+                        onConfirm={deleteFunc}
+                    >
+                        <Button
+                            size="small"
+                            icon="delete"
+                            type="danger"
+                            ghost={true}
+                            className={styles.actionButton}
+                        />
+                    </Popconfirm>
+                </Tooltip>
             </React.Fragment>
         );
     }
@@ -86,21 +90,18 @@ class SchoolList extends React.Component<ISchoolListProps> {
     private renderTableTitle(): React.ReactNode {
         return (
             <Row type="flex" justify="space-between" align="middle">
-                <Col>
-                    <h2 className={styles.tableTitleText}>Scholen</h2>
-                </Col>
-                <Col>
-                    <Button type="primary" onClick={this.props.onAddSchoolRequest}>
+                <Col className={styles.col}>
+                    <Button icon="plus" type="primary" onClick={this.props.onAddSchoolRequest}>
                         Nieuwe school
-                </Button>
+                    </Button>
                 </Col>
             </Row>
         );
     }
 
-    private getTableRowKey(record: ISchool, index: number): string {
+    private generateTableRowKey(record: ISchool, index: number): string {
         return record.id || index.toString();
     }
 }
 
-export default SchoolList;
+export default SchoolsTable;
diff --git a/web/src/routes.ts b/web/src/routes.ts
index a6e2610..9e66774 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { RouteComponentProps } from "react-router";
 import LoginPage from "./components/auth/login/LoginPage";
+import EducationsPage from "./components/educations/EducationsPage";
 import SchoolsPage from "./components/schools/SchoolsPage";
 
 export type RoutePageComponentProps = RouteComponentProps<any>;
@@ -35,6 +36,12 @@ const schoolsRoute: IRoute = {
     component: SchoolsPage,
 };
 
+const educationsRoute: IRoute = {
+    title: "Opleidingen",
+    url: "/educations",
+    component: EducationsPage,
+};
+
 const departmentsRoute: IRoute = {
     title: "Afdelingen",
     url: "/departments",
@@ -49,5 +56,6 @@ export const routes = {
     planningsRoute,
     studentsRoute,
     schoolsRoute,
+    educationsRoute,
     departmentsRoute,
 };