feat: Add Notes functionality and integrate with Directory
- 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
parent
56b493c909
commit
7a2798401a
@ -18,6 +18,7 @@ class DirectoryController extends GetxController {
|
|||||||
RxBool showFabMenu = false.obs;
|
RxBool showFabMenu = false.obs;
|
||||||
final RxBool showFullEditorToolbar = false.obs;
|
final RxBool showFullEditorToolbar = false.obs;
|
||||||
final RxBool isEditorFocused = false.obs;
|
final RxBool isEditorFocused = false.obs;
|
||||||
|
RxBool isNotesView = false.obs;
|
||||||
|
|
||||||
final Map<String, RxList<DirectoryComment>> contactCommentsMap = {};
|
final Map<String, RxList<DirectoryComment>> contactCommentsMap = {};
|
||||||
RxList<DirectoryComment> getCommentsForContact(String contactId) {
|
RxList<DirectoryComment> getCommentsForContact(String contactId) {
|
||||||
|
|||||||
103
lib/controller/directory/notes_controller.dart
Normal file
103
lib/controller/directory/notes_controller.dart
Normal 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");
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -243,6 +243,27 @@ class ApiService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/// Directory calling the API
|
/// 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 {
|
static Future<bool> addContactComment(String note, String contactId) async {
|
||||||
final payload = {
|
final payload = {
|
||||||
"note": note,
|
"note": note,
|
||||||
|
|||||||
142
lib/model/directory/note_list_response_model.dart
Normal file
142
lib/model/directory/note_list_response_model.dart
Normal 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'] ?? '',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -319,13 +319,11 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
|
|||||||
MyText.bodyLarge("No comments yet.", color: Colors.grey),
|
MyText.bodyLarge("No comments yet.", color: Colors.grey),
|
||||||
)
|
)
|
||||||
: Padding(
|
: Padding(
|
||||||
padding: MySpacing.xy(8, 8), // Same padding as Details tab
|
padding: MySpacing.xy(12, 12),
|
||||||
child: ListView.separated(
|
child: ListView.separated(
|
||||||
padding: EdgeInsets.only(
|
padding: const EdgeInsets.only(bottom: 100),
|
||||||
bottom: 80, // Extra bottom padding to avoid FAB overlap
|
|
||||||
),
|
|
||||||
itemCount: comments.length,
|
itemCount: comments.length,
|
||||||
separatorBuilder: (_, __) => MySpacing.height(12),
|
separatorBuilder: (_, __) => MySpacing.height(14),
|
||||||
itemBuilder: (_, index) {
|
itemBuilder: (_, index) {
|
||||||
final comment = comments[index];
|
final comment = comments[index];
|
||||||
final isEditing = editingId == comment.id;
|
final isEditing = editingId == comment.id;
|
||||||
@ -344,11 +342,18 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
|
|||||||
)
|
)
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
return Container(
|
return AnimatedContainer(
|
||||||
padding: MySpacing.xy(14, 12),
|
duration: const Duration(milliseconds: 300),
|
||||||
|
padding: MySpacing.xy(8, 7),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: Colors.white,
|
color: isEditing ? Colors.indigo[50] : Colors.white,
|
||||||
borderRadius: BorderRadius.circular(12),
|
borderRadius: BorderRadius.circular(12),
|
||||||
|
border: Border.all(
|
||||||
|
color: isEditing
|
||||||
|
? Colors.indigo
|
||||||
|
: Colors.grey.shade300,
|
||||||
|
width: 1.2,
|
||||||
|
),
|
||||||
boxShadow: const [
|
boxShadow: const [
|
||||||
BoxShadow(
|
BoxShadow(
|
||||||
color: Colors.black12,
|
color: Colors.black12,
|
||||||
@ -360,30 +365,31 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
|
|||||||
child: Column(
|
child: Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
|
// Header Row
|
||||||
Row(
|
Row(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
Avatar(
|
Avatar(
|
||||||
firstName: initials,
|
firstName: initials,
|
||||||
lastName: '',
|
lastName: '',
|
||||||
size: 31),
|
size: 36),
|
||||||
MySpacing.width(8),
|
MySpacing.width(12),
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Column(
|
child: Column(
|
||||||
crossAxisAlignment:
|
crossAxisAlignment:
|
||||||
CrossAxisAlignment.start,
|
CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
MyText.bodySmall(
|
MyText.bodyMedium(
|
||||||
"By: ${comment.createdBy.firstName}",
|
"By: ${comment.createdBy.firstName}",
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
color: Colors.indigo[700]),
|
color: Colors.indigo[800],
|
||||||
MySpacing.height(2),
|
),
|
||||||
|
MySpacing.height(4),
|
||||||
MyText.bodySmall(
|
MyText.bodySmall(
|
||||||
DateTimeUtils.convertUtcToLocal(
|
DateTimeUtils.convertUtcToLocal(
|
||||||
comment.createdAt
|
comment.createdAt.toString(),
|
||||||
.toString(), // pass as String
|
|
||||||
format: 'dd MMM yyyy, hh:mm a',
|
format: 'dd MMM yyyy, hh:mm a',
|
||||||
),
|
),
|
||||||
fontWeight: 500,
|
|
||||||
color: Colors.grey[600],
|
color: Colors.grey[600],
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
@ -391,9 +397,10 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
|
|||||||
),
|
),
|
||||||
IconButton(
|
IconButton(
|
||||||
icon: Icon(
|
icon: Icon(
|
||||||
isEditing ? Icons.close : Icons.edit,
|
isEditing ? Icons.close : Icons.edit,
|
||||||
size: 20,
|
size: 20,
|
||||||
color: Colors.grey[700]),
|
color: Colors.indigo,
|
||||||
|
),
|
||||||
onPressed: () {
|
onPressed: () {
|
||||||
directoryController.editingCommentId.value =
|
directoryController.editingCommentId.value =
|
||||||
isEditing ? null : comment.id;
|
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)
|
if (isEditing && quillController != null)
|
||||||
CommentEditorCard(
|
CommentEditorCard(
|
||||||
controller: quillController,
|
controller: quillController,
|
||||||
onCancel: () {
|
onCancel: () {
|
||||||
directoryController.editingCommentId.value =
|
directoryController.editingCommentId.value =
|
||||||
null;
|
null;
|
||||||
},
|
},
|
||||||
onSave: (controller) async {
|
onSave: (controller) async {
|
||||||
final delta = controller.document.toDelta();
|
final delta = controller.document.toDelta();
|
||||||
final htmlOutput =
|
final htmlOutput = _convertDeltaToHtml(delta);
|
||||||
_convertDeltaToHtml(delta);
|
final updated =
|
||||||
final updated =
|
comment.copyWith(note: htmlOutput);
|
||||||
comment.copyWith(note: htmlOutput);
|
await directoryController
|
||||||
await directoryController
|
.updateComment(updated);
|
||||||
.updateComment(updated);
|
directoryController.editingCommentId.value =
|
||||||
directoryController.editingCommentId.value =
|
null;
|
||||||
null;
|
},
|
||||||
})
|
)
|
||||||
else
|
else
|
||||||
html.Html(
|
html.Html(
|
||||||
data: comment.note,
|
data: comment.note,
|
||||||
style: {
|
style: {
|
||||||
"body": html.Style(
|
"body": html.Style(
|
||||||
margin: html.Margins.all(0),
|
margin: html.Margins.zero,
|
||||||
padding: html.HtmlPaddings.all(0),
|
padding: html.HtmlPaddings.zero,
|
||||||
fontSize: html.FontSize.medium,
|
fontSize: html.FontSize.medium,
|
||||||
color: Colors.black87,
|
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)
|
if (directoryController.editingCommentId.value == null)
|
||||||
Positioned(
|
Positioned(
|
||||||
bottom: 16,
|
bottom: 20,
|
||||||
right: 16,
|
right: 20,
|
||||||
child: FloatingActionButton.extended(
|
child: FloatingActionButton.extended(
|
||||||
backgroundColor: Colors.red,
|
backgroundColor: Colors.indigo,
|
||||||
onPressed: () {
|
onPressed: () {
|
||||||
Get.bottomSheet(
|
Get.bottomSheet(
|
||||||
AddCommentBottomSheet(contactId: contactId),
|
AddCommentBottomSheet(contactId: contactId),
|
||||||
@ -453,8 +461,10 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
icon: const Icon(Icons.add_comment, color: Colors.white),
|
icon: const Icon(Icons.add_comment, color: Colors.white),
|
||||||
label: const Text("Add Comment",
|
label: const Text(
|
||||||
style: TextStyle(color: Colors.white)),
|
"Add Comment",
|
||||||
|
style: TextStyle(color: Colors.white),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
|||||||
@ -1,30 +1,18 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:get/get.dart';
|
import 'package:get/get.dart';
|
||||||
|
|
||||||
import 'package:marco/controller/directory/directory_controller.dart';
|
import 'package:marco/controller/directory/directory_controller.dart';
|
||||||
import 'package:marco/controller/project_controller.dart';
|
import 'package:marco/controller/project_controller.dart';
|
||||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||||
import 'package:marco/helpers/widgets/my_text.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/view/directory/directory_view.dart';
|
||||||
import 'package:marco/model/directory/directory_filter_bottom_sheet.dart';
|
import 'package:marco/view/directory/notes_view.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';
|
|
||||||
|
|
||||||
class DirectoryMainScreen extends StatelessWidget {
|
class DirectoryMainScreen extends StatelessWidget {
|
||||||
DirectoryMainScreen({super.key});
|
DirectoryMainScreen({super.key});
|
||||||
|
|
||||||
final DirectoryController controller = Get.put(DirectoryController());
|
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
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
@ -61,9 +49,9 @@ class DirectoryMainScreen extends StatelessWidget {
|
|||||||
MySpacing.height(2),
|
MySpacing.height(2),
|
||||||
GetBuilder<ProjectController>(
|
GetBuilder<ProjectController>(
|
||||||
builder: (projectController) {
|
builder: (projectController) {
|
||||||
final projectName =
|
final projectName = projectController
|
||||||
projectController.selectedProject?.name ??
|
.selectedProject?.name ??
|
||||||
'Select Project';
|
'Select Project';
|
||||||
return Row(
|
return Row(
|
||||||
children: [
|
children: [
|
||||||
const Icon(Icons.work_outline,
|
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(
|
body: SafeArea(
|
||||||
child: Column(
|
child: Column(
|
||||||
children: [
|
children: [
|
||||||
// Search + Filter + Toggle
|
// Toggle between Directory and Notes
|
||||||
Padding(
|
Padding(
|
||||||
padding: MySpacing.xy(8, 10),
|
padding: MySpacing.xy(16, 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(
|
|
||||||
child: Obx(() {
|
child: Obx(() {
|
||||||
if (controller.isLoading.value) {
|
final isNotesView = controller.isNotesView.value;
|
||||||
return ListView.separated(
|
return Row(
|
||||||
itemCount: 10,
|
mainAxisAlignment: MainAxisAlignment.end,
|
||||||
separatorBuilder: (_, __) => MySpacing.height(12),
|
children: [
|
||||||
itemBuilder: (_, __) =>
|
IconButton(
|
||||||
SkeletonLoaders.contactSkeletonCard(),
|
tooltip: 'Directory View',
|
||||||
);
|
onPressed: () => controller.isNotesView.value = false,
|
||||||
}
|
icon: Icon(
|
||||||
|
Icons.contacts,
|
||||||
if (controller.filteredContacts.isEmpty) {
|
color: !isNotesView ? Colors.indigo : Colors.grey,
|
||||||
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,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
);
|
),
|
||||||
},
|
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
344
lib/view/directory/directory_view.dart
Normal 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
225
lib/view/directory/notes_view.dart
Normal 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,
|
||||||
|
),
|
||||||
|
},
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user