a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Render single section in view/edit

Browse Source
This commit is contained in:
Tom Russell 2019-08-14 11:36:38 +01:00
parent 99456e2431
commit 43f239c853
2 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/src/frontend/building/building-edit.tsx
View File

@ -6,7 +6,7 @@ import ErrorBox from '../components/error-box';
import InfoBox from '../components/info-box'; import InfoBox from '../components/info-box';
import Sidebar from './sidebar'; import Sidebar from './sidebar';
import Tooltip from '../components/tooltip'; import Tooltip from '../components/tooltip';
import { SaveIcon } from '../components/icons'; import { BackIcon, SaveIcon } from '../components/icons';
import CONFIG from './fields-config.json'; import CONFIG from './fields-config.json';
@ -15,28 +15,27 @@ const BuildingEdit = (props) => {
return <Redirect to="/sign-up.html" /> return <Redirect to="/sign-up.html" />
} }
const cat = props.match.params.cat; const cat = props.match.params.cat;
if (!props.building_id){ const sections = CONFIG.filter((d) => d.slug === cat)
if (!props.building_id || sections.length !== 1){
return ( return (
<Sidebar title="Building Not Found" back={`/edit/${cat}.html`}> <Sidebar title="Building Not Found" back={`/edit/categories.html`}>
<InfoBox msg="We can't find that one anywhere - try the map again?" /> <InfoBox msg="We can't find that one anywhere - try the map again?" />
<div className="buttons-container ml-3 mr-3"> <div className="buttons-container ml-3 mr-3">
<Link to={`/edit/${cat}.html`} className="btn btn-secondary">Back to maps</Link> <Link to={`/edit/categories.html`} className="btn btn-secondary">Back to maps</Link>
</div> </div>
</Sidebar> </Sidebar>
); );
} }
const section = sections[0];
return ( return (
<Sidebar <Sidebar>
key={props.building_id} <EditForm
title={'You are editing'} {...section}
back={`/edit/${cat}.html`}> {...props}
{ cat={cat}
CONFIG.map((section) => { />
return <EditForm
{...section} {...props}
cat={cat} key={section.slug} />
})
}
</Sidebar> </Sidebar>
); );
} }
@ -237,6 +236,9 @@ class EditForm extends Component<any, any> { // TODO: add proper types
return ( return (
<section className={(this.props.inactive)? 'data-section inactive': 'data-section'}> <section className={(this.props.inactive)? 'data-section inactive': 'data-section'}>
<header className={`section-header edit ${this.props.slug} ${(match? 'active' : '')}`}> <header className={`section-header edit ${this.props.slug} ${(match? 'active' : '')}`}>
<Link className="icon-button back" to="/edit/categories.html">
<BackIcon />
</Link>
<NavLink <NavLink
to={`/edit/${this.props.slug}/building/${this.props.building_id}.html`} to={`/edit/${this.props.slug}/building/${this.props.building_id}.html`}
title={(this.props.inactive)? 'Coming soon… Click the ? for more info.' : title={(this.props.inactive)? 'Coming soon… Click the ? for more info.' :

34
app/src/frontend/building/building-view.tsx
View File

@ -5,33 +5,36 @@ import PropTypes from 'prop-types';
import Sidebar from './sidebar'; import Sidebar from './sidebar';
import Tooltip from '../components/tooltip'; import Tooltip from '../components/tooltip';
import InfoBox from '../components/info-box'; import InfoBox from '../components/info-box';
import { EditIcon } from '../components/icons'; import { BackIcon, EditIcon } from '../components/icons';
import { sanitiseURL } from '../helpers'; import { sanitiseURL } from '../helpers';
import CONFIG from './fields-config.json'; import CONFIG from './fields-config.json';
const BuildingView = (props) => { const BuildingView = (props) => {
if (!props.building_id){ const cat = props.match.params.cat;
const sections = CONFIG.filter((d) => d.slug === cat)
if (!props.building_id || sections.length !== 1){
return ( return (
<Sidebar title="Building Not Found"> <Sidebar title="Building Not Found" back={`/view/categories.html`}>
<InfoBox msg="We can't find that one anywhere - try the map again?" /> <InfoBox msg="We can't find that one anywhere - try the map again?" />
<div className="buttons-container with-space"> <div className="buttons-container with-space">
<Link to="/view/age.html" className="btn btn-secondary">Back to maps</Link> <Link to="/view/categories.html" className="btn btn-secondary">Back to categories</Link>
</div> </div>
</Sidebar> </Sidebar>
); );
} }
const cat = props.match.params.cat;
const section = sections[0];
return ( return (
<Sidebar title={'Data available for this building'} back={`/view/${cat}.html`}> <Sidebar>
{ <DataSection
CONFIG.map(section => ( key={section.slug}
<DataSection cat={cat}
key={section.slug} cat={cat} building_id={props.building_id}
building_id={props.building_id} {...section}
{...section} {...props} /> {...props}
)) />
}
</Sidebar> </Sidebar>
); );
} }
@ -102,6 +105,9 @@ class DataSection extends React.Component<any, any> { // TODO: add proper types
return ( return (
<section id={props.slug} className={(props.inactive)? 'data-section inactive': 'data-section'}> <section id={props.slug} className={(props.inactive)? 'data-section inactive': 'data-section'}>
<header className={`section-header view ${props.slug} ${(match? 'active' : '')}`}> <header className={`section-header view ${props.slug} ${(match? 'active' : '')}`}>
<Link className="icon-button back" to="/view/categories.html">
<BackIcon />
</Link>
<NavLink <NavLink
to={`/view/${props.slug}/building/${props.building_id}.html`} to={`/view/${props.slug}/building/${props.building_id}.html`}
title={(props.inactive)? 'Coming soon… Click the ? for more info.' : title={(props.inactive)? 'Coming soon… Click the ? for more info.' :