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

@@ -1,9 +1,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
 import androidx.compose.ui.Modifier
@@ -13,22 +10,17 @@ 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) },
-        colors = OutlinedTextFieldDefaults.colors(
-            disabledTextColor = MaterialTheme.colorScheme.onSurface,
-            disabledBorderColor = MaterialTheme.colorScheme.outline,
-            disabledLeadingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
-            disabledTrailingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
-            disabledLabelColor = MaterialTheme.colorScheme.onSurfaceVariant,
-            //For Icons
-            disabledPlaceholderColor = MaterialTheme.colorScheme.onSurfaceVariant,
-        )
+        displayError = displayError,
+        enabled = false
     )
 }

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

@@ -0,0 +1,77 @@
+package io.github.jan.kex.ui.components
+
+import androidx.compose.animation.animateColor
+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.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.OutlinedTextFieldDefaults
+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.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import io.github.jan.kex.ui.theme.customColorScheme
+
+@Composable
+fun ErrorOutLinedTextField(
+    modifier: Modifier = Modifier,
+    value: String,
+    onValueChange: (String) -> Unit = {},
+    enabled: Boolean = true,
+    //
+    //
+    label: @Composable (() -> Unit)?,
+    leadingIcon: @Composable (() -> Unit)?,
+    singleLine: Boolean = false,
+
+    defaultWidth: Dp = OutlinedTextFieldDefaults.MinWidth,
+    errorExpandWidth: Dp = 30.dp,
+    defaultColor: Color = MaterialTheme.colorScheme.outline,
+    errorColor: Color = customColorScheme.error,
+    errorDisplayTime: Int = 200,
+    errorDisplayDelay: Int = 0,
+    displayError: Boolean = false
+) {
+    var isAnimated by remember { mutableStateOf(false) }
+    val transition = updateTransition(targetState = isAnimated, label = "transition")
+
+    val widthOverride by transition.animateDp(transitionSpec = {
+        tween(errorDisplayTime, errorDisplayDelay)
+    }, "") { animated ->
+        if (animated) errorExpandWidth + defaultWidth else defaultWidth
+    }
+    val colorOverride by transition.animateColor(transitionSpec = {
+        tween(errorDisplayTime /*errorDisplayDelay*/)
+    }, "") { animated ->
+        if (animated) errorColor else defaultColor
+    }
+
+    isAnimated = displayError
+
+    OutlinedTextField(
+        value = value,
+        onValueChange = onValueChange,
+        enabled = enabled,
+        label = label,
+        modifier = Modifier.width(widthOverride) then modifier,
+        leadingIcon = leadingIcon,
+        singleLine = singleLine,
+        colors = OutlinedTextFieldDefaults.colors(
+            disabledTextColor = MaterialTheme.colorScheme.onSurface,
+            disabledBorderColor = colorOverride,
+            unfocusedBorderColor = colorOverride,
+            disabledLeadingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
+            disabledTrailingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
+            disabledLabelColor = MaterialTheme.colorScheme.onSurfaceVariant,
+            //For Icons
+            disabledPlaceholderColor = MaterialTheme.colorScheme.onSurfaceVariant,
+        ),
+    )
+}

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

@@ -14,14 +14,14 @@ 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.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,9 +34,12 @@ 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
@@ -66,12 +69,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,
+            displayError = isError && subject.isBlank(),
         )
         DropDownField(
             expanded = expandTypeField,
@@ -83,7 +90,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 +119,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

@@ -10,6 +10,7 @@ import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
@@ -37,6 +38,10 @@ private val LightColorScheme = lightColorScheme(
     */
 )
 
+val customColorScheme = darkColorScheme(
+    error = Color.Red
+)
+
 @Composable
 fun KexTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),