Vaibhav Surve
a0f1602f4e
- Implemented ContactProfileResponse and related models for handling contact details. - Created ContactTagResponse and ContactTag models for managing contact tags. - Added DirectoryCommentResponse and DirectoryComment models for comment management. - Developed DirectoryFilterBottomSheet for filtering contacts. - Introduced OrganizationListModel for organization data handling. - Updated routes to include DirectoryMainScreen. - Enhanced DashboardScreen to navigate to the new directory page. - Created ContactDetailScreen for displaying detailed contact information. - Developed DirectoryMainScreen for managing and displaying contacts. - Added dependencies for font_awesome_flutter and flutter_html in pubspec.yaml.
377 lines
15 KiB
Dart
377 lines
15 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:intl/intl.dart';
|
|
import 'package:marco/controller/project_controller.dart';
|
|
import 'package:marco/controller/directory/directory_controller.dart';
|
|
import 'package:marco/helpers/widgets/my_spacing.dart';
|
|
import 'package:marco/helpers/widgets/my_text.dart';
|
|
import 'package:marco/model/directory/contact_model.dart';
|
|
import 'package:marco/helpers/widgets/avatar.dart';
|
|
import 'package:marco/helpers/utils/launcher_utils.dart';
|
|
import 'package:flutter_html/flutter_html.dart';
|
|
class ContactDetailScreen extends StatelessWidget {
|
|
final ContactModel contact;
|
|
const ContactDetailScreen({super.key, required this.contact});
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final directoryController = Get.find<DirectoryController>();
|
|
final projectController = Get.find<ProjectController>();
|
|
Future.microtask(() {
|
|
if (!directoryController.contactCommentsMap.containsKey(contact.id)) {
|
|
directoryController.fetchCommentsForContact(contact.id);
|
|
}
|
|
});
|
|
final email = contact.contactEmails.isNotEmpty
|
|
? contact.contactEmails.first.emailAddress
|
|
: "-";
|
|
final phone = contact.contactPhones.isNotEmpty
|
|
? contact.contactPhones.first.phoneNumber
|
|
: "-";
|
|
final createdDate = DateTime.now();
|
|
final formattedDate = DateFormat('MMMM dd, yyyy').format(createdDate);
|
|
final tags = contact.tags.map((e) => e.name).join(", ");
|
|
final bucketNames = contact.bucketIds
|
|
.map((id) => directoryController.contactBuckets
|
|
.firstWhereOrNull((b) => b.id == id)
|
|
?.name)
|
|
.whereType<String>()
|
|
.join(", ");
|
|
final projectNames = contact.projectIds
|
|
?.map((id) => projectController.projects
|
|
.firstWhereOrNull((p) => p.id == id)
|
|
?.name)
|
|
.whereType<String>()
|
|
.join(", ") ??
|
|
"-";
|
|
final category = contact.contactCategory?.name ?? "-";
|
|
|
|
return DefaultTabController(
|
|
length: 2,
|
|
child: Scaffold(
|
|
backgroundColor: const Color(0xFFF5F5F5),
|
|
appBar: PreferredSize(
|
|
preferredSize: const Size.fromHeight(170),
|
|
child: AppBar(
|
|
backgroundColor: const Color(0xFFF5F5F5),
|
|
elevation: 0.5,
|
|
automaticallyImplyLeading: false,
|
|
flexibleSpace: SafeArea(
|
|
child: Padding(
|
|
padding: MySpacing.xy(10, 12),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Back button and title
|
|
Row(
|
|
children: [
|
|
IconButton(
|
|
icon: const Icon(Icons.arrow_back_ios_new,
|
|
color: Colors.black, size: 20),
|
|
onPressed: () => Get.back(),
|
|
),
|
|
const SizedBox(width: 4),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.titleLarge('Contact Profile',
|
|
fontWeight: 700, color: Colors.black),
|
|
const SizedBox(height: 2),
|
|
GetBuilder<ProjectController>(
|
|
builder: (_) {
|
|
final projectName =
|
|
projectController.selectedProject?.name ??
|
|
'Select Project';
|
|
return MyText.bodySmall(
|
|
projectName,
|
|
fontWeight: 600,
|
|
color: Colors.grey[700],
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
// Avatar + name + org
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Avatar(
|
|
firstName: contact.name.split(" ").first,
|
|
lastName: contact.name.split(" ").length > 1
|
|
? contact.name.split(" ").last
|
|
: "",
|
|
size: 35,
|
|
backgroundColor: Colors.indigo,
|
|
),
|
|
const SizedBox(width: 12),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.titleSmall(
|
|
contact.name,
|
|
fontWeight: 600,
|
|
color: Colors.black,
|
|
),
|
|
const SizedBox(height: 2),
|
|
MyText.titleSmall(
|
|
contact.organization,
|
|
fontWeight: 500,
|
|
color: Colors.grey[700],
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 6),
|
|
|
|
// Tab Bar
|
|
const TabBar(
|
|
indicatorColor: Colors.indigo,
|
|
labelColor: Colors.indigo,
|
|
unselectedLabelColor: Colors.grey,
|
|
tabs: [
|
|
Tab(text: "Details"),
|
|
Tab(text: "Comments"),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
body: TabBarView(
|
|
children: [
|
|
// Details Tab
|
|
SingleChildScrollView(
|
|
padding: MySpacing.xy(9, 10),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
_infoCard("Basic Info", [
|
|
_iconInfoRow(
|
|
Icons.email,
|
|
"Email",
|
|
email,
|
|
onTap: () => LauncherUtils.launchEmail(email),
|
|
onLongPress: () => LauncherUtils.copyToClipboard(email,
|
|
typeLabel: "Email"),
|
|
),
|
|
_iconInfoRow(
|
|
Icons.phone,
|
|
"Phone",
|
|
phone,
|
|
onTap: () => LauncherUtils.launchPhone(phone),
|
|
onLongPress: () => LauncherUtils.copyToClipboard(phone,
|
|
typeLabel: "Phone"),
|
|
),
|
|
_iconInfoRow(
|
|
Icons.calendar_today, "Created", formattedDate),
|
|
_iconInfoRow(Icons.location_on, "Address", contact.address),
|
|
]),
|
|
_infoCard("Organization", [
|
|
_iconInfoRow(
|
|
Icons.business, "Organization", contact.organization),
|
|
_iconInfoRow(Icons.category, "Category", category),
|
|
]),
|
|
_infoCard("Meta Info", [
|
|
_iconInfoRow(
|
|
Icons.label, "Tags", tags.isNotEmpty ? tags : "-"),
|
|
_iconInfoRow(Icons.folder_shared, "Contat Buckets",
|
|
bucketNames.isNotEmpty ? bucketNames : "-"),
|
|
_iconInfoRow(Icons.work_outline, "Projects", projectNames),
|
|
]),
|
|
_infoCard("Description", [
|
|
const SizedBox(height: 6),
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: MyText.bodyMedium(
|
|
contact.description,
|
|
color: Colors.grey[800],
|
|
maxLines: 10,
|
|
),
|
|
),
|
|
]),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Comments Tab
|
|
// Improved Comments Tab
|
|
Obx(() {
|
|
final comments =
|
|
directoryController.contactCommentsMap[contact.id];
|
|
|
|
if (comments == null) {
|
|
return const Center(child: CircularProgressIndicator());
|
|
}
|
|
|
|
if (comments.isEmpty) {
|
|
return Center(
|
|
child:
|
|
MyText.bodyLarge("No comments yet.", color: Colors.grey),
|
|
);
|
|
}
|
|
|
|
return ListView.separated(
|
|
padding: MySpacing.xy(12, 16),
|
|
itemCount: comments.length,
|
|
separatorBuilder: (_, __) => const SizedBox(height: 12),
|
|
itemBuilder: (_, index) {
|
|
final comment = comments[index];
|
|
final initials = comment.createdBy.firstName.isNotEmpty
|
|
? comment.createdBy.firstName[0].toUpperCase()
|
|
: "?";
|
|
|
|
return Container(
|
|
padding: MySpacing.xy(14, 12),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(12),
|
|
boxShadow: const [
|
|
BoxShadow(
|
|
color: Colors.black12,
|
|
blurRadius: 4,
|
|
offset: Offset(0, 2),
|
|
)
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Avatar + By + Date Row at top
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Avatar(
|
|
firstName: initials,
|
|
lastName: '',
|
|
size: 31,
|
|
),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.bodySmall(
|
|
"By: ${comment.createdBy.firstName}",
|
|
fontWeight: 600,
|
|
color: Colors.indigo[700],
|
|
),
|
|
const SizedBox(height: 2),
|
|
MyText.bodySmall(
|
|
DateFormat('dd MMM yyyy, hh:mm a')
|
|
.format(comment.createdAt),
|
|
fontWeight: 500,
|
|
color: Colors.grey[600],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
IconButton(
|
|
icon: const Icon(Icons.more_vert,
|
|
size: 20, color: Colors.grey),
|
|
onPressed: () {},
|
|
padding: EdgeInsets.zero,
|
|
constraints: const BoxConstraints(),
|
|
),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 10),
|
|
|
|
// Comment content
|
|
Html(
|
|
data: comment.note,
|
|
style: {
|
|
"body": Style(
|
|
margin: Margins.all(0),
|
|
padding: HtmlPaddings.all(0),
|
|
fontSize: FontSize.medium,
|
|
color: Colors.black87,
|
|
),
|
|
"pre": Style(
|
|
padding: HtmlPaddings.all(8),
|
|
fontSize: FontSize.small,
|
|
fontFamily: 'monospace',
|
|
backgroundColor: const Color(0xFFF1F1F1),
|
|
border: Border.all(color: Colors.grey.shade300),
|
|
),
|
|
"h3": Style(
|
|
fontSize: FontSize.large,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.indigo[700],
|
|
),
|
|
"strong": Style(
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
"p": Style(
|
|
margin: Margins.only(bottom: 8),
|
|
),
|
|
},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
);
|
|
})
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _iconInfoRow(IconData icon, String label, String value,
|
|
{VoidCallback? onTap, VoidCallback? onLongPress}) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 8),
|
|
child: GestureDetector(
|
|
onTap: onTap,
|
|
onLongPress: onLongPress,
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Icon(icon, size: 22, color: Colors.indigo),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.bodySmall(label,
|
|
fontWeight: 600, color: Colors.black87),
|
|
const SizedBox(height: 2),
|
|
MyText.bodyMedium(value, color: Colors.grey[800]),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _infoCard(String title, List<Widget> children) {
|
|
return Card(
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
|
elevation: 2,
|
|
margin: const EdgeInsets.only(bottom: 10),
|
|
child: Padding(
|
|
padding: MySpacing.xy(16, 16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.titleSmall(title,
|
|
fontWeight: 700, color: Colors.indigo[700]),
|
|
const SizedBox(height: 8),
|
|
...children,
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|