Fakultas Ilmu Komputer UI

Commit c3e6f3be authored by Wan Muhammad Rayhan Arwindra's avatar Wan Muhammad Rayhan Arwindra 🤸🏽
Browse files

Pbi 5 kelola donasi barang

parent f18b22a7
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");
});
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
......@@ -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>
);
});
......@@ -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
......
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;
......@@ -60,6 +60,7 @@ const TableComponent = ({
reset: resetFilter,
} = useForm();
const [filterTab, setFilterTab] = useState(false);
console.log(results);
return (
<div
css={css`
......
......@@ -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>
);
......
......@@ -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>
......
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;
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;
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;
......@@ -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 (
......
import React from "react";
import { css } from "@emotion/core";
const ListDonasiBarang = () => {
return (