Skip to content

Commit

Permalink
Revamp UX for data submission screen and replace with compose based d…
Browse files Browse the repository at this point in the history
…ialog (#2757)

* Add a new UiState for submission completion

* Handle newly added UiState in DataCollectionFragment

* Add image from figma mocks

* Create compose based dialog

* Replace DialogFragment with compose based dialog

* Remove unused references

* Update license year
  • Loading branch information
shobhitagarwal1612 authored Sep 23, 2024
1 parent 6358298 commit bb52291
Show file tree
Hide file tree
Showing 13 changed files with 793 additions and 161 deletions.
1 change: 0 additions & 1 deletion config/jacoco/jacoco.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ tasks.register('jacocoLocalDebugUnitTestReport', JacocoReport) {
'**/datacollection/tasks/AbstractTaskFragment*',
'**/datacollection/tasks/AbstractTaskViewModel*',
'**/map/gms/ClippingTileProvider*',
'**/datacollection/DataSubmissionConfirmationDialogFragment*',
'**/common/AbstractMapFragmentWithControls*',
'**/map/gms/TemplateUrlTileProvider*',
'**/persistence/sync/WorkRequestBuilder*',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ProgressBar
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.ComposeView
import androidx.constraintlayout.widget.Guideline
import androidx.core.view.WindowInsetsCompat
import androidx.hilt.navigation.fragment.hiltNavGraphViewModels
Expand All @@ -35,6 +38,8 @@ import com.google.android.ground.model.task.Task
import com.google.android.ground.ui.common.AbstractFragment
import com.google.android.ground.ui.common.BackPressListener
import com.google.android.ground.ui.common.Navigator
import com.google.android.ground.ui.home.HomeScreenFragmentDirections
import com.google.android.ground.ui.theme.AppTheme
import dagger.hilt.android.AndroidEntryPoint
import javax.inject.Inject
import kotlinx.coroutines.flow.filterNotNull
Expand Down Expand Up @@ -107,6 +112,7 @@ class DataCollectionFragment : AbstractFragment(), BackPressListener {
when (uiState) {
is UiState.TaskListAvailable -> loadTasks(uiState.tasks, uiState.taskPosition)
is UiState.TaskUpdated -> onTaskChanged(uiState.taskPosition)
is UiState.TaskSubmitted -> onTaskSubmitted()
}
}

Expand All @@ -133,6 +139,27 @@ class DataCollectionFragment : AbstractFragment(), BackPressListener {
updateProgressBar(taskPosition, true)
}

private fun onTaskSubmitted() {
// Display a confirmation dialog and move to home screen after that.
(view as ViewGroup).addView(
ComposeView(requireContext()).apply {
setContent {
val openAlertDialog = remember { mutableStateOf(true) }
when {
openAlertDialog.value -> {
AppTheme {
DataSubmissionConfirmationDialog {
openAlertDialog.value = false
navigator.navigate(HomeScreenFragmentDirections.showHomeScreen())
}
}
}
}
}
}
)
}

private fun updateProgressBar(taskPosition: TaskPosition, shouldAnimate: Boolean) {
// Reset progress bar
progressBar.max = (taskPosition.sequenceSize - 1) * PROGRESS_SCALE
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ import com.google.android.ground.repository.SurveyRepository
import com.google.android.ground.ui.common.AbstractViewModel
import com.google.android.ground.ui.common.EphemeralPopups
import com.google.android.ground.ui.common.LocationOfInterestHelper
import com.google.android.ground.ui.common.Navigator
import com.google.android.ground.ui.common.ViewModelFactory
import com.google.android.ground.ui.datacollection.tasks.AbstractTaskViewModel
import com.google.android.ground.ui.datacollection.tasks.date.DateTaskViewModel
Expand All @@ -49,7 +48,6 @@ import com.google.android.ground.ui.datacollection.tasks.point.DropPinTaskViewMo
import com.google.android.ground.ui.datacollection.tasks.polygon.DrawAreaTaskViewModel
import com.google.android.ground.ui.datacollection.tasks.text.TextTaskViewModel
import com.google.android.ground.ui.datacollection.tasks.time.TimeTaskViewModel
import com.google.android.ground.ui.home.HomeScreenFragmentDirections
import dagger.hilt.android.lifecycle.HiltViewModel
import javax.inject.Inject
import javax.inject.Provider
Expand Down Expand Up @@ -77,7 +75,6 @@ internal constructor(
private val viewModelFactory: ViewModelFactory,
private val locationOfInterestHelper: LocationOfInterestHelper,
private val popups: Provider<EphemeralPopups>,
private val navigator: Navigator,
private val submitDataUseCase: SubmitDataUseCase,
@ApplicationScope private val externalScope: CoroutineScope,
@IoDispatcher private val ioDispatcher: CoroutineDispatcher,
Expand Down Expand Up @@ -247,13 +244,7 @@ internal constructor(
} else {
clearDraft()
saveChanges(getDeltas())

// Move to home screen and display a confirmation dialog after that.
navigator.navigate(HomeScreenFragmentDirections.showHomeScreen())
navigator.navigate(
DataSubmissionConfirmationDialogFragmentDirections
.showSubmissionConfirmationDialogFragment()
)
_uiState.emit(UiState.TaskSubmitted)
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
/*
* Copyright 2024 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.google.android.ground.ui.datacollection

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import com.google.android.ground.R
import com.google.android.ground.ui.theme.AppTheme

@Composable
fun DataSubmissionConfirmationDialog(onDismiss: () -> Unit) {
Dialog(
onDismissRequest = onDismiss,
properties = DialogProperties(dismissOnBackPress = true, dismissOnClickOutside = true),
) {
Surface(
modifier = Modifier.wrapContentWidth().wrapContentHeight(),
shape = RoundedCornerShape(16.dp),
tonalElevation = 8.dp,
) {
Column(
modifier = Modifier.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Image(
painter = painterResource(id = R.drawable.data_submitted),
contentDescription = stringResource(R.string.data_submitted_image),
contentScale = ContentScale.Fit,
)

Spacer(modifier = Modifier.height(12.dp))

Text(
text = stringResource(R.string.data_collection_complete),
style = MaterialTheme.typography.titleLarge,
textAlign = TextAlign.Center,
)

Spacer(modifier = Modifier.height(8.dp))

Text(
text = stringResource(R.string.data_collection_complete_details),
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
)

Spacer(modifier = Modifier.height(12.dp))

OutlinedButton(onClick = { onDismiss() }) { Text(stringResource(id = R.string.close)) }
}
}
}
}

@Composable
@Preview
fun DataSubmissionConfirmationDialogPreview() {
AppTheme { DataSubmissionConfirmationDialog {} }
}

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,6 @@ sealed class UiState {
data class TaskListAvailable(val tasks: List<Task>, val taskPosition: TaskPosition) : UiState()

data class TaskUpdated(val taskPosition: TaskPosition) : UiState()

data object TaskSubmitted : UiState()
}
Loading

0 comments on commit bb52291

Please sign in to comment.