Merge pull request #48 from dhis2/ANDROAPP-5512

ANDROAPP-5512-mobile-ui-Create-section-component
dhis2 · Sep 7, 2023 · a8b30e7 · a8b30e7
2 parents 2d639b5 + 041e81e
commit a8b30e7
Show file tree

Hide file tree

Showing 17 changed files with 837 additions and 18 deletions.
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt
@@ -1,5 +1,6 @@
 package org.hisp.dhis.common
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -19,6 +20,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import org.hisp.dhis.common.screens.BottomSheetScreen
 import org.hisp.dhis.common.screens.ButtonBlockScreen
 import org.hisp.dhis.common.screens.ButtonScreen
@@ -33,7 +35,9 @@ import org.hisp.dhis.common.screens.LegendDescriptionScreen
 import org.hisp.dhis.common.screens.LegendScreen
 import org.hisp.dhis.common.screens.ProgressScreen
 import org.hisp.dhis.common.screens.RadioButtonScreen
+import org.hisp.dhis.common.screens.SectionScreen
 import org.hisp.dhis.common.screens.SupportingTextScreen
+import org.hisp.dhis.common.screens.TagsScreen
 import org.hisp.dhis.mobile.ui.designsystem.theme.DHIS2Theme
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
@@ -49,7 +53,11 @@ fun Main() {
     val currentScreen = remember { mutableStateOf(Components.FORM_SHELLS) }
     var expanded by remember { mutableStateOf(false) }
 
-    Column(modifier = Modifier.padding(Spacing.Spacing16)) {
+    Column(
+        modifier = Modifier
+            .background(Color.White)
+            .padding(Spacing.Spacing16),
+    ) {
         Box(
             modifier = Modifier
                 .fillMaxWidth(),
@@ -104,6 +112,8 @@ fun Main() {
             Components.FORM_SHELLS -> FormShellsScreen()
             Components.BUTTON_BLOCK -> ButtonBlockScreen()
             Components.BOTTOM_SHEET -> BottomSheetScreen()
+            Components.TAGS -> TagsScreen()
+            Components.SECTIONS -> SectionScreen()
         }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt
@@ -15,4 +15,6 @@ enum class Components(val label: String) {
     INPUT_TEXT("Input Text"),
     FORM_SHELLS("Form Shells"),
     BOTTOM_SHEET("Bottom Sheet"),
+    TAGS("Tags"),
+    SECTIONS("Sections"),
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/SectionScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/SectionScreen.kt
@@ -0,0 +1,160 @@
+package org.hisp.dhis.common.screens
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import org.hisp.dhis.common.screens.previews.lorem
+import org.hisp.dhis.common.screens.previews.lorem_medium
+import org.hisp.dhis.common.screens.previews.lorem_short
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.InputText
+import org.hisp.dhis.mobile.ui.designsystem.component.Section
+import org.hisp.dhis.mobile.ui.designsystem.component.SectionState
+import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
+
+@Composable
+fun SectionScreen() {
+    ColumnComponentContainer(title = "Section Header") {
+        SubTitle("Collapsible header")
+
+        Column {
+            Section(
+                title = "Section title",
+                description = null,
+                completedFields = 2,
+                totalFields = 3,
+                state = SectionState.CLOSE,
+                errorCount = 0,
+                warningCount = 0,
+                content = { TestingFields() },
+                onNextSection = { },
+            )
+            Section(
+                title = "Section title",
+                description = lorem,
+                completedFields = 2,
+                totalFields = 3,
+                state = SectionState.CLOSE,
+                errorCount = 2,
+                warningCount = 1,
+                content = { TestingFields() },
+                onNextSection = { },
+            )
+            Section(
+                title = "Section title",
+                description = lorem_short,
+                completedFields = 2,
+                totalFields = 3,
+                state = SectionState.CLOSE,
+                errorCount = 2,
+                warningCount = 1,
+                content = { TestingFields() },
+                onNextSection = { },
+            )
+            Section(
+                title = "Section title",
+                description = lorem_medium,
+                completedFields = 2,
+                totalFields = 3,
+                state = SectionState.CLOSE,
+                errorCount = 0,
+                warningCount = 0,
+                content = { TestingFields() },
+                onNextSection = { },
+            )
+            Section(
+                title = "Section title Section title Section title Section title Section title",
+                description = null,
+                completedFields = 2,
+                totalFields = 3,
+                state = SectionState.CLOSE,
+                errorCount = 0,
+                warningCount = 0,
+                content = { TestingFields() },
+                onNextSection = { },
+            )
+        }
+
+        SubTitle("Flat header")
+        Section(
+            title = "Section title",
+            description = null,
+            completedFields = 2,
+            totalFields = 3,
+            state = SectionState.FIXED,
+            errorCount = 0,
+            warningCount = 0,
+            content = { TestingFields() },
+            onNextSection = { },
+        )
+        Section(
+            title = "Section title",
+            description = lorem,
+            completedFields = 2,
+            totalFields = 3,
+            state = SectionState.FIXED,
+            errorCount = 2,
+            warningCount = 1,
+            content = { TestingFields() },
+            onNextSection = { },
+        )
+        Section(
+            title = "Section title",
+            description = lorem_short,
+            completedFields = 2,
+            totalFields = 3,
+            state = SectionState.FIXED,
+            errorCount = 0,
+            warningCount = 0,
+            content = { TestingFields() },
+            onNextSection = { },
+        )
+        Section(
+            title = "Section title",
+            description = lorem_medium,
+            completedFields = 2,
+            totalFields = 3,
+            state = SectionState.FIXED,
+            errorCount = 0,
+            warningCount = 0,
+            content = { TestingFields() },
+            onNextSection = { },
+        )
+        Section(
+            title = "Section title Section title Section title Section title Section title",
+            description = lorem_medium,
+            completedFields = 2,
+            totalFields = 3,
+            state = SectionState.FIXED,
+            errorCount = 0,
+            warningCount = 0,
+            content = { TestingFields() },
+            onNextSection = { },
+        )
+    }
+}
+
+@Composable
+private fun TestingFields() {
+    var inputValue1: String by rememberSaveable { mutableStateOf("Input") }
+    var inputValue2: String by rememberSaveable { mutableStateOf("") }
+    var inputValue3: String by rememberSaveable { mutableStateOf("") }
+    InputText(
+        title = "Label",
+        inputText = inputValue1,
+        onValueChanged = { inputValue1 = it ?: "" },
+    )
+    InputText(
+        title = "Label",
+        inputText = inputValue2,
+        onValueChanged = { inputValue2 = it ?: "" },
+    )
+    InputText(
+        title = "Label",
+        inputText = inputValue3,
+        onValueChanged = { inputValue3 = it ?: "" },
+    )
+}
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/TagsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/TagsScreen.kt
@@ -0,0 +1,12 @@
+package org.hisp.dhis.common.screens
+
+import androidx.compose.runtime.Composable
+import org.hisp.dhis.common.screens.previews.TagsPreview
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+
+@Composable
+fun TagsScreen() {
+    ColumnComponentContainer(title = "Tags") {
+        TagsPreview()
+    }
+}
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/previews/LoremIpsum.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/previews/LoremIpsum.kt
@@ -0,0 +1,8 @@
+package org.hisp.dhis.common.screens.previews
+
+const val lorem =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor lacus, aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+const val lorem_short =
+    "Lorem ipsum dolor sit amet"
+const val lorem_medium =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/previews/TagsPreview.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/previews/TagsPreview.kt
@@ -0,0 +1,17 @@
+package org.hisp.dhis.common.screens.previews
+
+import androidx.compose.foundation.layout.Arrangement.spacedBy
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.dp
+import org.hisp.dhis.mobile.ui.designsystem.component.Tag
+import org.hisp.dhis.mobile.ui.designsystem.component.TagType
+
+@Composable
+fun TagsPreview() {
+    Column(verticalArrangement = spacedBy(20.dp)) {
+        TagType.values().forEach {
+            Tag(label = "label", type = it)
+        }
+    }
+}
diff --git a/designsystem/src/androidMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/resource/String.kt b/designsystem/src/androidMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/resource/String.kt
@@ -10,3 +10,12 @@ actual fun provideStringResource(id: String): String {
     if (resourceId == 0) return id
     return context.getString(resourceId)
 }
+
+@Composable
+actual fun provideQuantityStringResource(id: String, quantity: Int): String {
+    val appendToId = when (quantity) {
+        1 -> "one"
+        else -> "other"
+    }
+    return provideStringResource("${id}_$appendToId").format(quantity)
+}
diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Button.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Button.kt
@@ -60,10 +60,9 @@ fun Button(
     icon: @Composable
     (() -> Unit)? = null,
     modifier: Modifier = Modifier,
+    paddingValues: PaddingValues = getPaddingValues(icon != null),
     onClick: () -> Unit,
 ) {
-    val paddingValues = getPaddingValues(icon != null)
-
     when (style) {
         ButtonStyle.FILLED -> {
             val textColor = if (enabled) TextColor.OnPrimary else TextColor.OnDisabledSurface
@@ -81,7 +80,7 @@ fun Button(
                 text = text,
                 textColor = textColor,
                 icon = icon,
-
+                paddingValues = paddingValues,
             )
         }
         ButtonStyle.TEXT -> {
@@ -99,6 +98,7 @@ fun Button(
                 text = text,
                 textColor = textColor,
                 icon = icon,
+                paddingValues = paddingValues,
             )
         }
         ButtonStyle.ELEVATED -> {
@@ -138,6 +138,7 @@ fun Button(
                     text = text,
                     textColor = textColor,
                     icon = icon,
+                    paddingValues = paddingValues,
                 )
             }
         }
@@ -212,9 +213,8 @@ private fun SimpleButton(
     icon: @Composable
     (() -> Unit)? = null,
     onClick: () -> Unit,
+    paddingValues: PaddingValues,
 ) {
-    val paddingValues = getPaddingValues(icon != null)
-
     Button(
         onClick = { onClick() },
         modifier = modifier.hoverPointerIcon(enabled),