Reminder Screen - Date and Time Pickers

app/build.gradle

@@ -87,6 +87,9 @@ dependencies {
     // SplashScreen
     implementation 'androidx.core:core-splashscreen:1.0.0'
 
+    // Time and Date Picker
+    implementation "io.github.vanpra.compose-material-dialogs:datetime:0.8.1-rc"
+
     testImplementation 'junit:junit:4.13.2'
     testImplementation 'com.google.truth:truth:1.1.3'
     androidTestImplementation 'androidx.test.ext:junit:1.1.3'

app/src/main/java/com/mk/tasky/agenda/detail/components/DetailHeader.kt

@@ -15,12 +15,12 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.sp
 import com.mk.tasky.R
 import com.mk.tasky.core.presentation.TaskyHeader
-import java.time.LocalDateTime
+import java.time.LocalDate
 
 @Composable
 fun DetailHeader(
     editingText: String,
-    date: LocalDateTime,
+    date: LocalDate,
     onClose: () -> Unit,
     onEdit: () -> Unit,
     onSave: () -> Unit,
@@ -68,7 +68,7 @@ fun DetailHeader(
 fun DetailHeaderPreview() {
     DetailHeader(
         editingText = "Edit Reminder",
-        date = LocalDateTime.now(),
+        date = LocalDate.now(),
         onClose = {},
         onEdit = {},
         onSave = {},

app/src/main/java/com/mk/tasky/agenda/detail/components/DetailTimeSelector.kt

@@ -15,13 +15,15 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.mk.tasky.R
 import com.mk.tasky.ui.theme.Black
-import java.time.LocalDateTime
+import java.time.LocalDate
+import java.time.LocalTime
 import java.time.format.DateTimeFormatter
 
 @Composable
 fun DetailTimeSelector(
     text: String,
-    date: LocalDateTime,
+    date: LocalDate,
+    time: LocalTime,
     isEditable: Boolean,
     onTimeClick: () -> Unit,
     onDateClick: () -> Unit,
@@ -50,7 +52,7 @@ fun DetailTimeSelector(
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 val timeFormatter = DateTimeFormatter.ofPattern("HH:mm")
-                val timeFormatted = date.format(timeFormatter)
+                val timeFormatted = time.format(timeFormatter)
                 Text(
                     text = timeFormatted,
                     fontSize = 16.sp,
@@ -94,7 +96,8 @@ fun DetailTimeSelector(
 fun DetailTimeSelectorPreview() {
     DetailTimeSelector(
         text = "From",
-        date = LocalDateTime.now(),
+        date = LocalDate.now(),
+        time = LocalTime.now(),
         isEditable = true,
         onTimeClick = {},
         onDateClick = {}

app/src/main/java/com/mk/tasky/agenda/detail/reminder/presentation/DetailReminderEvent.kt

@@ -1,6 +1,8 @@
 package com.mk.tasky.agenda.detail.reminder.presentation
 
 import com.mk.tasky.agenda.detail.components.model.ReminderTypes
+import java.time.LocalDate
+import java.time.LocalTime
 
 sealed class DetailReminderEvent {
     object OnEdit : DetailReminderEvent()
@@ -9,5 +11,9 @@ sealed class DetailReminderEvent {
     object OnNotificationReminderDismiss : DetailReminderEvent()
     data class OnNotificationReminderSelect(val reminderType: ReminderTypes) : DetailReminderEvent()
     object OnReminderDelete : DetailReminderEvent()
-    data class OnUpdatedInformation(val title: String, val description: String) : DetailReminderEvent()
+    data class OnUpdatedInformation(val title: String, val description: String) :
+        DetailReminderEvent()
+
+    data class OnDateSelected(val date: LocalDate) : DetailReminderEvent()
+    data class OnTimeSelected(val time: LocalTime) : DetailReminderEvent()
 }

app/src/main/java/com/mk/tasky/agenda/detail/reminder/presentation/DetailReminderScreen.kt

@@ -19,6 +19,10 @@ import com.mk.tasky.agenda.detail.components.model.ReminderTypes
 import com.mk.tasky.core.presentation.TaskyBackground
 import com.mk.tasky.ui.theme.Gray
 import com.mk.tasky.ui.theme.Light
+import com.vanpra.composematerialdialogs.MaterialDialog
+import com.vanpra.composematerialdialogs.datetime.date.datepicker
+import com.vanpra.composematerialdialogs.datetime.time.timepicker
+import com.vanpra.composematerialdialogs.rememberMaterialDialogState
 
 @Composable
 fun DetailReminderScreen(
@@ -29,6 +33,8 @@ fun DetailReminderScreen(
     viewModel: DetailReminderViewModel = hiltViewModel()
 ) {
     val state = viewModel.state
+    val datepickerState = rememberMaterialDialogState()
+    val timepickerState = rememberMaterialDialogState()
 
     LaunchedEffect(reminderTitle, reminderDescription) {
         viewModel.onEvent(
@@ -39,6 +45,30 @@ fun DetailReminderScreen(
         )
     }
 
+    MaterialDialog(
+        dialogState = timepickerState,
+        buttons = {
+            positiveButton("Ok")
+            negativeButton("Cancel")
+        }
+    ) {
+        timepicker { time ->
+            viewModel.onEvent(DetailReminderEvent.OnTimeSelected(time))
+        }
+    }
+
+    MaterialDialog(
+        dialogState = datepickerState,
+        buttons = {
+            positiveButton("Ok")
+            negativeButton("Cancel")
+        }
+    ) {
+        datepicker { date ->
+            viewModel.onEvent(DetailReminderEvent.OnDateSelected(date))
+        }
+    }
+
     TaskyBackground(header = {
         DetailHeader(
             editingText = stringResource(R.string.edit_reminder),
@@ -76,12 +106,13 @@ fun DetailReminderScreen(
                 DetailTimeSelector(
                     text = stringResource(R.string.at),
                     date = state.date,
+                    time = state.time,
                     isEditable = state.isEditing,
                     onTimeClick = {
-                        println("Clicked time")
+                        timepickerState.show()
                     },
                     onDateClick = {
-                        println("Clicked date")
+                        datepickerState.show()
                     }
                 )
                 Divider(color = Light)

app/src/main/java/com/mk/tasky/agenda/detail/reminder/presentation/DetailReminderState.kt

@@ -1,13 +1,17 @@
 package com.mk.tasky.agenda.detail.reminder.presentation
 
 import com.mk.tasky.agenda.detail.components.model.ReminderTypes
+import java.time.LocalDate
 import java.time.LocalDateTime
+import java.time.LocalTime
 
 data class DetailReminderState(
     val isEditing: Boolean = true,
     val title: String = "New Reminder",
     val description: String = "Description",
-    val date: LocalDateTime = LocalDateTime.now(),
+    //val date: LocalDateTime = LocalDateTime.now(),
+    val date: LocalDate = LocalDate.now(),
+    val time: LocalTime = LocalTime.now(),
     val reminder: ReminderTypes = ReminderTypes.THIRTY_MINUTES,
     val showDropdown: Boolean = false
 )

app/src/main/java/com/mk/tasky/agenda/detail/reminder/presentation/DetailReminderViewModel.kt

@@ -19,7 +19,8 @@ class DetailReminderViewModel @Inject constructor(
     init {
         savedStateHandle.get<String>("date")?.let {
             state = state.copy(
-                date = LocalDateTime.parse(it)
+                date = LocalDateTime.parse(it).toLocalDate(),
+                time = LocalDateTime.parse(it).toLocalTime()
             )
         }
     }
@@ -64,6 +65,16 @@ class DetailReminderViewModel @Inject constructor(
                     )
                 }
             }
+            is DetailReminderEvent.OnDateSelected -> {
+                state = state.copy(
+                    date = event.date
+                )
+            }
+            is DetailReminderEvent.OnTimeSelected -> {
+                state = state.copy(
+                    time = event.time
+                )
+            }
         }
     }
 }