Fakultas Ilmu Komputer UI

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

Pbi 3 batch transaksi

parent 76be493a
...@@ -16,9 +16,17 @@ test("Test tambah batch renders", async () => { ...@@ -16,9 +16,17 @@ test("Test tambah batch renders", async () => {
</AuthContext.Provider> </AuthContext.Provider>
); );
const name_batch = getByTestId("name-batch-input"); const name_batch = getByTestId("name-batch-input");
const start_date = getByTestId("start-date-input");
const end_date = getByTestId("end-date-input");
await act(async () => { await act(async () => {
await fireEvent.input(name_batch, { target: { value: "test" } }); await fireEvent.input(name_batch, { target: { value: "test" } });
}); });
await act(async () => {
await fireEvent.input(start_date, { target: { value: "2020-10-08" } });
});
await act(async () => {
await fireEvent.input(end_date, { target: { value: "2020-10-15" } });
});
await act(async () => { await act(async () => {
await fireEvent.submit(getByTestId("submit-batch")); await fireEvent.submit(getByTestId("submit-batch"));
}); });
...@@ -48,9 +56,17 @@ test("Test tambah batch error", async () => { ...@@ -48,9 +56,17 @@ test("Test tambah batch error", async () => {
</AuthContext.Provider> </AuthContext.Provider>
); );
const name_batch = getByTestId("name-batch-input"); const name_batch = getByTestId("name-batch-input");
const start_date = getByTestId("start-date-input");
const end_date = getByTestId("end-date-input");
await act(async () => { await act(async () => {
await fireEvent.input(name_batch, { target: { value: "test" } }); await fireEvent.input(name_batch, { target: { value: "test" } });
}); });
await act(async () => {
await fireEvent.input(start_date, { target: { value: "2020-10-08" } });
});
await act(async () => {
await fireEvent.input(end_date, { target: { value: "2020-10-15" } });
});
await act(async () => { await act(async () => {
await fireEvent.submit(getByTestId("submit-batch")); await fireEvent.submit(getByTestId("submit-batch"));
}); });
......
...@@ -67,7 +67,7 @@ test(" Test List transaksi", async () => { ...@@ -67,7 +67,7 @@ test(" Test List transaksi", async () => {
expect(data.textContent).toContain("Rp370.000"); expect(data.textContent).toContain("Rp370.000");
expect(data.textContent).toContain("18 April 2020 10:59"); expect(data.textContent).toContain("18 April 2020 10:59");
expect(data.textContent).toContain("Batch 1"); expect(data.textContent).toContain("Batch 1");
expect(fetch.mock.calls.length).toEqual(1); expect(fetch.mock.calls.length).toEqual(2);
}); });
test(" Test List transaksi filter", async () => { test(" Test List transaksi filter", async () => {
...@@ -178,7 +178,7 @@ test(" Test List transaksi filter", async () => { ...@@ -178,7 +178,7 @@ test(" Test List transaksi filter", async () => {
expect(data.textContent).toContain("18 April 2020 10:59"); expect(data.textContent).toContain("18 April 2020 10:59");
expect(data.textContent).toContain("Batch 2"); expect(data.textContent).toContain("Batch 2");
expect(data.textContent) expect(data.textContent)
expect(fetch.mock.calls.length).toEqual(1); expect(fetch.mock.calls.length).toEqual(2);
await act(async () => { await act(async () => {
await fireEvent.click(getByTestId("filter-button")); await fireEvent.click(getByTestId("filter-button"));
}); });
...@@ -187,11 +187,11 @@ test(" Test List transaksi filter", async () => { ...@@ -187,11 +187,11 @@ test(" Test List transaksi filter", async () => {
getByLabelText("Status transaksi", { target: { value: "002" } }) getByLabelText("Status transaksi", { target: { value: "002" } })
); );
await fireEvent.input( await fireEvent.input(
getByLabelText("Batch", {target: { value:"Batch 1"}}) getByLabelText("Batch", {target: { value:"Batch 2"}})
) )
await fireEvent.click(getByTestId("submit-filter")); await fireEvent.click(getByTestId("submit-filter"));
}); });
expect(data.textContent).toContain("filterwhtest"); expect(data.textContent).toContain("whtestest");
expect(data.textContent).toContain("Batch 1"); expect(data.textContent).toContain("Batch 2");
expect(fetch.mock.calls.length).toEqual(2); expect(fetch.mock.calls.length).toEqual(3);
}); });
...@@ -31,6 +31,7 @@ import Tooltip from "@material-ui/core/Tooltip"; ...@@ -31,6 +31,7 @@ import Tooltip from "@material-ui/core/Tooltip";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
const TableComponent = ({ const TableComponent = ({
url, url,
pageDefault, pageDefault,
...@@ -135,7 +136,6 @@ const TableComponent = ({ ...@@ -135,7 +136,6 @@ const TableComponent = ({
.filter(([, val]) => val !== "") .filter(([, val]) => val !== "")
.map(([key, val]) => `${key}=${val}`) .map(([key, val]) => `${key}=${val}`)
.join("&"); .join("&");
console.log(filter);
setFilter(filter); setFilter(filter);
})} })}
css={css` css={css`
...@@ -146,7 +146,7 @@ const TableComponent = ({ ...@@ -146,7 +146,7 @@ const TableComponent = ({
> >
{filter.map((field) => { {filter.map((field) => {
if (Array.isArray(field)) { if (Array.isArray(field)) {
if (field[2] === "date"){
return ( return (
<RowInput key={field[0]}> <RowInput key={field[0]}>
<LabelInput htmlFor={field[0]}>{field[1]}</LabelInput> <LabelInput htmlFor={field[0]}>{field[1]}</LabelInput>
...@@ -158,20 +158,6 @@ const TableComponent = ({ ...@@ -158,20 +158,6 @@ const TableComponent = ({
/> />
</RowInput> </RowInput>
); );
}else{
return (
<RowInput key={field[0]}>
<LabelInput htmlFor={field[0]}>{field[1]}</LabelInput>
<InputForm
id={field[0]}
type="text"
name={field[0]}
ref={registerFilter}
/>
</RowInput>
);
}
} else if (typeof field === "object") { } else if (typeof field === "object") {
const k = Object.keys(field); const k = Object.keys(field);
return ( return (
......
...@@ -71,7 +71,7 @@ const DetailBatch = ({ batchId }) => { ...@@ -71,7 +71,7 @@ const DetailBatch = ({ batchId }) => {
display: flex; display: flex;
align-content: space-between; align-content: space-between;
`}> `}>
<div css={css`display: flex;`}> <div css={css`font-size: 1.2rem;display: flex;`}>
<div css={css`margin-right: 1rem;`}> <div css={css`margin-right: 1rem;`}>
Nama Batch: Nama Batch:
</div> </div>
...@@ -80,19 +80,19 @@ const DetailBatch = ({ batchId }) => { ...@@ -80,19 +80,19 @@ const DetailBatch = ({ batchId }) => {
</div> </div>
<div css={css`font-size: 1.2rem;display: flex;`}> <div css={css`font-size: 1.2rem;display: flex;`}>
<div css={css`margin-right: 0.5rem;`}> <div css={css`margin-right: 0.5rem;`}>
Start date:{" "} Tanggal Mulai:{" "}
</div> </div>
<div>{stringToDateNoTime(batch.start_date)}</div> <div>{stringToDateNoTime(batch.start_date)}</div>
</div> </div>
<div css={css`font-size: 1.2rem;display: flex;`}> <div css={css`font-size: 1.2rem;display: flex;`}>
<div css={css`margin-right: 0.5rem;`}> <div css={css`margin-right: 0.5rem;`}>
End date:{" "} Tanggal Berakhir:{" "}
</div> </div>
<div>{stringToDateNoTime(batch.end_date)}</div> <div>{stringToDateNoTime(batch.end_date)}</div>
</div> </div>
<div css={css`font-size: 1.2rem;display: flex;`}> <div css={css`font-size: 1.2rem;display: flex;`}>
<div css={css`margin-right: 0.5rem;`}> <div css={css`margin-right: 0.5rem;`}>
Shipping cost:{" "} Ongkos Kirim:{" "}
</div> </div>
<div>{stringToCurrency(batch.shipping_cost)}</div> <div>{stringToCurrency(batch.shipping_cost)}</div>
</div> </div>
...@@ -105,28 +105,6 @@ const DetailBatch = ({ batchId }) => { ...@@ -105,28 +105,6 @@ const DetailBatch = ({ batchId }) => {
</div> </div>
</div> </div>
</div> </div>
{/* {editing ?
<>
<ButtonRed
data-testid="button-edit-batch-cancel"
onClick={() => handleEditStart()}
>
CANCEL
</ButtonRed>
<ButtonSubmit
data-testid="button-edit-batch-apply"
onClick={() => handleEditApply()}
>
APPLY
</ButtonSubmit>
</> :
<ButtonSubmit
data-testid="button-edit-batch-start"
onClick={() => handleEditStart()}
>
EDIT
</ButtonSubmit>
} */}
</div> </div>
) )
} }
......
...@@ -28,24 +28,46 @@ const FormBatch = ({ onSubmit, initialData = null }) => { ...@@ -28,24 +28,46 @@ const FormBatch = ({ onSubmit, initialData = null }) => {
`} `}
> >
{errors.batch_name && <ErrorDiv>Nama batch tidak boleh kosong</ErrorDiv>} {errors.batch_name && <ErrorDiv>Nama batch tidak boleh kosong</ErrorDiv>}
{errors.start_date && <ErrorDiv>Tanggal mulai tidak boleh kosong</ErrorDiv>}
{errors.end_date && <ErrorDiv>Tanggal berakhir tidak boleh kosong</ErrorDiv>}
<RowInput> <RowInput>
<LabelInput htmlFor="batch_name">Nama batch </LabelInput> <LabelInput htmlFor="batch_name">Nama batch
{initialData === null && <span css={css`color:red`}>*</span>}
</LabelInput>
<InputForm <InputForm
data-testid="name-batch-input" data-testid="name-batch-input"
name="batch_name" name="batch_name"
ref={register({ required: true })} ref={register({ required: true })}
disabled={initialData !== null}
/> />
</RowInput> </RowInput>
<RowInput> <RowInput>
<LabelInput htmlFor="start_date">Tanggal Dimulai</LabelInput> <LabelInput htmlFor="start_date">Tanggal Dimulai
<InputForm type="date" name="start_date" ref={register} readOnly={initialData !== null} /> {initialData === null && <span css={css`color:red`}>*</span>}
</LabelInput>
<InputForm
data-testid="start-date-input"
type="date"
name="start_date"
ref={register({ required: true })}
readOnly={initialData !== null}
disabled={initialData !== null}
/>
</RowInput> </RowInput>
<RowInput> <RowInput>
<LabelInput htmlFor="end_date">Tanggal Berakhir</LabelInput> <LabelInput htmlFor="end_date">Tanggal Berakhir
<InputForm type="date" name="end_date" ref={register} readOnly={initialData !== null} /> {initialData === null && <span css={css`color:red`}>*</span>}
</LabelInput>
<InputForm
data-testid="end-date-input"
type="date"
name="end_date"
ref={register({ required: true })}
readOnly={initialData !== null}
disabled={initialData !== null}
/>
</RowInput> </RowInput>
<RowInput> <RowInput>
......
...@@ -2,18 +2,19 @@ import React from "react"; ...@@ -2,18 +2,19 @@ import React from "react";
import TableComponent from "../../component/TableComponent"; import TableComponent from "../../component/TableComponent";
import { css } from "@emotion/core"; import { css } from "@emotion/core";
import LinkYellow from "../../component/LinkYellow"; import LinkYellow from "../../component/LinkYellow";
import useFetchSingleData from "../../utils/useFetchSingleData" import useFetchSingleData from "../../utils/useFetchSingleData";
import { stringToCurrency }from "../../component/TableUtils";
const ListBatch = () =>{ const ListBatch = () =>{
let totalCost = "Loading..." let totalCost = "Loading..."
const [batches, error] = useFetchSingleData(`${process.env.REACT_APP_BASE_URL}/batch/`); const [batches, error] = useFetchSingleData(`${process.env.REACT_APP_BASE_URL}/batch/`);
if (!error && batches.results !== undefined){ if (!error && batches.results !== undefined){
const shippingCosts = batches.results.map( (batch) => batch.shipping_cost); const shippingCosts = batches.results.map( (batch) => batch.shipping_cost);
if (shippingCosts){ if (shippingCosts.length){
const cost = shippingCosts.reduce( (acc, curr) => acc + curr); const cost = shippingCosts.reduce( (acc, curr) => acc + curr);
totalCost = cost; totalCost = stringToCurrency(cost.toString());
}else{ }else{
totalCost = "0"; totalCost = stringToCurrency("0");
} }
......
...@@ -7,8 +7,18 @@ import { ...@@ -7,8 +7,18 @@ import {
transactionToColoredStatus, transactionToColoredStatus,
} from "../../component/TableUtils"; } from "../../component/TableUtils";
import FormDownload from "../../component/FormDownload"; import FormDownload from "../../component/FormDownload";
import useFetchSingleData from "../../utils/useFetchSingleData";
const ListTransaksi = () => { const ListTransaksi = () => {
let batchNames = [{"Loading...": "None"}];
const [batches, error] = useFetchSingleData(`${process.env.REACT_APP_BASE_URL}/batch/`);
console.log(batches);
if (!error && batches.results!== undefined){
const batchArray = batches.results;
batchNames = batchArray.map( b =>{
return {[b.batch_name] : b.batch_name}
});
}
const data = { const data = {
url: `${process.env.REACT_APP_BASE_URL}/transactions/`, url: `${process.env.REACT_APP_BASE_URL}/transactions/`,
pageDefault: 1, pageDefault: 1,
...@@ -39,8 +49,12 @@ const ListTransaksi = () => { ...@@ -39,8 +49,12 @@ const ListTransaksi = () => {
{ "006": "Canceled" }, { "006": "Canceled" },
], ],
}, },
}, },{
["batch_name","Batch"] batch_name: {
label: "Batch",
choices: batchNames
}
}
], ],
}; };
return ( return (
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment