Ms2: fuzy search

src/management-system-v2/app/(dashboard)/iam/roles/role-page.tsx

@@ -3,7 +3,7 @@
 import { FC, useState } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
 import { Tooltip, Space, Button, Result, Table, Popconfirm, App } from 'antd';
-import { useGetAsset, useDeleteAsset, ApiData } from '@/lib/fetch-data';
+import { useGetAsset, useDeleteAsset } from '@/lib/fetch-data';
 import { CloseOutlined } from '@ant-design/icons';
 import Content from '@/components/content';
 import HeaderActions from './header-actions';
@@ -14,8 +14,6 @@ import Bar from '@/components/bar';
 import { AuthCan } from '@/lib/clientAuthComponents';
 import { useAbilityStore } from '@/lib/abilityStore';
 
-type Role = ApiData<'/roles', 'get'>[number];
-
 const RolesPage: FC = () => {
   const { message: messageApi } = App.useApp();
   const ability = useAbilityStore((store) => store.ability);
@@ -25,12 +23,17 @@ const RolesPage: FC = () => {
     onError: () => messageApi.open({ type: 'error', content: 'Something went wrong' }),
   });
 
-  const { setSearchQuery, filteredData: filteredRoles } = useFuzySearch(roles || [], ['name'], {
-    useSearchParams: false,
+  const { setSearchQuery, filteredData: filteredRoles } = useFuzySearch({
+    data: roles || [],
+    keys: ['name'],
+    highlightedKeys: ['name'],
+    transformData: (items) =>
+      items.map((item) => ({ ...item.item, name: item.item.name.highlighted })),
   });
+  type FilteredRole = (typeof filteredRoles)[number];
 
   const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
-  const [selectedRow, setSelectedRows] = useState<Role[]>([]);
+  const [selectedRow, setSelectedRows] = useState<FilteredRole[]>([]);
 
   const cannotDeleteSelected = selectedRow.some(
     (role) => !ability.can('delete', toCaslResource('Role', role)),
@@ -47,20 +50,24 @@ const RolesPage: FC = () => {
       title: 'Name',
       dataIndex: 'name',
       key: 'display',
-      render: (name: string, role: Role) => <Link href={`/iam/roles/${role.id}`}>{name}</Link>,
+      render: (name: string, role: FilteredRole) => (
+        <Link style={{ color: '#000' }} href={`/iam/roles/${role.id}`}>
+          {name}
+        </Link>
+      ),
     },
     {
       title: 'Members',
       dataIndex: 'members',
-      render: (_: any, record: Role) => record.members.length,
+      render: (_: any, record: FilteredRole) => record.members.length,
       key: 'username',
     },
     {
       dataIndex: 'id',
       key: 'tooltip',
       title: '',
       width: 100,
-      render: (id: string, role: Role) =>
+      render: (id: string, role: FilteredRole) =>
         selectedRowKeys.length === 0 ? (
           <AuthCan action="delete" resource={toCaslResource('Role', role)}>
             <Tooltip placement="top" title={'Delete'}>
@@ -112,9 +119,9 @@ const RolesPage: FC = () => {
         }}
       />
 
-      <Table
-        columns={columns}
+      <Table<FilteredRole>
         dataSource={filteredRoles}
+        columns={columns}
         rowSelection={{
           selectedRowKeys,
           onChange: (selectedRowKeys, selectedRows) => {

src/management-system-v2/components/bpmn-viewer.tsx

@@ -14,16 +14,14 @@ const BPMNViewer =
   typeof window !== 'undefined' ? import('bpmn-js/lib/Viewer').then((mod) => mod.default) : null;
 
 type ViewerProps = {
-  selectedElement?: Process | undefined;
+  selectedElementId?: string;
   rerenderTrigger?: any;
   reduceLogo?: boolean;
 };
 
-const Viewer: FC<ViewerProps> = ({ selectedElement, rerenderTrigger, reduceLogo }) => {
+const Viewer: FC<ViewerProps> = ({ selectedElementId, rerenderTrigger, reduceLogo }) => {
   const [initialized, setInitialized] = useState(false);
-  const { data: bpmn, isSuccess } = useProcessBpmn(
-    selectedElement ? selectedElement.definitionId : '',
-  );
+  const { data: bpmn, isSuccess } = useProcessBpmn(selectedElementId ?? '');
   const canvas = useRef<HTMLDivElement>(null);
   const previewer = useRef<ViewerType | null>(null);
 
@@ -42,18 +40,18 @@ const Viewer: FC<ViewerProps> = ({ selectedElement, rerenderTrigger, reduceLogo
   }, [bpmn]);
 
   useEffect(() => {
-    if (initialized && bpmn && selectedElement) {
+    if (initialized && bpmn && selectedElementId) {
       previewer.current!.importXML(bpmn).then(() => {
         (previewer.current!.get('canvas') as any).zoom('fit-viewport', 'auto');
       });
     }
-  }, [initialized, bpmn, selectedElement]);
+  }, [initialized, bpmn, selectedElementId]);
 
   useEffect(() => {
-    if (initialized && selectedElement) {
+    if (initialized && selectedElementId) {
       (previewer.current!.get('canvas') as any)?.zoom('fit-viewport', 'auto');
     }
-  }, [initialized, rerenderTrigger, selectedElement]);
+  }, [initialized, rerenderTrigger, selectedElementId]);
 
   return (
     <div

src/management-system-v2/components/previewProcess.tsx

@@ -16,9 +16,10 @@ import { useProcessBpmn } from '@/lib/process-queries';
 
 import type ViewerType from 'bpmn-js/lib/Viewer';
 import Viewer from './bpmn-viewer';
+import { ProcessListProcess } from './processes';
 
 type PropertiesPanelProperties = {
-  selectedElement?: ApiData<'/process', 'get'>[number];
+  selectedElement?: ProcessListProcess;
   setOpen: (open: boolean) => void;
 };
 
@@ -81,7 +82,7 @@ const Preview: React.FC<PropertiesPanelProperties> = ({ selectedElement, setOpen
         }}
         onMouseDown={handleMouseDown}
       ></div>
-      <Viewer selectedElement={selectedElement} rerenderTrigger={drawerHeight} />
+      <Viewer selectedElementId={selectedElement?.definitionId} rerenderTrigger={drawerHeight} />
     </Drawer>
   );
 

src/management-system-v2/components/process-icon-list.tsx

@@ -4,19 +4,16 @@ import React, { Dispatch, FC, Key, SetStateAction } from 'react';
 
 import TabCard from './tabcard-model-metadata';
 
-import { ApiData } from '@/lib/fetch-data';
 import ScrollBar from './scrollbar';
-
-type Processes = ApiData<'/process', 'get'>;
+import { ProcessListProcess } from './processes';
 
 type IconViewProps = {
-  data?: Processes;
+  data?: ProcessListProcess[];
   selection: Key[];
   setSelection: Dispatch<SetStateAction<Key[]>>;
-  search?: string;
 };
 
-const IconView: FC<IconViewProps> = ({ data, selection, setSelection, search }) => {
+const IconView: FC<IconViewProps> = ({ data, selection, setSelection }) => {
   return (
     <>
       <ScrollBar width="12px">
@@ -29,15 +26,14 @@ const IconView: FC<IconViewProps> = ({ data, selection, setSelection, search })
             gridGap: '20px',
           }}
         >
-          {data?.map((item, i, arr) => (
+          {data?.map((item) => (
             <TabCard
               key={item.definitionId}
               item={item}
               completeList={data!}
               selection={selection}
               setSelection={setSelection}
               tabcard={false}
-              search={search}
             />
           ))}
         </div>

src/management-system-v2/components/process-info-card.tsx

@@ -1,18 +1,17 @@
 'use client';
 
-import { generateDateString, getPreferences, addUserPreference } from '@/lib/utils';
+import { generateDateString } from '@/lib/utils';
 import { Card, Divider, Button } from 'antd';
 import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons';
 import React, { FC, Key, use, useCallback, useEffect, useState } from 'react';
 import Viewer from './bpmn-viewer';
 import classNames from 'classnames';
 import { ApiData } from '@/lib/fetch-data';
 import { useUserPreferences } from '@/lib/user-preferences';
-
-type Processes = ApiData<'/process', 'get'>;
+import { ProcessListProcess } from './processes';
 
 type MetaDataType = {
-  data?: Processes;
+  data?: ProcessListProcess[];
   selection: Key[];
   triggerRerender?: () => void;
 };
@@ -103,7 +102,7 @@ const MetaData: FC<MetaDataType> = ({ data, selection, triggerRerender }) => {
                 <DoubleRightOutlined />
               </Button>
               {selection.length
-                ? data?.find((item) => item.definitionId === selection[0])?.definitionName
+                ? data?.find((item) => item.definitionId === selection[0])?.definitionName.value
                 : 'How to PROCEED?'}
             </>
           }
@@ -119,7 +118,9 @@ const MetaData: FC<MetaDataType> = ({ data, selection, triggerRerender }) => {
               <>
                 {showViewer && (
                   <Viewer
-                    selectedElement={data?.find((item) => item.definitionId === selection[0])}
+                    selectedElementId={
+                      data?.find((item) => item.definitionId === selection[0])?.definitionId
+                    }
                     reduceLogo={true}
                   />
                 )}
@@ -155,7 +156,7 @@ const MetaData: FC<MetaDataType> = ({ data, selection, triggerRerender }) => {
                 <h5>
                   <b>Description</b>
                 </h5>
-                <p>{data?.find((item) => item.definitionId === selection[0])?.description}</p>
+                <p>{data?.find((item) => item.definitionId === selection[0])?.description.value}</p>
 
                 <Divider style={{ width: '140%', marginLeft: '-20%' }} />
                 <h3>Access Rights</h3>