Added color (using react-color) to a department.

- This will be used in the Calendar view
BenjaVR · Feb 4, 2019 · 3c8d713 · 3c8d713 · BenjaVR · Feb 4, 2019
1 parent 8c37e12
commit 3c8d713
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 3 deletions.
diff --git a/web/package.json b/web/package.json
@@ -3,13 +3,15 @@
     "version": "1.0.0",
     "private": true,
     "dependencies": {
+        "@types/react-color": "^2.14.0",
         "antd": "3.12.1",
         "classnames": "2.2.6",
         "core-js": "2.6.1",
         "firebase": "5.7.1",
         "jest": "23.6.0",
         "moment": "2.23.0",
         "react": "16.7.0",
+        "react-color": "2.17.0",
         "react-dom": "16.7.0",
         "react-helmet": "5.2.0",
         "react-router": "4.3.1",

diff --git a/web/src/components/DataTable.module.scss b/web/src/components/DataTable.module.scss
@@ -11,3 +11,13 @@
 .tableTitleText {
     margin: 0;
 }
+
+.colorTagContainer {
+    text-align: center;
+}
+
+.colorTag {
+    pointer-events: none;
+    display: inline !important;
+    margin: 0 !important;
+}
diff --git a/web/src/components/departments/DepartmentsFormModal.tsx b/web/src/components/departments/DepartmentsFormModal.tsx
@@ -2,6 +2,7 @@ import { Button, Col, Form, Input, InputNumber, Modal, Row, Select, Tooltip } fr
 import { FormComponentProps } from "antd/lib/form";
 import FormItem from "antd/lib/form/FormItem";
 import React from "react";
+import { CirclePicker, ColorResult } from "react-color";
 import { IDepartmentEducationCapacity } from "../../entities/IDepartment";
 import { nameof } from "../../helpers/nameof";
 import { FormValidationTrigger } from "../../helpers/types";
@@ -26,6 +27,7 @@ interface IDepartmentFormModalState {
     isSubmitting: boolean;
     formValidateTrigger: FormValidationTrigger;
     capacityFieldIds: number[];
+    selectedColor: string | undefined;
 }
 
 class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDepartmentFormModalState> {
@@ -42,9 +44,11 @@ class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDep
             isSubmitting: false,
             formValidateTrigger: "",
             capacityFieldIds: [],
+            selectedColor: undefined,
         };
 
         this.renderEducationSelectOption = this.renderEducationSelectOption.bind(this);
+        this.handleColorChange = this.handleColorChange.bind(this);
         this.handleAfterClose = this.handleAfterClose.bind(this);
         this.handleClose = this.handleClose.bind(this);
         this.handleOk = this.handleOk.bind(this);
@@ -67,6 +71,11 @@ class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDep
             this.props.form.getFieldDecorator<Department>("name", {
                 initialValue: departmentToEdit.name,
             });
+            const fields: Partial<Department> = {
+                color: departmentToEdit.color,
+            };
+            this.setState({ selectedColor: departmentToEdit.color });
+            this.props.form.setFieldsValue(fields);
             capacityFieldIds.forEach((capacityFieldId) => {
                 this.props.form.getFieldDecorator(`${this.capacityPerEducationFieldName}[${capacityFieldId}].${this.educationIdFieldName}`, {
                     initialValue: departmentToEdit.capacityPerEducation[capacityFieldId].educationId,
@@ -166,6 +175,16 @@ class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDep
                             />,
                         )}
                     </FormItem>
+                    <FormItem label="Kleur">
+                        {getFieldDecorator<Department>("color", {
+                            validateTrigger: this.state.formValidateTrigger,
+                            rules: [
+                                { required: true, message: "Kies een kleur" },
+                            ],
+                        })(
+                            <CirclePicker color={this.state.selectedColor} onChange={this.handleColorChange} />,
+                        )}
+                    </FormItem>
 
                     <h4>Capaciteit per opleiding</h4>
                     <p>Max. aantal studenten per opleiding voor deze afdeling</p>
@@ -184,9 +203,14 @@ class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDep
         );
     }
 
+    private handleColorChange(color: ColorResult): void {
+        this.setState({ selectedColor: color.hex });
+    }
+
     private handleAfterClose(): void {
         this.setState({
             capacityFieldIds: [],
+            selectedColor: undefined,
         });
     }
 
@@ -200,7 +224,7 @@ class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDep
             formValidateTrigger: "onChange",
         });
 
-        const fields: Array<keyof Department> = ["name", "capacityPerEducation"];
+        const fields: Array<keyof Department> = ["name", "color", "capacityPerEducation"];
         this.props.form.validateFieldsAndScroll(fields, (errors, values) => {
             if (!errors) {
                 this.setState({
@@ -209,6 +233,7 @@ class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDep
 
                 const department = new Department(
                     values[nameof<Department>("name")],
+                    values[nameof<Department>("color")].hex,
                     values[nameof<Department>("capacityPerEducation")],
                 );
 

diff --git a/web/src/components/departments/DepartmentsTable.tsx b/web/src/components/departments/DepartmentsTable.tsx
@@ -1,4 +1,4 @@
-import { Button, Col, Popconfirm, Row, Table, Tooltip } from "antd";
+import { Button, Col, Popconfirm, Row, Table, Tag, Tooltip } from "antd";
 import { ColumnProps } from "antd/lib/table";
 import React from "react";
 import { stringSorter } from "../../helpers/sorters";
@@ -16,6 +16,12 @@ interface IDepartmentsTableProps {
 class DepartmentsTable extends React.Component<IDepartmentsTableProps> {
 
     private columns: Array<ColumnProps<Department>> = [
+        {
+            title: "",
+            key: "color",
+            render: (record: Department) => this.renderColorTag(record),
+            width: "20px",
+        },
         {
             title: "Naam",
             dataIndex: "name",
@@ -34,6 +40,7 @@ class DepartmentsTable extends React.Component<IDepartmentsTableProps> {
     constructor(props: IDepartmentsTableProps) {
         super(props);
 
+        this.renderColorTag = this.renderColorTag.bind(this);
         this.renderActions = this.renderActions.bind(this);
         this.renderTableTitle = this.renderTableTitle.bind(this);
     }
@@ -54,6 +61,14 @@ class DepartmentsTable extends React.Component<IDepartmentsTableProps> {
         );
     }
 
+    private renderColorTag(department: Department): React.ReactNode {
+        return (
+            <div className={styles.colorTagContainer}>
+                <Tag className={styles.colorTag} color={department.color} />
+            </div>
+        );
+    }
+
     private renderActions(department: Department): React.ReactNode {
         const deleteFunc = () => this.props.deleteDepartment(department);
         const editFunc = () => this.props.onEditDepartmentRequest(department);

diff --git a/web/src/entities/IDepartment.ts b/web/src/entities/IDepartment.ts
@@ -2,6 +2,7 @@ import { IFirestoreEntityBase } from "./IFirestoreEntityBase";
 
 export interface IDepartment extends IFirestoreEntityBase {
     name: string;
+    color: string;
     capacityPerEducation: IDepartmentEducationCapacity[];
 }
 

diff --git a/web/src/models/Department.ts b/web/src/models/Department.ts
@@ -5,6 +5,7 @@ export class Department extends ModelBase<IDepartment> {
 
     constructor(
         public name: string,
+        public color: string,
         public capacityPerEducation: IDepartmentEducationCapacity[],
     ) {
         super();
@@ -17,6 +18,7 @@ export class Department extends ModelBase<IDepartment> {
     public static fromEntity(entity: IDepartment): Department {
         const department = new Department(
             entity.name,
+            entity.color,
             entity.capacityPerEducation,
         );
         department.fillBaseFields(entity);
@@ -26,6 +28,7 @@ export class Department extends ModelBase<IDepartment> {
     protected getEntityInternal(): IDepartment {
         return {
             name: this.name,
+            color: this.color,
             capacityPerEducation: this.capacityPerEducation || [],
         };
     }

diff --git a/yarn.lock b/yarn.lock
@@ -1094,6 +1094,11 @@
     lodash "^4.17.5"
     protobufjs "^6.8.6"
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1317,6 +1322,13 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
   integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
 
+"@types/react-color@^2.14.0":
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-2.14.0.tgz#e01f6069902819fe9f6544375829a485f894206f"
+  integrity sha512-5UfGjUsu7bXop7K064nNrIGgS7wPjGEY7Or9tAE6BLslDtfhRnAlqWo9N2BIntEZ/3KpXlRnt0MBuc+hZJTevw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/[email protected]":
   version "16.0.11"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.11.tgz#bd10ccb0d9260343f4b9a49d4f7a8330a5c1f081"
@@ -7204,7 +7216,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.13.1, lodash@^4.16.5, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.6.1, lodash@~4.17.10:
+lodash@>4.17.4, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.13.1, lodash@^4.16.5, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.6.1, lodash@~4.17.10:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -7307,6 +7319,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 math-random@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
@@ -9851,6 +9868,18 @@ react-app-polyfill@^0.1.3:
     raf "3.4.0"
     whatwg-fetch "3.0.0"
 
+[email protected]:
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.17.0.tgz#e14b8a11f4e89163f65a34c8b43faf93f7f02aaa"
+  integrity sha512-kJfE5tSaFe6GzalXOHksVjqwCPAsTl+nzS9/BWfP7j3EXbQ4IiLAF9sZGNzk3uq7HfofGYgjmcUgh0JP7xAQ0w==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash ">4.17.4"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-dev-utils@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-6.1.1.tgz#a07e3e8923c4609d9f27e5af5207e3ca20724895"
@@ -10031,6 +10060,13 @@ [email protected]:
     prop-types "^15.6.2"
     scheduler "^0.12.0"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"