Fakultas Ilmu Komputer UI

Skip to content

GitLab

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

Coldfix

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

Excellence In Teamwork