From 4320e20952895d36c768c525ce9d07b6aa9a83ff Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Tue, 8 Oct 2019 14:20:22 +0100
Subject: [PATCH] Add DataEntryGroup component

---
 .../data-components/data-entry-group.css      | 12 +++++
 .../data-components/data-entry-group.tsx      | 54 +++++++++++++++++++
 app/src/frontend/components/icons.tsx         |  8 ++-
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 app/src/frontend/building/data-components/data-entry-group.css
 create mode 100644 app/src/frontend/building/data-components/data-entry-group.tsx

diff --git a/app/src/frontend/building/data-components/data-entry-group.css b/app/src/frontend/building/data-components/data-entry-group.css
new file mode 100644
index 00000000..7addef93
--- /dev/null
+++ b/app/src/frontend/building/data-components/data-entry-group.css
@@ -0,0 +1,12 @@
+.data-entry-group-header {
+    cursor: pointer;
+    position: relative;
+}
+.data-entry-group-header .data-entry-group-title {
+    position: absolute;
+    left: 1rem;
+}
+
+.data-entry-group-body {
+    padding-left: 1rem;
+}
diff --git a/app/src/frontend/building/data-components/data-entry-group.tsx b/app/src/frontend/building/data-components/data-entry-group.tsx
new file mode 100644
index 00000000..e1f2af45
--- /dev/null
+++ b/app/src/frontend/building/data-components/data-entry-group.tsx
@@ -0,0 +1,54 @@
+import React, { Fragment } from "react";
+
+import './data-entry-group.css';
+import { RightIcon, DownIcon } from "../../components/icons";
+
+interface DataEntryProps {
+    name: string;
+}
+
+interface DataEntryState {
+    collapsed: boolean;
+}
+
+class DataEntryGroup extends React.Component<DataEntryProps, DataEntryState> {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            collapsed: true
+        };
+
+        this.toggle = this.toggle.bind(this);
+    }
+
+    toggle() {
+        this.setState((state) => ({
+            collapsed: !state.collapsed
+        }));
+    }
+
+    render() {
+        return (
+            <Fragment>
+                <div className='data-entry-group-header' onClick={this.toggle}>
+                    <CollapseIcon collapsed={this.state.collapsed} />
+                    <span className='data-entry-group-title'>{this.props.name}</span>
+                </div>
+                <div className={`data-entry-group-body ${this.state.collapsed ? 'collapse' : ''}`}>
+                    {this.props.children}
+                </div>
+            </Fragment>
+        );
+    }
+}
+
+const CollapseIcon: React.FunctionComponent<{collapsed: boolean}> = (props) => (
+    <span className="collapse-icon">
+        {props.collapsed ?  <RightIcon/> : <DownIcon/>}
+    </span>
+);
+
+export {
+    DataEntryGroup
+};
diff --git a/app/src/frontend/components/icons.tsx b/app/src/frontend/components/icons.tsx
index b660c13c..a7352d20 100644
--- a/app/src/frontend/components/icons.tsx
+++ b/app/src/frontend/components/icons.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faQuestionCircle, faPaintBrush, faInfoCircle, faTimes, faCheck, faCheckDouble,
-    faAngleLeft, faCaretDown, faSearch, faEye, faCaretUp } from '@fortawesome/free-solid-svg-icons'
+    faAngleLeft, faCaretDown, faSearch, faEye, faCaretUp, faCaretRight } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
     faQuestionCircle,
@@ -17,6 +17,7 @@ library.add(
     faAngleLeft,
     faCaretDown,
     faCaretUp,
+    faCaretRight,
     faSearch,
     faEye
 );
@@ -61,6 +62,10 @@ const UpIcon = () => (
     <FontAwesomeIcon icon="caret-up" />
 );
 
+const RightIcon = () => (
+    <FontAwesomeIcon icon="caret-right" />
+);
+
 const SearchIcon = () => (
     <FontAwesomeIcon icon="search" />
 );
@@ -76,5 +81,6 @@ export {
     BackIcon,
     DownIcon,
     UpIcon,
+    RightIcon,
     SearchIcon
 };