Pbi 5 kelola donasi barang

src/__test__/donasi-barang/DetailDonasiBarang.test.js

+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

+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

@@ -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

@@ -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

+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

@@ -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

@@ -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

@@ -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

+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

+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

+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

@@ -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

-import React from "react";
-import { css } from "@emotion/core";
-
-const ListDonasiBarang = () => {
-    return (