[frontend] Improv filter style

OpenBAS-Platform · Sep 16, 2024 · 6e782f9 · 6e782f9
1 parent 35c2154
commit 6e782f9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 26 deletions.
diff --git 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<Props> = ({
   // 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<Props> = ({
     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
@@ -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<Props> = ({
       return (<span><strong>{t(filter.key)}</strong>{' '}<span>{convertOperatorToIcon(t, filter.operator)} {toValues(options)}</span></span>);
     }
     return (
-      <span className={classes.container}>
-        <strong onClick={handleOpen} className={classes.title}>{t(filter.key)}</strong>{' '}
-        <span>{convertOperatorToIcon(t, filter.operator)} {toValues(options)}</span>
-      </span>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <span onClick={handleOpen} className={classes.container}>
+          <strong>{t(filter.key)}</strong>
+          {convertOperatorToIcon(t, filter.operator)}
+        </span>
+        <>&nbsp;</>
+        {toValues(options)}
+      </div>
     );
   };
 
+  const chipVariant = (!filter.values || filter.values.length === 0) && !['nil', 'not_nil'].includes(filter.operator ?? 'eq')
+    ? 'outlined'
+    : 'filled';
+
   return (
     <>
       <Tooltip
         title={title(true)}
       >
         <Chip
+          variant={chipVariant}
           label={title(false)}
           onDelete={handleRemoveFilter}
           component="div"

diff --git a/openbas-front/src/components/common/queryable/filter/FilterUtils.tsx b/openbas-front/src/components/common/queryable/filter/FilterUtils.tsx
@@ -41,29 +41,29 @@ export const isEmptyFilter = (filterGroup: FilterGroup, key: string) => {
 export const convertOperatorToIcon = (t: (text: string) => string, operator: Filter['operator']) => {
   switch (operator) {
     case 'eq':
-      return <>=</>;
+      return <>&nbsp;=</>;
     case 'not_eq':
-      return <>&#8800;</>;
+      return <>&nbsp;&#8800;</>;
     case 'not_contains':
-      return t('not contains');
+      return <>&nbsp;{t('not contains')}</>;
     case 'contains':
-      return t('contains');
+      return <>&nbsp;{t('contains')}</>;
     case 'starts_with':
-      return t('starts with');
+      return <>&nbsp;{t('starts with')}</>;
     case 'not_starts_with':
-      return t('not starts with');
+      return <>&nbsp;{t('not starts with')}</>;
     case 'gt':
-      return <>&#62;</>;
+      return <>&nbsp;&#62;</>;
     case 'gte':
-      return <>&#8805;</>;
+      return <>&nbsp;&#8805;</>;
     case 'lt':
-      return <>&#60;</>;
+      return <>&nbsp;&#60;</>;
     case 'lte':
-      return <>&#8804;</>;
+      return <>&nbsp;&#8804;</>;
     case 'empty':
-      return t('is empty');
+      return <>&nbsp;{t('is empty')}</>;
     case 'not_empty':
-      return t('is not empty');
+      return <>&nbsp;{t('is not empty')}</>;
     default:
       return null;
   }