105 lines
4.1 KiB
TypeScript
105 lines
4.1 KiB
TypeScript
import React, { Fragment } from 'react';
|
|
|
|
import InfoBox from '../../components/info-box';
|
|
import { dataFields } from '../../config/data-fields-config';
|
|
import DataEntry from '../data-components/data-entry';
|
|
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
|
|
import withCopyEdit from '../data-container';
|
|
|
|
import { CategoryViewProps } from './category-view-props';
|
|
import Verification from '../data-components/verification';
|
|
|
|
/**
|
|
* Use view/edit section
|
|
*/
|
|
const UseView: React.FunctionComponent<CategoryViewProps> = (props) => (
|
|
<Fragment>
|
|
<InfoBox msg="93% of properties in UK are dwellings so we have set this as the default colour. Can you help us colour-in all non-residential and mixed use buildings, and verify residential buildings too?"></InfoBox>
|
|
<MultiDataEntry
|
|
title={dataFields.current_landuse_group.title}
|
|
slug="current_landuse_group"
|
|
value={props.building.current_landuse_group}
|
|
mode={props.mode}
|
|
copy={props.copy}
|
|
onChange={props.onChange}
|
|
confirmOnEnter={true}
|
|
tooltip={dataFields.current_landuse_group.tooltip}
|
|
placeholder="Type new land use group here"
|
|
copyable={true}
|
|
autofill={true}
|
|
showAllOptionsOnEmpty={true}
|
|
/>
|
|
<Verification
|
|
slug="current_landuse_group"
|
|
allow_verify={props.user !== undefined && props.building.current_landuse_group !== null && !props.edited}
|
|
onVerify={props.onVerify}
|
|
user_verified={props.user_verified.hasOwnProperty("current_landuse_group")}
|
|
user_verified_as={props.user_verified.current_landuse_group && props.user_verified.current_landuse_group.join(", ")}
|
|
verified_count={props.building.verified.current_landuse_group}
|
|
/>
|
|
{
|
|
props.mode != 'view' &&
|
|
<InfoBox msg="Land use order, shown below, is automatically derived from the land use groups"></InfoBox>
|
|
}
|
|
<DataEntry
|
|
title={dataFields.current_landuse_order.title}
|
|
tooltip={dataFields.current_landuse_order.tooltip}
|
|
slug="current_landuse_order"
|
|
value={props.building.current_landuse_order}
|
|
mode={props.mode}
|
|
disabled={true}
|
|
copy={props.copy}
|
|
onChange={props.onChange}
|
|
/>
|
|
<SelectDataEntry
|
|
title={dataFields.date_source.title}
|
|
slug="use_source"
|
|
value={props.building.date_source}
|
|
mode={props.mode}
|
|
copy={props.copy}
|
|
onChange={props.onChange}
|
|
tooltip={dataFields.date_source.tooltip}
|
|
placeholder=""
|
|
options={[
|
|
"Expert knowledge of building",
|
|
"Expert estimate from image",
|
|
"Survey of London",
|
|
"Pevsner Guides",
|
|
"Victoria County History",
|
|
"Local history publication",
|
|
"Other publication",
|
|
"National Heritage List for England",
|
|
"Other database or gazetteer",
|
|
"Historical map",
|
|
"Other archive document",
|
|
"Film/Video",
|
|
"Other website",
|
|
"Other"
|
|
]}
|
|
/>
|
|
<TextboxDataEntry
|
|
title={dataFields.date_source_detail.title}
|
|
slug="use_source_detail"
|
|
value={props.building.date_source_detail}
|
|
mode={props.mode}
|
|
copy={props.copy}
|
|
onChange={props.onChange}
|
|
tooltip={dataFields.date_source_detail.tooltip}
|
|
/>
|
|
<MultiDataEntry
|
|
title={dataFields.date_link.title}
|
|
slug="use_link"
|
|
value={props.building.date_link}
|
|
mode={props.mode}
|
|
copy={props.copy}
|
|
onChange={props.onChange}
|
|
tooltip={dataFields.date_link.tooltip}
|
|
placeholder="https://..."
|
|
editableEntries={true}
|
|
/>
|
|
</Fragment>
|
|
);
|
|
const UseContainer = withCopyEdit(UseView);
|
|
|
|
export default UseContainer;
|