diff --git a/openbas-front/src/admin/components/common/filters/InjectorContractSwitchFilter.tsx b/openbas-front/src/admin/components/common/filters/InjectorContractSwitchFilter.tsx index bda11c45c0..7cfa845e9a 100644 --- a/openbas-front/src/admin/components/common/filters/InjectorContractSwitchFilter.tsx +++ b/openbas-front/src/admin/components/common/filters/InjectorContractSwitchFilter.tsx @@ -3,6 +3,7 @@ import React, { FunctionComponent, useEffect, useState } from 'react'; import { useFormatter } from '../../../../components/i18n'; import { FilterHelpers } from '../../../../components/common/queryable/filter/FilterHelpers'; import type { FilterGroup } from '../../../../utils/api-types'; +import { buildEmptyFilter } from '../../../../components/common/queryable/filter/FilterUtils'; export const INJECTOR_CONTRACT_INJECTOR_FILTER_KEY = 'injector_contract_injector'; @@ -26,8 +27,12 @@ const InjectorContractSwitchFilter: FunctionComponent = ({ // Standard hooks const { t } = useFormatter(); + const retrieveFilter = () => { + return filterGroup?.filters?.find((f) => f.key === INJECTOR_CONTRACT_INJECTOR_FILTER_KEY); + }; + const isChecked = () => { - const filter = filterGroup?.filters?.find((f) => f.key === INJECTOR_CONTRACT_INJECTOR_FILTER_KEY); + const filter = retrieveFilter(); if (!filter) { return false; } @@ -40,6 +45,10 @@ const InjectorContractSwitchFilter: FunctionComponent = ({ const { checked } = event.target; setEnablePlayerFilter(checked); if (checked) { + const filter = retrieveFilter(); + if (!filter) { + filterHelpers.handleAddFilterWithEmptyValue(buildEmptyFilter(INJECTOR_CONTRACT_INJECTOR_FILTER_KEY, 'contains')); + } filterHelpers.handleAddMultipleValueFilter( INJECTOR_CONTRACT_INJECTOR_FILTER_KEY, INJECTOR_CONTRACT_PLAYERS_ONLY, diff --git a/openbas-front/src/components/common/queryable/filter/FilterChip.tsx b/openbas-front/src/components/common/queryable/filter/FilterChip.tsx index 44f02cafb0..f65457acba 100644 --- a/openbas-front/src/components/common/queryable/filter/FilterChip.tsx +++ b/openbas-front/src/components/common/queryable/filter/FilterChip.tsx @@ -13,23 +13,16 @@ import type { Theme } from '../../../Theme'; const useStyles = makeStyles((theme: Theme) => ({ container: { display: 'flex', - gap: '4px', alignItems: 'center', lineHeight: '32px', + cursor: 'pointer', + '&:hover': { textDecorationLine: 'underline' }, }, mode: { display: 'inline-block', height: '100%', - // borderRadius: 4, - // fontFamily: 'Consolas, monaco, monospace', backgroundColor: theme.palette.action?.selected, padding: '0 4px', - // display: 'flex', - // alignItems: 'center', - }, - title: { - cursor: 'pointer', - '&:hover': { textDecorationLine: 'underline' }, }, })); @@ -89,19 +82,28 @@ const FilterChip: FunctionComponent = ({ return ({t(filter.key)}{' '}{convertOperatorToIcon(t, filter.operator)} {toValues(options)}); } return ( - - {t(filter.key)}{' '} - {convertOperatorToIcon(t, filter.operator)} {toValues(options)} - +
+ + {t(filter.key)} + {convertOperatorToIcon(t, filter.operator)} + + <>  + {toValues(options)} +
); }; + const chipVariant = (!filter.values || filter.values.length === 0) && !['nil', 'not_nil'].includes(filter.operator ?? 'eq') + ? 'outlined' + : 'filled'; + return ( <> { export const convertOperatorToIcon = (t: (text: string) => string, operator: Filter['operator']) => { switch (operator) { case 'eq': - return <>=; + return <> =; case 'not_eq': - return <>≠; + return <> ≠; case 'not_contains': - return t('not contains'); + return <> {t('not contains')}; case 'contains': - return t('contains'); + return <> {t('contains')}; case 'starts_with': - return t('starts with'); + return <> {t('starts with')}; case 'not_starts_with': - return t('not starts with'); + return <> {t('not starts with')}; case 'gt': - return <>>; + return <> >; case 'gte': - return <>≥; + return <> ≥; case 'lt': - return <><; + return <> <; case 'lte': - return <>≤; + return <> ≤; case 'empty': - return t('is empty'); + return <> {t('is empty')}; case 'not_empty': - return t('is not empty'); + return <> {t('is not empty')}; default: return null; }