346 lines
14 KiB
Dart
346 lines
14 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:easy_autocomplete/easy_autocomplete.dart';
|
|
|
|
import 'package:linkdy/screens/bookmarks/provider/add_bookmark.provider.dart';
|
|
import 'package:linkdy/widgets/section_label.dart';
|
|
|
|
import 'package:linkdy/i18n/strings.g.dart';
|
|
import 'package:linkdy/constants/enums.dart';
|
|
|
|
class AddBookmarkModal extends ConsumerWidget {
|
|
final bool fullscreen;
|
|
|
|
const AddBookmarkModal({
|
|
Key? key,
|
|
required this.fullscreen,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
return Dialog.fullscreen(
|
|
child: Scaffold(
|
|
body: NestedScrollView(
|
|
headerSliverBuilder: (context, innerBoxIsScrolled) => [
|
|
SliverOverlapAbsorber(
|
|
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
|
|
sliver: SliverAppBar.large(
|
|
pinned: true,
|
|
floating: true,
|
|
centerTitle: false,
|
|
forceElevated: innerBoxIsScrolled,
|
|
leading: CloseButton(
|
|
onPressed: () => Navigator.pop(context),
|
|
),
|
|
title: Text(t.bookmarks.addBookmark.addBookmark),
|
|
actions: [
|
|
IconButton(
|
|
onPressed: ref.watch(addBookmarkProvider).checkBookmark != null
|
|
? () => ref.read(addBookmarkProvider.notifier).addBookmark()
|
|
: null,
|
|
icon: const Icon(Icons.save_rounded),
|
|
tooltip: t.generic.save,
|
|
),
|
|
const SizedBox(width: 8),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
body: SafeArea(
|
|
top: false,
|
|
bottom: true,
|
|
child: Builder(
|
|
builder: (context) => CustomScrollView(
|
|
slivers: [
|
|
SliverOverlapInjector(
|
|
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
|
|
),
|
|
SliverList.list(
|
|
children: const [
|
|
_ModalContent(),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _ModalContent extends ConsumerWidget {
|
|
const _ModalContent({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final provider = ref.watch(addBookmarkProvider);
|
|
|
|
final tags = ref.watch(getTagsProvider);
|
|
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const SizedBox(height: 16),
|
|
SectionLabel(
|
|
label: t.bookmarks.addBookmark.bookmarkUrl,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 0,
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
child: TextFormField(
|
|
controller: provider.urlController,
|
|
onChanged: ref.read(addBookmarkProvider.notifier).validateUrl,
|
|
enabled: provider.checkBookmarkLoadStatus != LoadStatus.loading,
|
|
autocorrect: false,
|
|
decoration: InputDecoration(
|
|
prefixIcon: const Icon(Icons.link_rounded),
|
|
border: const OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(10),
|
|
),
|
|
),
|
|
errorText: provider.urlError,
|
|
labelText: t.bookmarks.addBookmark.url,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
child: Center(
|
|
child: ElevatedButton(
|
|
onPressed: provider.checkBookmarkLoadStatus == null &&
|
|
provider.urlError == null &&
|
|
provider.urlController.text != ""
|
|
? () => ref.read(addBookmarkProvider.notifier).checkUrlDetails()
|
|
: null,
|
|
style: ButtonStyle(
|
|
foregroundColor: provider.checkBookmarkLoadStatus == LoadStatus.loaded
|
|
? const MaterialStatePropertyAll(Colors.green)
|
|
: provider.checkBookmarkLoadStatus == LoadStatus.error
|
|
? const MaterialStatePropertyAll(Colors.red)
|
|
: null,
|
|
backgroundColor: provider.checkBookmarkLoadStatus == LoadStatus.loaded
|
|
? MaterialStatePropertyAll(Colors.green.withOpacity(0.15))
|
|
: provider.checkBookmarkLoadStatus == LoadStatus.error
|
|
? MaterialStatePropertyAll(Colors.red.withOpacity(0.15))
|
|
: null,
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
if (provider.checkBookmarkLoadStatus == null) Text(t.bookmarks.addBookmark.validateUrl),
|
|
if (provider.checkBookmarkLoadStatus == LoadStatus.loading) ...[
|
|
const SizedBox(
|
|
width: 12,
|
|
height: 12,
|
|
child: CircularProgressIndicator(
|
|
strokeWidth: 2,
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text(t.bookmarks.addBookmark.checkingUrl),
|
|
],
|
|
if (provider.checkBookmarkLoadStatus == LoadStatus.loaded) ...[
|
|
const Icon(Icons.check_circle_rounded),
|
|
const SizedBox(width: 8),
|
|
Text(t.bookmarks.addBookmark.urlValid),
|
|
],
|
|
if (provider.checkBookmarkLoadStatus == LoadStatus.error) ...[
|
|
const Icon(Icons.error_rounded),
|
|
const SizedBox(width: 8),
|
|
Text(t.bookmarks.addBookmark.cannotCheckUrl),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
SectionLabel(
|
|
label: t.bookmarks.addBookmark.bookmarkDetails,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 24,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
child: TextFormField(
|
|
controller: provider.titleController,
|
|
decoration: InputDecoration(
|
|
prefixIcon: const Icon(Icons.title_rounded),
|
|
border: const OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(10),
|
|
),
|
|
),
|
|
labelText: t.bookmarks.addBookmark.title,
|
|
hintText: provider.checkBookmark?.metadata?.title,
|
|
floatingLabelBehavior:
|
|
provider.checkBookmark != null ? FloatingLabelBehavior.always : FloatingLabelBehavior.auto,
|
|
helperText: t.bookmarks.addBookmark.leaveEmptyUseWebsiteTitle,
|
|
enabled: provider.checkBookmark != null,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
child: TextFormField(
|
|
controller: provider.descriptionController,
|
|
decoration: InputDecoration(
|
|
prefixIcon: const Icon(Icons.description_rounded),
|
|
border: const OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(10),
|
|
),
|
|
),
|
|
labelText: t.bookmarks.addBookmark.description,
|
|
hintText: provider.checkBookmark?.metadata?.description,
|
|
floatingLabelBehavior:
|
|
provider.checkBookmark != null ? FloatingLabelBehavior.always : FloatingLabelBehavior.auto,
|
|
helperText: t.bookmarks.addBookmark.leaveEmptyUseWebsiteDescription,
|
|
enabled: provider.checkBookmark != null,
|
|
),
|
|
),
|
|
),
|
|
SectionLabel(
|
|
label: t.bookmarks.addBookmark.tags,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 24,
|
|
),
|
|
),
|
|
if (tags.isLoading == false)
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
child: Column(
|
|
children: [
|
|
if (provider.checkBookmark != null)
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: EasyAutocomplete(
|
|
controller: provider.tagsController,
|
|
onChanged: ref.read(addBookmarkProvider.notifier).validateTagInput,
|
|
suggestions: tags.value?.content?.results?.map((t) => t.name!).toList() ?? [],
|
|
decoration: InputDecoration(
|
|
border: const OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(10),
|
|
),
|
|
),
|
|
labelText: t.bookmarks.addBookmark.tags,
|
|
errorText: provider.tagsError,
|
|
),
|
|
suggestionBuilder: (data) => Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
child: Text(
|
|
data,
|
|
style: TextStyle(fontSize: 16, color: Theme.of(context).colorScheme.onSurfaceVariant),
|
|
),
|
|
),
|
|
onSubmitted: provider.tagsController.text != "" && provider.tagsError == null
|
|
? (v) {
|
|
ref.read(addBookmarkProvider.notifier).setTags([...provider.tags, v]);
|
|
ref.read(addBookmarkProvider.notifier).clearTagsController();
|
|
}
|
|
: null,
|
|
),
|
|
),
|
|
const SizedBox(width: 16),
|
|
IconButton(
|
|
onPressed: provider.tagsController.text != "" && provider.tagsError == null
|
|
? () {
|
|
ref
|
|
.read(addBookmarkProvider.notifier)
|
|
.setTags([...provider.tags, provider.tagsController.text]);
|
|
ref.read(addBookmarkProvider.notifier).clearTagsController();
|
|
}
|
|
: null,
|
|
icon: const Icon(Icons.check_rounded),
|
|
tooltip: t.bookmarks.addBookmark.addTag,
|
|
),
|
|
],
|
|
),
|
|
if (provider.checkBookmark != null) const SizedBox(height: 16),
|
|
SizedBox(
|
|
height: 40,
|
|
child: provider.tags.isNotEmpty
|
|
? ListView.separated(
|
|
scrollDirection: Axis.horizontal,
|
|
itemCount: provider.tags.length,
|
|
separatorBuilder: (context, index) => const SizedBox(width: 8),
|
|
itemBuilder: (context, index) => InputChip(
|
|
label: Text(provider.tags[index]),
|
|
onDeleted: () => ref
|
|
.read(addBookmarkProvider.notifier)
|
|
.setTags(provider.tags.where((tag) => tag != provider.tags[index]).toList()),
|
|
),
|
|
)
|
|
: Center(
|
|
child: Text(
|
|
t.bookmarks.addBookmark.noTagsAdded,
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
color: Theme.of(context).colorScheme.secondary,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
SectionLabel(
|
|
label: t.bookmarks.addBookmark.others,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 24,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
child: SizedBox(
|
|
height: 150,
|
|
child: TextFormField(
|
|
controller: provider.notesController,
|
|
decoration: InputDecoration(
|
|
prefixIcon: const Icon(Icons.note_rounded),
|
|
border: const OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(10),
|
|
),
|
|
),
|
|
labelText: t.bookmarks.addBookmark.notes,
|
|
helperText: t.generic.optional,
|
|
),
|
|
autocorrect: false,
|
|
expands: true,
|
|
minLines: null,
|
|
maxLines: null,
|
|
textAlignVertical: TextAlignVertical.top,
|
|
enabled: provider.checkBookmark != null,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
SwitchListTile(
|
|
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
|
|
title: Text(t.bookmarks.addBookmark.markAsUnread),
|
|
value: provider.markAsUnread,
|
|
onChanged: provider.checkBookmark != null
|
|
? (v) => ref.read(addBookmarkProvider.notifier).updateMarkAsUnread(v)
|
|
: null,
|
|
),
|
|
const SizedBox(height: 16),
|
|
],
|
|
);
|
|
}
|
|
}
|