fix(FE): fixing submit button disable and implement store search filter

This commit is contained in:
randy-ar
2026-01-23 10:30:50 +07:00
parent c2272ee5e0
commit 52a18dac24
4 changed files with 38 additions and 6 deletions
+35 -3
View File
@@ -1,4 +1,10 @@
import { ChangeEventHandler, useMemo, useState } from 'react'; import {
ChangeEventHandler,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { CellContext } from '@tanstack/react-table'; import { CellContext } from '@tanstack/react-table';
import { useSearchParams } from 'next/navigation'; import { useSearchParams } from 'next/navigation';
import useSWR from 'swr'; import useSWR from 'swr';
@@ -33,6 +39,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
import { Icon } from '@iconify/react'; import { Icon } from '@iconify/react';
import RowDropdownOptions from '@/components/table/RowDropdownOptions'; import RowDropdownOptions from '@/components/table/RowDropdownOptions';
import RowCollapseOptions from '@/components/table/RowCollapseOptions'; import RowCollapseOptions from '@/components/table/RowCollapseOptions';
import { useUiStore } from '@/stores/ui/ui.store';
const RowOptionsMenu = ({ const RowOptionsMenu = ({
type = 'dropdown', type = 'dropdown',
@@ -133,6 +140,9 @@ const RowOptionsMenu = ({
}; };
const FinanceTable = () => { const FinanceTable = () => {
const { searchValue, setSearchValue, resetSearchValue } = useUiStore();
const previousPathRef = useRef<string | null>(null);
const { const {
state: tableFilterState, state: tableFilterState,
updateFilter, updateFilter,
@@ -141,7 +151,7 @@ const FinanceTable = () => {
toQueryString: getTableFilterQueryString, toQueryString: getTableFilterQueryString,
} = useTableFilter({ } = useTableFilter({
initial: { initial: {
search: '', search: searchValue,
transactionType: '', transactionType: '',
bankId: '', bankId: '',
customerId: '', customerId: '',
@@ -167,7 +177,7 @@ const FinanceTable = () => {
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const deleteModal = useModal(); const deleteModal = useModal();
const [pendingFilters, setPendingFilters] = useState({ const [pendingFilters, setPendingFilters] = useState({
search: '', search: searchValue,
transactionType: '', transactionType: '',
bankId: '', bankId: '',
customerId: '', customerId: '',
@@ -296,6 +306,7 @@ const FinanceTable = () => {
}; };
const submitFilterHandler = () => { const submitFilterHandler = () => {
updateFilter('search', pendingFilters.search); updateFilter('search', pendingFilters.search);
setSearchValue(pendingFilters.search);
updateFilter('transactionType', pendingFilters.transactionType); updateFilter('transactionType', pendingFilters.transactionType);
updateFilter('bankId', pendingFilters.bankId); updateFilter('bankId', pendingFilters.bankId);
updateFilter('customerId', pendingFilters.customerId); updateFilter('customerId', pendingFilters.customerId);
@@ -324,6 +335,7 @@ const FinanceTable = () => {
setPendingFilters(emptyFilters); setPendingFilters(emptyFilters);
updateFilter('search', ''); updateFilter('search', '');
resetSearchValue();
updateFilter('transactionType', ''); updateFilter('transactionType', '');
updateFilter('bankId', ''); updateFilter('bankId', '');
updateFilter('customerId', ''); updateFilter('customerId', '');
@@ -447,6 +459,26 @@ const FinanceTable = () => {
}, },
]; ];
}, []); }, []);
useEffect(() => {
// Store current path on mount
previousPathRef.current = window.location.pathname;
return () => {
const currentPath = window.location.pathname;
// if both paths are within /finance module
const isCurrentPathFinance = currentPath.includes('/finance');
const isPreviousPathFinance =
previousPathRef.current?.includes('/finance');
// reset if we outside finance module entirely
if (isPreviousPathFinance && !isCurrentPathFinance) {
resetSearchValue();
}
};
}, [resetSearchValue]);
return ( return (
<section className='size-full p-6 flex flex-col gap-6'> <section className='size-full p-6 flex flex-col gap-6'>
<div className='flex justify-end gap-2'> <div className='flex justify-end gap-2'>
@@ -427,7 +427,7 @@ const FormFinanceAdd = ({
<Button <Button
type='submit' type='submit'
className='w-min-24' className='w-min-24'
disabled={formik.isSubmitting || !formik.isValid} disabled={formik.isSubmitting}
> >
Submit Submit
</Button> </Button>
@@ -396,7 +396,7 @@ const FormFinanceAddInitialBalance = ({
<Button <Button
type='submit' type='submit'
className='w-min-24' className='w-min-24'
disabled={formik.isSubmitting || !formik.isValid} disabled={formik.isSubmitting}
> >
Submit Submit
</Button> </Button>
@@ -257,7 +257,7 @@ const FormFinanceInjection = ({
<Button <Button
type='submit' type='submit'
className='w-min-24' className='w-min-24'
disabled={formik.isSubmitting || !formik.isValid} disabled={formik.isSubmitting}
> >
Submit Submit
</Button> </Button>