Merge branch 'fix/finance-select-input' into 'development'

[FIX/FE] Implement Lazy Loading Select Input

See merge request mbugroup/lti-web-client!191

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<Bank>(
+  const {
-    BankApi.basePath,
+    options: bankOptions,
-    'id',
+    rawData: bankRawData,
-    'alias',
+    setInputValue: bankInputValue,
-    '',
+    loadMore: bankLoadMore,
-    {
+  } = useSelect<Bank>(BankApi.basePath, 'id', 'alias');
-      limit: 'limit',
-    }
-  );
 
   // ===== Handler =====
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
@@ -501,6 +493,8 @@ const FinanceTable = () => {
             label='Bank'
             value={selectedBank}
             onChange={bankChangeHandler}
+            onInputChange={bankInputValue}
+            onMenuScrollToBottom={bankLoadMore}
             isClearable
           />
           <SelectInput

src/components/pages/finance/add/FormFinanceAdd.tsx

@@ -113,20 +113,22 @@ const FormFinanceAdd = ({
     options: partyOptions,
     isLoadingOptions: isLoadingPartyOptions,
     rawData: partyRawData,
+    setInputValue: setPartyInputValue,
+    loadMore: loadMorePartyOptions,
   } = useSelect<PartyCommonProps>(
     formik.values.party_type_option?.value === 'CUSTOMER'
       ? CustomerApi.basePath
       : SupplierApi.basePath,
     'id',
-    'name',
+    'name'
-    '',
-    { limit: 'limit' }
   );
   const {
     options: bankOptions,
     rawData: bankRawData,
     isLoadingOptions: isLoadingBankOptions,
-  } = useSelect<Bank>(BankApi.basePath, 'id', 'name', '', { limit: 'limit' });
+    setInputValue: setBankInputValue,
+    loadMore: loadMoreBankOptions,
+  } = useSelect<Bank>(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);
               }}

src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx

@@ -104,21 +104,25 @@ const FormFinanceAddInitialBalance = ({
   });
 
   // ===== Options =====
-  const { options: partyOptions, isLoadingOptions: isLoadingPartyOptions } =
+  const {
-    useSelect(
+    options: partyOptions,
-      formik.values.party_type_option?.value === 'CUSTOMER'
+    isLoadingOptions: isLoadingPartyOptions,
-        ? CustomerApi.basePath
+    setInputValue: setPartyInputValue,
-        : SupplierApi.basePath,
+    loadMore: loadMorePartyOptions,
-      'id',
+  } = useSelect(
-      'name',
+    formik.values.party_type_option?.value === 'CUSTOMER'
-      '',
+      ? CustomerApi.basePath
-      { limit: 'limit' }
+      : SupplierApi.basePath,
-    );
+    'id',
+    'name'
+  );
   const {
     options: bankOptions,
     rawData: bankRawData,
     isLoadingOptions: isLoadingBankOptions,
-  } = useSelect<Bank>(BankApi.basePath, 'id', 'name', '', { limit: 'limit' });
+    setInputValue: setBankInputValue,
+    loadMore: loadMoreBankOptions,
+  } = useSelect<Bank>(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);
               }}

src/components/pages/finance/add/injection/FormFinanceInjection.tsx

@@ -80,7 +80,9 @@ const FormFinanceInjection = ({
     options: bankOptions,
     rawData: bankRawData,
     isLoadingOptions: isLoadingBankOptions,
-  } = useSelect<Bank>(BankApi.basePath, 'id', 'name', '', { limit: 'limit' });
+    setInputValue: setBankInputValue,
+    loadMore: loadMoreBankOptions,
+  } = useSelect<Bank>(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);
               }}

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}
             />
           </TableRowSizeSelector>
         </div>

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<OptionType | null>(null);
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
     null
@@ -90,55 +90,25 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     { revalidateOnMount: true }
   );
 
-  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
+  // ===== Fetch Data Select =====
-    search: areaSelectInputValue,
+  const {
-    limit: '100',
+    options: optionsArea,
-  }).toString()}`;
+    isLoadingOptions: isLoadingArea,
-  const { data: areas, isLoading: isLoadingAreas } = useSWR(
+    setInputValue: setAreaSelectInputValue,
-    areaUrl,
+    loadMore: loadMoreArea,
-    AreaApi.getAllFetcher
+  } = useSelect(AreaApi.basePath, 'id', 'name');
-  );
+  const {
-
+    options: optionsLocation,
-  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
+    isLoadingOptions: isLoadingLocation,
-    search: locationSelectInputValue,
+    setInputValue: setLocationSelectInputValue,
-    area_id: selectedArea != null ? selectedArea.value.toString() : '',
+    loadMore: loadMoreLocation,
-    limit: '100',
+  } = useSelect(LocationApi.basePath, 'id', 'name');
-  }).toString()}`;
+  const {
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
+    options: optionsKandang,
-    locationUrl,
+    isLoadingOptions: isLoadingKandang,
-    LocationApi.getAllFetcher
+    setInputValue: setKandangSelectInputValue,
-  );
+    loadMore: loadMoreKandang,
-
+  } = useSelect(KandangApi.basePath, 'id', 'name');
-  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,
-      }))
-    : [];
 
   // ====== HANDLER ======
   const confirmationModalDeleteClickHandler = async () => {
@@ -385,7 +355,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               <SelectInput
                 label='Area'
                 options={optionsArea}
-                isLoading={isLoadingAreas}
+                isLoading={isLoadingArea}
                 value={selectedArea}
                 onChange={(val) => {
                   setSelectedArea(val as OptionType);
@@ -395,12 +365,13 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                   );
                 }}
                 onInputChange={setAreaSelectInputValue}
+                onMenuScrollToBottom={loadMoreArea}
                 isClearable
               />
               <SelectInput
                 label='Lokasi'
                 options={optionsLocation}
-                isLoading={isLoadingLocations}
+                isLoading={isLoadingLocation}
                 value={selectedLocation}
                 onChange={(val) => {
                   setSelectedLocation(val as OptionType);
@@ -410,6 +381,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                   );
                 }}
                 onInputChange={setLocationSelectInputValue}
+                onMenuScrollToBottom={loadMoreLocation}
                 isClearable
               />
               <SelectInput
@@ -425,6 +397,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                   );
                 }}
                 onInputChange={setKandangSelectInputValue}
+                onMenuScrollToBottom={loadMoreKandang}
                 isClearable
               />
               <DebouncedTextInput