626 lines
24 KiB
Dart
626 lines
24 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
import 'package:gap/gap.dart';
|
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
import 'package:island/models/publication_site.dart';
|
|
import 'package:island/pods/site_pages.dart';
|
|
import 'package:island/widgets/alert.dart';
|
|
import 'package:island/widgets/content/sheet.dart';
|
|
import 'package:material_symbols_icons/symbols.dart';
|
|
import 'package:styled_widget/styled_widget.dart';
|
|
|
|
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
|
|
if (page.config?.containsKey('filter') == true ||
|
|
page.config?.containsKey('layout') == true) {
|
|
return 2; // Post Page
|
|
}
|
|
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'] ?? '') : '',
|
|
);
|
|
|
|
// Post Page Controllers
|
|
final filterPubNameController = useTextEditingController(
|
|
text: pageType.value == 2
|
|
? (page?.config?['filter']?['pub_name'] ?? '')
|
|
: '',
|
|
);
|
|
final filterOrderByController = useTextEditingController(
|
|
text: pageType.value == 2
|
|
? (page?.config?['filter']?['order_by'] ?? '')
|
|
: '',
|
|
);
|
|
final filterOrderDesc = useState(
|
|
pageType.value == 2
|
|
? (page?.config?['filter']?['order_desc'] ?? true)
|
|
: true,
|
|
);
|
|
final filterTypes = useState<List<int>>(
|
|
(page?.config?['filter']?['types'] as List?)?.cast<int>() ?? [0],
|
|
);
|
|
|
|
final layoutTitleController = useTextEditingController(
|
|
text: pageType.value == 2
|
|
? (page?.config?['layout']?['title'] ?? '')
|
|
: '',
|
|
);
|
|
final layoutDescriptionController = useTextEditingController(
|
|
text: pageType.value == 2
|
|
? (page?.config?['layout']?['description'] ?? '')
|
|
: '',
|
|
);
|
|
final layoutShowPub = useState(
|
|
pageType.value == 2
|
|
? (page?.config?['layout']?['show_pub'] ?? true)
|
|
: true,
|
|
);
|
|
|
|
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();
|
|
filterPubNameController.clear();
|
|
filterOrderByController.clear();
|
|
layoutTitleController.clear();
|
|
layoutDescriptionController.clear();
|
|
} else if (pageType.value == 1) {
|
|
// Redirect mode
|
|
htmlController.clear();
|
|
titleController.clear();
|
|
targetController.text = page?.config?['target'] ?? '';
|
|
filterPubNameController.clear();
|
|
filterOrderByController.clear();
|
|
layoutTitleController.clear();
|
|
layoutDescriptionController.clear();
|
|
} else if (pageType.value == 2) {
|
|
// Post Page mode
|
|
htmlController.clear();
|
|
titleController.clear();
|
|
targetController.clear();
|
|
filterPubNameController.text =
|
|
page?.config?['filter']?['pub_name'] ?? '';
|
|
filterOrderByController.text =
|
|
page?.config?['filter']?['order_by'] ?? '';
|
|
filterOrderDesc.value =
|
|
page?.config?['filter']?['order_desc'] ?? true;
|
|
filterTypes.value =
|
|
(page?.config?['filter']?['types'] as List?)?.cast<int>() ?? [0];
|
|
layoutTitleController.text = page?.config?['layout']?['title'] ?? '';
|
|
layoutDescriptionController.text =
|
|
page?.config?['layout']?['description'] ?? '';
|
|
layoutShowPub.value = page?.config?['layout']?['show_pub'] ?? true;
|
|
}
|
|
});
|
|
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 if (pageType.value == 1) {
|
|
targetController.text = page!.config?['target'] ?? '';
|
|
} else if (pageType.value == 2) {
|
|
filterPubNameController.text =
|
|
page!.config?['filter']?['pub_name'] ?? '';
|
|
filterOrderByController.text =
|
|
page!.config?['filter']?['order_by'] ?? '';
|
|
filterOrderDesc.value =
|
|
page!.config?['filter']?['order_desc'] ?? true;
|
|
filterTypes.value =
|
|
(page!.config?['filter']?['types'] as List?)?.cast<int>() ?? [0];
|
|
layoutTitleController.text = page!.config?['layout']?['title'] ?? '';
|
|
layoutDescriptionController.text =
|
|
page!.config?['layout']?['description'] ?? '';
|
|
layoutShowPub.value = page!.config?['layout']?['show_pub'] ?? true;
|
|
}
|
|
}
|
|
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 if (pageType.value == 1) {
|
|
// Redirect page
|
|
pageData = {
|
|
'type': 1,
|
|
'path': pathController.text,
|
|
'config': {'target': targetController.text},
|
|
};
|
|
} else {
|
|
// Post Page
|
|
pageData = {
|
|
'type': 2,
|
|
'path': pathController.text,
|
|
'config': {
|
|
'filter': {
|
|
if (filterPubNameController.text.isNotEmpty)
|
|
'pub_name': filterPubNameController.text,
|
|
if (filterOrderByController.text.isNotEmpty)
|
|
'order_by': filterOrderByController.text,
|
|
'order_desc': filterOrderDesc.value,
|
|
'types': filterTypes.value,
|
|
},
|
|
'layout': {
|
|
if (layoutTitleController.text.isNotEmpty)
|
|
'title': layoutTitleController.text,
|
|
if (layoutDescriptionController.text.isNotEmpty)
|
|
'description': layoutDescriptionController.text,
|
|
'show_pub': layoutShowPub.value,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
if (page == null) {
|
|
// Create new page
|
|
await pagesNotifier.createPage(pageData);
|
|
} else {
|
|
// Update existing page
|
|
await pagesNotifier.updatePage(page!.id, pageData);
|
|
}
|
|
|
|
if (context.mounted) {
|
|
showSnackBar(
|
|
page == null
|
|
? 'Page created successfully'
|
|
: 'Page updated successfully',
|
|
);
|
|
Navigator.pop(context);
|
|
}
|
|
} catch (e) {
|
|
showErrorAlert(e);
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
},
|
|
[
|
|
pageType,
|
|
pubName,
|
|
site.slug,
|
|
page,
|
|
filterOrderDesc.value,
|
|
filterTypes.value,
|
|
layoutShowPub.value,
|
|
],
|
|
);
|
|
|
|
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) {
|
|
showSnackBar('Page deleted successfully');
|
|
Navigator.pop(context);
|
|
}
|
|
} catch (e) {
|
|
showErrorAlert(e);
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
}, [pubName, site.slug, page, context]);
|
|
|
|
return SheetScaffold(
|
|
titleText: page == null ? 'Create Page' : 'Edit Page',
|
|
child: 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'),
|
|
],
|
|
),
|
|
),
|
|
DropdownMenuItem(
|
|
value: 2,
|
|
child: Row(
|
|
children: [
|
|
Icon(Symbols.article, size: 20),
|
|
Gap(8),
|
|
Text('Post 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),
|
|
|
|
// Common "Path" field for all types
|
|
TextFormField(
|
|
controller: pathController,
|
|
decoration: const InputDecoration(
|
|
labelText: 'Page Path',
|
|
hintText: '/about, /posts, 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),
|
|
|
|
// Conditional form fields based on page type
|
|
if (pageType.value == 0) ...[
|
|
// HTML Page fields
|
|
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 if (pageType.value == 1) ...[
|
|
// Redirect Page fields
|
|
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('/') &&
|
|
// ignore: use_string_starts_with_pattern
|
|
!value.startsWith('http://') &&
|
|
// ignore: use_string_starts_with_pattern
|
|
!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),
|
|
] else if (pageType.value == 2) ...[
|
|
// Post Page fields
|
|
const Text(
|
|
'Filter Settings',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
).alignment(Alignment.centerLeft).padding(horizontal: 24),
|
|
const Gap(8),
|
|
TextFormField(
|
|
controller: filterPubNameController,
|
|
decoration: const InputDecoration(
|
|
labelText: 'Publication Name (Optional)',
|
|
hintText: 'Filter by publication name',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(Radius.circular(12)),
|
|
),
|
|
),
|
|
onTapOutside: (_) =>
|
|
FocusManager.instance.primaryFocus?.unfocus(),
|
|
).padding(horizontal: 20),
|
|
const Gap(16),
|
|
TextFormField(
|
|
controller: filterOrderByController,
|
|
decoration: const InputDecoration(
|
|
labelText: 'Order By (Optional)',
|
|
hintText: 'e.g. published_at',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(Radius.circular(12)),
|
|
),
|
|
),
|
|
onTapOutside: (_) =>
|
|
FocusManager.instance.primaryFocus?.unfocus(),
|
|
).padding(horizontal: 20),
|
|
const Gap(8),
|
|
SwitchListTile(
|
|
value: filterOrderDesc.value,
|
|
onChanged: (value) => filterOrderDesc.value = value,
|
|
title: const Text('Order Descending'),
|
|
contentPadding: const EdgeInsets.symmetric(
|
|
horizontal: 20,
|
|
),
|
|
),
|
|
const Gap(8),
|
|
const Text(
|
|
'Content Types',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
).alignment(Alignment.centerLeft).padding(horizontal: 24),
|
|
const Gap(4),
|
|
Wrap(
|
|
spacing: 8,
|
|
runSpacing: 8,
|
|
alignment: WrapAlignment.start,
|
|
runAlignment: WrapAlignment.start,
|
|
children: [
|
|
FilterChip(
|
|
label: const Text('Regular Post'),
|
|
selected: filterTypes.value.contains(0),
|
|
onSelected: (selected) {
|
|
final types = [...filterTypes.value];
|
|
if (selected) {
|
|
types.add(0);
|
|
} else {
|
|
types.remove(0);
|
|
}
|
|
filterTypes.value = types;
|
|
},
|
|
),
|
|
FilterChip(
|
|
label: const Text('Article'),
|
|
selected: filterTypes.value.contains(1),
|
|
onSelected: (selected) {
|
|
final types = [...filterTypes.value];
|
|
if (selected) {
|
|
types.add(1);
|
|
} else {
|
|
types.remove(1);
|
|
}
|
|
filterTypes.value = types;
|
|
},
|
|
),
|
|
],
|
|
).padding(horizontal: 20),
|
|
const Gap(24),
|
|
const Text(
|
|
'Layout Settings',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
).alignment(Alignment.centerLeft).padding(horizontal: 24),
|
|
const Gap(8),
|
|
TextFormField(
|
|
controller: layoutTitleController,
|
|
decoration: const InputDecoration(
|
|
labelText: 'Title (Optional)',
|
|
hintText: 'Page Title',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(Radius.circular(12)),
|
|
),
|
|
),
|
|
onTapOutside: (_) =>
|
|
FocusManager.instance.primaryFocus?.unfocus(),
|
|
).padding(horizontal: 20),
|
|
const Gap(16),
|
|
TextFormField(
|
|
controller: layoutDescriptionController,
|
|
decoration: const InputDecoration(
|
|
labelText: 'Description (Optional)',
|
|
hintText: 'Page Description',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(Radius.circular(12)),
|
|
),
|
|
),
|
|
onTapOutside: (_) =>
|
|
FocusManager.instance.primaryFocus?.unfocus(),
|
|
).padding(horizontal: 20),
|
|
const Gap(8),
|
|
SwitchListTile(
|
|
value: layoutShowPub.value,
|
|
onChanged: (value) => layoutShowPub.value = value,
|
|
title: const Text('Show Publication Info'),
|
|
contentPadding: const EdgeInsets.symmetric(
|
|
horizontal: 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: 16),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|