Integrating more work from Save parameter page (#125)

lib/widgets/page_title_widget.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:parameter_page/widgets/page_persistence_state_indicator_widget.dart';
+
+class PageTitleWidget extends StatelessWidget {
+  final TextEditingController controller = TextEditingController();
+
+  final String title;
+
+  final bool editing;
+
+  final PagePersistenceState persistenceState;
+
+  final Function(String) onTitleUpdate;
+
+  PageTitleWidget(
+      {super.key,
+      required this.title,
+      required this.editing,
+      required this.persistenceState,
+      required this.onTitleUpdate}) {
+    controller.text = title;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        key: const Key("page_title"),
+        child: editing ? _buildEditor() : _buildReadOnly());
+  }
+
+  Widget _buildReadOnly() {
+    return Row(children: [
+      Text(title),
+      const SizedBox(width: 8.0),
+      PagePersistenceStateIndicatorWidget(persistenceState: persistenceState)
+    ]);
+  }
+
+  Widget _buildEditor() {
+    return Row(children: [
+      Expanded(
+          child: TextField(
+        key: const Key("page_title_textfield"),
+        maxLines: 1,
+        minLines: 1,
+        controller: controller,
+        onTapOutside: (PointerDownEvent event) =>
+            onTitleUpdate.call(controller.text),
+      ))
+    ]);
+  }
+}

lib/widgets/page_widget.dart

@@ -2,7 +2,6 @@ import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:parameter_page/services/parameter_page/parameter_page_service.dart';
 import 'package:parameter_page/widgets/new_entry_editor_widget.dart';
-import 'package:parameter_page/widgets/page_persistence_state_indicator_widget.dart';
 import '../entities/parameter_page.dart';
 import '../entities/page_entry.dart';
 import 'display_settings_widget.dart';
@@ -36,10 +35,16 @@ class PageWidget extends StatefulWidget {
 
   final String? pageId;
 
-  final Function(PagePersistenceState)? onPageModified;
+  final Function(bool)? onPageModified;
+
+  final Function(bool)? onToggleEditing;
 
   const PageWidget(
-      {this.pageId, this.onPageModified, required this.service, super.key});
+      {this.pageId,
+      this.onPageModified,
+      this.onToggleEditing,
+      required this.service,
+      super.key});
 
   @override
   State<PageWidget> createState() => PageWidgetState();
@@ -245,10 +250,10 @@ class PageWidgetState extends State<PageWidget> {
   void _toggleEditMode(ParameterPage page) {
     setState(() => page.toggleEditing());
     if (!page.editing()) {
-      widget.onPageModified?.call(page.isDirty
-          ? PagePersistenceState.unsaved
-          : PagePersistenceState.clean);
+      widget.onPageModified?.call(page.isDirty);
     }
+
+    widget.onToggleEditing?.call(page.editing());
   }
 
   Widget _buildEditModeFloatingActionBar(ParameterPage page) {

lib/widgets/parameter_page_scaffold_widget.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:parameter_page/services/dpm/dpm_service.dart';
 import 'package:parameter_page/services/parameter_page/parameter_page_service.dart';
+import 'package:parameter_page/widgets/page_title_widget.dart';
 
 import 'data_acquisition_widget.dart';
 import 'display_settings_widget.dart';
@@ -37,23 +38,21 @@ class _ParameterPageScaffoldWidgetState
   }
 
   AppBar _buildAppBar(BuildContext context) {
-    return AppBar(title: _buildTitle(), actions: [
-      Tooltip(
-          message: "Display Settings",
-          child: TextButton(
-            key: const Key('display_settings_button'),
-            child: const Text("Display Settings"),
-            onPressed: () => _navigateToDisplaySettings(context),
-          )),
-    ]);
-  }
-
-  Widget _buildTitle() {
-    return Row(key: const Key("page_title"), children: [
-      Text(_title),
-      const SizedBox(width: 8.0),
-      PagePersistenceStateIndicatorWidget(persistenceState: _persistenceState)
-    ]);
+    return AppBar(
+        title: PageTitleWidget(
+            editing: _editing,
+            persistenceState: _persistenceState,
+            title: _title,
+            onTitleUpdate: _handleTitleUpdate),
+        actions: [
+          Tooltip(
+              message: "Display Settings",
+              child: TextButton(
+                key: const Key('display_settings_button'),
+                child: const Text("Display Settings"),
+                onPressed: () => _navigateToDisplaySettings(context),
+              )),
+        ]);
   }
 
   Widget _buildBody(BuildContext context) {
@@ -73,7 +72,8 @@ class _ParameterPageScaffoldWidgetState
                 key: _pageKey,
                 service: widget.pageService,
                 pageId: _openPageId,
-                onPageModified: _handlePageModified)));
+                onPageModified: _handlePageModified,
+                onToggleEditing: _handleToggleEditing)));
   }
 
   Widget _buildDrawer(BuildContext context) {
@@ -105,6 +105,8 @@ class _ParameterPageScaffoldWidgetState
       _openPageId = null;
       _showLandingPage = false;
       _title = "New Parameter Page";
+      _titleIsDirty = false;
+      _pageIsDirty = false;
     });
   }
 
@@ -134,6 +136,22 @@ class _ParameterPageScaffoldWidgetState
                 )));
   }
 
+  void _handleToggleEditing(bool editing) {
+    setState(() {
+      _editing = editing;
+    });
+  }
+
+  void _handleTitleUpdate(String newTitle) {
+    if (newTitle != _title) {
+      setState(() {
+        _title = newTitle;
+        _titleIsDirty = true;
+        _updatePersistenceState();
+      });
+    }
+  }
+
   void _handleSavePage() async {
     _scaffoldKey.currentState?.closeDrawer();
 
@@ -146,6 +164,8 @@ class _ParameterPageScaffoldWidgetState
         onSuccess: () {
           setState(() {
             _persistenceState = PagePersistenceState.saved;
+            _pageIsDirty = false;
+            _titleIsDirty = false;
           });
         });
   }
@@ -158,6 +178,8 @@ class _ParameterPageScaffoldWidgetState
         _title = "New Parameter Page";
         _openPageId = null;
         _persistenceState = PagePersistenceState.clean;
+        _titleIsDirty = false;
+        _pageIsDirty = false;
       });
     });
   }
@@ -167,20 +189,36 @@ class _ParameterPageScaffoldWidgetState
       _title = pageTitle;
       _openPageId = pageId;
       _showLandingPage = false;
+      _pageIsDirty = false;
+      _titleIsDirty = false;
+      _persistenceState = PagePersistenceState.clean;
     });
   }
 
-  void _handlePageModified(PagePersistenceState newPersistenceState) {
+  void _handlePageModified(bool isDirty) {
     setState(() {
-      _persistenceState = newPersistenceState;
+      _pageIsDirty = isDirty;
+      _updatePersistenceState();
     });
   }
 
+  void _updatePersistenceState() {
+    if (_pageIsDirty || _titleIsDirty) {
+      _persistenceState = PagePersistenceState.unsaved;
+    }
+  }
+
   String _title = "Parameter Page";
 
+  bool _titleIsDirty = false;
+
   String? _openPageId;
 
   bool _showLandingPage = true;
 
+  bool _editing = false;
+
+  bool _pageIsDirty = false;
+
   PagePersistenceState _persistenceState = PagePersistenceState.clean;
 }

test/integration_tests/helpers/actions.dart

@@ -323,3 +323,11 @@ Future<void> createNewParameterPage(WidgetTester tester) async {
   await tester.tap(find.text("Create a New Parameter Page"));
   await tester.pumpAndSettle();
 }
+
+Future<void> changePageTitle(WidgetTester tester, {required String to}) async {
+  await tester.tap(find.byKey(const Key("page_title")));
+  await tester.pumpAndSettle();
+  await tester.enterText(find.byKey(const Key("page_title_textfield")), to);
+  await tester.testTextInput.receiveAction(TextInputAction.done);
+  await tester.pumpAndSettle();
+}

test/integration_tests/save_parameter_page_test.dart

@@ -115,5 +115,24 @@ void main() {
       // Then the new page has persisted
       assertIsOnPage(comment: "this is a new page");
     }, semanticsEnabled: false);
+
+    testWidgets(
+        'Change page title, page persistence indicator changes to unsaved',
+        (WidgetTester tester) async {
+      // Given I've loaded Test Page 1 and I have entered edit mode
+      await startParameterPageApp(tester);
+      await navigateToTestPage1(tester);
+      await enterEditMode(tester);
+
+      // When I change the page title and exit edit mode
+      await changePageTitle(tester, to: "My New Page");
+      await exitEditMode(tester);
+
+      // Then the "Un-saved Changes" indicator is displayed
+      assertUnsavedChangesIndicator(isVisible: true);
+
+      // ... and the new title is shown
+      assertPageTitleIs("My New Page");
+    });
   });
 }