Skip to content

Commit

Permalink
region administration
Browse files Browse the repository at this point in the history
  • Loading branch information
erinz2020 committed Jan 4, 2024
1 parent 74495b0 commit 146a436
Show file tree
Hide file tree
Showing 7 changed files with 269 additions and 65 deletions.
3 changes: 2 additions & 1 deletion locale/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -1286,5 +1286,6 @@
"MY_PENDING_SIGHTINGS" : "My pending sightings",
"MY_SIGHTINGS" : "My sightings",
"MY_UNAPPROVED_SIGHTINGS" : "My unapproved sightings",
"TotalAccount" : "Total Account: {totalAccount}"
"TotalAccount" : "Total Account: {totalAccount}",
"MANAGE_REGIONS" : "Manage Regions"
}
6 changes: 5 additions & 1 deletion src/AuthenticatedSwitch.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import Footer from './components/Footer';
import { defaultCrossfadeDuration } from './constants/defaults';
import Requests from './pages/setup/Requests';
import SpeciesManagement from './pages/fieldManagement/SpeciesManagement';
import RegionManagement from './pages/fieldManagement/RegionManagement';
import ChangeLog from './pages/changeLog/ChangeLog';
import DataPage from './pages/dataPage/DataPage';

Expand Down Expand Up @@ -115,6 +116,9 @@ export default function AuthenticatedSwitch({
<Route path="/settings/fields/species">
<SpeciesManagement />
</Route>
<Route path="/settings/fields/regions">
<RegionManagement />
</Route>
<Route path="/settings/fields/save-custom-field/:type?/:id?">
<SaveCustomField />
</Route>
Expand Down Expand Up @@ -231,4 +235,4 @@ export default function AuthenticatedSwitch({
/>
</main>
);
}
}
17 changes: 12 additions & 5 deletions src/components/fields/edit/LocationIdEditor.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,16 @@ export default function LocationIdEditor(props) {
});

useEffect(() => {
const selectedLabel = Object.keys(nameToIdMap).find(name => nameToIdMap[name] === selected);
setSearchText(selectedLabel);
const selectedLabel =
Object.keys(nameToIdMap)
.find(name => nameToIdMap[name] === selected);
const selectedNode = flatternedTree[selected];
if(!selectedNode){
setSearchText('');
return;
}else {
setSearchText(selectedLabel);
}
}, [selected]);

return (
Expand All @@ -111,10 +119,9 @@ export default function LocationIdEditor(props) {
onChange={onChange}
searchText={searchText}
showData={showData}
setSearchText={setSearchText}
setModalOpen={setModalOpen}
selected={selected}
setSelected={setSelected}
flatternedTree={flatternedTree}
/>}
{showDescription ? (
<FormHelperText>{description}</FormHelperText>
Expand All @@ -123,4 +130,4 @@ export default function LocationIdEditor(props) {
</div>
)

}
}
14 changes: 12 additions & 2 deletions src/components/fields/edit/TreeViewComponent.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,18 @@ const TreeViewComponent = (props) => {
showData,
selected,
setSelected,
flatternedTree,
} = props;
const classes = useStyles();


const handleNodeSelect = (event, nodeId) => {
const node = flatternedTree[nodeId];
if(node.placeholderOnly){
onChange("");
setSelected("");
return;
}
onChange(nodeId);
setSelected(nodeId);
};
Expand All @@ -53,7 +60,10 @@ const TreeViewComponent = (props) => {
display: 'flex',
alignItems: 'center',
}}>
<Radio checked={selected===node.id}/>
<Radio
checked={node.placeholderOnly ? false : selected===node.id}
disabled={node.placeholderOnly}
/>
{node.name}
</div>
}
Expand Down Expand Up @@ -86,4 +96,4 @@ const TreeViewComponent = (props) => {
);
};

export default TreeViewComponent;
export default TreeViewComponent;
128 changes: 128 additions & 0 deletions src/pages/fieldManagement/RegionManagement.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import React, { useEffect, useState } from 'react';
import { get } from 'lodash-es';
import { FormattedMessage } from 'react-intl';
import { useHistory } from 'react-router-dom';
import MainColumn from '../../components/MainColumn';
import TreeEditor from './settings/defaultFieldComponents/TreeEditor';
import useSiteSettings from '../../models/site/useSiteSettings';
import Button from '../../components/Button';
import Text from '../../components/Text';
import SettingsBreadcrumbs from '../../components/SettingsBreadcrumbs';
import usePutSiteSetting from '../../models/site/usePutSiteSetting';
import CustomAlert from '../../components/Alert';

function getInitialFormState(siteSettings) {
const regions = get(
siteSettings,
['site.custom.regions', 'value'],
[],
);
const species = get(siteSettings, ['site.species', 'value'], []);
const relationships = get(
siteSettings,
['relationship_type_roles', 'value'],
[],
);
const socialGroups = get(
siteSettings,
['social_group_roles', 'value'],
[],
);

return { regions, species, relationships, socialGroups };
}

export default function RegionManagement() {
const [formSettings, setFormSettings] = useState(null);
const { data: siteSettings } = useSiteSettings();
const history = useHistory();

const {
mutate: putSiteSetting,
error: putError,
loading,
clearError,
} = usePutSiteSetting();

const onClose = () => {
clearError();
history.push('/settings/fields');
};

useEffect(
() => setFormSettings(getInitialFormState(siteSettings)),
[siteSettings],
);

const tree = get(formSettings, ['regions', 'locationID'], []);

return (
<MainColumn>
<Text
variant="h3"
component="h3"
style={{ padding: '16px 0 16px 16px' }}
id="MANAGE_REGIONS"
/>
<SettingsBreadcrumbs currentPageTextId="MANAGE_REGIONS" />
<TreeEditor
schema={{ labelId: 'REGIONS' }}
value={tree}
onChange={locationID => {
const newRegions = {
...get(formSettings, 'regions', {}),
locationID,
};
setFormSettings({
...formSettings,
regions: newRegions,
});
}}
/>
<div
style={{
width: '100%',
display: 'flex',
justifyContent: 'flex-end',
padding: '0px 24px 24px 24px',
marginTop: 54,
}}
>
<Button
display="tertiary"
style={{ marginRight: 12 }}
loading={loading}
onClick={async () => {
onClose();
setFormSettings(getInitialFormState(siteSettings));
}}
>
<FormattedMessage id="CANCEL" />
</Button>
<Button
display="primary"
onClick={async () => {
const response = await putSiteSetting({
property: 'site.custom.regions',
data: formSettings.regions,
});
if (response?.status === 200) {
onClose();
}
}}
>
<FormattedMessage id="FINISH" />
</Button>
</div>
<div>
{putError ? (
<CustomAlert
style={{ margin: '20px 0 12px 0', maxWidth: 600 }}
severity="error"
description={putError}
/>
) : null}
</div>
</MainColumn>
);
}
93 changes: 51 additions & 42 deletions src/pages/fieldManagement/settings/DefaultFieldTable.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import DataDisplay from '../../../components/dataDisplays/DataDisplay';
import ActionIcon from '../../../components/ActionIcon';
import Text from '../../../components/Text';
import categoryTypes from '../../../constants/categoryTypes';
import { RegionEditor } from './defaultFieldComponents/Editors';
// import { RegionEditor } from './defaultFieldComponents/Editors';
import RelationshipEditor from './defaultFieldComponents/RelationshipEditor';
import SocialGroupsEditor from './defaultFieldComponents/SocialGroupsEditor';
import { cellRendererTypes } from '../../../components/dataDisplays/cellRenderers';
Expand All @@ -22,14 +22,13 @@ const configurableFields = [
backendPath: 'site.species',
labelId: 'SPECIES',
type: categoryTypes.sighting,
// Editor: SpeciesEditor,
},
{
id: 'region',
backendPath: 'site.custom.regions',
labelId: 'REGION',
type: categoryTypes.sighting,
Editor: RegionEditor,
// Editor: RegionEditor,
},
{
id: 'relationship',
Expand Down Expand Up @@ -84,14 +83,49 @@ export default function DefaultFieldTable({ siteSettings }) {
[siteSettings],
);

const onCloseEditor = () => {
clearError();
setEditField(null);
};

const onClose = () => {
setFormSettings(getInitialFormState(siteSettings));
onCloseEditor();
};

const onSubmit = async () => {
if (editField?.id === 'region') {
console.log('formSettings.regions', formSettings.regions);
const response = await putSiteSetting({
property: editField.backendPath,
data: formSettings.regions,
});
if (response?.status === 200) onCloseEditor();
}
if (editField?.id === 'relationship') {
const response = await putSiteSetting({
property: editField.backendPath,
data: formSettings.relationships,
});
if (response?.status === 200) onCloseEditor();
}
if (editField?.id === 'socialGroups') {
const response = await putSiteSetting({
property: editField.backendPath,
data: formSettings.socialGroups,
});
if (response?.status === 200) onCloseEditor();
}
};

const tableColumns = [
{
name: 'labelId',
label: intl.formatMessage({ id: 'LABEL' }),
options: {
customBodyRender: labelId => (
<FormattedMessage id={labelId} />
),
customBodyRender: (
labelId, //eslint-disable-line
) => <FormattedMessage id={labelId} />,
},
},
{
Expand All @@ -103,61 +137,36 @@ export default function DefaultFieldTable({ siteSettings }) {
name: 'actions',
label: intl.formatMessage({ id: 'ACTIONS' }),
options: {
customBodyRender: (_, field) => (
customBodyRender: (
_,
field, //eslint-disable-line
) => (
<ActionIcon
variant="edit"
onClick={() => {
if(field.id === 'species'){
if (field.id === 'species') {
history.push('/settings/fields/species');
}else {
} else if (field.id === 'region') {
history.push('/settings/fields/regions');
} else {
setEditField(field);
}
}
}}
/>
),
},
},
];

const onCloseEditor = () => {
clearError();
setEditField(null);
};

return (
<Grid item>
{editField && (
<editField.Editor
siteSettings={siteSettings}
formSettings={formSettings}
setFormSettings={setFormSettings}
onClose={() => {
setFormSettings(getInitialFormState(siteSettings));
onCloseEditor();
}}
onSubmit={async () => {
if (editField?.id === 'region') {
const response = await putSiteSetting({
property: editField.backendPath,
data: formSettings.regions,
});
if (response?.status === 200) onCloseEditor();
}
if (editField?.id === 'relationship') {
const response = await putSiteSetting({
property: editField.backendPath,
data: formSettings.relationships,
});
if (response?.status === 200) onCloseEditor();
}
if (editField?.id === 'socialGroups') {
const response = await putSiteSetting({
property: editField.backendPath,
data: formSettings.socialGroups,
});
if (response?.status === 200) onCloseEditor();
}
}}
onClose={onClose}
onSubmit={onSubmit}
>
{error ? (
<CustomAlert
Expand Down
Loading

0 comments on commit 146a436

Please sign in to comment.