Skip to content

Commit 7ffd760

Browse files
NiranjanNlcNiranjanNlc
committed
migrated account fragments to compose
1 parent ae1389c commit 7ffd760

File tree

7 files changed

+477
-167
lines changed

7 files changed

+477
-167
lines changed

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

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

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

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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+
22+
@OptIn(ExperimentalMaterialApi::class)
23+
@Composable
24+
fun AddAccountChip(modifier: Modifier = Modifier, onAddAccountClicked: () -> Unit) {
25+
Chip(
26+
modifier = modifier,
27+
onClick = { onAddAccountClicked() },
28+
colors = ChipDefaults.chipColors(
29+
backgroundColor = Color.Black,
30+
contentColor = colorResource(id = R.color.colorPrimary)
31+
),
32+
border = BorderStroke(width = 1.dp, color = Color.Gray),
33+
) {
34+
Icon(
35+
imageVector = Icons.Default.Add,
36+
contentDescription = null,
37+
tint = colorResource(id = R.color.colorPrimary),
38+
modifier = Modifier.padding(end = 4.dp)
39+
)
40+
Text(
41+
text = stringResource(id = R.string.add_account),
42+
modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
43+
color = colorResource(id = R.color.colorPrimary),
44+
textAlign = TextAlign.Center
45+
)
46+
}
47+
}
48+
49+
@Preview
50+
@Composable
51+
fun AddAccountChipPreview() {
52+
AddAccountChip(onAddAccountClicked = { })
53+
}

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

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
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+
25+
@Composable
26+
fun ItemCausualList(
27+
bankAccount: BankAccountDetails,
28+
onAccountClicked: (BankAccountDetails) -> Unit
29+
) {
30+
var margin = dimensionResource(id = R.dimen.marginItemsInSectionSmall)
31+
var title = bankAccount.bankName?:""
32+
var subtitle = bankAccount.accountholderName?:""
33+
var optionalCaption = bankAccount.branch?:""
34+
Column(
35+
modifier = Modifier.clickable {
36+
onAccountClicked(bankAccount)
37+
}
38+
) {
39+
Row(
40+
modifier = Modifier
41+
.fillMaxWidth()
42+
.padding(
43+
top = margin
44+
),
45+
) {
46+
Icon(
47+
painter = painterResource(id = R.drawable.ic_bank),
48+
contentDescription = "bank`s icon",
49+
modifier = Modifier
50+
.align(Alignment.CenterVertically)
51+
.padding(
52+
start = margin,
53+
end = margin
54+
)
55+
.height(dimensionResource(id = R.dimen.listImageSize))
56+
.width(dimensionResource(id = R.dimen.listImageSize))
57+
)
58+
59+
Column {
60+
Text(
61+
text = subtitle,
62+
color = colorResource(id = R.color.colorTextSecondary),
63+
)
64+
Text(
65+
text = title,
66+
color = colorResource(id = R.color.colorTextPrimary),
67+
modifier = Modifier.padding(top = 4.dp),
68+
fontSize = 16.sp
69+
)
70+
}
71+
Column(
72+
horizontalAlignment = Alignment.End,
73+
modifier = Modifier.fillMaxWidth()
74+
) {
75+
Text(
76+
text = optionalCaption,
77+
modifier = Modifier.padding(
78+
top = margin,
79+
bottom = margin,
80+
end = margin,
81+
start = margin
82+
),
83+
fontSize = 12.sp,
84+
color = colorResource(id = R.color.colorTextSecondary)
85+
)
86+
}
87+
}
88+
Divider(modifier = Modifier.padding(start = 8.dp, end = 8.dp, top = 8.dp, bottom = 8.dp))
89+
}
90+
}
91+
92+
@Preview
93+
@Composable
94+
fun ComposeItemPreview() {
95+
ItemCausualList(
96+
bankAccount = BankAccountDetails(
97+
"SBI", "Ankur Sharma", "New Delhi",
98+
"1234567890", "Savings"
99+
),
100+
{}
101+
)
102+
}

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

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

0 commit comments

Comments
 (0)