|  |  |  | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  |  | 
|---|
|  |  |  | {showField('endLocNo') && ( | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <Controller | 
|---|
|  |  |  | name="endLocNo" | 
|---|
|  |  |  | control={control} | 
|---|
|  |  |  | rules={{ required: translate('ra.validation.required') }} | 
|---|
|  |  |  | render={({ field, fieldState }) => { | 
|---|
|  |  |  | const selectedOption = endLocOptions.find(option => option.id === field.value) || null; | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <Autocomplete | 
|---|
|  |  |  | options={endLocOptions} | 
|---|
|  |  |  | getOptionLabel={(option) => option.label} | 
|---|
|  |  |  | isOptionEqualToValue={(option, value) => option.id === value.id} | 
|---|
|  |  |  | value={selectedOption} | 
|---|
|  |  |  | onInputChange={(event, value) => { | 
|---|
|  |  |  | setEndLocInputValue(value); | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | onChange={(event, value) => { | 
|---|
|  |  |  | field.onChange(value ? value.id : null); | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | renderInput={(params) => ( | 
|---|
|  |  |  | <TextField | 
|---|
|  |  |  | {...params} | 
|---|
|  |  |  | label={translate('page.map.insight.control.endLoc')} | 
|---|
|  |  |  | error={!!fieldState.error} | 
|---|
|  |  |  | helperText={fieldState.error?.message} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  |  | 
|---|
|  |  |  | {showField('startStaNo') && ( | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <Controller | 
|---|
|  |  |  | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  |  | 
|---|
|  |  |  | {showField('endLocNo') && ( | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <Controller | 
|---|
|  |  |  | name="endLocNo" | 
|---|
|  |  |  | control={control} | 
|---|
|  |  |  | rules={{ required: translate('ra.validation.required') }} | 
|---|
|  |  |  | render={({ field, fieldState }) => { | 
|---|
|  |  |  | const selectedOption = endLocOptions.find(option => option.id === field.value) || null; | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <Autocomplete | 
|---|
|  |  |  | options={endLocOptions} | 
|---|
|  |  |  | getOptionLabel={(option) => option.label} | 
|---|
|  |  |  | isOptionEqualToValue={(option, value) => option.id === value.id} | 
|---|
|  |  |  | value={selectedOption} | 
|---|
|  |  |  | onInputChange={(event, value) => { | 
|---|
|  |  |  | setEndLocInputValue(value); | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | onChange={(event, value) => { | 
|---|
|  |  |  | field.onChange(value ? value.id : null); | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | renderInput={(params) => ( | 
|---|
|  |  |  | <TextField | 
|---|
|  |  |  | {...params} | 
|---|
|  |  |  | label={translate('page.map.insight.control.endLoc')} | 
|---|
|  |  |  | error={!!fieldState.error} | 
|---|
|  |  |  | helperText={fieldState.error?.message} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  |  | 
|---|
|  |  |  | {showField('endStaNo') && ( | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <Controller | 
|---|