Merge pull request #190 from MuhammadKhalilzadeh/monitors

Create new monitor without dropdowns

Client/src/Components/Checkbox/Checkbox.css

@@ -12,6 +12,14 @@
   cursor: pointer;
 }
 
+.custom-checkbox {
+  width: var(--env-var-img-width-1);
+  height: var(--env-var-img-width-1);
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
 .checkbox-label {
   margin-left: 5px;
   font-size: var(--env-var-font-size-medium);
@@ -19,3 +27,11 @@
   font-weight: 600;
   cursor: pointer;
 }
+
+.custom-checkbox-label {
+  margin-left: var(--env-var-font-size-large);
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
+  font-weight: 500;
+  cursor: pointer;
+}

Client/src/Components/Checkbox/CustomizableCheckbox.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import "./Checkbox.css";
+import PropsTypes from "prop-types";
+
+const CustomizableCheckbox = (props) => {
+  return (
+    <div className="checkbox-holder">
+      <input
+        checked={props.isChecked}
+        onChange={props.handleChange}
+        className="custom-checkbox"
+        type="checkbox"
+        id="checkbox"
+      />
+      <label className="custom-checkbox-label">{props.title}</label>
+    </div>
+  );
+};
+
+CustomizableCheckbox.propsTypes = {
+  title: PropsTypes.string.isRequired,
+};
+
+export default CustomizableCheckbox;

Client/src/Components/Dropdown/index.jsx

@@ -1,28 +1,29 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
 
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-
-const Dropdown = ({ id, label, options, onChange, value }) => {
-    return (
-        <Autocomplete
-            id={id}
-            options={options}
-            getOptionLabel={(option) => option.name}
-            value={value}
-            onChange={onChange}
-            renderInput={(params) => <TextField {...params} label={label} />}
-        />
-    );
+const Dropdown = (props) => {
+  return (
+    <Autocomplete
+      id={props.id}
+      options={props.options}
+      getOptionLabel={(option) => (option.name ? option.name : "")}
+      value={props.value}
+      onChange={props.onChange}
+      // Add isOptionEqualToValue prop
+      isOptionEqualToValue={(option, value) => option.name === value}
+      renderInput={(params) => <TextField {...params} label={props.label} />}
+    />
+  );
 };
 
 // Define PropTypes for DropDown component
 Dropdown.propTypes = {
-    id: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired,
-    options: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-    value: PropTypes.object.isRequired,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  options: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
 };
 
 export default Dropdown;

Client/src/Components/RadioButton/index.jsx

@@ -25,8 +25,10 @@ function RadioButton(props) {
   return (
     <div className="custom-radio-button">
       <FormControlLabel
-        value="check"
+        checked={props.checked}
+        value={props.value}
         control={<Radio size={props.size} />}
+        onChange={props.onChange}
         label={
           <div>
             <div className="service-check-list-title">{props.title}</div>
@@ -45,8 +47,4 @@ RadioButton.propTypes = {
   size: PropTypes.string,
 };
 
-RadioButton.defaultProps = {
-  size: "small",
-};
-
 export default RadioButton;

Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx

@@ -1,7 +1,7 @@
 import "./flexibileTextField.css";
 import React from "react";
 
-const FlexibileTextField = ({ title, type, placeholder }) => {
+const FlexibileTextField = ({ title, type, placeholder, value, onChange }) => {
   return (
     <div className="flexibile-textfield">
       <div className="flexibile-textfield-title">{title}</div>
@@ -9,6 +9,8 @@ const FlexibileTextField = ({ title, type, placeholder }) => {
         type={type}
         className="flexibile-textfield-input"
         placeholder={placeholder}
+        value={value}
+        onChange={onChange}
       />
     </div>
   );