188 lines
5.2 KiB
Dart
188 lines
5.2 KiB
Dart
import 'dart:async';
|
|
import 'dart:ui';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:sheetless/core/models/change.dart';
|
|
import 'package:sheetless/core/models/sheet.dart';
|
|
import 'package:sheetless/core/services/storage_service.dart';
|
|
|
|
import '../../../shared/widgets/edit_sheet_bottom_sheet.dart';
|
|
import 'sheet_list_item.dart';
|
|
import 'sheet_search_bar.dart';
|
|
|
|
/// Widget displaying a searchable list of sheets.
|
|
///
|
|
/// Features:
|
|
/// - Debounced search filtering by name and composer
|
|
/// - Long-press to edit sheet metadata
|
|
/// - Cross-platform scroll support (mouse and touch)
|
|
class SheetsList extends StatefulWidget {
|
|
final List<Sheet> sheets;
|
|
final ValueSetter<Sheet> onSheetSelected;
|
|
|
|
const SheetsList({
|
|
super.key,
|
|
required this.sheets,
|
|
required this.onSheetSelected,
|
|
});
|
|
|
|
@override
|
|
State<SheetsList> createState() => _SheetsListState();
|
|
}
|
|
|
|
class _SheetsListState extends State<SheetsList> {
|
|
static const _searchDebounceMs = 500;
|
|
|
|
final _storageService = StorageService();
|
|
final _searchController = TextEditingController();
|
|
Timer? _debounceTimer;
|
|
late List<Sheet> _filteredSheets;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_filteredSheets = widget.sheets;
|
|
_searchController.addListener(_onSearchChanged);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_searchController.removeListener(_onSearchChanged);
|
|
_searchController.dispose();
|
|
_debounceTimer?.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Search
|
|
// ---------------------------------------------------------------------------
|
|
|
|
void _onSearchChanged() {
|
|
_debounceTimer?.cancel();
|
|
_debounceTimer = Timer(
|
|
const Duration(milliseconds: _searchDebounceMs),
|
|
_filterSheets,
|
|
);
|
|
}
|
|
|
|
void _filterSheets() {
|
|
final query = _searchController.text.toLowerCase().trim();
|
|
|
|
if (query.isEmpty) {
|
|
setState(() => _filteredSheets = widget.sheets);
|
|
return;
|
|
}
|
|
|
|
// Split query into terms for multi-word search
|
|
final terms = query.split(RegExp(r'\s+'));
|
|
|
|
setState(() {
|
|
_filteredSheets = widget.sheets.where((sheet) {
|
|
final name = sheet.name.toLowerCase();
|
|
final composer = sheet.composerName.toLowerCase();
|
|
|
|
// Each term must appear in either name or composer
|
|
return terms.every(
|
|
(term) => name.contains(term) || composer.contains(term),
|
|
);
|
|
}).toList();
|
|
});
|
|
}
|
|
|
|
void _clearSearch() {
|
|
_searchController.clear();
|
|
setState(() => _filteredSheets = widget.sheets);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Edit Sheet
|
|
// ---------------------------------------------------------------------------
|
|
|
|
void _openEditSheet(BuildContext context, Sheet sheet) {
|
|
showModalBottomSheet(
|
|
context: context,
|
|
isScrollControlled: true,
|
|
builder: (_) => EditSheetBottomSheet(
|
|
sheet: sheet,
|
|
onSave: (newName, newComposer) =>
|
|
_handleSheetEdit(sheet, newName, newComposer),
|
|
),
|
|
);
|
|
}
|
|
|
|
void _handleSheetEdit(Sheet sheet, String newName, String newComposer) {
|
|
// Queue changes for server sync
|
|
if (newName != sheet.name) {
|
|
_storageService.writeChange(
|
|
Change(
|
|
type: ChangeType.sheetNameChange,
|
|
sheetUuid: sheet.uuid,
|
|
value: newName,
|
|
),
|
|
);
|
|
}
|
|
if (newComposer != sheet.composerName) {
|
|
_storageService.writeChange(
|
|
Change(
|
|
type: ChangeType.composerNameChange,
|
|
sheetUuid: sheet.uuid,
|
|
value: newComposer,
|
|
),
|
|
);
|
|
}
|
|
|
|
// Update local state
|
|
setState(() {
|
|
sheet.name = newName;
|
|
sheet.composerName = newComposer;
|
|
});
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Sheet Selection
|
|
// ---------------------------------------------------------------------------
|
|
|
|
void _handleSheetTap(Sheet sheet) {
|
|
// Move selected sheet to top of list (most recently accessed)
|
|
widget.sheets.remove(sheet);
|
|
widget.sheets.insert(0, sheet);
|
|
|
|
widget.onSheetSelected(sheet);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// UI
|
|
// ---------------------------------------------------------------------------
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Column(
|
|
children: [
|
|
SheetSearchBar(controller: _searchController, onClear: _clearSearch),
|
|
Expanded(child: _buildList()),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildList() {
|
|
// Enable both mouse and touch scrolling for web compatibility
|
|
return ScrollConfiguration(
|
|
behavior: ScrollConfiguration.of(context).copyWith(
|
|
dragDevices: {PointerDeviceKind.touch, PointerDeviceKind.mouse},
|
|
),
|
|
child: ListView.builder(
|
|
physics: const AlwaysScrollableScrollPhysics(),
|
|
itemCount: _filteredSheets.length,
|
|
itemBuilder: (context, index) {
|
|
final sheet = _filteredSheets[index];
|
|
return SheetListItem(
|
|
sheet: sheet,
|
|
onTap: () => _handleSheetTap(sheet),
|
|
onLongPress: () => _openEditSheet(context, sheet),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|