feat: refactor agent filter sheet to support dynamic API-driven types and update professional card layout
This commit is contained in:
@@ -96,6 +96,11 @@ class _AgentSearchScreenState extends ConsumerState<AgentSearchScreen> {
|
|||||||
onClearAll: () {
|
onClearAll: () {
|
||||||
ref.read(searchAgentsProvider.notifier).clearFilters();
|
ref.read(searchAgentsProvider.notifier).clearFilters();
|
||||||
},
|
},
|
||||||
|
onListingTypeChange: (agentTypeId) {
|
||||||
|
ref
|
||||||
|
.read(searchAgentsProvider.notifier)
|
||||||
|
.filterByAgentType(agentTypeId);
|
||||||
|
},
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ class AgentFilterSheet extends StatefulWidget {
|
|||||||
final String? selectedAgentTypeId;
|
final String? selectedAgentTypeId;
|
||||||
final void Function(Map<String, List<String>> filters) onApply;
|
final void Function(Map<String, List<String>> filters) onApply;
|
||||||
final VoidCallback onClearAll;
|
final VoidCallback onClearAll;
|
||||||
|
final void Function(String? agentTypeId)? onListingTypeChange;
|
||||||
|
|
||||||
const AgentFilterSheet({
|
const AgentFilterSheet({
|
||||||
super.key,
|
super.key,
|
||||||
@@ -19,6 +20,7 @@ class AgentFilterSheet extends StatefulWidget {
|
|||||||
this.selectedAgentTypeId,
|
this.selectedAgentTypeId,
|
||||||
required this.onApply,
|
required this.onApply,
|
||||||
required this.onClearAll,
|
required this.onClearAll,
|
||||||
|
this.onListingTypeChange,
|
||||||
});
|
});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
@@ -28,6 +30,7 @@ class AgentFilterSheet extends StatefulWidget {
|
|||||||
class _AgentFilterSheetState extends State<AgentFilterSheet> {
|
class _AgentFilterSheetState extends State<AgentFilterSheet> {
|
||||||
late Map<String, List<String>> _filters;
|
late Map<String, List<String>> _filters;
|
||||||
final Map<String, bool> _expandedSections = {};
|
final Map<String, bool> _expandedSections = {};
|
||||||
|
String? _selectedAgentTypeId;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
@@ -37,6 +40,7 @@ class _AgentFilterSheetState extends State<AgentFilterSheet> {
|
|||||||
for (final entry in widget.currentFilters.entries) {
|
for (final entry in widget.currentFilters.entries) {
|
||||||
_filters[entry.key] = List<String>.from(entry.value);
|
_filters[entry.key] = List<String>.from(entry.value);
|
||||||
}
|
}
|
||||||
|
_selectedAgentTypeId = widget.selectedAgentTypeId;
|
||||||
// Expand all sections by default
|
// Expand all sections by default
|
||||||
for (final field in widget.filterFields) {
|
for (final field in widget.filterFields) {
|
||||||
_expandedSections[field.slug] = true;
|
_expandedSections[field.slug] = true;
|
||||||
@@ -231,33 +235,47 @@ class _AgentFilterSheetState extends State<AgentFilterSheet> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
List<Widget> _buildListingTypeChips() {
|
/// Pluralize an agent type name for display (e.g. "Agent" → "Agents",
|
||||||
// Find "Professional" and "Lender" agent types
|
/// "Lender" → "Lenders", "Property Manager" → "Property Managers").
|
||||||
final types = <_ListingChip>[];
|
/// Falls back to the raw name if it's already plural-looking.
|
||||||
for (final at in widget.agentTypes) {
|
String _displayLabel(String name) {
|
||||||
final name = at.name.toLowerCase();
|
final trimmed = name.trim();
|
||||||
if (name == 'professional' || name == 'agent') {
|
if (trimmed.isEmpty) return trimmed;
|
||||||
types.add(_ListingChip(label: 'Agents', id: at.id));
|
final lower = trimmed.toLowerCase();
|
||||||
} else if (name == 'lender') {
|
if (lower.endsWith('s')) return trimmed; // already plural
|
||||||
types.add(_ListingChip(label: 'Lenders', id: at.id));
|
if (lower.endsWith('y')) {
|
||||||
}
|
return '${trimmed.substring(0, trimmed.length - 1)}ies';
|
||||||
}
|
|
||||||
if (types.isEmpty) {
|
|
||||||
types.add(const _ListingChip(label: 'Agents', id: null));
|
|
||||||
types.add(const _ListingChip(label: 'Lenders', id: null));
|
|
||||||
}
|
}
|
||||||
|
return '${trimmed}s';
|
||||||
|
}
|
||||||
|
|
||||||
return types.map((chip) {
|
List<Widget> _buildListingTypeChips() {
|
||||||
final isSelected = chip.id == widget.selectedAgentTypeId;
|
// Render one chip per backend agent type — fully driven by API data
|
||||||
|
if (widget.agentTypes.isEmpty) return const [];
|
||||||
|
|
||||||
|
return widget.agentTypes.map((at) {
|
||||||
|
final isSelected = at.id == _selectedAgentTypeId;
|
||||||
return Padding(
|
return Padding(
|
||||||
padding: const EdgeInsets.only(left: 12),
|
padding: const EdgeInsets.only(left: 12),
|
||||||
child: Text(
|
child: GestureDetector(
|
||||||
chip.label,
|
behavior: HitTestBehavior.opaque,
|
||||||
style: TextStyle(
|
onTap: () {
|
||||||
fontFamily: 'SourceSerif4',
|
setState(() {
|
||||||
fontSize: 18,
|
// Toggle off when tapping the already-selected chip
|
||||||
fontWeight: isSelected ? FontWeight.w500 : FontWeight.w400,
|
_selectedAgentTypeId = isSelected ? null : at.id;
|
||||||
color: AppColors.primaryDark,
|
});
|
||||||
|
widget.onListingTypeChange?.call(_selectedAgentTypeId);
|
||||||
|
},
|
||||||
|
child: Text(
|
||||||
|
_displayLabel(at.name),
|
||||||
|
style: TextStyle(
|
||||||
|
fontFamily: 'SourceSerif4',
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: isSelected ? FontWeight.w700 : FontWeight.w400,
|
||||||
|
color: isSelected
|
||||||
|
? AppColors.accentOrange
|
||||||
|
: AppColors.primaryDark,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
@@ -322,12 +340,6 @@ class _AgentFilterSheetState extends State<AgentFilterSheet> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class _ListingChip {
|
|
||||||
final String label;
|
|
||||||
final String? id;
|
|
||||||
const _ListingChip({required this.label, required this.id});
|
|
||||||
}
|
|
||||||
|
|
||||||
class _FilterOptionsList extends StatefulWidget {
|
class _FilterOptionsList extends StatefulWidget {
|
||||||
final FilterableField field;
|
final FilterableField field;
|
||||||
final bool Function(String value) isSelected;
|
final bool Function(String value) isSelected;
|
||||||
|
|||||||
@@ -105,7 +105,7 @@ class _TopProfessionalsSectionState
|
|||||||
else ...[
|
else ...[
|
||||||
// Professional Cards - horizontal scroll
|
// Professional Cards - horizontal scroll
|
||||||
SizedBox(
|
SizedBox(
|
||||||
height: 430,
|
height: 540,
|
||||||
child: ListView.builder(
|
child: ListView.builder(
|
||||||
controller: _scrollController,
|
controller: _scrollController,
|
||||||
scrollDirection: Axis.horizontal,
|
scrollDirection: Axis.horizontal,
|
||||||
@@ -295,7 +295,6 @@ class _TopProfessionalsSectionState
|
|||||||
final rating = item.rating > 0 ? item.rating : 5.0;
|
final rating = item.rating > 0 ? item.rating : 5.0;
|
||||||
|
|
||||||
return Container(
|
return Container(
|
||||||
constraints: const BoxConstraints(maxHeight: 410),
|
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: Colors.white,
|
color: Colors.white,
|
||||||
borderRadius: BorderRadius.circular(15),
|
borderRadius: BorderRadius.circular(15),
|
||||||
@@ -335,203 +334,208 @@ class _TopProfessionalsSectionState
|
|||||||
),
|
),
|
||||||
|
|
||||||
// Content
|
// Content
|
||||||
Padding(
|
Flexible(
|
||||||
padding: const EdgeInsets.fromLTRB(16, 12, 16, 14),
|
child: SingleChildScrollView(
|
||||||
child: Column(
|
physics: const NeverScrollableScrollPhysics(),
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
child: Padding(
|
||||||
mainAxisSize: MainAxisSize.min,
|
padding: const EdgeInsets.fromLTRB(16, 12, 16, 14),
|
||||||
children: [
|
child: Column(
|
||||||
// Name
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
Text(
|
mainAxisSize: MainAxisSize.min,
|
||||||
item.name,
|
children: [
|
||||||
style: const TextStyle(
|
// Name
|
||||||
fontFamily: 'Fractul',
|
Text(
|
||||||
fontSize: 14,
|
item.name,
|
||||||
fontWeight: FontWeight.w700,
|
style: const TextStyle(
|
||||||
color: AppColors.primaryDark,
|
fontFamily: 'Fractul',
|
||||||
),
|
fontSize: 14,
|
||||||
overflow: TextOverflow.ellipsis,
|
fontWeight: FontWeight.w700,
|
||||||
),
|
color: AppColors.primaryDark,
|
||||||
const SizedBox(height: 4),
|
|
||||||
|
|
||||||
// Subtitle (agent type)
|
|
||||||
if (subtitle.isNotEmpty)
|
|
||||||
Text(
|
|
||||||
subtitle,
|
|
||||||
style: const TextStyle(
|
|
||||||
fontFamily: 'SourceSerif4',
|
|
||||||
fontSize: 10,
|
|
||||||
fontWeight: FontWeight.w400,
|
|
||||||
color: AppColors.primaryDark,
|
|
||||||
),
|
|
||||||
maxLines: 1,
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
),
|
|
||||||
const SizedBox(height: 4),
|
|
||||||
|
|
||||||
// Verified badge
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
SvgPicture.asset(
|
|
||||||
'assets/icons/verified_badge_icon.svg',
|
|
||||||
width: 16,
|
|
||||||
height: 16,
|
|
||||||
placeholderBuilder: (_) => const Icon(
|
|
||||||
Icons.verified,
|
|
||||||
color: Color(0xFF638559),
|
|
||||||
size: 16,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
const SizedBox(width: 6),
|
overflow: TextOverflow.ellipsis,
|
||||||
const Text(
|
),
|
||||||
'\u201CVerified local agent\u201D',
|
const SizedBox(height: 4),
|
||||||
style: TextStyle(
|
|
||||||
|
// Subtitle (agent type)
|
||||||
|
if (subtitle.isNotEmpty)
|
||||||
|
Text(
|
||||||
|
subtitle,
|
||||||
|
style: const TextStyle(
|
||||||
fontFamily: 'SourceSerif4',
|
fontFamily: 'SourceSerif4',
|
||||||
fontSize: 14,
|
fontSize: 10,
|
||||||
fontWeight: FontWeight.w500,
|
fontWeight: FontWeight.w400,
|
||||||
color: Color(0xFF638559),
|
color: AppColors.primaryDark,
|
||||||
),
|
),
|
||||||
|
maxLines: 1,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
),
|
),
|
||||||
],
|
const SizedBox(height: 4),
|
||||||
),
|
|
||||||
const SizedBox(height: 8),
|
|
||||||
|
|
||||||
// Location
|
// Verified badge
|
||||||
if (locationText.isNotEmpty) ...[
|
Row(
|
||||||
const Text(
|
|
||||||
'Location:',
|
|
||||||
style: TextStyle(
|
|
||||||
fontFamily: 'Fractul',
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: FontWeight.w700,
|
|
||||||
color: AppColors.primaryDark,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(height: 2),
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
SvgPicture.asset(
|
|
||||||
'assets/icons/location_orange_icon.svg',
|
|
||||||
width: 16,
|
|
||||||
height: 16,
|
|
||||||
placeholderBuilder: (_) => const Icon(
|
|
||||||
Icons.location_on,
|
|
||||||
color: AppColors.accentOrange,
|
|
||||||
size: 16,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(width: 4),
|
|
||||||
Expanded(
|
|
||||||
child: Text(
|
|
||||||
locationText,
|
|
||||||
style: const TextStyle(
|
|
||||||
fontFamily: 'SourceSerif4',
|
|
||||||
fontSize: 10,
|
|
||||||
fontWeight: FontWeight.w400,
|
|
||||||
color: AppColors.primaryDark,
|
|
||||||
),
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
const SizedBox(height: 8),
|
|
||||||
],
|
|
||||||
|
|
||||||
// Expertise tags (max 3 visible + "more" pill)
|
|
||||||
if (expertiseTags.isNotEmpty) ...[
|
|
||||||
const Text(
|
|
||||||
'Expertise:',
|
|
||||||
style: TextStyle(
|
|
||||||
fontFamily: 'Fractul',
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: FontWeight.w700,
|
|
||||||
color: AppColors.primaryDark,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(height: 6),
|
|
||||||
Wrap(
|
|
||||||
alignment: WrapAlignment.start,
|
|
||||||
spacing: 6,
|
|
||||||
runSpacing: 6,
|
|
||||||
children: [
|
|
||||||
...expertiseTags.take(3).map((tag) => _buildTag(tag)),
|
|
||||||
if (expertiseTags.length > 3)
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.symmetric(
|
|
||||||
horizontal: 10,
|
|
||||||
vertical: 4,
|
|
||||||
),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
borderRadius: BorderRadius.circular(15),
|
|
||||||
color: AppColors.accentOrange.withValues(
|
|
||||||
alpha: 0.1,
|
|
||||||
),
|
|
||||||
border: Border.all(
|
|
||||||
color: AppColors.accentOrange,
|
|
||||||
width: 0.7,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
'+${expertiseTags.length - 3} more',
|
|
||||||
style: const TextStyle(
|
|
||||||
fontFamily: 'SourceSerif4',
|
|
||||||
fontSize: 13,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
color: AppColors.accentOrange,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
const SizedBox(height: 12),
|
|
||||||
],
|
|
||||||
|
|
||||||
// Experience
|
|
||||||
if (experience.isNotEmpty) ...[
|
|
||||||
RichText(
|
|
||||||
text: TextSpan(
|
|
||||||
children: [
|
children: [
|
||||||
const TextSpan(
|
SvgPicture.asset(
|
||||||
text: 'Experience: ',
|
'assets/icons/verified_badge_icon.svg',
|
||||||
style: TextStyle(
|
width: 16,
|
||||||
fontFamily: 'Fractul',
|
height: 16,
|
||||||
fontSize: 14,
|
placeholderBuilder: (_) => const Icon(
|
||||||
fontWeight: FontWeight.w700,
|
Icons.verified,
|
||||||
color: AppColors.primaryDark,
|
color: Color(0xFF638559),
|
||||||
|
size: 16,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
TextSpan(
|
const SizedBox(width: 6),
|
||||||
text: experience,
|
const Text(
|
||||||
style: const TextStyle(
|
'\u201CVerified local agent\u201D',
|
||||||
|
style: TextStyle(
|
||||||
fontFamily: 'SourceSerif4',
|
fontFamily: 'SourceSerif4',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
fontWeight: FontWeight.w400,
|
fontWeight: FontWeight.w500,
|
||||||
color: AppColors.primaryDark,
|
color: Color(0xFF638559),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
maxLines: 2,
|
const SizedBox(height: 8),
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
),
|
|
||||||
const SizedBox(height: 8),
|
|
||||||
],
|
|
||||||
|
|
||||||
// Star Rating
|
// Location
|
||||||
Row(
|
if (locationText.isNotEmpty) ...[
|
||||||
children: List.generate(rating.round().clamp(0, 5), (i) {
|
const Text(
|
||||||
return Padding(
|
'Location:',
|
||||||
padding: const EdgeInsets.only(right: 4),
|
style: TextStyle(
|
||||||
child: SvgPicture.asset(
|
fontFamily: 'Fractul',
|
||||||
'assets/icons/star_filled_icon.svg',
|
fontSize: 14,
|
||||||
width: 18,
|
fontWeight: FontWeight.w700,
|
||||||
height: 17,
|
color: AppColors.primaryDark,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
);
|
const SizedBox(height: 2),
|
||||||
}),
|
Row(
|
||||||
|
children: [
|
||||||
|
SvgPicture.asset(
|
||||||
|
'assets/icons/location_orange_icon.svg',
|
||||||
|
width: 16,
|
||||||
|
height: 16,
|
||||||
|
placeholderBuilder: (_) => const Icon(
|
||||||
|
Icons.location_on,
|
||||||
|
color: AppColors.accentOrange,
|
||||||
|
size: 16,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 4),
|
||||||
|
Expanded(
|
||||||
|
child: Text(
|
||||||
|
locationText,
|
||||||
|
style: const TextStyle(
|
||||||
|
fontFamily: 'SourceSerif4',
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: FontWeight.w400,
|
||||||
|
color: AppColors.primaryDark,
|
||||||
|
),
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: 8),
|
||||||
|
],
|
||||||
|
|
||||||
|
// Expertise tags (max 3 visible + "more" pill)
|
||||||
|
if (expertiseTags.isNotEmpty) ...[
|
||||||
|
const Text(
|
||||||
|
'Expertise:',
|
||||||
|
style: TextStyle(
|
||||||
|
fontFamily: 'Fractul',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: FontWeight.w700,
|
||||||
|
color: AppColors.primaryDark,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 6),
|
||||||
|
Wrap(
|
||||||
|
alignment: WrapAlignment.start,
|
||||||
|
spacing: 6,
|
||||||
|
runSpacing: 6,
|
||||||
|
children: [
|
||||||
|
...expertiseTags.take(3).map((tag) => _buildTag(tag)),
|
||||||
|
if (expertiseTags.length > 3)
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(
|
||||||
|
horizontal: 10,
|
||||||
|
vertical: 4,
|
||||||
|
),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.circular(15),
|
||||||
|
color: AppColors.accentOrange.withValues(
|
||||||
|
alpha: 0.1,
|
||||||
|
),
|
||||||
|
border: Border.all(
|
||||||
|
color: AppColors.accentOrange,
|
||||||
|
width: 0.7,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
'+${expertiseTags.length - 3} more',
|
||||||
|
style: const TextStyle(
|
||||||
|
fontFamily: 'SourceSerif4',
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: AppColors.accentOrange,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: 12),
|
||||||
|
],
|
||||||
|
|
||||||
|
// Experience
|
||||||
|
if (experience.isNotEmpty) ...[
|
||||||
|
RichText(
|
||||||
|
text: TextSpan(
|
||||||
|
children: [
|
||||||
|
const TextSpan(
|
||||||
|
text: 'Experience: ',
|
||||||
|
style: TextStyle(
|
||||||
|
fontFamily: 'Fractul',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: FontWeight.w700,
|
||||||
|
color: AppColors.primaryDark,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
TextSpan(
|
||||||
|
text: experience,
|
||||||
|
style: const TextStyle(
|
||||||
|
fontFamily: 'SourceSerif4',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: FontWeight.w400,
|
||||||
|
color: AppColors.primaryDark,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
maxLines: 2,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
),
|
||||||
|
const SizedBox(height: 8),
|
||||||
|
],
|
||||||
|
|
||||||
|
// Star Rating
|
||||||
|
Row(
|
||||||
|
children: List.generate(rating.round().clamp(0, 5), (i) {
|
||||||
|
return Padding(
|
||||||
|
padding: const EdgeInsets.only(right: 4),
|
||||||
|
child: SvgPicture.asset(
|
||||||
|
'assets/icons/star_filled_icon.svg',
|
||||||
|
width: 18,
|
||||||
|
height: 17,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
],
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user