feat(UserFilter): add avatar rendering and separator option in user f…

…ilter
DevoInc · Jan 31, 2025 · 9f0309e · 9f0309e
1 parent 1b1b1ac
commit 9f0309e
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 27 deletions.
diff --git a/packages/table/src/filters/UserFilter/UserFilter.stories.tsx b/packages/table/src/filters/UserFilter/UserFilter.stories.tsx
@@ -24,6 +24,9 @@ export const Base: Story = {
             email: '[email protected]',
             colorScheme: 'error',
           },
+          'separator': {
+            isSeparator: true
+          },
           'test b': {
             name: 'John',
             email: '[email protected]',

diff --git a/packages/table/src/filters/UserFilter/UserFilter.tsx b/packages/table/src/filters/UserFilter/UserFilter.tsx
@@ -1,24 +1,43 @@
 import * as React from 'react';
 
-import { SelectControl, type TSelectOption } from '@devoinc/genesys-ui';
+import {
+  SelectControl,
+  type TSelectOption,
+  Avatar,
+} from '@devoinc/genesys-ui';
 
 import type { TFilterContext, TFilter } from '../../declarations';
 import type { TUserFilterValue } from './declarations';
 import { FilterContainer } from '../common';
 import { TContextUser } from '../../renderers';
-import { concatenateValues } from './util';
+//import { concatenateValues } from './util';
 
 export const UserFilter: React.FC<TFilter> = ({ colDef, onChange }) => {
   const context = colDef?.context as TContextUser & TFilterContext;
   const keys = Object.keys(context?.userMapping ?? {});
-  const concatedOptions = concatenateValues(context?.userMapping ?? {});
+  const AvatarCmp = ({ user }) => {
+    return (
+      <Avatar
+        imageSrc={user?.avatar}
+        colorScheme={user?.colorScheme || 'info'}
+        size="xxxs"
+        name={user?.name}
+      />
+    );
+  };
   const options = Object.values(context?.userMapping ?? {}).map(
     (user, index) => {
-      return {
-        value: keys[index],
-        label: user.name,
-        description: user.subtitle,
-      } as TSelectOption;
+      if (keys[index] === 'separator') {
+        return {
+          isSeparator: true,
+        } as TSelectOption;
+      } else {
+        return {
+          value: keys[index],
+          label: user.name,
+          icon: <AvatarCmp user={user} />,
+        } as TSelectOption;
+      }
     },
   );
   const filterValue = context?.filterValue as TUserFilterValue;
@@ -28,8 +47,8 @@ export const UserFilter: React.FC<TFilter> = ({ colDef, onChange }) => {
       <SelectControl
         isMulti
         size="sm"
-        multipleSubtle
         closeMenuOnSelect={false}
+        multipleSubtle
         selectAllBtn
         hideSelectedOptions={false}
         onChange={(val: TSelectOption[]) => {
@@ -39,12 +58,7 @@ export const UserFilter: React.FC<TFilter> = ({ colDef, onChange }) => {
         defaultInputValue={colDef?.context?.defaultValue as string}
         options={options}
         value={value}
-        filterOption={(option, value) => {
-          const optionValue = option.value;
-          return concatedOptions[optionValue].includes(
-            String(value).toLowerCase(),
-          );
-        }}
+        minMenuWidth={'24rem'}
       />
     </FilterContainer>
   );

diff --git a/packages/table/src/renderers/UserRenderer/UserRenderer.tsx b/packages/table/src/renderers/UserRenderer/UserRenderer.tsx
@@ -16,7 +16,6 @@ export const UserRenderer: React.FC<TCellRenderer<string, TContextUser>> = ({
 
   const user = userInfo[value];
   const name = user?.name || value;
-
   return user?.email || user?.job || user?.role ? (
     <Popover placement="bottom-start" id="story-userinfo">
       {({ toggle, ref, isOpened, setOpened }) => {
@@ -32,10 +31,9 @@ export const UserRenderer: React.FC<TCellRenderer<string, TContextUser>> = ({
             <UserInfo.Avatar
               avatar={user?.avatar}
               avatarColorScheme={user?.colorScheme || 'info'}
-              avatarSize="xs"
+              avatarSize="xxxs"
               format="base"
               name={name}
-              subtitle={user?.subtitle}
             />
           </Box>
         );
@@ -45,10 +43,9 @@ export const UserRenderer: React.FC<TCellRenderer<string, TContextUser>> = ({
           <UserInfo.Avatar
             avatar={user?.avatar}
             avatarColorScheme={user?.colorScheme || 'info'}
-            avatarSize="xs"
+            avatarSize="xxxs"
             format="base"
             name={name}
-            subtitle={user?.subtitle}
           />
         </Panel.Header>
         <Panel.Body>
@@ -64,10 +61,9 @@ export const UserRenderer: React.FC<TCellRenderer<string, TContextUser>> = ({
     <UserInfo.Avatar
       avatar={user?.avatar}
       avatarColorScheme={user?.colorScheme || 'info'}
-      avatarSize="xs"
+      avatarSize="xxxs"
       format="base"
       name={name}
-      subtitle={user?.subtitle}
     />
   );
 };
diff --git a/packages/table/stories/table/BasicTable.stories.tsx b/packages/table/stories/table/BasicTable.stories.tsx
@@ -13,6 +13,10 @@ import {
 import { ROW_HEIGHT_MD } from '../../src/constants';
 import { allTypesData } from './data/allTypesData';
 import { AllTypesColumn } from './column/AllTypesColumn';
+import { useFilterStruct } from '../../src/hooks/useFilterStruct';
+import { filterDataByFilterStruct } from '../../src/helpers/filterDataByFilterStruct';
+import { updateColDefsWithFilterStruct } from '../../src/helpers/updateColDefsWithFilterStruct';
+
 // import { Holo } from '@devoinc/holo';
 // import { performanceColumn } from './column/performanceColumn';
 // import { performanceData } from './data/performanceData';
@@ -31,9 +35,10 @@ type Story = StoryObj<typeof BasicTable>;
 const BasicCmp = ({ data, colDefs }) => {
   const [newData, setNewData] = React.useState(data);
   const { orderStruct, onSort } = useOrderStruct([{ id: 'id', sort: 'desc' }]);
-  React.useEffect(() => {
-    setNewData([...newData].sort(orderDataByOrderStruct(orderStruct)));
-  }, [onSort]);
+  const { filterStruct, onFilter } = useFilterStruct();
+
+  const newColDef = updateColDefsWithFilterStruct(colDefs, filterStruct);
+
   return (
     <Flex flexDirection="column" gap="cmp-md" height={'auto'}>
       <Flex.Item>
@@ -50,8 +55,13 @@ const BasicCmp = ({ data, colDefs }) => {
           textsCell={({ rowIndex }) =>
             rowIndex % 2 === 0 ? 'soy par' : 'soy impar'
           }
-          data={newData}
-          colDefs={updateColDefsWithOrderStruct(colDefs, orderStruct)}
+          onFilter={(curColDef, value, type) => {
+            onFilter(curColDef.id, value, type);
+          }}
+          data={[...newData]
+            .filter(filterDataByFilterStruct(filterStruct))
+            .sort(orderDataByOrderStruct(orderStruct))}
+          colDefs={updateColDefsWithOrderStruct(newColDef, orderStruct)}
           defaultColDef={{
             isExpandable: true,
           }}