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.

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

MAT-8048: Filter and Search multiple values for measures on copy test case dialog #764

Merged
merged 8 commits into from
Feb 3, 2025
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
MAT-8048: Implement search and filter functionality
mcmcphillips committed Jan 30, 2025
commit f9a144f358a56d517b914f48a1535cc2a1dc7ba6
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import React, {
} from "react";
import tw from "twin.macro";
import "styled-components/macro";
import { IconButton, MenuItem, Tooltip, Chip } from "@mui/material";
import { IconButton, MenuItem, Chip } from "@mui/material";
import {
MadieDialog,
MadieSpinner,
@@ -76,6 +76,8 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
const [offset, setOffset] = useState<number>(0);
const [loading, setLoading] = useState<boolean>(false);

console.log("filterBy", filterBy, finalFilterBy);
console.log("searchValue", searchField, finalSearchField);
const fetchMeasures = useCallback(() => {
if (!measure || !measure.model || !measure.id || !open) {
return;
@@ -86,6 +88,22 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
if (finalFilterBy) {
optionalSearchProperties.push(filterMap[finalFilterBy]);
}
// We have a condition when we first load the table where we don't want to apply the filters.
// We want this to still fire, so we only want to append all possible filters for when "-" is selected in filters, if a searchValue is also provided
if (!finalFilterBy && finalSearchField) {
console.log("trigger");
// apply all conditions
filterByOptions.forEach((condition) => {
optionalSearchProperties.push(filterMap[condition]);
});
}
console.log("obj", {
searchField: finalSearchField,
model: measure.model,
excludeByMeasureIds: [measure.id],
draft: true,
optionalSearchProperties,
});
measureSearchApi.current
.searchMeasuresByCriteria(
true,
@@ -219,6 +237,18 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
},
});

const finalizeSearchCriteria = () => {
setFinalFilterBy(filterBy);
setFinalSearchField(searchField);
};

const blankSearchCriteria = () => {
setSearchField("");
setFilterBy("");
setFinalFilterBy("");
setFinalSearchField("");
};

return (
<MadieDialog
form
@@ -244,22 +274,19 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
>
<div id="measure-landing" data-testid="measure-landing">
<div id="tc-search">
{/* <div tw="flex w-1/2 pr-4"> */}
{/* <div tw="w-1/2 pr-2"> */}
<div>
<Select
label="Filter By"
id="filter-by-select"
data-testid="filter-by-select"
// tw="w-full"
inputProps={{ "data-testid": "filter-by-select-input" }}
placeHolder={{ name: "Filter By", value: "" }}
SelectDisplayProps={{
"aria-required": "true",
}}
size="small"
name="filterBy"
value={filterBy?.[0] || undefined}
value={filterBy}
onChange={handleFilter}
options={filterByOptions
?.map((option) => {
@@ -280,11 +307,9 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
)}
/>
</div>
{/* <div tw="w-1/2 pl-2"> */}
<div>
<TextField
id="search"
// tw="w-full"
label="Search"
placeholder="Search"
inputProps={{
@@ -296,13 +321,7 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
onChange={handleSearch}
onKeyPress={(e) => {
if (e.key === "Enter") {
setFinalFilterBy(filterBy);
setFinalSearchField(searchField);
// if (!isNaN(Number(searchField))){
// setFinalSearchField(Number(searchField));
// } else {
// setFinalSearchField(searchField)
// }
finalizeSearchCriteria();
}
}}
slotProps={{
@@ -311,7 +330,7 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
<InputAdornment
position="start"
data-testid="test-cases-trigger-search"
// onClick={handleNavigate}
onClick={finalizeSearchCriteria}
style={{ cursor: "pointer" }}
>
<SearchIcon />
@@ -322,7 +341,7 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
data-testid="test-cases-clear-search"
position="end"
style={{ cursor: "pointer" }}
// onClick={handleClearClick}
onClick={blankSearchCriteria}
>
<IconButton>
<ClearIcon />