feat(ui): full‑width ShadTable across app; fix rent dialog width; correct equipment pagination
- ShadTable: ensure full-width via LayoutBuilder+ConstrainedBox minWidth - BaseListScreen: default data area padding = 0 for table edge-to-edge - Vendor/Model/User/Company/Inventory/Zipcode: set columnSpanExtent per column and add final filler column to absorb remaining width; pin date/status/actions widths; ensure date text is single-line - Equipment: unify card/border style; define fixed column widths + filler; increase checkbox column to 56px to avoid overflow - Rent list: migrate to ShadTable.list with fixed widths + filler column - Rent form dialog: prevent infinite width by bounding ShadProgress with SizedBox and remove Expanded from option rows; add safe selectedOptionBuilder - Admin list: fix const with non-const argument in table column extents - Services/Controller: remove hardcoded perPage=10; use BaseListController perPage; trust server meta (total/totalPages) in equipment pagination - widgets/shad_table: ConstrainedBox(minWidth=viewport) so table stretches Run: flutter analyze → 0 errors (warnings remain).
This commit is contained in:
307
lib/screens/vendor/components/vendor_table.dart
vendored
307
lib/screens/vendor/components/vendor_table.dart
vendored
@@ -31,109 +31,216 @@ class VendorTable extends StatelessWidget {
|
||||
children: [
|
||||
Expanded(
|
||||
child: ShadCard(
|
||||
child: SingleChildScrollView(
|
||||
child: DataTable(
|
||||
horizontalMargin: 16,
|
||||
columnSpacing: 24,
|
||||
columns: const [
|
||||
DataColumn(label: Text('No')),
|
||||
DataColumn(label: Text('벤더명')),
|
||||
DataColumn(label: Text('등록일')),
|
||||
DataColumn(label: Text('상태')),
|
||||
DataColumn(label: Text('작업')),
|
||||
],
|
||||
rows: vendors.asMap().entries.map((entry) {
|
||||
final index = entry.key;
|
||||
final vendor = entry.value;
|
||||
final rowNumber = (currentPage - 1) * AppConstants.vendorPageSize + index + 1;
|
||||
|
||||
return DataRow(
|
||||
cells: [
|
||||
DataCell(
|
||||
Text(
|
||||
rowNumber.toString(),
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.w400,
|
||||
color: Colors.grey,
|
||||
),
|
||||
),
|
||||
),
|
||||
DataCell(
|
||||
Text(
|
||||
vendor.name,
|
||||
style: const TextStyle(fontWeight: FontWeight.w500),
|
||||
),
|
||||
),
|
||||
DataCell(
|
||||
Text(
|
||||
vendor.createdAt != null
|
||||
? vendor.createdAt!.toLocal().toString().split(' ')[0]
|
||||
: '-',
|
||||
),
|
||||
),
|
||||
DataCell(
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: vendor.isActive
|
||||
? Colors.green.withValues(alpha: 0.1)
|
||||
: Colors.grey.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Text(
|
||||
vendor.isActive ? '활성' : '비활성',
|
||||
style: TextStyle(
|
||||
color: vendor.isActive
|
||||
? Colors.green.shade700
|
||||
: Colors.grey.shade700,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
// 최소폭 추정: No(64) + 벤더명(240) + 등록일(140) + 상태(120) + 작업(200) + 여백(24)
|
||||
const double actionsW = 256.0; // 아이콘 2개 + 내부 패딩 여유(단일 행 유지)
|
||||
const double minW = 64 + 240 + 140 + 120 + actionsW + 24;
|
||||
final double extra = constraints.maxWidth - minW;
|
||||
final double tableW = extra >= 0 ? constraints.maxWidth : minW;
|
||||
const double nameBase = 240.0;
|
||||
final double nameW = nameBase; // 넓은 화면에서도 벤더명은 고정 폭, 남는 폭은 빈 컬럼이 흡수
|
||||
|
||||
// 스크롤이 필요 없으면 전체 폭 사용
|
||||
if (constraints.maxWidth >= minW) {
|
||||
return SizedBox(
|
||||
width: constraints.maxWidth,
|
||||
child: ShadTable.list(
|
||||
columnSpanExtent: (index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return const FixedTableSpanExtent(64);
|
||||
case 1:
|
||||
return const FixedTableSpanExtent(nameBase);
|
||||
case 2:
|
||||
return const FixedTableSpanExtent(120);
|
||||
case 3:
|
||||
return const FixedTableSpanExtent(100);
|
||||
case 4:
|
||||
return const FixedTableSpanExtent(actionsW);
|
||||
case 5:
|
||||
return const RemainingTableSpanExtent();
|
||||
default:
|
||||
return const FixedTableSpanExtent(100);
|
||||
}
|
||||
},
|
||||
header: [
|
||||
const ShadTableCell.header(child: Text('No')),
|
||||
ShadTableCell.header(child: SizedBox(width: nameW, child: const Text('벤더명'))),
|
||||
const ShadTableCell.header(child: Text('등록일')),
|
||||
const ShadTableCell.header(child: Text('상태')),
|
||||
ShadTableCell.header(child: SizedBox(width: actionsW, child: const Text('작업'))),
|
||||
const ShadTableCell.header(child: SizedBox.shrink()),
|
||||
],
|
||||
children: vendors.asMap().entries.map((entry) {
|
||||
final index = entry.key;
|
||||
final vendor = entry.value;
|
||||
final rowNumber = (currentPage - 1) * AppConstants.vendorPageSize + index + 1;
|
||||
return [
|
||||
ShadTableCell(child: Text(rowNumber.toString(), style: const TextStyle(color: Colors.grey))),
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: nameW,
|
||||
child: Text(vendor.name, overflow: TextOverflow.ellipsis, style: const TextStyle(fontWeight: FontWeight.w500)),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
DataCell(
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (vendor.id != null) ...[
|
||||
if (vendor.isActive) ...[
|
||||
ShadButton.ghost(
|
||||
onPressed: () => onEdit(vendor.id!),
|
||||
size: ShadButtonSize.sm,
|
||||
child: const Icon(Icons.edit, size: 16),
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: 120,
|
||||
child: Text(
|
||||
vendor.createdAt != null ? vendor.createdAt!.toLocal().toString().split(' ')[0] : '-',
|
||||
maxLines: 1,
|
||||
softWrap: false,
|
||||
overflow: TextOverflow.clip,
|
||||
),
|
||||
),
|
||||
),
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: 100,
|
||||
child: ShadBadge(
|
||||
backgroundColor: vendor.isActive ? const Color(0xFF22C55E).withValues(alpha: 0.1) : Colors.grey.withValues(alpha: 0.1),
|
||||
foregroundColor: vendor.isActive ? const Color(0xFF16A34A) : Colors.grey.shade700,
|
||||
child: Text(vendor.isActive ? '활성' : '비활성'),
|
||||
),
|
||||
),
|
||||
),
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: actionsW,
|
||||
child: FittedBox(
|
||||
alignment: Alignment.centerLeft,
|
||||
fit: BoxFit.scaleDown,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (vendor.id != null) ...[
|
||||
if (vendor.isActive) ...[
|
||||
ShadButton.ghost(
|
||||
onPressed: () => onEdit(vendor.id!),
|
||||
size: ShadButtonSize.sm,
|
||||
child: const Icon(Icons.edit, size: 16),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
ShadButton.ghost(
|
||||
onPressed: () => onDelete(vendor.id!, vendor.name),
|
||||
size: ShadButtonSize.sm,
|
||||
child: Icon(Icons.delete, size: 16, color: theme.colorScheme.destructive),
|
||||
),
|
||||
] else
|
||||
ShadButton.ghost(
|
||||
onPressed: () => onRestore(vendor.id!),
|
||||
size: ShadButtonSize.sm,
|
||||
child: const Icon(Icons.restore, size: 16, color: Color(0xFF10B981)),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
ShadButton.ghost(
|
||||
onPressed: () => onDelete(vendor.id!, vendor.name),
|
||||
size: ShadButtonSize.sm,
|
||||
child: Icon(
|
||||
Icons.delete,
|
||||
size: 16,
|
||||
color: theme.colorScheme.destructive,
|
||||
),
|
||||
),
|
||||
] else
|
||||
ShadButton.ghost(
|
||||
onPressed: () => onRestore(vendor.id!),
|
||||
size: ShadButtonSize.sm,
|
||||
child: const Icon(
|
||||
Icons.restore,
|
||||
size: 16,
|
||||
color: Color(0xFF10B981),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const ShadTableCell(child: SizedBox.shrink()),
|
||||
];
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
}
|
||||
// 스크롤 필요한 경우만 수평 스크롤 허용
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: SizedBox(
|
||||
width: tableW,
|
||||
child: ShadTable.list(
|
||||
columnSpanExtent: (index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return const FixedTableSpanExtent(64);
|
||||
case 1:
|
||||
return const FixedTableSpanExtent(nameBase);
|
||||
case 2:
|
||||
return const FixedTableSpanExtent(120);
|
||||
case 3:
|
||||
return const FixedTableSpanExtent(100);
|
||||
case 4:
|
||||
return const FixedTableSpanExtent(actionsW);
|
||||
default:
|
||||
return const FixedTableSpanExtent(100);
|
||||
}
|
||||
},
|
||||
header: [
|
||||
const ShadTableCell.header(child: Text('No')),
|
||||
ShadTableCell.header(child: SizedBox(width: nameW, child: const Text('벤더명'))),
|
||||
ShadTableCell.header(child: SizedBox(width: 120, child: const Text('등록일'))),
|
||||
ShadTableCell.header(child: SizedBox(width: 100, child: const Text('상태'))),
|
||||
ShadTableCell.header(child: SizedBox(width: actionsW, child: const Text('작업'))),
|
||||
],
|
||||
children: vendors.asMap().entries.map((entry) {
|
||||
final index = entry.key;
|
||||
final vendor = entry.value;
|
||||
final rowNumber = (currentPage - 1) * AppConstants.vendorPageSize + index + 1;
|
||||
return [
|
||||
ShadTableCell(child: Text(rowNumber.toString(), style: const TextStyle(color: Colors.grey))),
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: nameW,
|
||||
child: Text(vendor.name, overflow: TextOverflow.ellipsis, style: const TextStyle(fontWeight: FontWeight.w500)),
|
||||
),
|
||||
),
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: 120,
|
||||
child: Text(
|
||||
vendor.createdAt != null ? vendor.createdAt!.toLocal().toString().split(' ')[0] : '-',
|
||||
maxLines: 1,
|
||||
softWrap: false,
|
||||
overflow: TextOverflow.clip,
|
||||
),
|
||||
),
|
||||
),
|
||||
ShadTableCell(
|
||||
child: ShadBadge(
|
||||
backgroundColor: vendor.isActive ? const Color(0xFF22C55E).withValues(alpha: 0.1) : Colors.grey.withValues(alpha: 0.1),
|
||||
foregroundColor: vendor.isActive ? const Color(0xFF16A34A) : Colors.grey.shade700,
|
||||
child: Text(vendor.isActive ? '활성' : '비활성'),
|
||||
),
|
||||
),
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: actionsW,
|
||||
child: Wrap(
|
||||
alignment: WrapAlignment.start,
|
||||
spacing: 4,
|
||||
runSpacing: 4,
|
||||
children: [
|
||||
if (vendor.id != null) ...[
|
||||
if (vendor.isActive) ...[
|
||||
ShadButton.ghost(
|
||||
onPressed: () => onEdit(vendor.id!),
|
||||
size: ShadButtonSize.sm,
|
||||
child: const Icon(Icons.edit, size: 16),
|
||||
),
|
||||
ShadButton.ghost(
|
||||
onPressed: () => onDelete(vendor.id!, vendor.name),
|
||||
size: ShadButtonSize.sm,
|
||||
child: Icon(Icons.delete, size: 16, color: theme.colorScheme.destructive),
|
||||
),
|
||||
] else
|
||||
ShadButton.ghost(
|
||||
onPressed: () => onRestore(vendor.id!),
|
||||
size: ShadButtonSize.sm,
|
||||
child: const Icon(Icons.restore, size: 16, color: Color(0xFF10B981)),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
];
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -212,4 +319,4 @@ class VendorTable extends StatelessWidget {
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
438
lib/screens/vendor/vendor_list_screen.dart
vendored
438
lib/screens/vendor/vendor_list_screen.dart
vendored
@@ -32,17 +32,18 @@ class _VendorListScreenState extends State<VendorListScreen> {
|
||||
void _showCreateDialog() {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) => VendorFormDialog(
|
||||
onSave: (vendor) async {
|
||||
final success = await _controller.createVendor(vendor);
|
||||
if (success) {
|
||||
if (mounted) {
|
||||
Navigator.of(context).pop();
|
||||
_showSuccessToast('벤더가 성공적으로 등록되었습니다.');
|
||||
}
|
||||
}
|
||||
},
|
||||
),
|
||||
builder:
|
||||
(context) => VendorFormDialog(
|
||||
onSave: (vendor) async {
|
||||
final success = await _controller.createVendor(vendor);
|
||||
if (success) {
|
||||
if (mounted) {
|
||||
Navigator.of(context).pop();
|
||||
_showSuccessToast('벤더가 성공적으로 등록되었습니다.');
|
||||
}
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -51,18 +52,19 @@ class _VendorListScreenState extends State<VendorListScreen> {
|
||||
if (_controller.selectedVendor != null && mounted) {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) => VendorFormDialog(
|
||||
vendor: _controller.selectedVendor,
|
||||
onSave: (vendor) async {
|
||||
final success = await _controller.updateVendor(id, vendor);
|
||||
if (success) {
|
||||
if (mounted) {
|
||||
Navigator.of(context).pop();
|
||||
_showSuccessToast('벤더가 성공적으로 수정되었습니다.');
|
||||
}
|
||||
}
|
||||
},
|
||||
),
|
||||
builder:
|
||||
(context) => VendorFormDialog(
|
||||
vendor: _controller.selectedVendor,
|
||||
onSave: (vendor) async {
|
||||
final success = await _controller.updateVendor(id, vendor);
|
||||
if (success) {
|
||||
if (mounted) {
|
||||
Navigator.of(context).pop();
|
||||
_showSuccessToast('벤더가 성공적으로 수정되었습니다.');
|
||||
}
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -70,42 +72,42 @@ class _VendorListScreenState extends State<VendorListScreen> {
|
||||
void _showDeleteConfirmDialog(int id, String name) {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) => ShadDialog(
|
||||
title: const Text('벤더 삭제'),
|
||||
description: Text('$name 벤더를 삭제하시겠습니까?\n삭제된 벤더는 복원할 수 있습니다.'),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
ShadButton.outline(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: const Text('취소'),
|
||||
builder:
|
||||
(context) => ShadDialog(
|
||||
title: const Text('벤더 삭제'),
|
||||
description: Text('$name 벤더를 삭제하시겠습니까?\n삭제된 벤더는 복원할 수 있습니다.'),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
ShadButton.outline(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: const Text('취소'),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
ShadButton(
|
||||
onPressed: () async {
|
||||
Navigator.of(context).pop();
|
||||
final success = await _controller.deleteVendor(id);
|
||||
if (success) {
|
||||
_showSuccessToast('벤더가 삭제되었습니다.');
|
||||
} else {
|
||||
_showErrorToast(
|
||||
_controller.errorMessage ?? '삭제에 실패했습니다.',
|
||||
);
|
||||
}
|
||||
},
|
||||
child: const Text('삭제'),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
ShadButton(
|
||||
onPressed: () async {
|
||||
Navigator.of(context).pop();
|
||||
final success = await _controller.deleteVendor(id);
|
||||
if (success) {
|
||||
_showSuccessToast('벤더가 삭제되었습니다.');
|
||||
} else {
|
||||
_showErrorToast(_controller.errorMessage ?? '삭제에 실패했습니다.');
|
||||
}
|
||||
},
|
||||
child: const Text('삭제'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _showSuccessToast(String message) {
|
||||
ShadToaster.of(context).show(
|
||||
ShadToast(
|
||||
title: const Text('성공'),
|
||||
description: Text(message),
|
||||
),
|
||||
);
|
||||
ShadToaster.of(
|
||||
context,
|
||||
).show(ShadToast(title: const Text('성공'), description: Text(message)));
|
||||
}
|
||||
|
||||
void _showErrorToast(String message) {
|
||||
@@ -125,14 +127,8 @@ class _VendorListScreenState extends State<VendorListScreen> {
|
||||
title: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'벤더 관리',
|
||||
style: ShadcnTheme.headingH4,
|
||||
),
|
||||
Text(
|
||||
'장비 제조사 및 공급업체를 관리합니다',
|
||||
style: ShadcnTheme.bodySmall,
|
||||
),
|
||||
Text('벤더 관리', style: ShadcnTheme.headingH4),
|
||||
Text('장비 제조사 및 공급업체를 관리합니다', style: ShadcnTheme.bodySmall),
|
||||
],
|
||||
),
|
||||
backgroundColor: ShadcnTheme.background,
|
||||
@@ -149,6 +145,8 @@ class _VendorListScreenState extends State<VendorListScreen> {
|
||||
isLoading: controller.isLoading,
|
||||
error: controller.errorMessage,
|
||||
onRefresh: () => controller.initialize(),
|
||||
// 데이터 테이블이 카드 좌우 아웃라인까지 꽉 차도록 내부 패딩 제거
|
||||
dataAreaPadding: EdgeInsets.zero,
|
||||
);
|
||||
},
|
||||
),
|
||||
@@ -157,7 +155,7 @@ class _VendorListScreenState extends State<VendorListScreen> {
|
||||
|
||||
Widget _buildStatisticsCards(VendorController controller) {
|
||||
if (controller.isLoading) return const SizedBox();
|
||||
|
||||
|
||||
return Row(
|
||||
children: [
|
||||
_buildStatCard(
|
||||
@@ -204,7 +202,10 @@ class _VendorListScreenState extends State<VendorListScreen> {
|
||||
return StandardActionBar(
|
||||
totalCount: _controller.totalCount,
|
||||
leftActions: const [
|
||||
Text('벤더 목록', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
|
||||
Text(
|
||||
'벤더 목록',
|
||||
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
|
||||
),
|
||||
],
|
||||
rightActions: [
|
||||
ShadButton(
|
||||
@@ -222,10 +223,9 @@ class _VendorListScreenState extends State<VendorListScreen> {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Widget _buildDataTable(VendorController controller) {
|
||||
final vendors = controller.vendors;
|
||||
|
||||
|
||||
if (vendors.isEmpty) {
|
||||
return Center(
|
||||
child: Column(
|
||||
@@ -254,59 +254,259 @@ class _VendorListScreenState extends State<VendorListScreen> {
|
||||
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: ShadTable.list(
|
||||
header: const [
|
||||
ShadTableCell.header(child: Text('번호')),
|
||||
ShadTableCell.header(child: Text('벤더명')),
|
||||
ShadTableCell.header(child: Text('등록일')),
|
||||
ShadTableCell.header(child: Text('상태')),
|
||||
ShadTableCell.header(child: Text('작업')),
|
||||
],
|
||||
children: [
|
||||
for (int index = 0; index < vendors.length; index++)
|
||||
[
|
||||
// 번호
|
||||
ShadTableCell(child: Text(((_controller.currentPage - 1) * _controller.pageSize + index + 1).toString(), style: ShadcnTheme.bodySmall)),
|
||||
// 벤더명
|
||||
ShadTableCell(child: Text(vendors[index].name, overflow: TextOverflow.ellipsis)),
|
||||
// 등록일
|
||||
ShadTableCell(child: Text(
|
||||
vendors[index].createdAt != null
|
||||
? DateFormat('yyyy-MM-dd').format(vendors[index].createdAt!)
|
||||
: '-',
|
||||
style: ShadcnTheme.bodySmall,
|
||||
)),
|
||||
// 상태
|
||||
ShadTableCell(child: _buildStatusChip(vendors[index].isDeleted)),
|
||||
// 작업
|
||||
ShadTableCell(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ShadButton.ghost(
|
||||
onPressed: () => _showEditDialog(vendors[index].id!),
|
||||
child: const Icon(Icons.edit, size: 16),
|
||||
// 수평 패딩을 제거해 테이블이 카드 내부 전체 폭을 사용하도록 함
|
||||
padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 12.0),
|
||||
// 가용 너비를 최대로 활용하고, 필요 시 수평 스크롤 허용
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
// 컬럼 대략 폭 합: 번호(64) + 벤더명(320) + 등록일(120) + 상태(100) + 작업(256) + 여백
|
||||
const double actionsW = 256.0; // 아이콘 2개 + 내부 패딩 여유(단일 행 유지)
|
||||
const double minTableWidth = 64 + 320 + 120 + 100 + actionsW + 24;
|
||||
final double tableWidth =
|
||||
constraints.maxWidth > 0
|
||||
? (constraints.maxWidth >= minTableWidth
|
||||
? constraints.maxWidth
|
||||
: minTableWidth)
|
||||
: minTableWidth;
|
||||
|
||||
const double nameBaseWidth = 320.0;
|
||||
final double nameColumnWidth = nameBaseWidth; // 벤더명 고정 폭
|
||||
|
||||
// 스크롤이 필요 없는 경우: 수평 스크롤 제거, 전체 폭 사용
|
||||
if (constraints.maxWidth >= minTableWidth) {
|
||||
return SizedBox(
|
||||
width: constraints.maxWidth,
|
||||
child: ShadTable.list(
|
||||
// 0: 번호, 1: 벤더명(고정), 2: 등록일, 3: 상태, 4: 작업, 5: 여백(남는 폭 흡수)
|
||||
columnSpanExtent: (index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return const FixedTableSpanExtent(64);
|
||||
case 1:
|
||||
return const FixedTableSpanExtent(nameBaseWidth);
|
||||
case 2:
|
||||
return const FixedTableSpanExtent(120);
|
||||
case 3:
|
||||
return const FixedTableSpanExtent(100);
|
||||
case 4:
|
||||
return const FixedTableSpanExtent(actionsW);
|
||||
case 5:
|
||||
return const RemainingTableSpanExtent();
|
||||
default:
|
||||
return const FixedTableSpanExtent(100);
|
||||
}
|
||||
},
|
||||
header: [
|
||||
const ShadTableCell.header(child: Text('번호')),
|
||||
ShadTableCell.header(
|
||||
child: SizedBox(
|
||||
width: nameColumnWidth,
|
||||
child: const Text('벤더명'),
|
||||
),
|
||||
const SizedBox(width: ShadcnTheme.spacing1),
|
||||
ShadButton.ghost(
|
||||
onPressed: () => _showDeleteConfirmDialog(vendors[index].id!, vendors[index].name),
|
||||
child: Icon(Icons.delete, size: 16, color: ShadcnTheme.destructive),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
ShadTableCell.header(child: SizedBox(width: 120, child: const Text('등록일'))),
|
||||
ShadTableCell.header(child: SizedBox(width: 100, child: const Text('상태'))),
|
||||
ShadTableCell.header(
|
||||
child: SizedBox(width: actionsW, child: const Text('작업')),
|
||||
),
|
||||
const ShadTableCell.header(child: SizedBox.shrink()),
|
||||
],
|
||||
children: [
|
||||
for (int index = 0; index < vendors.length; index++)
|
||||
[
|
||||
// 번호
|
||||
ShadTableCell(
|
||||
child: Text(
|
||||
(((_controller.currentPage - 1) *
|
||||
_controller.pageSize) +
|
||||
index +
|
||||
1)
|
||||
.toString(),
|
||||
style: ShadcnTheme.bodySmall,
|
||||
),
|
||||
),
|
||||
// 벤더명 (가변 폭, 말줄임)
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: nameColumnWidth,
|
||||
child: Text(
|
||||
vendors[index].name,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
// 등록일
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: 120,
|
||||
child: Text(
|
||||
vendors[index].createdAt != null
|
||||
? DateFormat('yyyy-MM-dd').format(vendors[index].createdAt!)
|
||||
: '-',
|
||||
style: ShadcnTheme.bodySmall,
|
||||
maxLines: 1,
|
||||
softWrap: false,
|
||||
overflow: TextOverflow.clip,
|
||||
),
|
||||
),
|
||||
),
|
||||
// 상태
|
||||
ShadTableCell(
|
||||
child: SizedBox(width: 100, child: _buildStatusChip(vendors[index].isDeleted)),
|
||||
),
|
||||
// 작업 (아이콘 그룹 - 단일 행 유지)
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: actionsW,
|
||||
child: FittedBox(
|
||||
alignment: Alignment.centerLeft,
|
||||
fit: BoxFit.scaleDown,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _showEditDialog(vendors[index].id!),
|
||||
child: const Icon(Icons.edit, size: 16),
|
||||
),
|
||||
const SizedBox(width: ShadcnTheme.spacing1),
|
||||
ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _showDeleteConfirmDialog(vendors[index].id!, vendors[index].name),
|
||||
child: Icon(Icons.delete, size: 16, color: ShadcnTheme.destructive),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
// 남는 폭 흡수용 빈 컬럼(전폭 사용)
|
||||
const ShadTableCell(child: SizedBox.shrink()),
|
||||
],
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// 스크롤이 필요한 경우만 수평 스크롤 사용
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: SizedBox(
|
||||
width: tableWidth,
|
||||
child: ShadTable.list(
|
||||
// 작은 화면에서도 최소 폭을 지키도록 고정 폭 지정
|
||||
columnSpanExtent: (index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return const FixedTableSpanExtent(64);
|
||||
case 1:
|
||||
return const FixedTableSpanExtent(nameBaseWidth);
|
||||
case 2:
|
||||
return const FixedTableSpanExtent(120);
|
||||
case 3:
|
||||
return const FixedTableSpanExtent(100);
|
||||
case 4:
|
||||
return const FixedTableSpanExtent(actionsW);
|
||||
default:
|
||||
return const FixedTableSpanExtent(100);
|
||||
}
|
||||
},
|
||||
header: [
|
||||
const ShadTableCell.header(child: Text('번호')),
|
||||
ShadTableCell.header(
|
||||
child: SizedBox(
|
||||
width: nameColumnWidth,
|
||||
child: const Text('벤더명'),
|
||||
),
|
||||
),
|
||||
ShadTableCell.header(child: SizedBox(width: 120, child: const Text('등록일'))),
|
||||
ShadTableCell.header(child: SizedBox(width: 100, child: const Text('상태'))),
|
||||
ShadTableCell.header(
|
||||
child: SizedBox(width: actionsW, child: const Text('작업')),
|
||||
),
|
||||
],
|
||||
children: [
|
||||
for (int index = 0; index < vendors.length; index++)
|
||||
[
|
||||
// 번호
|
||||
ShadTableCell(
|
||||
child: Text(
|
||||
(((_controller.currentPage - 1) *
|
||||
_controller.pageSize) +
|
||||
index +
|
||||
1)
|
||||
.toString(),
|
||||
style: ShadcnTheme.bodySmall,
|
||||
),
|
||||
),
|
||||
// 벤더명 (가변 폭, 말줄임)
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: nameColumnWidth,
|
||||
child: Text(
|
||||
vendors[index].name,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
// 등록일
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: 120,
|
||||
child: Text(
|
||||
vendors[index].createdAt != null
|
||||
? DateFormat('yyyy-MM-dd').format(vendors[index].createdAt!)
|
||||
: '-',
|
||||
style: ShadcnTheme.bodySmall,
|
||||
maxLines: 1,
|
||||
softWrap: false,
|
||||
overflow: TextOverflow.clip,
|
||||
),
|
||||
),
|
||||
),
|
||||
// 상태
|
||||
ShadTableCell(
|
||||
child: SizedBox(width: 100, child: _buildStatusChip(vendors[index].isDeleted)),
|
||||
),
|
||||
// 작업 (아이콘 그룹 - 단일 행 유지)
|
||||
ShadTableCell(
|
||||
child: SizedBox(
|
||||
width: actionsW,
|
||||
child: FittedBox(
|
||||
alignment: Alignment.centerLeft,
|
||||
fit: BoxFit.scaleDown,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _showEditDialog(vendors[index].id!),
|
||||
child: const Icon(Icons.edit, size: 16),
|
||||
),
|
||||
const SizedBox(width: ShadcnTheme.spacing1),
|
||||
ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _showDeleteConfirmDialog(vendors[index].id!, vendors[index].name),
|
||||
child: Icon(Icons.delete, size: 16, color: ShadcnTheme.destructive),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
// 별도 필러 컬럼 없이 벤더명 컬럼으로 남는 공간을 흡수
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Widget _buildPagination(VendorController controller) {
|
||||
if (controller.totalPages <= 1) return const SizedBox();
|
||||
|
||||
return Pagination(
|
||||
currentPage: controller.currentPage,
|
||||
totalCount: controller.totalCount,
|
||||
@@ -333,26 +533,17 @@ class _VendorListScreenState extends State<VendorListScreen> {
|
||||
color: color.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(ShadcnTheme.radiusLg),
|
||||
),
|
||||
child: Icon(
|
||||
icon,
|
||||
color: color,
|
||||
size: 20,
|
||||
),
|
||||
child: Icon(icon, color: color, size: 20),
|
||||
),
|
||||
const SizedBox(width: ShadcnTheme.spacing3),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
style: ShadcnTheme.bodySmall,
|
||||
),
|
||||
Text(title, style: ShadcnTheme.bodySmall),
|
||||
Text(
|
||||
value,
|
||||
style: ShadcnTheme.headingH6.copyWith(
|
||||
color: color,
|
||||
),
|
||||
style: ShadcnTheme.headingH6.copyWith(color: color),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -379,5 +570,4 @@ class _VendorListScreenState extends State<VendorListScreen> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user