diff --git a/src/api/config.ts b/src/api/config.ts index e074658..f21fd1a 100644 --- a/src/api/config.ts +++ b/src/api/config.ts @@ -264,6 +264,6 @@ export const HIDDEN_FORM_FIELDS = [ 'store_code_3', ]; -export const SELECT_OPTION_LIMIT = 500; +export const SELECT_OPTION_LIMIT = 200; export const PDF_MAX_SKUS_PER_CHUNK = 20; diff --git a/src/components/forms/LogVisitForm.tsx b/src/components/forms/LogVisitForm.tsx index d4d9a94..3c84140 100644 --- a/src/components/forms/LogVisitForm.tsx +++ b/src/components/forms/LogVisitForm.tsx @@ -60,9 +60,9 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }: }, [values]); const [storeOptions, setStoreOptions] = useState<{ value: string; label: string; _raw?: any }[]>([]); + const [storeSearch, setStoreSearch] = useState(''); const [fetchingDailyLog, setFetchingDailyLog] = useState(false); const [fetchingStores, setFetchingStores] = useState(false); - const fetchingStoresRef = useRef(false); const [chainedActivity, setChainedActivity] = useState<{ activityId: string; @@ -135,9 +135,7 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }: }, [client, activityId, todayStr, nowTimeStr]); // 2. Helper to fetch select_store options ONLY using updated prefilled formData - const fetchStoreOptions = useCallback(async (formDataOverride?: Record) => { - if (fetchingStoresRef.current) return; - fetchingStoresRef.current = true; + const fetchStoreOptions = useCallback(async (formDataOverride?: Record, searchStr: string = '') => { setFetchingStores(true); setStoreError(null); @@ -149,6 +147,7 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }: fieldId: 'select_store', formData: formDataToSend, limit: SELECT_OPTION_LIMIT, + search: searchStr, }); const arr = Array.isArray(lookupRes) @@ -198,10 +197,16 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }: } } finally { setFetchingStores(false); - fetchingStoresRef.current = false; } }, [client, activityId]); + useEffect(() => { + const timer = setTimeout(() => { + fetchStoreOptions(valuesRef.current, storeSearch); + }, 300); + return () => clearTimeout(timer); + }, [storeSearch, fetchStoreOptions]); + // 3. Fetch Daily Log lookup data initially & prefill form state const loadDailyLogData = useCallback(async (dateVal: string, timeVal: string) => { setFetchingDailyLog(true); @@ -274,9 +279,7 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }: loadDailyLogData(values.date_of_visit, values.time_of_visit); }, [loadDailyLogData, values.date_of_visit, values.time_of_visit]); - const handleStoreDropdownOpen = () => { - fetchStoreOptions(); - }; + const handleStoreSelect = (fieldId: string, val: string) => { const selectedOpt = storeOptions.find(o => String(o.value) === String(val)); @@ -420,8 +423,9 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }: required={f.mandatory} value={(val as string) || ''} options={[{ value: '', label: `Select ${f.name}...` }, ...storeOptions]} - onDropdownOpen={handleStoreDropdownOpen} + onDropdownOpen={() => fetchStoreOptions(valuesRef.current, storeSearch)} onChange={e => handleStoreSelect(fieldId, e.target.value)} + onSearch={setStoreSearch} disabled={isDisabled} /> {fetchingStores && ( diff --git a/src/components/forms/fields/SelectField.tsx b/src/components/forms/fields/SelectField.tsx index 4848a4f..7872383 100644 --- a/src/components/forms/fields/SelectField.tsx +++ b/src/components/forms/fields/SelectField.tsx @@ -6,19 +6,26 @@ export function SelectField({ value, options, onChange, + onSearch, }: { label: string; required?: boolean; value: string; options: any[]; - onChange: (val: string) => void; + onChange: (val: string, fullRow?: any) => void; + onSearch?: (query: string) => void; }) { return ( setSearchQuery(e.target.value)} + onChange={(e) => { + setSearchQuery(e.target.value); + if (onSearch) onSearch(e.target.value); + }} placeholder="Search options..." className="w-full text-xs bg-transparent border-none outline-none text-foreground placeholder:text-muted" /> {searchQuery && (