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:
@@ -105,7 +105,49 @@ class _EquipmentListState extends State<EquipmentList> {
|
||||
final allSelected = items.isNotEmpty &&
|
||||
items.every((e) => _selectedItems.contains(e.equipment.id));
|
||||
|
||||
// 표시 컬럼 판정 (기존 조건과 동일)
|
||||
final showCompany = availableWidth > 900;
|
||||
final showWarehouse = availableWidth > 1100;
|
||||
final showDate = availableWidth > 800;
|
||||
|
||||
// 컬럼 최소 폭 추정치 (px)
|
||||
// 체크박스 컬럼은 셀 기본 좌우 패딩(16+16)을 고려해 최소 50px 이상 필요
|
||||
const checkboxW = 56.0;
|
||||
const statusW = 80.0;
|
||||
const equipNoW = 120.0;
|
||||
const serialW = 160.0;
|
||||
const vendorW = 160.0;
|
||||
const modelBaseW = 240.0; // 남는 폭은 이 컬럼이 흡수
|
||||
const companyW = 180.0;
|
||||
const warehouseW = 180.0;
|
||||
const dateW = 140.0;
|
||||
const actionsW = 160.0; // 아이콘 3개 수용
|
||||
|
||||
double minTableWidth = checkboxW + statusW + equipNoW + serialW + vendorW + modelBaseW + actionsW;
|
||||
if (showCompany) minTableWidth += companyW;
|
||||
if (showWarehouse) minTableWidth += warehouseW;
|
||||
if (showDate) minTableWidth += dateW;
|
||||
|
||||
final extra = (availableWidth - minTableWidth);
|
||||
final double modelColumnWidth = modelBaseW; // 모델은 고정 폭, 남는 폭은 filler가 흡수
|
||||
|
||||
// 컬럼 폭 정의(마지막 filler가 잔여 폭 흡수)
|
||||
final columnExtents = <TableSpanExtent>[
|
||||
const FixedTableSpanExtent(checkboxW),
|
||||
const FixedTableSpanExtent(statusW),
|
||||
const FixedTableSpanExtent(equipNoW),
|
||||
const FixedTableSpanExtent(serialW),
|
||||
const FixedTableSpanExtent(vendorW),
|
||||
const FixedTableSpanExtent(modelBaseW),
|
||||
if (showCompany) const FixedTableSpanExtent(companyW),
|
||||
if (showWarehouse) const FixedTableSpanExtent(warehouseW),
|
||||
if (showDate) const FixedTableSpanExtent(dateW),
|
||||
const FixedTableSpanExtent(actionsW),
|
||||
const RemainingTableSpanExtent(),
|
||||
];
|
||||
|
||||
return ShadTable.list(
|
||||
columnSpanExtent: (index) => columnExtents[index],
|
||||
header: [
|
||||
// 선택
|
||||
ShadTableCell.header(
|
||||
@@ -128,11 +170,13 @@ class _EquipmentListState extends State<EquipmentList> {
|
||||
ShadTableCell.header(child: const Text('장비번호')),
|
||||
ShadTableCell.header(child: const Text('시리얼')),
|
||||
ShadTableCell.header(child: const Text('제조사')),
|
||||
ShadTableCell.header(child: const Text('모델')),
|
||||
if (availableWidth > 900) ShadTableCell.header(child: const Text('회사')),
|
||||
if (availableWidth > 1100) ShadTableCell.header(child: const Text('창고')),
|
||||
if (availableWidth > 800) ShadTableCell.header(child: const Text('일자')),
|
||||
ShadTableCell.header(child: const Text('관리')),
|
||||
// 남는 폭을 모델 컬럼이 흡수
|
||||
ShadTableCell.header(child: SizedBox(width: modelColumnWidth, child: const Text('모델'))),
|
||||
if (showCompany) ShadTableCell.header(child: const Text('회사')),
|
||||
if (showWarehouse) ShadTableCell.header(child: const Text('창고')),
|
||||
if (showDate) ShadTableCell.header(child: const Text('일자')),
|
||||
ShadTableCell.header(child: SizedBox(width: actionsW, child: const Text('관리'))),
|
||||
const ShadTableCell.header(child: SizedBox.shrink()),
|
||||
],
|
||||
children: items.map((item) {
|
||||
final id = item.equipment.id;
|
||||
@@ -177,15 +221,18 @@ class _EquipmentListState extends State<EquipmentList> {
|
||||
item.vendorName ?? item.equipment.manufacturer,
|
||||
),
|
||||
),
|
||||
// 모델
|
||||
// 모델 (가변 폭)
|
||||
ShadTableCell(
|
||||
child: _buildTextWithTooltip(
|
||||
item.modelName ?? item.equipment.modelName,
|
||||
item.modelName ?? item.equipment.modelName,
|
||||
child: SizedBox(
|
||||
width: modelColumnWidth,
|
||||
child: _buildTextWithTooltip(
|
||||
item.modelName ?? item.equipment.modelName,
|
||||
item.modelName ?? item.equipment.modelName,
|
||||
),
|
||||
),
|
||||
),
|
||||
// 회사 (반응형)
|
||||
if (availableWidth > 900)
|
||||
if (showCompany)
|
||||
ShadTableCell(
|
||||
child: _buildTextWithTooltip(
|
||||
item.companyName ?? item.currentCompany ?? '-',
|
||||
@@ -193,7 +240,7 @@ class _EquipmentListState extends State<EquipmentList> {
|
||||
),
|
||||
),
|
||||
// 창고 (반응형)
|
||||
if (availableWidth > 1100)
|
||||
if (showWarehouse)
|
||||
ShadTableCell(
|
||||
child: _buildTextWithTooltip(
|
||||
item.warehouseLocation ?? '-',
|
||||
@@ -201,49 +248,57 @@ class _EquipmentListState extends State<EquipmentList> {
|
||||
),
|
||||
),
|
||||
// 일자 (반응형)
|
||||
if (availableWidth > 800)
|
||||
if (showDate)
|
||||
ShadTableCell(
|
||||
child: _buildTextWithTooltip(
|
||||
_formatDate(item.date),
|
||||
_formatDate(item.date),
|
||||
),
|
||||
),
|
||||
// 관리 액션
|
||||
// 관리 액션 (오버플로우 방지)
|
||||
ShadTableCell(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Tooltip(
|
||||
message: '이력 보기',
|
||||
child: ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _showEquipmentHistoryDialog(item.equipment.id ?? 0),
|
||||
child: const Icon(Icons.history, size: 16),
|
||||
),
|
||||
child: SizedBox(
|
||||
width: actionsW,
|
||||
child: FittedBox(
|
||||
alignment: Alignment.centerLeft,
|
||||
fit: BoxFit.scaleDown,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Tooltip(
|
||||
message: '이력 보기',
|
||||
child: ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _showEquipmentHistoryDialog(item.equipment.id ?? 0),
|
||||
child: const Icon(Icons.history, size: 16),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Tooltip(
|
||||
message: '수정',
|
||||
child: ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _handleEdit(item),
|
||||
child: const Icon(Icons.edit, size: 16),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Tooltip(
|
||||
message: '삭제',
|
||||
child: ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _handleDelete(item),
|
||||
child: const Icon(Icons.delete_outline, size: 16),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Tooltip(
|
||||
message: '수정',
|
||||
child: ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _handleEdit(item),
|
||||
child: const Icon(Icons.edit, size: 16),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Tooltip(
|
||||
message: '삭제',
|
||||
child: ShadButton.ghost(
|
||||
size: ShadButtonSize.sm,
|
||||
onPressed: () => _handleDelete(item),
|
||||
child: const Icon(Icons.delete_outline, size: 16),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
];
|
||||
}).toList(),
|
||||
),
|
||||
const ShadTableCell(child: SizedBox.shrink()),
|
||||
];
|
||||
}).toList(),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -784,15 +839,16 @@ class _EquipmentListState extends State<EquipmentList> {
|
||||
// 데이터 테이블
|
||||
dataTable: _buildDataTable(filteredEquipments),
|
||||
|
||||
// 페이지네이션 - 조건 수정으로 표시 개선
|
||||
pagination: controller.total > controller.pageSize ? Pagination(
|
||||
// 페이지네이션 - 항상 하단 표시
|
||||
pagination: Pagination(
|
||||
totalCount: controller.total,
|
||||
currentPage: controller.currentPage,
|
||||
pageSize: controller.pageSize,
|
||||
onPageChanged: (page) {
|
||||
controller.goToPage(page);
|
||||
},
|
||||
) : null,
|
||||
),
|
||||
dataAreaPadding: EdgeInsets.zero,
|
||||
);
|
||||
},
|
||||
),
|
||||
@@ -811,7 +867,7 @@ class _EquipmentListState extends State<EquipmentList> {
|
||||
decoration: BoxDecoration(
|
||||
color: ShadcnTheme.card,
|
||||
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
|
||||
border: Border.all(color: Colors.black),
|
||||
border: Border.all(color: ShadcnTheme.border),
|
||||
),
|
||||
child: TextField(
|
||||
controller: _searchController,
|
||||
@@ -837,7 +893,7 @@ class _EquipmentListState extends State<EquipmentList> {
|
||||
text: '검색',
|
||||
onPressed: _onSearch,
|
||||
variant: ShadcnButtonVariant.primary,
|
||||
textColor: Colors.white,
|
||||
textColor: ShadcnTheme.primaryForeground,
|
||||
icon: const Icon(Icons.search, size: 16),
|
||||
),
|
||||
),
|
||||
@@ -963,7 +1019,7 @@ class _EquipmentListState extends State<EquipmentList> {
|
||||
}
|
||||
},
|
||||
variant: ShadcnButtonVariant.primary,
|
||||
textColor: Colors.white,
|
||||
textColor: ShadcnTheme.primaryForeground,
|
||||
icon: const Icon(Icons.add, size: 16),
|
||||
),
|
||||
],
|
||||
@@ -1052,14 +1108,14 @@ class _EquipmentListState extends State<EquipmentList> {
|
||||
}
|
||||
},
|
||||
variant: ShadcnButtonVariant.primary,
|
||||
textColor: Colors.white,
|
||||
textColor: ShadcnTheme.primaryForeground,
|
||||
icon: const Icon(Icons.add, size: 16),
|
||||
),
|
||||
ShadcnButton(
|
||||
text: '출고',
|
||||
onPressed: selectedInCount > 0 ? _handleOutEquipment : null,
|
||||
variant: selectedInCount > 0 ? ShadcnButtonVariant.primary : ShadcnButtonVariant.secondary,
|
||||
textColor: selectedInCount > 0 ? Colors.white : null,
|
||||
textColor: selectedInCount > 0 ? ShadcnTheme.primaryForeground : null,
|
||||
icon: const Icon(Icons.local_shipping, size: 16),
|
||||
),
|
||||
ShadcnButton(
|
||||
@@ -1156,31 +1212,19 @@ class _EquipmentListState extends State<EquipmentList> {
|
||||
}
|
||||
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: Colors.black),
|
||||
border: Border.all(color: ShadcnTheme.border),
|
||||
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
|
||||
),
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final availableWidth = constraints.maxWidth;
|
||||
final minimumWidth = _getMinimumTableWidth(pagedEquipments, availableWidth);
|
||||
final needsHorizontalScroll = minimumWidth > availableWidth;
|
||||
|
||||
// ShadTable 경로로 일괄 전환 (가로 스크롤은 ShadTable 외부에서 처리)
|
||||
if (needsHorizontalScroll) {
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
controller: _horizontalScrollController,
|
||||
child: SizedBox(
|
||||
width: minimumWidth,
|
||||
child: _buildShadTable(pagedEquipments, availableWidth: availableWidth),
|
||||
),
|
||||
);
|
||||
} else {
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final availableWidth = constraints.maxWidth;
|
||||
// 수평 스크롤 배제: 가용 너비 기준으로 컬럼 가감 처리 (내부에서 반응형 처리)
|
||||
return _buildShadTable(pagedEquipments, availableWidth: availableWidth);
|
||||
}
|
||||
},
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user