ReportEdit

app-android/src/main/java/com/ustadmobile/port/android/view/ReportEditFragment.kt

@@ -1,5 +1,6 @@
 package com.ustadmobile.port.android.view
 
+import androidx.compose.material.OutlinedTextField
 import android.annotation.SuppressLint
 import android.os.Bundle
 import android.view.LayoutInflater
@@ -27,7 +28,31 @@ import com.ustadmobile.lib.db.entities.ReportFilter
 import com.ustadmobile.lib.db.entities.ReportSeries
 import com.ustadmobile.lib.db.entities.ReportWithSeriesWithFilters
 import com.ustadmobile.port.android.util.ext.currentBackStackEntrySavedStateMap
-
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Delete
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.google.android.material.composethemeadapter.MdcTheme
+import com.ustadmobile.core.impl.locale.entityconstants.*
+import com.ustadmobile.core.viewmodel.ReportEditUiState
+import com.ustadmobile.core.viewmodel.ReportSeriesUiState
+import com.ustadmobile.lib.db.entities.*
+import com.ustadmobile.lib.db.entities.ext.shallowCopy
+import com.ustadmobile.lib.db.entities.ext.shallowCopyReportWithSeriesWithFilters
+import com.ustadmobile.port.android.util.ext.defaultItemPadding
+import com.ustadmobile.port.android.util.ext.defaultScreenPadding
+import com.ustadmobile.port.android.view.composable.UstadErrorText
+import com.ustadmobile.port.android.view.composable.UstadMessageIdOptionExposedDropDownMenuField
 
 interface ReportEditFragmentEventHandler {
     fun onClickNewFilter(series: ReportSeries)
@@ -345,4 +370,289 @@ class ReportEditFragment : UstadEditFragment<ReportWithSeriesWithFilters>(), Rep
         }
     }
 
+}
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+private fun ReportEditScreen(
+    uiState: ReportEditUiState = ReportEditUiState(),
+    onReportChanged: (ReportWithSeriesWithFilters?) -> Unit = {},
+    onChangedReportSeries: (ReportSeries?) -> Unit = {},
+    onClickNewSeries: () -> Unit = {},
+    onClickRemoveSeries: (ReportSeries) -> Unit = {},
+    onClickNewFilter: (ReportSeries) -> Unit = {},
+    onClickDeleteReportFilter: (ReportFilterWithDisplayDetails) -> Unit = {},
+) {
+    LazyColumn(
+        modifier = Modifier
+            .fillMaxSize()
+            .defaultScreenPadding()
+    )  {
+
+        item {
+            OutlinedTextField(
+                modifier = Modifier.defaultItemPadding(),
+                value = uiState.report?.reportTitle ?: "",
+                label = { Text(stringResource(id = R.string.xapi_options_report_title)) },
+                enabled = uiState.fieldsEnabled,
+                isError = uiState.titleError != null,
+                onValueChange = {
+                    onReportChanged(uiState.report?.shallowCopyReportWithSeriesWithFilters{
+                        reportTitle = it
+                    })
+                },
+            )
+
+            uiState.titleError?.also {
+                UstadErrorText(error = it)
+            }
+        }
+
+        item {
+            OutlinedTextField(
+                modifier = Modifier.defaultItemPadding(),
+                value = uiState.report?.reportDescription ?: "",
+                label = { Text(stringResource(id = R.string.description)) },
+                enabled = uiState.fieldsEnabled,
+                onValueChange = {
+                    onReportChanged(uiState.report?.shallowCopyReportWithSeriesWithFilters{
+                        reportDescription = it
+                    })
+                },
+            )
+        }
+
+        item {
+            UstadMessageIdOptionExposedDropDownMenuField(
+                modifier = Modifier.defaultItemPadding(),
+                value = uiState.report?.xAxis ?: 0,
+                label = stringResource(R.string.xapi_options_x_axes),
+                options = XAxisConstants.X_AXIS_MESSAGE_IDS,
+                enabled = uiState.fieldsEnabled,
+                onOptionSelected = {
+                    onReportChanged(uiState.report?.shallowCopyReportWithSeriesWithFilters{
+                        xAxis = it.value
+                    })
+                },
+            )
+        }
+
+        item {
+            UstadMessageIdOptionExposedDropDownMenuField(
+                modifier = Modifier.defaultItemPadding(),
+                value = uiState.report?.reportDateRangeSelection ?: 0,
+                label = stringResource(R.string.time_range),
+                options = DateRangeConstants.DATE_RANGE_MESSAGE_IDS,
+                enabled = uiState.fieldsEnabled,
+                onOptionSelected = {
+                    onReportChanged(uiState.report?.shallowCopyReportWithSeriesWithFilters{
+                        reportDateRangeSelection = it.value
+                    })
+                },
+            )
+        }
+
+        items(
+            items = uiState.reportSeriesUiState.reportSeriesList,
+            key = { reportSeries -> reportSeries.reportSeriesUid }
+        ){ reportSeries ->
+
+            ReportSeriesListItem(
+                uiState = uiState,
+                reportSeries = reportSeries,
+                onClickRemoveSeries = onClickRemoveSeries,
+                onClickNewFilter = onClickNewFilter,
+                onClickDeleteReportFilter = onClickDeleteReportFilter,
+                onChangedReportSeries = onChangedReportSeries,
+            )
+        }
+
+        item {
+            ListItem(
+                modifier = Modifier.clickable { onClickNewSeries() },
+                text = { Text(stringResource(id = R.string.xapi_options_series)) },
+                icon = {
+                    Icon(
+                        imageVector = Icons.Filled.Add,
+                        contentDescription = "",
+                    )
+                }
+            )
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun ReportSeriesListItem(
+    uiState: ReportEditUiState,
+    reportSeries: ReportSeries,
+    onChangedReportSeries: (ReportSeries) -> Unit,
+    onClickRemoveSeries: (ReportSeries) -> Unit,
+    onClickNewFilter: (ReportSeries) -> Unit,
+    onClickDeleteReportFilter: (ReportFilterWithDisplayDetails) -> Unit,
+){
+
+    Row(
+        modifier = Modifier.padding(end = 10.dp)
+    ){
+        OutlinedTextField(
+            modifier = Modifier.weight(0.9F)
+                .defaultItemPadding(end = 8.dp),
+            value = reportSeries.reportSeriesName ?: "",
+            label = { Text(stringResource(id = R.string.title)) },
+            enabled = uiState.fieldsEnabled,
+            onValueChange = {
+                onChangedReportSeries(reportSeries.shallowCopy{
+                    reportSeriesName = it
+                })
+            },
+        )
+
+        IconButton(
+            modifier = Modifier.weight(0.1F)
+                .padding(start = 8.dp, end = 8.dp),
+            onClick = { onClickRemoveSeries(reportSeries) },
+        ) {
+            Icon(
+                imageVector = Icons.Filled.Close,
+                contentDescription = "",
+            )
+        }
+    }
+
+    UstadMessageIdOptionExposedDropDownMenuField(
+        modifier = Modifier.defaultItemPadding(),
+        value = reportSeries.reportSeriesYAxis,
+        label = stringResource(R.string.xapi_options_y_axes),
+        options = YAxisConstants.Y_AXIS_MESSAGE_IDS,
+        enabled = uiState.fieldsEnabled,
+        onOptionSelected = {
+            onChangedReportSeries(reportSeries.shallowCopy{
+                reportSeriesYAxis = it.value
+            })
+        },
+    )
+
+    UstadMessageIdOptionExposedDropDownMenuField(
+        modifier = Modifier.defaultItemPadding(),
+        value = reportSeries.reportSeriesVisualType,
+        label = stringResource(R.string.xapi_options_visual_type),
+        options = VisualTypeConstants.VISUAL_TYPE_MESSAGE_IDS,
+        enabled = uiState.fieldsEnabled,
+        onOptionSelected = {
+            onChangedReportSeries(reportSeries.shallowCopy{
+                reportSeriesVisualType = it.value
+            })
+        },
+    )
+
+    UstadMessageIdOptionExposedDropDownMenuField(
+        modifier = Modifier.defaultItemPadding(),
+        value = reportSeries.reportSeriesSubGroup,
+        label = stringResource(R.string.xapi_options_subgroup),
+        options = SubgroupConstants.SUB_GROUP_MESSAGE_IDS,
+        enabled = uiState.fieldsEnabled,
+        onOptionSelected = {
+            onChangedReportSeries(reportSeries.shallowCopy{
+                reportSeriesSubGroup = it.value
+            })
+        },
+    )
+
+    Spacer(modifier = Modifier.height(10.dp))
+
+    ListItem(
+        text = {
+            Text(text = stringResource(id = R.string.filter))
+        }
+    )
+
+    ListItem(
+        modifier = Modifier.clickable { onClickNewFilter(reportSeries) },
+        text = { Text(text = stringResource(id = R.string.filter)) },
+        icon = {
+            Icon(
+                Icons.Filled.Add,
+                contentDescription = null,
+            )
+        }
+    )
+
+
+    uiState.reportSeriesUiState.filterList
+        .forEach { filter ->
+
+            ListItem(
+                icon = { Spacer(Modifier.width(24.dp)) },
+                text = { Text(filter.person?.fullName() ?: "") },
+                trailing = {
+                    IconButton(
+                        onClick = { onClickDeleteReportFilter(filter) }
+                    ) {
+                        Icon(
+                            imageVector = Icons.Filled.Delete,
+                            contentDescription = "",
+                        )
+                    }
+                }
+            )
+
+            Divider(
+                modifier = Modifier.padding(
+                    start = 64.dp,
+                    end = 20.dp
+                )
+            )
+        }
+
+    Divider(
+        modifier = Modifier.padding(
+            start = 20.dp,
+            end = 20.dp,
+            bottom = 40.dp,
+            top = 20.dp
+        )
+    )
+}
+
+@Composable
+@Preview
+fun ReportEditScreenPreview() {
+    val uiState = ReportEditUiState(
+        reportSeriesUiState = ReportSeriesUiState(
+            reportSeriesList = listOf(
+                ReportSeries().apply {
+                    reportSeriesUid = 0
+                    reportSeriesName = "First Series"
+                },
+                ReportSeries().apply {
+                    reportSeriesUid = 1
+                    reportSeriesName = "Second Series"
+                },
+                ReportSeries().apply {
+                    reportSeriesUid = 2
+                    reportSeriesName = "Third Series"
+                }
+            ),
+            filterList = listOf(
+                ReportFilterWithDisplayDetails().apply {
+                    person = Person().apply {
+                        firstNames = "John"
+                        lastName = "Doe"
+                    }
+                },
+                ReportFilterWithDisplayDetails().apply {
+                    person = Person().apply {
+                        firstNames = "Ahmad"
+                        lastName = "Ahmadi"
+                    }
+                }
+            ),
+            deleteButtonVisible = true
+        )
+    )
+    MdcTheme {
+        ReportEditScreen(uiState)
+    }
 }

app-react/src/main/kotlin/com/ustadmobile/hooks/useUstadScreens.kt

@@ -124,6 +124,9 @@ fun useUstadScreens(): UstadScreens {
             UstadScreen("UstadAssignmentFileSubmissionListItem",
                 "UstadAssignmentFileSubmissionListItem Preview",
                 UstadAssignmentFileSubmissionListItemPreview),
+            UstadScreen(ReportEditView.VIEW_NAME,
+                "Report Edit Preview",
+                ReportEditScreenPreview),
         )
     }
 }