sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move in progress apps temporarily

Browse source
This commit is contained in:
Darren Clarke 2023-03-07 14:09:49 +00:00
parent ba04aa108c
commit 6eaaf8e9be
360 changed files with 6171 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

249
fix/leafcutter/components/QueryBuilder.tsx Normal file
View file

@ -0,0 +1,249 @@
import { FC, useState } from "react";
import {
Box,
Grid,
Dialog,
DialogActions,
Button,
DialogContent,
} from "@mui/material";
import {
PrivacyTip as PrivacyTipIcon,
DateRange as DateRangeIcon,
PhoneIphone as PhoneIphoneIcon,
Map as MapIcon,
Group as GroupIcon,
} from "@mui/icons-material";
import { useTranslate } from "react-polyglot";
import taxonomy from "config/taxonomy.json";
import { QueryBuilderSection } from "./QueryBuilderSection";
import { QueryListSelector } from "./QueryListSelector";
import { QueryDateRangeSelector } from "./QueryDateRangeSelector";
import { useAppContext } from "./AppProvider";
import { Tooltip } from "./Tooltip";
interface QueryBuilderProps {}
export const QueryBuilder: FC<QueryBuilderProps> = () => {
const t = useTranslate();
const [dialogOpen, setDialogOpen] = useState(false);
const {
typography: { p },
colors: { leafcutterElectricBlue, mediumGray, almostBlack },
} = useAppContext();
const openAdvancedOptions = () => {
setDialogOpen(false);
window.open(`/app/visualize`, "_ blank");
};
return (
<Box sx={{ mb: 6 }}>
<Grid container direction="row" spacing={2}>
<Tooltip
title={t("categoriesCardTitle")}
description={t("categoriesCardDescription")}
tooltipID="categories"
placement="left"
previousURL="/create?tooltip=searchCreate"
nextURL="/create?tooltip=dateRange"
>
<Box sx={{ width: 0 }} />
</Tooltip>
<QueryBuilderSection
width={4}
name={t("incidentType")}
keyName="incidentType"
Image={PrivacyTipIcon}
showQueryType
tooltipTitle={t("incidentTypeCardTitle")}
tooltipDescription={t("incidentTypeCardDescription")}
>
<Grid container>
<QueryListSelector
title={t("type")}
keyName="incidentType"
values={taxonomy.incidentType}
width={12}
/>
</Grid>
</QueryBuilderSection>
<Tooltip
title={t("dateRangeCardTitle")}
description={t("dateRangeCardDescription")}
tooltipID="dateRange"
placement="top"
previousURL="/create?tooltip=categories"
nextURL="/create?tooltip=subcategories"
>
<Box sx={{ width: 0 }} />
</Tooltip>
<QueryBuilderSection
width={4}
name={t("date")}
keyName="date"
Image={DateRangeIcon}
tooltipTitle={t("dateRangeCardTitle")}
tooltipDescription={t("dateRangeCardDescription")}
>
<QueryDateRangeSelector />
</QueryBuilderSection>
<QueryBuilderSection
width={4}
name={t("targetedGroup")}
keyName="targetedGroup"
Image={GroupIcon}
showQueryType
tooltipTitle={t("targetedGroupCardTitle")}
tooltipDescription={t("targetedGroupCardDescription")}
>
<Grid container>
<QueryListSelector
title={t("group")}
keyName="targetedGroup"
values={taxonomy.targetedGroup}
width={12}
/>
</Grid>
</QueryBuilderSection>
<Tooltip
title={t("subcategoriesCardTitle")}
description={t("subcategoriesCardDescription")}
tooltipID="subcategories"
placement="top"
previousURL="/create?tooltip=dateRange"
nextURL="/create?tooltip=advancedOptions"
>
<Box sx={{ width: 0 }} />
</Tooltip>
<QueryBuilderSection
width={12}
name={t("impactedTechnology")}
keyName="impactedTechnology"
Image={PhoneIphoneIcon}
showQueryType
tooltipTitle={t("impactedTechnologyCardTitle")}
tooltipDescription={t("impactedTechnologyCardDescription")}
>
<Grid container spacing={2}>
<QueryListSelector
title={t("platform")}
keyName="platform"
values={taxonomy.platform}
width={3}
/>
<QueryListSelector
title={t("device")}
keyName="device"
values={taxonomy.device}
width={3}
/>
<QueryListSelector
title={t("service")}
keyName="service"
values={taxonomy.service}
width={3}
/>
<QueryListSelector
title={t("maker")}
keyName="maker"
values={taxonomy.maker}
width={3}
/>
</Grid>
</QueryBuilderSection>
<QueryBuilderSection
width={12}
name={t("region")}
keyName="region"
Image={MapIcon}
showQueryType
tooltipTitle={t("regionCardTitle")}
tooltipDescription={t("regionCardDescription")}
>
<Grid container spacing={2}>
<QueryListSelector
title={t("continent")}
keyName="continent"
values={taxonomy.continent}
width={4}
/>
<QueryListSelector
title={t("country")}
keyName="country"
values={taxonomy.country}
width={4}
/>
<QueryListSelector
title={t("subregion")}
keyName="subregion"
values={taxonomy.subregion}
width={4}
/>
</Grid>
</QueryBuilderSection>
<Grid item xs={12}>
<Tooltip
title={t("advancedOptionsCardTitle")}
description={t("advancedOptionsCardDescription")}
tooltipID="advancedOptions"
placement="top"
previousURL="/create?tooltip=subcategories"
nextURL="/create?tooltip=queryResults"
>
<Button
sx={{
...p,
color: leafcutterElectricBlue,
textDecoration: "underline",
textTransform: "none",
fontWeight: "bold",
}}
onClick={() => setDialogOpen(true)}
>
{`+ ${t("advancedOptions")}`}
</Button>
</Tooltip>
</Grid>
</Grid>
<Dialog open={dialogOpen}>
<DialogContent sx={{ maxWidth: 350 }}>
{t("fullInterfaceWillOpen")}
</DialogContent>
<DialogActions>
<Grid
container
direction="row"
justifyContent="space-between"
wrap="nowrap"
sx={{ pl: 2, pr: 2, pt: 1, pb: 1 }}
>
<Grid item>
<Button
sx={{
backgroundColor: mediumGray,
color: almostBlack,
}}
variant="contained"
size="small"
onClick={() => setDialogOpen(false)}
>
{t("cancel")}
</Button>
</Grid>
<Grid item>
<Button
sx={{ backgroundColor: leafcutterElectricBlue }}
variant="contained"
size="small"
onClick={openAdvancedOptions}
>
{t("open")}
</Button>
</Grid>
</Grid>
</DialogActions>
</Dialog>
</Box>
);
};