Commit b0c183e2 authored by Elisabeth Reuhl's avatar Elisabeth Reuhl
Browse files

Move list of catalog IDs and labels out of input; rework how labels of checked...

Move list of catalog IDs and labels out of input; rework how labels of checked Arachne entity types and checked catalogs are accessed by CollapsedFilters
parent f90a6f1d
......@@ -23,10 +23,7 @@ const initialInput = {
regionId: 0,
regionTitle: null,
searchStr: "brosche",
catalogIdsList: [{"catalogLabel": "All SPP 2143 Arachne data", "catalogId": 123},
{"catalogLabel": "AAArC - Fundplätze", "catalogId": 942},],
checkedCatalogIds: [],
checkedCatalogLabels: [],
catalogsCheckedIds: [],
mode: "objects",
sitesMode: "",
showSearchResults: true,
......@@ -45,7 +42,6 @@ const initialInput = {
areaB: 0,
bigTileArea: "",
arachneTypesCheckedIds: ["Bilder", "Einzelobjekte", "Topographien"],
arachneTypesCheckedLabels: [],
};
......@@ -116,7 +112,7 @@ export const AppContent = () => {
useQuery(GET_OBJECTS, input.mode === "objects"
? {
variables: {
searchTerm: debouncedSearchStr, catalogIds: input.checkedCatalogIds,
searchTerm: debouncedSearchStr, catalogIds: input.catalogsCheckedIds,
// only send coordinates if entered values have valid format (floats with at least one decimal place)
bbox: (/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner1)) && (/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner2))
? input.boundingBoxCorner1.concat(input.boundingBoxCorner2)
......@@ -172,7 +168,7 @@ export const AppContent = () => {
const [regions, setRegions] = useState([]);
fetch("https://gazetteer.dainst.org/search.json?q=parent%3A2042601%20OR%20parent%3A2293101&fq=&limit=1000&type=&pretty=true")
/*fetch("https://gazetteer.dainst.org/search.json?q=parent%3A2042601%20OR%20parent%3A2293101&fq=&limit=1000&type=&pretty=true")
.then(response => response.json())
.then((jsonData) => {
let tempRegions = jsonData.result.map(result => result && {title: result.prefName.title, id: result.gazId})
......@@ -186,7 +182,7 @@ export const AppContent = () => {
})
.catch((error) => {
console.error(error)
});
});*/
//todo: change out translation keys for English terms, e.g. "Images" instead of "arachneTypeBilder" – because these
// keys will be shown as default if no translation exists
......@@ -213,6 +209,11 @@ export const AppContent = () => {
{"label": t("arachneType3D-Modelle"), "id": "dreiDModelle"}
];
const catalogs = [
{"label": "All SPP 2143 Arachne data", "id": 123},
{"label": "AAArC - Fundplätze", "id": 942}
]
const handleRelatedObjects = (id) => {
dispatch({type: "UPDATE_INPUT", payload: {field: "objectId", value: id ? Number(id) : input.objectId}});
......@@ -236,14 +237,14 @@ export const AppContent = () => {
}, [dataContext, input.showRelatedObjects, input.mode]);
useEffect( () => {
if (dataObjects && input.mode === "objects" && input.showSearchResults && (debouncedSearchStr || input.checkedCatalogIds.length!==0 || input.chronOntologyTerm
if (dataObjects && input.mode === "objects" && input.showSearchResults && (debouncedSearchStr || input.catalogsCheckedIds.length!==0 || input.chronOntologyTerm
||(input.boundingBoxCorner1.length!==0 && input.boundingBoxCorner2.length!==0))) {
setMapDataObjects(dataObjects);
console.log("rerender dataObjects!");
console.log("rerender dataObjects --> dataObjects: ", dataObjects);
console.log("rerender dataObjects --> input:", input);
}
}, [dataObjects, input.showSearchResults, debouncedSearchStr, input.checkedCatalogIds, input.chronOntologyTerm, input.boundingBoxCorner1, input.boundingBoxCorner2, input.mode, input.arachneTypesCheckedIds]);
}, [dataObjects, input.showSearchResults, debouncedSearchStr, input.catalogsCheckedIds, input.chronOntologyTerm, input.boundingBoxCorner1, input.boundingBoxCorner2, input.mode, input.arachneTypesCheckedIds]);
useEffect( () => {
if (dataArchaeoSites && input.showArchaeoSites && input.mode === "archaeoSites" && input.sitesMode!=="region" && (debouncedSearchStr || (input.boundingBoxCorner1.length!==0 && input.boundingBoxCorner2.length!==0))) {
......@@ -270,7 +271,7 @@ export const AppContent = () => {
// this mode is selected
input.showSearchResults
// at least one relevant input not empty
&& (debouncedSearchStr || input.checkedCatalogIds.length!==0 || input.chronOntologyTerm
&& (debouncedSearchStr || input.catalogsCheckedIds.length!==0 || input.chronOntologyTerm
|| (input.boundingBoxCorner1.length!==0 && input.boundingBoxCorner2.length!==0))
// query result not empty
&& mapDataObjects && mapDataObjects.entitiesMultiFilter;
......@@ -442,6 +443,7 @@ export const AppContent = () => {
<>
<PageHeader
arachneTypes={arachneTypes}
catalogs={catalogs}
periods={periods}
reducer={[input, dispatch]}
regions={regions}
......
......@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
export const CollapsedFilters = (props) => {
const { input } = props;
const { arachneTypes, catalogs, input } = props;
const { t, i18n } = useTranslation();
......@@ -20,8 +20,10 @@ export const CollapsedFilters = (props) => {
/>
{/*Chip for entity types*/}
{input.arachneTypesCheckedLabels.length !== 0
&& <Chip variant="outlined" disabled={input.mode === "archaeoSites"} label={`Entity types: ${input.arachneTypesCheckedLabels}`}/>}
{input.arachneTypesCheckedIds.length !== 0
&& <Chip variant="outlined" disabled={input.mode === "archaeoSites"} label={`Entity types: ${
arachneTypes.filter((type) => input.arachneTypesCheckedIds.includes(type.id)).map(type => type.label).join(", ")
}`}/>}
{/*Chip for for string query*/}
{input.searchStr !== ""
......@@ -43,8 +45,10 @@ export const CollapsedFilters = (props) => {
label={`Bounding box: [${input.boundingBoxCorner1}], [${input.boundingBoxCorner2}]`}/>}
{/*Chip for filter by catalogs*/}
{input.checkedCatalogLabels.length !== 0
&& <Chip variant="outlined" disabled={input.mode === "archaeoSites"} label={`Catalog: ${input.checkedCatalogLabels}`}/>}
{input.catalogsCheckedIds.length !== 0
&& <Chip variant="outlined" disabled={input.mode === "archaeoSites"} label={`Catalog: ${
catalogs.filter((catalog) => input.catalogsCheckedIds.includes(catalog.id)).map(catalog => catalog.label).join(", ")
}`}/>}
</>
);
};
......@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
export const Filters = (props) => {
const [input, dispatch] = props.reducer;
const { arachneTypes, periods, regions } = props;
const { arachneTypes, catalogs, periods, regions } = props;
const { t, i18n } = useTranslation();
......@@ -57,7 +57,7 @@ export const Filters = (props) => {
<FormGroup>
<FormLabel component="legend" disabled={input.showArchaeoSites}>Filter by Arachne entity type</FormLabel>
{arachneTypes && arachneTypes.map(type => {
return (type.id
return (type && type.id
&& <FormControlLabel
key={type.id}
control={
......@@ -70,15 +70,6 @@ export const Filters = (props) => {
: "CHECK_ITEM",
payload: {field: "arachneTypesCheckedIds", toggledItem: type.id}
});
dispatch({
type: "UPDATE_INPUT",
payload: {
field: "arachneTypesCheckedLabels",
value: input.arachneTypesCheckedLabels.includes(type.label)
? [...input.arachneTypesCheckedLabels.filter(label => label !== type.label)]
: [...input.arachneTypesCheckedLabels, type.label]
}
})
}}
name={String(type.id)}
key={type.id}
......@@ -259,36 +250,27 @@ export const Filters = (props) => {
!input.showArchaeoSites && <Grid item>
<FormGroup>
<FormLabel component="legend" disabled={input.showArchaeoSites}>Filter by catalogs</FormLabel>
{input.catalogIdsList && input.catalogIdsList.map(project => {
return (project
{catalogs && catalogs.map(catalog => {
return (catalog
&& <FormControlLabel
key={project.catalogId}
key={catalog.id}
control={
<Checkbox
checked={input.checkedCatalogIds.includes(project.catalogId)}
checked={input.catalogsCheckedIds.includes(catalog.id)}
onChange={() => {
dispatch({
type: input.checkedCatalogIds.includes(project.catalogId)
type: input.catalogsCheckedIds.includes(catalog.id)
? "UNCHECK_ITEM"
: "CHECK_ITEM",
payload: {field: "checkedCatalogIds", toggledItem: project.catalogId}
payload: {field: "catalogsCheckedIds", toggledItem: catalog.id}
});
dispatch({
type: "UPDATE_INPUT",
payload: {
field: "checkedCatalogLabels",
value: input.checkedCatalogLabels.includes(project.catalogLabel)
? [...input.checkedCatalogLabels.filter(catalogLabel => catalogLabel !== project.catalogLabel)]
: [...input.checkedCatalogLabels, project.catalogLabel]
}
})
}}
name={String(project.catalogId)}
key={project.catalogId}
name={String(catalog.id)}
key={catalog.id}
disabled={input.showArchaeoSites}
/>
}
label={project.catalogLabel}
label={catalog.label}
/>
)
})}
......
......@@ -15,7 +15,7 @@ import SearchIcon from '@material-ui/icons/Search';
export const PageHeader = (props) => {
const [input, dispatch] = props.reducer;
const {arachneTypes, periods, regions} = props;
const {arachneTypes, catalogs, periods, regions} = props;
const { t, i18n } = useTranslation();
......@@ -90,6 +90,8 @@ export const PageHeader = (props) => {
<SearchIcon/> Filters <ExpandMoreIcon/>
</Button>
<CollapsedFilters
arachneTypes={arachneTypes}
catalogs={catalogs}
input={input}
/>
</Grid>
......@@ -147,6 +149,7 @@ export const PageHeader = (props) => {
</Button>
<Filters
arachneTypes={arachneTypes}
catalogs={catalogs}
periods={periods}
reducer={[input, dispatch]}
regions={regions}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment