Skip to content

Commit 7a59aec

Browse files
NiranjanNlcNiranjanNlc
committed
migrated account fragment to compose
1 parent ae1389c commit 7a59aec

File tree

7 files changed

+501
-167
lines changed

7 files changed

+501
-167
lines changed

‎mifospay/src/main/java/org/mifos/mobilewallet/mifospay/bank/composeScreen/AccountScreen.kt

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
package org.mifos.mobilewallet.mifospay.bank.composeScreen
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.Spacer
6+
import androidx.compose.foundation.layout.fillMaxSize
7+
import androidx.compose.foundation.layout.fillMaxWidth
8+
import androidx.compose.foundation.layout.height
9+
import androidx.compose.foundation.layout.padding
10+
import androidx.compose.foundation.lazy.LazyColumn
11+
import androidx.compose.foundation.lazy.rememberLazyListState
12+
import androidx.compose.material.Text
13+
import androidx.hilt.navigation.compose.hiltViewModel
14+
import androidx.compose.runtime.Composable
15+
import androidx.compose.ui.Alignment
16+
import androidx.compose.ui.Modifier
17+
import androidx.compose.ui.res.colorResource
18+
import androidx.compose.ui.res.stringResource
19+
import androidx.compose.ui.tooling.preview.Preview
20+
import androidx.compose.ui.unit.dp
21+
import androidx.compose.ui.unit.sp
22+
import com.mifos.mobilewallet.model.domain.BankAccountDetails
23+
import org.mifos.mobilewallet.mifospay.R
24+
import org.mifos.mobilewallet.mifospay.bank.viewmodel.BankAccountsViewModel
25+
import org.mifos.mobilewallet.mifospay.designsystem.theme.MifosTheme
26+
27+
@Composable
28+
fun AccountScreen(
29+
viewModel: BankAccountsViewModel = hiltViewModel(),
30+
onAddAccountClicked: () -> Unit,
31+
onAccountClicked: (BankAccountDetails) -> Unit
32+
) {
33+
val bankAccountDetails = viewModel.bankAccountDetailsList
34+
AccountScreenContent(bankAccountDetails, onAddAccountClicked, onAccountClicked)
35+
}
36+
37+
@Composable
38+
fun AccountScreenContent(
39+
bankAccountDetails: List<BankAccountDetails>,
40+
onAddAccountClicked: () -> Unit,
41+
onAccountClicked: (BankAccountDetails) -> Unit
42+
) {
43+
Column(
44+
modifier = Modifier
45+
.fillMaxSize()
46+
) {
47+
Text(
48+
text = stringResource(id = R.string.linked_bank_account),
49+
fontSize = 16.sp,
50+
color = colorResource(id = R.color.colorTextPrimary),
51+
modifier = Modifier.padding(
52+
top = 48.dp,
53+
start = 24.dp
54+
)
55+
)
56+
if (bankAccountDetails.isEmpty()) {
57+
Column(
58+
modifier = Modifier
59+
.weight(1f)
60+
.fillMaxWidth()
61+
.padding(top = 48.dp, bottom = 70.dp),
62+
verticalArrangement = Arrangement.Center,
63+
horizontalAlignment = Alignment.CenterHorizontally
64+
65+
) {
66+
EmptyStatePlaceHolder(
67+
title = stringResource(id = R.string.empty_no_accounts_title),
68+
subtitle = stringResource(id = R.string.empty_no_accounts_subtitle),
69+
drawableResId = R.drawable.ic_empty_state
70+
)
71+
}
72+
} else {
73+
LazyColumn(
74+
modifier = Modifier
75+
.weight(1f)
76+
.padding(top = 48.dp)
77+
.fillMaxSize(),
78+
state = rememberLazyListState()
79+
) {
80+
items(bankAccountDetails.size) { index ->
81+
val bankAccount = bankAccountDetails[index]
82+
ListItemWithImage(
83+
bankAccount = bankAccount,
84+
onAccountClicked
85+
)
86+
}
87+
}
88+
}
89+
Spacer(modifier = Modifier.height(16.dp))
90+
AddAccountChip(
91+
modifier = Modifier
92+
.align(Alignment.CenterHorizontally)
93+
.padding(bottom = 128.dp),
94+
onAddAccountClicked = onAddAccountClicked
95+
)
96+
}
97+
}
98+
99+
@Preview
100+
@Composable
101+
fun AccountScreenPreview() {
102+
var bankAccountDetails = listOf(
103+
BankAccountDetails(
104+
"SBI", "Ankur Sharma", "New Delhi",
105+
"1234567890", "Savings"
106+
),
107+
BankAccountDetails(
108+
"HDFC", "Mandeep Singh ", "Uttar Pradesh",
109+
"1234567890", "Savings"
110+
),
111+
BankAccountDetails(
112+
"ANDHRA", "Rakesh anna ", "Telegana",
113+
"1234567890", "Savings"
114+
),
115+
BankAccountDetails(
116+
"PNB", "luv Pro ", "Gujrat",
117+
"1234567890", "Savings"
118+
),
119+
BankAccountDetails(
120+
"HDF", "Harry potter ", "Hogwarts",
121+
"1234567890", "Savings"
122+
),
123+
BankAccountDetails(
124+
"GCI", "JIGME ", "JAMMU",
125+
"1234567890", "Savings"
126+
),
127+
BankAccountDetails(
128+
"FCI", "NISHU BOII ", "ASSAM",
129+
"1234567890", "Savings"
130+
),
131+
BankAccountDetails(
132+
"SBI", "Ankur Sharma", "New Delhi",
133+
"1234567890", "Savings"
134+
),
135+
BankAccountDetails(
136+
"HDFC", "Mandeep Singh ", "Uttar Pradesh",
137+
"1234567890", "Savings"
138+
),
139+
BankAccountDetails(
140+
"ANDHRA", "Rakesh anna ", "Telegana",
141+
"1234567890", "Savings"
142+
),
143+
BankAccountDetails(
144+
"PNB", "luv Pro ", "Gujrat",
145+
"1234567890", "Savings"
146+
)
147+
)
148+
MifosTheme {
149+
AccountScreenContent(bankAccountDetails, {}, {})
150+
}
151+
}
152+
153+
@Preview
154+
@Composable
155+
fun EmptyAccountScreenPreview() {
156+
MifosTheme {
157+
AccountScreenContent(bankAccountDetails = emptyList(), {}, {})
158+
}
159+
}

‎mifospay/src/main/java/org/mifos/mobilewallet/mifospay/bank/composeScreen/AddAccountChip.kt

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
package org.mifos.mobilewallet.mifospay.bank.composeScreen
2+
3+
import androidx.compose.foundation.BorderStroke
4+
import androidx.compose.foundation.layout.padding
5+
import androidx.compose.material.Chip
6+
import androidx.compose.material.ChipDefaults
7+
import androidx.compose.material.ExperimentalMaterialApi
8+
import androidx.compose.material.Icon
9+
import androidx.compose.material.Text
10+
import androidx.compose.material.icons.Icons
11+
import androidx.compose.material.icons.filled.Add
12+
import androidx.compose.runtime.Composable
13+
import androidx.compose.ui.Modifier
14+
import androidx.compose.ui.graphics.Color
15+
import androidx.compose.ui.res.colorResource
16+
import androidx.compose.ui.res.stringResource
17+
import androidx.compose.ui.text.style.TextAlign
18+
import androidx.compose.ui.tooling.preview.Preview
19+
import androidx.compose.ui.unit.dp
20+
import org.mifos.mobilewallet.mifospay.R
21+
import org.mifos.mobilewallet.mifospay.theme.MifosTheme
22+
23+
@OptIn(ExperimentalMaterialApi::class)
24+
@Composable
25+
fun AddAccountChip(modifier: Modifier = Modifier, onAddAccountClicked: () -> Unit) {
26+
Chip(
27+
modifier = modifier,
28+
onClick = { onAddAccountClicked() },
29+
colors = ChipDefaults.chipColors(
30+
backgroundColor = Color.Black,
31+
contentColor = colorResource(id = R.color.colorPrimary)
32+
),
33+
border = BorderStroke(width = 1.dp, color = Color.Gray),
34+
) {
35+
Icon(
36+
imageVector = Icons.Default.Add,
37+
contentDescription = null,
38+
tint = colorResource(id = R.color.colorPrimary),
39+
modifier = Modifier.padding(end = 4.dp)
40+
)
41+
Text(
42+
text = stringResource(id = R.string.add_account),
43+
modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
44+
color = colorResource(id = R.color.colorPrimary),
45+
textAlign = TextAlign.Center
46+
)
47+
}
48+
}
49+
50+
@Preview
51+
@Composable
52+
fun AddAccountChipPreview() {
53+
MifosTheme {
54+
AddAccountChip(onAddAccountClicked = { })
55+
}
56+
}

‎mifospay/src/main/java/org/mifos/mobilewallet/mifospay/bank/composeScreen/EmptyStatePlaceHolder.kt

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
package org.mifos.mobilewallet.mifospay.bank.composeScreen
2+
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.layout.*
5+
import androidx.compose.foundation.text.BasicText
6+
import androidx.compose.material.MaterialTheme
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.ui.Alignment
9+
import androidx.compose.ui.Modifier
10+
import androidx.compose.ui.res.painterResource
11+
import androidx.compose.ui.tooling.preview.Preview
12+
import androidx.compose.ui.unit.dp
13+
import org.mifos.mobilewallet.mifospay.R
14+
import org.mifos.mobilewallet.mifospay.theme.MifosTheme
15+
16+
@Composable
17+
fun EmptyStatePlaceHolder(
18+
title: String,
19+
subtitle: String,
20+
drawableResId: Int
21+
) {
22+
Column(
23+
modifier = Modifier
24+
.padding(16.dp),
25+
verticalArrangement = Arrangement.Center,
26+
horizontalAlignment = Alignment.CenterHorizontally
27+
) {
28+
Image(
29+
painter = painterResource(id = drawableResId),
30+
contentDescription = "Content Description Placeholder",
31+
modifier = Modifier.size(120.dp)
32+
)
33+
34+
Spacer(modifier = Modifier.height(16.dp))
35+
36+
BasicText(
37+
text = title,
38+
style = MaterialTheme.typography.body1
39+
)
40+
41+
Spacer(modifier = Modifier.height(8.dp))
42+
43+
BasicText(
44+
text = subtitle,
45+
style = MaterialTheme.typography.body2
46+
)
47+
}
48+
}
49+
50+
@Preview
51+
@Composable
52+
fun PlaceholderStateLayoutPreview() {
53+
MifosTheme {
54+
EmptyStatePlaceHolder(
55+
title = "No Bank Accounts Linked",
56+
subtitle = "You have not linked any bank accounts yet",
57+
drawableResId = R.drawable.ic_empty_state
58+
)
59+
}
60+
}

‎mifospay/src/main/java/org/mifos/mobilewallet/mifospay/bank/composeScreen/ListItemWithImage.kt

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
package org.mifos.mobilewallet.mifospay.bank.composeScreen
2+
3+
import androidx.compose.foundation.clickable
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.Row
6+
import androidx.compose.foundation.layout.fillMaxWidth
7+
import androidx.compose.foundation.layout.height
8+
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.foundation.layout.width
10+
import androidx.compose.material.Divider
11+
import androidx.compose.material3.Icon
12+
import androidx.compose.material3.Text
13+
import androidx.compose.runtime.Composable
14+
import androidx.compose.ui.Alignment
15+
import androidx.compose.ui.Modifier
16+
import androidx.compose.ui.res.colorResource
17+
import androidx.compose.ui.res.dimensionResource
18+
import androidx.compose.ui.res.painterResource
19+
import androidx.compose.ui.tooling.preview.Preview
20+
import androidx.compose.ui.unit.dp
21+
import androidx.compose.ui.unit.sp
22+
import com.mifos.mobilewallet.model.domain.BankAccountDetails
23+
import org.mifos.mobilewallet.mifospay.R
24+
import org.mifos.mobilewallet.mifospay.theme.MifosTheme
25+
26+
@Composable
27+
fun ListItemWithImage(
28+
bankAccount: BankAccountDetails,
29+
onAccountClicked: (BankAccountDetails) -> Unit
30+
) {
31+
var margin = dimensionResource(id = R.dimen.marginItemsInSectionSmall)
32+
var title = bankAccount.bankName ?: ""
33+
var subtitle = bankAccount.accountholderName ?: ""
34+
var optionalCaption = bankAccount.branch ?: ""
35+
Column(
36+
modifier = Modifier.clickable {
37+
onAccountClicked(bankAccount)
38+
}
39+
) {
40+
Row(
41+
modifier = Modifier
42+
.fillMaxWidth()
43+
.padding(
44+
top = margin
45+
),
46+
) {
47+
Icon(
48+
painter = painterResource(id = R.drawable.ic_bank),
49+
contentDescription = "bank`s icon",
50+
modifier = Modifier
51+
.align(Alignment.CenterVertically)
52+
.padding(
53+
start = margin,
54+
end = margin
55+
)
56+
.height(dimensionResource(id = R.dimen.listImageSize))
57+
.width(dimensionResource(id = R.dimen.listImageSize))
58+
)
59+
60+
Column {
61+
Text(
62+
text = subtitle,
63+
color = colorResource(id = R.color.colorTextSecondary),
64+
)
65+
Text(
66+
text = title,
67+
color = colorResource(id = R.color.colorTextPrimary),
68+
modifier = Modifier.padding(top = 4.dp),
69+
fontSize = 16.sp
70+
)
71+
}
72+
Column(
73+
horizontalAlignment = Alignment.End,
74+
modifier = Modifier.fillMaxWidth()
75+
) {
76+
Text(
77+
text = optionalCaption,
78+
modifier = Modifier.padding(
79+
top = margin,
80+
bottom = margin,
81+
end = margin,
82+
start = margin
83+
),
84+
fontSize = 12.sp,
85+
color = colorResource(id = R.color.colorTextSecondary)
86+
)
87+
}
88+
}
89+
Divider(modifier = Modifier.padding(start = 8.dp, end = 8.dp, top = 8.dp, bottom = 8.dp))
90+
}
91+
}
92+
93+
@Preview
94+
@Composable
95+
fun ListItemPreview() {
96+
MifosTheme {
97+
ListItemWithImage(
98+
bankAccount = BankAccountDetails(
99+
"SBI", "Ankur Sharma", "New Delhi",
100+
"1234567890", "Savings"
101+
),
102+
{}
103+
)
104+
}
105+
}

0 commit comments

Comments
 (0)