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

feat: Add Notes functionality and integrate with Directory

Browse Source 
- Introduced NotesController to manage notes fetching, updating, and state management.
- Created NoteListResponseModel and NoteModel to handle notes data structure.
- Implemented API service method to fetch directory notes.
- Added NotesView to display notes with editing capabilities.
- Updated DirectoryController to include a flag for toggling between Directory and Notes views.
- Refactored DirectoryMainScreen to accommodate the new NotesView and toggle functionality.
- Enhanced UI components for better user experience in both Directory and Notes views.
This commit is contained in:
Vaibhav Surve 2025-07-07 12:55:52 +05:30
parent 56b493c909
commit 7a2798401a
8 changed files with 928 additions and 427 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,6 +18,7 @@ class DirectoryController extends GetxController {
RxBool showFabMenu = false.obs;
final RxBool showFullEditorToolbar = false.obs;
final RxBool isEditorFocused = false.obs;
RxBool isNotesView = false.obs;
final Map<String, RxList<DirectoryComment>> contactCommentsMap = {};
RxList<DirectoryComment> getCommentsForContact(String contactId) {

103
lib/controller/directory/notes_controller.dart Normal file
View File

@ -0,0 +1,103 @@
import 'package:get/get.dart';
import 'package:marco/helpers/services/api_service.dart';
import 'package:marco/helpers/services/app_logger.dart';
import 'package:marco/helpers/widgets/my_snackbar.dart';
import 'package:marco/model/directory/note_list_response_model.dart';
class NotesController extends GetxController {
RxList<NoteModel> notesList = <NoteModel>[].obs;
RxBool isLoading = false.obs;
RxnString editingNoteId = RxnString();
@override
void onInit() {
super.onInit();
fetchNotes();
}
Future<void> fetchNotes({int pageSize = 1000, int pageNumber = 1}) async {
isLoading.value = true;
logSafe(
"📤 Fetching directory notes with pageSize=$pageSize & pageNumber=$pageNumber");
try {
final response = await ApiService.getDirectoryNotes(
pageSize: pageSize, pageNumber: pageNumber);
logSafe("💡 Directory Notes Response: $response");
if (response == null) {
logSafe("⚠️ Response is null while fetching directory notes");
notesList.clear();
} else {
logSafe("💡 Directory Notes Response: $response");
notesList.value = NotePaginationData.fromJson(response).data;
}
} catch (e, st) {
logSafe("💥 Error occurred while fetching directory notes",
error: e, stackTrace: st);
notesList.clear();
} finally {
isLoading.value = false;
}
}
Future<void> updateNote(NoteModel updatedNote) async {
try {
logSafe(
"Attempting to update note. id: ${updatedNote.id}, contactId: ${updatedNote.contactId}");
final oldNote = notesList.firstWhereOrNull((n) => n.id == updatedNote.id);
if (oldNote != null && oldNote.note.trim() == updatedNote.note.trim()) {
logSafe("No changes detected in note. id: ${updatedNote.id}");
return;
}
final success = await ApiService.updateContactComment(
updatedNote.id,
updatedNote.note,
updatedNote.contactId,
);
if (success) {
logSafe("Note updated successfully. id: ${updatedNote.id}");
final index = notesList.indexWhere((n) => n.id == updatedNote.id);
if (index != -1) {
notesList[index] = updatedNote;
notesList.refresh();
}
} else {
showAppSnackbar(
title: "Error",
message: "Failed to update note.",
type: SnackbarType.error,
);
}
} catch (e, stackTrace) {
logSafe("Update note failed: ${e.toString()}");
logSafe("StackTrace: ${stackTrace.toString()}");
showAppSnackbar(
title: "Error",
message: "Failed to update note.",
type: SnackbarType.error,
);
}
}
void addNote(NoteModel note) {
notesList.insert(0, note);
logSafe("Note added to list");
}
void deleteNote(int index) {
if (index >= 0 && index < notesList.length) {
notesList.removeAt(index);
logSafe("Note removed from list at index $index");
}
}
void clearAllNotes() {
notesList.clear();
logSafe("All notes cleared from list");
}
}

21
lib/helpers/services/api_service.dart
View File

@ -243,6 +243,27 @@ class ApiService {
}
/// Directory calling the API
static Future<Map<String, dynamic>?> getDirectoryNotes({
int pageSize = 1000,
int pageNumber = 1,
}) async {
final queryParams = {
'pageSize': pageSize.toString(),
'pageNumber': pageNumber.toString(),
};
final response = await _getRequest(
ApiEndpoints.getDirectoryNotes,
queryParams: queryParams,
);
final data = response != null
? _parseResponse(response, label: 'Directory Notes')
: null;
return data is Map<String, dynamic> ? data : null;
}
static Future<bool> addContactComment(String note, String contactId) async {
final payload = {
"note": note,

142
lib/model/directory/note_list_response_model.dart Normal file
View File

@ -0,0 +1,142 @@
class NoteListResponseModel {
final bool success;
final String message;
final NotePaginationData data;
final dynamic errors;
final int statusCode;
final DateTime timestamp;
NoteListResponseModel({
required this.success,
required this.message,
required this.data,
this.errors,
required this.statusCode,
required this.timestamp,
});
factory NoteListResponseModel.fromJson(Map<String, dynamic> json) {
return NoteListResponseModel(
success: json['success'] ?? false,
message: json['message'] ?? '',
data: NotePaginationData.fromJson(json['data']),
errors: json['errors'],
statusCode: json['statusCode'] ?? 0,
timestamp: DateTime.parse(json['timestamp']),
);
}
}
class NotePaginationData {
final int currentPage;
final int pageSize;
final int totalPages;
final int totalRecords;
final List<NoteModel> data;
NotePaginationData({
required this.currentPage,
required this.pageSize,
required this.totalPages,
required this.totalRecords,
required this.data,
});
factory NotePaginationData.fromJson(Map<String, dynamic> json) {
return NotePaginationData(
currentPage: json['currentPage'] ?? 0,
pageSize: json['pageSize'] ?? 0,
totalPages: json['totalPages'] ?? 0,
totalRecords: json['totalRecords'] ?? 0,
data: List<NoteModel>.from(
(json['data'] ?? []).map((x) => NoteModel.fromJson(x)),
),
);
}
}
class NoteModel {
final String id;
final String note;
final String contactName;
final String organizationName;
final DateTime createdAt;
final UserModel createdBy;
final DateTime? updatedAt;
final UserModel? updatedBy;
final String contactId;
final bool isActive;
NoteModel({
required this.id,
required this.note,
required this.contactName,
required this.organizationName,
required this.createdAt,
required this.createdBy,
this.updatedAt,
this.updatedBy,
required this.contactId,
required this.isActive,
});
NoteModel copyWith({String? note}) => NoteModel(
id: id,
note: note ?? this.note,
contactName: contactName,
organizationName: organizationName,
createdAt: createdAt,
createdBy: createdBy,
updatedAt: updatedAt,
updatedBy: updatedBy,
contactId: contactId,
isActive: isActive,
);
factory NoteModel.fromJson(Map<String, dynamic> json) {
return NoteModel(
id: json['id'] ?? '',
note: json['note'] ?? '',
contactName: json['contactName'] ?? '',
organizationName: json['organizationName'] ?? '',
createdAt: DateTime.parse(json['createdAt']),
createdBy: UserModel.fromJson(json['createdBy']),
updatedAt: json['updatedAt'] != null
? DateTime.tryParse(json['updatedAt'])
: null,
updatedBy: json['updatedBy'] != null
? UserModel.fromJson(json['updatedBy'])
: null,
contactId: json['contactId'] ?? '',
isActive: json['isActive'] ?? true,
);
}
}
class UserModel {
final String id;
final String firstName;
final String lastName;
final String? photo;
final String jobRoleId;
final String jobRoleName;
UserModel({
required this.id,
required this.firstName,
required this.lastName,
this.photo,
required this.jobRoleId,
required this.jobRoleName,
});
factory UserModel.fromJson(Map<String, dynamic> json) {
return UserModel(
id: json['id'] ?? '',
firstName: json['firstName'] ?? '',
lastName: json['lastName'] ?? '',
photo: json['photo'],
jobRoleId: json['jobRoleId'] ?? '',
jobRoleName: json['jobRoleName'] ?? '',
);
}
}

102
lib/view/directory/contact_detail_screen.dart
View File

@ -319,13 +319,11 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
MyText.bodyLarge("No comments yet.", color: Colors.grey),
)
: Padding(
padding: MySpacing.xy(8, 8), // Same padding as Details tab
padding: MySpacing.xy(12, 12),
child: ListView.separated(
padding: EdgeInsets.only(
bottom: 80, // Extra bottom padding to avoid FAB overlap
),
padding: const EdgeInsets.only(bottom: 100),
itemCount: comments.length,
separatorBuilder: (_, __) => MySpacing.height(12),
separatorBuilder: (_, __) => MySpacing.height(14),
itemBuilder: (_, index) {
final comment = comments[index];
final isEditing = editingId == comment.id;
@ -344,11 +342,18 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
)
: null;
return Container(
padding: MySpacing.xy(14, 12),
return AnimatedContainer(
duration: const Duration(milliseconds: 300),
padding: MySpacing.xy(8, 7),
decoration: BoxDecoration(
color: Colors.white,
color: isEditing ? Colors.indigo[50] : Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isEditing
? Colors.indigo
: Colors.grey.shade300,
width: 1.2,
),
boxShadow: const [
BoxShadow(
color: Colors.black12,
@ -360,30 +365,31 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header Row
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Avatar(
firstName: initials,
lastName: '',
size: 31),
MySpacing.width(8),
size: 36),
MySpacing.width(12),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
MyText.bodySmall(
"By: ${comment.createdBy.firstName}",
fontWeight: 600,
color: Colors.indigo[700]),
MySpacing.height(2),
MyText.bodyMedium(
"By: ${comment.createdBy.firstName}",
fontWeight: 600,
color: Colors.indigo[800],
),
MySpacing.height(4),
MyText.bodySmall(
DateTimeUtils.convertUtcToLocal(
comment.createdAt
.toString(), // pass as String
comment.createdAt.toString(),
format: 'dd MMM yyyy, hh:mm a',
),
fontWeight: 500,
color: Colors.grey[600],
),
],
@ -391,9 +397,10 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
),
IconButton(
icon: Icon(
isEditing ? Icons.close : Icons.edit,
size: 20,
color: Colors.grey[700]),
isEditing ? Icons.close : Icons.edit,
size: 20,
color: Colors.indigo,
),
onPressed: () {
directoryController.editingCommentId.value =
isEditing ? null : comment.id;
@ -401,32 +408,33 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
),
],
),
MySpacing.height(10),
MySpacing.height(12),
// Comment Content
if (isEditing && quillController != null)
CommentEditorCard(
controller: quillController,
onCancel: () {
directoryController.editingCommentId.value =
null;
},
onSave: (controller) async {
final delta = controller.document.toDelta();
final htmlOutput =
_convertDeltaToHtml(delta);
final updated =
comment.copyWith(note: htmlOutput);
await directoryController
.updateComment(updated);
directoryController.editingCommentId.value =
null;
})
controller: quillController,
onCancel: () {
directoryController.editingCommentId.value =
null;
},
onSave: (controller) async {
final delta = controller.document.toDelta();
final htmlOutput = _convertDeltaToHtml(delta);
final updated =
comment.copyWith(note: htmlOutput);
await directoryController
.updateComment(updated);
directoryController.editingCommentId.value =
null;
},
)
else
html.Html(
data: comment.note,
style: {
"body": html.Style(
margin: html.Margins.all(0),
padding: html.HtmlPaddings.all(0),
margin: html.Margins.zero,
padding: html.HtmlPaddings.zero,
fontSize: html.FontSize.medium,
color: Colors.black87,
),
@ -439,13 +447,13 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
),
),
// Floating Action Button to Add Comment
// Floating Action Button
if (directoryController.editingCommentId.value == null)
Positioned(
bottom: 16,
right: 16,
bottom: 20,
right: 20,
child: FloatingActionButton.extended(
backgroundColor: Colors.red,
backgroundColor: Colors.indigo,
onPressed: () {
Get.bottomSheet(
AddCommentBottomSheet(contactId: contactId),
@ -453,8 +461,10 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
);
},
icon: const Icon(Icons.add_comment, color: Colors.white),
label: const Text("Add Comment",
style: TextStyle(color: Colors.white)),
label: const Text(
"Add Comment",
style: TextStyle(color: Colors.white),
),
),
),
],

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

@ -1,30 +1,18 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marco/controller/directory/directory_controller.dart';
import 'package:marco/controller/project_controller.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/avatar.dart';
import 'package:marco/helpers/widgets/my_custom_skeleton.dart';
import 'package:marco/model/directory/directory_filter_bottom_sheet.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:marco/helpers/utils/launcher_utils.dart';
import 'package:marco/view/directory/contact_detail_screen.dart';
import 'package:marco/model/directory/add_contact_bottom_sheet.dart';
import 'package:marco/view/directory/directory_view.dart';
import 'package:marco/view/directory/notes_view.dart';
class DirectoryMainScreen extends StatelessWidget {
DirectoryMainScreen({super.key});
final DirectoryController controller = Get.put(DirectoryController());
final TextEditingController searchController = TextEditingController();
Future<void> _refreshDirectory() async {
try {
await controller.fetchContacts();
} catch (e, stackTrace) {
debugPrint('Error refreshing directory data: ${e.toString()}');
debugPrintStack(stackTrace: stackTrace);
}
}
@override
Widget build(BuildContext context) {
@ -61,9 +49,9 @@ class DirectoryMainScreen extends StatelessWidget {
MySpacing.height(2),
GetBuilder<ProjectController>(
builder: (projectController) {
final projectName =
projectController.selectedProject?.name ??
'Select Project';
final projectName = projectController
.selectedProject?.name ??
'Select Project';
return Row(
children: [
const Icon(Icons.work_outline,
@ -89,377 +77,44 @@ class DirectoryMainScreen extends StatelessWidget {
),
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red,
onPressed: () async {
final result = await Get.bottomSheet(
AddContactBottomSheet(),
isScrollControlled: true,
backgroundColor: Colors.transparent,
);
if (result == true) {
controller.fetchContacts();
}
},
child: const Icon(Icons.add, color: Colors.white),
),
body: SafeArea(
child: Column(
children: [
// Search + Filter + Toggle
// Toggle between Directory and Notes
Padding(
padding: MySpacing.xy(8, 10),
child: Row(
children: [
// Compact Search Field
Expanded(
child: SizedBox(
height: 42,
child: TextField(
controller: searchController,
onChanged: (value) {
controller.searchQuery.value = value;
controller.applyFilters();
},
decoration: InputDecoration(
contentPadding:
const EdgeInsets.symmetric(horizontal: 12),
prefixIcon: const Icon(Icons.search,
size: 20, color: Colors.grey),
hintText: 'Search contacts...',
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 Data',
child: InkWell(
borderRadius: BorderRadius.circular(24),
onTap: _refreshDirectory,
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: const Padding(
padding: EdgeInsets.all(0),
child: Icon(
Icons.refresh,
color: Colors.green,
size: 28,
),
),
),
),
),
MySpacing.width(8),
// Filter Icon with optional red dot
Obx(() {
final isFilterActive = controller.hasActiveFilters();
return Stack(
children: [
Container(
height: 38,
width: 38,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(10),
),
child: IconButton(
icon: Icon(Icons.filter_alt_outlined,
size: 20,
color: isFilterActive
? Colors.indigo
: Colors.black87),
onPressed: () {
showModalBottomSheet(
context: context,
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20)),
),
builder: (_) =>
const DirectoryFilterBottomSheet(),
);
},
),
),
if (isFilterActive)
Positioned(
top: 6,
right: 6,
child: Container(
height: 8,
width: 8,
decoration: const BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
),
],
);
}),
MySpacing.width(10),
// 3-dot Popup Menu with Toggle
Container(
height: 38,
width: 38,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(10),
),
child: PopupMenuButton<int>(
padding: EdgeInsets.zero,
icon: const Icon(Icons.more_vert,
size: 20, color: Colors.black87),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
itemBuilder: (context) => [
PopupMenuItem<int>(
value: 0,
enabled: false,
child: Obx(() => Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
MyText.bodySmall('Show Inactive',
fontWeight: 600),
Switch.adaptive(
value: !controller.isActive.value,
activeColor: Colors.indigo,
onChanged: (val) {
controller.isActive.value = !val;
controller.fetchContacts(active: !val);
Navigator.pop(context);
},
),
],
)),
),
],
),
),
],
),
),
// Contacts List
Expanded(
padding: MySpacing.xy(16, 10),
child: Obx(() {
if (controller.isLoading.value) {
return ListView.separated(
itemCount: 10,
separatorBuilder: (_, __) => MySpacing.height(12),
itemBuilder: (_, __) =>
SkeletonLoaders.contactSkeletonCard(),
);
}
if (controller.filteredContacts.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.contact_page_outlined,
size: 60, color: Colors.grey),
const SizedBox(height: 12),
MyText.bodyMedium('No contacts found.',
fontWeight: 500),
],
),
);
}
return ListView.separated(
padding: MySpacing.only(
left: 8,
right: 8,
top: 4,
bottom: 80,
),
itemCount: controller.filteredContacts.length,
separatorBuilder: (_, __) => MySpacing.height(12),
itemBuilder: (_, index) {
final contact = controller.filteredContacts[index];
final phone = contact.contactPhones.isNotEmpty
? contact.contactPhones.first.phoneNumber
: '-';
final nameParts = contact.name.trim().split(" ");
final firstName = nameParts.first;
final lastName = nameParts.length > 1 ? nameParts.last : "";
final tags = contact.tags.map((tag) => tag.name).toList();
return InkWell(
onTap: () {
Get.to(() => ContactDetailScreen(contact: contact));
},
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12.0, vertical: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Leading Icon
Avatar(
firstName: firstName,
lastName: lastName,
size: 45,
),
MySpacing.width(12),
// Middle Content
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MyText.titleSmall(
contact.name,
fontWeight: 600,
overflow: TextOverflow.ellipsis,
),
MyText.bodySmall(
contact.organization,
color: Colors.grey[700],
overflow: TextOverflow.ellipsis,
),
MySpacing.height(6),
// Launcher Row
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
...contact.contactEmails.map((e) =>
GestureDetector(
onTap: () =>
LauncherUtils.launchEmail(
e.emailAddress),
onLongPress: () =>
LauncherUtils.copyToClipboard(
e.emailAddress,
typeLabel: 'Email'),
child: Padding(
padding: const EdgeInsets.only(
bottom: 4),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.email_outlined,
size: 16,
color: Colors.indigo),
MySpacing.width(4),
ConstrainedBox(
constraints:
const BoxConstraints(
maxWidth: 180),
child: MyText.labelSmall(
e.emailAddress,
overflow:
TextOverflow.ellipsis,
color: Colors.indigo,
decoration: TextDecoration
.underline,
),
),
],
),
),
)),
...contact.contactPhones.map((p) =>
GestureDetector(
onTap: () =>
LauncherUtils.launchPhone(
p.phoneNumber),
onLongPress: () =>
LauncherUtils.copyToClipboard(
p.phoneNumber,
typeLabel: 'Phone number'),
child: Padding(
padding: const EdgeInsets.only(
bottom: 4),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.phone_outlined,
size: 16,
color: Colors.indigo),
MySpacing.width(4),
ConstrainedBox(
constraints:
const BoxConstraints(
maxWidth: 160),
child: MyText.labelSmall(
p.phoneNumber,
overflow:
TextOverflow.ellipsis,
color: Colors.indigo,
decoration: TextDecoration
.underline,
),
),
],
),
),
)),
],
),
if (tags.isNotEmpty) ...[
MySpacing.height(4),
MyText.labelSmall(
tags.join(', '),
color: Colors.grey[500],
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
],
),
),
// WhatsApp launcher icon
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Icon(Icons.arrow_forward_ios,
color: Colors.grey, size: 16),
MySpacing.height(12),
if (phone != '-')
GestureDetector(
onTap: () =>
LauncherUtils.launchWhatsApp(phone),
child: const FaIcon(
FontAwesomeIcons.whatsapp,
color: Colors.green,
size: 20,
),
),
],
),
],
),
final isNotesView = controller.isNotesView.value;
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
tooltip: 'Directory View',
onPressed: () => controller.isNotesView.value = false,
icon: Icon(
Icons.contacts,
color: !isNotesView ? Colors.indigo : Colors.grey,
),
);
},
),
IconButton(
tooltip: 'Notes View',
onPressed: () => controller.isNotesView.value = true,
icon: Icon(
Icons.notes,
color: isNotesView ? Colors.indigo : Colors.grey,
),
),
],
);
}),
),
// Main View
Expanded(
child: Obx(() => controller.isNotesView.value
? NotesView()
: DirectoryView()),
),
],
),
),

344
lib/view/directory/directory_view.dart Normal file
View File

@ -0,0 +1,344 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:marco/controller/directory/directory_controller.dart';
import 'package:marco/helpers/utils/launcher_utils.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/avatar.dart';
import 'package:marco/helpers/widgets/my_custom_skeleton.dart';
import 'package:marco/model/directory/add_contact_bottom_sheet.dart';
import 'package:marco/model/directory/directory_filter_bottom_sheet.dart';
import 'package:marco/view/directory/contact_detail_screen.dart';
class DirectoryView extends StatelessWidget {
final DirectoryController controller = Get.find();
final TextEditingController searchController = TextEditingController();
Future<void> _refreshDirectory() async {
try {
await controller.fetchContacts();
} catch (e, stackTrace) {
debugPrint('Error refreshing directory data: ${e.toString()}');
debugPrintStack(stackTrace: stackTrace);
}
}
@override
Widget build(BuildContext context) {
return Column(
children: [
// Search + Filter + Toggle
Padding(
padding: MySpacing.xy(8, 10),
child: Row(
children: [
// Search Field
Expanded(
child: SizedBox(
height: 42,
child: TextField(
controller: searchController,
onChanged: (value) {
controller.searchQuery.value = value;
controller.applyFilters();
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.symmetric(horizontal: 12),
prefixIcon: const Icon(Icons.search, size: 20, color: Colors.grey),
hintText: 'Search contacts...',
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 Data',
child: InkWell(
borderRadius: BorderRadius.circular(24),
onTap: _refreshDirectory,
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: const Padding(
padding: EdgeInsets.all(0),
child: Icon(Icons.refresh, color: Colors.green, size: 28),
),
),
),
),
MySpacing.width(8),
// Filter Icon with red dot
Obx(() {
final isFilterActive = controller.hasActiveFilters();
return Stack(
children: [
Container(
height: 38,
width: 38,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(10),
),
child: IconButton(
icon: Icon(Icons.filter_alt_outlined,
size: 20,
color: isFilterActive ? Colors.indigo : Colors.black87),
onPressed: () {
showModalBottomSheet(
context: context,
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (_) => const DirectoryFilterBottomSheet(),
);
},
),
),
if (isFilterActive)
Positioned(
top: 6,
right: 6,
child: Container(
height: 8,
width: 8,
decoration: const BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
),
],
);
}),
MySpacing.width(10),
// 3-dot Popup with toggle
Container(
height: 38,
width: 38,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(10),
),
child: PopupMenuButton<int>(
padding: EdgeInsets.zero,
icon: const Icon(Icons.more_vert, size: 20, color: Colors.black87),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
itemBuilder: (context) => [
PopupMenuItem<int>(
value: 0,
enabled: false,
child: Obx(() => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
MyText.bodySmall('Show Inactive', fontWeight: 600),
Switch.adaptive(
value: !controller.isActive.value,
activeColor: Colors.indigo,
onChanged: (val) {
controller.isActive.value = !val;
controller.fetchContacts(active: !val);
Navigator.pop(context);
},
),
],
)),
),
],
),
),
],
),
),
// Contact List
Expanded(
child: Obx(() {
if (controller.isLoading.value) {
return ListView.separated(
itemCount: 10,
separatorBuilder: (_, __) => MySpacing.height(12),
itemBuilder: (_, __) => SkeletonLoaders.contactSkeletonCard(),
);
}
if (controller.filteredContacts.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.contact_page_outlined, size: 60, color: Colors.grey),
const SizedBox(height: 12),
MyText.bodyMedium('No contacts found.', fontWeight: 500),
],
),
);
}
return ListView.separated(
padding: MySpacing.only(left: 8, right: 8, top: 4, bottom: 80),
itemCount: controller.filteredContacts.length,
separatorBuilder: (_, __) => MySpacing.height(12),
itemBuilder: (_, index) {
final contact = controller.filteredContacts[index];
final phone = contact.contactPhones.isNotEmpty
? contact.contactPhones.first.phoneNumber
: '-';
final nameParts = contact.name.trim().split(" ");
final firstName = nameParts.first;
final lastName = nameParts.length > 1 ? nameParts.last : "";
final tags = contact.tags.map((tag) => tag.name).toList();
return InkWell(
onTap: () {
Get.to(() => ContactDetailScreen(contact: contact));
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Avatar(firstName: firstName, lastName: lastName, size: 45),
MySpacing.width(12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MyText.titleSmall(contact.name,
fontWeight: 600, overflow: TextOverflow.ellipsis),
MyText.bodySmall(contact.organization,
color: Colors.grey[700],
overflow: TextOverflow.ellipsis),
MySpacing.height(6),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...contact.contactEmails.map((e) => GestureDetector(
onTap: () =>
LauncherUtils.launchEmail(e.emailAddress),
onLongPress: () =>
LauncherUtils.copyToClipboard(e.emailAddress,
typeLabel: 'Email'),
child: Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.email_outlined,
size: 16, color: Colors.indigo),
MySpacing.width(4),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 180),
child: MyText.labelSmall(
e.emailAddress,
overflow: TextOverflow.ellipsis,
color: Colors.indigo,
decoration: TextDecoration.underline,
),
),
],
),
),
)),
...contact.contactPhones.map((p) => GestureDetector(
onTap: () =>
LauncherUtils.launchPhone(p.phoneNumber),
onLongPress: () =>
LauncherUtils.copyToClipboard(p.phoneNumber,
typeLabel: 'Phone number'),
child: Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.phone_outlined,
size: 16, color: Colors.indigo),
MySpacing.width(4),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 160),
child: MyText.labelSmall(
p.phoneNumber,
overflow: TextOverflow.ellipsis,
color: Colors.indigo,
decoration: TextDecoration.underline,
),
),
],
),
),
)),
],
),
if (tags.isNotEmpty) ...[
MySpacing.height(4),
MyText.labelSmall(tags.join(', '),
color: Colors.grey[500],
maxLines: 1,
overflow: TextOverflow.ellipsis),
],
],
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Icon(Icons.arrow_forward_ios,
color: Colors.grey, size: 16),
MySpacing.height(12),
if (phone != '-')
GestureDetector(
onTap: () => LauncherUtils.launchWhatsApp(phone),
child: const FaIcon(FontAwesomeIcons.whatsapp,
color: Colors.green, size: 20),
),
],
),
],
),
),
);
},
);
}),
),
// Floating action button (moved here so it doesn't appear in NotesView)
Padding(
padding: const EdgeInsets.only(bottom: 16.0),
child: Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
backgroundColor: Colors.red,
onPressed: () async {
final result = await Get.bottomSheet(
AddContactBottomSheet(),
isScrollControlled: true,
backgroundColor: Colors.transparent,
);
if (result == true) {
controller.fetchContacts();
}
},
child: const Icon(Icons.add, color: Colors.white),
),
),
),
],
);
}
}

225
lib/view/directory/notes_view.dart Normal file
View File

@ -0,0 +1,225 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_quill/flutter_quill.dart' as quill;
import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';
import 'package:flutter_html/flutter_html.dart' as html;
import 'package:marco/controller/directory/notes_controller.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/avatar.dart';
import 'package:marco/helpers/utils/date_time_utils.dart';
import 'package:marco/helpers/widgets/Directory/comment_editor_card.dart';
class NotesView extends StatelessWidget {
final NotesController controller;
NotesView({super.key}) : controller = _initController();
static NotesController _initController() {
if (!Get.isRegistered<NotesController>()) {
return Get.put(NotesController());
}
return Get.find<NotesController>();
}
String _convertDeltaToHtml(dynamic delta) {
final buffer = StringBuffer();
bool inList = false;
for (var op in delta.toList()) {
final data = op.data?.toString() ?? '';
final attr = op.attributes ?? {};
final isListItem = attr.containsKey('list');
if (isListItem && !inList) {
buffer.write('<ul>');
inList = true;
}
if (!isListItem && inList) {
buffer.write('</ul>');
inList = false;
}
if (isListItem) buffer.write('<li>');
if (attr.containsKey('bold')) buffer.write('<strong>');
if (attr.containsKey('italic')) buffer.write('<em>');
if (attr.containsKey('underline')) buffer.write('<u>');
if (attr.containsKey('strike')) buffer.write('<s>');
if (attr.containsKey('link')) buffer.write('<a href="${attr['link']}">');
buffer.write(data.replaceAll('\n', ''));
if (attr.containsKey('link')) buffer.write('</a>');
if (attr.containsKey('strike')) buffer.write('</s>');
if (attr.containsKey('underline')) buffer.write('</u>');
if (attr.containsKey('italic')) buffer.write('</em>');
if (attr.containsKey('bold')) buffer.write('</strong>');
if (isListItem)
buffer.write('</li>');
else if (data.contains('\n')) buffer.write('<br>');
}
if (inList) buffer.write('</ul>');
return buffer.toString();
}
@override
Widget build(BuildContext context) {
return Obx(() {
if (controller.isLoading.value) {
return const Center(child: CircularProgressIndicator());
}
if (controller.notesList.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.note_alt_outlined, size: 60, color: Colors.grey),
MySpacing.height(12),
MyText.bodyMedium('No notes available.', fontWeight: 500),
],
),
);
}
return Padding(
padding: MySpacing.xy(16, 16),
child: ListView.separated(
itemCount: controller.notesList.length,
separatorBuilder: (_, __) => MySpacing.height(16),
itemBuilder: (_, index) {
final note = controller.notesList[index];
return Obx(() {
final isEditing = controller.editingNoteId.value == note.id;
final initials = note.contactName.trim().isNotEmpty
? note.contactName
.trim()
.split(' ')
.map((e) => e[0])
.take(2)
.join()
.toUpperCase()
: "NA";
final createdDate = DateTimeUtils.convertUtcToLocal(
note.createdAt.toString(),
format: 'dd MMM yyyy',
);
final createdTime = DateTimeUtils.convertUtcToLocal(
note.createdAt.toString(),
format: 'hh:mm a',
);
final decodedDelta = HtmlToDelta().convert(note.note);
final quillController = isEditing
? quill.QuillController(
document: quill.Document.fromDelta(decodedDelta),
selection:
TextSelection.collapsed(offset: decodedDelta.length),
)
: null;
return AnimatedContainer(
duration: const Duration(milliseconds: 300),
padding: MySpacing.xy(8, 7),
decoration: BoxDecoration(
color: isEditing ? Colors.indigo[50] : Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isEditing ? Colors.indigo : Colors.grey.shade300,
width: 1.2,
),
boxShadow: const [
BoxShadow(
color: Colors.black12,
blurRadius: 4,
offset: Offset(0, 2),
)
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Avatar(firstName: initials, lastName: '', size: 36),
MySpacing.width(12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MyText.bodyMedium(
"${note.contactName} (${note.organizationName})",
fontWeight: 600,
color: Colors.indigo[800],
),
MySpacing.height(4),
MyText.bodySmall(
"by ${note.createdBy.firstName} • $createdDate, $createdTime",
color: Colors.grey[600],
),
],
),
),
IconButton(
icon: Icon(
isEditing ? Icons.close : Icons.edit,
size: 20,
color: Colors.indigo,
),
onPressed: () {
controller.editingNoteId.value =
isEditing ? null : note.id;
},
),
],
),
MySpacing.height(12),
// Note Content
if (isEditing && quillController != null)
CommentEditorCard(
controller: quillController,
onCancel: () {
controller.editingNoteId.value = null;
},
onSave: (quillCtrl) async {
final delta = quillCtrl.document.toDelta();
final htmlOutput = _convertDeltaToHtml(delta);
final updated = note.copyWith(note: htmlOutput);
await controller.updateNote(updated);
controller.editingNoteId.value = null;
},
)
else
html.Html(
data: note.note,
style: {
"body": html.Style(
margin: html.Margins.zero,
padding: html.HtmlPaddings.zero,
fontSize: html.FontSize.medium,
color: Colors.black87,
),
},
),
],
),
);
});
},
),
);
});
}
}