Fakultas Ilmu Komputer UI
Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ppl-fasilkom-ui
2020
PPL-C
pilar-home-industry
post-rpl-web
Commits
ada8b954
Commit
ada8b954
authored
May 07, 2020
by
Michael Wiryadinata Halim
Browse files
Coldfix sprint 4 Fix UI
parent
991d347f
Changes
8
Hide whitespace changes
Inline
Side-by-side
.gitignore
View file @
ada8b954
...
...
@@ -27,3 +27,4 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
/.vscode
.parcel-cache
\ No newline at end of file
src/__test__/DetailPengguna.test.js
View file @
ada8b954
...
...
@@ -11,6 +11,25 @@ afterEach(cleanup);
test
(
"
Test detail pengguna renders
"
,
async
()
=>
{
fetch
.
once
({
id
:
"
8e9a8f94-cb5c-4b2d-b4f1-81ccfb9f1b0a
"
,
donation_number
:
"
7NGVBN
"
,
user
:
"
45897cc5-968c-44cf-931d-e646b095fcaf
"
,
user_username
:
"
admin-staging
"
,
program
:
"
6d7462da-6a85-4e2b-9930-69567090a5d5
"
,
program_code
:
"
3MXZ9T
"
,
user_full_name
:
"
Hello
"
,
user_phone_number
:
"
012345
"
,
program_name
:
"
dummy 2
"
,
amount
:
"
10000.00
"
,
donation_status
:
"
001
"
,
readable_donation_status
:
"
Menunggu konfirmasi admin
"
,
proof_of_bank_transfer
:
"
a
"
,
user_bank_account_name
:
"
Jeffrey
"
,
user_bank_account_number
:
"
12345678
"
,
created_at
:
"
2020-04-28T21:34:15.565614+07:00
"
,
updated_at
:
"
2020-04-28T21:34:15.565651+07:00
"
,
})
.
once
(
JSON
.
stringify
({
count
:
17
,
...
...
src/component/StatusDonasi.jsx
0 → 100644
View file @
ada8b954
import
React
from
"
react
"
;
import
{
css
}
from
"
@emotion/core
"
;
const
StatusDonasi
=
({
status
,
label
})
=>
{
let
color
;
switch
(
status
)
{
case
"
001
"
:
color
=
"
#EAC435
"
;
break
;
case
"
002
"
:
color
=
"
#27496d
"
;
break
;
case
"
003
"
:
color
=
"
#CA1551
"
;
break
;
case
"
004
"
:
color
=
"
#FC766AFF
"
;
break
;
default
:
color
=
"
black
"
;
break
;
}
return
(
<
div
css
=
{
css
`
color:
${
color
}
;
`
}
>
{
label
}
</
div
>
);
};
export
default
StatusDonasi
;
src/component/TableUtils.jsx
View file @
ada8b954
...
...
@@ -3,6 +3,7 @@ import Moment from "react-moment";
import
NumberFormat
from
"
react-number-format
"
;
import
"
moment-timezone
"
;
import
Status
from
"
./Status
"
;
import
StatusDonasi
from
"
./StatusDonasi
"
;
export
const
stringToDate
=
(
date
)
=>
{
const
dateFormat
=
new
Date
(
date
);
return
(
...
...
@@ -30,7 +31,7 @@ export const transactionToColoredStatus = (transaction) => (
);
export
const
donationToColoredStatus
=
(
donation
)
=>
(
<
Status
<
Status
Donasi
status
=
{
donation
.
donation_status
}
label
=
{
donation
.
readable_donation_status
}
/>
...
...
src/page/donasi/DetailDonasi.jsx
View file @
ada8b954
...
...
@@ -6,7 +6,6 @@ import PhoneIcon from "@material-ui/icons/Phone";
import
PhotoIcon
from
"
@material-ui/icons/Photo
"
;
import
{
Link
,
navigate
}
from
"
@reach/router
"
;
import
PersonIcon
from
"
@material-ui/icons/Person
"
;
import
Status
from
"
../../component/Status
"
;
import
{
stringToDate
}
from
"
../../component/TableUtils
"
;
import
{
ErrorDiv
}
from
"
../../component/html/html
"
;
import
Button
from
"
@material-ui/core/Button
"
;
...
...
@@ -15,6 +14,7 @@ import DialogActions from "@material-ui/core/DialogActions";
import
DialogContent
from
"
@material-ui/core/DialogContent
"
;
import
DialogTitle
from
"
@material-ui/core/DialogTitle
"
;
import
FormDonasi
from
"
./FormDonasi
"
;
import
StatusDonasi
from
"
../../component/StatusDonasi
"
;
const
DetailDonasi
=
({
idDonasi
})
=>
{
const
url
=
`
${
process
.
env
.
REACT_APP_BASE_URL
}
/program-donations/
${
idDonasi
}
/`
;
const
[
donation
,
error
]
=
useFetchSingleData
(
url
);
...
...
@@ -51,30 +51,36 @@ const DetailDonasi = ({ idDonasi }) => {
margin: 2rem 3rem 3rem 3rem;
flex-direction: column;
justify-content: space-around;
height:
12
5vh;
height:
7
5vh;
`
}
>
{
error
&&
<
ErrorDiv
>
Something error
</
ErrorDiv
>
}
<
button
css
=
{
css
`
align-self: start;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
`
}
onClick
=
{
()
=>
navigate
(
-
1
)
}
>
<
ArrowBackIcon
fontSize
=
"large"
/>
</
button
>
<
div
css
=
{
css
`
font-size: 1rem;
`
}
>
ADMIN - DETAIL DONASI
<
div
>
<
button
css
=
{
css
`
align-self: start;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
display: inline-block;
vertical-align: middle;
`
}
onClick
=
{
()
=>
navigate
(
-
1
)
}
>
<
ArrowBackIcon
fontSize
=
"large"
/>
</
button
>
<
div
css
=
{
css
`
display: inline-block;
font-size: 2rem;
vertical-align: middle;
`
}
>
DETAIL DONASI
</
div
>
</
div
>
<
div
css
=
{
css
`
...
...
@@ -120,7 +126,7 @@ const DetailDonasi = ({ idDonasi }) => {
>
Status:
{
"
"
}
</
div
>
<
Status
<
Status
Donasi
label
=
{
donation
.
readable_donation_status
}
status
=
{
donation
.
donation_status
}
/>
...
...
@@ -162,7 +168,7 @@ const DetailDonasi = ({ idDonasi }) => {
align-items: baseline;
`
}
>
<
PersonIcon
/>
<
PersonIcon
style
=
{
{
color
:
"
FFC80A
"
}
}
/>
<
Link
to
=
{
`/pengguna/
${
donation
.
user
}
`
}
>
{
donation
.
user_full_name
}
/
{
donation
.
user_username
}
</
Link
>
...
...
@@ -174,7 +180,7 @@ const DetailDonasi = ({ idDonasi }) => {
align-items: baseline;
`
}
>
<
PhoneIcon
/>
<
PhoneIcon
style
=
{
{
color
:
"
FFC80A
"
}
}
/>
<
div
>
{
donation
.
user_phone_number
}
</
div
>
</
div
>
<
div
...
...
src/page/pengguna/DetailPengguna.jsx
View file @
ada8b954
...
...
@@ -10,6 +10,7 @@ import useFetchSingleData from "../../utils/useFetchSingleData";
import
{
ErrorDiv
}
from
"
../../component/html/html
"
;
import
{
stringToCurrency
,
stringToDate
}
from
"
../../component/TableUtils
"
;
import
TableComponent
from
"
../../component/TableComponent
"
;
import
{
donationToColoredStatus
}
from
"
../../component/TableUtils
"
;
const
DetailPengguna
=
({
userId
})
=>
{
const
url
=
`
${
process
.
env
.
REACT_APP_BASE_URL
}
/users/
${
userId
}
/`
;
...
...
@@ -18,7 +19,7 @@ const DetailPengguna = ({ userId }) => {
url
:
`
${
process
.
env
.
REACT_APP_BASE_URL
}
/transactions/`
,
pageDefault
:
1
,
argument
:
`user=
${
userId
}
`
,
title
:
"
Riwayat Transaksi
"
,
title
:
""
,
keyValuePairs
:
[
[
"
id
"
,
"
id
"
],
[
"
transaction_number
"
,
"
ID Transaksi
"
],
...
...
@@ -46,6 +47,35 @@ const DetailPengguna = ({ userId }) => {
},
],
};
const
data_donasi
=
{
url
:
`
${
process
.
env
.
REACT_APP_BASE_URL
}
/program-donations/`
,
pageDefault
:
1
,
argument
:
`user=
${
userId
}
`
,
title
:
""
,
keyValuePairs
:
[
[
"
id
"
,
"
id
"
],
[
"
donation_number
"
,
"
ID Donasi
"
],
[
"
user_username
"
,
"
Username
"
],
[
"
program_name
"
,
"
Nama Program
"
],
[
""
,
"
Status
"
,
donationToColoredStatus
],
],
link
:
"
/donasi/
"
,
filter
:
[
[
"
updated_at_date_range_after
"
,
"
Updated from
"
],
[
"
updated_at_date_range_before
"
,
"
Updated before
"
],
{
donation_status
:
{
label
:
"
Status Donasi
"
,
choices
:
[
{
"
001
"
:
"
Menunggu konfirmasi admin
"
},
{
"
002
"
:
"
Selesai
"
},
{
"
003
"
:
"
Dibatalkan
"
},
{
"
004
"
:
"
Menunggu pengunggahan kembali bukti transfer bank
"
},
],
},
},
],
};
return
(
<
div
data-testid
=
"page-profile"
...
...
@@ -190,6 +220,20 @@ const DetailPengguna = ({ userId }) => {
margin-top: 1rem;
`
}
>
<
div
css
=
{
css
`
display: flex;
`
}
>
<
ScheduleIcon
style
=
{
{
fontSize
:
25
,
color
:
"
FFC80A
"
}
}
/>
<
div
css
=
{
css
`
font-weight: bold;
`
}
>
Riwayat Transaksi
</
div
>
</
div
>
<
div
css
=
{
css
`
display: flex;
...
...
@@ -204,7 +248,7 @@ const DetailPengguna = ({ userId }) => {
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height:
1
5px;
line-height:
2
5px;
margin-top: 1rem;
`
}
>
...
...
@@ -216,12 +260,20 @@ const DetailPengguna = ({ userId }) => {
<
ScheduleIcon
style
=
{
{
fontSize
:
25
,
color
:
"
FFC80A
"
}
}
/>
<
div
css
=
{
css
`
margin-left: 2rem
;
font-weight: bold
;
`
}
>
Riwayat Donasi
</
div
>
</
div
>
<
div
css
=
{
css
`
display: flex;
flex-direction: column;
`
}
>
<
TableComponent
{
...
data_donasi
}
/>
</
div
>
</
div
>
</
div
>
</
div
>
...
...
src/page/pengguna/ListPengguna.jsx
View file @
ada8b954
...
...
@@ -12,8 +12,8 @@ const ListPengguna = () => {
[
"
id
"
,
"
id
"
],
[
"
full_name
"
,
"
Nama Lengkap
"
],
[
"
username
"
,
"
Username
"
],
[
"
dummy
"
,
"
d
um
my
"
],
[
"
dummy
"
,
"
d
um
my
"
],
[
"
total_transactions
"
,
"
J
um
lah Transaksi
"
],
[
"
total_program_donations
"
,
"
J
um
lah Donasi
"
],
],
link
:
""
,
};
...
...
src/page/transaksi/DetailTransaksi.jsx
View file @
ada8b954
...
...
@@ -63,26 +63,32 @@ const DetailTransaksi = ({ idTransaksi }) => {
`
}
>
{
error
&&
<
ErrorDiv
>
Something error
</
ErrorDiv
>
}
<
button
css
=
{
css
`
align-self: start;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
`
}
onClick
=
{
()
=>
navigate
(
-
1
)
}
>
<
ArrowBackIcon
fontSize
=
"large"
/>
</
button
>
<
div
css
=
{
css
`
font-size: 1rem;
`
}
>
ADMIN - KELOLA TRANSAKSI
<
div
>
<
button
css
=
{
css
`
align-self: start;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
vertical-align: middle;
display: inline-block;
`
}
onClick
=
{
()
=>
navigate
(
-
1
)
}
>
<
ArrowBackIcon
fontSize
=
"large"
/>
</
button
>
<
div
css
=
{
css
`
font-size: 2rem;
vertical-align: middle;
display: inline-block;
`
}
>
KELOLA TRANSAKSI
</
div
>
</
div
>
<
div
css
=
{
css
`
...
...
@@ -172,7 +178,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
align-items: baseline;
`
}
>
<
PersonIcon
/>
<
PersonIcon
style
=
{
{
color
:
"
FFC80A
"
}
}
/>
<
Link
to
=
{
`/pengguna/
${
transaction
.
user
}
`
}
>
{
transaction
.
user_full_name
}
/
{
transaction
.
user_username
}
</
Link
>
...
...
@@ -185,7 +191,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
align-items: baseline;
`
}
>
<
PhoneIcon
/>
<
PhoneIcon
style
=
{
{
color
:
"
FFC80A
"
}
}
/>
<
div
>
{
transaction
.
user_phone_number
}
</
div
>
</
div
>
<
div
...
...
@@ -199,13 +205,12 @@ const DetailTransaksi = ({ idTransaksi }) => {
font-size: 1.2rem;
`
}
>
<
ContactsIcon
/>
Alamat Pengiriman
<
div
>
{
`
${
transaction
.
shipping_address
}
,
<
ContactsIcon
style
=
{
{
color
:
"
FFC80A
"
,
marginRight
:
"
4px
"
}
}
/>
{
`
${
transaction
.
shipping_address
}
,
RT
${
transaction
.
shipping_neighborhood
}
,
RW
${
transaction
.
shipping_hamlet
}
,
Kelurahan
${
transaction
.
shipping_urban_village
}
,
Kecamatan
${
transaction
.
shipping_sub_district
}
`
}
</
div
>
Kecamatan
${
transaction
.
shipping_sub_district
}
`
}
</
div
>
</
div
>
<
TableContainer
component
=
{
Paper
}
>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment