Skip to content

Commit

Permalink
tag-functionality-added
Browse files Browse the repository at this point in the history
  • Loading branch information
SURAJ-SHARMA27 committed Nov 11, 2023
1 parent b6555d8 commit 810c505
Show file tree
Hide file tree
Showing 6 changed files with 338 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ const EditOrgDetailsModal = ({ currentOrgData, modelCloseCallback }) => {
org_description: currentOrgData.org_description,
org_country: currentOrgData.org_country,
});

const onSubmit = (formData) => {
formData.preventDefault();
editGeneralData(
Expand Down
9 changes: 9 additions & 0 deletions src/components/Organization/ViewOrganization/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import Description from "../../UserDetails/Description";
import Spinner from "../../../helpers/spinner";
import ActivityList from "../../Topbar/Activity/ActivityList";
import { BasicImage, NoImage } from "../../../helpers/images";
import Tag from "../../UserDetails/Tag";
const useStyles = makeStyles(theme => ({
acitvitylist: {
padding: theme.spacing(1),
Expand Down Expand Up @@ -258,6 +259,14 @@ const ViewOrganization = () => {
Content={currentOrgData.org_description}
/>
</Grid>
<Grid item>
<Tag

Heading={"Tags"}
Content={currentOrgData.org_tags}

/>
</Grid>
<Grid item>
<Description
Heading={"CodeLabz you may like"}
Expand Down
150 changes: 137 additions & 13 deletions src/components/Organization/pages/General.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback, useState } from "react";
import React, { useCallback, useState,useEffect,useRef } from "react";
import {
Grid,
Typography,
Expand All @@ -12,7 +12,9 @@ import { makeStyles } from "@mui/styles";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import AddIcon from "@mui/icons-material/Add";
import Box from "@mui/material/Box";
import "./Tags.css";
import LinearProgress from "@mui/material/LinearProgress";
import UndoIcon from '@mui/icons-material/Undo';
import CardContent from "@mui/material/CardContent";
import TextField from "@mui/material/TextField";
import OrgDelete from "../OrgUsers/OrgDelete";
Expand Down Expand Up @@ -171,8 +173,88 @@ function General() {
const handleChange = name => 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) {
Expand Down Expand Up @@ -372,17 +454,59 @@ function General() {
onChange={handleChange("org_description")}
/>
</div>
<Typography>Select tags</Typography>
<Grid item xs={16} className={classes.hashbutton}>
<Button className={classes.hashtag} disableRipple>
#python
</Button>
<Button className={classes.hashtag} disableRipple>
#javascript
</Button>
<Fab size="small" color="primary" aria-label="add">
<AddIcon />
</Fab>
{console.log(OrgData)}
<Typography style={{marginTop:"10px"}}>Select tags</Typography>
<div className="tags-input" onClick={showItems} ref={inputRef} style={{ position: 'relative' }}>
<input
type="text"
placeholder="Type to filter"
id="input-tag"
value={filterText}
onChange={handleFilterChange}
/>
{showDropdown && (
<ul id="tags"
style={{
background:"white",
maxHeight: maxDropdownHeight + 'px',
overflowY: 'auto',
marginTop:'5px',
cursor:"pointer",
position: 'absolute',
top: '100%',
left: 0,
right: 0,
zIndex: 1,
}}
>
{itemList.map((item, index) => (
<li key={`item-${index}`} onClick={() => addItem(item)}>
{item}
</li>
))}
</ul>
)}
</div>


<Grid style={{marginTop:"10px"}} item xs={16} className={classes.hashbutton}>

<div >

<Typography>Selected Tags</Typography>
<div>
{selectedItems.map((item, index) => (
<Button style={{margin:"2px"}} className={classes.hashtag} disableRipple key={index}>{item}</Button>
))}
</div>


<Button variant="outlined"
color="primary"
startIcon={<UndoIcon />}
style={{margin:"5px"}} onClick={resetItems}>Reset</Button>
</div>

</Grid>
</CardContent>
</Grid>
Expand Down
105 changes: 105 additions & 0 deletions src/components/Organization/pages/Tags.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
.tags-input {
display: inline-block;
position: relative;
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px;
box-shadow: 2px 2px 5px #00000033;
width: 50%;
}

.tags-input ul {
list-style: none;
padding: 0;
margin: 0;
}

.tags-input li {
display: inline-block;
background-color: #f2f2f2;
color: #333;
border-radius: 20px;
padding: 5px 10px;
margin-right: 5px;
margin-bottom: 5px;
}

.tags-input input[type="text"] {
border: none;
outline: none;
padding: 5px;
font-size: 14px;
}

.tags-input input[type="text"]:focus {
outline: none;
}

.tags-input .delete-button {
background-color: transparent;
border: none;
color: #999;
cursor: pointer;
margin-left: 5px;
}


/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}

/* The search field */
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}

/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}

/* The container <div> - 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;}
12 changes: 9 additions & 3 deletions src/components/Tutorials/subComps/EditControls.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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,
Expand Down Expand Up @@ -50,11 +53,11 @@ const EditControls = ({
const handleClick = event => {
setAnchorEl(event.currentTarget);
};

const handleClose = () => {
setAnchorEl(null);
};

return (
<>
<Button
Expand Down Expand Up @@ -113,7 +116,7 @@ const EditControls = ({
);
setPublishLoad(false);
};

const historyRouter = useHistory();
return (
<>
<Stack
Expand Down Expand Up @@ -201,6 +204,9 @@ const EditControls = ({
>
<FileCopyIcon /> {isPublished ? "Unpublish" : "Publish"}
</Button>
<Button disabled={!isPublished} onClick={()=> historyRouter.push("/")}>
{isPublished && <DoneIcon />} {isPublished ? "Finish" : ""}
</Button>
<DropdownMenu key="more" />
</>
)}
Expand Down
Loading

0 comments on commit 810c505

Please sign in to comment.