From 3c8d713892db4df1c9142cecd744b5b69013de5a Mon Sep 17 00:00:00 2001 From: BenjaVR Date: Mon, 4 Feb 2019 21:27:09 +0100 Subject: [PATCH] Added color (using react-color) to a department. - This will be used in the Calendar view --- web/package.json | 2 + web/src/components/DataTable.module.scss | 10 +++++ .../departments/DepartmentsFormModal.tsx | 27 ++++++++++++- .../departments/DepartmentsTable.tsx | 17 ++++++++- web/src/entities/IDepartment.ts | 1 + web/src/models/Department.ts | 3 ++ yarn.lock | 38 ++++++++++++++++++- 7 files changed, 95 insertions(+), 3 deletions(-) diff --git a/web/package.json b/web/package.json index 6ab3ec0..e5e2f3d 100644 --- a/web/package.json +++ b/web/package.json @@ -3,6 +3,7 @@ "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", @@ -10,6 +11,7 @@ "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 index 86cece3..62827ed 100644 --- 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 index f2b9b0a..3b8a803 100644 --- 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 { @@ -42,9 +44,11 @@ class DepartmentFormModal extends React.Component("name", { initialValue: departmentToEdit.name, }); + const fields: Partial = { + 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, )} + + {getFieldDecorator("color", { + validateTrigger: this.state.formValidateTrigger, + rules: [ + { required: true, message: "Kies een kleur" }, + ], + })( + , + )} +

Capaciteit per opleiding

Max. aantal studenten per opleiding voor deze afdeling

@@ -184,9 +203,14 @@ class DepartmentFormModal extends React.Component = ["name", "capacityPerEducation"]; + const fields: Array = ["name", "color", "capacityPerEducation"]; this.props.form.validateFieldsAndScroll(fields, (errors, values) => { if (!errors) { this.setState({ @@ -209,6 +233,7 @@ class DepartmentFormModal extends React.Component("name")], + values[nameof("color")].hex, values[nameof("capacityPerEducation")], ); diff --git a/web/src/components/departments/DepartmentsTable.tsx b/web/src/components/departments/DepartmentsTable.tsx index dce76fe..a14a451 100644 --- 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 { private columns: Array> = [ + { + title: "", + key: "color", + render: (record: Department) => this.renderColorTag(record), + width: "20px", + }, { title: "Naam", dataIndex: "name", @@ -34,6 +40,7 @@ class DepartmentsTable extends React.Component { 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 { ); } + private renderColorTag(department: Department): React.ReactNode { + return ( +
+ +
+ ); + } + 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 index cb1e0dd..cd6cf4a 100644 --- 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 index 791ffd8..9417574 100644 --- a/web/src/models/Department.ts +++ b/web/src/models/Department.ts @@ -5,6 +5,7 @@ export class Department extends ModelBase { constructor( public name: string, + public color: string, public capacityPerEducation: IDepartmentEducationCapacity[], ) { super(); @@ -17,6 +18,7 @@ export class Department extends ModelBase { 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 { protected getEntityInternal(): IDepartment { return { name: this.name, + color: this.color, capacityPerEducation: this.capacityPerEducation || [], }; } diff --git a/yarn.lock b/yarn.lock index 02f912d..b77ab98 100644 --- 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/react-dom@16.0.11": 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" +react-color@2.17.0: + 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 @@ react@16.7.0: 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"