diff --git a/connector/composeApp/src/commonMain/composeResources/drawable/save-24px.xml b/connector/composeApp/src/commonMain/composeResources/drawable/save-24px.xml new file mode 100644 index 0000000..501c62a --- /dev/null +++ b/connector/composeApp/src/commonMain/composeResources/drawable/save-24px.xml @@ -0,0 +1,10 @@ + + + diff --git a/connector/composeApp/src/desktopMain/kotlin/tab/procedure/Actions.kt b/connector/composeApp/src/desktopMain/kotlin/tab/procedure/Actions.kt index f1c85d6..0cd96a9 100644 --- a/connector/composeApp/src/desktopMain/kotlin/tab/procedure/Actions.kt +++ b/connector/composeApp/src/desktopMain/kotlin/tab/procedure/Actions.kt @@ -1,28 +1,42 @@ package tab.procedure import InterfaceState +import androidx.compose.foundation.VerticalScrollbar import androidx.compose.foundation.layout.* -import androidx.compose.foundation.rememberScrollState -import androidx.compose.foundation.verticalScroll +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.foundation.rememberScrollbarAdapter import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.outlined.ArrowBack import androidx.compose.material.icons.outlined.Add import androidx.compose.material3.* import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateListOf import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import cafe.adriel.voyager.core.screen.Screen import cafe.adriel.voyager.navigator.LocalNavigator +import cafe.adriel.voyager.navigator.Navigator import cafe.adriel.voyager.navigator.currentOrThrow +import connector.composeapp.generated.resources.Res +import connector.composeapp.generated.resources.save_24px +import org.jetbrains.compose.resources.ExperimentalResourceApi +import org.jetbrains.compose.resources.painterResource import org.koin.compose.koinInject class Actions : Screen { + private val columnPadding = 24.dp + private val itemPadding = 24.dp + + private var inputs = mutableStateListOf(1) + @Composable override fun Content() { val navigator = LocalNavigator.currentOrThrow val viewModel = koinInject() - val columnPadding = 24.dp + val state = rememberLazyListState(0) // Checks if a project has been selected before viewing contents if (viewModel.procedureId == null) { @@ -45,37 +59,106 @@ class Actions : Screen { modifier = Modifier .fillMaxHeight() .fillMaxWidth() - .verticalScroll(rememberScrollState()) .padding(top = columnPadding, bottom = columnPadding), horizontalAlignment = Alignment.CenterHorizontally, - ) { - Column( - Modifier.fillMaxWidth(0.7F), - verticalArrangement = Arrangement.spacedBy(24.dp) - ) { - Text( - text = "Edit Actions", - style = MaterialTheme.typography.headlineSmall - ) - Button( - contentPadding = ButtonDefaults.ButtonWithIconContentPadding, - onClick = { - // TODO make checks - navigator.pop() - viewModel.procedureId = null - } + ) { + Box( + modifier = Modifier.fillMaxWidth(0.7F), + ) { + LazyColumn( + state = state, + verticalArrangement = Arrangement.spacedBy(itemPadding) ) { - Icon(Icons.Outlined.Add, "Create Procedure", modifier = Modifier.size(18.dp)) - Spacer(Modifier.size(ButtonDefaults.IconSpacing)) - Text( - "Create", - style = MaterialTheme.typography.labelLarge, - color = MaterialTheme.colorScheme.onPrimary - ) + + item { + Header() + } + + items( + items = inputs, + key = { input -> input } + ) { item -> + ActionItem(item) + } + + item { + Footer(navigator, viewModel) + } } + + VerticalScrollbar( + modifier = Modifier + .align(Alignment.CenterEnd) + .fillMaxHeight(), + adapter = rememberScrollbarAdapter( + scrollState = state, + ), + ) } } } } + + @Composable + private fun Header() { + Text( + text = "Edit Actions", + style = MaterialTheme.typography.headlineSmall + ) + } + + @Composable + private fun ActionItem(item: Int) { + Column ( + verticalArrangement = Arrangement.spacedBy(itemPadding) + ) { + Text(text = "Action $item") + + HorizontalDivider() + } + } + + @OptIn(ExperimentalResourceApi::class) + @Composable + private fun Footer(navigator: Navigator, viewModel: InterfaceState) { + Row ( + Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween + ) { + // Add Step + FilledTonalButton( + contentPadding = ButtonDefaults.ButtonWithIconContentPadding, + onClick = { + // TODO make this a proper data array for each item in checklist + inputs += inputs.last() + 1 + } + ) { + Icon(Icons.Outlined.Add, "Add", modifier = Modifier.size(18.dp)) + Spacer(Modifier.size(ButtonDefaults.IconSpacing)) + Text( + "Add Step", + style = MaterialTheme.typography.labelLarge, + ) + } + + // Save + Button( + contentPadding = ButtonDefaults.ButtonWithIconContentPadding, + onClick = { + // TODO make checks + // TODO save to database + navigator.pop() + viewModel.procedureId = null + } + ) { + Icon(painterResource(Res.drawable.save_24px), "Save", modifier = Modifier.size(18.dp)) + Spacer(Modifier.size(ButtonDefaults.IconSpacing)) + Text( + "Save", + style = MaterialTheme.typography.labelLarge, + ) + } + } + } }