Factor StandardForm role out of OptionalUI screen

Raku-MUGS · Feb 26, 2024 · d7c0f16 · d7c0f16
1 parent 24eef61
commit d7c0f16
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 33 deletions.
diff --git a/lib/MUGS/App/TUI/OptionalUI.rakumod b/lib/MUGS/App/TUI/OptionalUI.rakumod
@@ -7,25 +7,21 @@ use MUGS::UI::TUI::Layout::StandardScreen;
 
 
 #| Optional UI elements form
-class OptionalUI does MUGS::UI::TUI::Layout::StandardScreen {
+class OptionalUI does MUGS::UI::TUI::Layout::StandardForm {
     has Str:D  $.grid-name   = 'optional-ui';
     has        $.breadcrumb  = 'optional-ui' ¢¿ 'Optional Elements';
     has        $.title       = 'optional-ui' ¢¿ 'Optional UI Elements | MUGS';
     has Form:D $.form       .= new;
 
     has @.hints; # XXXX: Just to satisfy role requirements for now
 
-    method content-layout($builder, $max-width, $max-height) {
+    method form-layout($builder, $max-width, $max-height) {
         ¢'optional-ui';
 
-        # Subsection and button pad styling
+        # Subsection styling
         my %subsection = :minimize-h, margin-width => (0, 0, 1, 0);
-        my %right-pad  = padding-width => (0, 1, 0, 0),;
 
         with $builder {
-            # Center vertically
-            .node(),
-
             # XXXX: Set up field hints
             # XXXX: Translate plain text fields
             # XXXX: Make into proper (semantic) subsections
@@ -65,30 +61,12 @@ class OptionalUI does MUGS::UI::TUI::Layout::StandardScreen {
                                 id    =>  'no-menu-headers',
                                 label => ¿'None'),
                  ),
-
-            # XXXX: Split out into help/save/cancel helper routine
-            .divider(line-style => 'light1', style => %( set-h => 1, ), ),
-            .node(style => %( :minimize-h, ),
-                  .button(:$.form, id => 'help', style => %right-pad,
-                          label => ¿'HELP!',
-                          process-input => { self.goto-help }),
-                  .button(:$.form, id => 'save', style => %right-pad,
-                          label => ¿'Save Changes',
-                          process-input => { self.save-changes }),
-                  .button(:$.form, id => 'cancel',
-                          label => ¿'Cancel and Go Back',
-                          process-input => { self.goto-prev-screen }),
-                  .node(),
-                 ),
-            .node(),
         }
     }
 
     method save-changes() {
         # XXXX: Actually save changes!  :-)
         # XXXX: Save for MUGS-UI-TUI, MUGS-Core, or Terminal-Widgets?
-
-        self.goto-prev-screen;
     }
 
     method focus-on-content(Bool:D :$redraw = False) {

diff --git a/lib/MUGS/App/TUI/Translations/Test.rakumod b/lib/MUGS/App/TUI/Translations/Test.rakumod
@@ -7,6 +7,8 @@ unit module MUGS::App::TUI::Translations::Test;
 #| context descriptions to assist translators
 sub translation-contexts() is export {
     constant @contexts =
+        { moniker => 'standard-form',
+          desc    => 'Standard form buttons and button hints' },
         { moniker => 'main-menu',
           desc    => 'Main Menu entries, hints, titles, and breadcrumbs' },
         { moniker => 'settings-menu',
@@ -29,6 +31,22 @@ sub translation-contexts() is export {
 #  Easy to notice, and tests widening every screen element
 sub trans-pig() {
     constant %trans =
+        standard-form => {
+            # Buttons
+            'HELP!'                       => 'ELPHAY!',
+            'Save Changes'                => 'Avesay Angeschay',
+            'Cancel and Go Back'          => 'Ancelcay andway Ogay Ackbay',
+
+            # Form element hints
+            'View help info related to this form'
+            => 'Iewvay elphay infoway elatedray otay isthay ormfay',
+
+            'Save changes from this form'
+            => 'Avesay angeschay omfray isthay ormfay',
+
+            'Discard changes from this form and go back to previous screen'
+            => 'Iscarday angeschay omfray isthay ormfay andway ogay ackbay otay eviouspray eenscray',
+        },
         main-menu => {
             # Breadcrumbs / title
             'Main'                     => 'Ainmay',
@@ -194,16 +212,8 @@ sub trans-pig() {
             'Small'                       => 'Allsmay',
             'None'                        => 'Onenay',
 
-            # Buttons
-            'HELP!'                       => 'ELPHAY!',
-            'Save Changes'                => 'Avesay Angeschay',
-            'Cancel and Go Back'          => 'Ancelcay andway Ogay Ackbay',
-
             # Form element hints
             # XXXX: FILL IN
-
-            'View help info related to optional UI elements'
-            => 'Iewvay elphay infoway elatedray otay optionalway UIWAY elementsway',
         },
     ;
 }

diff --git a/lib/MUGS/UI/TUI/Layout/StandardScreen.rakumod b/lib/MUGS/UI/TUI/Layout/StandardScreen.rakumod
@@ -215,3 +215,52 @@ does MUGS::UI::TUI::Layout::HintFooter {
         @crumbs.map({ ~$locale.translate($_) }).join(' > ')
     }
 }
+
+
+#| A standard form with HELP!/Save/Cancel buttons
+role MUGS::UI::TUI::Layout::StandardForm
+does MUGS::UI::TUI::Layout::StandardScreen {
+
+    ### Required methods
+
+    #| Save changes from the current form
+    method save-changes() { ... }
+
+    #| Current form object
+    method form() { ... }
+
+
+    #| Define the overall layout of a standard form
+    method content-layout($builder, $max-width, $max-height) {
+        ¢'standard-form';
+
+        my %right-pad  = padding-width => (0, 1, 0, 0),;
+
+        with $builder {
+            # Center vertically
+            .node(),
+
+            # Main form
+            |self.form-layout($builder, $max-width, $max-height),
+
+            # HELP!/Save/Cancel buttons
+            .divider(line-style => 'light1', style => %( set-h => 1, ), ),
+            .node(style => %( :minimize-h, ),
+                  .button(:$.form, id => 'help', style => %right-pad,
+                          label => ¿'HELP!',
+                          process-input => { self.goto-help }),
+                  .button(:$.form, id => 'save', style => %right-pad,
+                          label => ¿'Save Changes',
+                          # XXXX: Confirmation of successful save?
+                          process-input => { self.save-changes;
+                                             self.goto-prev-screen }),
+                  .button(:$.form, id => 'cancel',
+                          label => ¿'Cancel and Go Back',
+                          process-input => { self.goto-prev-screen }),
+                  .node(),
+                 ),
+
+            .node(),
+        }
+    }
+}