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:
JiWoong Sul
@@ -1,4 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:superport/screens/common/theme_shadcn.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
import 'package:get_it/get_it.dart';
|
||||
|
||||
@@ -171,13 +172,13 @@ class _RentFormDialogState extends State<RentFormDialog> {
|
||||
|
||||
// 3단계 상태 처리 (UserForm 패턴 적용)
|
||||
_isLoadingHistories
|
||||
? const SizedBox(
|
||||
? SizedBox(
|
||||
height: 56,
|
||||
child: Center(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
ShadProgress(),
|
||||
children: const [
|
||||
SizedBox(width: 120, child: ShadProgress()),
|
||||
SizedBox(width: 8),
|
||||
Text('장비 이력을 불러오는 중...'),
|
||||
],
|
||||
@@ -229,33 +230,33 @@ class _RentFormDialogState extends State<RentFormDialog> {
|
||||
options: _historyController.historyList.map((history) {
|
||||
return ShadOption(
|
||||
value: history.id!,
|
||||
child: Row(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
'${history.equipment?.serialNumber ?? "Serial N/A"} - ${history.equipment?.modelName ?? "Model N/A"}',
|
||||
style: const TextStyle(fontWeight: FontWeight.w500),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
Text(
|
||||
'거래: ${history.transactionType} | 수량: ${history.quantity} | ${history.transactedAt.toString().split(' ')[0]}',
|
||||
style: const TextStyle(fontSize: 12, color: Colors.grey),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
'${history.equipment?.serialNumber ?? "Serial N/A"} - ${history.equipment?.modelName ?? "Model N/A"}',
|
||||
style: const TextStyle(fontWeight: FontWeight.w500),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
Text(
|
||||
'거래: ${history.transactionType} | 수량: ${history.quantity} | ${history.transactedAt.toString().split(' ')[0]}',
|
||||
style: const TextStyle(fontSize: 12, color: Colors.grey),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
selectedOptionBuilder: (context, value) {
|
||||
if (_historyController.historyList.isEmpty) {
|
||||
return const Text('이력 없음');
|
||||
}
|
||||
final selectedHistory = _historyController.historyList
|
||||
.firstWhere((h) => h.id == value);
|
||||
.firstWhere(
|
||||
(h) => h.id == value,
|
||||
orElse: () => _historyController.historyList.first,
|
||||
);
|
||||
return Text(
|
||||
'${selectedHistory.equipment?.serialNumber ?? "Serial N/A"} - ${selectedHistory.equipment?.modelName ?? "Model N/A"}',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
@@ -328,7 +329,7 @@ class _RentFormDialogState extends State<RentFormDialog> {
|
||||
: '날짜 선택',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
color: _endDate != null ? Colors.black : Colors.grey,
|
||||
color: _endDate != null ? ShadcnTheme.foreground : ShadcnTheme.mutedForeground,
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -397,4 +398,4 @@ class _RentFormDialogState extends State<RentFormDialog> {
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -176,7 +176,7 @@ class _RentListScreenState extends State<RentListScreen> {
|
||||
}
|
||||
|
||||
|
||||
/// 데이터 테이블 빌더
|
||||
/// 데이터 테이블 빌더 (ShadTable)
|
||||
Widget _buildDataTable(RentController controller) {
|
||||
final rents = controller.rents;
|
||||
|
||||
@@ -185,18 +185,9 @@ class _RentListScreenState extends State<RentListScreen> {
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.business_center_outlined,
|
||||
size: 64,
|
||||
color: ShadcnTheme.mutedForeground,
|
||||
),
|
||||
Icon(Icons.business_center_outlined, size: 64, color: ShadcnTheme.mutedForeground),
|
||||
const SizedBox(height: ShadcnTheme.spacing4),
|
||||
Text(
|
||||
'등록된 임대 계약이 없습니다',
|
||||
style: ShadcnTheme.bodyMedium.copyWith(
|
||||
color: ShadcnTheme.mutedForeground,
|
||||
),
|
||||
),
|
||||
Text('등록된 임대 계약이 없습니다', style: ShadcnTheme.bodyMedium.copyWith(color: ShadcnTheme.mutedForeground)),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -207,40 +198,109 @@ class _RentListScreenState extends State<RentListScreen> {
|
||||
border: Border.all(color: ShadcnTheme.border),
|
||||
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
// 고정 헤더
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: ShadcnTheme.spacing4, vertical: ShadcnTheme.spacing3),
|
||||
decoration: BoxDecoration(
|
||||
color: ShadcnTheme.muted.withValues(alpha: 0.3),
|
||||
border: Border(bottom: BorderSide(color: ShadcnTheme.border)),
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(ShadcnTheme.radiusMd),
|
||||
topRight: Radius.circular(ShadcnTheme.radiusMd),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
_buildHeaderCell('ID', 60),
|
||||
_buildHeaderCell('장비 이력 ID', 120),
|
||||
_buildHeaderCell('시작일', 100),
|
||||
_buildHeaderCell('종료일', 100),
|
||||
_buildHeaderCell('기간 (일)', 80),
|
||||
_buildHeaderCell('상태', 80),
|
||||
_buildHeaderCell('작업', 140),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
// 고정폭 + 마지막 filler
|
||||
const double idW = 60;
|
||||
const double equipHistoryW = 180;
|
||||
const double startW = 120;
|
||||
const double endW = 120;
|
||||
const double daysW = 80;
|
||||
const double statusW = 80;
|
||||
const double actionsW = 160;
|
||||
|
||||
// 스크롤 가능한 바디
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
itemCount: rents.length,
|
||||
itemBuilder: (context, index) => _buildTableRow(rents[index], index),
|
||||
),
|
||||
),
|
||||
],
|
||||
final double minTableWidth = idW + equipHistoryW + startW + endW + daysW + statusW + actionsW + 24;
|
||||
final double tableWidth = constraints.maxWidth >= minTableWidth ? constraints.maxWidth : minTableWidth;
|
||||
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: SizedBox(
|
||||
width: tableWidth,
|
||||
child: ShadTable.list(
|
||||
columnSpanExtent: (index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return const FixedTableSpanExtent(idW);
|
||||
case 1:
|
||||
return const FixedTableSpanExtent(equipHistoryW);
|
||||
case 2:
|
||||
return const FixedTableSpanExtent(startW);
|
||||
case 3:
|
||||
return const FixedTableSpanExtent(endW);
|
||||
case 4:
|
||||
return const FixedTableSpanExtent(daysW);
|
||||
case 5:
|
||||
return const FixedTableSpanExtent(statusW);
|
||||
case 6:
|
||||
return const FixedTableSpanExtent(actionsW);
|
||||
case 7:
|
||||
return const RemainingTableSpanExtent();
|
||||
default:
|
||||
return const FixedTableSpanExtent(100);
|
||||
}
|
||||
},
|
||||
header: const [
|
||||
ShadTableCell.header(child: Text('ID')),
|
||||
ShadTableCell.header(child: Text('장비 이력 ID')),
|
||||
ShadTableCell.header(child: Text('시작일')),
|
||||
ShadTableCell.header(child: Text('종료일')),
|
||||
ShadTableCell.header(child: Text('기간 (일)')),
|
||||
ShadTableCell.header(child: Text('상태')),
|
||||
ShadTableCell.header(child: Text('작업')),
|
||||
ShadTableCell.header(child: SizedBox.shrink()),
|
||||
],
|
||||
children: rents.map((rent) {
|
||||
final days = _controller.calculateRentDays(rent.startedAt, rent.endedAt);
|
||||
final status = _controller.getRentStatus(rent);
|
||||
return [
|
||||
ShadTableCell(child: Text(rent.id?.toString() ?? '-', style: ShadcnTheme.bodySmall)),
|
||||
ShadTableCell(child: Text(rent.equipmentHistoryId.toString(), style: ShadcnTheme.bodySmall)),
|
||||
ShadTableCell(child: Text(DateFormat('yyyy-MM-dd').format(rent.startedAt), style: ShadcnTheme.bodySmall)),
|
||||
ShadTableCell(child: Text(DateFormat('yyyy-MM-dd').format(rent.endedAt), style: ShadcnTheme.bodySmall)),
|
||||
ShadTableCell(child: Text('$days', style: ShadcnTheme.bodySmall)),
|
||||
ShadTableCell(child: _buildStatusChip(status)),
|
||||
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(rent),
|
||||
child: const Icon(Icons.edit, size: 16),
|
||||
),
|
||||
const SizedBox(width: ShadcnTheme.spacing1),
|
||||
if (status == '진행중')
|
||||
ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _returnRent(rent),
|
||||
child: const Icon(Icons.assignment_return, size: 16),
|
||||
),
|
||||
if (status == '진행중') const SizedBox(width: ShadcnTheme.spacing1),
|
||||
ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _deleteRent(rent),
|
||||
child: Icon(Icons.delete, size: 16, color: ShadcnTheme.destructive),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const ShadTableCell(child: SizedBox.shrink()),
|
||||
];
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -257,7 +317,7 @@ class _RentListScreenState extends State<RentListScreen> {
|
||||
}
|
||||
|
||||
/// 테이블 행 빌드
|
||||
Widget _buildTableRow(RentDto rent, int index) {
|
||||
Widget _buildTableRow(RentDto rent, int index, double equipHistoryW) {
|
||||
final days = _controller.calculateRentDays(rent.startedAt, rent.endedAt);
|
||||
final status = _controller.getRentStatus(rent);
|
||||
|
||||
@@ -285,7 +345,7 @@ class _RentListScreenState extends State<RentListScreen> {
|
||||
|
||||
// 장비 이력 ID
|
||||
SizedBox(
|
||||
width: 120,
|
||||
width: equipHistoryW,
|
||||
child: Text(
|
||||
rent.equipmentHistoryId.toString(),
|
||||
style: ShadcnTheme.bodyMedium,
|
||||
@@ -327,34 +387,38 @@ class _RentListScreenState extends State<RentListScreen> {
|
||||
|
||||
// 작업 버튼들
|
||||
SizedBox(
|
||||
width: 140,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _showEditDialog(rent),
|
||||
child: const Icon(Icons.edit, size: 16),
|
||||
),
|
||||
const SizedBox(width: ShadcnTheme.spacing1),
|
||||
if (status == '진행중')
|
||||
width: 180,
|
||||
child: FittedBox(
|
||||
alignment: Alignment.centerLeft,
|
||||
fit: BoxFit.scaleDown,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _returnRent(rent),
|
||||
child: const Icon(Icons.assignment_return, size: 16),
|
||||
onPressed: () => _showEditDialog(rent),
|
||||
child: const Icon(Icons.edit, size: 16),
|
||||
),
|
||||
if (status == '진행중')
|
||||
const SizedBox(width: ShadcnTheme.spacing1),
|
||||
ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _deleteRent(rent),
|
||||
child: Icon(
|
||||
Icons.delete,
|
||||
size: 16,
|
||||
color: ShadcnTheme.destructive,
|
||||
if (status == '진행중')
|
||||
ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _returnRent(rent),
|
||||
child: const Icon(Icons.assignment_return, size: 16),
|
||||
),
|
||||
if (status == '진행중')
|
||||
const SizedBox(width: ShadcnTheme.spacing1),
|
||||
ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _deleteRent(rent),
|
||||
child: Icon(
|
||||
Icons.delete,
|
||||
size: 16,
|
||||
color: ShadcnTheme.destructive,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -445,21 +509,14 @@ class _RentListScreenState extends State<RentListScreen> {
|
||||
Widget? _buildPagination() {
|
||||
return Consumer<RentController>(
|
||||
builder: (context, controller, child) {
|
||||
// 항상 페이지네이션 정보 표시 (총 개수라도)
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: ShadcnTheme.spacing2),
|
||||
child: controller.totalPages > 1
|
||||
? Pagination(
|
||||
totalCount: controller.totalRents,
|
||||
currentPage: controller.currentPage,
|
||||
pageSize: AppConstants.rentPageSize,
|
||||
onPageChanged: (page) => controller.loadRents(page: page),
|
||||
)
|
||||
: Text(
|
||||
'총 ${controller.totalRents}개 임대 계약',
|
||||
style: ShadcnTheme.bodySmall,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
child: Pagination(
|
||||
totalCount: controller.totalRents,
|
||||
currentPage: controller.currentPage,
|
||||
pageSize: AppConstants.rentPageSize,
|
||||
onPageChanged: (page) => controller.loadRents(page: page),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -481,9 +538,10 @@ class _RentListScreenState extends State<RentListScreen> {
|
||||
onRefresh: () => controller.loadRents(refresh: true),
|
||||
emptyMessage: '등록된 임대 계약이 없습니다',
|
||||
emptyIcon: Icons.business_center_outlined,
|
||||
dataAreaPadding: EdgeInsets.zero,
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user