mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 23:35:45 +00:00
fix: persist purchase table and set initial value to PurchaseFilterModal
This commit is contained in:
ValdiANS
@@ -1,17 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import axios from 'axios';
|
||||
import {
|
||||
ChangeEventHandler,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useUiStore } from '@/stores/ui/ui.store';
|
||||
import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import useSWRInfinite from 'swr/infinite';
|
||||
import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
@@ -31,17 +21,34 @@ import PurchaseTableSkeleton from '@/components/pages/purchase/skeleton/Purchase
|
||||
import ButtonFilter from '@/components/helper/ButtonFilter';
|
||||
import PurchaseFilterModal from '@/components/pages/purchase/PurchaseFilterModal';
|
||||
import Dropdown from '@/components/dropdown/Dropdown';
|
||||
import { OptionType } from '@/components/input/SelectInput';
|
||||
|
||||
import { cn, formatDate } from '@/lib/helper';
|
||||
import { getErrorMessage, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { BaseApiResponse } from '@/types/api/api-general';
|
||||
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { Purchase, PurchaseFilter } from '@/types/api/purchase/purchase';
|
||||
import { PurchaseApi } from '@/services/api/purchase';
|
||||
import { ExpenseApi } from '@/services/api/expense';
|
||||
import { Expense } from '@/types/api/expense';
|
||||
import { Color } from '@/types/theme';
|
||||
import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
|
||||
|
||||
type PurchaseTableFilters = {
|
||||
search: string;
|
||||
po_date: string;
|
||||
approval_status: string;
|
||||
product_category_id: string;
|
||||
product_category_name: string;
|
||||
supplier_id: string;
|
||||
supplier_name: string;
|
||||
area_id: string;
|
||||
area_name: string;
|
||||
location_id: string;
|
||||
location_name: string;
|
||||
project_flock_id: string;
|
||||
project_flock_name: string;
|
||||
project_flock_kandang_id: string;
|
||||
project_flock_kandang_name: string;
|
||||
};
|
||||
|
||||
// ===== STATUS BADGE UTILITIES =====
|
||||
const statusTextMap: Record<string, string> = {
|
||||
@@ -150,9 +157,6 @@ const RowOptionsMenu = ({
|
||||
};
|
||||
|
||||
const PurchaseTable = () => {
|
||||
const { searchValue, setSearchValue, setTableState } = useUiStore();
|
||||
const pathname = usePathname();
|
||||
|
||||
// ===== STATE MANAGEMENT =====
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
|
||||
@@ -168,21 +172,28 @@ const PurchaseTable = () => {
|
||||
// ===== TABLE FILTER STATE =====
|
||||
const {
|
||||
state: tableFilterState,
|
||||
setFilters,
|
||||
updateFilter,
|
||||
setPage,
|
||||
setPageSize,
|
||||
toQueryString: getTableFilterQueryString,
|
||||
} = useTableFilter({
|
||||
} = useTableFilter<PurchaseTableFilters>({
|
||||
initial: {
|
||||
search: '',
|
||||
po_date: '',
|
||||
approval_status: '',
|
||||
product_category_id: '',
|
||||
product_category_name: '',
|
||||
supplier_id: '',
|
||||
supplier_name: '',
|
||||
area_id: '',
|
||||
area_name: '',
|
||||
location_id: '',
|
||||
location_name: '',
|
||||
project_flock_id: '',
|
||||
project_flock_name: '',
|
||||
project_flock_kandang_id: '',
|
||||
project_flock_kandang_name: '',
|
||||
},
|
||||
paramMap: {
|
||||
page: 'page',
|
||||
@@ -196,6 +207,16 @@ const PurchaseTable = () => {
|
||||
project_flock_id: 'project_flock_id',
|
||||
project_flock_kandang_id: 'project_flock_kandang_id',
|
||||
},
|
||||
excludeKeysFromUrl: [
|
||||
'product_category_name',
|
||||
'supplier_name',
|
||||
'area_name',
|
||||
'location_name',
|
||||
'project_flock_name',
|
||||
'project_flock_kandang_name',
|
||||
],
|
||||
persist: true,
|
||||
storeName: 'purchase-table',
|
||||
});
|
||||
|
||||
// ===== MODAL HOOKS =====
|
||||
@@ -213,33 +234,6 @@ const PurchaseTable = () => {
|
||||
PurchaseApi.getAllFetcher
|
||||
);
|
||||
|
||||
const getKey = (
|
||||
pageIndex: number,
|
||||
previousPageData: BaseApiResponse<Expense>[] | null
|
||||
) => {
|
||||
if (pageIndex > 0 && !previousPageData) return null;
|
||||
return `${ExpenseApi.basePath}?page=${pageIndex + 1}&limit=100`;
|
||||
};
|
||||
|
||||
const { data: expensesPages } = useSWRInfinite(
|
||||
getKey,
|
||||
ExpenseApi.getAllFetcher
|
||||
);
|
||||
|
||||
const expenseMap = useMemo(() => {
|
||||
const map = new Map<string, number>();
|
||||
if (!expensesPages) return map;
|
||||
|
||||
expensesPages.forEach((page) => {
|
||||
if (isResponseSuccess(page)) {
|
||||
page.data.forEach((expense: Expense) => {
|
||||
map.set(expense.reference_number, expense.id);
|
||||
});
|
||||
}
|
||||
});
|
||||
return map;
|
||||
}, [expensesPages]);
|
||||
|
||||
// ===== TABLE COLUMNS DEFINITION =====
|
||||
const purchaseColumns: ColumnDef<Purchase>[] = [
|
||||
{
|
||||
@@ -258,20 +252,16 @@ const PurchaseTable = () => {
|
||||
return (
|
||||
<ul className='list-disc pl-4'>
|
||||
{poExpedition.map((exp, index) => {
|
||||
const expenseId = expenseMap.get(exp.refrence);
|
||||
if (expenseId) {
|
||||
return (
|
||||
<li key={index}>
|
||||
<Link
|
||||
href={`/expense/detail/?expenseId=${expenseId}`}
|
||||
className='p-0 h-auto text-primary underline'
|
||||
>
|
||||
{exp.refrence}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return <li key={index}>{exp.refrence}</li>;
|
||||
return (
|
||||
<li key={index}>
|
||||
<Link
|
||||
href={`/expense/detail/?expenseId=${exp.id}`}
|
||||
className='p-0 h-auto text-primary underline'
|
||||
>
|
||||
{exp.refrence}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
@@ -422,58 +412,127 @@ const PurchaseTable = () => {
|
||||
setIsDeleteLoading(false);
|
||||
}, [selectedPurchase?.id, refreshPurchaseRequests, deleteModal]);
|
||||
|
||||
useEffect(() => {
|
||||
updateFilter('search', searchValue);
|
||||
}, [searchValue, updateFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
setTableState('purchase-table', pathname);
|
||||
}, [pathname, setTableState]);
|
||||
|
||||
const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = useCallback(
|
||||
(e) => {
|
||||
setSearchValue(e.target.value);
|
||||
updateFilter('search', e.target.value);
|
||||
},
|
||||
[updateFilter, setSearchValue]
|
||||
[updateFilter]
|
||||
);
|
||||
|
||||
const filterSubmitHandler = (values: PurchaseFilter) => {
|
||||
updateFilter('po_date', values.poDate);
|
||||
updateFilter('product_category_id', values.category.join(','));
|
||||
updateFilter('approval_status', values.status.join(','));
|
||||
updateFilter(
|
||||
'supplier_id',
|
||||
values.supplier_id ? String(values.supplier_id) : ''
|
||||
);
|
||||
updateFilter('area_id', values.area_id ? String(values.area_id) : '');
|
||||
updateFilter(
|
||||
'location_id',
|
||||
values.location_id ? String(values.location_id) : ''
|
||||
);
|
||||
updateFilter(
|
||||
'project_flock_id',
|
||||
values.project_flock_id ? String(values.project_flock_id) : ''
|
||||
);
|
||||
updateFilter(
|
||||
'project_flock_kandang_id',
|
||||
values.project_flock_kandang_id
|
||||
setFilters({
|
||||
po_date: values.poDate,
|
||||
product_category_id: values.category.join(','),
|
||||
product_category_name:
|
||||
values.category_labels?.map((item) => item.label).join(',') || '',
|
||||
approval_status: values.status.join(','),
|
||||
supplier_id: values.supplier_id ? String(values.supplier_id) : '',
|
||||
supplier_name: values.supplier_label || '',
|
||||
area_id: values.area_id ? String(values.area_id) : '',
|
||||
area_name: values.area_label || '',
|
||||
location_id: values.location_id ? String(values.location_id) : '',
|
||||
location_name: values.location_label || '',
|
||||
project_flock_id: values.project_flock_id
|
||||
? String(values.project_flock_id)
|
||||
: '',
|
||||
project_flock_name: values.project_flock_label || '',
|
||||
project_flock_kandang_id: values.project_flock_kandang_id
|
||||
? String(values.project_flock_kandang_id)
|
||||
: ''
|
||||
);
|
||||
: '',
|
||||
project_flock_kandang_name: values.project_flock_kandang_label || '',
|
||||
});
|
||||
};
|
||||
|
||||
const filterResetHandler = () => {
|
||||
updateFilter('po_date', '');
|
||||
updateFilter('product_category_id', '');
|
||||
updateFilter('approval_status', '');
|
||||
updateFilter('supplier_id', '');
|
||||
updateFilter('area_id', '');
|
||||
updateFilter('location_id', '');
|
||||
updateFilter('project_flock_id', '');
|
||||
updateFilter('project_flock_kandang_id', '');
|
||||
setFilters({
|
||||
po_date: '',
|
||||
product_category_id: '',
|
||||
product_category_name: '',
|
||||
approval_status: '',
|
||||
supplier_id: '',
|
||||
supplier_name: '',
|
||||
area_id: '',
|
||||
area_name: '',
|
||||
location_id: '',
|
||||
location_name: '',
|
||||
project_flock_id: '',
|
||||
project_flock_name: '',
|
||||
project_flock_kandang_id: '',
|
||||
project_flock_kandang_name: '',
|
||||
});
|
||||
};
|
||||
|
||||
const purchaseFilterInitialValues = useMemo(() => {
|
||||
const categoryIds = tableFilterState.product_category_id
|
||||
? tableFilterState.product_category_id
|
||||
.split(',')
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
const categoryLabels = tableFilterState.product_category_name
|
||||
? tableFilterState.product_category_name
|
||||
.split(',')
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
const approvalStatuses = tableFilterState.approval_status
|
||||
? tableFilterState.approval_status
|
||||
.split(',')
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
|
||||
return {
|
||||
poDate: tableFilterState.po_date,
|
||||
category: categoryIds.map((value, index) => ({
|
||||
value: Number(value),
|
||||
label: categoryLabels[index] || value,
|
||||
})),
|
||||
status: approvalStatuses.map((value) => ({
|
||||
value,
|
||||
label:
|
||||
PURCHASE_ORDER_APPROVAL_LINE.find((item) => item.step_name === value)
|
||||
?.step_name || value,
|
||||
})),
|
||||
supplier: tableFilterState.supplier_id
|
||||
? ({
|
||||
value: Number(tableFilterState.supplier_id),
|
||||
label:
|
||||
tableFilterState.supplier_name || tableFilterState.supplier_id,
|
||||
} as OptionType<number>)
|
||||
: null,
|
||||
area: tableFilterState.area_id
|
||||
? ({
|
||||
value: Number(tableFilterState.area_id),
|
||||
label: tableFilterState.area_name || tableFilterState.area_id,
|
||||
} as OptionType<number>)
|
||||
: null,
|
||||
location: tableFilterState.location_id
|
||||
? ({
|
||||
value: Number(tableFilterState.location_id),
|
||||
label:
|
||||
tableFilterState.location_name || tableFilterState.location_id,
|
||||
} as OptionType<number>)
|
||||
: null,
|
||||
project_flock: tableFilterState.project_flock_id
|
||||
? ({
|
||||
value: Number(tableFilterState.project_flock_id),
|
||||
label:
|
||||
tableFilterState.project_flock_name ||
|
||||
tableFilterState.project_flock_id,
|
||||
} as OptionType<number>)
|
||||
: null,
|
||||
project_flock_kandang: tableFilterState.project_flock_kandang_id
|
||||
? ({
|
||||
value: Number(tableFilterState.project_flock_kandang_id),
|
||||
label:
|
||||
tableFilterState.project_flock_kandang_name ||
|
||||
tableFilterState.project_flock_kandang_id,
|
||||
} as OptionType<number>)
|
||||
: null,
|
||||
};
|
||||
}, [tableFilterState]);
|
||||
|
||||
const exportToExcel = useCallback(async () => {
|
||||
setIsLoadingExportingToExcel(true);
|
||||
|
||||
@@ -705,6 +764,7 @@ const PurchaseTable = () => {
|
||||
|
||||
<PurchaseFilterModal
|
||||
ref={filterModal.ref}
|
||||
initialValues={purchaseFilterInitialValues}
|
||||
onSubmit={filterSubmitHandler}
|
||||
onReset={filterResetHandler}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user