Add animation playing when trying to create an exam with missing fields

.gitignore

@@ -14,4 +14,4 @@
 .cxx
 local.properties
 secrets.properties
-supabase/.temp
+supabase/.temp

app/src/main/java/io/github/jan/kex/ui/components/DatePickerField.kt

@@ -2,7 +2,6 @@ package io.github.jan.kex.ui.components
 
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -13,14 +12,18 @@ import io.github.jan.kex.ui.icons.rememberDateRange
 import io.github.jan.kex.ui.screen.exam.noRippleClickable
 
 @Composable
-fun DatePickerField(selectedDate: String?, onClick: () -> Unit) {
-    OutlinedTextField(
+fun DatePickerField(
+    selectedDate: String?,
+    displayError: Boolean = false,
+    onClick: () -> Unit,
+) {
+    ErrorOutlinedTextField(
         value = selectedDate ?: "",
-        onValueChange = {},
-        enabled = false,
         label = { Text(stringResource(R.string.date)) },
         modifier = Modifier.noRippleClickable(onClick),
         leadingIcon = { Icon(rememberDateRange(), contentDescription = null) },
+        displayError = displayError,
+        enabled = false,
         colors = OutlinedTextFieldDefaults.colors(
             disabledTextColor = MaterialTheme.colorScheme.onSurface,
             disabledBorderColor = MaterialTheme.colorScheme.outline,
@@ -29,6 +32,6 @@ fun DatePickerField(selectedDate: String?, onClick: () -> Unit) {
             disabledLabelColor = MaterialTheme.colorScheme.onSurfaceVariant,
             //For Icons
             disabledPlaceholderColor = MaterialTheme.colorScheme.onSurfaceVariant,
-        )
+        ),
     )
 }

app/src/main/java/io/github/jan/kex/ui/components/ErrorOutLinedTextField.kt

@@ -0,0 +1,63 @@
+package io.github.jan.kex.ui.components
+
+import androidx.compose.animation.core.animateDp
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.updateTransition
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.OutlinedTextFieldDefaults
+import androidx.compose.material3.TextFieldColors
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import kotlin.time.Duration
+import kotlin.time.Duration.Companion.milliseconds
+import kotlin.time.DurationUnit
+
+@Composable
+fun ErrorOutlinedTextField(
+    modifier: Modifier = Modifier,
+    value: String,
+    onValueChange: (String) -> Unit = {},
+    enabled: Boolean = true,
+    colors: TextFieldColors = OutlinedTextFieldDefaults.colors(),
+    label: @Composable (() -> Unit)?,
+    leadingIcon: @Composable (() -> Unit)?,
+    singleLine: Boolean = false,
+    defaultWidth: Dp = OutlinedTextFieldDefaults.MinWidth,
+    errorExpandWidth: Dp = 30.dp,
+//    defaultColor: Color = MaterialTheme.colorScheme.outline,
+//    errorColor: Color = MaterialTheme.colorScheme.errorContainer,
+    errorDisplayTime: Duration = 200.milliseconds,
+    errorDisplayDelay: Duration = 0.milliseconds,
+    displayError: Boolean = false
+) {
+    val transition = updateTransition(targetState = displayError, label = "transition")
+
+    val widthOverride by transition.animateDp(transitionSpec = {
+        tween(errorDisplayTime.inWholeMilliseconds.toInt(), errorDisplayDelay.inWholeMilliseconds.toInt())
+    }, "") { animated ->
+        if (animated) errorExpandWidth + defaultWidth else defaultWidth
+    }
+//    val colorOverride by transition.animateColor(transitionSpec = {
+//        tween(errorDisplayTime.toInt(DurationUnit.MILLISECONDS) /*errorDisplayDelay*/)
+//    }, "") { animated ->
+//        if (animated) errorColor else defaultColor
+//    }
+
+    OutlinedTextField(
+        value = value,
+        onValueChange = onValueChange,
+        enabled = enabled,
+        label = label,
+        modifier = Modifier.width(widthOverride) then modifier,
+        leadingIcon = leadingIcon,
+        colors = colors,
+        singleLine = singleLine
+    )
+}

app/src/main/java/io/github/jan/kex/ui/screen/exam/ExamCreateScreen.kt

@@ -14,14 +14,15 @@ import androidx.compose.material3.DatePickerDialog
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
-import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.rememberDatePickerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -34,12 +35,16 @@ import io.github.jan.kex.R
 import io.github.jan.kex.data.remote.Exam
 import io.github.jan.kex.ui.components.DatePickerField
 import io.github.jan.kex.ui.components.DropDownField
+import io.github.jan.kex.ui.components.ErrorOutlinedTextField
 import io.github.jan.kex.ui.components.RichTextStyleRow
 import io.github.jan.kex.ui.icons.rememberDone
 import io.github.jan.kex.ui.icons.rememberTypeSpecimen
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 import kotlinx.datetime.Instant
 import kotlinx.datetime.TimeZone
 import kotlinx.datetime.toLocalDateTime
+import kotlin.time.Duration.Companion.milliseconds
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -66,12 +71,16 @@ fun ExamCreateScreen(
             mutableStateOf(Exam.Type.EXAM)
         }
         var expandTypeField by remember { mutableStateOf(false) }
-        OutlinedTextField(
+        var isError by remember { mutableStateOf(false) }
+        val errorScope = rememberCoroutineScope()
+        ErrorOutlinedTextField(
             value = subject,
             onValueChange = { subject = it },
             label = { Text(stringResource(R.string.subject)) },
             leadingIcon = { Icon(rememberTypeSpecimen(), contentDescription = null) },
-            singleLine = true
+            singleLine = true,
+            errorDisplayDelay = 150.milliseconds,
+            displayError = isError && subject.isBlank()
         )
         DropDownField(
             expanded = expandTypeField,
@@ -83,7 +92,11 @@ fun ExamCreateScreen(
                 DropdownMenuItem(text = { Text(stringResource(it.nameId))}, onClick = { type = it; expandTypeField = false })
             }
         }
-        DatePickerField(selectedDate = selectedDate, onClick = { showDatePicker = true })
+        DatePickerField(
+            selectedDate = selectedDate,
+            onClick = { showDatePicker = true },
+            displayError = isError && selectedDate == null
+        )
         RichTextStyleRow(state = theme)
         OutlinedRichTextEditor(
             state = theme,
@@ -108,7 +121,19 @@ fun ExamCreateScreen(
             }
         }
         Button(
-            onClick = { onCreate(subject, selectedDate!!, theme.toHtml(), type)},
+            onClick = {
+                if (selectedDate != null && subject.isNotBlank()) {
+                    onCreate(subject, selectedDate, theme.toHtml(), type)
+                }
+                else {
+                    errorScope.launch {
+                        isError = true
+                        delay(500)
+                        isError =false
+                    }
+
+                }
+            },
             modifier = Modifier
                 .padding(12.dp)
         ) {

app/src/main/java/io/github/jan/kex/ui/theme/Theme.kt

@@ -37,6 +37,10 @@ private val LightColorScheme = lightColorScheme(
     */
 )
 
+//val customColorScheme = darkColorScheme(
+//    error = Color.Red
+//)
+
 @Composable
 fun KexTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),