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.

Sign up for GitHub

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

Added custom component UniversalSelect using new library react-select… #1802

Merged
merged 2 commits into from
Aug 29, 2024
Merged

Added custom component UniversalSelect using new library react-select… #1802

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f91452
Added custom component UniversalSelect using new library react-select…
dipitvasdev Aug 27, 2024
6a863b8
Merge branch 'develop' into 1785-different-dropdown-on-systems-browsers
entrotech Aug 29, 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
37 changes: 23 additions & 14 deletions client/src/components/Admin/RuleViewContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,34 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import RuleView from "./RuleView";
import UniversalSelect from "../UI/UniversalSelect";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
select: {
width: "275px"
}
});

const RuleViewContainer = props => {
const { rules } = props;
const [ruleId, setRuleId] = useState(rules[0].id);
const rule = rules.filter(rule => rule.id === ruleId)[0];

const classes = useStyles();
return (
<React.Fragment>
<select
value={ruleId}
onChange={e => setRuleId(parseInt(e.target.value))}
>
{rules && rules.length > 0
? rules.map(rule => (
<option key={rule.id} value={rule.id}>
{rule.code}
</option>
))
: null}
</select>
<UniversalSelect
className={classes.select}
options={rules.map(rule => ({
value: rule.id,
label: rule.code
}))}
defaultValue={
rules.length > 0 ? { value: rules[0].id, label: rules[0].code } : null
}
onChange={selectedOption => setRuleId(selectedOption.value)}
/>

<RuleView rule={rule} rules={rules} setRuleId={setRuleId} />
</React.Fragment>
);
Expand All @@ -30,7 +38,8 @@ RuleViewContainer.propTypes = {
PropTypes.shape({
id: PropTypes.number,
filter: PropTypes.string.isRequired,
length: PropTypes.number.isRequired
length: PropTypes.number.isRequired,
code: PropTypes.string.isRequired
})
)
};
Expand Down
26 changes: 16 additions & 10 deletions client/src/components/ProjectWizard/RuleStrategy/RuleStrategy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { createUseStyles, useTheme } from "react-jss";
import clsx from "clsx";
import AccordionToolTip from "../../ToolTip/AccordionToolTip";
import RuleStrategyLabel from "./RuleStrategyLabel";
import UniversalSelect from "../../UI/UniversalSelect";

const useStyles = createUseStyles(theme => ({
rowContainer: {
Expand Down Expand Up @@ -49,7 +50,10 @@ const useStyles = createUseStyles(theme => ({
marginBottom: "0.1em"
},
select: {
width: "200px"
width: "200px",
textAlign: "left",
padding: 0,
maring: 0
},
stringInput: {
flexBasis: "50%",
Expand Down Expand Up @@ -230,21 +234,23 @@ const RuleStrategy = ({
setShowDescription={setShowDescription}
/>
<div className={classes.choiceSelectContainer}>
<select
<UniversalSelect
autoFocus={autoFocus}
className={classes.select}
value={value || ""}
defaultValue={
choices.length > 0
? { value: choices[0].id, label: choices[0].name }
: null
}
onChange={onInputChange}
name={code}
id={code}
disabled={!display || !!readOnly}
>
{choices.map(choice => (
<option key={choice.id} value={choice.id}>
{choice.name}
</option>
))}
</select>
options={choices.map(choice => ({
value: choice.id,
label: choice.name
}))}
/>
</div>
{possibleAndEarnedPointsContainers()}
</div>
Expand Down
70 changes: 51 additions & 19 deletions client/src/components/Projects/FilterDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import "react-datepicker/dist/react-datepicker.css";
import DateRangePicker from "../UI/DateRangePicker";
import { MdChevronRight } from "react-icons/md";
import { createUseStyles } from "react-jss";
import UniversalSelect from "../UI/UniversalSelect";

const useStyles = createUseStyles({
container: {
Expand Down Expand Up @@ -35,6 +36,12 @@ const useStyles = createUseStyles({
flexBasis: "50%",
display: "flex",
flexDirection: "column"
},
dropdown: {
width: "100%",
textAlign: "left",
padding: 0,
maring: 0
}
});

Expand Down Expand Up @@ -77,6 +84,24 @@ const FilterPopup = ({
setCriteria({ ...criteria, [property]: date });
};

const projectTypeoptions = [
{ value: "draft", label: "Draft" },
{ value: "snapshot", label: "Snapshot" },
{ value: "all", label: "Draft and Snapshot" }
];

const statusOptions = [
{ value: "active", label: "Active" },
{ value: "deleted", label: "Deleted" },
{ value: "all", label: "Active and Deleted" }
];

const visibilityOptions = [
{ value: "visible", label: "Visible" },
{ value: "hidden", label: "Hidden" },
{ value: "all", label: "Visible and Hidden" }
];

return (
<div className={classes.container}>
<button
Expand All @@ -98,31 +123,38 @@ const FilterPopup = ({
{/* <pre>{JSON.stringify(criteria, null, 2)}</pre> */}
<h4 className={classes.minorHeading}>Project Type</h4>
</div>
<select onChange={e => handleChange(e, "type")} value={criteria.type}>
<option value="draft">Draft</option>
<option value="snapshot">Snapshot</option>
<option value="all">Draft and Snapshot</option>
</select>

<UniversalSelect
defaultValue={projectTypeoptions.find(
option => option.value === criteria.type
)}
options={projectTypeoptions}
onChange={e => handleChange(e, "type")}
name="type"
className={classes.dropdown}
/>

<h4 className={classes.minorHeading}>Status</h4>
<select
<UniversalSelect
defaultValue={statusOptions.find(
option => option.value === criteria.status
)}
options={statusOptions}
onChange={e => handleChange(e, "status")}
value={criteria.status}
>
<option value="active">Active</option>
<option value="deleted">Deleted</option>
<option value="all">Active and Deleted</option>
</select>
name="status"
className={classes.dropdown}
/>

<h4 className={classes.minorHeading}>Visibility</h4>
<select
<UniversalSelect
defaultValue={visibilityOptions.find(
option => option.value === criteria.visibility
)}
options={visibilityOptions}
onChange={e => handleChange(e, "visibility")}
value={criteria.visibility}
>
<option value="visible">Visible</option>
<option value="hidden">Hidden</option>
<option value="all">Visible and Hidden</option>
</select>
name="visibility"
className={classes.dropdown}
/>

<h4 className={classes.minorHeading}>Project Name</h4>
<input
Expand Down
53 changes: 22 additions & 31 deletions client/src/components/Projects/ProjectsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import ProjectTableRow from "./ProjectTableRow";
import FilterDrawer from "./FilterDrawer.js";
import MultiProjectToolbarMenu from "./MultiProjectToolbarMenu.js";
import fetchEngineRules from "./fetchEngineRules.js";
import UniversalSelect from "../UI/UniversalSelect.jsx";
import ProjectTableColumnHeader from "./ColumnHeaderPopups/ProjectTableColumnHeader.js";

const useStyles = createUseStyles({
Expand Down Expand Up @@ -127,9 +128,9 @@ const useStyles = createUseStyles({
justifyContent: "center"
},
dropContent: {
padding: "5px",
borderColor: "silver",
borderRadius: "4px"
borderRadius: "4px",
width: "60px",
textAlign: "center"
},
optionItems: {
backgroundColor: "white",
Expand Down Expand Up @@ -166,6 +167,14 @@ const ProjectsPage = ({ contentContainerRef }) => {
const [perPage, setPerPage] = useState(10);
const projectsPerPage = perPage;

const perPageOptions = [
{ value: projects.length, label: "All" },
{ value: 100, label: "100" },
{ value: 50, label: "50" },
{ value: 25, label: "25" },
{ value: 10, label: "10" }
];

const handlePerPageChange = newPerPage => {
setPerPage(newPerPage);
const newHighestPage = Math.ceil(sortedProjects.length / newPerPage);
Expand Down Expand Up @@ -776,34 +785,16 @@ const ProjectsPage = ({ contentContainerRef }) => {
currentPage={currentPage}
maxNumOfVisiblePages={5}
/>
<label>
<select
className={classes.dropContent}
// defaultValue={10}
value={perPage}
onChange={e => handlePerPageChange(e.target.value)}
>
<option
className={classes.optionItems}
value={projects.length}
>
All
</option>
<option className={classes.optionItems} value={100}>
100
</option>
<option className={classes.optionItems} value={50}>
50
</option>
<option className={classes.optionItems} value={25}>
25
</option>
<option className={classes.optionItems} value={10}>
10
</option>
</select>
<span className={classes.itemsPerPage}>Items per page</span>
</label>
<UniversalSelect
defaultValue={perPageOptions.find(
option => option.value === perPage
)}
options={perPageOptions}
onChange={e => handlePerPageChange(e.target.value)}
name="perPage"
className={classes.dropContent}
/>
<span className={classes.itemsPerPage}>Items per page</span>
</div>

{(selectedProject || checkedProjectsStatusData) && (
Expand Down
Loading
Loading