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
IT Project 2020
Group B
pilar-web
Commits
c3e6f3be
Commit
c3e6f3be
authored
Oct 28, 2020
by
Wan Muhammad Rayhan Arwindra
🤸🏽
Browse files
Pbi 5 kelola donasi barang
parent
f18b22a7
Changes
16
Hide whitespace changes
Inline
Side-by-side
src/__test__/donasi-barang/DetailDonasiBarang.test.js
0 → 100644
View file @
c3e6f3be
import
{
cleanup
,
render
}
from
"
@testing-library/react
"
;
import
AuthContext
from
"
../../utils/contex
"
;
import
React
from
"
react
"
;
import
DetailDonasiBarang
from
"
../../page/donasi-barang/DetailDonasiBarang
"
;
import
{
waitFor
}
from
"
@testing-library/dom
"
;
beforeEach
(()
=>
{
fetch
.
resetMocks
();
});
afterEach
(
cleanup
);
test
(
"
Test detail loaded donasi
"
,
async
()
=>
{
fetch
.
mockResponseOnce
(
JSON
.
stringify
({
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
"
,
item
:
"
Alat Tulis
"
,
amount
:
"
10
"
,
donation_status
:
"
001
"
,
readable_donation_status
:
"
Menunggu konfirmasi admin
"
,
created_at
:
"
2020-04-28T21:34:15.565614+07:00
"
,
updated_at
:
"
2020-04-28T21:34:15.565651+07:00
"
,
})
);
const
{
getByTestId
}
=
render
(
<
AuthContext
.
Provider
value
=
{{
profile
:
{
token
:
"
tester
"
}
}}
>
<
DetailDonasiBarang
idDonasi
=
{
"
8e9a8f94-cb5c-4b2d-b4f1-81ccfb9f1b0a
"
}
/
>
<
/AuthContext.Provider
>
);
const
wait
=
getByTestId
(
"
waiting-detail-donasi
"
);
expect
(
wait
.
textContent
).
toContain
(
"
Fetching data..
"
);
await
waitFor
(()
=>
getByTestId
(
"
page-detail-donasi
"
));
const
data
=
getByTestId
(
"
page-detail-donasi
"
);
expect
(
data
.
textContent
).
toContain
(
"
DETAIL DONASI
"
);
});
src/__test__/donasi-barang/ListDonasiBarang.test.js
0 → 100644
View file @
c3e6f3be
import
{
act
,
cleanup
,
fireEvent
,
render
}
from
"
@testing-library/react
"
;
import
AuthContext
from
"
../../utils/contex
"
;
import
React
from
"
react
"
;
import
ListDonasiBarang
from
"
../../page/donasi-barang/ListDonasiBarang
"
;
import
{
waitFor
}
from
"
@testing-library/dom
"
;
beforeEach
(()
=>
{
fetch
.
resetMocks
();
});
afterEach
(
cleanup
);
test
(
"
Test List donasi
"
,
async
()
=>
{
fetch
.
mockResponseOnce
(
JSON
.
stringify
({
count
:
1
,
next
:
null
,
previous
:
null
,
results
:
[
{
id
:
"
8e9a8f94-cb5c-4b2d-b4f1-81ccfb9f1b0a
"
,
donation_number
:
"
7NGVBN
"
,
user
:
"
45897cc5-968c-44cf-931d-e646b095fcaf
"
,
program
:
"
6d7462da-6a85-4e2b-9930-69567090a5d5
"
,
program_code
:
"
3MXZ9T
"
,
user_username
:
"
admin-staging
"
,
user_full_name
:
""
,
user_phone_number
:
""
,
program_name
:
"
dummy 2
"
,
item
:
"
Alat Tulis
"
,
amount
:
"
10
"
,
donation_status
:
"
001
"
,
readable_donation_status
:
"
Menunggu konfirmasi admin
"
,
user_address
:
"
Jalan Sesama No. 14
"
,
created_at
:
"
2020-04-28T21:34:15.565614+07:00
"
,
updated_at
:
"
2020-04-28T21:34:15.565651+07:00
"
,
},
],
})
);
const
{
getByTestId
}
=
render
(
<
AuthContext
.
Provider
value
=
{{
profile
:
{
token
:
"
tester
"
}
}}
>
<
ListDonasiBarang
/>
<
/AuthContext.Provider
>
);
await
waitFor
(()
=>
getByTestId
(
"
tableList
"
));
const
data
=
getByTestId
(
"
tableList
"
);
expect
(
data
.
textContent
).
toContain
(
"
admin-staging
"
);
expect
(
data
.
textContent
).
toContain
(
"
dummy 2
"
);
expect
(
data
.
textContent
).
toContain
(
"
Dalam Proses
"
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
1
);
});
test
(
"
Test List transaksi filter
"
,
async
()
=>
{
fetch
.
once
(
JSON
.
stringify
({
count
:
1
,
next
:
null
,
previous
:
null
,
results
:
[
{
id
:
"
8e9a8f94-cb5c-4b2d-b4f1-81ccfb9f1b0a
"
,
donation_number
:
"
7NGVBN
"
,
user
:
"
45897cc5-968c-44cf-931d-e646b095fcaf
"
,
program
:
"
6d7462da-6a85-4e2b-9930-69567090a5d5
"
,
program_code
:
"
3MXZ9T
"
,
user_username
:
"
admin-staging
"
,
user_full_name
:
""
,
user_phone_number
:
""
,
program_name
:
"
dummy 2
"
,
item
:
"
Alat Tulis
"
,
amount
:
"
10
"
,
donation_status
:
"
001
"
,
readable_donation_status
:
"
Menunggu konfirmasi admin
"
,
user_address
:
"
Jalan Sesama No. 14
"
,
created_at
:
"
2020-04-28T21:34:15.565614+07:00
"
,
updated_at
:
"
2020-04-28T21:34:15.565651+07:00
"
,
},
],
})
);
const
{
getByTestId
,
getByLabelText
}
=
render
(
<
AuthContext
.
Provider
value
=
{{
profile
:
{
token
:
"
tester
"
}
}}
>
<
ListDonasiBarang
/>
<
/AuthContext.Provider
>
);
await
waitFor
(()
=>
getByTestId
(
"
tableList
"
));
const
data
=
getByTestId
(
"
tableList
"
);
expect
(
data
.
textContent
).
toContain
(
"
admin-staging
"
);
expect
(
data
.
textContent
).
toContain
(
"
Dalam Proses
"
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
1
);
await
act
(
async
()
=>
{
await
fireEvent
.
click
(
getByTestId
(
"
filter-button
"
));
});
await
act
(
async
()
=>
{
await
fireEvent
.
input
(
getByLabelText
(
"
Status Donasi
"
,
{
target
:
{
value
:
"
001
"
}
})
);
await
fireEvent
.
click
(
getByTestId
(
"
submit-filter
"
));
});
expect
(
data
.
textContent
).
toContain
(
"
admin-staging
"
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
2
);
});
\ No newline at end of file
src/__test__/donasi/ListDonasi.test.js
View file @
c3e6f3be
...
...
@@ -2,7 +2,6 @@ import { act, cleanup, fireEvent, render } from "@testing-library/react";
import
AuthContext
from
"
../../utils/contex
"
;
import
React
from
"
react
"
;
import
ListDonasiUang
from
"
../../page/donasi/ListDonasiUang
"
;
import
ListDonasiBarang
from
"
../../page/donasi/ListDonasiBarang
"
;
import
{
waitFor
}
from
"
@testing-library/dom
"
;
beforeEach
(()
=>
{
...
...
@@ -102,13 +101,3 @@ test(" Test List transaksi filter", async () => {
expect
(
data
.
textContent
).
toContain
(
"
admin-staging
"
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
2
);
});
test
(
"
Test list donasi barang
"
,
async
()
=>
{
render
(
<
AuthContext
.
Provider
value
=
{{
profile
:
{
token
:
"
tester
"
}
}}
>
<
ListDonasiBarang
/>
<
/AuthContext.Provider
>
);
});
src/component/FormDownload.jsx
View file @
c3e6f3be
...
...
@@ -25,17 +25,7 @@ const FormDownload = ({ url }) => {
css
=
{
css
`
margin-right:15px;
`
}
>
<
label
htmlFor
=
"batch"
css
=
{
css
`
font-weight: bold;
`
}
>
Batch
{
"
"
}
</
label
>
<
input
name
=
"batch"
type
=
"text"
ref
=
{
register
}
/>
</
div
>
></
div
>
{
error
&&
<
ErrorDiv
>
Mohon maaf ada sesuatu yang salah
</
ErrorDiv
>
}
<
div
>
<
label
...
...
src/component/StatusDonasiBarang.jsx
0 → 100644
View file @
c3e6f3be
import
React
from
"
react
"
;
import
{
css
}
from
"
@emotion/core
"
;
const
StatusDonasiBarang
=
({
status
,
label
})
=>
{
let
color
;
switch
(
status
)
{
case
"
001
"
:
color
=
"
#3C8DBC
"
;
break
;
case
"
002
"
:
color
=
"
black
"
;
break
;
default
:
color
=
"
black
"
;
break
;
}
return
(
<
div
css
=
{
css
`
color:
${
color
}
;
`
}
>
{
label
}
</
div
>
);
};
export
default
StatusDonasiBarang
;
src/component/TableComponent.jsx
View file @
c3e6f3be
...
...
@@ -60,6 +60,7 @@ const TableComponent = ({
reset
:
resetFilter
,
}
=
useForm
();
const
[
filterTab
,
setFilterTab
]
=
useState
(
false
);
console
.
log
(
results
);
return
(
<
div
css
=
{
css
`
...
...
src/component/TableUtils.jsx
View file @
c3e6f3be
...
...
@@ -4,6 +4,7 @@ import NumberFormat from "react-number-format";
import
"
moment-timezone
"
;
import
Status
from
"
./Status
"
;
import
StatusDonasi
from
"
./StatusDonasi
"
;
import
StatusDonasiBarang
from
"
./StatusDonasiBarang
"
;
export
const
stringToDate
=
(
date
)
=>
{
const
dateFormat
=
new
Date
(
date
);
return
(
...
...
@@ -44,6 +45,28 @@ export const donationToColoredStatus = (donation) => (
/>
);
export
const
itemDonationStatus
=
(
donation
)
=>
{
let
statusLabel
;
const
status
=
donation
.
donation_status
switch
(
status
){
case
"
001
"
:
statusLabel
=
"
Dalam Proses
"
;
break
;
case
"
002
"
:
statusLabel
=
"
Donasi Diterima
"
;
break
;
default
:
statusLabel
=
"
Dalam Proses
"
;
break
;
}
return
<
StatusDonasiBarang
status
=
{
status
}
label
=
{
statusLabel
}
/>
}
export
const
preorderStock
=
(
product
)
=>
(
<
div
>
{
product
.
pre_order
?
"
preorder
"
:
product
.
stock
}
</
div
>
);
...
...
src/page/batch/DetailBatch.jsx
View file @
c3e6f3be
...
...
@@ -108,7 +108,7 @@ const DetailBatch = ({ batchId }) => {
<
div
className
=
"container-fluid row"
>
<
div
className
=
"col-12"
>
<
div
css
=
{
css
`flex-grow: 1;`
}
>
<
LinkYellow
css
=
{
css
`border: 3px solid #3c8dbc;`
}
to
=
"ubah"
>
<
LinkYellow
css
=
{
css
`border: 3px solid #3c8dbc;
margin-bottom:10px;
`
}
to
=
"ubah"
>
UBAH
</
LinkYellow
>
</
div
>
...
...
src/page/donasi-barang/DetailDonasiBarang.jsx
0 → 100644
View file @
c3e6f3be
import
React
from
"
react
"
;
import
useFetchSingleData
from
"
../../utils/useFetchSingleData
"
;
import
{
css
}
from
"
@emotion/core
"
;
import
ArrowBackIcon
from
"
@material-ui/icons/ArrowBack
"
;
import
PhoneIcon
from
"
@material-ui/icons/Phone
"
;
import
{
Link
,
navigate
}
from
"
@reach/router
"
;
import
PersonIcon
from
"
@material-ui/icons/Person
"
;
import
{
ErrorDiv
}
from
"
../../component/html/html
"
;
import
FormDonasiBarang
from
"
./FormDonasiBarang
"
;
const
DetailDonasiBarang
=
({
idDonasi
})
=>
{
const
url
=
`
${
process
.
env
.
REACT_APP_BASE_URL
}
/program-donations/
${
idDonasi
}
/`
;
const
[
donation
,
error
]
=
useFetchSingleData
(
url
);
if
(
Object
.
keys
(
donation
).
length
===
0
)
return
(
<
div
data-testid
=
"waiting-detail-donasi"
css
=
{
css
`
display: flex;
margin: 2rem 3rem 3rem 3rem;
flex-direction: column;
font-size: 25px;
`
}
>
{
error
&&
<
ErrorDiv
>
Something error
</
ErrorDiv
>
}
Fetching data..
</
div
>
);
return
(
<
div
data-testid
=
"page-detail-donasi"
css
=
{
css
`
display: flex;
margin: 2rem 3rem 3rem 3rem;
flex-direction: column;
justify-content: space-around;
height: 75vh;
`
}
>
{
error
&&
<
ErrorDiv
>
Something error
</
ErrorDiv
>
}
<
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
`
display: flex;
font-size: 1.2rem;
align-items: baseline;
`
}
>
<
PersonIcon
style
=
{
{
color
:
"
FFC80A
"
}
}
/>
<
Link
to
=
{
`/pengguna/
${
donation
.
user
}
`
}
>
{
donation
.
user_full_name
}
/
{
donation
.
user_username
}
</
Link
>
</
div
>
<
div
css
=
{
css
`
display: flex;
font-size: 1.2rem;
align-items: baseline;
`
}
>
<
PhoneIcon
style
=
{
{
color
:
"
FFC80A
"
}
}
/>
<
div
>
{
donation
.
user_phone_number
}
</
div
>
</
div
>
<
div
css
=
{
css
`
display: flex;
font-size: 1.2rem;
align-items: baseline;
`
}
>
<
div
>
Program:
</
div
>
<
div
css
=
{
css
`
margin-left: 0.5rem;
`
}
>
{
donation
.
program_name
}
</
div
>
</
div
>
<
div
css
=
{
css
`
display: flex;
font-size: 1.2rem;
align-items: baseline;
`
}
>
<
div
>
Jenis Barang:
</
div
>
<
div
css
=
{
css
`
margin-left: 0.5rem;
`
}
>
{
donation
.
goods_description
}
</
div
>
</
div
>
<
div
css
=
{
css
`
display: flex;
font-size: 1.2rem;
align-items: baseline;
`
}
>
<
div
>
Jumlah Barang:
</
div
>
<
div
css
=
{
css
`
margin-left: 0.5rem;
`
}
>
{
donation
.
goods_quantity
}
</
div
>
</
div
>
<
div
css
=
{
css
`
display: flex;
flex-direction: column;
`
}
>
{
"
"
}
<
div
css
=
{
css
`
font-size: 1.3rem;
`
}
>
<
div
>
{
donation
.
delivery_address
===
null
?
(
<
div
>
Diantar ke masjid Al-Jabar
</
div
>
)
:
(
<
div
>
Dijemput di
{
donation
.
delivery_address
}
</
div
>
)
}
</
div
>
</
div
>
</
div
>
{
donation
.
donation_status
!==
"
002
"
?
(
<
FormDonasiBarang
{
...{
idDonasi
,
defaultStatus
:
donation
.
donation_status
,
}
}
/>
)
:
<
div
css
=
{
css
`
font-size: 1.3rem;
`
}
>
Donasi sudah diterima
</
div
>
}
</
div
>
);
};
export
default
DetailDonasiBarang
;
src/page/donasi-barang/FormDonasiBarang.jsx
0 → 100644
View file @
c3e6f3be
import
React
from
"
react
"
;
import
{
useForm
}
from
"
react-hook-form
"
;
import
useSendData
from
"
../../utils/useSendData
"
;
import
{
ErrorDiv
}
from
"
../../component/html/html
"
;
import
{
css
}
from
"
@emotion/core
"
;
import
Button
from
"
@material-ui/core/Button
"
;
const
FormDonasi
=
({
idDonasi
,
defaultStatus
})
=>
{
const
url
=
`
${
process
.
env
.
REACT_APP_BASE_URL
}
/program-donations/
${
idDonasi
}
/`
;
const
{
handleSubmit
}
=
useForm
({
defaultValues
:
{
donation_status
:
defaultStatus
,
},
});
const
[
send
,
errorSend
]
=
useSendData
({
url
,
header
:
{
"
Content-Type
"
:
"
application/json
"
},
method
:
"
PUT
"
,
redirect
:
`/donasi-barang/`
,
});
const
onSubmit
=
(
data
)
=>
{
data
=
{
donation_status
:
"
002
"
,
}
send
(
JSON
.
stringify
({
...
data
}));
};
return
(
<
div
data-testid
=
"form-status"
>
{
errorSend
&&
<
ErrorDiv
>
Status donasi tidak dapat disimpan
</
ErrorDiv
>
}
<
form
onSubmit
=
{
handleSubmit
(
onSubmit
)
}
css
=
{
css
`
display: flex;
`
}
>
<
Button
data-testid
=
"button-submit-status"
type
=
"submit"
variant
=
"contained"
color
=
"primary"
>
Donasi Diterima
</
Button
>
</
form
>
</
div
>
);
};
export
default
FormDonasi
;
src/page/donasi-barang/ListDonasiBarang.jsx
0 → 100644
View file @
c3e6f3be
import
React
from
"
react
"
;
import
TableComponent
from
"
../../component/TableComponent
"
;
import
{
css
}
from
"
@emotion/core
"
;
import
{
itemDonationStatus
}
from
"
../../component/TableUtils
"
;
import
FormDownload
from
"
../../component/FormDownload
"
;
const
ListDonasiBarang
=
()
=>
{
const
data
=
{
url
:
`
${
process
.
env
.
REACT_APP_BASE_URL
}
/program-donations/gds`
,
pageDefault
:
1
,
title
:
""
,
keyValuePairs
:
[
[
"
id
"
,
"
id
"
],
[
"
donation_number
"
,
"
ID Donasi
"
],
[
"
user_username
"
,
"
Username
"
],
[
"
program_name
"
,
"
Nama Program
"
],
[
""
,
"
Status
"
,
itemDonationStatus
],
],
link
:
"
/donasi-barang/
"
,
filter
:
[
[
"
updated_at_date_range_after
"
,
"
Updated from
"
,
"
date
"
],
[
"
updated_at_date_range_before
"
,
"
Updated before
"
,
"
date
"
],
{
donation_status
:
{
label
:
"
Status Donasi
"
,
choices
:
[
{
"
001
"
:
"
Dalam Proses
"
},
{
"
002
"
:
"
Donasi Diterima
"
},
],
},
},
],
};
console
.
log
(
data
);
return
(
<
div
css
=
{
css
`
display: flex;
flex-direction: column;
margin: 2rem 3rem 3rem 3rem;
`
}
>
<
div
css
=
{
css
`
font-size: 35px;
`
}
>
KELOLA DONASI BARANG
</
div
>
<
div
css
=
{
css
`
display: flex;
width: 25%;
margin-left: auto;
margin-right: 26%;
`
}
>
<
FormDownload
url
=
"/reports/program-donation/"
/>
</
div
>
<
TableComponent
{
...
data
}
/>
</
div
>
);
};
export
default
ListDonasiBarang
;
src/page/donasi/FormDonasi.jsx
View file @
c3e6f3be
...
...
@@ -22,10 +22,12 @@ const FormDonasi = ({ idDonasi, defaultStatus }) => {
url
,
header
:
{
"
Content-Type
"
:
"
application/json
"
},
method
:
"
PUT
"
,
redirect
:
`/donasi/`
,
redirect
:
`/donasi
-uang
/`
,
});
const
onSubmit
=
(
data
)
=>
{
console
.
log
(
data
);
console
.
log
(...
data
);
send
(
JSON
.
stringify
({
...
data
}));
};
return
(
...
...
src/page/donasi/ListDonasiBarang.jsx
deleted
100644 → 0
View file @
f18b22a7
import
React
from
"
react
"
;
import
{
css
}
from
"
@emotion/core
"
;
const
ListDonasiBarang
=
()
=>
{
return
(