Skip to content

Commit 97069e7

Browse files
fullenifulleni
committed
feat(content_management): integrate searchable dropdowns in source forms
Replaces the standard `CountryDropdownFormField` and `LanguageDropdownFormField` with the new `SearchableDropdownFormField` in both the `CreateSourcePage` and `EditSourcePage`. This change connects the UI to the new pagination and search logic in the `CreateSourceBloc` and `EditSourceBloc`, allowing users to efficiently search and load countries and languages from large datasets.
1 parent 1a8818d commit 97069e7

File tree

2 files changed

+122
-8
lines changed

2 files changed

+122
-8
lines changed

‎lib/content_management/view/create_source_page.dart

Lines changed: 61 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -161,13 +161,29 @@ class _CreateSourceViewState extends State<_CreateSourceView> {
161161
.add(CreateSourceUrlChanged(value)),
162162
),
163163
const SizedBox(height: AppSpacing.lg),
164-
LanguageDropdownFormField(
164+
SearchableDropdownFormField<Language>(
165165
labelText: l10n.language,
166-
languages: state.languages,
166+
items: state.languages,
167167
initialValue: state.language,
168+
hasMore: state.languagesHasMore,
169+
isLoading: state.status == CreateSourceStatus.loading,
168170
onChanged: (value) => context
169171
.read<CreateSourceBloc>()
170172
.add(CreateSourceLanguageChanged(value)),
173+
onSearchChanged: (value) => context
174+
.read<CreateSourceBloc>()
175+
.add(CreateSourceLanguageSearchChanged(value)),
176+
onLoadMore: () => context.read<CreateSourceBloc>().add(
177+
const CreateSourceLoadMoreLanguagesRequested(),
178+
),
179+
itemBuilder: (context, language) {
180+
return ListTile(
181+
title: Text(language.name),
182+
);
183+
},
184+
selectedItemBuilder: (context, language) {
185+
return Text(language.name);
186+
},
171187
),
172188
const SizedBox(height: AppSpacing.lg),
173189
DropdownButtonFormField<SourceType?>(
@@ -190,13 +206,54 @@ class _CreateSourceViewState extends State<_CreateSourceView> {
190206
.add(CreateSourceTypeChanged(value)),
191207
),
192208
const SizedBox(height: AppSpacing.lg),
193-
CountryDropdownFormField(
209+
SearchableDropdownFormField<Country>(
194210
labelText: l10n.headquarters,
195-
countries: state.countries,
211+
items: state.countries,
196212
initialValue: state.headquarters,
213+
hasMore: state.countriesHasMore,
214+
isLoading: state.status == CreateSourceStatus.loading,
197215
onChanged: (value) => context
198216
.read<CreateSourceBloc>()
199217
.add(CreateSourceHeadquartersChanged(value)),
218+
onSearchChanged: (value) => context
219+
.read<CreateSourceBloc>()
220+
.add(CreateSourceCountrySearchChanged(value)),
221+
onLoadMore: () => context.read<CreateSourceBloc>().add(
222+
const CreateSourceLoadMoreCountriesRequested(),
223+
),
224+
itemBuilder: (context, country) {
225+
return ListTile(
226+
leading: SizedBox(
227+
width: 32,
228+
height: 20,
229+
child: Image.network(
230+
country.flagUrl,
231+
fit: BoxFit.cover,
232+
errorBuilder: (context, error, stackTrace) =>
233+
const Icon(Icons.flag),
234+
),
235+
),
236+
title: Text(country.name),
237+
);
238+
},
239+
selectedItemBuilder: (context, country) {
240+
return Row(
241+
children: [
242+
SizedBox(
243+
width: 32,
244+
height: 20,
245+
child: Image.network(
246+
country.flagUrl,
247+
fit: BoxFit.cover,
248+
errorBuilder: (context, error, stackTrace) =>
249+
const Icon(Icons.flag),
250+
),
251+
),
252+
const SizedBox(width: AppSpacing.md),
253+
Text(country.name),
254+
],
255+
);
256+
},
200257
),
201258
const SizedBox(height: AppSpacing.lg),
202259
DropdownButtonFormField<ContentStatus>(

‎lib/content_management/view/edit_source_page.dart

Lines changed: 61 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -191,13 +191,29 @@ class _EditSourceViewState extends State<_EditSourceView> {
191191
),
192192
),
193193
const SizedBox(height: AppSpacing.lg),
194-
LanguageDropdownFormField(
194+
SearchableDropdownFormField<Language>(
195195
labelText: l10n.language,
196-
languages: state.languages,
196+
items: state.languages,
197197
initialValue: state.language,
198+
hasMore: state.languagesHasMore,
199+
isLoading: state.status == EditSourceStatus.loading,
198200
onChanged: (value) => context
199201
.read<EditSourceBloc>()
200202
.add(EditSourceLanguageChanged(value)),
203+
onSearchChanged: (value) => context
204+
.read<EditSourceBloc>()
205+
.add(EditSourceLanguageSearchChanged(value)),
206+
onLoadMore: () => context.read<EditSourceBloc>().add(
207+
const EditSourceLoadMoreLanguagesRequested(),
208+
),
209+
itemBuilder: (context, language) {
210+
return ListTile(
211+
title: Text(language.name),
212+
);
213+
},
214+
selectedItemBuilder: (context, language) {
215+
return Text(language.name);
216+
},
201217
),
202218
const SizedBox(height: AppSpacing.lg),
203219
DropdownButtonFormField<SourceType?>(
@@ -220,13 +236,54 @@ class _EditSourceViewState extends State<_EditSourceView> {
220236
),
221237
),
222238
const SizedBox(height: AppSpacing.lg),
223-
CountryDropdownFormField(
239+
SearchableDropdownFormField<Country>(
224240
labelText: l10n.headquarters,
225-
countries: state.countries,
241+
items: state.countries,
226242
initialValue: state.headquarters,
243+
hasMore: state.countriesHasMore,
244+
isLoading: state.status == EditSourceStatus.loading,
227245
onChanged: (value) => context
228246
.read<EditSourceBloc>()
229247
.add(EditSourceHeadquartersChanged(value)),
248+
onSearchChanged: (value) => context
249+
.read<EditSourceBloc>()
250+
.add(EditSourceCountrySearchChanged(value)),
251+
onLoadMore: () => context.read<EditSourceBloc>().add(
252+
const EditSourceLoadMoreCountriesRequested(),
253+
),
254+
itemBuilder: (context, country) {
255+
return ListTile(
256+
leading: SizedBox(
257+
width: 32,
258+
height: 20,
259+
child: Image.network(
260+
country.flagUrl,
261+
fit: BoxFit.cover,
262+
errorBuilder: (context, error, stackTrace) =>
263+
const Icon(Icons.flag),
264+
),
265+
),
266+
title: Text(country.name),
267+
);
268+
},
269+
selectedItemBuilder: (context, country) {
270+
return Row(
271+
children: [
272+
SizedBox(
273+
width: 32,
274+
height: 20,
275+
child: Image.network(
276+
country.flagUrl,
277+
fit: BoxFit.cover,
278+
errorBuilder: (context, error, stackTrace) =>
279+
const Icon(Icons.flag),
280+
),
281+
),
282+
const SizedBox(width: AppSpacing.md),
283+
Text(country.name),
284+
],
285+
);
286+
},
230287
),
231288
const SizedBox(height: AppSpacing.lg),
232289
DropdownButtonFormField<ContentStatus>(

0 commit comments

Comments
 (0)