Fakultas Ilmu Komputer UI

Commit 0182613a authored by Jeffrey's avatar Jeffrey
Browse files

Revisit pbi 5 kelola program

parent 50e172cd
......@@ -19,8 +19,12 @@ test("Test edit program renders", async () => {
end_date_time: null,
location: "Depok",
speaker: "Eddrick",
open_donation: true,
program_minutes: null,
poster_image:
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/1_txtcYocQEGtOFN33ZCTDbw.png",
link: null,
total_donation_amount: "2263691.00",
})
);
......@@ -56,8 +60,12 @@ test("Test edit program renders error", async () => {
end_date_time: null,
location: "Depok",
speaker: "Eddrick",
open_donation: true,
program_minutes: null,
poster_image:
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/1_txtcYocQEGtOFN33ZCTDbw.png",
link: null,
total_donation_amount: "2263691.00",
})
)
.once(JSON.stringify({}), { status: 400 });
......
......@@ -16,29 +16,22 @@ test("Test tambah program renders", async () => {
previous: null,
results: [
{
id: "6d7462da-6a85-4e2b-9930-69567090a5d5",
code: "3MXZ9T",
name: "dummy 2",
description: "yeyyy",
id: "e7b3f296-a4f8-49af-9c56-b2a8b0cfb589",
code: "4JQHZ7",
name: "a",
description: "cobaa",
start_date_time: null,
end_date_time: null,
location: "Depok",
speaker: "Eddrick",
location: "Online",
speaker: "Semua",
open_donation: true,
program_minutes:
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/program/43mSCZrQ4XwMFEzXuRWuAz_Contoh_Solusi_PR-3.pdf",
poster_image:
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/1_txtcYocQEGtOFN33ZCTDbw.png",
},
{
id: "282007ff-d0be-4d68-823e-03bde086ee79",
code: "89Z6GX",
name: "Sample",
description: "Sample",
start_date_time: null,
end_date_time: null,
location: "Sample",
speaker: "Sample",
poster_image:
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/output_0.jpg",
},
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/program/2weBUzYAt2FYsHXfyidZUb_IMG_20170705_102424.jpg",
link: null,
total_donation_amount: "0",
}
],
})
);
......@@ -68,6 +61,11 @@ test("Test tambah program renders", async () => {
target: { value: "2020-05-15T19:30" },
});
});
await act(async () => {
await fireEvent.click(getByTestId("is-open-program-input"), {
target: { value: "true" },
});
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-program"));
});
......
......@@ -121,7 +121,13 @@ const FormProduk = ({ onSubmit, initialData = null }) => {
</InputSelectForm>
</RowInput>
)}
<RowInput>
<RowInput
css={css`
resize: vertical;
overflow: auto;
min-height: 30px;
`}
>
<LabelInput htmlFor="deskripsi">Deskripsi Produk </LabelInput>
<InputTextArea
data-testid="desc-produk-input"
......
......@@ -6,6 +6,8 @@ import { Link } from "@reach/router";
import PersonIcon from "@material-ui/icons/Person";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import EventIcon from "@material-ui/icons/Event";
import MoneyIcon from "@material-ui/icons/Money";
import LanguageIcon from "@material-ui/icons/Language";
import useFetchSingleData from "../../utils/useFetchSingleData";
import LinkYellow from "../../component/LinkYellow";
import useDelete from "../../utils/useDelete";
......@@ -113,6 +115,35 @@ const DetailProgram = ({ idProgram }) => {
className="img-fluid"
src={program.poster_image}
/>
{program.program_minutes !== null && (
<a
css={css`
border: 3px solid #3c8dbc;
margin-top: 5%;
color: #3c8dbc;
display: flex;
width: 100%;
text-align: center;
justify-content: center;
align-items: center;
height: 2rem;
box-sizing: border-box;
border-radius: 50px;
text-decoration: none;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 17px;
letter-spacing: 0.2em;
`}
href={`${program.program_minutes}`}
rel="noopener noreferrer"
target="_blank"
>
LIHAT NOTULENSI
</a>
)}
</div>
<div className="col-sm-8">
<div
......@@ -190,6 +221,57 @@ const DetailProgram = ({ idProgram }) => {
{program.speaker}
</div>
</div>
<div
css={css`
margin-top: 1rem;
`}
>
<MoneyIcon style={{ fontSize: 20, color: "FFC80A" }} />
<div
css={css`
display: inline;
margin-left: 2rem;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 22px;
`}
>
{program.open_donation
? "Donasi dibuka"
: "Donasi ditutup"}{" - Rp"}
{program.total_donation_amount}
</div>
</div>
<div
css={css`
margin-top: 1rem;
`}
>
<LanguageIcon style={{ fontSize: 20, color: "FFC80A" }} />
<div
css={css`
display: inline;
margin-left: 2rem;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 22px;
`}
>
{program.link == null ? (
"Tidak ada tautan"
) : (
<a
href={`${program.link}`}
rel="noopener noreferrer"
target="_blank"
>
{program.link}
</a>
)}
</div>
</div>
<div
css={css`
margin-top: 2rem;
......
......@@ -13,16 +13,7 @@ const EditProgram = ({ idProgram }) => {
const [initialData, errorState] = useFetchSingleData(url);
const [send, error] = useSendData({ url, method: "PATCH", redirect: -1 });
const onSubmit = (data) => {
const formData = new FormData();
formData.append("name", data["name"]);
formData.append("description", data["description"]);
formData.append("start_date_time", data["start_date_time"]);
formData.append("end_date_time", data["end_date_time"]);
formData.append("location", data["location"]);
formData.append("speaker", data["speaker"]);
if (data["poster_image"].length !== 0)
formData.append("poster_image", data["poster_image"][0]);
send(formData);
send(data);
};
if (errorState || Object.keys(initialData).length === 0)
return (
......
......@@ -5,6 +5,7 @@ import {
RowInput,
InputForm,
LabelInput,
InputTextArea,
InputSubmitForm,
} from "../../component/html/html";
import { css } from "@emotion/core";
......@@ -16,17 +17,40 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
? {
name: initialData["name"],
description: initialData["description"],
link: initialData["link"],
start_date_time: initialData["start_date_time"],
end_date_time: initialData["end_date_time"],
location: initialData["location"],
speaker: initialData["speaker"],
open_donation: initialData["open_donation"].toString(),
}
: {},
});
const filterSubmit = (data) => {
const formData = new FormData();
if (data.open_donation === "false") {
formData.append("open_donation", false);
} else {
formData.append("open_donation", true);
}
formData.append("name", data["name"]);
formData.append("description", data["description"]);
formData.append("link", data["link"]);
formData.append("start_date_time", data["start_date_time"]);
formData.append("end_date_time", data["end_date_time"]);
formData.append("location", data["location"]);
formData.append("speaker", data["speaker"]);
if (data["program_minutes"].length !== 0)
formData.append("program_minutes", data["program_minutes"][0]);
if (data["poster_image"].length !== 0)
formData.append("poster_image", data["poster_image"][0]);
onSubmit(formData);
};
return (
<form
data-testid="form-program"
onSubmit={handleSubmit(onSubmit)}
onSubmit={handleSubmit(filterSubmit)}
css={css`
display: flex;
flex-direction: column;
......@@ -41,15 +65,30 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
/>
{errors.name && <ErrorDiv>Nama program tidak boleh kosong</ErrorDiv>}
</RowInput>
<RowInput>
<RowInput
css={css`
resize: vertical;
overflow: auto;
min-height: 30px;
`}
>
<LabelInput htmlFor="description">Deskripsi </LabelInput>
<InputForm
<InputTextArea
data-testid="description-program-input"
name="description"
ref={register({ required: true })}
/>
{errors.description}
</RowInput>
<RowInput>
<LabelInput htmlFor="link">Link</LabelInput>
<InputForm
data-testid="link-program-input"
name="link"
ref={register({ required: false })}
/>
{<ErrorDiv>Link harus ada http://</ErrorDiv>}
</RowInput>
<RowInput>
<LabelInput htmlFor="start_date_time">
Tanggal dan waktu mulai{" "}
......@@ -92,6 +131,55 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
/>
{errors.name}
</RowInput>
<RowInput>
<LabelInput htmlFor="open_donation">Donasi</LabelInput>
<div
css={css`
display: flex;
flex-grow: 4;
align-items: baseline;
align-content: flex-start;
`}
>
<input
data-testid="is-open-program-input"
type="radio"
name="open_donation"
value="true"
id="open"
ref={register({ required: true })}
/>
<label htmlFor="open">Buka</label>
</div>
<div
css={css`
display: flex;
flex-grow: 4;
align-items: baseline;
align-content: flex-start;
`}
>
<input
data-testid="is-open-program-input-2"
type="radio"
name="open_donation"
value="false"
id="close"
ref={register({ required: true })}
/>
<label htmlFor="close">Tutup</label>
</div>
{errors.open_donation && <ErrorDiv>Donasi tidak boleh kosong</ErrorDiv>}
</RowInput>
<RowInput>
<LabelInput htmlFor="program_minute">Notulensi Program </LabelInput>
<InputForm
type="file"
name="program_minutes"
data-testid="notul-program"
ref={register}
/>
</RowInput>
{initialData !== null && initialData["poster_image"] != null ? (
<img
css={css`
......
......@@ -13,16 +13,7 @@ const TambahProgram = () => {
redirect: "/program",
});
const onSubmit = (data) => {
const formData = new FormData();
formData.append("name", data["name"]);
formData.append("description", data["description"]);
formData.append("start_date_time", data["start_date_time"]);
formData.append("end_date_time", data["end_date_time"]);
formData.append("location", data["location"]);
formData.append("speaker", data["speaker"]);
if (data["poster_image"].length !== 0)
formData.append("poster_image", data["poster_image"][0]);
send(formData);
send(data);
};
return (
<div
......
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