Sketch out view-only data components

app/src/frontend/building/data-components/data-entry.tsx

@@ -0,0 +1,42 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import { DataTitleCopyable } from './data-title';
+
+const DataEntry: React.FunctionComponent<any> = (props) => { // TODO: remove any
+    return (
+        <Fragment>
+            <DataTitleCopyable
+                slug={props.slug}
+                title={props.title}
+                tooltip={props.tooltip}
+                disabled={props.disabled}
+                copy={props.copy}
+            />
+            <dd>
+                {
+                    (props.value != null && props.value !== '')?
+                        (typeof(props.value) === 'boolean')?
+                            (props.value)? 'Yes' : 'No'
+                            : props.value
+                        : '\u00A0'
+                }
+            </dd>
+        </Fragment>
+    );
+}
+
+DataEntry.propTypes = {
+    title: PropTypes.string,
+    slug: PropTypes.string,
+    tooltip: PropTypes.string,
+    disabled: PropTypes.bool,
+    value: PropTypes.any,
+    copy: PropTypes.shape({
+        copying: PropTypes.bool,
+        copyingKey: PropTypes.func,
+        toggleCopyAttribute: PropTypes.func
+    })
+}
+
+export default DataEntry;

app/src/frontend/building/data-components/data-title.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Tooltip from '../../components/tooltip';
+
+const DataTitle: React.FunctionComponent<any> = (props) => {
+    return (
+        <dt>
+            { props.title }
+            { props.tooltip? <Tooltip text={ props.tooltip } /> : null }
+        </dt>
+    )
+}
+
+DataTitle.propTypes = {
+    title: PropTypes.string,
+    tooltip: PropTypes.string
+}
+
+const DataTitleCopyable: React.FunctionComponent<any> = (props) => { // TODO: remove any
+    return (
+        <dt>
+            { props.title }
+            { props.tooltip? <Tooltip text={ props.tooltip } /> : null }
+            { (props.copy.copying && props.slug && !props.disabled)?
+                <div className="icon-buttons">
+                    <label className="icon-button copy">
+                        Copy
+                        <input
+                            type="checkbox"
+                            checked={props.copy.copyingKey(props.slug)}
+                            onChange={() => props.copy.toggleCopyAttribute(props.slug)}/>
+                    </label>
+                </div>
+                : null
+            }
+        </dt>
+    );
+}
+
+DataTitleCopyable.propTypes = {
+    title: PropTypes.string,
+    tooltip: PropTypes.string,
+    slug: PropTypes.string,
+    disabled: PropTypes.bool,
+    copy: PropTypes.shape({
+        copying: PropTypes.bool,
+        copyingKey: PropTypes.func,
+        toggleCopyAttribute: PropTypes.func
+    })
+}
+
+export default DataTitle;
+export { DataTitleCopyable }

app/src/frontend/building/data-components/like-data-entry.tsx

@@ -0,0 +1,46 @@
+import React, { Fragment } from 'react';
+import { NavLink } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+import Tooltip from '../../components/tooltip';
+
+const LikeDataEntry: React.FunctionComponent<any> = (props) => { // TODO: remove any
+    const data_string = JSON.stringify({like: true});
+    return (
+        <Fragment>
+            <dt>
+                { props.title }
+                { props.tooltip? <Tooltip text={ props.tooltip } /> : null }
+                <div className="icon-buttons">
+                    <NavLink
+                        to={`/multi-edit/${props.cat}.html?data=${data_string}`}
+                        className="icon-button copy">
+                        Copy
+                    </NavLink>
+                </div>
+            </dt>
+            <dd>
+                {
+                    (props.value != null)?
+                        (props.value === 1)?
+                            `${props.value} person likes this building`
+                            : `${props.value} people like this building`
+                        : '\u00A0'
+                }
+            </dd>
+            {
+                (props.user_building_like)? <dd>&hellip;including you!</dd> : ''
+            }
+        </Fragment>
+    );
+}
+
+LikeDataEntry.propTypes = {
+    title: PropTypes.string,
+    cat: PropTypes.string,
+    tooltip: PropTypes.string,
+    value: PropTypes.any,
+    user_building_like: PropTypes.bool
+}
+
+export default LikeDataEntry;

app/src/frontend/building/data-components/multi-data-entry.tsx

@@ -0,0 +1,38 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import { sanitiseURL } from '../../helpers';
+import { DataTitleCopyable } from './data-title';
+
+
+const MultiDataEntry: React.FunctionComponent<any> = (props) => ( // TODO: remove any
+    <Fragment>
+        <DataTitleCopyable
+            slug={props.slug}
+            title={props.title}
+            tooltip={props.tooltip}
+            disabled={props.disabled}
+        />
+        <dd>
+            {
+                (props.value && props.value.length)?
+                    <ul>
+                    {
+                        props.value.map((item, index) => {
+                            return <li key={index}><a href={sanitiseURL(item)}>{item}</a></li>
+                        })
+                    }
+                    </ul>
+                :'\u00A0'
+            }
+        </dd>
+    </Fragment>
+);
+
+MultiDataEntry.propTypes = {
+    title: PropTypes.string,
+    tooltip: PropTypes.string,
+    value: PropTypes.arrayOf(PropTypes.string)
+}
+
+export default MultiDataEntry;

app/src/frontend/building/data-components/uprns-data-entry.tsx

@@ -0,0 +1,60 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import Tooltip from '../../components/tooltip';
+import DataTitle from './data-title';
+
+const UPRNsDataEntry = (props) => {
+    const uprns = props.value || [];
+    const noParent = uprns.filter(uprn => uprn.parent_uprn == null);
+    const withParent = uprns.filter(uprn => uprn.parent_uprn != null);
+
+    return (
+        <Fragment>
+            <DataTitle
+                title={props.title}
+                tooltip={props.tooltip}
+            />
+            <dd>
+                {
+                    noParent.length?
+                        <ul className="uprn-list">
+                            {
+                                noParent.map(uprn => (
+                                    <li key={uprn.uprn}>{uprn.uprn}</li>
+                                ))
+                            }
+                        </ul>
+
+                    : '\u00A0'
+
+                }
+                {
+                    withParent.length?
+                        <details>
+                            <summary>Children</summary>
+                            <ul className="uprn-list">
+                            {
+                                withParent.map(uprn => (
+                                    <li key={uprn.uprn}>{uprn.uprn} (child of {uprn.parent_uprn})</li>
+                                ))
+                            }
+                            </ul>
+                        </details>
+                        : null
+                }
+            </dd>
+        </Fragment>
+    )
+}
+
+UPRNsDataEntry.propTypes = {
+    title: PropTypes.string,
+    tooltip: PropTypes.string,
+    value: PropTypes.arrayOf(PropTypes.shape({
+        uprn: PropTypes.string.isRequired,
+        parent_uprn: PropTypes.string
+    }))
+}
+
+export default UPRNsDataEntry;