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

fix(FE-51-54): fixing bug and layout form adjustment

Browse Source
This commit is contained in:
randy-ar
2025-10-11 23:26:30 +07:00
parent 1fd4b2aba5
commit f662f2951e
10 changed files with 70 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts
+14 -6
View File
@@ -4,28 +4,36 @@ export const InventoryAdjustmentFormSchema = Yup.object({
product_category: Yup.object({
value: Yup.number().required('ID Kategori Produk wajib diisi!'),
label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
}).nullable(),
})
.nullable(),
product_category_id: Yup.number().nullable(),
product: Yup.object({
value: Yup.number().required('ID Produk wajib diisi!'),
label: Yup.string().required('Nama Produk wajib diisi!'),
}).required('Produk wajib diisi!'),
product_id: Yup.number().required('ID Produk wajib diisi!'),
})
.nullable(),
product_id: Yup.number().nullable(),
warehouse: Yup.object({
value: Yup.number().required('ID Gudang wajib diisi!'),
label: Yup.string().required('Nama Gudang wajib diisi!'),
}).required('Gudang wajib diisi!'),
warehouse_id: Yup.number().required('ID Gudang wajib diisi!'),
})
.nullable(),
warehouse_id: Yup.number().nullable(),
transaction_type: Yup.string()
.oneOf(['increase', 'decrease'], 'Tipe transaksi tidak valid')
.required('Tipe transaksi wajib diisi'),
quantity: Yup.number()
.typeError('Kuantitas harus berupa angka')
.min(1, 'Minimal kuantitas adalah 1')
.required('Kuantitas wajib diisi'),
note: Yup.string().required('Catatan wajib diisi!'),
});
src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
+50 -73
View File
@@ -8,7 +8,7 @@ import {
} from '@/types/api/inventory/adjustment';
import { useFormik } from 'formik';
import { useRouter } from 'next/navigation';
import { use, useCallback, useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import toast from 'react-hot-toast';
import {
InventoryAdjustmentFormSchema,
@@ -31,37 +31,7 @@ interface InventoryAdjustmentFormProps {
type?: 'add' | 'edit' | 'detail';
initialValues?: InventoryAdjustment;
}
// type = 'detail',
// initialValues = {
// id: 1,
// product_warehouse: {
// product: {
// id: 1,
// name: 'Product 1',
// },
// warehouse: {
// id: 1,
// name: 'Warehouse 1',
// },
// quantity: 100,
// product_id: 1,
// warehouse_id: 1,
// id: 1,
// },
// before_quantity: 100,
// after_quantity: 100,
// quantity: 10,
// transaction_type: 'INCREASE',
// note: 'Note',
// created_user: {
// id: 1,
// id_user: 1,
// name: 'User 1',
// email: 'user1@example.com',
// },
// created_at: '2025-10-10T18:51:40.9383Z',
// updated_at: '2025-10-10T18:51:40.9383Z',
// },
const InventoryAdjustmentForm = ({
type = 'add',
initialValues,
@@ -77,7 +47,6 @@ const InventoryAdjustmentForm = ({
const [disabledProduct, setDisabledProduct] = useState(true);
const [optionsProduct, setOptionsProduct] = useState<OptionType[]>([]);
const [quantityLabel, setQuantityLabel] = useState('Tambah Stok');
const [transactionType, setTransactionType] = useState('increment');
// Submit Handler
const createInventoryAdjustmentHandler = useCallback(
@@ -99,23 +68,14 @@ const InventoryAdjustmentForm = ({
[router]
);
const formikInitialValues = useMemo<InventoryAdjustmentFormValues>(() => {
const formikInitialValues = useMemo<Partial<InventoryAdjustmentFormValues>>(() => {
return {
product_category_id: initialValues?.product_category?.id ?? 0,
product_id: initialValues?.product?.id ?? 0,
warehouse_id: initialValues?.warehouse?.id ?? 0,
product_category: {
value: initialValues?.product_category?.id ?? 0,
label: initialValues?.product_category?.name ?? '',
},
product: {
value: initialValues?.product?.id ?? 0,
label: initialValues?.product?.name ?? '',
},
warehouse: {
value: initialValues?.warehouse?.id ?? 0,
label: initialValues?.warehouse?.name ?? '',
},
product_category: undefined,
product: undefined,
warehouse: undefined,
quantity: initialValues?.quantity ?? 0,
transaction_type: initialValues?.transaction_type ?? 'increase',
note: initialValues?.note ?? '',
@@ -125,7 +85,7 @@ const InventoryAdjustmentForm = ({
// Formik
const formik = useFormik<InventoryAdjustmentFormValues>({
enableReinitialize: true,
initialValues: formikInitialValues,
initialValues: formikInitialValues as InventoryAdjustmentFormValues,
validationSchema: InventoryAdjustmentFormSchema,
onSubmit: async (values) => {
setInventoryAdjustmentFormErrorMessage('');
@@ -198,10 +158,7 @@ const InventoryAdjustmentForm = ({
setDisabledProduct(disabled);
if (disabled) {
formik.setFieldValue('product_id', 0);
formik.setFieldValue('product', {
value: 0,
label: '',
});
formik.setFieldValue('product', null);
}
};
@@ -219,6 +176,15 @@ const InventoryAdjustmentForm = ({
formik.setFieldValue('warehouse_id', (val as OptionType)?.value);
};
const resetHandler = () => {
formik.resetForm();
setQuantityLabel('Tambah Stok');
productCategoryChangeHandler(null);
productChangeHandler(null);
warehouseChangeHandler(null);
};
const { setValues: formikSetValues } = formik;
// Effect
@@ -228,28 +194,39 @@ const InventoryAdjustmentForm = ({
String(initialValues.product_warehouse.product.id)
);
setDisabledProduct(false);
formik.setFieldValue('product_id', initialValues.product_warehouse.product.id);
formik.setFieldValue(
'product_id',
initialValues.product_warehouse.product.id
);
formik.setFieldValue('product', {
value: initialValues.product_warehouse.product.id,
label: initialValues.product_warehouse.product.name,
});
formik.setFieldValue('warehouse_id', initialValues.product_warehouse.warehouse.id);
formik.setFieldValue(
'warehouse_id',
initialValues.product_warehouse.warehouse.id
);
formik.setFieldValue('warehouse', {
value: initialValues.product_warehouse.warehouse.id,
label: initialValues.product_warehouse.warehouse.name,
});
formik.setFieldValue('quantity', initialValues.product_warehouse.quantity);
formik.setFieldValue('transaction_type', initialValues.transaction_type.toLowerCase());
formik.setFieldValue(
'quantity',
initialValues.product_warehouse.quantity
);
formik.setFieldValue(
'transaction_type',
initialValues.transaction_type.toLowerCase()
);
formik.setFieldValue('note', initialValues.note);
}
if (initialValues?.transaction_type) {
const type = initialValues.transaction_type.toLowerCase();
setTransactionType(type);
setQuantityLabel(type === 'increase' ? 'Tambah Stok' : 'Kurangi Stok');
}
}, []);
}, [formik, initialValues, setQuantityLabel, setDisabledProduct, setSelectedProductCategories]);
useEffect(() => {
// formikSetValues(formikInitialValues);
formikSetValues(formikInitialValues as InventoryAdjustmentFormValues);
}, [formikSetValues, formikInitialValues]);
useEffect(() => {
if (isResponseSuccess(products)) {
@@ -284,8 +261,8 @@ const InventoryAdjustmentForm = ({
</Button>
<h1 className='text-2xl font-bold text-center'>
{type === 'add' && 'Tambah Stock Adjustment'}
{type === 'detail' && 'Detail Stock Adjustment'}
{type === 'add' && 'Tambah Penyesuaian Persediaan'}
{type === 'detail' && 'Detail Penyesuaian Persediaan'}
</h1>
</header>
@@ -386,6 +363,7 @@ const InventoryAdjustmentForm = ({
errorMessage={formik.errors.quantity as string}
readOnly={type === 'detail'}
/>
{/* Radio Button Flag Stock */}
<RadioInput
name='transaction_type'
@@ -397,7 +375,6 @@ const InventoryAdjustmentForm = ({
value={formik.values.transaction_type}
onChange={(e) => {
formik.handleChange(e);
// kamu juga bisa menambahkan efek tambahan
setQuantityLabel(
e.target.value === 'increase' ? 'Tambah Stok' : 'Kurangi Stok'
);
@@ -430,31 +407,31 @@ const InventoryAdjustmentForm = ({
<div className='flex flex-row justify-between gap-2 flex-wrap'>
{type !== 'detail' && (
<div className='flex flex-row justify-end gap-2'>
<Button type='reset' color='warning' className='px-4'>
<Button type='button' color='warning' className='px-4' onClick={resetHandler}>
Reset
</Button>
<Button
type='submit'
color='primary'
isLoading={formik.isSubmitting}
disabled={!formik.isValid || formik.isSubmitting}
disabled={!formik.isValid || formik.isSubmitting || formik.values.product == undefined}
className='px-4'
>
Submit
</Button>
</div>
)}
{InventoryAdjustmentFormErrorMessage && (
<div role='alert' className='alert alert-error'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{InventoryAdjustmentFormErrorMessage}</span>
</div>
)}
</div>
{InventoryAdjustmentFormErrorMessage && (
<div role='alert' className='alert alert-error'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{InventoryAdjustmentFormErrorMessage}</span>
</div>
)}
</form>
</section>
</>