Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor refreshable as a component #200

Merged
merged 4 commits into from
May 23, 2024
Merged

Refactor refreshable as a component #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1ccd9f6
Refactor refreshable
Puvikaran2001 May 22, 2024
47c63d5
refactor
Puvikaran2001 May 22, 2024
1c15c9a
refactor
Puvikaran2001 May 22, 2024
1777801
refactor
Puvikaran2001 May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/app/src/main/java/dk/scheduling/schedulingfrontend/gui/components/Dateformat.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@ import java.util.Locale
val DATE_FORMATTER: DateTimeFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")
val DATE_FORMAT: DateTimeFormatter = DateTimeFormatter.ofPattern("MMM dd", Locale.ENGLISH)
val TIME_FORMAT: DateTimeFormatter = DateTimeFormatter.ofPattern("HH:mm")
val DATE_AND_TIME_FORMAT: DateTimeFormatter = DateTimeFormatter.ofPattern("MMM dd HH:mm")
val DATE_AND_TIME_FORMAT: DateTimeFormatter = DateTimeFormatter.ofPattern("MMM dd, HH:mm")
34 changes: 34 additions & 0 deletions frontend/app/src/main/java/dk/scheduling/schedulingfrontend/gui/components/Refreshable.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
package dk.scheduling.schedulingfrontend.gui.components

import androidx.compose.foundation.layout.Box
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.pulltorefresh.PullToRefreshContainer
import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Refreshable(
onRefresh: suspend () -> Unit,
content: @Composable () -> Unit,
) {
val refreshState = rememberPullToRefreshState()
if (refreshState.isRefreshing) {
LaunchedEffect(true) {
onRefresh()
refreshState.endRefresh()
}
}
Box(Modifier.nestedScroll(refreshState.nestedScrollConnection)) {
content()

PullToRefreshContainer(
modifier = Modifier.align(Alignment.TopCenter),
state = refreshState,
)
}
}
52 changes: 11 additions & 41 deletions frontend/app/src/main/java/dk/scheduling/schedulingfrontend/gui/pages/AccountPage.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@ package dk.scheduling.schedulingfrontend.gui.pages
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
Expand All @@ -21,8 +19,8 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.TextUnitType
import androidx.compose.ui.unit.dp
import dk.scheduling.schedulingfrontend.gui.components.ConfirmAlertDialog
import dk.scheduling.schedulingfrontend.gui.components.FilledButton
import dk.scheduling.schedulingfrontend.gui.components.OutlinedButton
import dk.scheduling.schedulingfrontend.gui.theme.SchedulingFrontendTheme
import dk.scheduling.schedulingfrontend.repositories.account.IAccountRepository
import kotlinx.coroutines.launch
Expand Down Expand Up @@ -80,49 +78,21 @@ fun AccountPage(

@Composable
fun LogoutButton(logout: () -> Unit) {
var openConfirmDialog by remember { mutableStateOf(false) }
val (openConfirmDialog, setOpenConfirmDialog) = remember { mutableStateOf(false) }

if (openConfirmDialog) {
AlertDialog(
title = {
Text(
modifier = Modifier.fillMaxWidth(),
text = "Logout?",
textAlign = TextAlign.Center,
)
},
text = {
Text(
modifier = Modifier.fillMaxWidth(),
text = "Are you sure that you want to logout?",
textAlign = TextAlign.Center,
)
},
confirmButton = {
FilledButton(
onClick = {
openConfirmDialog = false
logout()
},
text = "Confirm",
)
},
dismissButton = {
OutlinedButton(
onClick = {
openConfirmDialog = false
},
text = "Cancel",
)
},
onDismissRequest = { openConfirmDialog = false },
)
}
ConfirmAlertDialog(
openConfirmDialog = openConfirmDialog,
setOpenConfirmDialog = setOpenConfirmDialog,
title = "Logout?",
text = "Are you sure that you want to logout?",
onConfirm = { logout() },
dismissLabel = "Cancel",
)

FilledButton(
text = "Logout",
onClick = {
openConfirmDialog = true
setOpenConfirmDialog(true)
},
)
}
Expand Down
21 changes: 2 additions & 19 deletions frontend/app/src/main/java/dk/scheduling/schedulingfrontend/gui/pages/CreateDevicePage.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,15 @@ import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.em
import dk.scheduling.schedulingfrontend.datasources.api.protocol.Device
import dk.scheduling.schedulingfrontend.gui.components.FilledButton
import dk.scheduling.schedulingfrontend.gui.components.OutlinedButton
import dk.scheduling.schedulingfrontend.gui.components.StandardTextField
import dk.scheduling.schedulingfrontend.gui.components.Title
import dk.scheduling.schedulingfrontend.repositories.device.IDeviceRepository
import kotlinx.coroutines.launch
import testdata.DummyDeviceRepository
Expand All @@ -50,23 +49,7 @@ fun CreateDevicePage(
mutableStateOf(null)
}

Column(
modifier =
modifier
.fillMaxSize()
.padding(all = 50.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Top,
) {
Spacer(modifier = Modifier.height(90.dp))
Text(
text = "Create a Device",
fontSize = 7.em,
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.primary,
fontWeight = FontWeight(700),
)
}
Title(titleText = "Create a Device")

Column(
modifier =
Expand Down
73 changes: 27 additions & 46 deletions frontend/app/src/main/java/dk/scheduling/schedulingfrontend/gui/pages/HomePage.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,34 +20,30 @@ import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.pulltorefresh.PullToRefreshContainer
import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.runtime.toMutableStateList
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import dk.scheduling.schedulingfrontend.datasources.api.protocol.Device
import dk.scheduling.schedulingfrontend.gui.components.ConfirmAlertDialog
import dk.scheduling.schedulingfrontend.gui.components.DATE_FORMATTER
import dk.scheduling.schedulingfrontend.gui.components.Loading
import dk.scheduling.schedulingfrontend.gui.components.Refreshable
import dk.scheduling.schedulingfrontend.gui.theme.SchedulingFrontendTheme
import dk.scheduling.schedulingfrontend.gui.theme.scheduled
import dk.scheduling.schedulingfrontend.gui.theme.success
Expand Down Expand Up @@ -91,30 +87,30 @@ fun HomePagePreviewDarkMode() {
}
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomePage(
modifier: Modifier = Modifier,
overviewRepository: IOverviewsRepository,
deviceRepository: IDeviceRepository,
) {
var devices by remember { mutableStateOf(mutableListOf<DeviceOverview>()) }
val refreshState = rememberPullToRefreshState()
if (refreshState.isRefreshing) {
LaunchedEffect(true) {
devices = overviewRepository.getDeviceOverview().toMutableStateList()
refreshState.endRefresh()
val devices = remember { mutableStateListOf<DeviceOverview>() }

suspend fun loadDevices() {
devices.apply {
clear()
addAll(overviewRepository.getDeviceOverview())
}
}

val (isLoading, setIsLoading) = remember { mutableStateOf(true) }

Loading(
isLoading = isLoading,
setIsLoading = setIsLoading,
onLoading = { devices = overviewRepository.getDeviceOverview().toMutableStateList() },
onLoading = { loadDevices() },
) {
Box(Modifier.nestedScroll(refreshState.nestedScrollConnection)) {
Refreshable(
onRefresh = { loadDevices() },
) {
LazyColumn(
modifier =
modifier
Expand All @@ -137,11 +133,6 @@ fun HomePage(
Spacer(modifier = Modifier.height(70.dp))
}
}

PullToRefreshContainer(
modifier = Modifier.align(Alignment.TopCenter),
state = refreshState,
)
}
}
}
Expand Down Expand Up @@ -182,27 +173,21 @@ fun DeviceCard(
),
verticalAlignment = Alignment.CenterVertically,
) {
Column {
DeviceStateIcon(deviceState)
}
DeviceStateIcon(deviceState)

Column {
Text(
text = deviceOverview.device.name,
modifier =
Modifier.padding(8.dp),
)
}
Text(
text = deviceOverview.device.name,
modifier =
Modifier.padding(8.dp),
)

Spacer(Modifier.weight(1f))

Column {
Icon(
modifier = Modifier.rotate(rotationState),
imageVector = Icons.Default.ArrowDropDown,
contentDescription = "Drop-Down Arrow",
)
}
Icon(
modifier = Modifier.rotate(rotationState),
imageVector = Icons.Default.ArrowDropDown,
contentDescription = "Drop-Down Arrow",
)
}
if (expandedCard) {
DeviceInfo(modifier = Modifier, deviceOverview.device)
Expand Down Expand Up @@ -297,22 +282,18 @@ fun DeleteDeviceIconButton(
onRemove: () -> Unit,
modifier: Modifier = Modifier,
) {
var openConfirmDialog by remember { mutableStateOf(false) }
val (openConfirmDialog, setOpenConfirmDialog) = remember { mutableStateOf(false) }

ConfirmAlertDialog(
openConfirmDialog = openConfirmDialog,
setOpenConfirmDialog = { openConfirmDialog = it },
setOpenConfirmDialog = setOpenConfirmDialog,
title = "Remove " + device.name,
text = "Are you sure that you want to remove " + device.name + "?",
onConfirm = { // TODO: Call API to remove a device
onRemove()
},
onConfirm = { onRemove() },
)

IconButton(
onClick = {
openConfirmDialog = true
},
onClick = { setOpenConfirmDialog(true) },
) {
Icon(
imageVector = Icons.Default.Delete,
Expand Down
Loading
Loading