Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: search and filter through namespaces and keys #142

Open
wants to merge 1 commit into
base: DHIS2-18532/update-key-values
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions src/components/sections/KeysDataSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import classes from '../../App.module.css'
import useCustomAlert from '../../hooks/useCustomAlert'
import useSearchFilter from '../../hooks/useSearchFilter'
import i18n from '../../locales'
import ErrorNotice from '../error/ErrorNotice'
import PanelHeader from '../header/PanelHeader'
Expand Down Expand Up @@ -39,6 +40,10 @@ const KeysDataSection = ({ query }) => {
}
)

const { searchTerm, setSearchTerm, filteredData } = useSearchFilter(
data?.results
)

const numberOfKeysInNamespace = data?.results?.length

const handleCreate = async ({ key }) => {
Expand Down Expand Up @@ -144,12 +149,16 @@ const KeysDataSection = ({ query }) => {
/>
</PanelHeader>
<div className={classes.keysPanelMidSection}>
<SearchField placeholder={i18n.t('Search keys')} />
<SearchField
searchTerm={searchTerm}
setSearchTerm={setSearchTerm}
placeholder={i18n.t('Search keys')}
/>
</div>
<div>
{data && (
{filteredData && (
<ItemsTable
data={data}
tableData={filteredData}
label={i18n.t('Key')}
setOpenDeleteModal={setOpenDeleteModal}
setSelectedItem={setSelectedKey}
Expand Down
15 changes: 12 additions & 3 deletions src/components/sections/NamespaceDataSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, { useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import classes from '../../App.module.css'
import useCustomAlert from '../../hooks/useCustomAlert'
import useSearchFilter from '../../hooks/useSearchFilter'
import i18n from '../../locales'
import ErrorNotice from '../error/ErrorNotice'
import CenteredLoader from '../loader/Loader'
Expand Down Expand Up @@ -31,6 +32,10 @@ const NamespaceDataSection = ({ query }) => {

const { error, loading, data, refetch } = useDataQuery<QueryResults>(query)

const { searchTerm, setSearchTerm, filteredData } = useSearchFilter(
data?.results
)

const handleCreate = async (values) => {
await engine.mutate(
{
Expand Down Expand Up @@ -114,17 +119,21 @@ const NamespaceDataSection = ({ query }) => {
return (
<>
<div className={classes.midSection}>
<SearchField placeholder={i18n.t('Search namespaces')} />
<SearchField
placeholder={i18n.t('Search namespaces')}
searchTerm={searchTerm}
setSearchTerm={setSearchTerm}
/>
<CreateButton
label={i18n.t('New Namespace')}
handleClick={() => setOpenCreateModal(true)}
icon={<IconAdd24 color={colors.grey600} />}
/>
</div>
<div>
{data && (
{filteredData && (
<ItemsTable
data={data}
tableData={filteredData}
label={i18n.t('Namespace')}
setOpenDeleteModal={setOpenDeleteModal}
setSelectedItem={setSelectedNamespace}
Expand Down
14 changes: 13 additions & 1 deletion src/components/sections/SearchField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,25 @@ import React from 'react'
import classes from '../../App.module.css'
import i18n from '../../locales'

const SearchField = ({ placeholder }: { placeholder?: string }) => {
interface SearchFieldProps {
placeholder?: string
searchTerm: string
setSearchTerm: React.Dispatch<React.SetStateAction<string>>
}

const SearchField = ({
placeholder,
searchTerm,
setSearchTerm,
}: SearchFieldProps) => {
return (
<div className={classes.search}>
<InputField
dense
name="search"
placeholder={placeholder || i18n.t('Search')}
value={searchTerm}
onChange={(e) => setSearchTerm(e.value)}
/>
</div>
)
Expand Down
22 changes: 13 additions & 9 deletions src/components/table/ItemsTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,19 @@ import i18n from '../../locales'
import DeleteAction from './DeleteAction'
import SharingAction from './SharingAction'

interface TableProps {
data: {
results: string[]
}
interface ItemsTableProps {
tableData: string[]
label: string
setOpenDeleteModal: React.Dispatch<React.SetStateAction<boolean>>
setSelectedItem: React.Dispatch<React.SetStateAction<string>>
}

const ItemsTable = ({
data,
tableData,
label,
setOpenDeleteModal,
setSelectedItem,
}: TableProps) => {
}: ItemsTableProps) => {
const navigate = useNavigate()
const { namespace: currentNamespace, key } = useParams()

Expand All @@ -45,7 +43,7 @@ const ItemsTable = ({

return (
<div>
{data && (
{tableData && (
<DataTable layout="fixed" scrollHeight="75vh">
<TableHead>
<DataTableRow>
Expand All @@ -66,9 +64,9 @@ const ItemsTable = ({
</DataTableRow>
</TableHead>
<TableBody>
{data?.results?.length && (
{tableData?.length ? (
<>
{data.results.map((item, index) => {
{tableData.map((item, index) => {
return (
<DataTableRow
key={`${item}-${index}`}
Expand Down Expand Up @@ -119,6 +117,12 @@ const ItemsTable = ({
)
})}
</>
) : (
<DataTableRow>
<DataTableCell bordered>
{i18n.t('No items found')}
</DataTableCell>
</DataTableRow>
)}
</TableBody>
</DataTable>
Expand Down
28 changes: 28 additions & 0 deletions src/hooks/useSearchFilter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { useEffect, useState } from 'react'

const useSearchFilter = (itemsArray = []) => {
const [searchTerm, setSearchTerm] = useState(null)
const [filteredData, setFilteredData] = useState(null)

useEffect(() => {
if (!itemsArray.length) {
return
}
if (searchTerm) {
const filteredItemsArray = itemsArray.filter((item) =>
item.toLowerCase().includes(searchTerm.toLowerCase())
)
setFilteredData(filteredItemsArray)
} else {
setFilteredData(itemsArray)
}
}, [searchTerm, itemsArray])

return {
searchTerm,
setSearchTerm,
filteredData,
}
}

export default useSearchFilter
Loading