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

showcase static config #387

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft
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
29 changes: 10 additions & 19 deletions i18n/en.pot
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ msgstr ""
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1)\n"
"POT-Creation-Date: 2024-03-20T01:08:59.818Z\n"
"PO-Revision-Date: 2024-03-20T01:08:59.818Z\n"
"POT-Creation-Date: 2024-04-10T10:01:54.632Z\n"
"PO-Revision-Date: 2024-04-10T10:01:54.632Z\n"

msgid "schemas"
msgstr "schemas"
Expand Down Expand Up @@ -75,6 +75,12 @@ msgstr "Save and close"
msgid "<No value>"
msgstr "<No value>"

msgid "Custom attributes"
msgstr "Custom attributes"

msgid "Custom fields for your DHIS2 instance"
msgstr "Custom fields for your DHIS2 instance"

msgid "Code"
msgstr "Code"

Expand Down Expand Up @@ -759,9 +765,6 @@ msgstr "This field requires a unique value, please choose another one"
msgid "Required"
msgstr "Required"

msgid "Custom attributes"
msgstr "Custom attributes"

msgid "Exit without saving"
msgstr "Exit without saving"

Expand Down Expand Up @@ -792,21 +795,9 @@ msgstr "Set up the information for this data element group"
msgid "Explain the purpose of this data element group."
msgstr "Explain the purpose of this data element group."

msgid "@TODO"
msgstr "@TODO"

msgid "Custom fields for your DHIS2 instance"
msgstr "Custom fields for your DHIS2 instance"

msgid "Selected data elements"
msgstr "Selected data elements"

msgid "Explain the purpose of this data element and how it's measured."
msgstr "Explain the purpose of this data element and how it's measured."

msgid "A data element name should be concise and easy to recognize."
msgstr "A data element name should be concise and easy to recognize."

msgid "Create data element"
msgstr "Create data element"

Expand Down Expand Up @@ -896,8 +887,8 @@ msgstr "Disaggregation and Option sets"
msgid "Set up disaggregation and predefined options."
msgstr "Set up disaggregation and predefined options."

msgid "LegendSet"
msgstr "LegendSet"
msgid "Legend set"
msgstr "Legend set"

msgid ""
"Visualize values for this data element in Analytics app. Multiple legendSet "
Expand Down
12 changes: 6 additions & 6 deletions src/components/sectionList/ColumnHeaderSortable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
isValidSortPathForSchema,
useSchema,
useSectionListSortOrder,
getTranslatedProperty,
} from '../../lib'
import { SelectedColumn, SelectedColumns } from './types'

Expand Down Expand Up @@ -38,8 +39,7 @@ export const HeaderColumnsSortable = ({
)

const getDataTableSortDirection = (column: SelectedColumn) => {
const allowSort =
column && isValidSortPathForSchema(schema, column.path)
const allowSort = column && isValidSortPathForSchema(schema, column)

if (!allowSort) {
return undefined
Expand All @@ -48,7 +48,7 @@ export const HeaderColumnsSortable = ({
return 'default'
}
const [sortedColumn, sortedDirection] = sortOrder
const columnIsSorted = sortedColumn === column.path
const columnIsSorted = sortedColumn === column
return columnIsSorted ? sortedDirection : 'default'
}

Expand All @@ -58,10 +58,10 @@ export const HeaderColumnsSortable = ({
<DataTableColumnHeader
sortDirection={getDataTableSortDirection(headerColumn)}
onSortIconClick={handleSortOrderChange}
key={headerColumn.path}
name={headerColumn.path}
key={headerColumn}
name={headerColumn}
>
{headerColumn.label}
{getTranslatedProperty(headerColumn)}
</DataTableColumnHeader>
))}
</>
Expand Down
17 changes: 11 additions & 6 deletions src/components/sectionList/SectionList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,29 @@ import {
Checkbox,
} from '@dhis2/ui'
import React, { PropsWithChildren } from 'react'
import { isSchemaSection, useSectionHandle } from '../../lib'
import {
isSchemaSection,
useSectionHandle,
getTranslatedProperty,
} from '../../lib'
import { CheckBoxOnChangeObject } from '../../types'
import { HeaderColumnsSortable } from './ColumnHeaderSortable'
import { useModelListView } from './listView'
import css from './SectionList.module.css'
import { SelectedColumns } from './types'

type SectionListProps = {
headerColumns: SelectedColumns
onSelectAll: (checked: boolean) => void
allSelected?: boolean
}

export const SectionList = ({
allSelected,
headerColumns,
children,
onSelectAll,
}: PropsWithChildren<SectionListProps>) => {
const { columns: headerColumns } = useModelListView()

return (
<DataTable className={css.list}>
<TableHead>
Expand Down Expand Up @@ -66,9 +71,9 @@ const HeaderColumns = ({
headerColumns={headerColumns}
/>
) : (
headerColumns.map((headerColumn) => (
<DataTableColumnHeader key={headerColumn.path}>
{headerColumn.label}
headerColumns.map((column) => (
<DataTableColumnHeader key={column}>
{getTranslatedProperty(column)}
</DataTableColumnHeader>
))
)}
Expand Down
9 changes: 5 additions & 4 deletions src/components/sectionList/SectionListRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import { BaseListModel, TOOLTIPS } from '../../lib'
import { canEditModel } from '../../lib/models/access'
import { CheckBoxOnChangeObject } from '../../types'
import { TooltipWrapper } from '../tooltip'
import { useModelListView } from './listView'
import css from './SectionList.module.css'
import { SelectedColumns, SelectedColumn } from './types'
import { SelectedColumn } from './types'

export type SectionListRowProps<Model extends BaseListModel> = {
modelData: Model
selectedColumns: SelectedColumns
onSelect: (modelId: string, checked: boolean) => void
selected: boolean
renderActions: (model: Model) => React.ReactNode
Expand All @@ -26,7 +26,6 @@ export const SectionListRow = React.memo(function SectionListRow<
Model extends BaseListModel
>({
active,
selectedColumns,
modelData,
onSelect,
onClick,
Expand All @@ -35,6 +34,8 @@ export const SectionListRow = React.memo(function SectionListRow<
renderColumnValue,
}: SectionListRowProps<Model>) {
const editAccess = canEditModel(modelData)
const { columns: selectedColumns } = useModelListView()

return (
<DataTableRow
className={cx(css.listRow, { [css.active]: active })}
Expand All @@ -58,7 +59,7 @@ export const SectionListRow = React.memo(function SectionListRow<
</DataTableCell>
{selectedColumns.map((selectedColumn) => (
<DataTableCell
key={selectedColumn.path}
key={selectedColumn}
onClick={() => onClick?.(modelData)}
>
{renderColumnValue(selectedColumn, modelData)}
Expand Down
6 changes: 1 addition & 5 deletions src/components/sectionList/SectionListWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { SectionListHeaderBulk } from './bulk'
import { DetailsPanel, DefaultDetailsPanelContent } from './detailsPanel'
import { FilterWrapper } from './filters/FilterWrapper'
import { DefaultListActions } from './listActions'
import { useModelListView } from './listView'
import { ModelValue } from './modelValue/ModelValue'
import { SectionList } from './SectionList'
import css from './SectionList.module.css'
Expand All @@ -33,7 +32,6 @@ export const SectionListWrapper = ({
pager,
refetch,
}: SectionListWrapperProps) => {
const { columns: headerColumns } = useModelListView()
const schema = useSchemaFromHandle()
const { selectedModels, checkAllSelected, add, remove, toggle, clearAll } =
useSelectedModels()
Expand Down Expand Up @@ -85,7 +83,7 @@ export const SectionListWrapper = ({
/* Note that SectionListRow is memoed, to prevent re-rendering
every item when interacting with a row */
const renderColumnValue = useCallback(
({ path }: SelectedColumn, model: BaseListModel) => {
(path: SelectedColumn, model: BaseListModel) => {
return (
<ModelValue path={path} schema={schema} sectionModel={model} />
)
Expand Down Expand Up @@ -121,7 +119,6 @@ export const SectionListWrapper = ({
<SectionListHeader />
)}
<SectionList
headerColumns={headerColumns}
onSelectAll={handleSelectAll}
allSelected={isAllSelected}
>
Expand All @@ -130,7 +127,6 @@ export const SectionListWrapper = ({
<SectionListRow
key={model.id}
modelData={model}
selectedColumns={headerColumns}
onSelect={toggle}
onClick={handleDetailsClick}
selected={selectedModels.has(model.id)}
Expand Down
5 changes: 1 addition & 4 deletions src/components/sectionList/filters/DynamicFilters.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react'
import { ConfigurableFilterKey } from './../../../lib'
import {
AggregationTypeFilter,
CategoryComboFilter,
Expand All @@ -10,9 +9,7 @@ import {
} from './filterSelectors'
import { useFilterKeys } from './useFilterKeys'

type FilterKeyToComponentMap = Partial<Record<ConfigurableFilterKey, React.FC>>

const filterKeyToComponentMap: FilterKeyToComponentMap = {
const filterKeyToComponentMap: Record<string, React.FC> = {
categoryCombo: CategoryComboFilter,
dataSet: DataSetFilter,
domainType: DomainTypeSelectionFilter,
Expand Down
5 changes: 2 additions & 3 deletions src/components/sectionList/filters/useFilterKeys.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,16 @@ export const useFilterKeys = () => {
// combine filters and views, since filters in URL might not be selected for view
// but we should show them when they have a value
const filterKeys = useMemo(() => {
const viewFilterKeys = viewFilters.map(({ filterKey }) => filterKey)
const selectedFiltersNotInView = Object.entries(filters)
.filter(
([filterKey, value]) =>
value !== undefined &&
filterKey !== IDENTIFIABLE_FILTER_KEY &&
!viewFilterKeys.includes(filterKey as ConfigurableFilterKey)
!viewFilters.includes(filterKey as ConfigurableFilterKey)
)
.map(([filterKey]) => filterKey) as ConfigurableFilterKey[]

return viewFilterKeys.concat(selectedFiltersNotInView)
return viewFilters.concat(selectedFiltersNotInView)
}, [filters, viewFilters])
return filterKeys
}
32 changes: 12 additions & 20 deletions src/components/sectionList/listView/ManageListView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
getColumnsForSection,
getFiltersForSection,
useModelSectionHandleOrThrow,
getTranslatedProperty,
} from '../../../lib'
import css from './ManageListView.module.css'
import { useModelListView, useMutateModelListViews } from './useModelListView'
Expand All @@ -29,10 +30,6 @@ type ManageColumnsDialogProps = {
children: (props: RenderProps) => React.ReactNode
}

const toPath = (propertyDescriptor: { path: string }) => propertyDescriptor.path
const toFilterKey = (filterDescriptor: { filterKey: string }) =>
filterDescriptor.filterKey

type FormValues = {
columns: string[]
filters: string[]
Expand All @@ -49,6 +46,7 @@ const validate = (values: FormValues) => {
}
return errors
}

export const ManageListView = ({
onSaved,
children,
Expand All @@ -67,8 +65,8 @@ export const ManageListView = ({
const columnsConfig = getColumnsForSection(section.name)
const filtersConfig = getFiltersForSection(section.name)

const defaultColumns = columnsConfig.default.map(toPath)
const defaultFilters = filtersConfig.default.map(toFilterKey)
const defaultColumns = columnsConfig.default
const defaultFilters = filtersConfig.default

const handleSave = async (values: FormValues) => {
const isDefault = (arr: string[], def: string[]) =>
Expand Down Expand Up @@ -102,14 +100,8 @@ export const ManageListView = ({

const initialValues = useMemo(() => {
return {
columns:
savedColumns.length > 0
? savedColumns.map(toPath)
: defaultColumns,
filters:
savedFilters.length > 0
? savedFilters.map(toFilterKey)
: defaultFilters,
columns: savedColumns.length > 0 ? savedColumns : defaultColumns,
filters: savedFilters.length > 0 ? savedFilters : defaultFilters,
}
}, [savedFilters, savedColumns, defaultColumns, defaultFilters])

Expand Down Expand Up @@ -149,9 +141,9 @@ export const ManageListView = ({
loading={query.isLoading}
defaultOptions={defaultColumns}
availableOptions={columnsConfig.available.map(
(c) => ({
label: c.label,
value: c.path,
(path) => ({
label: getTranslatedProperty(path),
value: path,
})
)}
/>
Expand All @@ -164,9 +156,9 @@ export const ManageListView = ({
loading={query.isLoading}
defaultOptions={defaultFilters}
availableOptions={filtersConfig.available.map(
(f) => ({
label: f.label,
value: f.filterKey,
(filterKey) => ({
label: getTranslatedProperty(filterKey),
value: filterKey,
})
)}
/>
Expand Down
5 changes: 2 additions & 3 deletions src/components/sectionList/listView/types.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { SectionName } from '../../../lib'
import type { FilterDescriptor, ModelPropertyDescriptor } from '../../../lib'

export interface ModelListView {
name: string
sectionModel: string
columns: ReadonlyArray<ModelPropertyDescriptor>
filters: ReadonlyArray<FilterDescriptor>
columns: string[]
filters: string[]
}

export type ModelListViews = {
Expand Down
Loading
Loading