event => {
setOrgData({ ...OrgData, [name]: event.target.value });
};
+
+ const [itemList, setItemList] = useState([]);
+ const [selectedItems, setSelectedItems] = useState([]);
+ const [filterText, setFilterText] = useState('');
+ const [showDropdown, setShowDropdown] = useState(false);
+ const itemsToShow = 8; // Number of items to show at a time
+ const maxDropdownHeight = 150; // Max height of the dropdown in pixels
+
+ const dummyItems = [
+ 'C', 'C++', 'Java', 'JavaScript', 'Python', 'Ruby', 'Swift', 'TypeScript',
+ 'C#', 'PHP', 'Go', 'Kotlin', 'Rust', 'Scala', 'Julia', 'D', 'Haskell', 'Elixir',
+ 'Clojure', 'Lua', 'Perl', 'Assembly', 'Fortran', 'HTML', 'CSS', 'Matlab', 'R',
+ 'SAS', 'VBA', 'SwiftUI', 'Flutter', 'React Native', 'Qt', 'wxWidgets', 'Gtk+',
+ 'Tkinter', 'Android', 'iOS', 'WebAssembly', 'React', 'Vue.js', 'Angular', 'Svelte',
+ 'Ember.js', 'Django', 'Flask', 'Rails', 'Laravel', 'ASP.NET Core', 'Spring Boot',
+ 'Express.js', 'Koa.js', 'Nest.js', 'TensorFlow', 'PyTorch', 'Scikit-learn', 'Pandas',
+ 'NumPy', 'Matplotlib', 'Seaborn', 'Bokeh', 'Plotly', 'Docker', 'Kubernetes',
+ 'Apache Spark', 'Apache Hadoop', 'Cassandra', 'Kafka', 'MongoDB', 'MySQL',
+ 'PostgreSQL', 'Elasticsearch', 'Prometheus', 'Grafana', 'Kibana', 'Logstash',
+ 'Terraform', 'Ansible', 'Puppet', 'Chef', 'Docker Compose', 'Kubernetes Helm',
+ 'Istio', 'ServiceMesh', 'gRPC', 'Protobuf', 'Thrift', 'Apache Camel',
+ 'Apache Mule ESB', 'Apache Kafka Streams', 'Spring Integration',
+ 'Oracle Fusion Middleware', 'IBM Integration Bus', 'TIBCO ActiveMatrix BusinessWorks Plus',
+ 'Azure Logic Apps', 'AWS Step Functions', 'Google Cloud Functions'
+];
+
+ const inputRef = useRef(null);
+
+ useEffect(() => {
+ // Close the dropdown when clicking outside the input and list
+ const handleOutsideClick = (event) => {
+ if (inputRef.current && !inputRef.current.contains(event.target)) {
+ setShowDropdown(false);
+ }
+ };
+
+ document.addEventListener('click', handleOutsideClick);
+
+ return () => {
+ document.removeEventListener('click', handleOutsideClick);
+ };
+ }, []);
+
+ const showItems = () => {
+ setShowDropdown(true);
+ };
+
+ const addItem = (item) => {
+ setSelectedItems([...selectedItems, item]);
+ setFilterText('');
+ setShowDropdown(false);
+ const updatedTags = OrgData.org_tags ? `${OrgData.org_tags},${item}` : item;
+
+ setOrgData({ ...OrgData, org_tags: updatedTags });
+ };
+
+ const resetItems = () => {
+ setSelectedItems([]);
+ // Create a new object to trigger a re-render
+ setOrgData((prevOrgData) => ({ ...prevOrgData, org_tags: ' ' }));
+ };
+
+ const handleFilterChange = (event) => {
+ const text = event.target.value;
+ setFilterText(text);
+
+ // If the filter text is empty, show all items
+ if (!text.trim()) {
+ setItemList([]);
+ setShowDropdown(true);
+ return;
+ }
+
+ // Filter the items based on the input text and show only a certain number
+ const filteredItems = dummyItems
+ .filter((item) => item.toLowerCase().includes(text.toLowerCase()))
+ .slice(0, itemsToShow);
+ setItemList(filteredItems);
+ setShowDropdown(true);
+ };
+
- console.log(OrgData);
const saveImage = (canvas, crop) => {
if (!crop || !canvas) {
@@ -372,17 +454,59 @@ function General() {
onChange={handleChange("org_description")}
/>
- Select tags
-
-
-
-
-
-
+ {console.log(OrgData)}
+ Select tags
+
+
+ {showDropdown && (
+
+ )}
+
+
+
Selected Tags
+
+ {selectedItems.map((item, index) => (
+
+ ))}
+
+
+
+
}
+ style={{margin:"5px"}} onClick={resetItems}>Reset
+
- needed to position the dropdown content */
+ .dropdown {
+ position: relative;
+ display: inline-block;
+ }
+
+ /* Dropdown Content (Hidden by Default) */
+ .dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f6f6f6;
+ min-width: 230px;
+ border: 1px solid #ddd;
+ z-index: 1;
+ }
+
+ /* Links inside the dropdown */
+ .dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ }
+
+ /* Change color of dropdown links on hover */
+ .dropdown-content a:hover {background-color: #f1f1f1}
+
+ /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+ .show {display:block;}
\ No newline at end of file
diff --git a/src/components/Tutorials/subComps/EditControls.jsx b/src/components/Tutorials/subComps/EditControls.jsx
index 7ba446a6..0b329fb4 100644
--- a/src/components/Tutorials/subComps/EditControls.jsx
+++ b/src/components/Tutorials/subComps/EditControls.jsx
@@ -7,6 +7,7 @@ import Button from "@mui/material/Button";
import FileCopyIcon from "@mui/icons-material/FileCopy";
import ListIcon from "@mui/icons-material/List";
import DeleteIcon from "@mui/icons-material/Delete";
+import DoneIcon from "@mui/icons-material/Done";
import ChatIcon from "@mui/icons-material/Chat";
import EditIcon from "@mui/icons-material/Edit";
import VisibilityIcon from "@mui/icons-material/Visibility";
@@ -21,8 +22,10 @@ import { useFirebase, useFirestore } from "react-redux-firebase";
import { useDispatch } from "react-redux";
import RemoveStepModal from "./RemoveStepModal";
import ColorPickerModal from "./ColorPickerModal";
+import { useHistory } from 'react-router-dom';
import { Box, Stack } from "@mui/system";
+
const EditControls = ({
isPublished,
stepPanelVisible,
@@ -50,11 +53,11 @@ const EditControls = ({
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
-
+
const handleClose = () => {
setAnchorEl(null);
};
-
+
return (
<>
+
)}
diff --git a/src/components/UserDetails/Tag.jsx b/src/components/UserDetails/Tag.jsx
new file mode 100644
index 00000000..42557733
--- /dev/null
+++ b/src/components/UserDetails/Tag.jsx
@@ -0,0 +1,78 @@
+import React from "react";
+import { makeStyles } from "@mui/styles";
+import Card from "@mui/material/Card";
+import {
+ Button,
+ } from "@mui/material";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+import { createTheme, responsiveFontSizes, ThemeProvider } from "@mui/material";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ margin: "auto",
+ display: "block",
+ maxWidth: "100%",
+ maxHeight: "100%",
+ [theme.breakpoints.down("xs")]: {
+ width: "95%",
+ },
+ },
+ head: {
+ fontWeight: "medium",
+ marginBottom: "5px",
+ },
+}));
+
+function Tag({ Heading, backgroundColor, Content }) {
+ const classes = useStyles();
+ let theme = createTheme();
+ theme = responsiveFontSizes(theme);
+
+ // Check if Content is empty
+ if (!Content) {
+ // Handle the case when Content is empty, you can return null or handle it accordingly
+ return null;
+ }
+
+ // Split the string into an array using commas as the delimiter
+ const contentArray = Content.split(',');
+
+ return (
+
+
+
+
+ {Heading}
+
+ {contentArray.map((item, index) => (
+
+ ))}
+
+
+
+ );
+}
+
+export default Tag;