💄 Better playlist tabs
This commit is contained in:
@@ -3,6 +3,7 @@ import 'package:groovybox/data/db.dart';
|
||||
import 'package:groovybox/data/playlist_repository.dart';
|
||||
import 'package:groovybox/ui/screens/playlist_detail_screen.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:styled_widget/styled_widget.dart';
|
||||
|
||||
class PlaylistsTab extends HookConsumerWidget {
|
||||
const PlaylistsTab({super.key});
|
||||
@@ -12,75 +13,88 @@ class PlaylistsTab extends HookConsumerWidget {
|
||||
final repo = ref.watch(playlistRepositoryProvider.notifier);
|
||||
|
||||
return Scaffold(
|
||||
floatingActionButton: FloatingActionButton(
|
||||
onPressed: () async {
|
||||
final nameController = TextEditingController();
|
||||
final name = await showDialog<String>(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('New Playlist'),
|
||||
content: TextField(
|
||||
controller: nameController,
|
||||
decoration: const InputDecoration(labelText: 'Playlist Name'),
|
||||
autofocus: true,
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context, nameController.text),
|
||||
child: const Text('Create'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
if (name != null && name.isNotEmpty) {
|
||||
await repo.createPlaylist(name);
|
||||
}
|
||||
},
|
||||
child: const Icon(Icons.add),
|
||||
),
|
||||
body: StreamBuilder<List<Playlist>>(
|
||||
stream: repo.watchAllPlaylists(),
|
||||
builder: (context, snapshot) {
|
||||
if (!snapshot.hasData) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
final playlists = snapshot.data!;
|
||||
|
||||
if (playlists.isEmpty) {
|
||||
return const Center(child: Text('No playlists yet'));
|
||||
}
|
||||
|
||||
return ListView.builder(
|
||||
itemCount: playlists.length,
|
||||
itemBuilder: (context, index) {
|
||||
final playlist = playlists[index];
|
||||
return ListTile(
|
||||
leading: const Icon(Icons.queue_music),
|
||||
title: Text(playlist.name),
|
||||
subtitle: Text(
|
||||
'${playlist.createdAt.day}/${playlist.createdAt.month}/${playlist.createdAt.year}',
|
||||
),
|
||||
trailing: IconButton(
|
||||
icon: const Icon(Icons.delete),
|
||||
onPressed: () => repo.deletePlaylist(playlist.id),
|
||||
),
|
||||
onTap: () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) =>
|
||||
PlaylistDetailScreen(playlist: playlist),
|
||||
body: Column(
|
||||
children: [
|
||||
ListTile(
|
||||
leading: const Icon(Icons.add),
|
||||
trailing: const Icon(Icons.chevron_right).padding(right: 8),
|
||||
title: Text('Create One'),
|
||||
subtitle: Text('Add a new playlist'),
|
||||
onTap: () async {
|
||||
final nameController = TextEditingController();
|
||||
final name = await showDialog<String>(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('New Playlist'),
|
||||
content: TextField(
|
||||
controller: nameController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Playlist Name',
|
||||
),
|
||||
);
|
||||
},
|
||||
autofocus: true,
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () =>
|
||||
Navigator.pop(context, nameController.text),
|
||||
child: const Text('Create'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
if (name != null && name.isNotEmpty) {
|
||||
await repo.createPlaylist(name);
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
const Divider(height: 1),
|
||||
Expanded(
|
||||
child: StreamBuilder<List<Playlist>>(
|
||||
stream: repo.watchAllPlaylists(),
|
||||
builder: (context, snapshot) {
|
||||
if (!snapshot.hasData) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
final playlists = snapshot.data!;
|
||||
|
||||
if (playlists.isEmpty) {
|
||||
return const Center(child: Text('No playlists yet'));
|
||||
}
|
||||
|
||||
return ListView.builder(
|
||||
itemCount: playlists.length,
|
||||
itemBuilder: (context, index) {
|
||||
final playlist = playlists[index];
|
||||
return ListTile(
|
||||
leading: const Icon(Icons.queue_music),
|
||||
title: Text(playlist.name),
|
||||
subtitle: Text(
|
||||
'${playlist.createdAt.day}/${playlist.createdAt.month}/${playlist.createdAt.year}',
|
||||
),
|
||||
trailing: IconButton(
|
||||
icon: const Icon(Icons.delete),
|
||||
onPressed: () => repo.deletePlaylist(playlist.id),
|
||||
),
|
||||
onTap: () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) =>
|
||||
PlaylistDetailScreen(playlist: playlist),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user