Skip to content

Commit 0303336

Browse files
MaKhandareMaKhandare
committed
refactor: create event forms composable and let add and edit use it
they share almost all the ui code
1 parent 7094807 commit 0303336

File tree

4 files changed

+261
-294
lines changed

4 files changed

+261
-294
lines changed

‎app/src/main/java/com/itsmatok/matcal/ui/calendar/components/forms/EventFormContent.kt‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
package com.itsmatok.matcal.ui.calendar.components.forms
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Box
5+
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.Row
7+
import androidx.compose.foundation.layout.Spacer
8+
import androidx.compose.foundation.layout.fillMaxSize
9+
import androidx.compose.foundation.layout.fillMaxWidth
10+
import androidx.compose.foundation.layout.height
11+
import androidx.compose.foundation.layout.imePadding
12+
import androidx.compose.foundation.layout.padding
13+
import androidx.compose.foundation.layout.width
14+
import androidx.compose.foundation.rememberScrollState
15+
import androidx.compose.foundation.verticalScroll
16+
import androidx.compose.material.icons.Icons
17+
import androidx.compose.material.icons.automirrored.filled.Notes
18+
import androidx.compose.material.icons.filled.AccessTime
19+
import androidx.compose.material.icons.filled.CalendarToday
20+
import androidx.compose.material.icons.filled.LocationOn
21+
import androidx.compose.material3.Button
22+
import androidx.compose.material3.Icon
23+
import androidx.compose.material3.OutlinedTextField
24+
import androidx.compose.material3.Text
25+
import androidx.compose.runtime.Composable
26+
import androidx.compose.ui.Modifier
27+
import androidx.compose.ui.unit.dp
28+
import com.itsmatok.matcal.data.calendar.events.RecurrenceType
29+
import com.itsmatok.matcal.ui.calendar.components.RecurrenceDropdown
30+
import java.time.LocalDate
31+
import java.time.LocalTime
32+
import java.time.format.DateTimeFormatter
33+
34+
@Composable
35+
fun EventFormContent(
36+
title: String,
37+
onTitleChange: (String) -> Unit,
38+
location: String,
39+
onLocationChange: (String) -> Unit,
40+
description: String,
41+
onDescriptionChange: (String) -> Unit,
42+
selectedDate: LocalDate,
43+
onDateClick: () -> Unit,
44+
startTime: LocalTime,
45+
onStartTimeClick: () -> Unit,
46+
endTime: LocalTime,
47+
onEndTimeClick: () -> Unit,
48+
recurrence: RecurrenceType,
49+
onRecurrenceChange: (RecurrenceType) -> Unit,
50+
buttonText: String,
51+
onSaveClick: () -> Unit,
52+
modifier: Modifier = Modifier
53+
) {
54+
val dateFormatter = DateTimeFormatter.ofPattern("EEE, MMM dd, yyyy")
55+
val timeFormatter = DateTimeFormatter.ofPattern("HH:mm")
56+
val scrollState = rememberScrollState()
57+
58+
Column(
59+
modifier = modifier
60+
.fillMaxSize()
61+
.verticalScroll(scrollState)
62+
.padding(16.dp)
63+
.imePadding(),
64+
verticalArrangement = Arrangement.spacedBy(16.dp)
65+
) {
66+
// title
67+
OutlinedTextField(
68+
value = title,
69+
onValueChange = onTitleChange,
70+
label = { Text("Event Title") },
71+
modifier = Modifier.fillMaxWidth(),
72+
singleLine = true
73+
)
74+
75+
// date selector
76+
ReadOnlyField(
77+
value = selectedDate.format(dateFormatter),
78+
label = "Date",
79+
icon = Icons.Default.CalendarToday,
80+
onClick = onDateClick
81+
)
82+
83+
// time selectors
84+
Row(modifier = Modifier.fillMaxWidth()) {
85+
Box(modifier = Modifier.weight(1f)) {
86+
ReadOnlyField(
87+
value = startTime.format(timeFormatter),
88+
label = "Start Time",
89+
icon = Icons.Default.AccessTime,
90+
onClick = onStartTimeClick
91+
)
92+
}
93+
Spacer(modifier = Modifier.width(16.dp))
94+
Box(modifier = Modifier.weight(1f)) {
95+
ReadOnlyField(
96+
value = endTime.format(timeFormatter),
97+
label = "End Time",
98+
icon = Icons.Default.AccessTime,
99+
onClick = onEndTimeClick
100+
)
101+
}
102+
}
103+
104+
// repeating
105+
RecurrenceDropdown(
106+
selectedRecurrence = recurrence,
107+
onRecurrenceSelected = onRecurrenceChange
108+
)
109+
110+
// location
111+
OutlinedTextField(
112+
value = location,
113+
onValueChange = onLocationChange,
114+
label = { Text("Location (Optional)") },
115+
leadingIcon = { Icon(Icons.Default.LocationOn, contentDescription = null) },
116+
modifier = Modifier.fillMaxWidth(),
117+
singleLine = true
118+
)
119+
120+
// description
121+
OutlinedTextField(
122+
value = description,
123+
onValueChange = onDescriptionChange,
124+
label = { Text("Description (Optional)") },
125+
leadingIcon = { Icon(Icons.AutoMirrored.Filled.Notes, contentDescription = null) },
126+
modifier = Modifier.fillMaxWidth(),
127+
minLines = 3,
128+
maxLines = 5
129+
)
130+
131+
Spacer(modifier = Modifier.weight(1f))
132+
133+
Button(
134+
onClick = onSaveClick,
135+
modifier = Modifier.fillMaxWidth(),
136+
enabled = title.isNotBlank(),
137+
content = { Text(buttonText) }
138+
)
139+
140+
Spacer(modifier = Modifier.height(32.dp))
141+
}
142+
}

‎app/src/main/java/com/itsmatok/matcal/ui/calendar/components/forms/ReadOnlyField.kt‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
package com.itsmatok.matcal.ui.calendar.components.forms
2+
3+
import androidx.compose.foundation.clickable
4+
import androidx.compose.foundation.layout.fillMaxWidth
5+
import androidx.compose.material3.Icon
6+
import androidx.compose.material3.MaterialTheme
7+
import androidx.compose.material3.OutlinedTextField
8+
import androidx.compose.material3.Text
9+
import androidx.compose.material3.TextFieldDefaults
10+
import androidx.compose.runtime.Composable
11+
import androidx.compose.ui.Modifier
12+
import androidx.compose.ui.graphics.Color
13+
import androidx.compose.ui.graphics.vector.ImageVector
14+
15+
@Composable
16+
fun ReadOnlyField(
17+
value: String,
18+
label: String,
19+
icon: ImageVector,
20+
onClick: () -> Unit
21+
) {
22+
OutlinedTextField(
23+
value = value,
24+
onValueChange = { },
25+
label = { Text(label) },
26+
leadingIcon = { Icon(icon, contentDescription = null) },
27+
modifier = Modifier
28+
.fillMaxWidth()
29+
.clickable { onClick() },
30+
enabled = false,
31+
colors = TextFieldDefaults.colors(
32+
disabledContainerColor = Color.Transparent,
33+
disabledTextColor = MaterialTheme.colorScheme.onSurface,
34+
disabledLabelColor = MaterialTheme.colorScheme.onSurfaceVariant,
35+
disabledLeadingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
36+
disabledIndicatorColor = MaterialTheme.colorScheme.outline
37+
)
38+
)
39+
}

0 commit comments

Comments
 (0)