Skip to content

Commit

Permalink
chore: Version 0.2.0 Published
Browse files Browse the repository at this point in the history
  • Loading branch information
Lorenzo Banks committed Jul 31, 2023
1 parent c839b07 commit e7e6b44
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 59 deletions.
28 changes: 19 additions & 9 deletions src/ComponentTest.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@

import { Card, CardContent } from "@mui/material";
import CRUDTable from "./components/CRUDTable";
import { MenuItem } from '@mui/base';
import { AccountTree, ShoppingBag } from '@mui/icons-material';

const ComponentTest = () => {
Expand All @@ -10,23 +7,36 @@ const ComponentTest = () => {
id:number;
firstname:string;
lastname:string;
age:number;
medicalCardId:string;
[index:string|number]:string|number;
}

const dataone:TableTypeOne[] = [
{id:0, firstname:"Tina", lastname:"Turner", medicalCardId:"122750"},
{id:1, firstname:"Ike", lastname:"Turner", medicalCardId:"122750"},
{id:2, firstname:"Manfred", lastname:"Lemmings", medicalCardId:"122750"},
{id:3, firstname:"Carson", lastname:"Daly", medicalCardId:"122750"},
{id:4, firstname:"Christopher", lastname:"Skunk", medicalCardId:"122750"},
{id:5, firstname:"Bantam", lastname:"Forester", medicalCardId:"122750"}
{id:0, firstname:"Tina", lastname:"Turner", age:22, medicalCardId:"122750"},
{id:1, firstname:"Ike", lastname:"Turner", age:54, medicalCardId:"122750"},
];

const crudActionObj = {
crudActionCreate:() => {
console.log("Create");
},
crudActionDelete:(id:string) => {
console.log("Delete"+id);
},
crudActionUpdate:(id:string) => {
console.log("Update"+id);
},
crudActionRead:(id:string) => {
console.log("Read"+id);
}
};

return (
<CRUDTable<TableTypeOne>
data={dataone}
index="id"
crudActions={crudActionObj}
additionalActions={[
{
menuItemLabel:"Additional Action 1",
Expand Down
133 changes: 83 additions & 50 deletions src/components/CRUDTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,18 @@ interface AdditionalActionType {
menuItemOnClick?:() => void;
}

interface CRUDActionsType {
crudActionCreate?:() => void;
crudActionUpdate?:(updateIndex:any) => void;
crudActionDelete?:(deleteIndex:any) => void;
crudActionRead?:(readIndex:any) => void;
}

interface CRUDTableProps<T extends DataItemType> {
data:T[];
index:keyof T & string;
additionalActions?:AdditionalActionType[];
crudActions?:CRUDActionsType;
}


Expand All @@ -69,8 +77,7 @@ const MoreActionsMenu = styled((props: MenuProps) => (
))(({ theme }) => ({
'& .MuiPaper-root': {
borderRadius: 6,
marginTop:theme.spacing(1),
minWidth:180,
marginTop:theme.spacing(1), minWidth:180,
color:
theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300],
boxShadow:
Expand All @@ -94,7 +101,7 @@ const MoreActionsMenu = styled((props: MenuProps) => (
}
}));

function CRUDTable<T extends DataItemType>({data, index, additionalActions}:CRUDTableProps<T>) {
function CRUDTable<T extends DataItemType>({data, index, crudActions, additionalActions}:CRUDTableProps<T>) {

const [moreActionsMenuAnchor, setMoreActionsMenuAnchor] = React.useState<null | HTMLElement>(null)
const moreActionsMenuOpen = Boolean(moreActionsMenuAnchor);
Expand All @@ -106,6 +113,8 @@ function CRUDTable<T extends DataItemType>({data, index, additionalActions}:CRUD
};




return (
<TableContainer component={Paper}>
<Table>
Expand Down Expand Up @@ -145,56 +154,80 @@ function CRUDTable<T extends DataItemType>({data, index, additionalActions}:CRUD
>
<Stack justifyContent={'flex-end'} direction={"row"}>

{/* -- Basic Crud Buttons + Additional Actions -- */}
<Tooltip title="View Details">
<IconButton color='info'>
<ViewList />
</IconButton>
</Tooltip>

<Tooltip title="Update Entry">
<IconButton color='secondary'>
<Update />
</IconButton>
</Tooltip>



{/* -- More Actions Dropdown Button & Menu -- */}

<Tooltip title='More Actions' >
<Button variant='text'
onClick={handleMoreActionsMenuClick}
startIcon={<MoreHoriz/>}
endIcon={<ArrowDropDown />}
color='primary'>
</Button>
</Tooltip>

<MoreActionsMenu

{crudActions ? (
<>
{/* -- Basic Crud Buttons + Additional Actions -- */}
<Tooltip title="View Details">
<IconButton onClick={() =>
{if (crudActions.crudActionRead){
crudActions.crudActionRead(item[index]);
}
}} color='info'>
<ViewList />
</IconButton>
</Tooltip>

<Tooltip title="Update Entry">
<IconButton onClick={() => {
if (crudActions.crudActionUpdate){
crudActions.crudActionUpdate(item[index])
}
}} color='secondary'>
<Update />
</IconButton>
</Tooltip>
</>
) : false}

{additionalActions ? (
<>
{/* -- More Actions Dropdown Button & Menu -- */}

<Tooltip title='More Actions' >
<Button variant='text'
onClick={handleMoreActionsMenuClick}
startIcon={<MoreHoriz/>}
endIcon={<ArrowDropDown />}
color='primary'>
</Button>
</Tooltip>


{/* -- More Actions Dropdown Button & Menu End -- */}


<MoreActionsMenu
anchorEl={moreActionsMenuAnchor}
open={moreActionsMenuOpen}
onClose={handleCloseMoreActionsMenu}
>
{additionalActions?.map(action => (
<MenuItem key={action.menuItemLabel as React.Key}
onClick={action.menuItemOnClick}>
{action.menuItemIcon}
{action.menuItemLabel}
</MenuItem>
))}
{/* -- Menu Items For Additonal Items -- */}

</MoreActionsMenu>

{/* -- More Actions Dropdown Button & Menu End -- */}


<Tooltip title="Delete Entry">
<IconButton color='error'>
<Delete />
</IconButton>
</Tooltip>
>
{additionalActions?.map(action => (
<MenuItem key={action.menuItemLabel as React.Key}
onClick={action.menuItemOnClick}>
{action.menuItemIcon}
{action.menuItemLabel}
</MenuItem>
))}
{/* -- Menu Items For Additonal Items -- */}

</MoreActionsMenu>
</>
) : false}

{crudActions ? (
<>
<Tooltip title="Delete Entry">
<IconButton onClick={() => {
if (crudActions.crudActionDelete) {
crudActions.crudActionDelete(item[index])
}
}} color='error'>
<Delete />
</IconButton>
</Tooltip>
</>
) : false}

</Stack>
</TableCell>
Expand Down

0 comments on commit e7e6b44

Please sign in to comment.