admin/marco.pms.mobileapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(directory): enhance search functionality in Directory and Notes views

Browse Source
This commit is contained in:
Vaibhav Surve 2025-07-07 13:41:46 +05:30
parent 7a2798401a
commit 45ce53539c
5 changed files with 286 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
lib/controller/directory/directory_controller.dart
View File

@ -5,6 +5,7 @@ import 'package:marco/model/directory/contact_model.dart';
import 'package:marco/model/directory/contact_bucket_list_model.dart'; import 'package:marco/model/directory/contact_bucket_list_model.dart';
import 'package:marco/model/directory/directory_comment_model.dart'; import 'package:marco/model/directory/directory_comment_model.dart';
import 'package:marco/helpers/widgets/my_snackbar.dart'; import 'package:marco/helpers/widgets/my_snackbar.dart';
class DirectoryController extends GetxController { class DirectoryController extends GetxController {
RxList<ContactModel> allContacts = <ContactModel>[].obs; RxList<ContactModel> allContacts = <ContactModel>[].obs;
RxList<ContactModel> filteredContacts = <ContactModel>[].obs; RxList<ContactModel> filteredContacts = <ContactModel>[].obs;
@ -169,15 +170,39 @@ class DirectoryController extends GetxController {
final bucketMatch = selectedBuckets.isEmpty || final bucketMatch = selectedBuckets.isEmpty ||
contact.bucketIds.any((id) => selectedBuckets.contains(id)); contact.bucketIds.any((id) => selectedBuckets.contains(id));
// Name, org, email, phone, tags
final nameMatch = contact.name.toLowerCase().contains(query); final nameMatch = contact.name.toLowerCase().contains(query);
final orgMatch = contact.organization.toLowerCase().contains(query); final orgMatch = contact.organization.toLowerCase().contains(query);
final emailMatch = contact.contactEmails final emailMatch = contact.contactEmails
.any((e) => e.emailAddress.toLowerCase().contains(query)); .any((e) => e.emailAddress.toLowerCase().contains(query));
final phoneMatch = contact.contactPhones
.any((p) => p.phoneNumber.toLowerCase().contains(query));
final tagMatch = final tagMatch =
contact.tags.any((tag) => tag.name.toLowerCase().contains(query)); contact.tags.any((tag) => tag.name.toLowerCase().contains(query));
final searchMatch = final categoryNameMatch =
query.isEmpty || nameMatch || orgMatch || emailMatch || tagMatch; contact.contactCategory?.name.toLowerCase().contains(query) ?? false;
final bucketNameMatch = contact.bucketIds.any((id) {
final bucketName = contactBuckets
.firstWhereOrNull((b) => b.id == id)
?.name
.toLowerCase() ??
'';
return bucketName.contains(query);
});
final searchMatch = query.isEmpty ||
nameMatch ||
orgMatch ||
emailMatch ||
phoneMatch ||
tagMatch ||
categoryNameMatch ||
bucketNameMatch;
return categoryMatch && bucketMatch && searchMatch; return categoryMatch && bucketMatch && searchMatch;
}).toList(); }).toList();

13
lib/controller/directory/notes_controller.dart
View File

@ -8,6 +8,19 @@ class NotesController extends GetxController {
RxList<NoteModel> notesList = <NoteModel>[].obs; RxList<NoteModel> notesList = <NoteModel>[].obs;
RxBool isLoading = false.obs; RxBool isLoading = false.obs;
RxnString editingNoteId = RxnString(); RxnString editingNoteId = RxnString();
RxString searchQuery = ''.obs;
List<NoteModel> get filteredNotesList {
if (searchQuery.isEmpty) return notesList;
final query = searchQuery.value.toLowerCase();
return notesList.where((note) {
return note.note.toLowerCase().contains(query) ||
note.contactName.toLowerCase().contains(query) ||
note.organizationName.toLowerCase().contains(query) ||
note.createdBy.firstName.toLowerCase().contains(query);
}).toList();
}
@override @override
void onInit() { void onInit() {

6
lib/view/directory/directory_main_screen.dart
View File

@ -82,7 +82,7 @@ class DirectoryMainScreen extends StatelessWidget {
children: [ children: [
// Toggle between Directory and Notes // Toggle between Directory and Notes
Padding( Padding(
padding: MySpacing.xy(16, 10), padding: MySpacing.xy(8, 5),
child: Obx(() { child: Obx(() {
final isNotesView = controller.isNotesView.value; final isNotesView = controller.isNotesView.value;
return Row( return Row(
@ -93,7 +93,7 @@ class DirectoryMainScreen extends StatelessWidget {
onPressed: () => controller.isNotesView.value = false, onPressed: () => controller.isNotesView.value = false,
icon: Icon( icon: Icon(
Icons.contacts, Icons.contacts,
color: !isNotesView ? Colors.indigo : Colors.grey, color: !isNotesView ? Colors.red : Colors.grey,
), ),
), ),
IconButton( IconButton(
@ -101,7 +101,7 @@ class DirectoryMainScreen extends StatelessWidget {
onPressed: () => controller.isNotesView.value = true, onPressed: () => controller.isNotesView.value = true,
icon: Icon( icon: Icon(
Icons.notes, Icons.notes,
color: isNotesView ? Colors.indigo : Colors.grey, color: isNotesView ? Colors.red : Colors.grey,
), ),
), ),
], ],

98
lib/view/directory/directory_view.dart
View File

@ -37,7 +37,7 @@ class DirectoryView extends StatelessWidget {
// Search Field // Search Field
Expanded( Expanded(
child: SizedBox( child: SizedBox(
height: 42, height: 35,
child: TextField( child: TextField(
controller: searchController, controller: searchController,
onChanged: (value) { onChanged: (value) {
@ -45,8 +45,10 @@ class DirectoryView extends StatelessWidget {
controller.applyFilters(); controller.applyFilters();
}, },
decoration: InputDecoration( decoration: InputDecoration(
contentPadding: const EdgeInsets.symmetric(horizontal: 12), contentPadding:
prefixIcon: const Icon(Icons.search, size: 20, color: Colors.grey), const EdgeInsets.symmetric(horizontal: 12),
prefixIcon: const Icon(Icons.search,
size: 20, color: Colors.grey),
hintText: 'Search contacts...', hintText: 'Search contacts...',
filled: true, filled: true,
fillColor: Colors.white, fillColor: Colors.white,
@ -84,8 +86,8 @@ class DirectoryView extends StatelessWidget {
return Stack( return Stack(
children: [ children: [
Container( Container(
height: 38, height: 35,
width: 38, width: 35,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
border: Border.all(color: Colors.grey.shade300), border: Border.all(color: Colors.grey.shade300),
@ -94,13 +96,16 @@ class DirectoryView extends StatelessWidget {
child: IconButton( child: IconButton(
icon: Icon(Icons.filter_alt_outlined, icon: Icon(Icons.filter_alt_outlined,
size: 20, size: 20,
color: isFilterActive ? Colors.indigo : Colors.black87), color: isFilterActive
? Colors.indigo
: Colors.black87),
onPressed: () { onPressed: () {
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
isScrollControlled: true, isScrollControlled: true,
shape: const RoundedRectangleBorder( shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)), borderRadius: BorderRadius.vertical(
top: Radius.circular(20)),
), ),
builder: (_) => const DirectoryFilterBottomSheet(), builder: (_) => const DirectoryFilterBottomSheet(),
); );
@ -126,8 +131,8 @@ class DirectoryView extends StatelessWidget {
MySpacing.width(10), MySpacing.width(10),
// 3-dot Popup with toggle // 3-dot Popup with toggle
Container( Container(
height: 38, height: 35,
width: 38, width: 35,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
border: Border.all(color: Colors.grey.shade300), border: Border.all(color: Colors.grey.shade300),
@ -135,7 +140,8 @@ class DirectoryView extends StatelessWidget {
), ),
child: PopupMenuButton<int>( child: PopupMenuButton<int>(
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
icon: const Icon(Icons.more_vert, size: 20, color: Colors.black87), icon: const Icon(Icons.more_vert,
size: 20, color: Colors.black87),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
), ),
@ -146,7 +152,8 @@ class DirectoryView extends StatelessWidget {
child: Obx(() => Row( child: Obx(() => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
MyText.bodySmall('Show Inactive', fontWeight: 600), MyText.bodySmall('Show Inactive',
fontWeight: 600),
Switch.adaptive( Switch.adaptive(
value: !controller.isActive.value, value: !controller.isActive.value,
activeColor: Colors.indigo, activeColor: Colors.indigo,
@ -182,7 +189,8 @@ class DirectoryView extends StatelessWidget {
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
const Icon(Icons.contact_page_outlined, size: 60, color: Colors.grey), const Icon(Icons.contact_page_outlined,
size: 60, color: Colors.grey),
const SizedBox(height: 12), const SizedBox(height: 12),
MyText.bodyMedium('No contacts found.', fontWeight: 500), MyText.bodyMedium('No contacts found.', fontWeight: 500),
], ],
@ -209,18 +217,21 @@ class DirectoryView extends StatelessWidget {
Get.to(() => ContactDetailScreen(contact: contact)); Get.to(() => ContactDetailScreen(contact: contact));
}, },
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 10), padding: const EdgeInsets.symmetric(
horizontal: 12.0, vertical: 10),
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Avatar(firstName: firstName, lastName: lastName, size: 45), Avatar(
firstName: firstName, lastName: lastName, size: 45),
MySpacing.width(12), MySpacing.width(12),
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
MyText.titleSmall(contact.name, MyText.titleSmall(contact.name,
fontWeight: 600, overflow: TextOverflow.ellipsis), fontWeight: 600,
overflow: TextOverflow.ellipsis),
MyText.bodySmall(contact.organization, MyText.bodySmall(contact.organization,
color: Colors.grey[700], color: Colors.grey[700],
overflow: TextOverflow.ellipsis), overflow: TextOverflow.ellipsis),
@ -228,54 +239,70 @@ class DirectoryView extends StatelessWidget {
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
...contact.contactEmails.map((e) => GestureDetector( ...contact.contactEmails.map((e) =>
onTap: () => GestureDetector(
LauncherUtils.launchEmail(e.emailAddress), onTap: () => LauncherUtils.launchEmail(
e.emailAddress),
onLongPress: () => onLongPress: () =>
LauncherUtils.copyToClipboard(e.emailAddress, LauncherUtils.copyToClipboard(
e.emailAddress,
typeLabel: 'Email'), typeLabel: 'Email'),
child: Padding( child: Padding(
padding: const EdgeInsets.only(bottom: 4), padding:
const EdgeInsets.only(bottom: 4),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
const Icon(Icons.email_outlined, const Icon(Icons.email_outlined,
size: 16, color: Colors.indigo), size: 16,
color: Colors.indigo),
MySpacing.width(4), MySpacing.width(4),
ConstrainedBox( ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 180), constraints:
const BoxConstraints(
maxWidth: 180),
child: MyText.labelSmall( child: MyText.labelSmall(
e.emailAddress, e.emailAddress,
overflow: TextOverflow.ellipsis, overflow:
TextOverflow.ellipsis,
color: Colors.indigo, color: Colors.indigo,
decoration: TextDecoration.underline, decoration:
TextDecoration.underline,
), ),
), ),
], ],
), ),
), ),
)), )),
...contact.contactPhones.map((p) => GestureDetector( ...contact.contactPhones.map((p) =>
onTap: () => GestureDetector(
LauncherUtils.launchPhone(p.phoneNumber), onTap: () => LauncherUtils.launchPhone(
p.phoneNumber),
onLongPress: () => onLongPress: () =>
LauncherUtils.copyToClipboard(p.phoneNumber, LauncherUtils.copyToClipboard(
p.phoneNumber,
typeLabel: 'Phone number'), typeLabel: 'Phone number'),
child: Padding( child: Padding(
padding: const EdgeInsets.only(bottom: 4), padding:
const EdgeInsets.only(bottom: 4),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
const Icon(Icons.phone_outlined, const Icon(Icons.phone_outlined,
size: 16, color: Colors.indigo), size: 16,
color: Colors.indigo),
MySpacing.width(4), MySpacing.width(4),
ConstrainedBox( ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 160), constraints:
const BoxConstraints(
maxWidth: 160),
child: MyText.labelSmall( child: MyText.labelSmall(
p.phoneNumber, p.phoneNumber,
overflow: TextOverflow.ellipsis, overflow:
TextOverflow.ellipsis,
color: Colors.indigo, color: Colors.indigo,
decoration: TextDecoration.underline, decoration:
TextDecoration.underline,
), ),
), ),
], ],
@ -302,7 +329,8 @@ class DirectoryView extends StatelessWidget {
MySpacing.height(12), MySpacing.height(12),
if (phone != '-') if (phone != '-')
GestureDetector( GestureDetector(
onTap: () => LauncherUtils.launchWhatsApp(phone), onTap: () =>
LauncherUtils.launchWhatsApp(phone),
child: const FaIcon(FontAwesomeIcons.whatsapp, child: const FaIcon(FontAwesomeIcons.whatsapp,
color: Colors.green, size: 20), color: Colors.green, size: 20),
), ),
@ -319,7 +347,7 @@ class DirectoryView extends StatelessWidget {
// Floating action button (moved here so it doesn't appear in NotesView) // Floating action button (moved here so it doesn't appear in NotesView)
Padding( Padding(
padding: const EdgeInsets.only(bottom: 16.0), padding: const EdgeInsets.only(right: 16.0, bottom: 16.0),
child: Align( child: Align(
alignment: Alignment.bottomRight, alignment: Alignment.bottomRight,
child: FloatingActionButton( child: FloatingActionButton(

155
lib/view/directory/notes_view.dart
View File

@ -12,15 +12,18 @@ import 'package:marco/helpers/utils/date_time_utils.dart';
import 'package:marco/helpers/widgets/Directory/comment_editor_card.dart'; import 'package:marco/helpers/widgets/Directory/comment_editor_card.dart';
class NotesView extends StatelessWidget { class NotesView extends StatelessWidget {
final NotesController controller; final NotesController controller = Get.find();
final TextEditingController searchController = TextEditingController();
NotesView({super.key}) : controller = _initController(); NotesView({super.key});
static NotesController _initController() { Future<void> _refreshNotes() async {
if (!Get.isRegistered<NotesController>()) { try {
return Get.put(NotesController()); await controller.fetchNotes();
} catch (e, st) {
debugPrint('Error refreshing notes: $e');
debugPrintStack(stackTrace: st);
} }
return Get.find<NotesController>();
} }
String _convertDeltaToHtml(dynamic delta) { String _convertDeltaToHtml(dynamic delta) {
@ -69,102 +72,134 @@ class NotesView extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Obx(() { return Column(
children: [
/// 🔍 Search + Refresh (Top Row)
Padding(
padding: MySpacing.xy(8, 10),
child: Row(
children: [
Expanded(
child: SizedBox(
height: 35,
child: TextField(
controller: searchController,
onChanged: (value) => controller.searchQuery.value = value,
decoration: InputDecoration(
contentPadding: const EdgeInsets.symmetric(horizontal: 6),
prefixIcon: const Icon(Icons.search, size: 20, color: Colors.grey),
hintText: 'Search notes...',
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.grey.shade300),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.grey.shade300),
),
),
),
),
),
MySpacing.width(8),
Tooltip(
message: 'Refresh Notes',
child: InkWell(
borderRadius: BorderRadius.circular(24),
onTap: _refreshNotes,
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: const Padding(
padding: EdgeInsets.all(4),
child: Icon(Icons.refresh, color: Colors.green, size: 26),
),
),
),
),
],
),
),
/// 📄 Notes List View
Expanded(
child: Obx(() {
if (controller.isLoading.value) { if (controller.isLoading.value) {
return const Center(child: CircularProgressIndicator()); return const Center(child: CircularProgressIndicator());
} }
if (controller.notesList.isEmpty) { final notes = controller.filteredNotesList;
if (notes.isEmpty) {
return Center( return Center(
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
const Icon(Icons.note_alt_outlined, size: 60, color: Colors.grey), const Icon(Icons.note_alt_outlined, size: 60, color: Colors.grey),
MySpacing.height(12), const SizedBox(height: 12),
MyText.bodyMedium('No notes available.', fontWeight: 500), MyText.bodyMedium('No notes found.', fontWeight: 500),
], ],
), ),
); );
} }
return Padding( return ListView.separated(
padding: MySpacing.xy(16, 16), padding: MySpacing.only(left: 8, right: 8, top: 4, bottom: 80),
child: ListView.separated( itemCount: notes.length,
itemCount: controller.notesList.length, separatorBuilder: (_, __) => MySpacing.height(12),
separatorBuilder: (_, __) => MySpacing.height(16),
itemBuilder: (_, index) { itemBuilder: (_, index) {
final note = controller.notesList[index]; final note = notes[index];
return Obx(() {
final isEditing = controller.editingNoteId.value == note.id; final isEditing = controller.editingNoteId.value == note.id;
final initials = note.contactName.trim().isNotEmpty final initials = note.contactName.trim().isNotEmpty
? note.contactName ? note.contactName.trim().split(' ').map((e) => e[0]).take(2).join().toUpperCase()
.trim()
.split(' ')
.map((e) => e[0])
.take(2)
.join()
.toUpperCase()
: "NA"; : "NA";
final createdDate = DateTimeUtils.convertUtcToLocal( final createdDate = DateTimeUtils.convertUtcToLocal(note.createdAt.toString(), format: 'dd MMM yyyy');
note.createdAt.toString(), final createdTime = DateTimeUtils.convertUtcToLocal(note.createdAt.toString(), format: 'hh:mm a');
format: 'dd MMM yyyy',
);
final createdTime = DateTimeUtils.convertUtcToLocal(
note.createdAt.toString(),
format: 'hh:mm a',
);
final decodedDelta = HtmlToDelta().convert(note.note); final decodedDelta = HtmlToDelta().convert(note.note);
final quillController = isEditing final quillController = isEditing
? quill.QuillController( ? quill.QuillController(
document: quill.Document.fromDelta(decodedDelta), document: quill.Document.fromDelta(decodedDelta),
selection: selection: TextSelection.collapsed(offset: decodedDelta.length),
TextSelection.collapsed(offset: decodedDelta.length),
) )
: null; : null;
return AnimatedContainer( return AnimatedContainer(
duration: const Duration(milliseconds: 300), duration: const Duration(milliseconds: 250),
padding: MySpacing.xy(8, 7), padding: MySpacing.xy(12, 12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: isEditing ? Colors.indigo[50] : Colors.white, color: isEditing ? Colors.indigo[50] : Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all( border: Border.all(
color: isEditing ? Colors.indigo : Colors.grey.shade300, color: isEditing ? Colors.indigo : Colors.grey.shade300,
width: 1.2, width: 1.1,
), ),
borderRadius: BorderRadius.circular(12),
boxShadow: const [ boxShadow: const [
BoxShadow( BoxShadow(color: Colors.black12, blurRadius: 4, offset: Offset(0, 2)),
color: Colors.black12,
blurRadius: 4,
offset: Offset(0, 2),
)
], ],
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// Header /// Header Row
Row( Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Avatar(firstName: initials, lastName: '', size: 36), Avatar(firstName: initials, lastName: '', size: 40),
MySpacing.width(12), MySpacing.width(12),
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
MyText.bodyMedium( MyText.titleSmall(
"${note.contactName} (${note.organizationName})", "${note.contactName} (${note.organizationName})",
fontWeight: 600, fontWeight: 600,
overflow: TextOverflow.ellipsis,
color: Colors.indigo[800], color: Colors.indigo[800],
), ),
MySpacing.height(4),
MyText.bodySmall( MyText.bodySmall(
"by ${note.createdBy.firstName} • $createdDate, $createdTime", "by ${note.createdBy.firstName} • $createdDate, $createdTime",
color: Colors.grey[600], color: Colors.grey[600],
@ -175,24 +210,23 @@ class NotesView extends StatelessWidget {
IconButton( IconButton(
icon: Icon( icon: Icon(
isEditing ? Icons.close : Icons.edit, isEditing ? Icons.close : Icons.edit,
size: 20,
color: Colors.indigo, color: Colors.indigo,
size: 20,
), ),
onPressed: () { onPressed: () {
controller.editingNoteId.value = controller.editingNoteId.value = isEditing ? null : note.id;
isEditing ? null : note.id;
}, },
), ),
], ],
), ),
MySpacing.height(12), MySpacing.height(12),
// Note Content
/// Content
if (isEditing && quillController != null) if (isEditing && quillController != null)
CommentEditorCard( CommentEditorCard(
controller: quillController, controller: quillController,
onCancel: () { onCancel: () => controller.editingNoteId.value = null,
controller.editingNoteId.value = null;
},
onSave: (quillCtrl) async { onSave: (quillCtrl) async {
final delta = quillCtrl.document.toDelta(); final delta = quillCtrl.document.toDelta();
final htmlOutput = _convertDeltaToHtml(delta); final htmlOutput = _convertDeltaToHtml(delta);
@ -216,10 +250,11 @@ class NotesView extends StatelessWidget {
], ],
), ),
); );
});
}, },
),
); );
}); }),
),
],
);
} }
} }