mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat(FE-170,174,175): add validation for incomplete grading in GradingForm
This commit is contained in:
@@ -256,6 +256,8 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
|
||||
}, [formik.values.eggs_grading]);
|
||||
|
||||
const isGradingExceedsAvailable = currentGradingTotal > totalKonsumsiBaikEggs;
|
||||
const isGradingIncomplete = currentGradingTotal < totalKonsumsiBaikEggs && totalKonsumsiBaikEggs > 0;
|
||||
const hasUserStartedGrading = currentGradingTotal > 0;
|
||||
|
||||
// GRADING HANDLERS
|
||||
const addGrading = () => {
|
||||
@@ -355,10 +357,21 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
|
||||
duration: 3000,
|
||||
}
|
||||
);
|
||||
toast.dismiss('grading-incomplete');
|
||||
} else if (isGradingIncomplete && hasUserStartedGrading) {
|
||||
toast.error(
|
||||
`Total grading (${currentGradingTotal}) tidak sama dengan total telur konsumsi baik yang tersedia (${totalKonsumsiBaikEggs})! Semua telur harus digrading.`,
|
||||
{
|
||||
id: 'grading-incomplete',
|
||||
duration: 3000,
|
||||
}
|
||||
);
|
||||
toast.dismiss('grading-exceeds');
|
||||
} else {
|
||||
toast.dismiss('grading-exceeds');
|
||||
toast.dismiss('grading-incomplete');
|
||||
}
|
||||
}, [isGradingExceedsAvailable, currentGradingTotal, totalKonsumsiBaikEggs]);
|
||||
}, [isGradingExceedsAvailable, isGradingIncomplete, hasUserStartedGrading, currentGradingTotal, totalKonsumsiBaikEggs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
@@ -559,7 +572,9 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
|
||||
className={`rounded-lg p-4 border-2 ${
|
||||
isGradingExceedsAvailable
|
||||
? 'bg-red-50 border-red-200'
|
||||
: 'bg-green-50 border-green-200'
|
||||
: isGradingIncomplete && hasUserStartedGrading
|
||||
? 'bg-yellow-50 border-yellow-200'
|
||||
: 'bg-green-50 border-green-200'
|
||||
}`}
|
||||
>
|
||||
<div className='flex items-center justify-between mb-3'>
|
||||
@@ -578,21 +593,29 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-full p-2 ${
|
||||
isGradingExceedsAvailable ? 'bg-red-100' : 'bg-green-100'
|
||||
isGradingExceedsAvailable
|
||||
? 'bg-red-100'
|
||||
: isGradingIncomplete && hasUserStartedGrading
|
||||
? 'bg-yellow-100'
|
||||
: 'bg-green-100'
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
icon={
|
||||
isGradingExceedsAvailable
|
||||
? 'material-symbols:error'
|
||||
: 'material-symbols:check-circle'
|
||||
: isGradingIncomplete && hasUserStartedGrading
|
||||
? 'material-symbols:warning'
|
||||
: 'material-symbols:check-circle'
|
||||
}
|
||||
width={20}
|
||||
height={20}
|
||||
className={
|
||||
isGradingExceedsAvailable
|
||||
? 'text-red-600'
|
||||
: 'text-green-600'
|
||||
: isGradingIncomplete && hasUserStartedGrading
|
||||
? 'text-yellow-600'
|
||||
: 'text-green-600'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
@@ -606,7 +629,9 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
|
||||
className={`font-semibold ${
|
||||
isGradingExceedsAvailable
|
||||
? 'text-red-600'
|
||||
: 'text-green-600'
|
||||
: isGradingIncomplete && hasUserStartedGrading
|
||||
? 'text-yellow-600'
|
||||
: 'text-green-600'
|
||||
}`}
|
||||
>
|
||||
{currentGradingTotal} / {totalKonsumsiBaikEggs}
|
||||
@@ -617,7 +642,9 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
|
||||
className={`h-full transition-all duration-300 ${
|
||||
isGradingExceedsAvailable
|
||||
? 'bg-red-500'
|
||||
: 'bg-green-500'
|
||||
: isGradingIncomplete && hasUserStartedGrading
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-green-500'
|
||||
}`}
|
||||
style={{
|
||||
width: `${Math.min((currentGradingTotal / totalKonsumsiBaikEggs) * 100, 100)}%`,
|
||||
@@ -634,6 +661,16 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
|
||||
<span>Melebihi batas tersedia</span>
|
||||
</div>
|
||||
)}
|
||||
{isGradingIncomplete && hasUserStartedGrading && (
|
||||
<div className='flex items-center gap-1 text-xs text-yellow-600 mt-1'>
|
||||
<Icon
|
||||
icon='material-symbols:info'
|
||||
width={12}
|
||||
height={12}
|
||||
/>
|
||||
<span>Grading belum lengkap, semua telur harus digrading</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -775,14 +812,17 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
|
||||
decimalSeparator='.'
|
||||
isError={
|
||||
isRepeaterInputError('eggs_grading', 'qty', idx)
|
||||
.isError || isGradingExceedsAvailable
|
||||
.isError ||
|
||||
(isGradingExceedsAvailable || (isGradingIncomplete && hasUserStartedGrading))
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError('eggs_grading', 'qty', idx)
|
||||
.errorMessage ||
|
||||
(isGradingExceedsAvailable
|
||||
? `Total grading melebihi telur yang tersedia (${totalKonsumsiBaikEggs})`
|
||||
: undefined)
|
||||
: isGradingIncomplete && hasUserStartedGrading
|
||||
? `Total grading (${currentGradingTotal}) harus sama dengan total telur konsumsi baik (${totalKonsumsiBaikEggs})`
|
||||
: undefined)
|
||||
}
|
||||
readOnly={type === 'detail'}
|
||||
className={{
|
||||
@@ -903,7 +943,8 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
|
||||
disabled={
|
||||
!formik.isValid ||
|
||||
formik.isSubmitting ||
|
||||
isGradingExceedsAvailable
|
||||
isGradingExceedsAvailable ||
|
||||
(isGradingIncomplete && hasUserStartedGrading)
|
||||
}
|
||||
>
|
||||
Submit
|
||||
|
||||
Reference in New Issue
Block a user