Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/issue 105 check box default #109

Merged
merged 26 commits into from
Aug 12, 2024
Merged
Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
aeb3bbb
Add comments for future reference
SimerdeepSinghGrewal Jun 26, 2024
c4699bb
Issue 75: create tour list component
SimerdeepSinghGrewal Jul 1, 2024
67117bb
Issue 75: create 7 total components for product tour page
SimerdeepSinghGrewal Jul 1, 2024
6df9ad7
Issue 75: create producttour page and linked to leftmenu
SimerdeepSinghGrewal Jul 1, 2024
1093d7d
changing structure
swoopertr Jul 2, 2024
f9de127
Issue 75: no major change, just commit before pullingupdated code
SimerdeepSinghGrewal Jul 11, 2024
364c49c
Merge branch 'feature/74-Implement-and-integrate-Checkbox-component' …
SimerdeepSinghGrewal Jul 11, 2024
015fae3
Issue 75: create generalized ListItem component and styles
SimerdeepSinghGrewal Jul 21, 2024
3867678
Issue 75: edit code according to pull conflict
SimerdeepSinghGrewal Jul 21, 2024
2174705
Issue 75: resolve errors in pull
SimerdeepSinghGrewal Jul 21, 2024
d1c8b4d
Issue 105: add default props
SimerdeepSinghGrewal Jul 21, 2024
f8488ce
Issue 105: add default parameters and styles in sx to override mui st…
SimerdeepSinghGrewal Jul 22, 2024
656609a
Issue 105: remove usage check code
SimerdeepSinghGrewal Jul 22, 2024
94f9e68
Issue 105: combined sx style into a function
SimerdeepSinghGrewal Jul 24, 2024
3060668
Merge branch 'develop' into feature/Issue-105-CheckBox-default
SimerdeepSinghGrewal Jul 24, 2024
a366568
Issue 105: remove issue 75 components
SimerdeepSinghGrewal Jul 25, 2024
753e32a
Merge branch 'feature/Issue-105-CheckBox-default' of https://github.c…
SimerdeepSinghGrewal Jul 25, 2024
f166203
Issue 105: remove import of another branch
SimerdeepSinghGrewal Jul 27, 2024
5b69040
Issue 105: remove code of other branch
SimerdeepSinghGrewal Jul 27, 2024
6257ed1
Issue 105: remove react import from confirmationpopup
SimerdeepSinghGrewal Jul 29, 2024
1f33fc6
Update ConfirmationPopup.jsx
SimerdeepSinghGrewal Aug 9, 2024
272671f
Delete frontend/src/components/Checkbox/Checkbox.jsx
SimerdeepSinghGrewal Aug 9, 2024
e6baa93
Merge branch 'develop' of https://github.com/bluewave-labs/bluewave-o…
SimerdeepSinghGrewal Aug 9, 2024
a819920
remove ConfirmationPopup, merge package-lock from develop branch
SimerdeepSinghGrewal Aug 9, 2024
34ca6b6
Merge branch 'feature/Issue-105-CheckBox-default' of https://github.c…
SimerdeepSinghGrewal Aug 9, 2024
d8e7509
Issue 105: delete confirmationpopup and restored checkbox
SimerdeepSinghGrewal Aug 9, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21,731 changes: 12,903 additions & 8,828 deletions frontend/package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions frontend/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import SetNewPasswordPage from "./scenes/login/SetNewPassword";
import Private from "./components/Private";
import { useAuth } from "./services/authProvider";
import ProgressStepsMain from "./scenes/progressSteps/ProgressStepsMain";
import ProductTour from "./scenes/productTour/ProductTour";
SimerdeepSinghGrewal marked this conversation as resolved.
Show resolved Hide resolved

function App() {
const { isLoggedIn } = useAuth();
Expand All @@ -23,6 +24,7 @@ function App() {
<Route path="/check-email" element={<CheckYourEmailPage />} />
<Route path="/set-new-password" element={<SetNewPasswordPage />} />
<Route path="/progress-steps" element={<ProgressStepsMain />} />
<Route path="/tours" element={<ProductTour />} />
SimerdeepSinghGrewal marked this conversation as resolved.
Show resolved Hide resolved
</Routes>
</>
);
Expand Down
64 changes: 47 additions & 17 deletions frontend/src/components/Checkbox/Checkbox.jsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,46 @@
import React, { useState } from 'react';
import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import Box from '@mui/material/Box';
import './CheckboxStyles.css';

// label: to specify the text label associated with the checkbox.
// checked: to determine whether the checkbox is initially checked.
// onChange: to handle the change event when the checkbox is clicked.
// variant: to define the checkbox style (e.g., primary, secondary).
// className: to apply additional CSS classes.
// style: to apply inline styles.

const CustomCheckbox = ({
label='',
checked=false,
onChange=() => {},
variant='primary',
className='',
style={},
size='medium',
indeterminate =false,
childrenCheckboxes=[],
label = '',
checked = false,
onChange = () => {},
variant = 'primary',
className = '',
style = {},
size = 'medium',
indeterminate = false,
childrenCheckboxes = []
}) => {
const [childChecked, setChildChecked] = useState(childrenCheckboxes.map(() => false));
const [isChecked, setIsChecked] = useState(checked);

SimerdeepSinghGrewal marked this conversation as resolved.
Show resolved Hide resolved
const handleParentChange = (event) => {
const handleParentChange = useCallback((event) => {
const newChecked = event.target.checked;
setChildChecked(childrenCheckboxes.map(() => newChecked));
onChange(event);
};
}, [childrenCheckboxes, onChange]);

const handleChildChange = (index) => (event) => {
const handleChildChange = useCallback((index) => (event) => {
const newChecked = [...childChecked];
newChecked[index] = event.target.checked;
setChildChecked(newChecked);
onChange(event);
}, [childChecked, onChange]);

const handleChange = (event) => {
setIsChecked(event.target.checked);
};

const isIndeterminate = childChecked.some((child) => child !== childChecked[0]);
Expand All @@ -37,10 +50,19 @@ const CustomCheckbox = ({
<FormControlLabel
control={
<Checkbox
checked={childrenCheckboxes.length > 0 ? childChecked.every(Boolean) : checked}
onChange={childrenCheckboxes.length > 0 ? handleParentChange : onChange}
checked={childrenCheckboxes.length > 0 ? childChecked.every(Boolean) : isChecked}
onChange={childrenCheckboxes.length > 0 ? handleParentChange : handleChange}
indeterminate={indeterminate || isIndeterminate}
size={size}
sx={{
SimerdeepSinghGrewal marked this conversation as resolved.
Show resolved Hide resolved
color: variant === 'primary' ? 'var(--main-purple)' : '#808080E5',
'&.Mui-checked': {
color: variant === 'primary' ? 'var(--main-purple)' : '#808080E5',
},
'&.MuiCheckbox-indeterminate': {
color: variant === 'primary' ? 'var(--main-purple)' : '#808080E5',
},
}}
className={`checkbox ${variant} ${className}`}
/>
}
Expand All @@ -57,7 +79,15 @@ const CustomCheckbox = ({
checked={childChecked[index]}
onChange={handleChildChange(index)}
size={size}
className={`checkbox ${variant}`}
sx={{
SimerdeepSinghGrewal marked this conversation as resolved.
Show resolved Hide resolved
color: variant === 'primary' ? 'var(--main-purple)' : '#808080E5',
'&.Mui-checked': {
color: variant === 'primary' ? 'var(--main-purple)' : '#808080E5',
},
'&.MuiCheckbox-indeterminate': {
color: variant === 'primary' ? 'var(--main-purple)' : '#808080E5',
},
}}
/>
}
label={childLabel}
Expand All @@ -81,4 +111,4 @@ CustomCheckbox.propTypes = {
childrenCheckboxes: PropTypes.arrayOf(PropTypes.string),
};

export default CustomCheckbox;
export default CustomCheckbox;
5 changes: 4 additions & 1 deletion frontend/src/components/Checkbox/CheckboxStyles.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
align-items: center;
cursor: pointer;
}

.checkbox .MuiCheckbox-root {
border: none;
outline: none;
}
.checkbox-label {
font-size: 16px;
}
Expand Down
26 changes: 26 additions & 0 deletions frontend/src/components/ConfirmationPopup/ConfirmationPopup.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';
SimerdeepSinghGrewal marked this conversation as resolved.
Show resolved Hide resolved
import PropTypes from 'prop-types';
SimerdeepSinghGrewal marked this conversation as resolved.
Show resolved Hide resolved
import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material';

const ConfirmationPopup = ({ open, onConfirm, onCancel }) => {
return (
<Dialog open={open} onClose={onCancel}>
<DialogTitle>Confirm Action</DialogTitle>
<DialogContent>
<DialogContentText>Are you sure you want to perform this action?</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={onCancel}>Cancel</Button>
<Button onClick={onConfirm} color="primary">Confirm</Button>
</DialogActions>
</Dialog>
);
};

ConfirmationPopup.propTypes = {
open: PropTypes.bool.isRequired,
onConfirm: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
};

export default ConfirmationPopup;
13 changes: 13 additions & 0 deletions frontend/src/components/ContentArea/ContentArea.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@

import React from 'react';
import PropTypes from 'prop-types';

const ContentArea = ({ children }) => {
return <div className="content-area">{children}</div>;
};

ContentArea.propTypes = {
children: PropTypes.node.isRequired,
};

export default ContentArea;
12 changes: 12 additions & 0 deletions frontend/src/components/ContentHeader/ContentHeader.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';

const ContentHeader = ({ title }) => {
return <h2 className="content-header">{title}</h2>;
};

ContentHeader.propTypes = {
title: PropTypes.string.isRequired,
};

export default ContentHeader;
21 changes: 21 additions & 0 deletions frontend/src/components/InfoTooltip/InfoTooltip.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Tooltip, IconButton } from '@mui/material';
import InfoIcon from '@mui/icons-material/Info';

const InfoTooltip = ({ text, title }) => {
return (
<Tooltip title={text}>
<IconButton>
<InfoIcon />
</IconButton>
</Tooltip>
);
};

InfoTooltip.propTypes = {
text: PropTypes.string.isRequired,
title: PropTypes.string,
};

export default InfoTooltip;
5 changes: 4 additions & 1 deletion frontend/src/components/LeftMenu/LeftMenu.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ function LeftMenu() {
const handleHomeClick = () => {
navigate('/');
};
const handleToursClick = () => {
navigate(-1);
};

return (
<div className="left-menu">
Expand All @@ -31,7 +34,7 @@ function LeftMenu() {

<ListItemText primary="SERVE A CONTENT" className="title"/>

<ListItemButton className="menu-item">
<ListItemButton className="menu-item" onClick={handleToursClick}>
<ListItemIcon>
<DirectionsBusFilledOutlinedIcon />
</ListItemIcon>
Expand Down
28 changes: 28 additions & 0 deletions frontend/src/components/List/List.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';
import ListItem from './ListItem/ListItem';

const List = ({ items, onSelectItem }) => {
return (
<div>
{items.map(item => (
<ListItem
key={item.idItem}
title={item.title}
text={item.text}
id={item.idItem}
onClick={() => onSelectItem(item.idItem)}
onDelete={item.onDelete}
onEdit={item.onEdit}
/>
))}
</div>
);
};

List.propTypes = {
items: PropTypes.arrayOf(PropTypes.object).isRequired,
onSelectItem: PropTypes.func.isRequired,
};

export default List;
58 changes: 58 additions & 0 deletions frontend/src/components/List/ListItem/ListItem.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
.list-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 758px;
height: auto;
padding: 10px;
margin: 10px 0;
border: 1px solid transparent;
border-radius: 10px;
background-color: #FAFAFA;
cursor: pointer;
}

.list-item:hover,
.list-item:focus {
border: 1px solid #7F56D9;
}

.list-item-info {
display: flex;
flex-direction: column;
}

.list-item-header {
display: flex;
align-items: center;
}

.list-item-icon {
width: 16px;
height: 16px;
margin-right: 8px;
}

.list-item-info h4 {
margin: 0;
color: #344054;
}

.list-item-info p {
margin: 0;
color: #667085;
}

.item-id {
color: #667085;
}

.list-item-actions {
display: flex;
align-items: center;
}

.list-item-actions .MuiIconButton-root {
color: #344054;
}

42 changes: 42 additions & 0 deletions frontend/src/components/List/ListItem/ListItem.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react';
import PropTypes from 'prop-types';
import { IconButton } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import SettingsIcon from '@mui/icons-material/Settings';
import './ListItem.css';

const ListItem = ({ title, text, id, onClick, onDelete, onEdit }) => {
return (
<div className="list-item" onClick={onClick}>
<div className="list-item-info">
<div className="list-item-header">
<svg width="16" height="16" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg" className="list-item-icon">
<path d="M0 3C0 1.34315 1.34315 0 3 0V0C4.65685 0 6 1.34315 6 3V3C6 4.65685 4.65685 6 3 6V6C1.34315 6 0 4.65685 0 3V3Z" fill="#7F56D9"/>
</svg>
<h4>{title}</h4>
</div>
{text && <p>{text}</p>}
{id && <p className="item-id">ID: {id}</p>}
</div>
<div className="list-item-actions">
<IconButton onClick={onEdit}>
<SettingsIcon />
</IconButton>
<IconButton onClick={onDelete}>
<DeleteIcon />
</IconButton>
</div>
</div>
);
};

ListItem.propTypes = {
title: PropTypes.string.isRequired,
text: PropTypes.string,
id: PropTypes.string,
onClick: PropTypes.func.isRequired,
onDelete: PropTypes.func.isRequired,
onEdit: PropTypes.func.isRequired,
};

export default ListItem;
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';

const TourDescriptionText = ({ description }) => {
return <p className="tour-description-text">{description}</p>;
};

TourDescriptionText.propTypes = {
description: PropTypes.string.isRequired,
};

export default TourDescriptionText;
2 changes: 1 addition & 1 deletion frontend/src/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { BrowserRouter as Router } from "react-router-dom";
import { BrowserRouter as Router} from "react-router-dom";
import theme from "./assets/theme.js";
import { ThemeProvider } from "@mui/material";
import { AuthProvider } from "./services/authProvider.jsx";
Expand Down
4 changes: 1 addition & 3 deletions frontend/src/scenes/home/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ const Home = () => {
return (
<div className="app">
<div className="content">
<HomePageTemplate>
<Dashboard username={'Gorkem'}/>
</HomePageTemplate>
<Dashboard username={'Gorkem'} />
</div>
</div>
);
Expand Down
Loading