CM-296: add custom filtering to individuals and groups

src/components/GroupSearcher.js

@@ -28,9 +28,10 @@ import {
 import {
   DEFAULT_PAGE_SIZE,
   ROWS_PER_PAGE_OPTIONS,
-  RIGHT_GROUP_UPDATE, RIGHT_GROUP_DELETE,
+  RIGHT_GROUP_UPDATE, RIGHT_GROUP_DELETE, SOCIAL_PROTECTION_MODULE_NAME, BENEFIT_PLAN_LABEL,
 } from '../constants';
 import GroupFilter from './GroupFilter';
+import { applyNumberCircle } from '../util/searcher-utils';
 
 function GroupSearcher({
   intl,
@@ -55,9 +56,12 @@ function GroupSearcher({
   coreConfirm,
   clearConfirm,
   journalize,
+  CLEARED_STATE_FILTER,
 }) {
   const [groupToDelete, setGroupToDelete] = useState(null);
   const [deletedGroupUuids, setDeletedGroupUuids] = useState([]);
+  const [appliedCustomFilters, setAppliedCustomFilters] = useState([CLEARED_STATE_FILTER]);
+  const [appliedFiltersRowStructure, setAppliedFiltersRowStructure] = useState([CLEARED_STATE_FILTER]);
   const prevSubmittingMutationRef = useRef();
 
   function groupUpdatePageUrl(group) {
@@ -224,6 +228,15 @@ function GroupSearcher({
         exportFieldLabel={formatMessage(intl, 'individual', 'export.label')}
         cacheFiltersKey="groupsFilterCache"
         resetFiltersOnUnmount
+        isCustomFiltering
+        moduleName={SOCIAL_PROTECTION_MODULE_NAME}
+        objectType={BENEFIT_PLAN_LABEL}
+        additionalCustomFilterParams={{ type: 'GROUP' }}
+        appliedCustomFilters={appliedCustomFilters}
+        setAppliedCustomFilters={setAppliedCustomFilters}
+        appliedFiltersRowStructure={appliedFiltersRowStructure}
+        setAppliedFiltersRowStructure={setAppliedFiltersRowStructure}
+        applyNumberCircle={applyNumberCircle}
         rowDisabled={isRowDisabled}
         rowLocked={isRowDisabled}
       />

src/components/IndividualSearcher.js

@@ -12,6 +12,7 @@ import {
   withHistory,
   historyPush,
   downloadExport,
+  CLEARED_STATE_FILTER,
 } from '@openimis/fe-core';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -31,8 +32,9 @@ import {
   ROWS_PER_PAGE_OPTIONS,
   EMPTY_STRING,
   RIGHT_INDIVIDUAL_UPDATE,
-  RIGHT_INDIVIDUAL_DELETE,
+  RIGHT_INDIVIDUAL_DELETE, BENEFIT_PLAN_LABEL, SOCIAL_PROTECTION_MODULE_NAME,
 } from '../constants';
+import { applyNumberCircle } from '../util/searcher-utils';
 import IndividualFilter from './IndividualFilter';
 
 function IndividualSearcher({
@@ -61,6 +63,8 @@ function IndividualSearcher({
   errorIndividualExport,
 }) {
   const [individualToDelete, setIndividualToDelete] = useState(null);
+  const [appliedCustomFilters, setAppliedCustomFilters] = useState([CLEARED_STATE_FILTER]);
+  const [appliedFiltersRowStructure, setAppliedFiltersRowStructure] = useState([CLEARED_STATE_FILTER]);
   const [deletedIndividualUuids, setDeletedIndividualUuids] = useState([]);
   const prevSubmittingMutationRef = useRef();
 
@@ -197,6 +201,10 @@ function IndividualSearcher({
     return filters;
   };
 
+  useEffect(() => {
+    // refresh when appliedCustomFilters is changed
+  }, [appliedCustomFilters]);
+
   return (
     <div>
       <Searcher
@@ -224,6 +232,15 @@ function IndividualSearcher({
         rowLocked={isRowDisabled}
         exportable
         exportFetch={downloadIndividuals}
+        isCustomFiltering
+        moduleName={SOCIAL_PROTECTION_MODULE_NAME}
+        objectType={BENEFIT_PLAN_LABEL}
+        additionalCustomFilterParams={{ type: 'INDIVIDUAL' }}
+        appliedCustomFilters={appliedCustomFilters}
+        setAppliedCustomFilters={setAppliedCustomFilters}
+        appliedFiltersRowStructure={appliedFiltersRowStructure}
+        setAppliedFiltersRowStructure={setAppliedFiltersRowStructure}
+        applyNumberCircle={applyNumberCircle}
         exportFields={[
           'id',
           'first_name',

src/constants.js

@@ -43,3 +43,7 @@ export const GROUP_INDIVIDUAL_ROLES = {
 export const GROUP_INDIVIDUAL_ROLES_LIST = [
   GROUP_INDIVIDUAL_ROLES.HEAD, GROUP_INDIVIDUAL_ROLES.RECIPIENT,
 ];
+
+export const BENEFIT_PLAN_LABEL = 'BenefitPlan';
+
+export const SOCIAL_PROTECTION_MODULE_NAME = 'social_protection';

src/util/searcher-utils.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+// eslint-disable-next-line import/prefer-default-export
+export const applyNumberCircle = (number) => (
+  <div style={{
+    color: '#ffffff',
+    backgroundColor: '#006273',
+    borderRadius: '50%',
+    padding: '5px',
+    minWidth: '40px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontWeight: 'bold',
+    fontSize: '12px',
+    width: '20px',
+    height: '45px',
+    marginTop: '7px',
+  }}
+  >
+    {number}
+  </div>
+);