feat: display error message

main 1.0.0-alpha.5
Firman Ramdhani 2025-07-09 10:50:52 +07:00
parent 638126e06f
commit d330907e01
1 changed files with 54 additions and 16 deletions

View File

@ -10,8 +10,10 @@ export default function DefaultValue() {
const [loadingActive, setLoadingActive] = useState(false); const [loadingActive, setLoadingActive] = useState(false);
const [loadingSave, setLoadingSave] = useState(false); const [loadingSave, setLoadingSave] = useState(false);
const [defaultPercentage, setDefaultPercentage] = useState<number>(100); const [defaultPercentage, setDefaultPercentage] = useState<number>();
const [currentPercentage, setCurrentPercentage] = useState<number>(100); const [currentPercentage, setCurrentPercentage] = useState<number>();
const [errorDefaultPercentage, setErrorDefaultPercentage] = useState<string>();
const [errorCurrentPercentage, setErrorCurrentPercentage] = useState<string>();
const [form] = Form.useForm(); const [form] = Form.useForm();
const [openModal, setOpenModal] = useState(false); const [openModal, setOpenModal] = useState(false);
@ -58,9 +60,12 @@ export default function DefaultValue() {
const value = resp.data?.data?.value; const value = resp.data?.data?.value;
form.setFieldsValue({ value: value }); form.setFieldsValue({ value: value });
setCurrentPercentage(value); setCurrentPercentage(value);
setErrorCurrentPercentage(null as any);
}) })
.catch((err) => { .catch((err) => {
const message = err.message; const message = err.message;
setCurrentPercentage(null as any);
setErrorCurrentPercentage(message);
if (message) notificationError(message); if (message) notificationError(message);
}) })
.finally(() => { .finally(() => {
@ -76,9 +81,12 @@ export default function DefaultValue() {
const value = resp.data?.data?.default_value; const value = resp.data?.data?.default_value;
form.setFieldsValue({ default_value: value }); form.setFieldsValue({ default_value: value });
setDefaultPercentage(value); setDefaultPercentage(value);
setErrorDefaultPercentage(null as any);
}) })
.catch((err) => { .catch((err) => {
const message = err.message; const message = err.message;
setDefaultPercentage(null as any);
setErrorDefaultPercentage(message);
if (message) notificationError(message); if (message) notificationError(message);
}) })
.finally(() => { .finally(() => {
@ -138,13 +146,28 @@ export default function DefaultValue() {
<Flex vertical gap={8} justify="space-between"> <Flex vertical gap={8} justify="space-between">
<div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>DEFAULT PERCENTAGE</div> <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>DEFAULT PERCENTAGE</div>
<Flex gap={12}> <Flex gap={12}>
<div {defaultPercentage ? (
style={{ fontSize: 24, fontWeight: 600 }} <>
className={`${makeColorTextValue(defaultPercentage)}`} <div
>{`${defaultPercentage >= 0 ? `${defaultPercentage} %` : '-'}`}</div> style={{ fontSize: 24, fontWeight: 600 }}
<Button type="link" onClick={onOpenModal}> className={`${makeColorTextValue(defaultPercentage)}`}
Edit >{`${defaultPercentage >= 0 ? `${defaultPercentage} %` : '-'}`}</div>
</Button> <Button type="link" onClick={onOpenModal}>
Edit
</Button>
</>
) : (
<div>
{errorDefaultPercentage ? (
<div className="text-red-500 bg-red-100 p-3" style={{ borderRadius: 6 }}>
<div className="italic font-semibold">{`Error:`}</div>
<div className="italic">{errorDefaultPercentage}</div>
</div>
) : (
<div>{`-`}</div>
)}
</div>
)}
</Flex> </Flex>
<div style={{ fontSize: 11, fontWeight: 400, color: 'rgba(0,0,0,0.4)', fontStyle: 'italic' }}> <div style={{ fontSize: 11, fontWeight: 400, color: 'rgba(0,0,0,0.4)', fontStyle: 'italic' }}>
{`Value otomatis jika tak ada setelan khusus.`} {`Value otomatis jika tak ada setelan khusus.`}
@ -157,13 +180,28 @@ export default function DefaultValue() {
<Flex vertical gap={8} justify="space-between"> <Flex vertical gap={8} justify="space-between">
<div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>CURRENT PERCENTAGE</div> <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>CURRENT PERCENTAGE</div>
<Flex gap={12}> <Flex gap={12}>
<div {currentPercentage ? (
style={{ fontSize: 24, fontWeight: 600 }} <>
className={`${makeColorTextValue(currentPercentage)}`} <div
>{`${currentPercentage >= 0 ? `${currentPercentage} %` : '-'}`}</div> style={{ fontSize: 24, fontWeight: 600 }}
<Button type="link" onClick={handleGetDataActive}> className={`${makeColorTextValue(currentPercentage)}`}
Reload >{`${currentPercentage >= 0 ? `${currentPercentage} %` : '-'}`}</div>
</Button> <Button type="link" onClick={handleGetDataActive}>
Reload
</Button>
</>
) : (
<div>
{errorCurrentPercentage ? (
<div className="text-red-500 bg-red-100 p-3" style={{ borderRadius: 6 }}>
<div className="italic font-semibold">{`Error:`}</div>
<div className="italic">{errorCurrentPercentage}</div>
</div>
) : (
<div>{`-`}</div>
)}
</div>
)}
</Flex> </Flex>
<div style={{ fontSize: 11, fontWeight: 400, color: 'rgba(0,0,0,0.4)', fontStyle: 'italic' }}> <div style={{ fontSize: 11, fontWeight: 400, color: 'rgba(0,0,0,0.4)', fontStyle: 'italic' }}>
{`Value yang di terapkan hari ini ${dayjs().format('DD-MM-YYYY')}.`} {`Value yang di terapkan hari ini ${dayjs().format('DD-MM-YYYY')}.`}