QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 05:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

SPRINT-12: added widgets to tables

Browse Source
This commit is contained in:
Tim Chamberlain
2022-09-23 15:51:59 -05:00
parent 01916286b0
commit 67e65de66b
8 changed files with 288 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/qqq/pages/dashboards/Widgets/TableCard.tsx
View File

@ -37,7 +37,10 @@ interface Props
{
title: string;
data: TableDataInput;
dropdownOptions?: string[];
dropdownOptions?: {
id: string,
name: string
}[];
dropdownOnChange?: (selectedValue: string, widgetIndex: number) => void;
widgetIndex?: number;
@ -49,7 +52,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
const openArrowIcon = "arrow_drop_down";
const closeArrowIcon = "arrow_drop_up";
const [dropdown, setDropdown] = useState<string | null>(null);
const [dropdownValue, setDropdownValue] = useState<string>("");
const [dropdownValue, setDropdownValue] = useState("");
const [dropdownLabel, setDropdownLabel] = useState<string>("");
const [dropdownIcon, setDropdownIcon] = useState<string>(openArrowIcon);
const openDropdown = ({currentTarget}: any) =>
@ -79,8 +83,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
disableAutoFocusItem
>
{
dropdownOptions.map((option) =>
<MenuItem key={option} onClick={close}>{option}</MenuItem>
dropdownOptions.map((optionMap, index: number) =>
<MenuItem id={optionMap["id"]} key={index} onClick={close}>{optionMap["name"]}</MenuItem>
)
}
</Menu>
@ -93,7 +97,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
console.log(dropdownOptions);
if (dropdownOptions)
{
setDropdownValue(dropdownOptions[0]);
setDropdownValue(dropdownOptions[0]["id"]);
setDropdownLabel(dropdownOptions[0]["name"]);
}
}, [dropdownOptions]);
@ -103,7 +108,7 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
<Grid container>
<Grid item xs={7}>
<MDBox pt={3} px={3}>
<MDTypography variant="h6" fontWeight="medium">
<MDTypography variant="h5" fontWeight="medium">
{title}
</MDTypography>
</MDBox>
@ -111,6 +116,13 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
<Grid item xs={5}>
{dropdownOptions && (
<MDBox p={2} width="100%" textAlign="right" lineHeight={1}>
<MDTypography
variant="caption"
color="secondary"
fontWeight="regular"
>
<strong>Billing Period: </strong>
</MDTypography>
<MDTypography
variant="caption"
color="secondary"
@ -118,7 +130,7 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
sx={{cursor: "pointer"}}
onClick={openDropdown}
>
{dropdownValue}
{dropdownLabel}
</MDTypography>
{renderMenu(dropdown, openDropdown, closeDropdown, dropdownIcon)}
</MDBox>