@dhis2-ui/select 10.16.1 → 10.16.3-alpha.1

package/src/simple-single-select/__stories__/WithServerSideFilteringDemo.js

@@ -0,0 +1,245 @@
+import { useDataEngine, useDataQuery } from '@dhis2/app-runtime'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { CustomDataProvider } from './simple-single-select-server-side-filtering/index.js'
+
+function dataElementToOption({ id, displayName }) {
+    return { value: id, label: displayName }
+}
+
+function useLoadDataElementQuery(options) {
+    return useDataQuery(
+        {
+            result: {
+                resource: 'dataElements',
+                id: ({ id }) => id,
+            },
+        },
+        { ...options, lazy: true }
+    )
+}
+
+function useLoadDataElementsQuery(options) {
+    return useDataQuery(
+        {
+            result: {
+                resource: 'dataElements',
+                params: ({ page }) => ({ page, pageSize: 10 }),
+            },
+        },
+        options
+    )
+}
+
+function useLoadFilteredDataElementsQuery(customOptions) {
+    const engine = useDataEngine()
+    const timeout = useRef(null)
+    const abortController = useRef()
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState(null)
+
+    const refetch = useCallback(
+        ({ searchTerm, page }) => {
+            if (timeout.current) {
+                clearTimeout(timeout.current)
+                abortController.current?.abort()
+            }
+
+            return new Promise((resolve, reject) => {
+                timeout.current = setTimeout(async () => {
+                    try {
+                        abortController.current = new AbortController()
+                        setLoading(true)
+
+                        const query = {
+                            result: {
+                                resource: 'dataElements',
+                                params: {
+                                    filter: [`displayName:ilike:${searchTerm}`],
+                                    pageSize: 10,
+                                    page,
+                                },
+                            },
+                        }
+
+                        const options = {
+                            ...customOptions,
+                            signal: abortController.current.signal,
+                        }
+
+                        try {
+                            const result = await engine.query(query, options)
+                            resolve(result)
+                        } catch (e) {
+                            setError(e)
+                        }
+
+                        abortController.current = null
+                        timeout.current = null
+                        setLoading(false)
+                    } catch (e) {
+                        reject(e)
+                    }
+                }, 200)
+            })
+        },
+        [abortController, engine, customOptions]
+    )
+
+    return { loading, error, refetch }
+}
+
+function ServerSideFilteringSelect() {
+    const [initializedSelectedLabel, setInitializedSelectedLabel] =
+        useState(false)
+    const [selectedOption, setSelectedOption] = useState({
+        value: 'fbfJHSPpUQD',
+        label: 'Loading...',
+    })
+
+    const [loadedOptions, setLoadedOptions] = useState([])
+    const [defaultPager, setDefaultPager] = useState({
+        page: 0,
+        pageSize: -1,
+        total: -1,
+        pageCount: -1,
+    })
+
+    const [searchTerm, _setSearchTerm] = useState('')
+    const [filteredOptions, setFilteredOptions] = useState([])
+    const [filterPager, setFilterPager] = useState({
+        page: 0,
+        pageSize: -1,
+        total: -1,
+        pageCount: -1,
+    })
+
+    const loadDataElementQuery = useLoadDataElementQuery({
+        onComplete: (data) => {
+            setSelectedOption(dataElementToOption(data.result.dataElements))
+            setInitializedSelectedLabel(true) // Done AFTER setting the option's label!
+        },
+        onError: () => {
+            setSelectedOption((option) => ({ ...option, label: option.value }))
+            setInitializedSelectedLabel(true) // Done AFTER setting the option's label!
+        },
+    })
+
+    const loadDataElementsQuery = useLoadDataElementsQuery({
+        onComplete: ({ result }) => {
+            setDefaultPager(result.pager)
+            setLoadedOptions((prevLoadedOptions) => [
+                ...prevLoadedOptions,
+                ...result.dataElements.map(dataElementToOption),
+            ])
+        },
+        onError: () => {
+            setDefaultPager((prevPager) => ({
+                ...prevPager,
+                pageCount: prevPager.page,
+                total: loadedOptions.length,
+            }))
+        },
+    })
+
+    const loadFilteredDataElementsQuery = useLoadFilteredDataElementsQuery({
+        onComplete: ({ result }) => {
+            setFilterPager(result.pager)
+            setFilteredOptions((prevFilteredOptions) => {
+                const newOptions = result.dataElements.map(dataElementToOption)
+
+                return result.pager.page === 1
+                    ? newOptions
+                    : [...prevFilteredOptions, ...newOptions]
+            })
+        },
+        onError: () => {
+            setFilterPager((prevPager) => ({
+                ...prevPager,
+                pageCount: prevPager.page,
+                total: filteredOptions.length,
+            }))
+        },
+    })
+
+    const loadingOptions =
+        loadDataElementsQuery.loading || loadFilteredDataElementsQuery.loading
+    const options = searchTerm ? filteredOptions : loadedOptions
+
+    const setSearchTerm = useCallback(
+        (nextSearchTerm) => {
+            _setSearchTerm(nextSearchTerm)
+
+            if (nextSearchTerm.trim()) {
+                loadFilteredDataElementsQuery.refetch({
+                    page: 1,
+                    searchTerm: nextSearchTerm,
+                })
+            }
+        },
+        [loadFilteredDataElementsQuery.refetch]
+    )
+
+    const loadNextPage = useCallback(() => {
+        const pager = searchTerm ? filterPager : defaultPager
+
+        if (pager.page === pager.pageCount || loadingOptions) {
+            return
+        }
+
+        if (searchTerm) {
+            loadFilteredDataElementsQuery.refetch({
+                page: pager.page + 1,
+                searchTerm,
+            })
+        } else {
+            loadDataElementsQuery.refetch({ page: pager.page + 1 })
+        }
+    }, [
+        filterPager,
+        defaultPager,
+        searchTerm,
+        loadingOptions,
+        loadFilteredDataElementsQuery.refetch,
+        loadDataElementsQuery.refetch,
+    ])
+
+    useEffect(
+        () => {
+            if (selectedOption?.value) {
+                loadDataElementQuery.refetch({ id: selectedOption.value })
+            } else {
+                setInitializedSelectedLabel(true)
+            }
+        },
+        // Needs to run on initial render only!
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []
+    )
+
+    return (
+        <SimpleSingleSelect
+            name="demo"
+            disabled={!initializedSelectedLabel}
+            loading={loadingOptions}
+            options={options}
+            selected={selectedOption}
+            filterable
+            filterValue={searchTerm}
+            filterPlaceholder="search for 'ART' or 'ANC'"
+            onFilterChange={setSearchTerm}
+            noMatchText="No options were found"
+            empty="Please use the search input to find data elements"
+            onChange={setSelectedOption}
+            onEndReached={loadNextPage}
+        />
+    )
+}
+
+const Wrapper = () => (
+    <CustomDataProvider>
+        <ServerSideFilteringSelect />
+    </CustomDataProvider>
+)
+
+export { Wrapper as WithServerSideFilteringDemo }

package/src/simple-single-select/__stories__/WithSimpleFilteringDemo.js

@@ -0,0 +1,50 @@
+import React, { useMemo, useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+
+const options = [
+    { label: 'No selection', value: '' },
+    { label: 'ANC 1st visit', value: 'anc_1st_visit' },
+    { label: 'ANC 2nd visit', value: 'anc_2nd_visit' },
+    { label: 'ARI treated follow-up', value: 'ari_treated_follow-up' },
+    { label: 'ARI treated with new', value: 'ari_treated_with_new' },
+]
+
+function filterOptions(options, searchTerm) {
+    // If there is no search term, we want to return all options
+    if (!searchTerm) {
+        return options
+    }
+
+    // We're transform both the label and the search term to
+    // lower-case strings so the search is case-insensitive
+    return options.filter(({ label }) => {
+        return label.toLowerCase().startsWith(searchTerm.toLowerCase())
+    })
+}
+
+export const WithSimpleFilteringDemo = () => {
+    // Handle actual value changes
+    const [selected, setSelected] = useState({
+        value: '',
+        label: 'No selection',
+    })
+
+    // Handle filtering
+    const [searchTerm, setSearchTerm] = useState('')
+    const filteredOptions = useMemo(
+        () => filterOptions(options, searchTerm),
+        [searchTerm]
+    )
+
+    return (
+        <SimpleSingleSelect
+            filterable
+            filterValue={searchTerm}
+            idPrefix="simple"
+            options={filteredOptions}
+            selected={selected}
+            onChange={setSelected}
+            onFilterChange={setSearchTerm}
+        />
+    )
+}

package/src/simple-single-select/__stories__/WithoutOptionsAndLoading.js

@@ -0,0 +1,16 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+
+export const WithoutOptionsAndLoading = () => {
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <SimpleSingleSelect
+            loading
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            options={[]}
+        />
+    )
+}

package/src/simple-single-select/__stories__/WithoutSelection.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions } from './options.js'
+
+export const WithoutSelection = () => {
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <SimpleSingleSelect
+            inputMaxHeight="50px"
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            options={fiveOptions}
+        />
+    )
+}

package/src/simple-single-select/__stories__/options.js

@@ -0,0 +1,96 @@
+export const options = [
+    {
+        label: 'None',
+        value: '',
+    },
+    {
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    },
+    {
+        label: 'ANC 2nd visit',
+        value: 'anc_2nd_visit',
+    },
+    {
+        label: 'ANC 3rd visit',
+        value: 'anc_3rd_visit',
+    },
+    {
+        label: 'ANC 4th or more visits',
+        value: 'anc_4th_or_more_visits',
+    },
+    {
+        label: 'ARI treated with antibiotics (pneumonia) follow-up',
+        value: 'ari_treated_with_antibiotics_(pneumonia)_follow-up',
+    },
+    {
+        label: 'ARI treated with antibiotics (pneumonia) new',
+        value: 'ari_treated_with_antibiotics_(pneumonia)_new',
+    },
+    {
+        label: 'ARI treated with antibiotics (pneumonia) referrals',
+        value: 'ari_treated_with_antibiotics_(pneumonia)_referrals',
+    },
+    {
+        label: 'ARI treated without antibiotics (cough) follow-up',
+        value: 'ari_treated_without_antibiotics_(cough)_follow-up',
+    },
+    {
+        label: 'ARI treated without antibiotics (cough) new',
+        value: 'ari_treated_without_antibiotics_(cough)_new',
+    },
+    {
+        label: 'ARI treated without antibiotics (cough) referrals',
+        value: 'ari_treated_without_antibiotics_(cough)_referrals',
+    },
+    {
+        label: 'ART No clients who stopped TRT due to TRT failure',
+        value: 'art_no_clients_who_stopped_trt_due_to_trt_failure',
+    },
+    {
+        label: 'ART No clients who stopped TRT due to adverse clinical status/event',
+        value: 'art_no_clients_who_stopped_trt_due_to_adverse_clinical_status/event',
+    },
+    {
+        label: 'ART No clients with change of regimen due to drug toxicity',
+        value: 'art_no_clients_with_change_of_regimen_due_to_drug_toxicity',
+    },
+    {
+        label: 'ART No clients with new adverse drug reaction',
+        value: 'art_no_clients_with_new_adverse_drug_reaction',
+    },
+    {
+        label: 'ART No started Opportunist Infection prophylaxis',
+        value: 'art_no_started_opportunist_infection_prophylaxis',
+    },
+    {
+        label: 'ART clients with new adverse clinical event',
+        value: 'art_clients_with_new_adverse_clinical_event',
+    },
+    {
+        label: 'ART defaulters',
+        value: 'art_defaulters',
+    },
+    {
+        label: 'ART enrollment stage 1',
+        value: 'art_enrollment_stage_1',
+    },
+    {
+        label: 'ART enrollment stage 2',
+        value: 'art_enrollment_stage_2',
+    },
+    {
+        label: 'ART enrollment stage 3',
+        value: 'art_enrollment_stage_3',
+    },
+    {
+        label: 'ART enrollment stage 4',
+        value: 'art_enrollment_stage_4',
+    },
+    {
+        label: 'ART entry point: No PMTCT',
+        value: 'art_entry_point:_no_pmtct',
+    },
+]
+
+export const fiveOptions = options.slice(0, 5)

package/src/simple-single-select/__stories__/simple-single-select-server-side-filtering/CustomDataProvider.js

@@ -0,0 +1,70 @@
+/* eslint-disable react/prop-types */
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { dataElements as allDataElements } from './dataElements.js'
+
+function randomBetween(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+const fakeNetworkDelay = ({ pager, dataElements, signal }) => {
+    const delay = randomBetween(750, 1550)
+    const response = { dataElements }
+    if (pager) {
+        response.pager = pager
+    }
+
+    return new Promise((resolve, reject) => {
+        const onAbort = () => {
+            clearTimeout(timeout)
+            reject('Aborted')
+        }
+
+        signal?.addEventListener('abort', onAbort)
+
+        const timeout = setTimeout(() => {
+            signal?.removeEventListener('abort', onAbort)
+            resolve(response)
+        }, delay)
+    })
+}
+
+const Provider = ({ children }) => {
+    const data = {
+        dataElements: (_, { id, params = {} }, { signal }) => {
+            if (id) {
+                const dataElement = allDataElements.find(
+                    (curDE) => id === curDE.id
+                )
+                return fakeNetworkDelay({ dataElements: dataElement, signal })
+            }
+
+            // Only this specific filter is supported by this server-mock
+            const searchTerm = params.filter
+                ? params.filter[0].split(':')[2]
+                : ''
+
+            const filteredDataElements = searchTerm
+                ? allDataElements.filter(({ displayName }) =>
+                      displayName.startsWith(searchTerm)
+                  )
+                : allDataElements
+
+            const page = params.page || 1
+            const total = filteredDataElements.length
+            const pageSize = params.pageSize || 50
+            const pageCount = Math.ceil(total / pageSize)
+            const pager = { page, total, pageSize, pageCount }
+
+            const start = (page - 1) * pageSize
+            const end = start + pageSize
+            const dataElements = filteredDataElements.slice(start, end)
+
+            return fakeNetworkDelay({ pager, dataElements, signal })
+        },
+    }
+
+    return <CustomDataProvider data={data}>{children}</CustomDataProvider>
+}
+
+export { Provider as CustomDataProvider }