Skip to content

Commit e6d1d9f

Browse files
DarkLocutsDarkLocuts
committed
fix: input & form
1 parent f119d0e commit e6d1d9f

24 files changed

+1757
-1236
lines changed

‎components/base_component/crud/FormPlusComponent.jsx

Lines changed: 108 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ export default function FormPlusComponent({
2020
confirmation,
2121
defaultValue,
2222
onSuccess,
23-
method
23+
method,
24+
customAction,
25+
includePayload,
2426
}) {
2527
const [submitLoading, setSubmitLoading] = useState(false);
2628
const [modalConfirm, setModalConfirm] = useState(false);
@@ -152,8 +154,12 @@ export default function FormPlusComponent({
152154
setSubmitLoading(true)
153155

154156
let formData = new FormData(e.target);
155-
let response = method == "put" ? await put(submitUrl, formData) : await post(submitUrl, formData);
156157

158+
includePayload && Object.keys(includePayload).map((key) => {
159+
formData.append(key, includePayload[key])
160+
})
161+
162+
let response = method == "put" ? await put(submitUrl, formData) : await post(submitUrl, formData);
157163

158164
if (response?.status == 200 || response?.status == 201) {
159165
setFormValues([])
@@ -206,7 +212,21 @@ export default function FormPlusComponent({
206212
{title && <h4 className='text-xl text-gray-600 font-semibold mb-6'>{title}</h4>}
207213
<div className='grid grid-cols-12 gap-8'>
208214
{forms.map((form, key) => {
209-
if (form?.type == "select") {
215+
if (form?.type == "custom") {
216+
return (
217+
<div
218+
style={{
219+
gridColumn: `span ${form?.col ? form.col : "12"} / span ${form?.col ? form.col : "12"}`
220+
}}
221+
>
222+
{form.custom({
223+
formValues: FormValues,
224+
formErrors: FormErrors,
225+
setFormValues: (e) => setFormValues(e),
226+
})}
227+
</div>
228+
)
229+
} else if (form?.type == "select") {
210230
return (
211231
<div
212232
style={{
@@ -320,6 +340,76 @@ export default function FormPlusComponent({
320340
/>
321341
</div>
322342
)
343+
} else if (form?.type == "otp") {
344+
return (
345+
<div
346+
style={{
347+
gridColumn: `span ${form?.col ? form.col : "12"} / span ${form?.col ? form.col : "12"}`
348+
}}
349+
>
350+
<label className='text-lg font-medium'>{form.label}</label>
351+
<InputOtpComponent
352+
name={form.name}
353+
max={form.max}
354+
error={FormErrors.filter((error) => error.name == form.name)?.at(0)?.msg}
355+
onChange={(e) => setFormValues([...FormValues.filter((value) => value.name != form.name), { name: form.name, value: e }])}
356+
setInputValue={FormValues.filter((value) => value.name == form.name)?.at(0) ? FormValues.filter((value) => value.name == form.name)?.at(0).value : ""}
357+
/>
358+
</div>
359+
)
360+
} else if (form?.type == "map") {
361+
return (
362+
<div
363+
style={{
364+
gridColumn: `span ${form?.col ? form.col : "12"} / span ${form?.col ? form.col : "12"}`,
365+
gridRow: `span ${form?.row ? form.row : "1"} / span ${form?.row ? form.row : "1"}`
366+
}}
367+
>
368+
<InputMapComponent
369+
name={form.name}
370+
label={form.label}
371+
error={FormErrors.filter((error) => error.name == form.name)?.at(0)?.msg}
372+
onChange={(e) => setFormValues([...FormValues.filter((value) => value.name != form.name), { name: form.name, value: e }])}
373+
setInputValue={FormValues.filter((value) => value.name == form.name)?.at(0) ? FormValues.filter((value) => value.name == form.name)?.at(0).value : ""}
374+
/>
375+
</div>
376+
)
377+
} else if (form?.type == "time") {
378+
return (
379+
<div
380+
style={{
381+
gridColumn: `span ${form?.col ? form.col : "12"} / span ${form?.col ? form.col : "12"}`,
382+
gridRow: `span ${form?.row ? form.row : "1"} / span ${form?.row ? form.row : "1"}`
383+
}}
384+
>
385+
<InputTimeComponent
386+
name={form.name}
387+
label={form.label}
388+
error={FormErrors.filter((error) => error.name == form.name)?.at(0)?.msg}
389+
onChange={(e) => setFormValues([...FormValues.filter((value) => value.name != form.name), { name: form.name, value: e }])}
390+
setInputValue={FormValues.filter((value) => value.name == form.name)?.at(0) ? FormValues.filter((value) => value.name == form.name)?.at(0).value : ""}
391+
/>
392+
</div>
393+
)
394+
} else if (form?.type == "count") {
395+
return (
396+
<div
397+
style={{
398+
gridColumn: `span ${form?.col ? form.col : "12"} / span ${form?.col ? form.col : "12"}`,
399+
gridRow: `span ${form?.row ? form.row : "1"} / span ${form?.row ? form.row : "1"}`
400+
}}
401+
>
402+
<InputCountComponent
403+
name={form.name}
404+
label={form.label}
405+
placeholder={form.placeholder}
406+
error={FormErrors.filter((error) => error.name == form.name)?.at(0)?.msg}
407+
onChange={(e) => setFormValues([...FormValues.filter((value) => value.name != form.name), { name: form.name, value: e }])}
408+
setInputValue={FormValues.filter((value) => value.name == form.name)?.at(0) ? FormValues.filter((value) => value.name == form.name)?.at(0).value : ""}
409+
disabled={form.disabled}
410+
/>
411+
</div>
412+
)
323413
} else {
324414
return (
325415
<>
@@ -343,6 +433,9 @@ export default function FormPlusComponent({
343433
}
344434
}}
345435
setInputValue={FormValues.filter((value) => value.name == form.name)?.at(0) ? FormValues.filter((value) => value.name == form.name)?.at(0).value : ""}
436+
onlyAlphabet={form.onlyAlphabet}
437+
autoUppercase={form.autoUppercase}
438+
maxWord={form.maxWord}
346439
/>
347440
</div>
348441

@@ -374,15 +467,18 @@ export default function FormPlusComponent({
374467
}
375468
})}
376469
</div>
377-
<div className='flex justify-end mt-12'>
378-
<ButtonComponent
379-
type={"submit"}
380-
label="Submit"
381-
icon={faArrowRightToBracket}
382-
bg="primary"
383-
loading={submitLoading}
384-
/>
385-
</div>
470+
{customAction ? customAction : (
471+
<div className='flex justify-end mt-12'>
472+
<ButtonComponent
473+
type={"submit"}
474+
label="Kirimkan"
475+
icon={faArrowRightToBracket}
476+
bg="primary"
477+
color={"secondary"}
478+
loading={submitLoading}
479+
/>
480+
</div>
481+
)}
386482
</form>
387483

388484

‎components/base_component/input/CheckBoxComponent.jsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,28 @@ export default function CheckBoxComponent({
1010
color,
1111
onChange,
1212
checked,
13-
textSize
13+
textSize,
14+
value
1415
}) {
1516
return (
16-
<div className='flex items-center gap-3 2xl:gap-6 relative'>
17+
<div className='flex items-center gap-4 2xl:gap-6 relative'>
1718
<label
1819
className={`${className} cover__checkbox__control checkbox__${color ? color : "primary"
1920
} text-sm`}>
2021
<input
2122
type='checkbox'
2223
className='opacity-0'
2324
id={name}
25+
name={name}
2426
onChange={onChange}
2527
checked={checked}
28+
value={value}
2629
/>
2730
<span className='checkbox__control'></span>
2831
</label>
2932
<label
3033
htmlFor={name}
31-
className={`text-${textSize ? textSize : "lg"} cursor-pointer ${checked ? "text-gray-700 font-bold" : "text-gray-500 font-medium"
34+
className={`text-${textSize ? textSize : "base"} cursor-pointer ${checked ? "text-gray-500 font-bold" : "text-gray-400 font-medium"
3235
}`}>
3336
{label}
3437
</label>

‎components/base_component/input/InputCheckboxGroupComponent.jsx

Lines changed: 49 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,78 @@
1-
import React, {
2-
useEffect,
3-
useState,
4-
} from 'react';
5-
1+
import React, { useEffect, useState } from 'react'
62
import CheckBoxComponent from './CheckBoxComponent';
3+
import RadioComponent from './RadioComponent';
74

8-
export default function InputCheckboxGroupComponent({
5+
export default function InputRadioGroupComponent({
6+
name,
7+
disabled,
8+
validate,
9+
error,
10+
setInputValue,
911
label,
12+
className,
1013
options,
1114
col,
12-
setInputValue,
13-
onChange,
14-
name,
15-
className,
16-
disabled,
15+
onValidate,
16+
onChange
1717
}) {
18-
const [values, setValues] = useState([]);
18+
const [value, setValue] = useState("");
19+
const [invalid, setInvalid] = useState("");
1920

2021
useEffect(() => {
21-
setValues(setInputValue ? setInputValue : []);
22+
setInvalid(error);
23+
}, [error]);
24+
25+
useEffect(() => {
26+
setValue(setInputValue);
2227
}, [setInputValue]);
2328

2429
return (
25-
<div
26-
className={`
27-
w-full relative bg-white py-2 px-3 border-b-[3px] border-gray-300 rounded-xl
28-
${disabled ? "opacity-60" : ""}
29-
${className}
30-
`}
31-
>
30+
<div>
3231
<label
3332
htmlFor={name}
34-
className={`
35-
z-10 text-base text-gray-400
36-
`}
33+
className="font-medium"
3734
>
3835
{label}
3936
</label>
37+
<div
38+
className={`
39+
w-full relative bg__background mt-1 py-3 2xl:py-4 px-5 border-[1px] border-gray-300 rounded-xl
40+
${disabled ? "opacity-60" : ""}
41+
${className}`}
42+
>
43+
4044

41-
<div className='max-h-[180px] scroll_control overflow-y-auto pt-1'>
42-
<div className={`flex gap-4`}>
43-
{options &&
44-
options.map((data, key) => {
45+
<div className='max-h-[180px] scroll_control overflow-y-auto'>
46+
<div
47+
className={`flex gap-4`}>
48+
{options && options.map((option, key) => {
4549
return (
4650
<CheckBoxComponent
4751
key={key}
48-
defaultChecked={values ? values.filter((val, _) => val == data.value)[0] : ""}
49-
name={data.value}
50-
label={data.label}
52+
label={option.label}
53+
value={option.value}
54+
id={name + "_" + key}
55+
name={name}
56+
checked={value == option.value}
5157
onChange={(e) => {
52-
if (values.filter((val, _) => val == data.value)[0]) {
53-
setValues([
54-
...values.filter((val, _) => val != data.value),
55-
]);
56-
57-
if (onChange) {
58-
onChange([
59-
...values.filter((val, _) => val != data.value),
60-
]);
61-
}
62-
63-
} else {
64-
setValues([
65-
...values.filter((val, _) => val != data.value),
66-
data.value,
67-
]);
68-
69-
if (onChange) {
70-
onChange([
71-
...values.filter((val, _) => val != data.value),
72-
data.value,
73-
]);
74-
}
58+
setValue(option.value)
59+
setInvalid(false)
60+
if (onChange) {
61+
onChange(option.value)
7562
}
7663
}}
7764
/>
78-
);
65+
)
7966
})}
67+
</div>
8068
</div>
69+
70+
{invalid && (
71+
<small className='block px-2 pl-5 -bottom-6 text-sm text-left text__danger absolute'>
72+
{invalid}
73+
</small>
74+
)}
8175
</div>
8276
</div>
83-
);
77+
)
8478
}

0 commit comments

Comments
 (0)