diff --git a/src/components/pages/finance/FinanceTable.tsx b/src/components/pages/finance/FinanceTable.tsx index 2d43d273..227c3731 100644 --- a/src/components/pages/finance/FinanceTable.tsx +++ b/src/components/pages/finance/FinanceTable.tsx @@ -1,21 +1,17 @@ import { ChangeEventHandler, useMemo, useState } from 'react'; -import { CellContext, Row } from '@tanstack/react-table'; +import { CellContext } from '@tanstack/react-table'; import { useSearchParams } from 'next/navigation'; import useSWR from 'swr'; import Button from '@/components/Button'; import Card from '@/components/Card'; -import Dropdown from '@/components/dropdown/Dropdown'; import DateInput from '@/components/input/DateInput'; import DebouncedTextInput from '@/components/input/DebouncedTextInput'; import SelectInput, { OptionType, useSelect, } from '@/components/input/SelectInput'; -import Menu from '@/components/menu/Menu'; -import MenuItem from '@/components/menu/MenuItem'; import Table from '@/components/Table'; -import Tooltip from '@/components/Tooltip'; import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; import { Finance } from '@/types/api/finance/finance'; @@ -23,11 +19,10 @@ import { FINANCE_INITIAL_BALANCE_STATUS, FINANCE_INJECTION_STATUS, FINANCE_TRANSACTION_STATUS, - ROWS_OPTIONS, } from '@/config/constant'; import { FinanceApi } from '@/services/api/finance'; import { isResponseSuccess } from '@/lib/api-helper'; -import { BankApi, CustomerApi, SupplierApi } from '@/services/api/master-data'; +import { BankApi } from '@/services/api/master-data'; import { Bank } from '@/types/api/master-data/bank'; import { useModal } from '@/components/Modal'; import ConfirmationModal from '@/components/modal/ConfirmationModal'; @@ -219,15 +214,12 @@ const FinanceTable = () => { { label: 'Tanggal Dibuat', value: 'created_at' }, ]; }, []); - const { options: bankOptions, rawData: bankRawData } = useSelect( - BankApi.basePath, - 'id', - 'alias', - '', - { - limit: 'limit', - } - ); + const { + options: bankOptions, + rawData: bankRawData, + setInputValue: bankInputValue, + loadMore: bankLoadMore, + } = useSelect(BankApi.basePath, 'id', 'alias'); // ===== Handler ===== const searchChangeHandler: ChangeEventHandler = (e) => { @@ -501,6 +493,8 @@ const FinanceTable = () => { label='Bank' value={selectedBank} onChange={bankChangeHandler} + onInputChange={bankInputValue} + onMenuScrollToBottom={bankLoadMore} isClearable /> ( formik.values.party_type_option?.value === 'CUSTOMER' ? CustomerApi.basePath : SupplierApi.basePath, 'id', - 'name', - '', - { limit: 'limit' } + 'name' ); const { options: bankOptions, rawData: bankRawData, isLoadingOptions: isLoadingBankOptions, - } = useSelect(BankApi.basePath, 'id', 'name', '', { limit: 'limit' }); + setInputValue: setBankInputValue, + loadMore: loadMoreBankOptions, + } = useSelect(BankApi.basePath, 'id', 'name'); // ===== Helper Functions ===== const transformFormValuesToPayload = ( @@ -219,6 +221,8 @@ const FormFinanceAdd = ({ placeholder={`Pilih ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'jenis transaksi dahulu'}`} options={partyOptions} value={formik.values.party_id_option} + onInputChange={setPartyInputValue} + onMenuScrollToBottom={loadMorePartyOptions} onChange={(value) => { formik.setFieldValue('party_id_option', value); if (isResponseSuccess(partyRawData) && value) { @@ -304,6 +308,8 @@ const FormFinanceAdd = ({ : [] } value={formik.values.bank_id_option} + onInputChange={setBankInputValue} + onMenuScrollToBottom={loadMoreBankOptions} onChange={(value) => { formik.setFieldValue('bank_id_option', value); }} diff --git a/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx b/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx index 85b63ac3..7bcdbccf 100644 --- a/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx +++ b/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx @@ -104,21 +104,25 @@ const FormFinanceAddInitialBalance = ({ }); // ===== Options ===== - const { options: partyOptions, isLoadingOptions: isLoadingPartyOptions } = - useSelect( - formik.values.party_type_option?.value === 'CUSTOMER' - ? CustomerApi.basePath - : SupplierApi.basePath, - 'id', - 'name', - '', - { limit: 'limit' } - ); + const { + options: partyOptions, + isLoadingOptions: isLoadingPartyOptions, + setInputValue: setPartyInputValue, + loadMore: loadMorePartyOptions, + } = useSelect( + formik.values.party_type_option?.value === 'CUSTOMER' + ? CustomerApi.basePath + : SupplierApi.basePath, + 'id', + 'name' + ); const { options: bankOptions, rawData: bankRawData, isLoadingOptions: isLoadingBankOptions, - } = useSelect(BankApi.basePath, 'id', 'name', '', { limit: 'limit' }); + setInputValue: setBankInputValue, + loadMore: loadMoreBankOptions, + } = useSelect(BankApi.basePath, 'id', 'name'); // ===== Helper Functions ===== const transformFormValuesToPayload = ( @@ -189,6 +193,8 @@ const FormFinanceAddInitialBalance = ({ placeholder='Pilih jenis pihak' options={FINANCE_PARTY_TYPE_OPTIONS} value={formik.values.party_type_option} + onInputChange={setPartyInputValue} + onMenuScrollToBottom={loadMorePartyOptions} onChange={(value) => { formik.setFieldValue('party_type_option', value); formik.setFieldValue('party_id_option', null); @@ -218,6 +224,8 @@ const FormFinanceAddInitialBalance = ({ placeholder={`Pilih ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'jenis pihak dahulu'}`} options={partyOptions} value={formik.values.party_id_option} + onInputChange={setPartyInputValue} + onMenuScrollToBottom={loadMorePartyOptions} onChange={(value) => { formik.setFieldValue('party_id_option', value); }} diff --git a/src/components/pages/finance/add/injection/FormFinanceInjection.tsx b/src/components/pages/finance/add/injection/FormFinanceInjection.tsx index 4ddd282c..22663f75 100644 --- a/src/components/pages/finance/add/injection/FormFinanceInjection.tsx +++ b/src/components/pages/finance/add/injection/FormFinanceInjection.tsx @@ -80,7 +80,9 @@ const FormFinanceInjection = ({ options: bankOptions, rawData: bankRawData, isLoadingOptions: isLoadingBankOptions, - } = useSelect(BankApi.basePath, 'id', 'name', '', { limit: 'limit' }); + setInputValue: setBankInputValue, + loadMore: loadMoreBankOptions, + } = useSelect(BankApi.basePath, 'id', 'name'); // ===== Helper Functions ===== const transformFormValuesToPayload = ( @@ -162,6 +164,8 @@ const FormFinanceInjection = ({ : [] } value={formik.values.bank_id_option} + onInputChange={setBankInputValue} + onMenuScrollToBottom={loadMoreBankOptions} onChange={(value) => { formik.setFieldValue('bank_id_option', value); }} diff --git a/src/components/pages/marketing/MarketingTable.tsx b/src/components/pages/marketing/MarketingTable.tsx index 1c37dbbb..467c2e00 100644 --- a/src/components/pages/marketing/MarketingTable.tsx +++ b/src/components/pages/marketing/MarketingTable.tsx @@ -184,12 +184,16 @@ const MarketingTable = () => { const { options: productsOptions, isLoadingOptions: isLoadingProductsOptions, + setInputValue: setProductsInputValue, + loadMore: loadMoreProducts, } = useSelect(ProductApi.basePath, 'id', 'name', '', { limit: 'limit', }); const { options: customersOptions, isLoadingOptions: isLoadingCustomersOptions, + setInputValue: setCustomersInputValue, + loadMore: loadMoreCustomers, } = useSelect(CustomerApi.basePath, 'id', 'name', '', { limit: 'limit', }); @@ -400,6 +404,8 @@ const MarketingTable = () => { .join(',') || '' ) } + onInputChange={setProductsInputValue} + onMenuScrollToBottom={loadMoreProducts} isMulti /> {/* select status */} @@ -444,6 +450,8 @@ const MarketingTable = () => { (value as OptionType)?.value.toString() || '' ) } + onInputChange={setCustomersInputValue} + onMenuScrollToBottom={loadMoreCustomers} /> diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx index 5ca0e789..6b935812 100644 --- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx +++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx @@ -5,7 +5,10 @@ import Button from '@/components/Button'; import FloatingActionsButton from '@/components/FloatingActionsButton'; import CheckboxInput from '@/components/input/CheckboxInput'; import DebouncedTextInput from '@/components/input/DebouncedTextInput'; -import SelectInput, { OptionType } from '@/components/input/SelectInput'; +import SelectInput, { + OptionType, + useSelect, +} from '@/components/input/SelectInput'; import { useModal } from '@/components/Modal'; import ConfirmationModal from '@/components/modal/ConfirmationModal'; import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes'; @@ -59,9 +62,6 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => { const selectedRowIds = Object.keys(rowSelection) .filter((id) => rowSelection[id]) .map((id) => parseInt(id)); - const [locationSelectInputValue, setLocationSelectInputValue] = useState(''); - const [areaSelectInputValue, setAreaSelectInputValue] = useState(''); - const [kandangSelectInputValue, setKandangSelectInputValue] = useState(''); const [selectedArea, setSelectedArea] = useState(null); const [selectedLocation, setSelectedLocation] = useState( null @@ -90,55 +90,25 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => { { revalidateOnMount: true } ); - const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({ - search: areaSelectInputValue, - limit: '100', - }).toString()}`; - const { data: areas, isLoading: isLoadingAreas } = useSWR( - areaUrl, - AreaApi.getAllFetcher - ); - - const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({ - search: locationSelectInputValue, - area_id: selectedArea != null ? selectedArea.value.toString() : '', - limit: '100', - }).toString()}`; - const { data: locations, isLoading: isLoadingLocations } = useSWR( - locationUrl, - LocationApi.getAllFetcher - ); - - const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({ - search: kandangSelectInputValue, - location_id: - selectedLocation != null ? selectedLocation.value.toString() : '', - limit: '100', - }).toString()}`; - const { data: kandangs, isLoading: isLoadingKandang } = useSWR( - kandangUrl, - KandangApi.getAllFetcher - ); - - // ===== Data to Options Mapping ====== - const optionsArea = isResponseSuccess(areas) - ? areas?.data.map((area) => ({ - value: area.id, - label: area.name, - })) - : []; - const optionsKandang = isResponseSuccess(kandangs) - ? kandangs?.data.map((kandang) => ({ - value: kandang.id, - label: kandang.name, - })) - : []; - const optionsLocation = isResponseSuccess(locations) - ? locations?.data.map((location) => ({ - value: location.id, - label: location.name, - })) - : []; + // ===== Fetch Data Select ===== + const { + options: optionsArea, + isLoadingOptions: isLoadingArea, + setInputValue: setAreaSelectInputValue, + loadMore: loadMoreArea, + } = useSelect(AreaApi.basePath, 'id', 'name'); + const { + options: optionsLocation, + isLoadingOptions: isLoadingLocation, + setInputValue: setLocationSelectInputValue, + loadMore: loadMoreLocation, + } = useSelect(LocationApi.basePath, 'id', 'name'); + const { + options: optionsKandang, + isLoadingOptions: isLoadingKandang, + setInputValue: setKandangSelectInputValue, + loadMore: loadMoreKandang, + } = useSelect(KandangApi.basePath, 'id', 'name'); // ====== HANDLER ====== const confirmationModalDeleteClickHandler = async () => { @@ -385,7 +355,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => { { setSelectedArea(val as OptionType); @@ -395,12 +365,13 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => { ); }} onInputChange={setAreaSelectInputValue} + onMenuScrollToBottom={loadMoreArea} isClearable /> { setSelectedLocation(val as OptionType); @@ -410,6 +381,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => { ); }} onInputChange={setLocationSelectInputValue} + onMenuScrollToBottom={loadMoreLocation} isClearable /> void }) => { ); }} onInputChange={setKandangSelectInputValue} + onMenuScrollToBottom={loadMoreKandang} isClearable />