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

feat(FE-40,41): create NonstockForm component

Browse Source
This commit is contained in:
ValdiANS
2025-10-08 15:00:06 +07:00
parent d24d50474d
commit 96fea80f62
1 changed files with 287 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/master-data/nonstock/form/NonstockForm.tsx
+234 -21
View File
@@ -3,26 +3,31 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useFormik } from 'formik';
import { toast } from 'react-hot-toast';
import useSWR from 'swr';
import { Icon } from '@iconify/react';
import Button from '@/components/Button';
import TextInput from '@/components/input/TextInput';
import SelectInput, { OptionType } from '@/components/input/SelectInput';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import {
NonstockFormSchema,
NonstockFormValues,
UpdateNonstockFormSchema,
} from '@/components/pages/master-data/nonstock/form/NonstockForm.schema';
import { isResponseError } from '@/lib/api-helper';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import {
CreateNonstockPayload,
Nonstock,
CreateNonstockPayload,
UpdateNonstockPayload,
} from '@/types/api/master-data/nonstock';
import {
createNonstock,
updateNonstock,
} from '@/services/api/master-data/nonstock';
import { NonstockApi, SupplierApi, UomApi } from '@/services/api/master-data';
import { cn } from '@/lib/helper';
import { flags } from '@/types/api/api-general';
import { SUPPLIER_FLAG_OPTIONS } from '@/config/constant';
interface NonstockFormProps {
type?: 'add' | 'edit' | 'detail';
@@ -31,19 +36,21 @@ interface NonstockFormProps {
const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
const router = useRouter();
const deleteModal = useModal();
const [nonstockFormErrorMessage, setNonstockFormErrorMessage] = useState('');
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const createNonstockHandler = useCallback(
async (payload: CreateNonstockPayload) => {
const createNonstockRes = await createNonstock(payload);
const createNonstockRes = await NonstockApi.create(payload);
if (isResponseError(createNonstockRes)) {
setNonstockFormErrorMessage(createNonstockRes.message);
return;
}
alert(createNonstockRes?.message);
toast.success(createNonstockRes?.message as string);
router.push('/master-data/nonstock');
},
[router]
@@ -51,14 +58,14 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
const updateNonstockHandler = useCallback(
async (nonstockId: number, payload: UpdateNonstockPayload) => {
const updateNonstockRes = await updateNonstock(nonstockId, payload);
const updateNonstockRes = await NonstockApi.update(nonstockId, payload);
if (updateNonstockRes?.status === 'error') {
setNonstockFormErrorMessage(updateNonstockRes.message);
return;
}
alert(updateNonstockRes?.message);
toast.success(updateNonstockRes?.message as string);
router.refresh();
router.push('/master-data/nonstock');
},
@@ -68,6 +75,22 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
const formikInitialValues = useMemo<NonstockFormValues>(() => {
return {
name: initialValues?.name ?? '',
uomId: initialValues?.uom_id ?? 0,
uom: initialValues?.uom
? {
value: initialValues?.uom.id,
label: initialValues?.uom.name,
}
: null,
supplierIds:
initialValues?.suppliers.map((supplier) => supplier.id) ?? [],
suppliers:
initialValues?.suppliers.map((supplier) => ({
value: supplier.id,
label: supplier.name,
})) ?? [],
flags: initialValues?.flags ?? [],
};
}, [initialValues]);
@@ -80,6 +103,9 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
const nonstockPayload: CreateNonstockPayload = {
name: values.name,
uom_id: values.uomId,
supplier_ids: values.supplierIds as number[],
flags: values.flags as flags[],
};
switch (type) {
@@ -97,11 +123,97 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
},
});
const { setValues: formikSetValues } = formik;
// UOM
const [uomSelectInputValue, setUomSelectInputValue] = useState('');
const uomsUrl = `${UomApi.basePath}?${new URLSearchParams({
search: uomSelectInputValue ?? '',
}).toString()}`;
const { data: uoms, isLoading: isLoadingUoms } = useSWR(
uomsUrl,
UomApi.getAllFetcher
);
const uomOptions = isResponseSuccess(uoms)
? uoms?.data.map((uom) => ({
value: uom.id,
label: uom.name,
}))
: [];
const uomChangeHandler = (val: OptionType | OptionType[] | null) => {
formik.setFieldTouched('uom', true);
formik.setFieldValue('uom', val);
formik.setFieldTouched('uomId', true);
formik.setFieldValue('uomId', (val as OptionType)?.value);
};
// supplier
const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({
search: supplierSelectInputValue ?? '',
}).toString()}`;
const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
suppliersUrl,
SupplierApi.getAllFetcher
);
const supplierOptions = isResponseSuccess(suppliers)
? suppliers?.data
.filter((sup) => sup.category === 'BOP')
.map((supplier) => ({
value: supplier.id,
label: supplier.name,
}))
: [];
const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
formik.setFieldTouched('suppliers', true);
formik.setFieldValue('suppliers', val);
const supplierIds = (val as OptionType[]).map(
(supplier) => supplier.value as number
);
formik.setFieldTouched('supplierIds', true);
formik.setFieldValue('supplierIds', supplierIds);
};
const deleteNonstockClickHandler = () => {
deleteModal.openModal();
};
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
await NonstockApi.delete(initialValues?.id as number);
deleteModal.closeModal();
toast.success('Successfully delete Nonstock!');
setIsDeleteLoading(false);
router.push('/master-data/nonstock');
};
const flagsChangeHandler = (val: OptionType | OptionType[] | null) => {
const formattedFlags = (val as OptionType[]).map(
(flag) => flag.value as string
);
formik.setFieldValue('flags', formattedFlags);
};
useEffect(() => {
formik.setValues(formikInitialValues);
}, [formikInitialValues]);
formikSetValues(formikInitialValues);
}, [formikSetValues, formikInitialValues]);
return (
<>
<section className='w-full max-w-xl'>
<header className='flex flex-col gap-4'>
<Button
@@ -114,9 +226,9 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
</Button>
<h1 className='text-2xl font-bold text-center'>
{type === 'add' && 'Tambah Non Stock'}
{type === 'edit' && 'Edit Non Stock'}
{type === 'detail' && 'Detail Non Stock'}
{type === 'add' && 'Tambah Nonstock'}
{type === 'edit' && 'Edit Nonstock'}
{type === 'detail' && 'Detail Nonstock'}
</h1>
</header>
@@ -130,7 +242,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
required
label='Nama'
name='name'
placeholder='Masukkan nama nonstock'
placeholder='Masukkan nama lokasi'
value={formik.values.name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
@@ -138,12 +250,95 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
errorMessage={formik.errors.name}
readOnly={type === 'detail'}
/>
<SelectInput
required
label='UOM'
value={formik.values.uom ?? undefined}
onChange={uomChangeHandler}
options={uomOptions}
onInputChange={setUomSelectInputValue}
isLoading={isLoadingUoms}
isError={formik.touched.uomId && Boolean(formik.errors.uomId)}
errorMessage={formik.errors.uomId as string}
isDisabled={type === 'detail'}
isClearable
/>
<SelectInput
label='Supplier'
isMulti
value={formik.values.suppliers}
onChange={supplierChangeHandler}
options={supplierOptions ?? []}
onInputChange={setSupplierSelectInputValue}
isLoading={isLoadingSuppliers}
isError={
formik.touched.suppliers && Boolean(formik.errors.suppliers)
}
errorMessage={formik.errors.suppliers as string}
isDisabled={type === 'detail'}
/>
<SelectInput
label='Flags'
isMulti
value={SUPPLIER_FLAG_OPTIONS.filter((opt) =>
formik.values.flags?.includes(opt.value)
)}
onChange={flagsChangeHandler}
options={SUPPLIER_FLAG_OPTIONS}
isError={formik.touched.flags && Boolean(formik.errors.flags)}
errorMessage={formik.errors.flags as string}
isDisabled={type === 'detail'}
isClearable
/>
</div>
<div className='flex flex-row justify-between gap-2 flex-wrap'>
{type !== 'add' && (
<div className='flex flex-row justify-start gap-2'>
<Button
type='button'
color='error'
onClick={deleteNonstockClickHandler}
className='px-4'
>
<Icon
icon='material-symbols:delete-outline-rounded'
width={24}
height={24}
className='justify-start text-sm'
/>
Delete
</Button>
{type !== 'edit' && (
<Button
type='button'
color='warning'
href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
className='px-4'
>
<Icon
icon='material-symbols:edit-outline'
width={24}
height={24}
className='justify-start text-sm'
/>
Edit
</Button>
)}
</div>
)}
{type !== 'detail' && (
<>
<div className='flex flex-row justify-end gap-2'>
<Button type='reset' color='error' className='px-4'>
<div
className={cn('flex flex-row justify-end gap-2', {
'w-full': type === 'add',
})}
>
<Button type='reset' color='warning' className='px-4'>
Reset
</Button>
@@ -157,6 +352,8 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
Submit
</Button>
</div>
)}
</div>
{nonstockFormErrorMessage && (
<div role='alert' className='alert alert-error'>
@@ -168,10 +365,26 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
<span>{nonstockFormErrorMessage}</span>
</div>
)}
</>
)}
</form>
</section>
{type !== 'add' && (
<ConfirmationModal
ref={deleteModal.ref}
type='error'
text={`Apakah anda yakin ingin menghapus data Nonstock ini (${initialValues?.name})?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'error',
isLoading: isDeleteLoading,
onClick: confirmationModalDeleteClickHandler,
}}
/>
)}
</>
);
};