✨ Site file management able to navigate folders
This commit is contained in:
@@ -45,7 +45,7 @@ class SiteNotifier
|
|||||||
final response =
|
final response =
|
||||||
site.id.isEmpty
|
site.id.isEmpty
|
||||||
? await client.post(url, data: site.toJson())
|
? await client.post(url, data: site.toJson())
|
||||||
: await client.patch('${url}/${site.id}', data: site.toJson());
|
: await client.patch('$url/${site.id}', data: site.toJson());
|
||||||
|
|
||||||
state = AsyncValue.data(SnPublicationSite.fromJson(response.data));
|
state = AsyncValue.data(SnPublicationSite.fromJson(response.data));
|
||||||
} catch (error, stackTrace) {
|
} catch (error, stackTrace) {
|
||||||
|
|||||||
@@ -11,8 +11,14 @@ import 'package:styled_widget/styled_widget.dart';
|
|||||||
class FileItem extends HookConsumerWidget {
|
class FileItem extends HookConsumerWidget {
|
||||||
final SnSiteFileEntry file;
|
final SnSiteFileEntry file;
|
||||||
final SnPublicationSite site;
|
final SnPublicationSite site;
|
||||||
|
final void Function(String path)? onNavigateDirectory;
|
||||||
|
|
||||||
const FileItem({super.key, required this.file, required this.site});
|
const FileItem({
|
||||||
|
super.key,
|
||||||
|
required this.file,
|
||||||
|
required this.site,
|
||||||
|
this.onNavigateDirectory,
|
||||||
|
});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
@@ -128,12 +134,7 @@ class FileItem extends HookConsumerWidget {
|
|||||||
),
|
),
|
||||||
onTap: () {
|
onTap: () {
|
||||||
if (file.isDirectory) {
|
if (file.isDirectory) {
|
||||||
// TODO: Navigate into directory
|
onNavigateDirectory?.call(file.relativePath);
|
||||||
ScaffoldMessenger.of(context).showSnackBar(
|
|
||||||
SnackBar(
|
|
||||||
content: Text('Opening directory: ${file.relativePath}'),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
// TODO: Open file preview/editor
|
// TODO: Open file preview/editor
|
||||||
ScaffoldMessenger.of(context).showSnackBar(
|
ScaffoldMessenger.of(context).showSnackBar(
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
import 'dart:io';
|
import 'dart:io';
|
||||||
import 'package:file_picker/file_picker.dart';
|
import 'package:file_picker/file_picker.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
import 'package:gap/gap.dart';
|
import 'package:gap/gap.dart';
|
||||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
import 'package:island/models/publication_site.dart';
|
import 'package:island/models/publication_site.dart';
|
||||||
import 'package:island/pods/site_files.dart';
|
import 'package:island/pods/site_files.dart';
|
||||||
|
import 'package:island/widgets/alert.dart';
|
||||||
import 'package:island/widgets/sites/file_upload_dialog.dart';
|
import 'package:island/widgets/sites/file_upload_dialog.dart';
|
||||||
import 'package:island/widgets/sites/file_item.dart';
|
import 'package:island/widgets/sites/file_item.dart';
|
||||||
import 'package:material_symbols_icons/symbols.dart';
|
import 'package:material_symbols_icons/symbols.dart';
|
||||||
@@ -21,177 +23,268 @@ class FileManagementSection extends HookConsumerWidget {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
final filesAsync = ref.watch(siteFilesProvider(siteId: site.id));
|
final currentPath = useState<String?>(null);
|
||||||
|
final filesAsync = ref.watch(
|
||||||
|
siteFilesProvider(siteId: site.id, path: currentPath.value),
|
||||||
|
);
|
||||||
final theme = Theme.of(context);
|
final theme = Theme.of(context);
|
||||||
|
|
||||||
return Card(
|
return Card(
|
||||||
child: Padding(
|
child: Column(
|
||||||
padding: const EdgeInsets.all(16),
|
children: [
|
||||||
child: Column(
|
Padding(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
padding: const EdgeInsets.all(16),
|
||||||
children: [
|
child: Column(
|
||||||
Row(
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
Icon(Symbols.folder, size: 20),
|
Row(
|
||||||
const Gap(8),
|
children: [
|
||||||
Text(
|
Icon(Symbols.folder, size: 20),
|
||||||
'File Management',
|
const Gap(8),
|
||||||
style: theme.textTheme.titleMedium?.copyWith(
|
Text(
|
||||||
fontWeight: FontWeight.bold,
|
'File Management',
|
||||||
),
|
style: theme.textTheme.titleMedium?.copyWith(
|
||||||
),
|
fontWeight: FontWeight.bold,
|
||||||
const Spacer(),
|
),
|
||||||
PopupMenuButton<String>(
|
),
|
||||||
icon: const Icon(Symbols.upload),
|
const Spacer(),
|
||||||
onSelected: (String choice) async {
|
PopupMenuButton<String>(
|
||||||
List<File> files = [];
|
icon: const Icon(Symbols.upload),
|
||||||
List<Map<String, dynamic>>? results;
|
onSelected: (String choice) async {
|
||||||
if (choice == 'files') {
|
List<File> files = [];
|
||||||
final selectedFiles = await FilePicker.platform.pickFiles(
|
List<Map<String, dynamic>>? results;
|
||||||
allowMultiple: true,
|
if (choice == 'files') {
|
||||||
type: FileType.any,
|
final selectedFiles = await FilePicker.platform
|
||||||
);
|
.pickFiles(
|
||||||
if (selectedFiles == null ||
|
allowMultiple: true,
|
||||||
selectedFiles.files.isEmpty) {
|
type: FileType.any,
|
||||||
return; // User canceled
|
|
||||||
}
|
|
||||||
files =
|
|
||||||
selectedFiles.files
|
|
||||||
.map((f) => File(f.path!))
|
|
||||||
.toList();
|
|
||||||
} else if (choice == 'folder') {
|
|
||||||
final dirPath =
|
|
||||||
await FilePicker.platform.getDirectoryPath();
|
|
||||||
if (dirPath == null) return;
|
|
||||||
results = await _getFilesRecursive(dirPath);
|
|
||||||
files = results.map((m) => m['file'] as File).toList();
|
|
||||||
if (files.isEmpty) {
|
|
||||||
ScaffoldMessenger.of(context).showSnackBar(
|
|
||||||
const SnackBar(
|
|
||||||
content: Text(
|
|
||||||
'No files found in the selected folder',
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!context.mounted) return;
|
|
||||||
|
|
||||||
// Show upload dialog for path specification
|
|
||||||
showModalBottomSheet(
|
|
||||||
context: context,
|
|
||||||
isScrollControlled: true,
|
|
||||||
builder:
|
|
||||||
(context) => FileUploadDialog(
|
|
||||||
selectedFiles: files,
|
|
||||||
site: site,
|
|
||||||
relativePaths:
|
|
||||||
results
|
|
||||||
?.map((m) => m['relativePath'] as String)
|
|
||||||
.toList(),
|
|
||||||
onUploadComplete: () {
|
|
||||||
// Refresh file list
|
|
||||||
ref.invalidate(
|
|
||||||
siteFilesProvider(siteId: site.id),
|
|
||||||
);
|
);
|
||||||
},
|
if (selectedFiles == null ||
|
||||||
),
|
selectedFiles.files.isEmpty) {
|
||||||
);
|
return; // User canceled
|
||||||
},
|
}
|
||||||
itemBuilder:
|
files =
|
||||||
(BuildContext context) => [
|
selectedFiles.files
|
||||||
const PopupMenuItem<String>(
|
.map((f) => File(f.path!))
|
||||||
value: 'files',
|
.toList();
|
||||||
child: Row(
|
} else if (choice == 'folder') {
|
||||||
children: [
|
final dirPath =
|
||||||
Icon(Symbols.file_copy),
|
await FilePicker.platform.getDirectoryPath();
|
||||||
Gap(12),
|
if (dirPath == null) return;
|
||||||
Text('Files'),
|
results = await _getFilesRecursive(dirPath);
|
||||||
],
|
files =
|
||||||
|
results.map((m) => m['file'] as File).toList();
|
||||||
|
if (files.isEmpty) {
|
||||||
|
showSnackBar(
|
||||||
|
'No files found in the selected folder',
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!context.mounted) return;
|
||||||
|
|
||||||
|
// Show upload dialog for path specification
|
||||||
|
showModalBottomSheet(
|
||||||
|
context: context,
|
||||||
|
isScrollControlled: true,
|
||||||
|
builder:
|
||||||
|
(context) => FileUploadDialog(
|
||||||
|
selectedFiles: files,
|
||||||
|
site: site,
|
||||||
|
relativePaths:
|
||||||
|
results
|
||||||
|
?.map(
|
||||||
|
(m) => m['relativePath'] as String,
|
||||||
|
)
|
||||||
|
.toList(),
|
||||||
|
onUploadComplete: () {
|
||||||
|
// Refresh file list
|
||||||
|
ref.invalidate(
|
||||||
|
siteFilesProvider(
|
||||||
|
siteId: site.id,
|
||||||
|
path: currentPath.value,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
itemBuilder:
|
||||||
|
(BuildContext context) => [
|
||||||
|
const PopupMenuItem<String>(
|
||||||
|
value: 'files',
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Icon(Symbols.file_copy),
|
||||||
|
Gap(12),
|
||||||
|
Text('Files'),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const PopupMenuItem<String>(
|
||||||
|
value: 'folder',
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Icon(Symbols.folder),
|
||||||
|
Gap(12),
|
||||||
|
Text('Folder'),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
style: ButtonStyle(
|
||||||
|
visualDensity: const VisualDensity(
|
||||||
|
horizontal: -4,
|
||||||
|
vertical: -4,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const Gap(8),
|
||||||
|
if (currentPath.value != null && currentPath.value!.isNotEmpty)
|
||||||
|
Container(
|
||||||
|
margin: const EdgeInsets.only(top: 4),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: theme.colorScheme.surfaceContainerHigh,
|
||||||
|
borderRadius: BorderRadius.circular(16),
|
||||||
|
),
|
||||||
|
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
IconButton(
|
||||||
|
icon: Icon(Symbols.arrow_back),
|
||||||
|
onPressed: () {
|
||||||
|
final pathParts =
|
||||||
|
currentPath.value!
|
||||||
|
.split('/')
|
||||||
|
.where((part) => part.isNotEmpty)
|
||||||
|
.toList();
|
||||||
|
if (pathParts.isEmpty) {
|
||||||
|
currentPath.value = null;
|
||||||
|
} else {
|
||||||
|
pathParts.removeLast();
|
||||||
|
currentPath.value =
|
||||||
|
pathParts.isEmpty
|
||||||
|
? null
|
||||||
|
: pathParts.join('/');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
visualDensity: const VisualDensity(
|
||||||
|
horizontal: -4,
|
||||||
|
vertical: -4,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const PopupMenuItem<String>(
|
Expanded(
|
||||||
value: 'folder',
|
child: Wrap(
|
||||||
child: Row(
|
crossAxisAlignment: WrapCrossAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
Icon(Symbols.folder),
|
InkWell(
|
||||||
Gap(12),
|
onTap: () => currentPath.value = null,
|
||||||
Text('Folder'),
|
child: const Text('Root'),
|
||||||
|
),
|
||||||
|
...() {
|
||||||
|
final parts =
|
||||||
|
currentPath.value!
|
||||||
|
.split('/')
|
||||||
|
.where((part) => part.isNotEmpty)
|
||||||
|
.toList();
|
||||||
|
final widgets = <Widget>[];
|
||||||
|
String currentBuilder = '';
|
||||||
|
for (final part in parts) {
|
||||||
|
currentBuilder +=
|
||||||
|
(currentBuilder.isEmpty ? '' : '/') +
|
||||||
|
part;
|
||||||
|
final pathToSet = currentBuilder;
|
||||||
|
widgets.addAll([
|
||||||
|
const Text(' / '),
|
||||||
|
InkWell(
|
||||||
|
onTap:
|
||||||
|
() => currentPath.value = pathToSet,
|
||||||
|
child: Text(part),
|
||||||
|
),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
return widgets;
|
||||||
|
}(),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
style: ButtonStyle(
|
|
||||||
visualDensity: const VisualDensity(
|
|
||||||
horizontal: -4,
|
|
||||||
vertical: -4,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
const Gap(8),
|
||||||
|
filesAsync.when(
|
||||||
|
data: (files) {
|
||||||
|
if (files.isEmpty) {
|
||||||
|
return Center(
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(32),
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
Icon(
|
||||||
|
Symbols.folder,
|
||||||
|
size: 48,
|
||||||
|
color: theme.colorScheme.outline,
|
||||||
|
),
|
||||||
|
const Gap(16),
|
||||||
|
Text(
|
||||||
|
'No files uploaded yet',
|
||||||
|
style: theme.textTheme.bodyLarge,
|
||||||
|
),
|
||||||
|
const Gap(8),
|
||||||
|
Text(
|
||||||
|
'Upload your first file to get started',
|
||||||
|
style: theme.textTheme.bodySmall,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return ListView.builder(
|
||||||
|
shrinkWrap: true,
|
||||||
|
padding: EdgeInsets.zero,
|
||||||
|
itemCount: files.length,
|
||||||
|
itemBuilder: (context, index) {
|
||||||
|
final file = files[index];
|
||||||
|
return FileItem(
|
||||||
|
file: file,
|
||||||
|
site: site,
|
||||||
|
onNavigateDirectory:
|
||||||
|
(path) => currentPath.value = path,
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
loading:
|
||||||
|
() => const Center(child: CircularProgressIndicator()),
|
||||||
|
error:
|
||||||
|
(error, stack) => Center(
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
Text('Failed to load files'),
|
||||||
|
const Gap(8),
|
||||||
|
ElevatedButton(
|
||||||
|
onPressed:
|
||||||
|
() => ref.invalidate(
|
||||||
|
siteFilesProvider(
|
||||||
|
siteId: site.id,
|
||||||
|
path: currentPath.value,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: const Text('Retry'),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
const Gap(16),
|
),
|
||||||
filesAsync.when(
|
],
|
||||||
data: (files) {
|
|
||||||
if (files.isEmpty) {
|
|
||||||
return Center(
|
|
||||||
child: Padding(
|
|
||||||
padding: const EdgeInsets.all(32),
|
|
||||||
child: Column(
|
|
||||||
children: [
|
|
||||||
Icon(
|
|
||||||
Symbols.folder,
|
|
||||||
size: 48,
|
|
||||||
color: theme.colorScheme.outline,
|
|
||||||
),
|
|
||||||
const Gap(16),
|
|
||||||
Text(
|
|
||||||
'No files uploaded yet',
|
|
||||||
style: theme.textTheme.bodyLarge,
|
|
||||||
),
|
|
||||||
const Gap(8),
|
|
||||||
Text(
|
|
||||||
'Upload your first file to get started',
|
|
||||||
style: theme.textTheme.bodySmall,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return ListView.builder(
|
|
||||||
shrinkWrap: true,
|
|
||||||
padding: EdgeInsets.zero,
|
|
||||||
itemCount: files.length,
|
|
||||||
itemBuilder: (context, index) {
|
|
||||||
final file = files[index];
|
|
||||||
return FileItem(file: file, site: site);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
},
|
|
||||||
loading: () => const Center(child: CircularProgressIndicator()),
|
|
||||||
error:
|
|
||||||
(error, stack) => Center(
|
|
||||||
child: Column(
|
|
||||||
children: [
|
|
||||||
Text('Failed to load files'),
|
|
||||||
const Gap(8),
|
|
||||||
ElevatedButton(
|
|
||||||
onPressed:
|
|
||||||
() => ref.invalidate(
|
|
||||||
siteFilesProvider(siteId: site.id),
|
|
||||||
),
|
|
||||||
child: const Text('Retry'),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user