refactor mobile file manager page

This commit is contained in:
csf 2023-03-09 21:09:17 +09:00
parent f5d0275bf3
commit 00b1439f32

View File

@ -3,7 +3,7 @@ import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_breadcrumb/flutter_breadcrumb.dart'; import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
import 'package:flutter_hbb/models/file_model.dart'; import 'package:flutter_hbb/models/file_model.dart';
import 'package:provider/provider.dart'; import 'package:get/get.dart';
import 'package:toggle_switch/toggle_switch.dart'; import 'package:toggle_switch/toggle_switch.dart';
import 'package:wakelock/wakelock.dart'; import 'package:wakelock/wakelock.dart';
@ -20,8 +20,13 @@ class FileManagerPage extends StatefulWidget {
class _FileManagerPageState extends State<FileManagerPage> { class _FileManagerPageState extends State<FileManagerPage> {
final model = gFFI.fileModel; final model = gFFI.fileModel;
final _selectedItems = SelectedItems(); var showLocal = true;
final _breadCrumbScroller = ScrollController(); var isSelecting = false.obs;
FileController get currentFileController =>
showLocal ? model.localController : model.remoteController;
FileDirectory get currentDir => currentFileController.directory.value;
DirectoryOptions get currentOptions => currentFileController.options.value;
@override @override
void initState() { void initState() {
@ -32,7 +37,6 @@ class _FileManagerPageState extends State<FileManagerPage> {
.showLoading(translate('Connecting...'), onCancel: closeConnection); .showLoading(translate('Connecting...'), onCancel: closeConnection);
}); });
gFFI.ffiModel.updateEventListener(widget.id); gFFI.ffiModel.updateEventListener(widget.id);
model.onDirChanged = (_) => breadCrumbScrollToEnd();
Wakelock.enable(); Wakelock.enable();
} }
@ -47,288 +51,447 @@ class _FileManagerPageState extends State<FileManagerPage> {
} }
@override @override
Widget build(BuildContext context) => ChangeNotifierProvider.value( Widget build(BuildContext context) => WillPopScope(
value: model, onWillPop: () async {
child: Consumer<FileModel>(builder: (_context, _model, _child) { if (isSelecting.value) {
return WillPopScope( isSelecting.value = false;
onWillPop: () async { } else {
if (model.selectMode) { currentFileController.goBack();
model.toggleSelectMode(); }
} else { return false;
model.goBack(); },
child: Scaffold(
// backgroundColor: MyTheme.grayBg,
appBar: AppBar(
leading: Row(children: [
IconButton(
icon: Icon(Icons.close),
onPressed: () => clientClose(widget.id, gFFI.dialogManager)),
]),
centerTitle: true,
title: ToggleSwitch(
initialLabelIndex: showLocal ? 0 : 1,
activeBgColor: [MyTheme.idColor],
inactiveBgColor: Theme.of(context).brightness == Brightness.light
? MyTheme.grayBg
: null,
inactiveFgColor: Theme.of(context).brightness == Brightness.light
? Colors.black54
: null,
totalSwitches: 2,
minWidth: 100,
fontSize: 15,
iconSize: 18,
labels: [translate("Local"), translate("Remote")],
icons: [Icons.phone_android_sharp, Icons.screen_share],
onToggle: (index) {
final current = showLocal ? 0 : 1;
if (index != current) {
setState(() => showLocal = !showLocal);
} }
return false;
}, },
child: Scaffold( ),
// backgroundColor: MyTheme.grayBg, actions: [
appBar: AppBar( PopupMenuButton<String>(
leading: Row(children: [ icon: Icon(Icons.more_vert),
IconButton( itemBuilder: (context) {
icon: Icon(Icons.close), return [
onPressed: () => PopupMenuItem(
clientClose(widget.id, gFFI.dialogManager)), child: Row(
]), children: [
centerTitle: true, Icon(Icons.refresh,
title: ToggleSwitch( color: Theme.of(context).iconTheme.color),
initialLabelIndex: model.isLocal ? 0 : 1, SizedBox(width: 5),
activeBgColor: [MyTheme.idColor], Text(translate("Refresh File"))
inactiveBgColor: ],
Theme.of(context).brightness == Brightness.light ),
? MyTheme.grayBg value: "refresh",
: null, ),
inactiveFgColor: PopupMenuItem(
Theme.of(context).brightness == Brightness.light enabled: currentDir.path != "/",
? Colors.black54 child: Row(
: null, children: [
totalSwitches: 2, Icon(Icons.check,
minWidth: 100, color: Theme.of(context).iconTheme.color),
fontSize: 15, SizedBox(width: 5),
iconSize: 18, Text(translate("Multi Select"))
labels: [translate("Local"), translate("Remote")], ],
icons: [Icons.phone_android_sharp, Icons.screen_share], ),
onToggle: (index) { value: "select",
final current = model.isLocal ? 0 : 1; ),
if (index != current) { PopupMenuItem(
model.togglePage(); enabled: currentDir.path != "/",
} child: Row(
}, children: [
), Icon(Icons.folder_outlined,
actions: [ color: Theme.of(context).iconTheme.color),
PopupMenuButton<String>( SizedBox(width: 5),
icon: Icon(Icons.more_vert), Text(translate("Create Folder"))
itemBuilder: (context) { ],
return [ ),
PopupMenuItem( value: "folder",
child: Row( ),
children: [ PopupMenuItem(
Icon(Icons.refresh, enabled: currentDir.path != "/",
color: Theme.of(context).iconTheme.color), child: Row(
SizedBox(width: 5), children: [
Text(translate("Refresh File")) Icon(
], currentOptions.showHidden
), ? Icons.check_box_outlined
value: "refresh", : Icons.check_box_outline_blank,
), color: Theme.of(context).iconTheme.color),
PopupMenuItem( SizedBox(width: 5),
enabled: model.currentDir.path != "/", Text(translate("Show Hidden Files"))
child: Row( ],
children: [ ),
Icon(Icons.check, value: "hidden",
color: Theme.of(context).iconTheme.color), )
SizedBox(width: 5), ];
Text(translate("Multi Select")) },
], onSelected: (v) {
), if (v == "refresh") {
value: "select", currentFileController.refresh();
), } else if (v == "select") {
PopupMenuItem( model.localController.selectedItems.clear();
enabled: model.currentDir.path != "/", model.remoteController.selectedItems.clear();
child: Row( isSelecting.toggle();
children: [ } else if (v == "folder") {
Icon(Icons.folder_outlined, final name = TextEditingController();
color: Theme.of(context).iconTheme.color), gFFI.dialogManager
SizedBox(width: 5), .show((setState, close) => CustomAlertDialog(
Text(translate("Create Folder")) title: Text(translate("Create Folder")),
], content: Column(
), mainAxisSize: MainAxisSize.min,
value: "folder", children: [
), TextFormField(
PopupMenuItem( decoration: InputDecoration(
enabled: model.currentDir.path != "/", labelText: translate(
child: Row( "Please enter the folder name"),
children: [
Icon(
model.getCurrentShowHidden()
? Icons.check_box_outlined
: Icons.check_box_outline_blank,
color: Theme.of(context).iconTheme.color),
SizedBox(width: 5),
Text(translate("Show Hidden Files"))
],
),
value: "hidden",
)
];
},
onSelected: (v) {
if (v == "refresh") {
model.refresh();
} else if (v == "select") {
_selectedItems.clear();
model.toggleSelectMode();
} else if (v == "folder") {
final name = TextEditingController();
gFFI.dialogManager
.show((setState, close) => CustomAlertDialog(
title: Text(translate("Create Folder")),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextFormField(
decoration: InputDecoration(
labelText: translate(
"Please enter the folder name"),
),
controller: name,
),
],
), ),
actions: [ controller: name,
dialogButton("Cancel", ),
onPressed: () => close(false), ],
isOutline: true), ),
dialogButton("OK", onPressed: () { actions: [
if (name.value.text.isNotEmpty) { dialogButton("Cancel",
model.createDir(PathUtil.join( onPressed: () => close(false),
model.currentDir.path, isOutline: true),
name.value.text, dialogButton("OK", onPressed: () {
model.getCurrentIsWindows())); if (name.value.text.isNotEmpty) {
close(); currentFileController.createDir(
} PathUtil.join(
}) currentDir.path,
])); name.value.text,
} else if (v == "hidden") { currentOptions.isWindows));
model.toggleShowHidden(); close();
} }
}), })
], ]));
), } else if (v == "hidden") {
body: body(), currentFileController.toggleShowHidden();
bottomSheet: bottomSheet(), }
)); }),
})); ],
),
body: showLocal
? FileManagerView(
controller: model.localController,
isSelecting: isSelecting,
showCheckBox: showCheckBox())
: FileManagerView(
controller: model.remoteController,
isSelecting: isSelecting,
showCheckBox: showCheckBox()),
bottomSheet: bottomSheet(),
));
bool showCheckBox() { bool showCheckBox() {
if (!model.selectMode) { final selectedItems = getActiveSelectedItems();
return false;
if (selectedItems != null) {
return selectedItems.isLocal == showLocal;
} }
return !_selectedItems.isOtherPage(model.isLocal); return false;
} }
Widget body() { Widget? bottomSheet() {
final isLocal = model.isLocal; return Obx(() {
final fd = model.currentDir; final selectedItems = getActiveSelectedItems();
final entries = fd.entries;
final localLabel = selectedItems?.isLocal == null
? ""
: " [${selectedItems!.isLocal ? translate("Local") : translate("Remote")}]";
if (isSelecting.value) {
final selectedItemsLen =
"${selectedItems?.items.length ?? 0} ${translate("items")}";
if (selectedItems == null ||
selectedItems.items.isEmpty ||
showCheckBox()) {
return BottomSheetBody(
leading: Icon(Icons.check),
title: translate("Selected"),
text: selectedItemsLen + localLabel,
onCanceled: () => isSelecting.toggle(),
actions: [
IconButton(
icon: Icon(Icons.compare_arrows),
onPressed: () => setState(() => showLocal = !showLocal),
),
IconButton(
icon: Icon(Icons.delete_forever),
onPressed: selectedItems != null
? () {
if (selectedItems.items.isNotEmpty) {
currentFileController.removeAction(selectedItems);
}
}
: null,
)
]);
} else {
return BottomSheetBody(
leading: Icon(Icons.input),
title: translate("Paste here?"),
text: selectedItemsLen + localLabel,
onCanceled: () => isSelecting.toggle(),
actions: [
IconButton(
icon: Icon(Icons.compare_arrows),
onPressed: () => setState(() => showLocal = !showLocal),
),
IconButton(
icon: Icon(Icons.paste),
onPressed: () {
isSelecting.toggle();
final otherSide = showLocal
? model.remoteController
: model.localController;
final otherSideData = DirectoryData(
otherSide.directory.value, otherSide.options.value);
currentFileController.sendFiles(
selectedItems, otherSideData);
},
)
]);
}
}
final jobTable = model.jobController.jobTable;
if (jobTable.isEmpty) {
return Offstage();
}
switch (jobTable.last.state) {
case JobState.inProgress:
return Obx(() => BottomSheetBody(
leading: CircularProgressIndicator(),
title: translate("Waiting"),
text:
"${translate("Speed")}: ${readableFileSize(jobTable.last.speed)}/s",
onCanceled: () =>
model.jobController.cancelJob(jobTable.last.id),
));
case JobState.done:
return Obx(() => BottomSheetBody(
leading: Icon(Icons.check),
title: "${translate("Successful")}!",
text: jobTable.last.display(),
onCanceled: () => jobTable.clear(),
));
case JobState.error:
return Obx(() => BottomSheetBody(
leading: Icon(Icons.error),
title: "${translate("Error")}!",
text: "",
onCanceled: () => jobTable.clear(),
));
case JobState.none:
break;
case JobState.paused:
// TODO: Handle this case.
break;
}
return Offstage();
});
}
SelectedItems? getActiveSelectedItems() {
final localSelectedItems = model.localController.selectedItems;
final remoteSelectedItems = model.remoteController.selectedItems;
if (localSelectedItems.items.isNotEmpty &&
remoteSelectedItems.items.isNotEmpty) {
// assert unreachable
debugPrint("Wrong SelectedItems state, reset");
localSelectedItems.clear();
remoteSelectedItems.clear();
}
if (localSelectedItems.items.isEmpty && remoteSelectedItems.items.isEmpty) {
return null;
}
if (localSelectedItems.items.length > remoteSelectedItems.items.length) {
return localSelectedItems;
} else {
return remoteSelectedItems;
}
}
}
class FileManagerView extends StatefulWidget {
final FileController controller;
final RxBool isSelecting;
final bool showCheckBox;
FileManagerView(
{required this.controller,
required this.isSelecting,
required this.showCheckBox});
@override
State<StatefulWidget> createState() => _FileManagerViewState();
}
class _FileManagerViewState extends State<FileManagerView> {
final _listScrollController = ScrollController();
final _breadCrumbScroller = ScrollController();
bool get isLocal => widget.controller.isLocal;
FileController get controller => widget.controller;
SelectedItems get _selectedItems => widget.controller.selectedItems;
@override
void initState() {
super.initState();
controller.directory.listen((e) => breadCrumbScrollToEnd());
}
@override
Widget build(BuildContext context) {
return Column(children: [ return Column(children: [
headTools(), headTools(),
Expanded( Expanded(child: Obx(() {
child: ListView.builder( final entries = controller.directory.value.entries;
controller: ScrollController(), return ListView.builder(
itemCount: entries.length + 1, controller: _listScrollController,
itemBuilder: (context, index) { itemCount: entries.length + 1,
if (index >= entries.length) { itemBuilder: (context, index) {
return listTail(); if (index >= entries.length) {
} return listTail();
var selected = false; }
if (model.selectMode) { var selected = false;
selected = _selectedItems.contains(entries[index]); if (widget.isSelecting.value) {
} selected = _selectedItems.items.contains(entries[index]);
}
final sizeStr = entries[index].isFile final sizeStr = entries[index].isFile
? readableFileSize(entries[index].size.toDouble()) ? readableFileSize(entries[index].size.toDouble())
: ""; : "";
return Card( return Card(
child: ListTile( child: ListTile(
leading: entries[index].isDrive leading: entries[index].isDrive
? Padding( ? Padding(
padding: EdgeInsets.symmetric(vertical: 8), padding: EdgeInsets.symmetric(vertical: 8),
child: Image( child: Image(
image: iconHardDrive, image: iconHardDrive,
fit: BoxFit.scaleDown, fit: BoxFit.scaleDown,
color: Theme.of(context) color: Theme.of(context)
.iconTheme .iconTheme
.color .color
?.withOpacity(0.7))) ?.withOpacity(0.7)))
: Icon( : Icon(
entries[index].isFile entries[index].isFile
? Icons.feed_outlined ? Icons.feed_outlined
: Icons.folder, : Icons.folder,
size: 40), size: 40),
title: Text(entries[index].name), title: Text(entries[index].name),
selected: selected, selected: selected,
subtitle: entries[index].isDrive subtitle: entries[index].isDrive
? null ? null
: Text( : Text(
"${entries[index].lastModified().toString().replaceAll(".000", "")} $sizeStr", "${entries[index].lastModified().toString().replaceAll(".000", "")} $sizeStr",
style: TextStyle(fontSize: 12, color: MyTheme.darkGray), style: TextStyle(fontSize: 12, color: MyTheme.darkGray),
), ),
trailing: entries[index].isDrive trailing: entries[index].isDrive
? null ? null
: showCheckBox() : widget.isSelecting.value && widget.showCheckBox
? Checkbox( ? Checkbox(
value: selected, value: selected,
onChanged: (v) { onChanged: (v) {
if (v == null) return; if (v == null) return;
if (v && !selected) { if (v && !selected) {
_selectedItems.add(isLocal, entries[index]); _selectedItems.add(entries[index]);
} else if (!v && selected) { } else if (!v && selected) {
_selectedItems.remove(entries[index]); _selectedItems.remove(entries[index]);
} }
setState(() {}); setState(() {});
}) })
: PopupMenuButton<String>( : PopupMenuButton<String>(
icon: Icon(Icons.more_vert), icon: Icon(Icons.more_vert),
itemBuilder: (context) { itemBuilder: (context) {
return [ return [
PopupMenuItem( PopupMenuItem(
child: Text(translate("Delete")), child: Text(translate("Delete")),
value: "delete", value: "delete",
), ),
PopupMenuItem( PopupMenuItem(
child: Text(translate("Multi Select")), child: Text(translate("Multi Select")),
value: "multi_select", value: "multi_select",
), ),
PopupMenuItem( PopupMenuItem(
child: Text(translate("Properties")), child: Text(translate("Properties")),
value: "properties", value: "properties",
enabled: false, enabled: false,
) )
]; ];
}, },
onSelected: (v) { onSelected: (v) {
if (v == "delete") { if (v == "delete") {
final items = SelectedItems(); final items = SelectedItems(isLocal: isLocal);
items.add(isLocal, entries[index]); items.add(entries[index]);
model.removeAction(items); controller.removeAction(items);
} else if (v == "multi_select") { } else if (v == "multi_select") {
_selectedItems.clear(); _selectedItems.clear();
model.toggleSelectMode(); widget.isSelecting.toggle();
} }
}), }),
onTap: () { onTap: () {
if (model.selectMode && !_selectedItems.isOtherPage(isLocal)) { if (widget.isSelecting.value && widget.showCheckBox) {
if (selected) { if (selected) {
_selectedItems.remove(entries[index]); _selectedItems.remove(entries[index]);
} else { } else {
_selectedItems.add(isLocal, entries[index]); _selectedItems.add(entries[index]);
}
return;
} }
setState(() {}); if (entries[index].isDirectory || entries[index].isDrive) {
return; controller.openDirectory(entries[index].path);
} } else {
if (entries[index].isDirectory || entries[index].isDrive) { // Perform file-related tasks.
model.openDirectory(entries[index].path); }
} else { },
// Perform file-related tasks. onLongPress: entries[index].isDrive
} ? null
}, : () {
onLongPress: entries[index].isDrive _selectedItems.clear();
? null widget.isSelecting.toggle();
: () { if (widget.isSelecting.value) {
_selectedItems.clear(); _selectedItems.add(entries[index]);
model.toggleSelectMode(); }
if (model.selectMode) { setState(() {});
_selectedItems.add(isLocal, entries[index]); },
} ),
setState(() {}); );
}, },
), );
); }))
},
))
]); ]);
} }
breadCrumbScrollToEnd() { void breadCrumbScrollToEnd() {
Future.delayed(Duration(milliseconds: 200), () { Future.delayed(Duration(milliseconds: 200), () {
if (_breadCrumbScroller.hasClients) { if (_breadCrumbScroller.hasClients) {
_breadCrumbScroller.animateTo( _breadCrumbScroller.animateTo(
@ -342,35 +505,39 @@ class _FileManagerPageState extends State<FileManagerPage> {
Widget headTools() => Container( Widget headTools() => Container(
child: Row( child: Row(
children: [ children: [
Expanded( Expanded(child: Obx(() {
child: BreadCrumb( final home = controller.options.value.home;
items: getPathBreadCrumbItems(() => model.goHome(), (list) { final isWindows = controller.options.value.isWindows;
var path = ""; return BreadCrumb(
if (model.currentHome.startsWith(list[0])) { items: getPathBreadCrumbItems(controller.shortPath, isWindows,
// absolute path () => controller.goToHomeDirectory(), (list) {
for (var item in list) { var path = "";
path = PathUtil.join(path, item, model.getCurrentIsWindows()); if (home.startsWith(list[0])) {
// absolute path
for (var item in list) {
path = PathUtil.join(path, item, isWindows);
}
} else {
path += home;
for (var item in list) {
path = PathUtil.join(path, item, isWindows);
}
} }
} else { controller.openDirectory(path);
path += model.currentHome; }),
for (var item in list) { divider: Icon(Icons.chevron_right),
path = PathUtil.join(path, item, model.getCurrentIsWindows()); overflow: ScrollableOverflow(controller: _breadCrumbScroller),
} );
} })),
model.openDirectory(path);
}),
divider: Icon(Icons.chevron_right),
overflow: ScrollableOverflow(controller: _breadCrumbScroller),
)),
Row( Row(
children: [ children: [
IconButton( IconButton(
icon: Icon(Icons.arrow_back), icon: Icon(Icons.arrow_back),
onPressed: model.goBack, onPressed: controller.goBack,
), ),
IconButton( IconButton(
icon: Icon(Icons.arrow_upward), icon: Icon(Icons.arrow_upward),
onPressed: model.goToParentDirectory, onPressed: controller.goToParentDirectory,
), ),
PopupMenuButton<SortBy>( PopupMenuButton<SortBy>(
icon: Icon(Icons.sort), icon: Icon(Icons.sort),
@ -382,123 +549,37 @@ class _FileManagerPageState extends State<FileManagerPage> {
)) ))
.toList(); .toList();
}, },
onSelected: model.changeSortStyle), onSelected: controller.changeSortStyle),
], ],
) )
], ],
)); ));
Widget listTail() { Widget listTail() => Obx(() => Container(
return Container( height: 100,
height: 100, child: Column(
child: Column( children: [
children: [ Padding(
Padding( padding: EdgeInsets.fromLTRB(30, 5, 30, 0),
padding: EdgeInsets.fromLTRB(30, 5, 30, 0), child: Text(
child: Text( controller.directory.value.path,
model.currentDir.path, style: TextStyle(color: MyTheme.darkGray),
style: TextStyle(color: MyTheme.darkGray),
),
),
Padding(
padding: EdgeInsets.all(2),
child: Text(
"${translate("Total")}: ${model.currentDir.entries.length} ${translate("items")}",
style: TextStyle(color: MyTheme.darkGray),
),
)
],
),
);
}
Widget? bottomSheet() {
final state = model.jobState;
final isOtherPage = _selectedItems.isOtherPage(model.isLocal);
final selectedItemsLen = "${_selectedItems.length} ${translate("items")}";
final local = _selectedItems.isLocal == null
? ""
: " [${_selectedItems.isLocal! ? translate("Local") : translate("Remote")}]";
if (model.selectMode) {
if (_selectedItems.length == 0 || !isOtherPage) {
return BottomSheetBody(
leading: Icon(Icons.check),
title: translate("Selected"),
text: selectedItemsLen + local,
onCanceled: () => model.toggleSelectMode(),
actions: [
IconButton(
icon: Icon(Icons.compare_arrows),
onPressed: model.togglePage,
), ),
IconButton( ),
icon: Icon(Icons.delete_forever), Padding(
onPressed: () { padding: EdgeInsets.all(2),
if (_selectedItems.length > 0) { child: Text(
model.removeAction(_selectedItems); "${translate("Total")}: ${controller.directory.value.entries.length} ${translate("items")}",
} style: TextStyle(color: MyTheme.darkGray),
},
)
]);
} else {
return BottomSheetBody(
leading: Icon(Icons.input),
title: translate("Paste here?"),
text: selectedItemsLen + local,
onCanceled: () => model.toggleSelectMode(),
actions: [
IconButton(
icon: Icon(Icons.compare_arrows),
onPressed: model.togglePage,
), ),
IconButton( )
icon: Icon(Icons.paste), ],
onPressed: () { ),
model.toggleSelectMode(); ));
model.sendFiles(_selectedItems);
},
)
]);
}
}
switch (state) { List<BreadCrumbItem> getPathBreadCrumbItems(String shortPath, bool isWindows,
case JobState.inProgress:
return BottomSheetBody(
leading: CircularProgressIndicator(),
title: translate("Waiting"),
text:
"${translate("Speed")}: ${readableFileSize(model.jobProgress.speed)}/s",
onCanceled: () => model.cancelJob(model.jobProgress.id),
);
case JobState.done:
return BottomSheetBody(
leading: Icon(Icons.check),
title: "${translate("Successful")}!",
text: model.jobProgress.display(),
onCanceled: () => model.jobReset(),
);
case JobState.error:
return BottomSheetBody(
leading: Icon(Icons.error),
title: "${translate("Error")}!",
text: "",
onCanceled: () => model.jobReset(),
);
case JobState.none:
break;
case JobState.paused:
// TODO: Handle this case.
break;
}
return null;
}
List<BreadCrumbItem> getPathBreadCrumbItems(
void Function() onHome, void Function(List<String>) onPressed) { void Function() onHome, void Function(List<String>) onPressed) {
final path = model.currentShortPath; final list = PathUtil.split(shortPath, isWindows);
final list = PathUtil.split(path, model.getCurrentIsWindows());
final breadCrumbList = [ final breadCrumbList = [
BreadCrumbItem( BreadCrumbItem(
content: IconButton( content: IconButton(