Fakultas Ilmu Komputer UI

Commit 930e8d38 authored by Fadhil Pradipta Widyanto's avatar Fadhil Pradipta Widyanto
Browse files

Merge branch 'coldfix' into 'dev'

Coldfix

See merge request !38
parents ddb6033e f5e4178a
Pipeline #82041 passed with stages
in 3 minutes and 34 seconds
...@@ -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