Skip to content

Commit

Permalink
hotfix: async fetching of dropdown items
Browse files Browse the repository at this point in the history
Signed-off-by: Pablo Pajuelo Cabezas <pablo@dhis2.org>
  • Loading branch information
Balcan committed Nov 21, 2024
1 parent 2ac840e commit eb280a7
Show file tree
Hide file tree
Showing 5 changed files with 186 additions and 105 deletions.
25 changes: 20 additions & 5 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,8 @@ fun Main(
modifier = Modifier
.background(SurfaceColor.Container),
) {
val screenDropdownItemList = mutableListOf<DropdownItem>()
Groups.entries.forEach {
screenDropdownItemList.add(DropdownItem(it.label))
var screenDropdownItemList by remember {
mutableStateOf(emptyList<DropdownItem>())
}

if (isComponentSelected) {
Expand All @@ -91,14 +90,30 @@ fun Main(
top = Spacing.Spacing16,
),
title = "Group",
dropdownItems = screenDropdownItemList.toList(),
onItemSelected = { currentScreen.value = getCurrentScreen(it.label) },
fetchItem = { index -> screenDropdownItemList[index] },
itemCount = screenDropdownItemList.size,
onSearchOption = { query ->
screenDropdownItemList = if (query.isNotEmpty()) {
screenDropdownItemList.filter { it.label.contains(query) }
} else {
Groups.entries.map {
DropdownItem(it.label)
}
}
},
useDropDown = false,
onItemSelected = { _, item -> currentScreen.value = getCurrentScreen(item.label) },
onResetButtonClicked = { currentScreen.value = Groups.NO_GROUP_SELECTED },
state = InputShellState.UNFOCUSED,
expanded = true,
selectedItem = DropdownItem(currentScreen.value.label),
inputStyle = InputStyle.DataInputStyle()
.apply { backGroundColor = SurfaceColor.SurfaceBright },
loadOptions = {
screenDropdownItemList = Groups.entries.map {
DropdownItem(it.label)
}
},
)

when (currentScreen.value) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,18 @@ fun GroupComponentDropDown(
InputDropDown(
modifier = modifier.padding(horizontal = Spacing.Spacing16),
title = "Component",
dropdownItems = dropdownItems,
onItemSelected = onItemSelected,
itemCount = dropdownItems.size,
onSearchOption = {},
fetchItem = { index -> dropdownItems[index] },
onItemSelected = { _, item -> onItemSelected(item) },
onResetButtonClicked = onResetButtonClicked,
selectedItem = selectedItem,
state = InputShellState.UNFOCUSED,
inputStyle = InputStyle.DataInputStyle().apply { backGroundColor = SurfaceColor.SurfaceBright },
useDropDown = false,
inputStyle = InputStyle.DataInputStyle()
.apply { backGroundColor = SurfaceColor.SurfaceBright },
loadOptions = {
/*no-op*/
},
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -233,12 +233,16 @@ fun ParameterSelectorScreen() {
title = "DropDown parameter",
state = InputShellState.UNFOCUSED,
inputStyle = InputStyle.ParameterInputStyle(),
dropdownItems = listOf(
DropdownItem("Item 1"),
DropdownItem("Item 2"),
),
onItemSelected = {},
itemCount = 2,
onSearchOption = {},
fetchItem = { index ->
DropdownItem("Item $index")
},
onItemSelected = { _, _ -> },
onResetButtonClicked = {},
loadOptions = {
/*no-op*/
},
)
},
onExpand = {},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,64 +30,85 @@ fun InputDropDownScreen() {
)
var selectedItem by remember { mutableStateOf<DropdownItem?>(null) }

ColumnComponentContainer("Basic Input Dropdown with < 7 inputs") {
ColumnComponentContainer("Basic Input Dropdown") {
InputDropDown(
title = "Label",
state = InputShellState.UNFOCUSED,
dropdownItems = options.take(6),
itemCount = options.size,
onSearchOption = {},
fetchItem = { index -> options[index] },
onResetButtonClicked = {
selectedItem = null
},
onItemSelected = {
selectedItem = it
onItemSelected = { _, item ->
selectedItem = item
},
selectedItem = selectedItem,
loadOptions = {
/*no-op*/
},
)

InputDropDown(
title = "Label - With supporting text",
state = InputShellState.UNFOCUSED,
dropdownItems = options.take(6),
itemCount = options.size,
onSearchOption = {},
fetchItem = { index -> options[index] },
onResetButtonClicked = {
selectedItem = null
},
onItemSelected = {
selectedItem = it
onItemSelected = { _, item ->
selectedItem = item
},
selectedItem = selectedItem,
supportingTextData = listOf(
SupportingTextData(text = "Options"),
),
loadOptions = {
/*no-op*/
},
)

InputDropDown(
title = "Label - Parameter Style",
inputStyle = InputStyle.ParameterInputStyle(),
state = InputShellState.UNFOCUSED,
dropdownItems = options.take(6),
itemCount = options.size,
onSearchOption = {},
fetchItem = { index -> options[index] },
onResetButtonClicked = {
selectedItem = null
},
onItemSelected = {
selectedItem = it
onItemSelected = { _, item ->
selectedItem = item
},
selectedItem = selectedItem,
loadOptions = {
/*no-op*/
},
)
}

ColumnComponentContainer("Basic Input Dropdown with >= 7 inputs") {
ColumnComponentContainer("Basic Input Dropdown for large set") {
var selectedItem4 by remember { mutableStateOf<DropdownItem?>(null) }
InputDropDown(
title = "Label",
state = InputShellState.UNFOCUSED,
dropdownItems = options,
itemCount = options.size,
onSearchOption = {},
fetchItem = { index -> options[index] },
useDropDown = false,
onResetButtonClicked = {
selectedItem4 = null
},
onItemSelected = {
selectedItem4 = it
onItemSelected = { _, item ->
selectedItem4 = item
},
selectedItem = selectedItem4,
loadOptions = {
/*no-op*/
},
)
}

Expand All @@ -96,14 +117,20 @@ fun InputDropDownScreen() {
InputDropDown(
title = "Label",
state = InputShellState.UNFOCUSED,
dropdownItems = options,
itemCount = options.size,
onSearchOption = {},
fetchItem = { index -> options[index] },
useDropDown = false,
onResetButtonClicked = {
selectedItem1 = null
},
onItemSelected = {
selectedItem1 = it
onItemSelected = { _, item ->
selectedItem1 = item
},
selectedItem = selectedItem1,
loadOptions = {
/*no-op*/
},
)
}

Expand All @@ -112,14 +139,20 @@ fun InputDropDownScreen() {
InputDropDown(
title = "Label",
state = InputShellState.ERROR,
dropdownItems = options,
itemCount = options.size,
onSearchOption = {},
fetchItem = { index -> options[index] },
useDropDown = false,
onResetButtonClicked = {
selectedItem2 = null
},
onItemSelected = {
selectedItem2 = it
onItemSelected = { _, item ->
selectedItem2 = item
},
selectedItem = selectedItem2,
loadOptions = {
/*no-op*/
},
)
}

Expand All @@ -128,14 +161,20 @@ fun InputDropDownScreen() {
InputDropDown(
title = "Label",
state = InputShellState.DISABLED,
dropdownItems = options,
itemCount = options.size,
onSearchOption = {},
fetchItem = { index -> options[index] },
useDropDown = false,
onResetButtonClicked = {
selectedItem3 = null
},
onItemSelected = {
selectedItem3 = it
onItemSelected = { _, item ->
selectedItem3 = item
},
selectedItem = selectedItem3,
loadOptions = {
/*no-op*/
},
)
}

Expand All @@ -148,14 +187,20 @@ fun InputDropDownScreen() {
InputDropDown(
title = "Label",
state = InputShellState.UNFOCUSED,
dropdownItems = dropdownItems,
itemCount = dropdownItems.size,
onSearchOption = {},
fetchItem = { index -> options[index] },
useDropDown = false,
onResetButtonClicked = {
selectedItem = null
},
onItemSelected = {
selectedItem = it
onItemSelected = { _, item ->
selectedItem = item
},
selectedItem = selectedItem,
loadOptions = {
/*no-op*/
},
)
}
}
Expand Down
Loading

0 comments on commit eb280a7

Please sign in to comment.