Skip to content

Commit

Permalink
Merge pull request #33 from CMP26Projects/some-components
Browse files Browse the repository at this point in the history
  • Loading branch information
AhmedHamed3699 authored Dec 26, 2023
2 parents 01a8baf + 85f63c0 commit ae4f49b
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 4 deletions.
6 changes: 6 additions & 0 deletions client/src/assets/styles/components/Button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@
font-weight: 500;
}

&:disabled,
&[disabled] {
cursor: not-allowed;
opacity: 0.7;
}

&--primary {
background-color: var(--primary-100);
color: var(--grey-900);
Expand Down
3 changes: 2 additions & 1 deletion client/src/assets/styles/components/Inputs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"] {
input[type="time"],
select {
width: 100%;
outline: none;
border-radius: 4px;
Expand Down
7 changes: 4 additions & 3 deletions client/src/components/common/Button.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ import { PropTypes } from "prop-types";
import "../../assets/styles/components/Button.scss";

export default function Button(props) {
const { children, className, linkTo, ...rest } = props;
const { children, className, linkTo, disabled, ...rest } = props;

return (
<>
{linkTo ? (
{linkTo && !disabled ? (
<Link to={linkTo} className={`Button ${className}`} {...rest}>
{children}
</Link>
) : (
<button className={`Button ${className}`} {...rest}>
<button className={`Button ${className}`} disabled={disabled} {...rest}>
{children}
</button>
)}
Expand All @@ -26,4 +26,5 @@ Button.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
linkTo: PropTypes.string,
disabled: PropTypes.bool,
};
43 changes: 43 additions & 0 deletions client/src/components/common/CustomCheckbox.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import PropTypes from "prop-types";

export default function CustomCheckbox(props) {
const { labels, values, checkedValues, onChange, name, required, className } =
props;
return (
<div className={"input input--checkbox" + " " + className}>
{labels.map((label, index) => (
<label key={index}>
<input
type="checkbox"
name={name}
value={values[index]}
onChange={onChange}
required={required}
checked={checkedValues.includes(values[index])}
style={{
marginBlock: "0.5rem",
marginInline: "0.5rem",
}}
/>
<span
style={{
userSelect: "none",
}}
>
{label}
</span>
</label>
))}
</div>
);
}

CustomCheckbox.propTypes = {
labels: PropTypes.array.isRequired,
values: PropTypes.array.isRequired,
checkedValues: PropTypes.array,
onChange: PropTypes.func,
name: PropTypes.string,
required: PropTypes.bool,
className: PropTypes.string,
};
63 changes: 63 additions & 0 deletions client/src/components/common/CustomSelect.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import PropTypes from "prop-types";

//----------------------------------------------------------------
// Usage:
// <CustomSelect
// name={"select"}
// label={"اختر اللغة"}
// data={[
// { id: 1, name: "العربية" },
// { id: 2, name: "English" },
// ]}
// displayMember={"name"}
// valueMember={"id"}
// selectedValue={selectedLanguage}
// required={true}
// onChange={(e) => setSelectedLanguage(e.target.value)}
// />
//----------------------------------------------------------------

export default function CustomSelect(props) {
const {
data,
displayMember,
valueMember,
defaultValue,
selectedValue,
onChange,
name,
label,
required,
} = props;

return (
<label className="input input--select">
<span>{label}</span>
<select
name={name}
onChange={onChange}
defaultValue={defaultValue}
required={required}
value={selectedValue}
>
{data.map((item) => (
<option key={item[valueMember]} value={item[valueMember]}>
{item[displayMember]}
</option>
))}
</select>
</label>
);
}

CustomSelect.propTypes = {
data: PropTypes.array.isRequired,
displayMember: PropTypes.string.isRequired,
valueMember: PropTypes.string.isRequired,
defaultValue: PropTypes.string,
selectedValue: PropTypes.any,
onChange: PropTypes.func,
name: PropTypes.string,
label: PropTypes.string,
required: PropTypes.bool,
};
29 changes: 29 additions & 0 deletions client/src/components/common/UserActions.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,66 +29,77 @@ export default function UserActions() {
return (
<>
<Button
disabled
linkTo={ActionRoutes["Assign Sector Leader"]}
className="Button--medium Button--primary-darker"
>
تعيين قائد لقطاع
</Button>
<Button
disabled
linkTo={ActionRoutes["Add Sector"]}
className="Button--medium Button--regular"
>
إضافة قطاع
</Button>
<Button
disabled
linkTo={ActionRoutes["Add Scout"]}
className="Button--medium Button--regular"
>
إضافة كشاف
</Button>
<Button
disabled
linkTo={ActionRoutes.Statistics}
className="Button--medium Button--regular"
>
الاحصائيات
</Button>
<Button
disabled
linkTo={ActionRoutes["Financial Management"]}
className="Button--medium Button--regular"
>
إدارة الماليات
</Button>
<Button
disabled
linkTo={ActionRoutes["Send Notification"]}
className="Button--medium Button--regular"
>
إرسال إشعار
</Button>
<Button
disabled
linkTo={ActionRoutes["Sessions"]}
className="Button--medium Button--regular"
>
تعديل كشاف
</Button>
<Button
disabled
linkTo={ActionRoutes["Sessions"]}
className="Button--medium Button--regular"
>
التقارير والمجالس
</Button>
<Button
disabled
linkTo={ActionRoutes["Sessions"]}
className="Button--medium Button--regular"
>
الأنشطة
</Button>
<Button
disabled
linkTo={ActionRoutes["Sessions"]}
className="Button--medium Button--regular"
>
المواضيع
</Button>
<Button
disabled
linkTo={ActionRoutes["Sessions"]}
className="Button--medium span-2-cols Button--success"
>
Expand All @@ -102,60 +113,70 @@ export default function UserActions() {
return (
<>
<Button
disabled
linkTo={ActionRoutes["Assign Sector Leader"]}
className="Button--medium Button--primary-darker"
>
تعيين قائد لقطاع
</Button>
<Button
disabled
linkTo={ActionRoutes["Statistics"]}
className="Button--medium Button--regular"
>
الاحصائيات
</Button>
<Button
disabled
linkTo={ActionRoutes["Send Notification"]}
className="Button--medium Button--regular"
>
إرسال إشعار
</Button>
<Button
disabled
linkTo={ActionRoutes["Add Scout"]}
className="Button--medium Button--regular"
>
إضافة كشاف
</Button>
<Button
disabled
linkTo={ActionRoutes["Edit Scout"]}
className="Button--medium Button--regular"
>
تعديل كشاف
</Button>
<Button
disabled
linkTo={ActionRoutes["Reports and Councils"]}
className="Button--medium Button--regular"
>
التقارير والمجالس
</Button>
<Button
disabled
linkTo={ActionRoutes["Activities"]}
className="Button--medium Button--regular"
>
الأنشطة
</Button>
<Button
disabled
linkTo={ActionRoutes["Sessions"]}
className="Button--medium Button--regular"
>
المواضيع
</Button>
<Button
disabled
linkTo={ActionRoutes["Sectors"]}
className="Button--medium span-2-cols Button--regular"
>
القطاعات
</Button>
<Button
disabled
linkTo={ActionRoutes["Record Captain Absence"]}
className="Button--medium span-2-cols Button--success"
>
Expand All @@ -169,48 +190,56 @@ export default function UserActions() {
return (
<>
<Button
disabled
linkTo={ActionRoutes["Statistics"]}
className="Button--medium span-2-cols Button--regular"
>
الاحصائيات
</Button>
<Button
disabled
linkTo={ActionRoutes["Edit Scout"]}
className="Button--medium Button--regular"
>
تعديل كشاف
</Button>
<Button
disabled
linkTo={ActionRoutes["Reports and Councils"]}
className="Button--medium Button--regular"
>
التقارير والمجالس
</Button>
<Button
disabled
linkTo={ActionRoutes["Activities"]}
className="Button--medium Button--regular"
>
الأنشطة
</Button>
<Button
disabled
linkTo={ActionRoutes["Sessions"]}
className="Button--medium Button--regular"
>
المواضيع
</Button>
<Button
disabled
linkTo={ActionRoutes["Scores"]}
className="Button--medium Button--regular"
>
تقييم أفراد
</Button>
<Button
disabled
linkTo={ActionRoutes["Sector"]}
className="Button--medium Button--regular"
>
القطاع
</Button>
<Button
disabled
linkTo={ActionRoutes["Record Scouts Absence"]}
className="Button--medium span-2-cols Button--success"
>
Expand Down

0 comments on commit ae4f49b

Please sign in to comment.