diff --git a/src/components/FilterDrawer/NormalOptions.tsx b/src/components/FilterDrawer/NormalOptions.tsx
new file mode 100644
index 00000000..9c5a5a91
--- /dev/null
+++ b/src/components/FilterDrawer/NormalOptions.tsx
@@ -0,0 +1,59 @@
+import { RadioGroup } from '@navi/web-ui/lib/components';
+import { RadioOptions } from '@navi/web-ui/lib/components/RadioGroup/types';
+import { Checkbox } from '@navi/web-ui/lib/primitives';
+import { ChangeEvent } from 'react';
+import { isOptionChecked } from './utils';
+import styles from './index.module.scss';
+import cx from 'classnames';
+import { INormalOptionValues } from './types';
+
+const NormalOptions = (props: INormalOptionValues) => {
+ const {
+ filterSchema,
+ selectedFilter,
+ selectedOptions,
+ setSelectedOptions,
+ handleCheckboxChange,
+ filteredOptionsData
+ } = props;
+ const { isSearchEnabled, multiSelect = true } = filterSchema?.[selectedFilter] || {};
+
+ return (
+
+ {multiSelect ? (
+ filteredOptionsData?.map(option => (
+
+ handleCheckboxChange(e, option)}
+ title={option?.label as string}
+ defaultChecked={isOptionChecked(
+ option?.value as string,
+ selectedOptions,
+ selectedFilter
+ )}
+ />
+
+ ))
+ ) : (
+
) =>
+ setSelectedOptions({ ...selectedOptions, [selectedFilter]: [e.target.value] })
+ }
+ className="gap-[20px]"
+ value={selectedOptions[selectedFilter]?.[0]}
+ name={selectedFilter}
+ options={filteredOptionsData as RadioOptions[]}
+ />
+ )}
+
+ );
+};
+
+export default NormalOptions;
diff --git a/src/components/FilterDrawer/RightPanel.tsx b/src/components/FilterDrawer/RightPanel.tsx
index 967aa902..18a19dc4 100644
--- a/src/components/FilterDrawer/RightPanel.tsx
+++ b/src/components/FilterDrawer/RightPanel.tsx
@@ -1,13 +1,13 @@
-import { handleOptionChange, isOptionChecked } from './utils';
+import { handleOptionChange } from './utils';
import { Search } from '@cp/src/utils/search';
import { SearchIcon } from '@navi/web-ui/lib/icons';
-import { BorderedInput, Checkbox, Typography } from '@navi/web-ui/lib/primitives';
+import { BorderedInput, Typography } from '@navi/web-ui/lib/primitives';
import { ChangeEvent, useEffect, useRef, useState } from 'react';
import styles from './index.module.scss';
-import cx from 'classnames';
import { addClickstreamEvent } from '@cp/src/service/clickStreamEventService';
import { IOption, IRightPanel } from './types';
import SectionedOptions from './SectionedOptions';
+import NormalOptions from './NormalOptions';
const RightPanel = (props: IRightPanel) => {
const { filterSchema, selectedFilter, selectedOptions, setSelectedOptions, tableName } = props;
@@ -87,21 +87,14 @@ const RightPanel = (props: IRightPanel) => {
isSearchEnabled={isSearchEnabled}
/>
) : (
-
- {filteredOptionsData?.map(option => (
-
- handleCheckboxChange(e, option)}
- title={option.label as string}
- defaultChecked={isOptionChecked(
- option?.value as string,
- selectedOptions,
- selectedFilter
- )}
- />
-
- ))}
-
+
)}
);
diff --git a/src/components/FilterDrawer/index.module.scss b/src/components/FilterDrawer/index.module.scss
index 35fb02b4..23a162f3 100644
--- a/src/components/FilterDrawer/index.module.scss
+++ b/src/components/FilterDrawer/index.module.scss
@@ -66,6 +66,11 @@
padding-top: 16px;
}
+ .singleSelect {
+ padding: 0 12px;
+ padding-top: 8px;
+ }
+
.inputContainer {
width: 100%;
margin: 0;
diff --git a/src/components/FilterDrawer/types.ts b/src/components/FilterDrawer/types.ts
index 8a6fd147..01bf2d82 100644
--- a/src/components/FilterDrawer/types.ts
+++ b/src/components/FilterDrawer/types.ts
@@ -88,3 +88,12 @@ export interface ISectionedOptionValues {
setSelectedOptions: (selectedOptions: ISelectedOptions) => void;
isSearchEnabled: boolean;
}
+
+export interface INormalOptionValues {
+ filteredOptionsData: IOption[];
+ filterSchema: Record;
+ selectedOptions: ISelectedOptions;
+ selectedFilter: string;
+ handleCheckboxChange: (e: ChangeEvent, option: IOption) => void;
+ setSelectedOptions: (selectedOptions: ISelectedOptions) => void;
+}
diff --git a/src/utils/QueryParamsHelper.ts b/src/utils/QueryParamsHelper.ts
index 9b5fe63c..4fa14190 100644
--- a/src/utils/QueryParamsHelper.ts
+++ b/src/utils/QueryParamsHelper.ts
@@ -112,7 +112,7 @@ export const getTableQueryParams = (
return;
}
Object.keys(filterSchema).forEach(key => {
- if (filterSchema[key] && filterSchema[key]?.multiSelect) {
+ if (filterSchema[key]) {
tableQueryParams[key] = tableQueryParams[key]?.split(',') || [];
}
if (checkForNestedFilters) {