gitea_admin/krishnasales_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:search api call to search

Browse Source
This commit is contained in:
suryac 2026-08-18 13:31:19 +05:30
parent 1d4ec78360
commit 3a021c1748
5 changed files with 109 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/config.ts
View File

@ -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;

22
src/components/forms/LogVisitForm.tsx
View File

@ -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<string, any>) => {
if (fetchingStoresRef.current) return;
fetchingStoresRef.current = true;
const fetchStoreOptions = useCallback(async (formDataOverride?: Record<string, any>, 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 && (

11
src/components/forms/fields/SelectField.tsx
View File

@ -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 (
<Select
label={label}
required={required}
value={value ?? ''}
onChange={(e) => onChange(e.target.value)}
onChange={(e) => {
const val = e.target.value;
const opt = options.find((o: any) => String(o.value) === val);
onChange(val, opt?._raw);
}}
onSearch={onSearch}
options={[{ value: '', label: 'Select...' }, ...options.map((o: any) => ({ value: String(o.value), label: o.label }))]}
/>
);

91
src/components/forms/fields/WfLookupField.tsx
View File

@ -18,6 +18,7 @@ export interface WfLookupFieldProps {
export function WfLookupField({ label, required, value, onChange, client, config, activityId, fieldId, formData }: WfLookupFieldProps) {
const [options, setOptions] = useState<{ label: string; value: string; _raw?: any }[]>([]);
const [loading, setLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState('');
const formDataStr = JSON.stringify(formData);
@ -35,55 +36,58 @@ export function WfLookupField({ label, required, value, onChange, client, config
}
setLoading(true);
client.wfLookupRecords({
activityId,
fieldId,
formData,
limit: SELECT_OPTION_LIMIT
})
.then(res => {
if (!mounted) return;
// The API might return { data: [...] } or { records: [...] } or just an array
const arr = Array.isArray(res) ? res : (res.data || res.records || []);
const timer = setTimeout(() => {
client.wfLookupRecords({
activityId,
fieldId,
formData: JSON.parse(formDataStr),
limit: SELECT_OPTION_LIMIT,
search: searchQuery
})
.then(res => {
if (!mounted) return;
// The API might return { data: [...] } or { records: [...] } or just an array
const arr = Array.isArray(res) ? res : (res.data || res.records || []);
const displayFields = config.display_fields || [];
const displayFields = config.display_fields || [];
const opts = arr.map((row: any) => {
// Join the display fields to form the label
const labelParts = displayFields
.map((df: any) => row[df.field_id])
.filter((v: any) => v != null && v !== '');
const opts = arr.map((row: any) => {
// Join the display fields to form the label
const labelParts = displayFields
.map((df: any) => row[df.field_id])
.filter((v: any) => v != null && v !== '');
const labelText = labelParts.length > 0
? labelParts.join(' - ')
: `ID: ${row.instance_id || row.id}`;
const labelText = labelParts.length > 0
? labelParts.join(' - ')
: `ID: ${row.instance_id || row.id}`;
return {
value: String(row.instance_id || row.id),
label: labelText,
_raw: row
};
return {
value: String(row.instance_id || row.id),
label: labelText,
_raw: row
};
});
setOptions(opts);
// Auto-select first option if no value is selected yet (e.g. for daily_log)
const isDailyLogField = fieldId === 'daily_log' || fieldId === 'field_1785225403902' || label.toLowerCase().includes('daily log');
if ((!value || value === '') && opts.length > 0 && isDailyLogField) {
const firstOpt = opts[0];
console.log("[WfLookupField] Auto-selecting first daily_log option:", firstOpt);
onChange(firstOpt.value, firstOpt._raw);
}
})
.catch(err => {
console.error("Failed to load wf_lookup records:", err);
})
.finally(() => {
if (mounted) setLoading(false);
});
}, 300);
setOptions(opts);
// Auto-select first option if no value is selected yet (e.g. for daily_log)
const isDailyLogField = fieldId === 'daily_log' || fieldId === 'field_1785225403902' || label.toLowerCase().includes('daily log');
if ((!value || value === '') && opts.length > 0 && isDailyLogField) {
const firstOpt = opts[0];
console.log("[WfLookupField] Auto-selecting first daily_log option:", firstOpt);
onChange(firstOpt.value, firstOpt._raw);
}
})
.catch(err => {
console.error("Failed to load wf_lookup records:", err);
})
.finally(() => {
if (mounted) setLoading(false);
});
return () => { mounted = false; };
}, [client, config, activityId, fieldId, formDataStr]);
return () => { mounted = false; clearTimeout(timer); };
}, [client, config, activityId, fieldId, formDataStr, searchQuery]);
const handleSelectChange = (newVal: string) => {
const selectedOpt = options.find(o => String(o.value) === String(newVal));
@ -96,6 +100,7 @@ export function WfLookupField({ label, required, value, onChange, client, config
required={required}
value={String(value || '')}
onChange={handleSelectChange}
onSearch={setSearchQuery}
options={options}
/>
);

46
src/components/reusable/Select.tsx
View File

@ -20,6 +20,8 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
searchable?: boolean;
/** Callback fired when dropdown opens */
onDropdownOpen?: () => void;
/** Callback fired when search query changes */
onSearch?: (query: string) => void;
}
/** Custom searchable select component using React Portal to prevent container clipping. */
@ -34,6 +36,7 @@ export function Select({
placeholder,
searchable = true,
onDropdownOpen,
onSearch,
...rest
}: SelectProps) {
const [isOpen, setIsOpen] = useState(false);
@ -50,9 +53,11 @@ export function Select({
const selectedOption = normalizedOptions.find((o) => o.value === currentValue);
const selectedOptionLabel = selectedOption ? selectedOption.label : '';
const filteredOptions = normalizedOptions.filter((o) =>
o.label.toLowerCase().includes(searchQuery.toLowerCase())
);
const filteredOptions = onSearch
? normalizedOptions
: normalizedOptions.filter((o) =>
o.label.toLowerCase().includes(searchQuery.toLowerCase())
);
@ -127,14 +132,20 @@ export function Select({
<input
type="text"
value={searchQuery}
onChange={(e) => 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 && (
<button
type="button"
onClick={() => setSearchQuery('')}
onClick={() => {
setSearchQuery('');
if (onSearch) onSearch('');
}}
className="text-muted hover:text-foreground p-0.5 rounded cursor-pointer"
>
<X size={12} />
@ -208,6 +219,8 @@ export interface MultiSelectProps {
className?: string;
/** Disable search header filter if set to false */
searchable?: boolean;
/** Callback fired when search query changes */
onSearch?: (query: string) => void;
}
/** Custom searchable multiselect component using React Portal. */
@ -223,6 +236,7 @@ export function MultiSelect({
disabled,
placeholder,
searchable = true,
onSearch,
}: MultiSelectProps) {
const [isOpen, setIsOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
@ -247,9 +261,11 @@ export function MultiSelect({
}
};
const filteredOptions = normalizedOptions.filter((o) =>
o.label.toLowerCase().includes(searchQuery.toLowerCase())
);
const filteredOptions = onSearch
? normalizedOptions
: normalizedOptions.filter((o) =>
o.label.toLowerCase().includes(searchQuery.toLowerCase())
);
@ -330,15 +346,21 @@ export function MultiSelect({
<input
type="text"
value={searchQuery}
onChange={(e) => 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-strong placeholder:text-muted"
className="w-full text-xs bg-transparent border-none outline-none text-foreground placeholder:text-muted"
/>
{searchQuery && (
<button
type="button"
onClick={() => setSearchQuery('')}
className="text-muted hover:text-strong p-0.5 rounded cursor-pointer"
onClick={() => {
setSearchQuery('');
if (onSearch) onSearch('');
}}
className="text-muted hover:text-foreground p-0.5 rounded cursor-pointer"
>
<X size={12} />
</button>