Fakultas Ilmu Komputer UI

Commit f5e4178a authored by Fadhil Pradipta Widyanto's avatar Fadhil Pradipta Widyanto
Browse files

Coldfix

parent ddb6033e
...@@ -270,9 +270,7 @@ const DetailProduk = ({ productId }) => { ...@@ -270,9 +270,7 @@ const DetailProduk = ({ productId }) => {
<LocalShippingIcon style={{ color: "#FFC80A" }} /> <LocalShippingIcon style={{ color: "#FFC80A" }} />
</span> </span>
{product.preorder ? "Preorder" : (product.stock)} {product.preorder ? "Preorder" : (product.stock)}
</span> </span>
{" "}{product.preorder ? ("") : product.unit}
</p> </p>
{product.preorder && ( {product.preorder && (
<p> <p>
......
...@@ -11,26 +11,27 @@ import { ...@@ -11,26 +11,27 @@ import {
InputTextArea, InputTextArea,
} from "../../component/html/html"; } from "../../component/html/html";
import { css } from "@emotion/core"; import { css } from "@emotion/core";
import MaskedInput from 'react-text-mask' import MaskedInput from "react-text-mask";
import createNumberMask from 'text-mask-addons/dist/createNumberMask' import createNumberMask from "text-mask-addons/dist/createNumberMask";
const FormProduk = ({ onSubmit, initialData = null, error }) => { const FormProduk = ({ onSubmit, initialData = null, error }) => {
const defaultMaskOptions = { //mask for currency form const defaultMaskOptions = {
prefix: 'Rp ', //mask for currency form
suffix: '', prefix: "Rp ",
suffix: "",
includeThousandsSeparator: true, includeThousandsSeparator: true,
thousandsSeparatorSymbol: '.', thousandsSeparatorSymbol: ".",
allowDecimal: true, allowDecimal: true,
decimalSymbol: ',', decimalSymbol: ",",
decimalLimit: 2, decimalLimit: 2,
allowNegative: false, allowNegative: false,
allowLeadingZeroes: false, allowLeadingZeroes: false,
} };
const currencyMask = createNumberMask({ const currencyMask = createNumberMask({
...defaultMaskOptions, ...defaultMaskOptions,
}) });
const [isPreorder, setIsPreorder] = useState(""); const [isPreorder, setIsPreorder] = useState("");
const[isHampers, setIsHampers] = useState(false); const [isHampers, setIsHampers] = useState(false);
const { register, handleSubmit, errors, watch } = useForm({ const { register, handleSubmit, errors, watch } = useForm({
defaultValues: defaultValues:
initialData !== null initialData !== null
...@@ -68,65 +69,71 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => { ...@@ -68,65 +69,71 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => {
`category=${watchCategory}`, `category=${watchCategory}`,
null, null,
]); ]);
const onChangeModal = (event) => { const onChangeModal = (event) => {
setValueModal(event.target.value) setValueModal(event.target.value);
if (event.target.value === ''){ if (event.target.value === "") {
setErrorModal(1) setErrorModal(1);
} else {
setErrorModal(0);
} }
else{ };
setErrorModal(0) const onChangeHarga = (event) => {
setValueHarga(event.target.value);
if (event.target.value === "") {
setErrorHarga(1);
} else {
setErrorHarga(0);
} }
} };
const onChangeHarga = (event) =>{ function formatValue(val) {
setValueHarga(event.target.value) //change currency value to decimal
if (event.target.value === ''){ var raw = val.split(" ");
setErrorHarga(1) var rawnum = [];
} if (String(raw[1]).length > 3) {
else{ rawnum = String(raw[1]).split(".");
setErrorHarga(0) return rawnum.join("");
} else {
return raw[1];
} }
} }
function formatValue(val){ //change currency value to decimal const [valueModal, setValueModal] = useState("");
var raw = val.split(" ")
var rawnum = []
if (String(raw[1]).length > 3){
rawnum = String(raw[1]).split(".")
return rawnum.join('')
}
else{
return raw[1]
}
}
const [valueModal, setValueModal] = useState('');
const [errorModal, setErrorModal] = useState(0); const [errorModal, setErrorModal] = useState(0);
const [valueHarga, setValueHarga] = useState(''); const [valueHarga, setValueHarga] = useState("");
const [errorHarga, setErrorHarga] = useState(0); const [errorHarga, setErrorHarga] = useState(0);
const filterSubmit = useCallback((data) => { const filterSubmit = useCallback(
//error handling for Price and modal (data) => {
if (valueHarga === ''){ //error handling for Price and modal
setErrorHarga(1) if (valueHarga === "") {
setErrorHarga(1);
} }
if (valueModal === ''){ if (valueModal === "") {
setErrorModal(1) setErrorModal(1);
} }
const formData = new FormData(); const formData = new FormData();
const formKey = ["image"]; const formKey = ["image"];
const formCurrency = ["modal", "price"] const formCurrency = ["modal", "price"];
// Loop through every field in form and append to FormData // Loop through every field in form and append to FormData
for (const key in data) { for (const key in data) {
if (formKey.includes(key)) { if (formKey.includes(key)) {
if (data.image.length !== 0) formData.append("image", data["image"][0]); if (data.image.length !== 0)
formData.append("image", data["image"][0]);
} else if (formCurrency.includes(key))
formData.append(key, formatValue(data[key]));
else formData.append(key, data[key]);
isPreorder === "true"
? formData.set("stock", "")
: formData.set("preorder_duration", "");
isHampers === "false"
? formData.set("hampers_price", "")
: formData.set("hampers_price", data["hampers_price"]);
} }
else if (formCurrency.includes(key)) formData.append(key, formatValue(data[key])) onSubmit(formData);
else formData.append(key, data[key]); },
isPreorder === "true" ? formData.set("stock" , "") : formData.set("preorder_duration", "") [isPreorder]
isHampers === "false" ? formData.set("hampers_price", "") : formData.set("hampers_price", data["hampers_price"]) );
}
onSubmit(formData);
}, [isPreorder]);
return ( return (
<form <form
...@@ -175,6 +182,31 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => { ...@@ -175,6 +182,31 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => {
{/* NAME SECTION END */} {/* NAME SECTION END */}
{/* MODAL SECTION START */}
<RowInput>
<LabelInput htmlFor="modal">Modal/Satuan </LabelInput>
<MaskedInput
data-testid="modal-produk-input"
type="text"
name="modal"
ref={register({ required: true })}
onChange={onChangeModal}
mask={currencyMask}
css={css`
flex-grow: 4;
border: 1px solid #e0e1e2;
box-sizing: border-box;
border-radius: 4px;
font-size: 1rem;
padding-left: 1rem;
`}
/>
{errorModal === 1 && <ErrorDiv>Modal tidak boleh kosong</ErrorDiv>}
</RowInput>
{/* MODAL SECTION END */}
{/* CATEGORY SECTION START */} {/* CATEGORY SECTION START */}
{results === undefined || Object.keys(results).length === 0 ? null : ( {results === undefined || Object.keys(results).length === 0 ? null : (
...@@ -271,60 +303,45 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => { ...@@ -271,60 +303,45 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => {
{/* DESCRIPTION SECTION END */} {/* DESCRIPTION SECTION END */}
{/* MODAL SECTION START */}
<RowInput>
<LabelInput htmlFor="modal">Modal/Satuan </LabelInput>
<MaskedInput
data-testid="modal-produk-input"
type="text"
name="modal"
ref={register({ required: true })}
onChange={onChangeModal}
mask={currencyMask}
css={css`
flex-grow: 4;
border: 1px solid #e0e1e2;
box-sizing: border-box;
border-radius: 4px;
font-size: 1rem;
padding-left: 1rem;
`}
/>
{errorModal === 1 && <ErrorDiv>Modal tidak boleh kosong</ErrorDiv>}
</RowInput>
{/* MODAL SECTION END */}
{/* HARGA SECTION START */} {/* HARGA SECTION START */}
<RowInput> <RowInput>
<LabelInput htmlFor="harga">Harga/kuantitas </LabelInput> <LabelInput htmlFor="harga">Harga/kuantitas </LabelInput>
<MaskedInput <MaskedInput
data-testid="price-produk-input" data-testid="price-produk-input"
type="text" type="text"
name="price" name="price"
ref={register({ required: true })} ref={register({ required: true })}
onChange={onChangeHarga} onChange={onChangeHarga}
mask={currencyMask} mask={currencyMask}
css={css` css={css`
flex-grow: 4; flex-grow: 4;
border: 1px solid #e0e1e2; border: 1px solid #e0e1e2;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
font-size: 1rem; font-size: 1rem;
padding-left: 1rem; padding-left: 1rem;
`} `}
/> />
{errorHarga === 1 && <ErrorDiv>Harga Produk tidak boleh kosong</ErrorDiv>} {errorHarga === 1 && (
<ErrorDiv>Harga Produk tidak boleh kosong</ErrorDiv>
)}
</RowInput> </RowInput>
{/* HARGA SECTION END */} {/* HARGA SECTION END */}
{/* HAMPERS TYPE SECTION START*/} {/* HAMPERS TYPE SECTION START*/}
<RowInput> <RowInput>
<LabelInput htmlFor="is_hampers">Tipe (Hampers) <LabelInput htmlFor="is_hampers">
<span css={css`color:red`}>*</span></LabelInput> Tipe (Hampers)
<span
css={css`
color: red;
`}
>
*
</span>
</LabelInput>
<div <div
css={css` css={css`
display: flex; display: flex;
...@@ -339,7 +356,7 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => { ...@@ -339,7 +356,7 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => {
name="is_hampers" name="is_hampers"
value="false" value="false"
id="false_hampers" id="false_hampers"
onClick = {() => setIsHampers(false)} onClick={() => setIsHampers(false)}
ref={register({ required: true })} ref={register({ required: true })}
/> />
<label htmlFor="false_hampers">Non-Hampers</label> <label htmlFor="false_hampers">Non-Hampers</label>
...@@ -358,12 +375,14 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => { ...@@ -358,12 +375,14 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => {
name="is_hampers" name="is_hampers"
value="true" value="true"
id="true_hampers" id="true_hampers"
onClick = {() => setIsHampers(true)} onClick={() => setIsHampers(true)}
ref={register({ required: true })} ref={register({ required: true })}
/> />
<label htmlFor="true_hampers">Hampers</label> <label htmlFor="true_hampers">Hampers</label>
</div> </div>
{errors.is_hampers && <ErrorDiv>Tipe hampers tidak boleh kosong.</ErrorDiv>} {errors.is_hampers && (
<ErrorDiv>Tipe hampers tidak boleh kosong.</ErrorDiv>
)}
</RowInput> </RowInput>
{/* HAMPERS TYPE SECTION END*/} {/* HAMPERS TYPE SECTION END*/}
...@@ -375,7 +394,7 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => { ...@@ -375,7 +394,7 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => {
type="number" type="number"
name="hampers_price" name="hampers_price"
defaultValue="0" defaultValue="0"
disabled = {!isHampers} disabled={!isHampers}
ref={register} ref={register}
/> />
</RowInput> </RowInput>
......
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