From 486ffc776475b8b8c8f1c6cf49e15c55cf3e5918 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Wed, 4 Dec 2024 10:58:38 +0100 Subject: [PATCH] ui: some fixes to issue filters default value, display and placeholder consistency --- .../FilterAutoComplete/AutocompleteModal.tsx | 86 ++++++++++--------- .../FilterAutoComplete/FilterAutoComplete.tsx | 5 +- .../shared/Filters/FilterItem/FilterItem.tsx | 2 +- .../Filters/FilterModal/FilterModal.tsx | 2 +- .../FilterSelection/FilterSelection.tsx | 4 +- .../Filters/FilterValue/FilterValue.tsx | 8 +- .../FilterValueDropdown.tsx | 3 +- frontend/app/mstore/searchStore.ts | 1 + frontend/app/types/filter/newFilter.js | 19 +++- 9 files changed, 79 insertions(+), 51 deletions(-) diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx index d3321ea77..43e7a18e6 100644 --- a/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx +++ b/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx @@ -1,6 +1,7 @@ import React, { useRef, useState } from 'react'; import { Button, Checkbox, Input } from 'antd'; import cn from 'classnames'; +import { Loader } from 'UI'; import OutsideClickDetectingDiv from '../../OutsideClickDetectingDiv'; export function AutocompleteModal({ @@ -11,11 +12,12 @@ export function AutocompleteModal({ loadOptions, options, isLoading, + placeholder, }: { values: string[]; onClose: () => void; onApply: (values: string[]) => void; - handleFocus: () => void; + handleFocus?: () => void; loadOptions: (query: string) => void; options: { value: string; label: string }[]; placeholder?: string; @@ -70,36 +72,40 @@ export function AutocompleteModal({ onFocus={handleFocus} loading={isLoading} onChange={(e) => handleInputChange(e.target.value)} + placeholder={placeholder} /> - -
- {sortedOptions.map((item) => ( + + <>
onSelectOption(item)} - className={ - 'cursor-pointer w-full py-1 hover:bg-active-blue rounded px-2' - } + className={'flex flex-col gap-2 overflow-y-auto py-2'} + style={{ maxHeight: 200 }} > - {item.label} + {sortedOptions.map((item) => ( +
onSelectOption(item)} + className={ + 'cursor-pointer w-full py-1 hover:bg-active-blue rounded px-2' + } + > + {item.label} +
+ ))}
- ))} -
- {query.length ? ( -
-
onApply([query])} - > - Apply "{query}" -
-
- ) : null} + {query.length ? ( +
+
onApply([query])} + > + Apply "{query}" +
+
+ ) : null} + +
{props.value.length > 1 ? ( - props.value.length === 2 ? ( - <> - or + <> + or + {props.value.length === 2 ? (
- - ) : ( -
- + {props.value.length - 1} More -
- ) + ) : ( +
+ + {props.value.length - 1} More +
+ )} + ) : null} ) : ( diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx index 6e9431dc0..95098ee69 100644 --- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx +++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx @@ -43,6 +43,7 @@ interface Props { icon?: string; hideOrText?: boolean; onApplyValues: (values: string[]) => void; + modalProps?: Record } const FilterAutoComplete = observer( @@ -51,7 +52,8 @@ const FilterAutoComplete = observer( onClose, onApply, values, - }: { params: any, values: string[], onClose: () => void, onApply: (values: string[]) => void }) => { + placeholder, + }: { params: any, values: string[], onClose: () => void, onApply: (values: string[]) => void, placeholder?: string }) => { const [options, setOptions] = useState<{ value: string; label: string }[]>( [] ); @@ -128,6 +130,7 @@ const FilterAutoComplete = observer( loadOptions={handleInputChange} options={options} isLoading={loading} + placeholder={placeholder} /> } ); diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx index 2d06c41a9..698fc9bde 100644 --- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx +++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx @@ -42,7 +42,7 @@ function FilterItem(props: Props) { const replaceFilter = (filter: any) => { props.onUpdate({ ...filter, - value: [''], + value: filter.value, filters: filter.filters ? filter.filters.map((i: any) => ({...i, value: ['']})) : [], }); }; diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx index 96ff1c1ff..0be8d843b 100644 --- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx +++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx @@ -247,7 +247,7 @@ function FilterModal(props: Props) { className={cn( 'flex items-center p-2 cursor-pointer gap-1 rounded-lg hover:bg-active-blue' )} - onClick={() => onFilterClick({ ...filter, value: [''] })} + onClick={() => onFilterClick({ ...filter })} > {filter.category ?
{filter.category} diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx index be87b59bd..74ccac3c7 100644 --- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx +++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx @@ -38,6 +38,8 @@ function FilterSelection(props: Props) { onFilterClick(filter); setShowModal(false); } + + const label = filter?.category === 'Issue' ? 'Issue' : filter?.label; return (
- {filter.label} + {label}
)} diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx index d56f5ebb1..7fad2ca33 100644 --- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx +++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx @@ -18,6 +18,7 @@ interface Props { } function FilterValue(props: Props) { const { filter } = props; + const isEvent = filter.isEvent; const [durationValues, setDurationValues] = useState({ minDuration: filter.value[0], maxDuration: filter.value.length > 1 ? filter.value[1] : filter.value[0], @@ -113,17 +114,18 @@ function FilterValue(props: Props) { ) switch (filter.type) { case FilterType.NUMBER_MULTIPLE: - return ; + return ; case FilterType.NUMBER: return ( ); case FilterType.STRING: - return ; + return ; case FilterType.DROPDOWN: return ( @@ -137,6 +139,7 @@ function FilterValue(props: Props) { onRemoveValue={(ind) => onRemoveValue(ind)} showCloseButton={showCloseButton} showOrButton={showOrButton} + placeholder={filter.placeholder} /> ); case FilterType.DURATION: @@ -164,6 +167,7 @@ function FilterValue(props: Props) { placeholder={filter.placeholder} onSelect={(e, item, index) => onChange(e, item, index)} icon={filter.icon} + modalProps={{ placeholder: isEvent ? 'Search event' : 'Filter by'}} /> ); } diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx index 1ad7a3c14..72b6f0198 100644 --- a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx +++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import { Icon } from 'UI'; import { AutoCompleteContainer, AutocompleteModal } from "../FilterAutoComplete/AutocompleteModal"; -import stl from './FilterValueDropdown.module.css'; interface Props { options: any[]; @@ -28,6 +26,7 @@ function FilterValueDropdown(props: Props) { onApply={onApply} loadOptions={setQuery} options={filteredOptions} + isLoading={false} /> ); } diff --git a/frontend/app/mstore/searchStore.ts b/frontend/app/mstore/searchStore.ts index f8767e97f..dab983d79 100644 --- a/frontend/app/mstore/searchStore.ts +++ b/frontend/app/mstore/searchStore.ts @@ -244,6 +244,7 @@ class SearchStore { addFilter(filter: any) { const index = filter.isEvent ? -1 : this.instance.filters.findIndex((i: FilterItem) => i.key === filter.key); + console.log(filter) filter.value = checkFilterValue(filter.value); filter.filters = filter.filters ? filter.filters.map((subFilter: any) => ({ diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js index 1e60e0f8a..93f6d830c 100644 --- a/frontend/app/types/filter/newFilter.js +++ b/frontend/app/types/filter/newFilter.js @@ -1,6 +1,6 @@ import { - clickSelectorOperators -} from 'App/constants/filterOptions'; + clickSelectorOperators, issueOptions +} from "App/constants/filterOptions"; import Record from 'Types/Record'; import { FilterType, FilterKey, FilterCategory } from './filterType'; import filterOptions, { countries, platformOptions } from 'App/constants'; @@ -86,6 +86,18 @@ export const mobileFilters = [ } ]; +const issueFilters = issueOptions.map((i) => ({ + key: `${FilterKey.ISSUE}_${i.value}`, + type: FilterType.ISSUE, + category: FilterCategory.ISSUE, + label: i.label, + value: i.value, + placeholder: 'Select an issue', + operator: 'is', + operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), + icon: 'filters/click', + options: filterOptions.issueOptions, +})); export const filters = [ ...mobileFilters, { @@ -431,6 +443,7 @@ export const filters = [ icon: 'filters/click', options: filterOptions.issueOptions }, + ...issueFilters, { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, @@ -884,7 +897,7 @@ export const clickmapFilter = { const mapFilters = (list) => { return list.reduce((acc, filter) => { - filter.value = ['']; + filter.value = filter.value ? [filter.value] : ['']; acc[filter.key] = filter; return acc; }, {});