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/US-34/TASK-52-53-slicing-ui-table-adjust-form-with-api

Browse Source
This commit is contained in:
randy-ar
2025-10-11 13:12:05 +07:00
parent aa7b6581d9
commit b75b5956eb
3 changed files with 151 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/inventory/adjustment/detail/page.tsx
+42 -5
View File
@@ -1,11 +1,48 @@
import InventoryAdjustmentForm from "@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm";
'use client';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import useSWR from 'swr';
import InventoryAdjustmentForm from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm';
import { inventoryAdjustmentApi } from '@/services/api/inventory';
import type { InventoryAdjustment } from '@/types/api/inventory/adjustment';
const DetailInventoryAdjustment = () => {
const router = useRouter();
const [inventoryAdjustment, setInventoryAdjustment] = useState<InventoryAdjustment | null>(null);
// Ambil data dari router state
useEffect(() => {
console.log("Router State");
console.log(window.history.state);
const state = window.history.state?.usr as
| { inventoryAdjustment?: InventoryAdjustment }
| undefined;
if (state?.inventoryAdjustment) {
// jika object dikirim via router.push(state)
setInventoryAdjustment(state.inventoryAdjustment);
}
}, [router]);
const finalData = inventoryAdjustment;
console.log("Final Data");
console.log(finalData);
if (!finalData) {
return (
<div className="w-full flex flex-row justify-center items-center p-4">
<span className="loading loading-spinner loading-xl" />
</div>
);
}
return (
<section>
<InventoryAdjustmentForm/>
<section className="w-full p-4 flex flex-row justify-center">
<InventoryAdjustmentForm initialValues={finalData} />
</section>
);
}
};
export default DetailInventoryAdjustment;
export default DetailInventoryAdjustment;
src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
+28 -30
View File
@@ -156,11 +156,9 @@ const InventoryAdjustmentTable = () => {
return (
<div
className={`small mx-auto badge badge-soft ${
type === 'INCREASE'
? 'badge-success'
: 'badge-error'
}`}
className={`small mx-auto badge badge-soft ${
type === 'INCREASE' ? 'badge-success' : 'badge-error'
}`}
>
{label}
</div>
@@ -172,33 +170,33 @@ const InventoryAdjustmentTable = () => {
header: 'Oleh',
accessorFn: (row) => row.created_user?.name ?? '-',
},
{
id: 'actions',
header: 'Aksi',
cell: (props) => {
const currentPageSize = props.table.getPaginationRowModel().rows.length;
const currentPageRows = props.table.getPaginationRowModel().flatRows;
const currentRowRelativeIndex =
currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
// {
// id: 'actions',
// header: 'Aksi',
// cell: (props) => {
// const currentPageSize = props.table.getPaginationRowModel().rows.length;
// const currentPageRows = props.table.getPaginationRowModel().flatRows;
// const currentRowRelativeIndex =
// currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
// const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
return (
<>
{currentPageSize > 2 && (
<RowDropdownOptions isLast2Rows={isLast2Rows}>
<RowOptionsMenu type='dropdown' props={props} />
</RowDropdownOptions>
)}
{currentPageSize <= 2 && (
<RowCollapseOptions>
<RowOptionsMenu type='dropdown' props={props} />
</RowCollapseOptions>
)}
</>
);
},
},
// return (
// <>
// {currentPageSize > 2 && (
// <RowDropdownOptions isLast2Rows={isLast2Rows}>
// <RowOptionsMenu type='dropdown' props={props} />
// </RowDropdownOptions>
// )}
// {currentPageSize <= 2 && (
// <RowCollapseOptions>
// <RowOptionsMenu type='dropdown' props={props} />
// </RowCollapseOptions>
// )}
// </>
// );
// },
// },
];
// Handler
src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
+81 -2
View File
@@ -31,6 +31,37 @@ 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,
@@ -45,7 +76,7 @@ const InventoryAdjustmentForm = ({
useState('');
const [disabledProduct, setDisabledProduct] = useState(true);
const [optionsProduct, setOptionsProduct] = useState<OptionType[]>([]);
const [quantityLabel, setQuantityLabel] = useState('Kurangi Stok');
const [quantityLabel, setQuantityLabel] = useState('Tambah Stok');
const [transactionType, setTransactionType] = useState('increment');
// Submit Handler
@@ -93,6 +124,7 @@ const InventoryAdjustmentForm = ({
// Formik
const formik = useFormik<InventoryAdjustmentFormValues>({
enableReinitialize: true,
initialValues: formikInitialValues,
validationSchema: InventoryAdjustmentFormSchema,
onSubmit: async (values) => {
@@ -191,7 +223,33 @@ const InventoryAdjustmentForm = ({
// Effect
useEffect(() => {
formikSetValues(formikInitialValues);
if (initialValues?.product_warehouse?.product?.id) {
setSelectedProductCategories(
String(initialValues.product_warehouse.product.id)
);
setDisabledProduct(false);
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', {
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('note', initialValues.note);
}
if (initialValues?.transaction_type) {
const type = initialValues.transaction_type.toLowerCase();
setTransactionType(type);
setQuantityLabel(type === 'increase' ? 'Tambah Stok' : 'Kurangi Stok');
}
}, []);
useEffect(() => {
// formikSetValues(formikInitialValues);
}, [formikSetValues, formikInitialValues]);
useEffect(() => {
if (isResponseSuccess(products)) {
@@ -237,6 +295,26 @@ const InventoryAdjustmentForm = ({
className='w-full mt-8 flex flex-col gap-6'
>
<div className='flex flex-col gap-4'>
{/* Text Input Before Quantity */}
{type === 'detail' && initialValues && (
<>
<TextInput
label='Stok Sebelum'
name='before_quantity'
type='text'
value={formatNumber(String(initialValues.before_quantity))}
readOnly={true}
/>
<TextInput
label='Stok Setelah'
name='after_quantity'
type='text'
readOnly={true}
value={formatNumber(String(initialValues.after_quantity))}
/>
</>
)}
{/* Select Input Product Category */}
<SelectInput
required
@@ -333,6 +411,7 @@ const InventoryAdjustmentForm = ({
variant='radio-primary'
required
bottomLabel='Pilih salah satu tipe transaksi'
disabled={type === 'detail'}
/>
{/* Text Area Input Reason */}