gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE-114): remove FieldMessage component usage and streamline error message handling in form inputs

Browse Source
This commit is contained in:
rstubryan
2025-10-23 13:14:16 +07:00
parent 6687f4af98
commit 7e53743b07
11 changed files with 196 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/input/CheckboxInput.tsx
+7 -6
View File
@@ -267,12 +267,13 @@ const CheckboxInput = ({
</p>
)}
{/* Field Message */}
<FieldMessage
message={feedbackMessage}
tone={showErrorMessage ? 'error' : 'info'}
isVisible={showErrorMessage || Boolean(bottomLabel)}
/>
{/* Error Message or Bottom Label */}
{!isError && bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
)}
{isError && errorMessage && (
<p className='w-full text-sm text-error'>{errorMessage}</p>
)}
</div>
);
};
src/components/input/FileInput.tsx
+5 -9
View File
@@ -2,7 +2,6 @@ import { Ref } from 'react';
import { cn } from '@/lib/helper';
import { TextInputProps } from '@/components/input/TextInput';
import FieldMessage from '@/components/helper/FieldMessage';
interface FileInputProps
extends Omit<
@@ -38,9 +37,6 @@ const FileInput = ({
onBlur,
readOnly = false,
}: FileInputProps) => {
const showErrorMessage = Boolean(isError && errorMessage);
const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
return (
<div
className={cn(
@@ -80,11 +76,11 @@ const FileInput = ({
readOnly={readOnly}
/>
<FieldMessage
message={feedbackMessage}
tone={showErrorMessage ? 'error' : 'info'}
isVisible={showErrorMessage || Boolean(bottomLabel)}
/>
{bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
)}
{isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
</div>
);
};
src/components/input/NumberInput.tsx
+150 -226
View File
@@ -11,67 +11,8 @@ import {
import { Icon } from '@iconify/react';
import { cn } from '@/lib/helper';
import FieldMessage from '@/components/helper/FieldMessage';
export type MaskType = 'currency' | 'weight' | 'decimal' | 'number';
export interface NumberInputProps {
// Basic Props
label?: string;
bottomLabel?: string;
name: string;
value?: number | string;
placeholder?: string;
// Styling Props
className?: {
wrapper?: string;
label?: string;
inputWrapper?: string;
input?: string;
};
// State Props
isError?: boolean;
isValid?: boolean;
errorMessage?: string;
disabled?: boolean;
readOnly?: boolean;
required?: boolean;
isLoading?: boolean;
// Adornment Props
startAdornment?: ReactNode;
endAdornment?: ReactNode;
// Event Handlers
onChange?: ChangeEventHandler<HTMLInputElement>;
onBlur?: FocusEventHandler<HTMLInputElement>;
onFocus?: FocusEventHandler<HTMLInputElement>;
// Masking Options
maskType?: MaskType;
decimals?: number;
thousandSeparator?: string;
decimalSeparator?: string;
currencyPrefix?: string;
weightUnit?: string;
// Validation Props
min?: number;
max?: number;
allowNegative?: boolean;
// Stepper Options
showSteppers?: boolean;
step?: number;
}
// UTILITY FUNCTIONS
/**
* Core number formatting function
* Formats number with thousand separator and decimal separator
*/
// Utility Functions
const formatNumber = (
value: number | string,
decimals: number = 0,
@@ -95,10 +36,6 @@ const formatNumber = (
: integerPart;
};
/**
* Parse formatted string to number
* Converts formatted input back to raw number for processing
*/
const parseNumber = (
value: string,
thousandSeparator: string = '.',
@@ -115,10 +52,26 @@ const parseNumber = (
return isNaN(parsed) ? 0 : parsed;
};
/**
* Clean and validate numeric input while typing
* Ensures only valid characters are allowed
*/
const formatCurrency = (
value: number | string,
prefix: string = 'Rp ',
decimals: number = 0
): string => {
if (value === '' || value === null || value === undefined) return '';
const formatted = formatNumber(value, decimals);
return formatted ? `${prefix}${formatted}` : '';
};
const formatWeight = (
value: number | string,
unit: string = 'kg',
decimals: number = 2
): string => {
if (value === '' || value === null || value === undefined) return '';
const formatted = formatNumber(value, decimals);
return formatted ? `${formatted} ${unit}` : '';
};
const cleanNumericInput = (
value: string,
allowDecimal: boolean = false,
@@ -146,6 +99,56 @@ const cleanNumericInput = (
return cleaned;
};
// Types
export type MaskType = 'currency' | 'weight' | 'decimal' | 'number';
export interface NumberInputProps {
label?: string;
bottomLabel?: string;
name: string;
value?: number | string;
placeholder?: string;
className?: {
wrapper?: string;
label?: string;
inputWrapper?: string;
input?: string;
};
isError?: boolean;
isValid?: boolean;
disabled?: boolean;
readOnly?: boolean;
required?: boolean;
isLoading?: boolean;
errorMessage?: string;
startAdornment?: ReactNode;
endAdornment?: ReactNode;
onChange?: ChangeEventHandler<HTMLInputElement>;
onBlur?: FocusEventHandler<HTMLInputElement>;
onFocus?: FocusEventHandler<HTMLInputElement>;
// Masking Options
maskType?: MaskType;
decimals?: number;
thousandSeparator?: string;
decimalSeparator?: string;
// Currency specific
currencyPrefix?: string;
// Weight specific
weightUnit?: string;
// Validation
min?: number;
max?: number;
allowNegative?: boolean;
// Stepper (Increment/Decrement buttons)
showSteppers?: boolean;
step?: number;
}
const NumberInput = ({
label,
bottomLabel,
@@ -179,35 +182,20 @@ const NumberInput = ({
}: NumberInputProps) => {
const [displayValue, setDisplayValue] = useState<string>('');
// CONFIG & HELPERS
// Determine if decimals are allowed based on maskType
const allowDecimal =
maskType === 'decimal' || maskType === 'weight' || decimals > 0;
const getInputPrefix = (): string => {
switch (maskType) {
case 'currency':
return currencyPrefix;
default:
return '';
}
};
const getInputSuffix = (): string => {
switch (maskType) {
case 'weight':
return weightUnit;
default:
return '';
}
};
// Format value for display based on maskType
const getFormattedValue = (rawValue: number | string): string => {
if (rawValue === '' || rawValue === null || rawValue === undefined)
return '';
switch (maskType) {
case 'currency':
return formatCurrency(rawValue, currencyPrefix, decimals);
case 'weight':
return formatWeight(rawValue, weightUnit, decimals);
case 'decimal':
case 'number':
return formatNumber(
@@ -221,14 +209,21 @@ const NumberInput = ({
}
};
// EFFECTS
// Initialize display value when value prop changes
useEffect(() => {
setDisplayValue(getFormattedValue(value || ''));
}, [value]);
// EVENT HANDLERS
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
const inputValue = e.target.value;
let inputValue = e.target.value;
// Remove prefix/suffix for editing
if (maskType === 'currency' && inputValue.startsWith(currencyPrefix)) {
inputValue = inputValue.slice(currencyPrefix.length);
}
if (maskType === 'weight' && inputValue.endsWith(` ${weightUnit}`)) {
inputValue = inputValue.slice(0, -weightUnit.length - 1);
}
// Clean input
const cleaned = cleanNumericInput(
@@ -267,6 +262,7 @@ const NumberInput = ({
// Call onChange with modified event
if (onChange) {
// Create a synthetic event with the numeric value
const syntheticEvent = {
...e,
target: {
@@ -280,6 +276,7 @@ const NumberInput = ({
}
};
// Handle Increment
const handleIncrement = () => {
if (disabled || readOnly) return;
@@ -317,6 +314,7 @@ const NumberInput = ({
}
};
// Handle Decrement
const handleDecrement = () => {
if (disabled || readOnly) return;
@@ -357,12 +355,6 @@ const NumberInput = ({
}
};
// RENDER CALCULATIONS
const showErrorMessage = Boolean(isError && errorMessage);
const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
const inputPrefix = getInputPrefix();
const inputSuffix = getInputSuffix();
return (
<div
className={cn(
@@ -393,152 +385,84 @@ const NumberInput = ({
</label>
)}
{/* Input Container */}
<div className='relative flex'>
{/* Prefix Block */}
{inputPrefix && (
<div
<div
className={cn(
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
{
'border-error': isError,
'border-success!': isValid,
},
className?.inputWrapper
)}
>
{/* Decrement Button */}
{showSteppers && (
<button
type='button'
onClick={handleDecrement}
disabled={disabled || readOnly}
className={cn(
'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
{
'bg-gray-100 border-gray-300': !disabled,
'bg-gray-50 border-gray-200': disabled,
'opacity-50 cursor-not-allowed': disabled || readOnly,
}
)}
tabIndex={-1}
>
<span
className={cn(
'text-sm font-medium select-none whitespace-nowrap',
{
'text-gray-600': !disabled,
'text-gray-400': disabled,
}
)}
>
{inputPrefix}
</span>
<Icon icon='ic:round-minus' width={20} height={20} />
</button>
)}
{startAdornment && startAdornment}
<input
type='text'
id={name}
name={name}
placeholder={placeholder}
value={displayValue}
onChange={handleInputChange}
onFocus={onFocus}
onBlur={onBlur}
disabled={disabled}
className={cn('grow', className?.input)}
readOnly={readOnly}
inputMode='decimal'
/>
{(isLoading || endAdornment) && (
<div className='flex flex-row gap-2'>
{isLoading && <span className='loading loading-spinner' />}
{endAdornment && endAdornment}
</div>
)}
{/* Input Wrapper */}
<div
className={cn(
'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
{
'border-error': isError,
'border-success!': isValid,
'rounded-l-none!': inputPrefix,
'rounded-r-none!': inputSuffix,
'input-disabled': disabled,
'cursor-not-allowed': disabled,
'bg-gray-50': disabled,
},
className?.inputWrapper
)}
>
{/* Stepper Buttons */}
{showSteppers && (
<button
type='button'
onClick={handleDecrement}
disabled={disabled || readOnly}
className={cn(
'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
{
'opacity-50 cursor-not-allowed': disabled || readOnly,
}
)}
tabIndex={-1}
>
<Icon icon='ic:round-minus' width={20} height={20} />
</button>
)}
{/* Start Adornment */}
{startAdornment && startAdornment}
{/* Main Input */}
<input
type='text'
id={name}
name={name}
placeholder={placeholder}
value={displayValue}
onChange={handleInputChange}
onFocus={onFocus}
onBlur={onBlur}
disabled={disabled}
{/* Increment Button */}
{showSteppers && (
<button
type='button'
onClick={handleIncrement}
disabled={disabled || readOnly}
className={cn(
'grow bg-transparent outline-none',
'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
{
'cursor-not-allowed': disabled,
'text-gray-500': disabled,
},
className?.input
)}
readOnly={readOnly}
inputMode='decimal'
/>
{/* End Adornment & Loading */}
{(isLoading || endAdornment) && (
<div className='flex flex-row gap-2'>
{isLoading && <span className='loading loading-spinner' />}
{endAdornment && endAdornment}
</div>
)}
{/* Increment Button */}
{showSteppers && (
<button
type='button'
onClick={handleIncrement}
disabled={disabled || readOnly}
className={cn(
'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
{
'opacity-50 cursor-not-allowed': disabled || readOnly,
}
)}
tabIndex={-1}
>
<Icon icon='ic:round-plus' width={20} height={20} />
</button>
)}
</div>
{/* Suffix Block */}
{inputSuffix && (
<div
className={cn(
'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
{
'bg-gray-100 border-gray-300': !disabled,
'bg-gray-50 border-gray-200': disabled,
'opacity-50 cursor-not-allowed': disabled || readOnly,
}
)}
tabIndex={-1}
>
<span
className={cn(
'text-sm font-medium select-none whitespace-nowrap',
{
'text-gray-600': !disabled,
'text-gray-400': disabled,
}
)}
>
{inputSuffix}
</span>
</div>
<Icon icon='ic:round-plus' width={20} height={20} />
</button>
)}
</div>
{/* Field Message */}
<FieldMessage
message={feedbackMessage}
tone={showErrorMessage ? 'error' : 'info'}
isVisible={showErrorMessage || Boolean(bottomLabel)}
/>
{!isError && bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
)}
{isError && errorMessage && (
<p className='w-full text-sm text-error'>{errorMessage}</p>
)}
</div>
);
};
src/components/input/RadioInput.tsx
+9 -8
View File
@@ -2,7 +2,6 @@
import { ChangeEventHandler, ReactNode } from 'react';
import { cn } from '@/lib/helper';
import FieldMessage from '@/components/helper/FieldMessage';
export interface RadioOption {
label: string;
@@ -48,8 +47,6 @@ const RadioInput = ({
onChange,
onBlur,
}: RadioInputProps) => {
const showErrorMessage = Boolean(isError && errorMessage);
const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
return (
<div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
{/* Label atas */}
@@ -100,11 +97,15 @@ const RadioInput = ({
))}
</div>
<FieldMessage
message={feedbackMessage}
tone={showErrorMessage ? 'error' : 'info'}
isVisible={showErrorMessage || Boolean(bottomLabel)}
/>
{/* Label bawah */}
{!isError && bottomLabel && (
<p className='text-sm opacity-60'>{bottomLabel}</p>
)}
{/* Pesan error */}
{isError && errorMessage && (
<p className='text-sm text-error'>{errorMessage}</p>
)}
</div>
);
};
src/components/input/SelectInput.tsx
+4 -9
View File
@@ -12,7 +12,6 @@ import CreatableSelect from 'react-select/creatable';
import makeAnimated from 'react-select/animated';
import { useDebounce } from 'use-debounce';
import { cn } from '@/lib/helper';
import FieldMessage from '@/components/helper/FieldMessage';
export interface OptionType {
value: string | number;
@@ -118,9 +117,6 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
}
};
const showErrorMessage = Boolean(isError && errorMessage);
const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
return (
<div
className={cn(
@@ -218,11 +214,10 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
}}
/>
<FieldMessage
message={feedbackMessage}
tone={showErrorMessage ? 'error' : 'info'}
isVisible={showErrorMessage || Boolean(bottomLabel)}
/>
{isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
{!isError && bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
)}
</div>
);
};
src/components/input/TagInput.tsx
+5 -9
View File
@@ -2,7 +2,6 @@
import React, { useState, KeyboardEvent, ChangeEvent, useEffect } from 'react';
import { cn } from '@/lib/helper';
import FieldMessage from '@/components/helper/FieldMessage';
export interface TagInputProps {
label?: string;
@@ -74,9 +73,6 @@ const TagInput: React.FC<TagInputProps> = ({
setInputValue(e.target.value);
};
const showErrorMessage = Boolean(isError && errorMessage);
const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
return (
<div
className={cn(
@@ -161,11 +157,11 @@ const TagInput: React.FC<TagInputProps> = ({
)}
</div>
<FieldMessage
message={feedbackMessage}
tone={showErrorMessage ? 'error' : 'info'}
isVisible={showErrorMessage || Boolean(bottomLabel)}
/>
{/* Bottom label or error message */}
{!isError && bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
)}
{isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
</div>
);
};
src/components/input/TextArea.tsx
+5 -10
View File
@@ -3,7 +3,6 @@
import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
import { cn } from '@/lib/helper';
import FieldMessage from '@/components/helper/FieldMessage';
export interface TextAreaProps {
label?: string;
@@ -51,9 +50,6 @@ const TextArea = ({
isLoading = false,
rows = 3,
}: TextAreaProps) => {
const showErrorMessage = Boolean(isError && errorMessage);
const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
return (
<div
className={cn(
@@ -87,7 +83,7 @@ const TextArea = ({
<textarea
className={cn(
'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all bg-white',
'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
{
'border-error': isError,
'border-success!': isValid,
@@ -113,11 +109,10 @@ const TextArea = ({
</div>
)}
<FieldMessage
message={feedbackMessage}
tone={showErrorMessage ? 'error' : 'info'}
isVisible={showErrorMessage || Boolean(bottomLabel)}
/>
{!isError && bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
)}
{isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
</div>
);
};
src/components/input/TextInput.tsx
+7 -10
View File
@@ -8,7 +8,6 @@ import {
} from 'react';
import { cn } from '@/lib/helper';
import FieldMessage from '@/components/helper/FieldMessage';
export interface TextInputProps {
type?: HTMLInputTypeAttribute;
@@ -56,9 +55,6 @@ const TextInput = ({
readOnly = false,
isLoading = false,
}: TextInputProps) => {
const showErrorMessage = Boolean(isError && errorMessage);
const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
return (
<div
className={cn(
@@ -91,7 +87,7 @@ const TextInput = ({
<div
className={cn(
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
{
'border-error': isError,
'border-success!': isValid,
@@ -123,11 +119,12 @@ const TextInput = ({
)}
</div>
<FieldMessage
message={feedbackMessage}
tone={showErrorMessage ? 'error' : 'info'}
isVisible={showErrorMessage || Boolean(bottomLabel)}
/>
{!isError && bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
)}
{isError && errorMessage && (
<p className='w-full text-sm text-error'>{errorMessage}</p>
)}
</div>
);
};
src/components/pages/inventory/movement/form/MovementForm.tsx
-9
View File
@@ -29,7 +29,6 @@ import { SupplierApi, WarehouseApi } from '@/services/api/master-data';
import { ProductWarehouseApi } from '@/services/api/inventory';
import { toast } from 'react-hot-toast';
import FileInput from '@/components/input/FileInput';
import FieldMessage from '@/components/helper/FieldMessage';
import CheckboxInput from '@/components/input/CheckboxInput';
interface MovementFormProps {
@@ -910,7 +909,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
naked={true}
size='sm'
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
@@ -1006,7 +1004,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
height={24}
/>
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
@@ -1174,7 +1171,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
naked={true}
size='sm'
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
@@ -1323,10 +1319,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
'-'
)}
</Button>
<FieldMessage
message={null}
isVisible={false}
/>
</div>
</>
) : (
@@ -1444,7 +1436,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
height={24}
/>
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
src/components/pages/production/recording/form/RecordingForm.tsx
-9
View File
@@ -30,7 +30,6 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { Warehouse } from '@/types/api/master-data/warehouse';
import { LocationApi } from '@/services/api/master-data';
import FieldMessage from '@/components/helper/FieldMessage';
import Card from '@/components/Card';
interface RecordingFormProps {
@@ -829,7 +828,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
naked={true}
size='sm'
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
@@ -948,7 +946,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
height={24}
/>
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
@@ -1078,7 +1075,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
naked={true}
size='sm'
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
@@ -1191,7 +1187,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
height={24}
/>
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
@@ -1313,7 +1308,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
naked={true}
size='sm'
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
@@ -1448,7 +1442,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
height={24}
/>
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
@@ -1572,7 +1565,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
naked={true}
size='sm'
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
@@ -1646,7 +1638,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
height={24}
/>
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
src/styles/daisyui.css
+4
View File
@@ -8,4 +8,8 @@
--step-bg: var(--color-error);
--step-fg: var(--color-error-content);
}
.table :where(th, td) {
vertical-align: top;
}
}