f-4140/update: enable type operator in type filter in mydata page

BlueBrain · Aug 15, 2023 · 949c96f · 949c96f
1 parent 2c944f4
commit 949c96f
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 12 deletions.
diff --git a/src/shared/canvas/MyData/MyData.tsx b/src/shared/canvas/MyData/MyData.tsx
@@ -31,6 +31,7 @@ const HomeMyData: React.FC<{}> = () => {
       locate,
       issuer,
       types,
+      typeOperator,
     },
     setFilterOptions,
   ] = React.useReducer(
@@ -51,6 +52,7 @@ const HomeMyData: React.FC<{}> = () => {
       locate: false,
       issuer: 'createdBy',
       types: [],
+      typeOperator: 'OR',
     }
   );
 
@@ -88,13 +90,15 @@ const HomeMyData: React.FC<{}> = () => {
         issuer,
         date,
         order,
+        typeOperator,
         types: resourceTypes,
       },
     ],
     retry: false,
     queryFn: () =>
       nexus.Resource.list(undefined, undefined, {
         size,
+        typeOperator,
         from: offset,
         [issuer]: issuerUri,
         ...(locate && query.trim().length
@@ -144,6 +148,7 @@ const HomeMyData: React.FC<{}> = () => {
           locate,
           issuer,
           setFilterOptions,
+          typeOperator,
         }}
       />
       <MyDataTable

diff --git a/src/shared/canvas/MyData/types.ts b/src/shared/canvas/MyData/types.ts
@@ -18,6 +18,7 @@ export type TFilterOptions = {
   sort: string[];
   locate: boolean;
   issuer: TIssuer;
+  typeOperator: 'AND' | 'OR';
 };
 export type TCurrentDate = Pick<
   TFilterOptions,
@@ -34,7 +35,7 @@ export type TTitleProps = {
 };
 export type THeaderFilterProps = Pick<
   THeaderProps,
-  'types' | 'dateField' | 'setFilterOptions'
+  'types' | 'dateField' | 'setFilterOptions' | 'typeOperator'
 >;
 export type THeaderTitleProps = Pick<
   THeaderProps,

diff --git a/src/shared/molecules/MyDataHeader/MyDataHeader.tsx b/src/shared/molecules/MyDataHeader/MyDataHeader.tsx
@@ -11,6 +11,7 @@ const MyDataHeader: React.FC<THeaderProps> = ({
   setFilterOptions,
   locate,
   issuer,
+  typeOperator,
 }) => {
   return (
     <div className="my-data-header">
@@ -32,6 +33,7 @@ const MyDataHeader: React.FC<THeaderProps> = ({
           locate,
           setFilterOptions,
           issuer,
+          typeOperator,
         }}
       />
     </div>

diff --git a/src/shared/molecules/MyDataHeader/MyDataHeaderFilters/index.tsx b/src/shared/molecules/MyDataHeader/MyDataHeaderFilters/index.tsx
@@ -36,6 +36,7 @@ const MyDataHeaderTitle = ({
 
 const MyDataHeaderFilters = ({
   types,
+  typeOperator,
   dateField,
   setFilterOptions,
 }: THeaderFilterProps) => {
@@ -47,6 +48,7 @@ const MyDataHeaderFilters = ({
       <TypeSelector
         {...{
           types,
+          typeOperator,
           updateOptions: setFilterOptions,
           styles: {
             container: { width: '300px' },

diff --git a/src/shared/molecules/TypeSelector/TypeSelector.tsx b/src/shared/molecules/TypeSelector/TypeSelector.tsx
@@ -1,7 +1,15 @@
 import React, { useCallback, useRef, useState, ReactElement } from 'react';
 import { NexusClient } from '@bbp/nexus-sdk';
 import { useNexusContext } from '@bbp/react-nexus';
-import { Checkbox, Col, Input, Radio, Row, Select } from 'antd';
+import {
+  Checkbox,
+  Col,
+  Input,
+  Radio,
+  RadioChangeEvent,
+  Row,
+  Select,
+} from 'antd';
 import { isString, startCase } from 'lodash';
 import { useQuery } from 'react-query';
 import { prettifyNumber } from '../../../utils/formatNumber';
@@ -15,6 +23,11 @@ import {
 import isValidUrl from '../../../utils/validUrl';
 import './style.less';
 
+const typesOperatorOptions = [
+  { label: 'AND', value: 'AND' },
+  { label: 'OR', value: 'OR' },
+];
+
 const getTypesByAggregation = async ({
   nexus,
   orgLabel,
@@ -105,6 +118,7 @@ const TypeSelector = ({
   project,
   types,
   styles,
+  typeOperator,
   updateOptions,
   defaultValue,
   afterUpdate,
@@ -165,15 +179,19 @@ const TypeSelector = ({
     e.preventDefault();
     e.stopPropagation();
     const newTypes = types?.find((item: TType) => item.value === type.value)
-      ? []
-      : [type];
+      ? types.filter((item: TType) => item.value !== type.value)
+      : [...(types ? types : []), type];
     updateOptions({
       types: newTypes,
     });
     afterUpdate?.(newTypes);
   };
   const renderedTypes = typeSearchValue ? typesOptionsArray : typeOptions ?? [];
-
+  const onTypeOperatorChange = ({ target: { value } }: RadioChangeEvent) => {
+    updateOptions({
+      typeOperator: value,
+    });
+  };
   return (
     <div className="types-selector" style={styles?.container}>
       <div className="types-selector-wrapper">
@@ -197,12 +215,15 @@ const TypeSelector = ({
           aria-label="type-filter"
           dropdownRender={() => (
             <>
-              <div className=''>
-                  <label htmlFor="typeOperator">Select Type Operator</label>
-                  <Radio.Group name='typeOperator'>
-                    <Radio.Button value="AND">AND</Radio.Button>
-                    <Radio.Button value="OR">OR</Radio.Button>
-                  </Radio.Group>
+              <div className="type-operator-selector">
+                <div>Select Type Operator</div>
+                <Radio.Group
+                  value={typeOperator}
+                  optionType="default"
+                  name="typeOperator"
+                  options={typesOperatorOptions}
+                  onChange={onTypeOperatorChange}
+                />
               </div>
               <div className="types-selector-search-container">
                 <Input.Search

diff --git a/src/shared/molecules/TypeSelector/style.less b/src/shared/molecules/TypeSelector/style.less
@@ -7,6 +7,7 @@
   &::placeholder {
     color: @fusion-daybreak-10 !important;
   }
+
   .ant-select-selector {
     background-color: var(--types-background-color) !important;
   }
@@ -21,6 +22,13 @@
   padding: 0 !important;
 }
 
+.type-operator-selector {
+  padding: 10px 5px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
 .types-selector-search-container {
   padding: 10px 5px;
   display: flex;

diff --git a/src/shared/molecules/TypeSelector/types.ts b/src/shared/molecules/TypeSelector/types.ts
@@ -36,6 +36,10 @@ export type TTypeSelectorProps = {
   types?: TType[];
   styles?: TTypeSelectorStyle;
   defaultValue?: TType[];
-  updateOptions: (options: { types?: TType[] }) => void;
+  typeOperator?: 'AND' | 'OR';
+  updateOptions(options: {
+    types?: TType[];
+    typeOperator?: 'AND' | 'OR';
+  }): void;
   afterUpdate?: (types?: TType[]) => void;
 };