💄 Better article editor
This commit is contained in:
127
lib/widgets/post/article_sidebar_panel.dart
Normal file
127
lib/widgets/post/article_sidebar_panel.dart
Normal file
@@ -0,0 +1,127 @@
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:material_symbols_icons/material_symbols_icons.dart';
|
||||
|
||||
enum SidebarPanelType { attachments, settings }
|
||||
|
||||
class ArticleSidebarPanelWidget extends HookConsumerWidget {
|
||||
final Widget attachmentsContent;
|
||||
final Widget settingsContent;
|
||||
final VoidCallback onClose;
|
||||
final bool isWide;
|
||||
final double width;
|
||||
|
||||
const ArticleSidebarPanelWidget({
|
||||
super.key,
|
||||
required this.attachmentsContent,
|
||||
required this.settingsContent,
|
||||
required this.onClose,
|
||||
required this.isWide,
|
||||
this.width = 480,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
|
||||
final activePanel = useState<SidebarPanelType>(
|
||||
SidebarPanelType.attachments,
|
||||
);
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
_buildHeader(context, activePanel, colorScheme, onClose, theme),
|
||||
const Divider(height: 1),
|
||||
Expanded(
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
switchInCurve: Curves.easeOutCubic,
|
||||
switchOutCurve: Curves.easeInCubic,
|
||||
child: activePanel.value == SidebarPanelType.attachments
|
||||
? Container(
|
||||
key: const ValueKey(SidebarPanelType.attachments),
|
||||
alignment: Alignment.topCenter,
|
||||
child: attachmentsContent,
|
||||
)
|
||||
: Container(
|
||||
key: const ValueKey(SidebarPanelType.settings),
|
||||
alignment: Alignment.topCenter,
|
||||
child: settingsContent,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHeader(
|
||||
BuildContext context,
|
||||
ValueNotifier<SidebarPanelType> activePanel,
|
||||
ColorScheme colorScheme,
|
||||
VoidCallback onClose,
|
||||
ThemeData theme,
|
||||
) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
child: Row(
|
||||
children: [
|
||||
_buildSegmentedTabs(activePanel, colorScheme, theme),
|
||||
const Spacer(),
|
||||
if (!isWide)
|
||||
IconButton(
|
||||
icon: const Icon(Symbols.close),
|
||||
onPressed: onClose,
|
||||
tooltip: 'close'.tr(),
|
||||
padding: const EdgeInsets.all(8),
|
||||
constraints: const BoxConstraints(minWidth: 40, minHeight: 40),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSegmentedTabs(
|
||||
ValueNotifier<SidebarPanelType> activePanel,
|
||||
ColorScheme colorScheme,
|
||||
ThemeData theme,
|
||||
) {
|
||||
return SegmentedButton<SidebarPanelType>(
|
||||
segments: [
|
||||
ButtonSegment(
|
||||
value: SidebarPanelType.attachments,
|
||||
label: Text('attachments'.tr()),
|
||||
icon: const Icon(Symbols.attach_file, size: 18),
|
||||
),
|
||||
ButtonSegment(
|
||||
value: SidebarPanelType.settings,
|
||||
label: Text('settings'.tr()),
|
||||
icon: const Icon(Symbols.settings, size: 18),
|
||||
),
|
||||
],
|
||||
selected: {activePanel.value},
|
||||
onSelectionChanged: (Set<SidebarPanelType> selected) {
|
||||
if (selected.isNotEmpty) {
|
||||
activePanel.value = selected.first;
|
||||
}
|
||||
},
|
||||
style: ButtonStyle(
|
||||
backgroundColor: WidgetStateProperty.resolveWith((states) {
|
||||
if (states.contains(WidgetState.selected)) {
|
||||
return colorScheme.secondaryContainer;
|
||||
}
|
||||
return colorScheme.surfaceContainerHighest;
|
||||
}),
|
||||
foregroundColor: WidgetStateProperty.resolveWith((states) {
|
||||
if (states.contains(WidgetState.selected)) {
|
||||
return colorScheme.onSecondaryContainer;
|
||||
}
|
||||
return colorScheme.onSurface;
|
||||
}),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,15 @@
|
||||
import 'package:desktop_drop/desktop_drop.dart';
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:island/models/file.dart';
|
||||
import 'package:island/services/responsive.dart';
|
||||
import 'package:island/services/file_uploader.dart';
|
||||
import 'package:island/widgets/attachment_uploader.dart';
|
||||
import 'package:island/widgets/content/attachment_preview.dart';
|
||||
import 'package:island/widgets/post/compose_shared.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
|
||||
/// A reusable widget for displaying attachments in compose screens.
|
||||
/// Supports both grid and list layouts based on screen width.
|
||||
@@ -103,111 +107,256 @@ class ComposeAttachments extends ConsumerWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// A specialized attachment widget for article compose with expansion tile.
|
||||
class ArticleComposeAttachments extends ConsumerWidget {
|
||||
class ArticleComposeAttachments extends HookConsumerWidget {
|
||||
final ComposeState state;
|
||||
final EdgeInsets? padding;
|
||||
|
||||
const ArticleComposeAttachments({super.key, required this.state});
|
||||
const ArticleComposeAttachments({
|
||||
super.key,
|
||||
required this.state,
|
||||
this.padding,
|
||||
});
|
||||
|
||||
Future<void> _handleDroppedFiles(DropDoneDetails details, ComposeState state) async {
|
||||
final newFiles = <UniversalFile>[];
|
||||
|
||||
for (final xfile in details.files) {
|
||||
// Create UniversalFile with default type first
|
||||
final uf = UniversalFile(data: xfile, type: UniversalFileType.file);
|
||||
// Use FileUploader.getMimeType to get proper MIME type
|
||||
final mimeType = FileUploader.getMimeType(uf);
|
||||
final fileType = switch (mimeType.split('/').firstOrNull) {
|
||||
'image' => UniversalFileType.image,
|
||||
'video' => UniversalFileType.video,
|
||||
'audio' => UniversalFileType.audio,
|
||||
_ => UniversalFileType.file,
|
||||
};
|
||||
|
||||
// Update the file type
|
||||
final correctedUf = UniversalFile(data: xfile, type: fileType);
|
||||
newFiles.add(correctedUf);
|
||||
}
|
||||
|
||||
if (newFiles.isNotEmpty) {
|
||||
state.attachments.value = [...state.attachments.value, ...newFiles];
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
return ValueListenableBuilder<String?>(
|
||||
valueListenable: state.thumbnailId,
|
||||
builder: (context, thumbnailId, _) {
|
||||
return ValueListenableBuilder<List<UniversalFile>>(
|
||||
valueListenable: state.attachments,
|
||||
builder: (context, attachments, _) {
|
||||
if (attachments.isEmpty) return const SizedBox.shrink();
|
||||
return Theme(
|
||||
data: Theme.of(
|
||||
context,
|
||||
).copyWith(dividerColor: Colors.transparent),
|
||||
child: ExpansionTile(
|
||||
initiallyExpanded: true,
|
||||
title: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('attachments').tr(),
|
||||
Text(
|
||||
'articleAttachmentHint'.tr(),
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
return Padding(
|
||||
padding: padding ?? EdgeInsets.all(16),
|
||||
child: ValueListenableBuilder<String?>(
|
||||
valueListenable: state.thumbnailId,
|
||||
builder: (context, thumbnailId, _) {
|
||||
return ValueListenableBuilder<List<UniversalFile>>(
|
||||
valueListenable: state.attachments,
|
||||
builder: (context, attachments, _) {
|
||||
return HookBuilder(
|
||||
builder: (context) {
|
||||
final isDragging = useState(false);
|
||||
return DropTarget(
|
||||
onDragDone: (details) async =>
|
||||
await _handleDroppedFiles(details, state),
|
||||
onDragEntered: (details) => isDragging.value = true,
|
||||
onDragExited: (details) => isDragging.value = false,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.easeOut,
|
||||
decoration: isDragging.value ? BoxDecoration(
|
||||
border: Border.all(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
width: 2,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
) : null,
|
||||
child: Padding(
|
||||
padding: isDragging.value ? const EdgeInsets.all(8) : EdgeInsets.zero,
|
||||
child: attachments.isEmpty
|
||||
? AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.easeOut,
|
||||
width: double.infinity,
|
||||
height: 200,
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.surfaceContainerHighest
|
||||
.withOpacity(0.3),
|
||||
border: Border.all(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.outline.withOpacity(0.5),
|
||||
width: 1,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Symbols.upload,
|
||||
size: 48,
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'dropFilesHere',
|
||||
style: Theme.of(context).textTheme.titleMedium
|
||||
?.copyWith(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
).tr(),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'dragAndDropToAttach',
|
||||
style: Theme.of(context).textTheme.bodySmall
|
||||
?.copyWith(
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.onSurfaceVariant
|
||||
.withOpacity(0.7),
|
||||
),
|
||||
).tr(),
|
||||
],
|
||||
),
|
||||
)
|
||||
: ValueListenableBuilder<Map<int, double?>>(
|
||||
valueListenable: state.attachmentProgress,
|
||||
builder: (context, progressMap, _) {
|
||||
return Wrap(
|
||||
runSpacing: 8,
|
||||
spacing: 8,
|
||||
children: [
|
||||
for (var idx = 0; idx < attachments.length; idx++)
|
||||
_AnimatedAttachmentItem(
|
||||
index: idx,
|
||||
item: attachments[idx],
|
||||
progress: progressMap[idx],
|
||||
isUploading: progressMap.containsKey(idx),
|
||||
thumbnailId: thumbnailId,
|
||||
onSetThumbnail: (id) =>
|
||||
ComposeLogic.setThumbnail(state, id),
|
||||
onRequestUpload: () async {
|
||||
final config =
|
||||
await showModalBottomSheet<
|
||||
AttachmentUploadConfig
|
||||
>(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
useRootNavigator: true,
|
||||
builder: (context) => AttachmentUploaderSheet(
|
||||
ref: ref,
|
||||
state: state,
|
||||
index: idx,
|
||||
),
|
||||
);
|
||||
if (config != null) {
|
||||
await ComposeLogic.uploadAttachment(
|
||||
ref,
|
||||
state,
|
||||
idx,
|
||||
poolId: config.poolId,
|
||||
);
|
||||
}
|
||||
},
|
||||
onUpdate: (value) =>
|
||||
ComposeLogic.updateAttachment(state, value, idx),
|
||||
onDelete: () =>
|
||||
ComposeLogic.deleteAttachment(ref, state, idx),
|
||||
onInsert: () =>
|
||||
ComposeLogic.insertAttachment(ref, state, idx),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
children: [
|
||||
ValueListenableBuilder<Map<int, double?>>(
|
||||
valueListenable: state.attachmentProgress,
|
||||
builder: (context, progressMap, _) {
|
||||
return Wrap(
|
||||
runSpacing: 8,
|
||||
spacing: 8,
|
||||
children: [
|
||||
for (var idx = 0; idx < attachments.length; idx++)
|
||||
SizedBox(
|
||||
width: 180,
|
||||
height: 180,
|
||||
child: AttachmentPreview(
|
||||
isCompact: true,
|
||||
item: attachments[idx],
|
||||
progress: progressMap[idx],
|
||||
isUploading: progressMap.containsKey(idx),
|
||||
thumbnailId: thumbnailId,
|
||||
onSetThumbnail: (id) =>
|
||||
ComposeLogic.setThumbnail(state, id),
|
||||
onRequestUpload: () async {
|
||||
final config =
|
||||
await showModalBottomSheet<
|
||||
AttachmentUploadConfig
|
||||
>(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
builder: (context) =>
|
||||
AttachmentUploaderSheet(
|
||||
ref: ref,
|
||||
state: state,
|
||||
index: idx,
|
||||
),
|
||||
);
|
||||
if (config != null) {
|
||||
await ComposeLogic.uploadAttachment(
|
||||
ref,
|
||||
state,
|
||||
idx,
|
||||
poolId: config.poolId,
|
||||
);
|
||||
}
|
||||
},
|
||||
onUpdate: (value) =>
|
||||
ComposeLogic.updateAttachment(
|
||||
state,
|
||||
value,
|
||||
idx,
|
||||
),
|
||||
onDelete: () => ComposeLogic.deleteAttachment(
|
||||
ref,
|
||||
state,
|
||||
idx,
|
||||
),
|
||||
onInsert: () => ComposeLogic.insertAttachment(
|
||||
ref,
|
||||
state,
|
||||
idx,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _AnimatedAttachmentItem extends HookWidget {
|
||||
final int index;
|
||||
final UniversalFile item;
|
||||
final double? progress;
|
||||
final bool isUploading;
|
||||
final String? thumbnailId;
|
||||
final Function(String?) onSetThumbnail;
|
||||
final VoidCallback onRequestUpload;
|
||||
final Function(UniversalFile) onUpdate;
|
||||
final VoidCallback onDelete;
|
||||
final VoidCallback onInsert;
|
||||
|
||||
const _AnimatedAttachmentItem({
|
||||
required this.index,
|
||||
required this.item,
|
||||
required this.progress,
|
||||
required this.isUploading,
|
||||
required this.thumbnailId,
|
||||
required this.onSetThumbnail,
|
||||
required this.onRequestUpload,
|
||||
required this.onUpdate,
|
||||
required this.onDelete,
|
||||
required this.onInsert,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final animationController = useAnimationController(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
);
|
||||
|
||||
final fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
|
||||
CurvedAnimation(parent: animationController, curve: Curves.easeOut),
|
||||
);
|
||||
|
||||
final slideAnimation =
|
||||
Tween<Offset>(begin: const Offset(0, 0.1), end: Offset.zero).animate(
|
||||
CurvedAnimation(
|
||||
parent: animationController,
|
||||
curve: Curves.easeOutCubic,
|
||||
),
|
||||
);
|
||||
|
||||
useEffect(() {
|
||||
final delay = Duration(milliseconds: 50 * index);
|
||||
Future.delayed(delay, () {
|
||||
animationController.forward();
|
||||
});
|
||||
return null;
|
||||
}, [index]);
|
||||
|
||||
return FadeTransition(
|
||||
opacity: fadeAnimation,
|
||||
child: SlideTransition(
|
||||
position: slideAnimation,
|
||||
child: AttachmentPreview(
|
||||
isCompact: true,
|
||||
item: item,
|
||||
progress: progress,
|
||||
isUploading: isUploading,
|
||||
thumbnailId: thumbnailId,
|
||||
onSetThumbnail: onSetThumbnail,
|
||||
onRequestUpload: onRequestUpload,
|
||||
onUpdate: onUpdate,
|
||||
onDelete: onDelete,
|
||||
onInsert: onInsert,
|
||||
bordered: true,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -139,364 +139,350 @@ class ComposeSettingsSheet extends HookConsumerWidget {
|
||||
|
||||
final tagInputController = useTextEditingController();
|
||||
|
||||
return SheetScaffold(
|
||||
titleText: 'postSettings'.tr(),
|
||||
heightFactor: 0.6,
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
spacing: 16,
|
||||
children: [
|
||||
// Slug field
|
||||
TextField(
|
||||
controller: state.slugController,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'postSlug'.tr(),
|
||||
hintText: 'postSlugHint'.tr(),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
vertical: 9,
|
||||
horizontal: 16,
|
||||
),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
return SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
spacing: 16,
|
||||
children: [
|
||||
// Slug field
|
||||
TextField(
|
||||
controller: state.slugController,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'postSlug'.tr(),
|
||||
hintText: 'postSlugHint'.tr(),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
vertical: 9,
|
||||
horizontal: 16,
|
||||
),
|
||||
onTapOutside: (_) =>
|
||||
FocusManager.instance.primaryFocus?.unfocus(),
|
||||
),
|
||||
|
||||
// Tags field
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: Theme.of(context).colorScheme.outline,
|
||||
width: 1,
|
||||
),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
spacing: 12,
|
||||
children: [
|
||||
Text(
|
||||
'tags'.tr(),
|
||||
style: Theme.of(context).textTheme.labelLarge,
|
||||
),
|
||||
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
|
||||
),
|
||||
|
||||
// Tags field
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: Theme.of(context).colorScheme.outline,
|
||||
width: 1,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
spacing: 12,
|
||||
children: [
|
||||
Text(
|
||||
'tags'.tr(),
|
||||
style: Theme.of(context).textTheme.labelLarge,
|
||||
),
|
||||
// Existing tags display
|
||||
if (currentTags.isNotEmpty)
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: currentTags.map((tag) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 6,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
'#$tag',
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const Gap(4),
|
||||
InkWell(
|
||||
onTap: () {
|
||||
final newTags = List<String>.from(
|
||||
state.tags.value,
|
||||
)..remove(tag);
|
||||
state.tags.value = newTags;
|
||||
},
|
||||
child: Icon(
|
||||
Icons.close,
|
||||
size: 16,
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
// Existing tags display
|
||||
if (currentTags.isNotEmpty)
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: currentTags.map((tag) {
|
||||
return Container(
|
||||
// Tag input with autocomplete
|
||||
TypeAheadField<SnPostTag>(
|
||||
controller: tagInputController,
|
||||
builder: (context, controller, focusNode) {
|
||||
return TextField(
|
||||
controller: controller,
|
||||
focusNode: focusNode,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'addTag'.tr(),
|
||||
border: InputBorder.none,
|
||||
isCollapsed: true,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
onSubmitted: (value) {
|
||||
state.tags.value = [...state.tags.value, value];
|
||||
controller.clear();
|
||||
},
|
||||
);
|
||||
},
|
||||
suggestionsCallback: (pattern) =>
|
||||
_fetchTagSuggestions(pattern, ref),
|
||||
itemBuilder: (context, suggestion) {
|
||||
return ListTile(
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(8)),
|
||||
),
|
||||
title: Text('#${suggestion.slug}'),
|
||||
subtitle: Text('${suggestion.usage} posts'),
|
||||
dense: true,
|
||||
);
|
||||
},
|
||||
onSelected: (suggestion) {
|
||||
if (!state.tags.value.contains(suggestion.slug)) {
|
||||
state.tags.value = [...state.tags.value, suggestion.slug];
|
||||
}
|
||||
tagInputController.clear();
|
||||
},
|
||||
direction: VerticalDirection.down,
|
||||
hideOnEmpty: true,
|
||||
hideOnLoading: true,
|
||||
debounceDuration: const Duration(milliseconds: 300),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Categories field
|
||||
DropdownButtonFormField2<SnPostCategory>(
|
||||
isExpanded: true,
|
||||
decoration: InputDecoration(
|
||||
contentPadding: const EdgeInsets.symmetric(vertical: 9),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
hint: Text('categories'.tr(), style: TextStyle(fontSize: 15)),
|
||||
items: (postCategories.value?.items ?? <SnPostCategory>[]).map((
|
||||
item,
|
||||
) {
|
||||
return DropdownMenuItem(
|
||||
value: item,
|
||||
enabled: false,
|
||||
child: StatefulBuilder(
|
||||
builder: (context, menuSetState) {
|
||||
final isSelected = state.categories.value.contains(item);
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
isSelected
|
||||
? state.categories.value = state.categories.value
|
||||
.where((e) => e != item)
|
||||
.toList()
|
||||
: state.categories.value = [
|
||||
...state.categories.value,
|
||||
item,
|
||||
];
|
||||
menuSetState(() {});
|
||||
},
|
||||
child: Container(
|
||||
height: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Row(
|
||||
children: [
|
||||
if (isSelected)
|
||||
const Icon(Icons.check_box_outlined)
|
||||
else
|
||||
const Icon(Icons.check_box_outline_blank),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.categoryDisplayTitle,
|
||||
style: const TextStyle(fontSize: 14),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
value: currentCategories.isEmpty ? null : currentCategories.last,
|
||||
onChanged: (_) {},
|
||||
selectedItemBuilder: (context) {
|
||||
return (postCategories.value?.items ?? []).map((item) {
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
children: [
|
||||
for (final category in currentCategories)
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 6,
|
||||
vertical: 4,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
'#$tag',
|
||||
style: TextStyle(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onPrimary,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const Gap(4),
|
||||
InkWell(
|
||||
onTap: () {
|
||||
final newTags = List<String>.from(
|
||||
state.tags.value,
|
||||
)..remove(tag);
|
||||
state.tags.value = newTags;
|
||||
},
|
||||
child: Icon(
|
||||
Icons.close,
|
||||
size: 16,
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
// Tag input with autocomplete
|
||||
TypeAheadField<SnPostTag>(
|
||||
controller: tagInputController,
|
||||
builder: (context, controller, focusNode) {
|
||||
return TextField(
|
||||
controller: controller,
|
||||
focusNode: focusNode,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'addTag'.tr(),
|
||||
border: InputBorder.none,
|
||||
isCollapsed: true,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
onSubmitted: (value) {
|
||||
state.tags.value = [...state.tags.value, value];
|
||||
controller.clear();
|
||||
},
|
||||
);
|
||||
},
|
||||
suggestionsCallback: (pattern) =>
|
||||
_fetchTagSuggestions(pattern, ref),
|
||||
itemBuilder: (context, suggestion) {
|
||||
return ListTile(
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(8)),
|
||||
),
|
||||
title: Text('#${suggestion.slug}'),
|
||||
subtitle: Text('${suggestion.usage} posts'),
|
||||
dense: true,
|
||||
);
|
||||
},
|
||||
onSelected: (suggestion) {
|
||||
if (!state.tags.value.contains(suggestion.slug)) {
|
||||
state.tags.value = [
|
||||
...state.tags.value,
|
||||
suggestion.slug,
|
||||
];
|
||||
}
|
||||
tagInputController.clear();
|
||||
},
|
||||
direction: VerticalDirection.down,
|
||||
hideOnEmpty: true,
|
||||
hideOnLoading: true,
|
||||
debounceDuration: const Duration(milliseconds: 300),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Categories field
|
||||
DropdownButtonFormField2<SnPostCategory>(
|
||||
isExpanded: true,
|
||||
decoration: InputDecoration(
|
||||
contentPadding: const EdgeInsets.symmetric(vertical: 9),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
hint: Text('categories'.tr(), style: TextStyle(fontSize: 15)),
|
||||
items: (postCategories.value?.items ?? <SnPostCategory>[]).map((
|
||||
item,
|
||||
) {
|
||||
return DropdownMenuItem(
|
||||
value: item,
|
||||
enabled: false,
|
||||
child: StatefulBuilder(
|
||||
builder: (context, menuSetState) {
|
||||
final isSelected = state.categories.value.contains(item);
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
isSelected
|
||||
? state.categories.value = state.categories.value
|
||||
.where((e) => e != item)
|
||||
.toList()
|
||||
: state.categories.value = [
|
||||
...state.categories.value,
|
||||
item,
|
||||
];
|
||||
menuSetState(() {});
|
||||
},
|
||||
child: Container(
|
||||
height: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Row(
|
||||
children: [
|
||||
if (isSelected)
|
||||
const Icon(Icons.check_box_outlined)
|
||||
else
|
||||
const Icon(Icons.check_box_outline_blank),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.categoryDisplayTitle,
|
||||
style: const TextStyle(fontSize: 14),
|
||||
),
|
||||
),
|
||||
],
|
||||
margin: const EdgeInsets.only(right: 4),
|
||||
child: Text(
|
||||
category.categoryDisplayTitle,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
value: currentCategories.isEmpty ? null : currentCategories.last,
|
||||
onChanged: (_) {},
|
||||
selectedItemBuilder: (context) {
|
||||
return (postCategories.value?.items ?? []).map((item) {
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
children: [
|
||||
for (final category in currentCategories)
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 4,
|
||||
),
|
||||
margin: const EdgeInsets.only(right: 4),
|
||||
child: Text(
|
||||
category.categoryDisplayTitle,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList();
|
||||
},
|
||||
buttonStyleData: const ButtonStyleData(
|
||||
padding: EdgeInsets.only(left: 16, right: 8),
|
||||
height: 38,
|
||||
),
|
||||
menuItemStyleData: const MenuItemStyleData(
|
||||
height: 38,
|
||||
padding: EdgeInsets.zero,
|
||||
}).toList();
|
||||
},
|
||||
buttonStyleData: const ButtonStyleData(
|
||||
padding: EdgeInsets.only(left: 16, right: 8),
|
||||
height: 38,
|
||||
),
|
||||
menuItemStyleData: const MenuItemStyleData(
|
||||
height: 38,
|
||||
padding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
|
||||
// Realm selection
|
||||
DropdownButtonFormField2<SnRealm?>(
|
||||
isExpanded: true,
|
||||
decoration: InputDecoration(
|
||||
contentPadding: const EdgeInsets.symmetric(vertical: 9),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
|
||||
// Realm selection
|
||||
DropdownButtonFormField2<SnRealm?>(
|
||||
isExpanded: true,
|
||||
decoration: InputDecoration(
|
||||
contentPadding: const EdgeInsets.symmetric(vertical: 9),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
hint: Text('realm'.tr(), style: const TextStyle(fontSize: 15)),
|
||||
items: [
|
||||
DropdownMenuItem<SnRealm?>(
|
||||
value: null,
|
||||
child: Row(
|
||||
children: [
|
||||
const CircleAvatar(
|
||||
radius: 16,
|
||||
child: Icon(Symbols.link_off, fill: 1),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text('postUnlinkRealm').tr(),
|
||||
],
|
||||
).padding(left: 16, right: 8),
|
||||
),
|
||||
hint: Text('realm'.tr(), style: const TextStyle(fontSize: 15)),
|
||||
items: [
|
||||
// Include current realm if it's not null and not in joined realms
|
||||
if (currentRealm != null &&
|
||||
!(userRealms.value ?? []).any((r) => r.id == currentRealm.id))
|
||||
DropdownMenuItem<SnRealm?>(
|
||||
value: null,
|
||||
value: currentRealm,
|
||||
child: Row(
|
||||
children: [
|
||||
const CircleAvatar(
|
||||
ProfilePictureWidget(
|
||||
file: currentRealm.picture,
|
||||
fallbackIcon: Symbols.workspaces,
|
||||
radius: 16,
|
||||
child: Icon(Symbols.link_off, fill: 1),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text('postUnlinkRealm').tr(),
|
||||
Text(currentRealm.name),
|
||||
],
|
||||
).padding(left: 16, right: 8),
|
||||
),
|
||||
// Include current realm if it's not null and not in joined realms
|
||||
if (currentRealm != null &&
|
||||
!(userRealms.value ?? []).any(
|
||||
(r) => r.id == currentRealm.id,
|
||||
))
|
||||
DropdownMenuItem<SnRealm?>(
|
||||
value: currentRealm,
|
||||
if (userRealms.hasValue)
|
||||
...(userRealms.value ?? []).map(
|
||||
(realm) => DropdownMenuItem<SnRealm?>(
|
||||
value: realm,
|
||||
child: Row(
|
||||
children: [
|
||||
ProfilePictureWidget(
|
||||
file: currentRealm.picture,
|
||||
file: realm.picture,
|
||||
fallbackIcon: Symbols.workspaces,
|
||||
radius: 16,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(currentRealm.name),
|
||||
Text(realm.name),
|
||||
],
|
||||
).padding(left: 16, right: 8),
|
||||
),
|
||||
if (userRealms.hasValue)
|
||||
...(userRealms.value ?? []).map(
|
||||
(realm) => DropdownMenuItem<SnRealm?>(
|
||||
value: realm,
|
||||
child: Row(
|
||||
children: [
|
||||
ProfilePictureWidget(
|
||||
file: realm.picture,
|
||||
fallbackIcon: Symbols.workspaces,
|
||||
radius: 16,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(realm.name),
|
||||
],
|
||||
).padding(left: 16, right: 8),
|
||||
),
|
||||
),
|
||||
],
|
||||
value: currentRealm,
|
||||
onChanged: (value) {
|
||||
state.realm.value = value;
|
||||
},
|
||||
selectedItemBuilder: (context) {
|
||||
return (userRealms.value ?? []).map((_) {
|
||||
return Row(
|
||||
children: [
|
||||
if (currentRealm == null)
|
||||
const CircleAvatar(
|
||||
radius: 16,
|
||||
child: Icon(Symbols.link_off, fill: 1),
|
||||
)
|
||||
else
|
||||
ProfilePictureWidget(
|
||||
file: currentRealm.picture,
|
||||
fallbackIcon: Symbols.workspaces,
|
||||
radius: 16,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(currentRealm?.name ?? 'postUnlinkRealm'.tr()),
|
||||
],
|
||||
);
|
||||
}).toList();
|
||||
},
|
||||
buttonStyleData: const ButtonStyleData(
|
||||
padding: EdgeInsets.only(left: 16, right: 8),
|
||||
height: 40,
|
||||
),
|
||||
menuItemStyleData: const MenuItemStyleData(
|
||||
height: 56,
|
||||
padding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
],
|
||||
value: currentRealm,
|
||||
onChanged: (value) {
|
||||
state.realm.value = value;
|
||||
},
|
||||
selectedItemBuilder: (context) {
|
||||
return (userRealms.value ?? []).map((_) {
|
||||
return Row(
|
||||
children: [
|
||||
if (currentRealm == null)
|
||||
const CircleAvatar(
|
||||
radius: 16,
|
||||
child: Icon(Symbols.link_off, fill: 1),
|
||||
)
|
||||
else
|
||||
ProfilePictureWidget(
|
||||
file: currentRealm.picture,
|
||||
fallbackIcon: Symbols.workspaces,
|
||||
radius: 16,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(currentRealm?.name ?? 'postUnlinkRealm'.tr()),
|
||||
],
|
||||
);
|
||||
}).toList();
|
||||
},
|
||||
buttonStyleData: const ButtonStyleData(
|
||||
padding: EdgeInsets.only(left: 16, right: 8),
|
||||
height: 40,
|
||||
),
|
||||
menuItemStyleData: const MenuItemStyleData(
|
||||
height: 56,
|
||||
padding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
|
||||
// Visibility setting
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: colorScheme.outline, width: 1),
|
||||
// Visibility setting
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: colorScheme.outline, width: 1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: ListTile(
|
||||
leading: Icon(getVisibilityIcon(currentVisibility)),
|
||||
title: Text('postVisibility'.tr()),
|
||||
subtitle: Text(getVisibilityText(currentVisibility).tr()),
|
||||
trailing: const Icon(Symbols.chevron_right),
|
||||
onTap: showVisibilitySheet,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: ListTile(
|
||||
leading: Icon(getVisibilityIcon(currentVisibility)),
|
||||
title: Text('postVisibility'.tr()),
|
||||
subtitle: Text(getVisibilityText(currentVisibility).tr()),
|
||||
trailing: const Icon(Symbols.chevron_right),
|
||||
onTap: showVisibilitySheet,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 8,
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 8,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
312
lib/widgets/post/filters/post_filter.dart
Normal file
312
lib/widgets/post/filters/post_filter.dart
Normal file
@@ -0,0 +1,312 @@
|
||||
import 'package:easy_localization/easy_localization.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/pods/post/post_list.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
|
||||
class PostFilterWidget extends HookConsumerWidget {
|
||||
final TabController categoryTabController;
|
||||
final PostListQuery initialQuery;
|
||||
final ValueChanged<PostListQuery> onQueryChanged;
|
||||
final bool hideSearch;
|
||||
|
||||
const PostFilterWidget({
|
||||
super.key,
|
||||
required this.categoryTabController,
|
||||
required this.initialQuery,
|
||||
required this.onQueryChanged,
|
||||
this.hideSearch = false,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final includeReplies = useState<bool?>(initialQuery.includeReplies);
|
||||
final mediaOnly = useState<bool>(initialQuery.mediaOnly ?? false);
|
||||
final queryTerm = useState<String?>(initialQuery.queryTerm);
|
||||
final order = useState<String?>(initialQuery.order);
|
||||
final orderDesc = useState<bool>(initialQuery.orderDesc);
|
||||
final periodStart = useState<int?>(initialQuery.periodStart);
|
||||
final periodEnd = useState<int?>(initialQuery.periodEnd);
|
||||
final type = useState<int?>(initialQuery.type);
|
||||
final showAdvancedFilters = useState<bool>(false);
|
||||
final searchController = useTextEditingController(
|
||||
text: initialQuery.queryTerm,
|
||||
);
|
||||
|
||||
void updateQuery() {
|
||||
final newQuery = initialQuery.copyWith(
|
||||
includeReplies: includeReplies.value,
|
||||
mediaOnly: mediaOnly.value,
|
||||
queryTerm: queryTerm.value,
|
||||
order: order.value,
|
||||
periodStart: periodStart.value,
|
||||
periodEnd: periodEnd.value,
|
||||
orderDesc: orderDesc.value,
|
||||
type: type.value,
|
||||
);
|
||||
onQueryChanged(newQuery);
|
||||
}
|
||||
|
||||
useEffect(() {
|
||||
void onTabChanged() {
|
||||
final tabIndex = categoryTabController.index;
|
||||
type.value = switch (tabIndex) {
|
||||
1 => 0,
|
||||
2 => 1,
|
||||
_ => null,
|
||||
};
|
||||
updateQuery();
|
||||
}
|
||||
|
||||
categoryTabController.addListener(onTabChanged);
|
||||
return () => categoryTabController.removeListener(onTabChanged);
|
||||
}, [categoryTabController]);
|
||||
|
||||
return Card(
|
||||
margin: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
child: Column(
|
||||
children: [
|
||||
TabBar(
|
||||
controller: categoryTabController,
|
||||
dividerColor: Colors.transparent,
|
||||
splashBorderRadius: const BorderRadius.all(Radius.circular(8)),
|
||||
tabs: [
|
||||
Tab(text: 'all'.tr()),
|
||||
Tab(text: 'postTypePost'.tr()),
|
||||
Tab(text: 'postArticle'.tr()),
|
||||
],
|
||||
),
|
||||
const Divider(height: 1),
|
||||
Column(
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: CheckboxListTile(
|
||||
title: Text('reply'.tr()),
|
||||
value: includeReplies.value,
|
||||
tristate: true,
|
||||
onChanged: (value) {
|
||||
final current = includeReplies.value;
|
||||
if (current == null) {
|
||||
includeReplies.value = false;
|
||||
} else if (current == false) {
|
||||
includeReplies.value = true;
|
||||
} else {
|
||||
includeReplies.value = null;
|
||||
}
|
||||
updateQuery();
|
||||
},
|
||||
dense: true,
|
||||
controlAffinity: ListTileControlAffinity.leading,
|
||||
secondary: const Icon(Symbols.reply),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: CheckboxListTile(
|
||||
title: Text('attachments'.tr()),
|
||||
value: mediaOnly.value,
|
||||
onChanged: (value) {
|
||||
if (value != null) {
|
||||
mediaOnly.value = value;
|
||||
}
|
||||
updateQuery();
|
||||
},
|
||||
dense: true,
|
||||
controlAffinity: ListTileControlAffinity.leading,
|
||||
secondary: const Icon(Symbols.attachment),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
CheckboxListTile(
|
||||
title: Text('descendingOrder'.tr()),
|
||||
value: orderDesc.value,
|
||||
onChanged: (value) {
|
||||
if (value != null) {
|
||||
orderDesc.value = value;
|
||||
}
|
||||
updateQuery();
|
||||
},
|
||||
dense: true,
|
||||
controlAffinity: ListTileControlAffinity.leading,
|
||||
secondary: const Icon(Symbols.sort),
|
||||
),
|
||||
],
|
||||
),
|
||||
const Divider(height: 1),
|
||||
ListTile(
|
||||
title: Text('advancedFilters'.tr()),
|
||||
leading: const Icon(Symbols.filter_list),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(const Radius.circular(8)),
|
||||
),
|
||||
trailing: Icon(
|
||||
showAdvancedFilters.value
|
||||
? Symbols.expand_less
|
||||
: Symbols.expand_more,
|
||||
),
|
||||
onTap: () {
|
||||
showAdvancedFilters.value = !showAdvancedFilters.value;
|
||||
},
|
||||
),
|
||||
if (showAdvancedFilters.value) ...[
|
||||
const Divider(height: 1),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
if (!hideSearch)
|
||||
TextField(
|
||||
controller: searchController,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'search'.tr(),
|
||||
hintText: 'searchPosts'.tr(),
|
||||
prefixIcon: const Icon(Symbols.search),
|
||||
border: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(12)),
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 8,
|
||||
),
|
||||
),
|
||||
onChanged: (value) {
|
||||
queryTerm.value = value.isEmpty ? null : value;
|
||||
updateQuery();
|
||||
},
|
||||
),
|
||||
if (!hideSearch) const Gap(12),
|
||||
DropdownButtonFormField<String>(
|
||||
decoration: InputDecoration(
|
||||
labelText: 'sortBy'.tr(),
|
||||
border: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(12)),
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 8,
|
||||
),
|
||||
),
|
||||
value: order.value,
|
||||
items: [
|
||||
DropdownMenuItem(value: 'date', child: Text('date'.tr())),
|
||||
DropdownMenuItem(
|
||||
value: 'popularity',
|
||||
child: Text('popularity'.tr()),
|
||||
),
|
||||
],
|
||||
onChanged: (value) {
|
||||
order.value = value;
|
||||
updateQuery();
|
||||
},
|
||||
),
|
||||
const Gap(12),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: InkWell(
|
||||
onTap: () async {
|
||||
final pickedDate = await showDatePicker(
|
||||
context: context,
|
||||
initialDate: periodStart.value != null
|
||||
? DateTime.fromMillisecondsSinceEpoch(
|
||||
periodStart.value! * 1000,
|
||||
)
|
||||
: DateTime.now(),
|
||||
firstDate: DateTime(2000),
|
||||
lastDate: DateTime.now().add(
|
||||
const Duration(days: 365),
|
||||
),
|
||||
);
|
||||
if (pickedDate != null) {
|
||||
periodStart.value =
|
||||
pickedDate.millisecondsSinceEpoch ~/ 1000;
|
||||
updateQuery();
|
||||
}
|
||||
},
|
||||
child: InputDecorator(
|
||||
decoration: InputDecoration(
|
||||
labelText: 'fromDate'.tr(),
|
||||
border: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(12),
|
||||
),
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 8,
|
||||
),
|
||||
suffixIcon: const Icon(Symbols.calendar_today),
|
||||
),
|
||||
child: Text(
|
||||
periodStart.value != null
|
||||
? DateTime.fromMillisecondsSinceEpoch(
|
||||
periodStart.value! * 1000,
|
||||
).toString().split(' ')[0]
|
||||
: 'selectDate'.tr(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const Gap(8),
|
||||
Expanded(
|
||||
child: InkWell(
|
||||
onTap: () async {
|
||||
final pickedDate = await showDatePicker(
|
||||
context: context,
|
||||
initialDate: periodEnd.value != null
|
||||
? DateTime.fromMillisecondsSinceEpoch(
|
||||
periodEnd.value! * 1000,
|
||||
)
|
||||
: DateTime.now(),
|
||||
firstDate: DateTime(2000),
|
||||
lastDate: DateTime.now().add(
|
||||
const Duration(days: 365),
|
||||
),
|
||||
);
|
||||
if (pickedDate != null) {
|
||||
periodEnd.value =
|
||||
pickedDate.millisecondsSinceEpoch ~/ 1000;
|
||||
updateQuery();
|
||||
}
|
||||
},
|
||||
child: InputDecorator(
|
||||
decoration: InputDecoration(
|
||||
labelText: 'toDate'.tr(),
|
||||
border: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(12),
|
||||
),
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 8,
|
||||
),
|
||||
suffixIcon: const Icon(Symbols.calendar_today),
|
||||
),
|
||||
child: Text(
|
||||
periodEnd.value != null
|
||||
? DateTime.fromMillisecondsSinceEpoch(
|
||||
periodEnd.value! * 1000,
|
||||
).toString().split(' ')[0]
|
||||
: 'selectDate'.tr(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
256
lib/widgets/post/filters/post_subscription_filter.dart
Normal file
256
lib/widgets/post/filters/post_subscription_filter.dart
Normal file
@@ -0,0 +1,256 @@
|
||||
import 'package:easy_localization/easy_localization.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/post.dart';
|
||||
import 'package:island/models/post_category.dart';
|
||||
import 'package:island/pods/network.dart';
|
||||
import 'package:island/widgets/content/cloud_files.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
import 'package:styled_widget/styled_widget.dart';
|
||||
|
||||
part 'post_subscription_filter.g.dart';
|
||||
|
||||
@riverpod
|
||||
Future<List<SnPublisherSubscription>> publishersSubscriptions(Ref ref) async {
|
||||
final client = ref.read(apiClientProvider);
|
||||
|
||||
final response = await client.get('/sphere/publishers/subscriptions');
|
||||
|
||||
return response.data
|
||||
.map((json) => SnPublisherSubscription.fromJson(json))
|
||||
.cast<SnPublisherSubscription>()
|
||||
.toList();
|
||||
}
|
||||
|
||||
@riverpod
|
||||
Future<List<SnCategorySubscription>> categoriesSubscriptions(Ref ref) async {
|
||||
final client = ref.read(apiClientProvider);
|
||||
|
||||
final response = await client.get('/sphere/categories/subscriptions');
|
||||
|
||||
return response.data
|
||||
.map((json) => SnCategorySubscription.fromJson(json))
|
||||
.cast<SnCategorySubscription>()
|
||||
.toList();
|
||||
}
|
||||
|
||||
class PostSubscriptionFilterWidget extends HookConsumerWidget {
|
||||
final List<String> initialSelectedPublishers;
|
||||
final List<String> initialSelectedCategories;
|
||||
final List<String> initialSelectedTags;
|
||||
final ValueChanged<List<String>> onSelectedPublishersChanged;
|
||||
final ValueChanged<List<String>> onSelectedCategoriesChanged;
|
||||
final ValueChanged<List<String>> onSelectedTagsChanged;
|
||||
final bool hideSearch;
|
||||
|
||||
const PostSubscriptionFilterWidget({
|
||||
super.key,
|
||||
required this.initialSelectedPublishers,
|
||||
required this.initialSelectedCategories,
|
||||
required this.initialSelectedTags,
|
||||
required this.onSelectedPublishersChanged,
|
||||
required this.onSelectedCategoriesChanged,
|
||||
required this.onSelectedTagsChanged,
|
||||
this.hideSearch = false,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final selectedPublishers = useState<List<String>>(
|
||||
initialSelectedPublishers,
|
||||
);
|
||||
final selectedCategories = useState<List<String>>(
|
||||
initialSelectedCategories,
|
||||
);
|
||||
final selectedTags = useState<List<String>>(initialSelectedTags);
|
||||
|
||||
final publishersAsync = ref.watch(publishersSubscriptionsProvider);
|
||||
final categoriesAsync = ref.watch(categoriesSubscriptionsProvider);
|
||||
|
||||
void updateSelection() {
|
||||
onSelectedPublishersChanged(selectedPublishers.value);
|
||||
onSelectedCategoriesChanged(selectedCategories.value);
|
||||
onSelectedTagsChanged(selectedTags.value);
|
||||
}
|
||||
|
||||
return Card(
|
||||
margin: EdgeInsets.zero,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Row(
|
||||
spacing: 16,
|
||||
children: [
|
||||
const Icon(Symbols.subscriptions, size: 20),
|
||||
Text(
|
||||
'exploreFilterSubscriptions'.tr(),
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
],
|
||||
).padding(horizontal: 16, top: 12),
|
||||
const Gap(12),
|
||||
|
||||
// Publishers Section
|
||||
publishersAsync.when(
|
||||
data: (subscriptions) {
|
||||
if (subscriptions.isEmpty) {
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Text('noSubscriptions'.tr()),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Text(
|
||||
'publishers'.tr(),
|
||||
style: Theme.of(context).textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
).padding(bottom: 8, horizontal: 16),
|
||||
...subscriptions.map((subscription) {
|
||||
final isSelected = selectedPublishers.value.contains(
|
||||
subscription.publisher.name,
|
||||
);
|
||||
final publisher = subscription.publisher;
|
||||
|
||||
return CheckboxListTile(
|
||||
controlAffinity: ListTileControlAffinity.trailing,
|
||||
title: Text(publisher.nick),
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(8)),
|
||||
),
|
||||
value: isSelected,
|
||||
onChanged: (value) {
|
||||
if (value == true) {
|
||||
selectedPublishers.value = [
|
||||
...selectedPublishers.value,
|
||||
subscription.publisher.name,
|
||||
];
|
||||
} else {
|
||||
selectedPublishers.value = selectedPublishers.value
|
||||
.where(
|
||||
(name) => name != subscription.publisher.name,
|
||||
)
|
||||
.toList();
|
||||
}
|
||||
updateSelection();
|
||||
},
|
||||
dense: true,
|
||||
secondary: ProfilePictureWidget(
|
||||
file: subscription.publisher.picture,
|
||||
radius: 12,
|
||||
),
|
||||
contentPadding: const EdgeInsets.only(
|
||||
left: 15,
|
||||
right: 16,
|
||||
),
|
||||
);
|
||||
}),
|
||||
],
|
||||
);
|
||||
},
|
||||
loading: () => const Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(16.0),
|
||||
child: CircularProgressIndicator(),
|
||||
),
|
||||
),
|
||||
error: (error, stack) => Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Text('errorLoadingSubscriptions'.tr()),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
if (publishersAsync.value?.isNotEmpty ?? false)
|
||||
const Divider(height: 1).padding(vertical: 8),
|
||||
|
||||
// Categories Section
|
||||
categoriesAsync.when(
|
||||
data: (subscriptions) {
|
||||
if (subscriptions.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Text(
|
||||
'categoriesAndTags'.tr(),
|
||||
style: Theme.of(context).textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
).padding(bottom: 8, horizontal: 16),
|
||||
...subscriptions.map((subscription) {
|
||||
final category = subscription.category;
|
||||
final tag = subscription.tag;
|
||||
final slug = category?.slug ?? tag?.slug;
|
||||
final displayTitle =
|
||||
category?.categoryDisplayTitle ??
|
||||
tag?.name ??
|
||||
slug ??
|
||||
'';
|
||||
final isCategorySelected = selectedCategories.value
|
||||
.contains(slug);
|
||||
final isTagSelected = selectedTags.value.contains(slug);
|
||||
|
||||
return CheckboxListTile(
|
||||
controlAffinity: ListTileControlAffinity.trailing,
|
||||
title: Text(displayTitle),
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(8)),
|
||||
),
|
||||
secondary: category != null
|
||||
? Icon(Symbols.category)
|
||||
: Icon(Symbols.tag),
|
||||
value: category != null
|
||||
? isCategorySelected
|
||||
: isTagSelected,
|
||||
onChanged: (value) {
|
||||
if (value == true) {
|
||||
if (category != null) {
|
||||
selectedCategories.value = [
|
||||
...selectedCategories.value,
|
||||
slug!,
|
||||
];
|
||||
} else if (tag != null) {
|
||||
selectedTags.value = [...selectedTags.value, slug!];
|
||||
}
|
||||
} else {
|
||||
if (category != null) {
|
||||
selectedCategories.value = selectedCategories.value
|
||||
.where((id) => id != slug)
|
||||
.toList();
|
||||
} else if (tag != null) {
|
||||
selectedTags.value = selectedTags.value
|
||||
.where((id) => id != slug)
|
||||
.toList();
|
||||
}
|
||||
}
|
||||
updateSelection();
|
||||
},
|
||||
dense: true,
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
),
|
||||
);
|
||||
}),
|
||||
],
|
||||
);
|
||||
},
|
||||
loading: () => const SizedBox.shrink(),
|
||||
error: (error, stack) => const SizedBox.shrink(),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
94
lib/widgets/post/filters/post_subscription_filter.g.dart
Normal file
94
lib/widgets/post/filters/post_subscription_filter.g.dart
Normal file
@@ -0,0 +1,94 @@
|
||||
// GENERATED CODE - DO NOT MODIFY BY HAND
|
||||
|
||||
part of 'post_subscription_filter.dart';
|
||||
|
||||
// **************************************************************************
|
||||
// RiverpodGenerator
|
||||
// **************************************************************************
|
||||
|
||||
// GENERATED CODE - DO NOT MODIFY BY HAND
|
||||
// ignore_for_file: type=lint, type=warning
|
||||
|
||||
@ProviderFor(publishersSubscriptions)
|
||||
final publishersSubscriptionsProvider = PublishersSubscriptionsProvider._();
|
||||
|
||||
final class PublishersSubscriptionsProvider
|
||||
extends
|
||||
$FunctionalProvider<
|
||||
AsyncValue<List<SnPublisherSubscription>>,
|
||||
List<SnPublisherSubscription>,
|
||||
FutureOr<List<SnPublisherSubscription>>
|
||||
>
|
||||
with
|
||||
$FutureModifier<List<SnPublisherSubscription>>,
|
||||
$FutureProvider<List<SnPublisherSubscription>> {
|
||||
PublishersSubscriptionsProvider._()
|
||||
: super(
|
||||
from: null,
|
||||
argument: null,
|
||||
retry: null,
|
||||
name: r'publishersSubscriptionsProvider',
|
||||
isAutoDispose: true,
|
||||
dependencies: null,
|
||||
$allTransitiveDependencies: null,
|
||||
);
|
||||
|
||||
@override
|
||||
String debugGetCreateSourceHash() => _$publishersSubscriptionsHash();
|
||||
|
||||
@$internal
|
||||
@override
|
||||
$FutureProviderElement<List<SnPublisherSubscription>> $createElement(
|
||||
$ProviderPointer pointer,
|
||||
) => $FutureProviderElement(pointer);
|
||||
|
||||
@override
|
||||
FutureOr<List<SnPublisherSubscription>> create(Ref ref) {
|
||||
return publishersSubscriptions(ref);
|
||||
}
|
||||
}
|
||||
|
||||
String _$publishersSubscriptionsHash() =>
|
||||
r'208463c1f879a3ddab4092112e312a0cd27ebc2f';
|
||||
|
||||
@ProviderFor(categoriesSubscriptions)
|
||||
final categoriesSubscriptionsProvider = CategoriesSubscriptionsProvider._();
|
||||
|
||||
final class CategoriesSubscriptionsProvider
|
||||
extends
|
||||
$FunctionalProvider<
|
||||
AsyncValue<List<SnCategorySubscription>>,
|
||||
List<SnCategorySubscription>,
|
||||
FutureOr<List<SnCategorySubscription>>
|
||||
>
|
||||
with
|
||||
$FutureModifier<List<SnCategorySubscription>>,
|
||||
$FutureProvider<List<SnCategorySubscription>> {
|
||||
CategoriesSubscriptionsProvider._()
|
||||
: super(
|
||||
from: null,
|
||||
argument: null,
|
||||
retry: null,
|
||||
name: r'categoriesSubscriptionsProvider',
|
||||
isAutoDispose: true,
|
||||
dependencies: null,
|
||||
$allTransitiveDependencies: null,
|
||||
);
|
||||
|
||||
@override
|
||||
String debugGetCreateSourceHash() => _$categoriesSubscriptionsHash();
|
||||
|
||||
@$internal
|
||||
@override
|
||||
$FutureProviderElement<List<SnCategorySubscription>> $createElement(
|
||||
$ProviderPointer pointer,
|
||||
) => $FutureProviderElement(pointer);
|
||||
|
||||
@override
|
||||
FutureOr<List<SnCategorySubscription>> create(Ref ref) {
|
||||
return categoriesSubscriptions(ref);
|
||||
}
|
||||
}
|
||||
|
||||
String _$categoriesSubscriptionsHash() =>
|
||||
r'14a8f04d258d1a10aae20ca959495926840c9386';
|
||||
Reference in New Issue
Block a user