Files
App/lib/screens/creators/sites/site_detail.dart
2025-11-21 00:24:35 +08:00

1603 lines
57 KiB
Dart

import 'package:easy_localization/easy_localization.dart';
import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:gap/gap.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/models/publication_site.dart';
import 'package:island/models/site_file.dart';
import 'package:island/pods/network.dart';
import 'package:island/pods/site_files.dart';
import 'package:island/pods/site_pages.dart';
import 'package:island/screens/creators/sites/site_edit.dart';
import 'package:island/services/time.dart';
import 'package:island/widgets/app_scaffold.dart';
import 'package:island/widgets/content/sheet.dart';
import 'package:island/widgets/extended_refresh_indicator.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:styled_widget/styled_widget.dart';
part 'site_detail.g.dart';
@riverpod
Future<SnPublicationSite> publicationSiteDetail(
Ref ref,
String pubName,
String siteSlug,
) async {
final apiClient = ref.watch(apiClientProvider);
final resp = await apiClient.get('/zone/sites/$pubName/$siteSlug');
return SnPublicationSite.fromJson(resp.data);
}
class PublicationSiteDetailScreen extends HookConsumerWidget {
final String siteSlug;
final String pubName;
const PublicationSiteDetailScreen({
super.key,
required this.siteSlug,
required this.pubName,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final siteAsync = ref.watch(
publicationSiteDetailProvider(pubName, siteSlug),
);
return AppScaffold(
isNoBackground: false,
appBar: AppBar(
title: siteAsync.maybeWhen(
data: (site) => Text(site.name),
orElse: () => const Text('Site Details'),
),
actions: [
siteAsync.maybeWhen(
data: (site) => _SiteActionMenu(site: site, pubName: pubName),
orElse: () => const SizedBox.shrink(),
),
const Gap(8),
],
),
body: siteAsync.when(
data: (site) => _SiteDetailContent(site: site, pubName: pubName),
error:
(error, stack) => Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Failed to load site',
style: Theme.of(context).textTheme.headlineSmall,
),
const Gap(16),
Text(error.toString()),
const Gap(24),
ElevatedButton(
onPressed:
() => ref.invalidate(
publicationSiteDetailProvider(pubName, siteSlug),
),
child: const Text('Retry'),
),
],
),
),
loading: () => const Center(child: CircularProgressIndicator()),
),
floatingActionButton: siteAsync.maybeWhen(
data:
(site) => FloatingActionButton(
onPressed: () {
// Create new page
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => PageForm(site: site, pubName: pubName),
).then((_) {
// Refresh pages after creation
ref.invalidate(sitePagesProvider(pubName, site.slug));
});
},
child: const Icon(Symbols.add),
),
orElse: () => null,
),
);
}
}
class FileUploadDialog extends HookConsumerWidget {
final List<File> selectedFiles;
final SnPublicationSite site;
final VoidCallback onUploadComplete;
const FileUploadDialog({
super.key,
required this.selectedFiles,
required this.site,
required this.onUploadComplete,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final formKey = useMemoized(() => GlobalKey<FormState>());
final pathController = useTextEditingController(text: '/');
final isUploading = useState(false);
final progressStates = useState<List<Map<String, dynamic>>>(
selectedFiles
.map(
(file) => {
'fileName': file.path.split('/').last,
'progress': 0.0,
'status':
'pending', // 'pending', 'uploading', 'completed', 'error'
'error': null,
},
)
.toList(),
);
final uploadFile = useCallback((
String basePath,
File file,
int index,
) async {
try {
progressStates.value[index]['status'] = 'uploading';
progressStates.value = [...progressStates.value];
final siteFilesNotifier = ref.read(
siteFilesNotifierProvider((siteId: site.id, path: null)).notifier,
);
final fileName = file.path.split('/').last;
final uploadPath =
basePath.endsWith('/')
? '$basePath$fileName'
: '$basePath/$fileName';
await siteFilesNotifier.uploadFile(file, uploadPath);
progressStates.value[index]['status'] = 'completed';
progressStates.value[index]['progress'] = 1.0;
progressStates.value = [...progressStates.value];
} catch (e) {
progressStates.value[index]['status'] = 'error';
progressStates.value[index]['error'] = e.toString();
progressStates.value = [...progressStates.value];
}
}, [ref, site.id, progressStates]);
final uploadAllFiles = useCallback(
() async {
if (!formKey.currentState!.validate()) return;
isUploading.value = true;
// Reset all progress states
for (int i = 0; i < progressStates.value.length; i++) {
progressStates.value[i]['status'] = 'pending';
progressStates.value[i]['progress'] = 0.0;
progressStates.value[i]['error'] = null;
}
progressStates.value = [...progressStates.value];
// Upload files sequentially (could be made parallel if needed)
for (int i = 0; i < selectedFiles.length; i++) {
final file = selectedFiles[i];
await uploadFile(pathController.text, file, i);
}
isUploading.value = false;
onUploadComplete();
// Close dialog if all uploads completed successfully
if (progressStates.value.every(
(state) => state['status'] == 'completed',
)) {
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('All files uploaded successfully')),
);
Navigator.of(context).pop();
}
}
},
[
uploadFile,
isUploading,
progressStates,
selectedFiles,
onUploadComplete,
context,
formKey,
pathController,
],
);
return SheetScaffold(
titleText: 'Upload Files',
child: SingleChildScrollView(
padding: const EdgeInsets.all(20),
child: Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Upload path field
TextFormField(
controller: pathController,
decoration: const InputDecoration(
labelText: 'Upload Path',
hintText: '/ (root) or /assets/images/',
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12)),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter an upload path';
}
if (!value.startsWith('/') && value != '/') {
return 'Path must start with /';
}
if (value.contains(' ')) {
return 'Path cannot contain spaces';
}
if (value.contains('//')) {
return 'Path cannot have consecutive slashes';
}
return null;
},
onTapOutside:
(_) => FocusManager.instance.primaryFocus?.unfocus(),
),
const Gap(20),
Text(
'Ready to upload ${selectedFiles.length} file${selectedFiles.length == 1 ? '' : 's'}:',
style: Theme.of(context).textTheme.titleMedium,
),
const Gap(16),
...selectedFiles.map((file) {
final index = selectedFiles.indexOf(file);
final progressState = progressStates.value[index];
final fileName = file.path.split('/').last;
final fileSize = file.lengthSync();
final fileSizeText =
fileSize < 1024 * 1024
? '${(fileSize / 1024).toStringAsFixed(1)} KB'
: '${(fileSize / (1024 * 1024)).toStringAsFixed(1)} MB';
return Card(
margin: const EdgeInsets.only(bottom: 8),
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Symbols.description,
size: 20,
color: Theme.of(context).colorScheme.primary,
),
const Gap(8),
Expanded(
child: Text(
fileName,
style: Theme.of(context).textTheme.bodyMedium
?.copyWith(fontWeight: FontWeight.w500),
overflow: TextOverflow.ellipsis,
),
),
Text(
fileSizeText,
style: Theme.of(
context,
).textTheme.bodySmall?.copyWith(
color:
Theme.of(
context,
).colorScheme.onSurfaceVariant,
),
),
],
),
if (progressState['status'] == 'uploading') ...[
const Gap(8),
LinearProgressIndicator(
value: progressState['progress'],
backgroundColor:
Theme.of(context).colorScheme.surfaceVariant,
),
const Gap(4),
Text(
'Uploading... ${(progressState['progress'] * 100).toStringAsFixed(0)}%',
style: Theme.of(
context,
).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.primary,
),
),
] else if (progressState['status'] == 'completed') ...[
const Gap(8),
Row(
children: [
Icon(
Symbols.check_circle,
color: Colors.green,
size: 16,
),
const Gap(4),
Text(
'Completed',
style: TextStyle(
color: Colors.green,
fontSize: 12,
),
),
],
),
] else if (progressState['status'] == 'error') ...[
const Gap(8),
Row(
children: [
Icon(Symbols.error, color: Colors.red, size: 16),
const Gap(4),
Expanded(
child: Text(
progressState['error'] ?? 'Upload failed',
style: TextStyle(
color: Colors.red,
fontSize: 12,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
],
// Show the final upload path when not uploading
if (!isUploading.value &&
progressState['status'] != 'uploading') ...[
const Gap(8),
Text(
'Will upload to: ${pathController.text.endsWith('/') ? pathController.text : '${pathController.text}/'}$fileName',
style: Theme.of(
context,
).textTheme.bodySmall?.copyWith(
color:
Theme.of(
context,
).colorScheme.onSurfaceVariant,
),
),
],
],
),
),
);
}),
const Gap(24),
Row(
children: [
Expanded(
child: OutlinedButton(
onPressed:
isUploading.value
? null
: () => Navigator.of(context).pop(),
child: const Text('Cancel'),
),
),
const Gap(12),
Expanded(
child: FilledButton(
onPressed: isUploading.value ? null : uploadAllFiles,
child: Text(
isUploading.value
? 'Uploading...'
: 'Upload ${selectedFiles.length} File${selectedFiles.length == 1 ? '' : 's'}',
),
),
),
],
),
],
),
),
),
);
}
}
class PageForm extends HookConsumerWidget {
final SnPublicationSite site;
final String pubName;
final SnPublicationPage? page; // null for create, non-null for edit
const PageForm({
super.key,
required this.site,
required this.pubName,
this.page,
});
int _getPageType(SnPublicationPage? page) {
if (page == null) return 0; // Default to HTML
// Check config structure to determine type
return page.config?.containsKey('target') == true ? 1 : 0;
}
@override
Widget build(BuildContext context, WidgetRef ref) {
final formKey = useMemoized(() => GlobalKey<FormState>());
final pathController = useTextEditingController(text: page?.path ?? '/');
// Determine initial type and create appropriate controllers
final initialType = _getPageType(page);
final pageType = useState(initialType);
final htmlController = useTextEditingController(
text:
pageType.value == 0
? (page?.config?['html'] ?? page?.config?['content'] ?? '')
: '',
);
final titleController = useTextEditingController(
text: pageType.value == 0 ? (page?.config?['title'] ?? '') : '',
);
final targetController = useTextEditingController(
text: pageType.value == 1 ? (page?.config?['target'] ?? '') : '',
);
final isLoading = useState(false);
// Update controllers when page type changes
useEffect(() {
pageType.addListener(() {
if (pageType.value == 0) {
// HTML mode
htmlController.text =
page?.config?['html'] ?? page?.config?['content'] ?? '';
titleController.text = page?.config?['title'] ?? '';
targetController.clear();
} else {
// Redirect mode
htmlController.clear();
titleController.clear();
targetController.text = page?.config?['target'] ?? '';
}
});
return null;
}, [pageType]);
// Initialize form fields when page data is loaded
useEffect(() {
if (page?.path != null && pathController.text == '/') {
pathController.text = page!.path!;
if (pageType.value == 0) {
htmlController.text =
page!.config?['html'] ?? page!.config?['content'] ?? '';
titleController.text = page!.config?['title'] ?? '';
} else {
targetController.text = page!.config?['target'] ?? '';
}
}
return null;
}, [page]);
final savePage = useCallback(() async {
if (!formKey.currentState!.validate()) return;
isLoading.value = true;
try {
final pagesNotifier = ref.read(
sitePagesNotifierProvider((
pubName: pubName,
siteSlug: site.slug,
)).notifier,
);
late final Map<String, dynamic> pageData;
if (pageType.value == 0) {
// HTML page
pageData = {
'type': 0,
'path': pathController.text,
'config': {
'title': titleController.text,
'html': htmlController.text,
},
};
} else {
// Redirect page
pageData = {
'type': 1,
'path': pathController.text,
'config': {'target': targetController.text},
};
}
if (page == null) {
// Create new page
await pagesNotifier.createPage(pageData);
} else {
// Update existing page
await pagesNotifier.updatePage(page!.id, pageData);
}
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
page == null
? 'Page created successfully'
: 'Page updated successfully',
),
),
);
Navigator.pop(context);
}
} catch (e) {
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Failed to save page: ${e.toString()}')),
);
}
} finally {
isLoading.value = false;
}
}, [pageType, pubName, site.slug, page]);
final deletePage = useCallback(() async {
if (page == null) return; // Shouldn't happen for editing
final confirmed = await showDialog<bool>(
context: context,
builder:
(context) => AlertDialog(
title: const Text('Delete Page'),
content: const Text('Are you sure you want to delete this page?'),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.of(context).pop(true),
child: const Text('Delete'),
),
],
),
);
if (confirmed != true) return;
isLoading.value = true;
try {
final pagesNotifier = ref.read(
sitePagesNotifierProvider((
pubName: pubName,
siteSlug: site.slug,
)).notifier,
);
await pagesNotifier.deletePage(page!.id);
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Page deleted successfully')),
);
Navigator.pop(context);
}
} catch (e) {
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Failed to delete page')),
);
}
} finally {
isLoading.value = false;
}
}, [pubName, site.slug, page, context]);
return SheetScaffold(
titleText: page == null ? 'Create Page' : 'Edit Page',
child: Builder(
builder:
(context) => SingleChildScrollView(
child: Column(
children: [
Form(
key: formKey,
child: Column(
children: [
// Page type selector
DropdownButtonFormField<int>(
value: pageType.value,
decoration: const InputDecoration(
labelText: 'Page Type',
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
),
items: const [
DropdownMenuItem(
value: 0,
child: Row(
children: [
Icon(Symbols.code, size: 20),
Gap(8),
Text('HTML Page'),
],
),
),
DropdownMenuItem(
value: 1,
child: Row(
children: [
Icon(Symbols.link, size: 20),
Gap(8),
Text('Redirect Page'),
],
),
),
],
onChanged: (value) {
if (value != null) {
pageType.value = value;
}
},
validator: (value) {
if (value == null) {
return 'Please select a page type';
}
return null;
},
).padding(all: 20),
// Conditional form fields based on page type
if (pageType.value == 0) ...[
// HTML Page fields
TextFormField(
controller: pathController,
decoration: const InputDecoration(
labelText: 'Page Path',
hintText: '/about, /contact, etc.',
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter a page path';
}
if (!RegExp(
r'^[a-zA-Z0-9\-/_]+$',
).hasMatch(value)) {
return 'Page path can only contain letters, numbers, hyphens, underscores, and slashes';
}
if (!value.startsWith('/')) {
return 'Page path must start with /';
}
if (value.contains('//')) {
return 'Page path cannot have consecutive slashes';
}
return null;
},
onTapOutside:
(_) =>
FocusManager.instance.primaryFocus
?.unfocus(),
).padding(horizontal: 20),
const SizedBox(height: 16),
TextFormField(
controller: titleController,
decoration: const InputDecoration(
labelText: 'Page Title',
hintText: 'About Us, Contact, etc.',
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter a page title';
}
return null;
},
onTapOutside:
(_) =>
FocusManager.instance.primaryFocus
?.unfocus(),
).padding(horizontal: 20),
const SizedBox(height: 16),
TextFormField(
controller: htmlController,
decoration: const InputDecoration(
labelText: 'Page Content (HTML)',
hintText:
'<h1>Hello World</h1><p>This is my page content...</p>',
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
alignLabelWithHint: true,
),
maxLines: 10,
onTapOutside:
(_) =>
FocusManager.instance.primaryFocus
?.unfocus(),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter HTML content for the page';
}
return null;
},
).padding(horizontal: 20),
] else ...[
// Redirect Page fields
TextFormField(
controller: pathController,
decoration: const InputDecoration(
labelText: 'Page Path',
hintText: '/old-page, /redirect, etc.',
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
prefixText: '/',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter a page path';
}
if (!RegExp(
r'^[a-zA-Z0-9\-/_]+$',
).hasMatch(value)) {
return 'Page path can only contain letters, numbers, hyphens, underscores, and slashes';
}
if (!value.startsWith('/')) {
return 'Page path must start with /';
}
if (value.contains('//')) {
return 'Page path cannot have consecutive slashes';
}
return null;
},
onTapOutside:
(_) =>
FocusManager.instance.primaryFocus
?.unfocus(),
).padding(horizontal: 20),
const SizedBox(height: 16),
TextFormField(
controller: targetController,
decoration: const InputDecoration(
labelText: 'Redirect Target',
hintText: '/new-page, https://example.com, etc.',
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter a redirect target';
}
if (!value.startsWith('/') &&
!value.startsWith('http://') &&
!value.startsWith('https://')) {
return 'Target must be a relative path (/) or absolute URL (http/https)';
}
return null;
},
onTapOutside:
(_) =>
FocusManager.instance.primaryFocus
?.unfocus(),
).padding(horizontal: 20),
],
],
).padding(vertical: 20),
),
Row(
children: [
if (page != null) ...[
TextButton.icon(
onPressed: deletePage,
icon: const Icon(Symbols.delete_forever),
label: const Text('Delete Page'),
style: TextButton.styleFrom(
foregroundColor: Colors.red,
),
).alignment(Alignment.centerRight),
const Spacer(),
] else
const Spacer(),
TextButton.icon(
onPressed: savePage,
icon: const Icon(Symbols.save),
label: const Text('Save Page'),
),
],
).padding(horizontal: 20, vertical: 12),
],
),
),
),
);
}
}
class _PagesSection extends HookConsumerWidget {
final SnPublicationSite site;
final String pubName;
const _PagesSection({required this.site, required this.pubName});
@override
Widget build(BuildContext context, WidgetRef ref) {
final pagesAsync = ref.watch(sitePagesProvider(pubName, site.slug));
final theme = Theme.of(context);
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Icon(Symbols.article, size: 20),
const Gap(8),
Text(
'Pages',
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
const Spacer(),
IconButton(
onPressed: () {
// Open page creation dialog
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder:
(context) => PageForm(site: site, pubName: pubName),
).then((_) {
// Refresh pages after creation
ref.invalidate(sitePagesProvider(pubName, site.slug));
});
},
icon: const Icon(Symbols.add),
visualDensity: const VisualDensity(
horizontal: -4,
vertical: -4,
),
),
],
),
const Gap(16),
pagesAsync.when(
data: (pages) {
if (pages.isEmpty) {
return Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
children: [
Icon(
Symbols.article,
size: 48,
color: theme.colorScheme.outline,
),
const Gap(16),
Text(
'No pages yet',
style: theme.textTheme.bodyLarge,
),
const Gap(8),
Text(
'Create your first page to get started',
style: theme.textTheme.bodySmall,
),
],
),
),
);
}
return ListView.builder(
shrinkWrap: true,
padding: EdgeInsets.zero,
itemCount: pages.length,
itemBuilder: (context, index) {
final page = pages[index];
return _PageItem(page: page, site: site, pubName: pubName);
},
);
},
loading: () => const Center(child: CircularProgressIndicator()),
error:
(error, stack) => Center(
child: Column(
children: [
Text('Failed to load pages'),
const Gap(8),
ElevatedButton(
onPressed:
() => ref.invalidate(
sitePagesProvider(pubName, site.slug),
),
child: const Text('Retry'),
),
],
),
),
),
],
),
),
);
}
}
class _PageItem extends HookConsumerWidget {
final SnPublicationPage page;
final SnPublicationSite site;
final String pubName;
const _PageItem({
required this.page,
required this.site,
required this.pubName,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = Theme.of(context);
return Card(
color: Theme.of(context).colorScheme.surfaceContainerHigh,
elevation: 0,
child: ListTile(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
),
leading: Icon(Symbols.article, color: theme.colorScheme.primary),
title: Text(page.path ?? '/'),
subtitle: Text(page.config?['title'] ?? 'Untitled'),
trailing: PopupMenuButton<String>(
itemBuilder:
(context) => [
PopupMenuItem(
value: 'edit',
child: Row(
children: [
const Icon(Symbols.edit),
const Gap(16),
Text('edit'.tr()),
],
),
),
PopupMenuItem(
value: 'delete',
child: Row(
children: [
const Icon(Symbols.delete, color: Colors.red),
const Gap(16),
Text('delete'.tr()).textColor(Colors.red),
],
),
),
],
onSelected: (value) async {
switch (value) {
case 'edit':
// Open page edit dialog
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder:
(context) =>
PageForm(site: site, pubName: pubName, page: page),
).then((_) {
// Refresh pages after editing
ref.invalidate(sitePagesProvider(pubName, site.slug));
});
break;
case 'delete':
final confirmed = await showDialog<bool>(
context: context,
builder:
(context) => AlertDialog(
title: const Text('Delete Page'),
content: const Text(
'Are you sure you want to delete this page?',
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.of(context).pop(true),
child: const Text('Delete'),
),
],
),
);
if (confirmed == true) {
try {
await ref
.read(
sitePagesNotifierProvider((
pubName: pubName,
siteSlug: site.slug,
)).notifier,
)
.deletePage(page.id);
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Page deleted successfully'),
),
);
}
} catch (e) {
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Failed to delete page')),
);
}
}
}
break;
}
},
),
onTap: () {
// TODO: Open page preview or edit
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Opening page: ${page.path ?? '/'}')),
);
},
),
);
}
}
class _FileManagementSection extends HookConsumerWidget {
final SnPublicationSite site;
final String pubName;
const _FileManagementSection({required this.site, required this.pubName});
@override
Widget build(BuildContext context, WidgetRef ref) {
final filesAsync = ref.watch(siteFilesProvider(siteId: site.id));
final theme = Theme.of(context);
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Symbols.folder, size: 20),
const Gap(8),
Text(
'File Management',
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
const Spacer(),
IconButton(
onPressed: () async {
// Open file upload dialog
final selectedFiles = await FilePicker.platform.pickFiles(
allowMultiple: true,
type: FileType.any,
);
if (selectedFiles == null || selectedFiles.files.isEmpty) {
return; // User canceled
}
if (!context.mounted) return;
// Show upload dialog for path specification
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder:
(context) => FileUploadDialog(
selectedFiles:
selectedFiles.files
.map((f) => File(f.path!))
.toList(),
site: site,
onUploadComplete: () {
// Refresh file list
ref.invalidate(
siteFilesProvider(siteId: site.id),
);
},
),
);
},
icon: const Icon(Symbols.upload),
visualDensity: const VisualDensity(
horizontal: -4,
vertical: -4,
),
),
],
),
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'),
),
],
),
),
),
],
),
),
);
}
}
class _FileItem extends HookConsumerWidget {
final SnSiteFileEntry file;
final SnPublicationSite site;
const _FileItem({required this.file, required this.site});
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = Theme.of(context);
return Card(
color: Theme.of(context).colorScheme.surfaceContainerHigh,
elevation: 0,
child: ListTile(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
),
leading: Icon(
file.isDirectory ? Symbols.folder : Symbols.description,
color: theme.colorScheme.primary,
),
title: Text(file.relativePath),
subtitle: Text(
file.isDirectory
? 'Directory'
: '${(file.size / 1024).toStringAsFixed(1)} KB',
),
trailing: PopupMenuButton<String>(
itemBuilder:
(context) => [
PopupMenuItem(
value: 'download',
child: Row(
children: [
const Icon(Symbols.download),
const Gap(16),
Text('Download'),
],
),
),
if (!file.isDirectory) ...[
PopupMenuItem(
value: 'edit',
child: Row(
children: [
const Icon(Symbols.edit),
const Gap(16),
Text('Edit Content'),
],
),
),
],
PopupMenuItem(
value: 'delete',
child: Row(
children: [
const Icon(Symbols.delete, color: Colors.red),
const Gap(16),
Text('Delete').textColor(Colors.red),
],
),
),
],
onSelected: (value) async {
switch (value) {
case 'download':
// TODO: Implement file download
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Downloading ${file.relativePath}')),
);
break;
case 'edit':
// TODO: Implement file editing
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Editing ${file.relativePath}')),
);
break;
case 'delete':
final confirmed = await showDialog<bool>(
context: context,
builder:
(context) => AlertDialog(
title: const Text('Delete File'),
content: Text(
'Are you sure you want to delete "${file.relativePath}"?',
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.of(context).pop(true),
child: const Text('Delete'),
),
],
),
);
if (confirmed == true) {
try {
await ref
.read(
siteFilesNotifierProvider((
siteId: site.id,
path: null,
)).notifier,
)
.deleteFile(file.relativePath);
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('File deleted successfully'),
),
);
}
} catch (e) {
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Failed to delete file')),
);
}
}
}
break;
}
},
),
onTap: () {
if (file.isDirectory) {
// TODO: Navigate into directory
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Opening directory: ${file.relativePath}'),
),
);
} else {
// TODO: Open file preview/editor
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Opening file: ${file.relativePath}')),
);
}
},
),
);
}
}
class _SiteDetailContent extends HookConsumerWidget {
final SnPublicationSite site;
final String pubName;
const _SiteDetailContent({required this.site, required this.pubName});
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = Theme.of(context);
return ExtendedRefreshIndicator(
onRefresh:
() async =>
ref.invalidate(publicationSiteDetailProvider(pubName, site.slug)),
child: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Site Info Card
Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Site Information',
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
const Gap(16),
_InfoRow(
label: 'Name',
value: site.name,
icon: Symbols.title,
),
const Gap(8),
_InfoRow(
label: 'Slug',
value: site.slug,
icon: Symbols.tag,
monospace: true,
),
const Gap(8),
_InfoRow(
label: 'Mode',
value: site.mode == 0 ? 'Fully Managed' : 'Self-Managed',
icon: Symbols.settings,
),
if (site.description != null &&
site.description!.isNotEmpty) ...[
const Gap(8),
_InfoRow(
label: 'Description',
value: site.description!,
icon: Symbols.description,
),
],
const Gap(8),
_InfoRow(
label: 'Created',
value: site.createdAt.formatSystem(),
icon: Symbols.calendar_add_on,
),
const Gap(8),
_InfoRow(
label: 'Updated',
value: site.updatedAt.formatSystem(),
icon: Symbols.update,
),
],
),
),
),
// Pages Section
_PagesSection(site: site, pubName: pubName),
_FileManagementSection(site: site, pubName: pubName),
],
),
),
);
}
}
class _InfoRow extends StatelessWidget {
final String label;
final String value;
final IconData icon;
final bool monospace;
const _InfoRow({
required this.label,
required this.value,
required this.icon,
this.monospace = false,
});
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(icon, size: 20, color: Theme.of(context).colorScheme.primary),
const Gap(12),
Expanded(
flex: 2,
child: Text(
label,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
),
const Gap(12),
Expanded(
flex: 3,
child: Text(
value,
style:
monospace
? GoogleFonts.robotoMono(fontSize: 14)
: Theme.of(context).textTheme.bodyMedium,
textAlign: TextAlign.end,
),
),
],
);
}
}
class _SiteActionMenu extends HookConsumerWidget {
final SnPublicationSite site;
final String pubName;
const _SiteActionMenu({required this.site, required this.pubName});
@override
Widget build(BuildContext context, WidgetRef ref) {
return PopupMenuButton<String>(
itemBuilder:
(context) => [
PopupMenuItem(
value: 'edit',
child: Row(
children: [
Icon(
Symbols.edit,
color: Theme.of(context).colorScheme.onSurface,
),
const Gap(16),
Text('edit'.tr()),
],
),
),
const PopupMenuDivider(),
PopupMenuItem(
value: 'delete',
child: Row(
children: [
const Icon(Symbols.delete, color: Colors.red),
const Gap(16),
Text('delete'.tr()).textColor(Colors.red),
],
),
),
],
onSelected: (value) async {
switch (value) {
case 'edit':
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder:
(context) => SiteForm(pubName: pubName, siteSlug: site.slug),
).then((_) {
// Refresh site data after potential edit
ref.invalidate(publicationSiteDetailProvider(pubName, site.slug));
});
break;
case 'delete':
final confirmed = await showDialog<bool>(
context: context,
builder:
(context) => AlertDialog(
title: const Text('Delete Site'),
content: const Text(
'Are you sure you want to delete this publication site? This action cannot be undone.',
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.of(context).pop(true),
child: const Text('Delete'),
),
],
),
);
if (confirmed == true) {
try {
final client = ref.read(apiClientProvider);
await client.delete('/zone/sites/${site.id}');
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Site deleted successfully')),
);
// Navigate back to list
Navigator.of(context).pop();
}
} catch (e) {
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Failed to delete site')),
);
}
}
}
break;
}
},
);
}
}