diff --git a/src/components/AddCaseButtons/AddCaseButtons.tsx b/src/components/AddCaseButtons/AddCaseButtons.tsx index 162d82fa..284c1f76 100644 --- a/src/components/AddCaseButtons/AddCaseButtons.tsx +++ b/src/components/AddCaseButtons/AddCaseButtons.tsx @@ -1,3 +1,4 @@ +/* eslint-disable max-lines-per-function */ import { Button, Icon } from '@equinor/eds-core-react'; import { add as ADD } from '@equinor/eds-icons'; import { diff --git a/src/features/ModelTable/ModelTable.tsx b/src/features/ModelTable/ModelTable.tsx index 4bc42423..b0741aa1 100644 --- a/src/features/ModelTable/ModelTable.tsx +++ b/src/features/ModelTable/ModelTable.tsx @@ -1,12 +1,23 @@ +/* eslint-disable max-lines */ /* eslint-disable no-empty-pattern */ /* eslint-disable max-lines-per-function */ import { ChangeEvent, CSSProperties } from 'react'; import { useMsal } from '@azure/msal-react'; -import { Button, Checkbox } from '@equinor/eds-core-react'; -import { EdsDataGrid } from '@equinor/eds-data-grid-react'; +import { + Button, + Checkbox, + TextField, + Typography, +} from '@equinor/eds-core-react'; +import { + EdsDataGrid, + FilterWrapper, + HeaderContext, +} from '@equinor/eds-data-grid-react'; import { useQuery } from '@tanstack/react-query'; import { useNavigate } from 'react-router-dom'; import { + AnalogueModelList, AnalogueModelsService, OpenAPI, StratigraphicGroupDto, @@ -94,6 +105,62 @@ export const ModelTable = () => { /* Make sure the header row in EdsDataGrid is vertically middle-aligned when filter icons are shown */ const headerStyle = (): CSSProperties => ({ verticalAlign: 'middle' }); + const filterComponent = ({ + onChange, + value, + }: { + onChange: (value: unknown) => void; + value: unknown; + }) => ( + ) => + onChange(e.currentTarget.value) + } + /> + ); + + const headerComponent = ( + title: HeaderContext, + header: string, + ) => { + return ( +
+ + {header} + + +
+ ); + }; + + const filterFunction = (filterValue: string, data: string[]) => { + if (!filterValue) return true; + const value = filterValue.replaceAll(' ', '').split(','); + + let arr: string[] = []; + value.forEach((item: string) => { + if (item === '') return; + arr = arr.concat( + data.filter((key: string) => key.toLowerCase().includes(item)), + ); + }); + + if (arr && arr.length > 0) return true; + return false; + }; + return ( { { accessorKey: 'name', header: 'Model name', id: 'name', size: 200 }, { id: 'outcrops', - header: 'Outcrop', - enableColumnFilter: false, + header: (header) => headerComponent(header, 'Outcrop'), + filterFn: (row, columnId, filterValue) => + filterFunction( + filterValue, + row.original.outcrops.map((i) => i.name), + ), size: 100, cell: ({ row }) => ( @@ -151,8 +222,14 @@ export const ModelTable = () => { }, { id: 'country', - header: 'Country', - enableColumnFilter: false, + header: (header) => headerComponent(header, 'Country'), + filterFn: (row, columnId, filterValue) => + filterFunction( + filterValue, + row.original.stratigraphicGroups.map( + (i) => i.country.identifier, + ), + ), size: 120, cell: ({ row }) => ( @@ -166,8 +243,12 @@ export const ModelTable = () => { }, { id: 'field', - header: 'Field', - enableColumnFilter: false, + header: (header) => headerComponent(header, 'Field'), + filterFn: (row, columnId, filterValue) => + filterFunction( + filterValue, + row.original.stratigraphicGroups.map((i) => i.field.identifier), + ), size: 120, cell: ({ row }) => ( @@ -181,8 +262,14 @@ export const ModelTable = () => { }, { id: 'stratigraphicColumn', - header: 'Stratigraphic column', - enableColumnFilter: false, + header: (header) => headerComponent(header, 'Stratigraphic column'), + filterFn: (row, columnId, filterValue) => + filterFunction( + filterValue, + row.original.stratigraphicGroups.map( + (i) => i.stratColumn.identifier, + ), + ), size: 230, cell: ({ row }) => ( @@ -196,8 +283,14 @@ export const ModelTable = () => { }, { id: 'group', - header: 'Level 1 (group)', - enableColumnFilter: false, + header: (header) => headerComponent(header, 'Level 1 (group)'), + filterFn: (row, columnId, filterValue) => + filterFunction( + filterValue, + getRowGroup(row.original.stratigraphicGroups).map( + (i) => i.identifier, + ), + ), size: 150, cell: ({ row }) => (