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

Read form select options from field.properties.options (v2 envelope shape)

Browse Source
This commit is contained in:
Bhanu Prakash Sai Potteri 2026-05-22 23:15:51 +05:30
parent d05fa0cb2c
commit c21a496108
2 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/viewService.ts
View File

@ -236,7 +236,10 @@ export interface FormScreenField {
data_type: string; data_type: string;
mandatory: boolean; mandatory: boolean;
value?: any; value?: any;
options?: Array<{ label: string; value: string }>; properties?: {
options?: Array<{ label: string; value: string }>;
country_code?: string;
};
} }
export interface FormScreenResponse { export interface FormScreenResponse {

41
src/components/FormModal.tsx
View File

@ -3,7 +3,19 @@ import { X, ArrowRight, AlertCircle, CheckCircle2, ChevronDown } from "lucide-re
import { getFormScreen, startWorkflow, performActivity } from "../api/viewService"; import { getFormScreen, startWorkflow, performActivity } from "../api/viewService";
import { WORKFLOW_ID } from "../config"; import { WORKFLOW_ID } from "../config";
interface FormField { id: string; uid: string; name: string; type: string; data_type: string; mandatory: boolean; value?: any; options?: Array<{ label: string; value: string }>; } interface FormField {
id: string;
uid: string;
name: string;
type: string;
data_type: string;
mandatory: boolean;
value?: any;
properties?: {
options?: Array<{ label: string; value: string }>;
country_code?: string;
};
}
interface GridItem { i: string; x: number; y: number; w: number; h: number; } interface GridItem { i: string; x: number; y: number; w: number; h: number; }
interface Props { interface Props {
@ -207,7 +219,8 @@ function renderInput(f: FormField, value: string, onChange: (v: string) => void,
: "border-stone-200 dark:border-zinc-700 focus:ring-[#C8102E]/20 focus:border-[#C8102E] dark:focus:border-rose-500" : "border-stone-200 dark:border-zinc-700 focus:ring-[#C8102E]/20 focus:border-[#C8102E] dark:focus:border-rose-500"
}`; }`;
if (f.options && f.options.length > 0) { const options = f.properties?.options;
if (options && options.length > 0) {
return ( return (
<div className="relative"> <div className="relative">
<select <select
@ -216,7 +229,7 @@ function renderInput(f: FormField, value: string, onChange: (v: string) => void,
className={`${base} appearance-none pr-9 cursor-pointer`} className={`${base} appearance-none pr-9 cursor-pointer`}
> >
<option value="">Select {f.name.toLowerCase()}</option> <option value="">Select {f.name.toLowerCase()}</option>
{f.options.map((opt) => ( {options.map((opt) => (
<option key={opt.value} value={opt.value}>{opt.label}</option> <option key={opt.value} value={opt.value}>{opt.label}</option>
))} ))}
</select> </select>
@ -242,8 +255,26 @@ function renderInput(f: FormField, value: string, onChange: (v: string) => void,
return <input type="date" value={value} onChange={(e) => onChange(e.target.value)} className={base} />; return <input type="date" value={value} onChange={(e) => onChange(e.target.value)} className={base} />;
case "email": case "email":
return <input type="email" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />; return <input type="email" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
case "phone": case "phone": {
return <input type="tel" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />; const cc = f.properties?.country_code;
if (!cc) {
return <input type="tel" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
}
return (
<div className="relative">
<span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-[13px] text-stone-500 dark:text-zinc-400 pointer-events-none select-none">
{cc}
</span>
<input
type="tel"
value={value}
onChange={(e) => onChange(e.target.value)}
className={`${base} pl-12`}
placeholder="Phone number"
/>
</div>
);
}
default: default:
return <input type="text" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />; return <input type="text" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
} }