mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE-438): Add icon position/size and subtitle to modal
This commit is contained in:
rstubryan
@@ -8,10 +8,13 @@ import Button, { ButtonProps } from '@/components/Button';
|
||||
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
export type IconPosition = 'left' | 'center' | 'right';
|
||||
|
||||
export interface ConfirmationModalProps {
|
||||
ref: RefObject<HTMLDialogElement | null>;
|
||||
type?: 'info' | 'success' | 'error';
|
||||
text?: string;
|
||||
subtitleText?: string;
|
||||
closeOnBackdrop?: boolean;
|
||||
primaryButton?: ButtonProps & {
|
||||
text?: string;
|
||||
@@ -24,17 +27,22 @@ export interface ConfirmationModalProps {
|
||||
modalBox?: string;
|
||||
};
|
||||
children?: React.ReactNode;
|
||||
iconSize?: number;
|
||||
iconPosition?: IconPosition;
|
||||
}
|
||||
|
||||
const ConfirmationModal = ({
|
||||
ref,
|
||||
type = 'info',
|
||||
text,
|
||||
subtitleText,
|
||||
closeOnBackdrop,
|
||||
primaryButton,
|
||||
secondaryButton,
|
||||
className,
|
||||
children,
|
||||
iconSize = 64,
|
||||
iconPosition = 'center',
|
||||
}: ConfirmationModalProps) => {
|
||||
const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
|
||||
|
||||
@@ -55,47 +63,112 @@ const ConfirmationModal = ({
|
||||
return (
|
||||
<Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
|
||||
<div className='w-full flex flex-col gap-4'>
|
||||
<div
|
||||
className={cn(
|
||||
'w-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
|
||||
{
|
||||
'bg-error': type === 'error',
|
||||
'bg-info': type === 'info',
|
||||
'bg-success': type === 'success',
|
||||
}
|
||||
)}
|
||||
>
|
||||
{type === 'info' && (
|
||||
<Icon
|
||||
icon='material-symbols:info-outline-rounded'
|
||||
width={64}
|
||||
height={64}
|
||||
className='text-info-content'
|
||||
/>
|
||||
)}
|
||||
{iconPosition === 'center' ? (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
'w-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
|
||||
{
|
||||
'bg-error': type === 'error',
|
||||
'bg-info': type === 'info',
|
||||
'bg-success': type === 'success',
|
||||
}
|
||||
)}
|
||||
>
|
||||
{type === 'info' && (
|
||||
<Icon
|
||||
icon='material-symbols:info-outline-rounded'
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
className='text-info-content'
|
||||
/>
|
||||
)}
|
||||
|
||||
{type === 'success' && (
|
||||
<Icon
|
||||
icon='qlementine-icons:success-12'
|
||||
width={64}
|
||||
height={64}
|
||||
className='text-success-content'
|
||||
/>
|
||||
)}
|
||||
{type === 'success' && (
|
||||
<Icon
|
||||
icon='qlementine-icons:success-12'
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
className='text-success-content'
|
||||
/>
|
||||
)}
|
||||
|
||||
{type === 'error' && (
|
||||
<Icon
|
||||
icon='solar:danger-triangle-linear'
|
||||
width={64}
|
||||
height={64}
|
||||
className='text-error-content'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{type === 'error' && (
|
||||
<Icon
|
||||
icon='solar:danger-triangle-linear'
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
className='text-error-content'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className='text-center font-medium'>
|
||||
{text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
|
||||
</p>
|
||||
<p className='text-center font-medium'>
|
||||
{text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
|
||||
</p>
|
||||
|
||||
{subtitleText && (
|
||||
<p className='text-center text-sm text-gray-400'>
|
||||
{subtitleText}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div
|
||||
className={cn('flex flex-row items-center gap-4', {
|
||||
'flex-row': iconPosition === 'left',
|
||||
'flex-row-reverse': iconPosition === 'right',
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'w-fit p-4 flex flex-row justify-center items-center rounded-full',
|
||||
{
|
||||
'bg-error': type === 'error',
|
||||
'bg-info': type === 'info',
|
||||
'bg-success': type === 'success',
|
||||
}
|
||||
)}
|
||||
>
|
||||
{type === 'info' && (
|
||||
<Icon
|
||||
icon='material-symbols:info-outline-rounded'
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
className='text-info-content'
|
||||
/>
|
||||
)}
|
||||
|
||||
{type === 'success' && (
|
||||
<Icon
|
||||
icon='qlementine-icons:success-12'
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
className='text-success-content'
|
||||
/>
|
||||
)}
|
||||
|
||||
{type === 'error' && (
|
||||
<Icon
|
||||
icon='solar:danger-triangle-linear'
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
className='text-error-content'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col gap-1'>
|
||||
<p className='font-medium'>
|
||||
{text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
|
||||
</p>
|
||||
|
||||
{subtitleText && (
|
||||
<p className='text-sm text-gray-400'>{subtitleText}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{children && <div className='w-full'>{children}</div>}
|
||||
|
||||
|
||||
@@ -420,6 +420,8 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
||||
<ConfirmationModal
|
||||
ref={singleDeleteModal.ref}
|
||||
type='error'
|
||||
iconPosition='left'
|
||||
iconSize={32}
|
||||
text={`Apakah anda yakin ingin menghapus data Uniformity ini?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
@@ -430,11 +432,71 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
||||
isLoading: isDeleteLoading,
|
||||
onClick: singleDeleteHandler,
|
||||
}}
|
||||
/>
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
{' '}
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
<Table
|
||||
data={[
|
||||
{
|
||||
id: 'tanggal',
|
||||
label: 'Tanggal',
|
||||
value: '28 Desember 2025',
|
||||
},
|
||||
{
|
||||
id: 'lokasi-farm',
|
||||
label: 'Lokasi Farm',
|
||||
value: 'Farm A',
|
||||
},
|
||||
{
|
||||
id: 'project-flock',
|
||||
label: 'Project Flock',
|
||||
value: 'Flock 2025-01',
|
||||
},
|
||||
{
|
||||
id: 'kandang',
|
||||
label: 'Kandang',
|
||||
value: 'Kandang 1',
|
||||
},
|
||||
{
|
||||
id: 'file-uniformity',
|
||||
label: 'File Uniformity',
|
||||
value: 'uniformity_data.xlsx',
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
label: 'Status',
|
||||
value: 'Disetujui',
|
||||
},
|
||||
]}
|
||||
columns={[
|
||||
{
|
||||
accessorKey: 'label',
|
||||
header: 'Label',
|
||||
cell: (props) => props.row.original.label,
|
||||
},
|
||||
{
|
||||
accessorKey: 'value',
|
||||
header: 'Value',
|
||||
cell: (props) => <span>{props.row.original.value}</span>,
|
||||
},
|
||||
]}
|
||||
pageSize={6}
|
||||
className={{
|
||||
containerClassName: 'mb-0',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={bulkDeleteModal.ref}
|
||||
type='error'
|
||||
iconPosition='left'
|
||||
iconSize={32}
|
||||
text={`Apakah anda yakin ingin menghapus ${selectedRowIds.length} data Uniformity yang dipilih?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
@@ -445,18 +507,81 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
||||
isLoading: isBulkActionLoading,
|
||||
onClick: bulkDeleteHandler,
|
||||
}}
|
||||
/>
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
<Table
|
||||
data={[
|
||||
{
|
||||
id: 'tanggal',
|
||||
label: 'Tanggal',
|
||||
value: '28 Desember 2025',
|
||||
},
|
||||
{
|
||||
id: 'lokasi-farm',
|
||||
label: 'Lokasi Farm',
|
||||
value: 'Farm A',
|
||||
},
|
||||
{
|
||||
id: 'project-flock',
|
||||
label: 'Project Flock',
|
||||
value: 'Flock 2025-01',
|
||||
},
|
||||
{
|
||||
id: 'kandang',
|
||||
label: 'Kandang',
|
||||
value: 'Kandang 1',
|
||||
},
|
||||
{
|
||||
id: 'file-uniformity',
|
||||
label: 'File Uniformity',
|
||||
value: 'uniformity_data.xlsx',
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
label: 'Status',
|
||||
value: 'Disetujui',
|
||||
},
|
||||
]}
|
||||
columns={[
|
||||
{
|
||||
accessorKey: 'label',
|
||||
header: 'Label',
|
||||
cell: (props) => props.row.original.label,
|
||||
},
|
||||
{
|
||||
accessorKey: 'value',
|
||||
header: 'Value',
|
||||
cell: (props) => <span>{props.row.original.value}</span>,
|
||||
},
|
||||
]}
|
||||
pageSize={6}
|
||||
className={{
|
||||
containerClassName: 'mb-0',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={successModal.ref}
|
||||
type='success'
|
||||
iconPosition='left'
|
||||
iconSize={32}
|
||||
text='Data Berhasil Ditambahkan'
|
||||
subtitleText='Data uniformity telah berhasil disimpan.'
|
||||
closeOnBackdrop={false}
|
||||
primaryButton={{
|
||||
text: 'Ok',
|
||||
color: 'primary',
|
||||
onClick: handleSuccessModalClose,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
<Table
|
||||
|
||||
Reference in New Issue
Block a user