Add a common editor widget

res/musicus.gresource.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
     <gresource prefix="/de/johrpan/musicus">
+        <file preprocess="xml-stripblanks">ui/editor.ui</file>
         <file preprocess="xml-stripblanks">ui/ensemble_editor.ui</file>
         <file preprocess="xml-stripblanks">ui/instrument_editor.ui</file>
         <file preprocess="xml-stripblanks">ui/login_dialog.ui</file>

res/ui/editor.ui

@@ -0,0 +1,125 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkStack" id="widget">
+    <property name="transition-type">crossfade</property>
+    <child>
+      <object class="GtkStackPage">
+        <property name="name">content</property>
+        <property name="child">
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="AdwHeaderBar">
+                <property name="show-start-title-buttons">false</property>
+                <property name="show-end-title-buttons">false</property>
+                <property name="title-widget">
+                  <object class="AdwWindowTitle" id="window_title"/>
+                </property>
+                <child>
+                  <object class="GtkButton" id="back_button">
+                    <property name="label" translatable="yes">Cancel</property>
+                  </object>
+                </child>
+                <child type="end">
+                  <object class="GtkButton" id="save_button">
+                    <property name="label" translatable="yes">Save</property>
+                    <style>
+                      <class name="suggested-action"/>
+                    </style>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkScrolledWindow">
+                <property name="vexpand">true</property>
+                <child>
+                  <object class="AdwClamp">
+                    <child>
+                      <object class="GtkBox" id="content_box">
+                        <property name="orientation">vertical</property>
+                        <property name="margin-start">12</property>
+                        <property name="margin-end">12</property>
+                        <property name="margin-bottom">36</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkStackPage">
+        <property name="name">loading</property>
+        <property name="child">
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="AdwHeaderBar">
+                <property name="show-start-title-buttons">false</property>
+                <property name="show-end-title-buttons">false</property>
+                <property name="title-widget">
+                  <object class="AdwWindowTitle">
+                    <property name="title" translatable="true">Loading</property>
+                  </object>
+                </property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSpinner">
+                <property name="hexpand">true</property>
+                <property name="vexpand">true</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <property name="width-request">32</property>
+                <property name="height-request">32</property>
+                <property name="spinning">true</property>
+              </object>
+            </child>
+          </object>
+        </property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkStackPage">
+        <property name="name">error</property>
+        <property name="child">
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="AdwHeaderBar">
+                <property name="show-start-title-buttons">false</property>
+                <property name="show-end-title-buttons">false</property>
+                <property name="title-widget">
+                  <object class="AdwWindowTitle">
+                    <property name="title" translatable="yes">Error</property>
+                  </object>
+                </property>
+              </object>
+            </child>
+            <child>
+              <object class="AdwStatusPage" id="status_page">
+                <property name="icon-name">network-error-symbolic</property>
+                <property name="title">Error</property>
+                <child>
+                  <object class="GtkButton" id="try_again_button">
+                    <property name="label" translatable="yes">Try again</property>
+                    <property name="hexpand">true</property>
+                    <property name="vexpand">true</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </property>
+      </object>
+    </child>
+  </object>
+</interface>

src/editors/person.rs

@@ -1,7 +1,9 @@
 use crate::backend::Backend;
-use crate::database::*;
+use crate::database::generate_id;
-use crate::widgets::{Navigator, NavigatorScreen};
+use crate::database::Person;
+use crate::widgets::{Editor, EntryRow, Navigator, NavigatorScreen, Section, UploadSection};
 use anyhow::Result;
+use gettextrs::gettext;
 use glib::clone;
 use gtk::prelude::*;
 use gtk_macros::get_widget;
@@ -11,12 +13,14 @@ use std::rc::Rc;
 /// A dialog for creating or editing a person.
 pub struct PersonEditor {
     backend: Rc<Backend>,
+
+    /// The ID of the person that is edited or a newly generated one.
     id: String,
-    widget: gtk::Stack,
+
-    info_bar: gtk::InfoBar,
+    editor: Editor,
-    first_name_entry: gtk::Entry,
+    first_name: EntryRow,
-    last_name_entry: gtk::Entry,
+    last_name: EntryRow,
-    upload_switch: gtk::Switch,
+    upload: UploadSection,
     saved_cb: RefCell<Option<Box<dyn Fn(Person) -> ()>>>,
     navigator: RefCell<Option<Rc<Navigator>>>,
 }
@@ -24,22 +28,29 @@ pub struct PersonEditor {
 impl PersonEditor {
     /// Create a new person editor and optionally initialize it.
     pub fn new(backend: Rc<Backend>, person: Option<Person>) -> Rc<Self> {
-        // Create UI
+        let editor = Editor::new();
+        editor.set_title("Person");
 
-        let builder = gtk::Builder::from_resource("/de/johrpan/musicus/ui/person_editor.ui");
+        let list = gtk::ListBoxBuilder::new()
+            .selection_mode(gtk::SelectionMode::None)
+            .build();
 
-        get_widget!(builder, gtk::Stack, widget);
+        let first_name = EntryRow::new(&gettext("First name"));
-        get_widget!(builder, gtk::Button, back_button);
+        let last_name = EntryRow::new(&gettext("Last name"));
-        get_widget!(builder, gtk::Button, save_button);
+
-        get_widget!(builder, gtk::InfoBar, info_bar);
+        list.append(&first_name.widget);
-        get_widget!(builder, gtk::Entry, first_name_entry);
+        list.append(&last_name.widget);
-        get_widget!(builder, gtk::Entry, last_name_entry);
+
-        get_widget!(builder, gtk::Switch, upload_switch);
+        let section = Section::new(&gettext("General"), &list);
+        let upload = UploadSection::new();
+
+        editor.add_content(&section.widget);
+        editor.add_content(&upload.widget);
 
         let id = match person {
             Some(person) => {
-                first_name_entry.set_text(&person.first_name);
+                first_name.set_text(&person.first_name);
-                last_name_entry.set_text(&person.last_name);
+                last_name.set_text(&person.last_name);
 
                 person.id
             }
@@ -49,29 +60,28 @@ impl PersonEditor {
         let this = Rc::new(Self {
             backend,
             id,
-            widget,
+            editor,
-            info_bar,
+            first_name,
-            first_name_entry,
+            last_name,
-            last_name_entry,
+            upload,
-            upload_switch,
             saved_cb: RefCell::new(None),
             navigator: RefCell::new(None),
         });
 
         // Connect signals and callbacks
 
-        back_button.connect_clicked(clone!(@strong this => move |_| {
+        this.editor.set_back_cb(clone!(@strong this => move || {
             let navigator = this.navigator.borrow().clone();
             if let Some(navigator) = navigator {
                 navigator.pop();
             }
         }));
 
-        save_button.connect_clicked(clone!(@strong this => move |_| {
+        this.editor.set_save_cb(clone!(@strong this => move || {
             let context = glib::MainContext::default();
             let clone = this.clone();
             context.spawn_local(async move {
-                clone.widget.set_visible_child_name("loading");
+                clone.editor.loading();
                 match clone.clone().save().await {
                     Ok(_) => {
                         let navigator = clone.navigator.borrow().clone();
@@ -79,9 +89,9 @@ impl PersonEditor {
                             navigator.pop();
                         }
                     }
-                    Err(_) => {
+                    Err(err) => {
-                        clone.info_bar.set_revealed(true);
+                        let description = gettext!("Cause: {}", err);
-                        clone.widget.set_visible_child_name("content");
+                        clone.editor.error(&gettext("Failed to save person!"), &description);
                     }
                 }
 
@@ -98,8 +108,8 @@ impl PersonEditor {
 
     /// Save the person and possibly upload it to the server.
     async fn save(self: Rc<Self>) -> Result<()> {
-        let first_name = self.first_name_entry.get_text().unwrap().to_string();
+        let first_name = self.first_name.get_text();
-        let last_name = self.last_name_entry.get_text().unwrap().to_string();
+        let last_name = self.last_name.get_text();
 
         let person = Person {
             id: self.id.clone(),
@@ -107,8 +117,7 @@ impl PersonEditor {
             last_name,
         };
 
-        let upload = self.upload_switch.get_active();
+        if self.upload.get_active() {
-        if upload {
             self.backend.post_person(&person).await?;
         }
 
@@ -129,10 +138,11 @@ impl NavigatorScreen for PersonEditor {
     }
 
     fn get_widget(&self) -> gtk::Widget {
-        self.widget.clone().upcast()
+        self.editor.widget.clone().upcast()
     }
 
     fn detach_navigator(&self) {
         self.navigator.replace(None);
     }
 }
+

src/meson.build

@@ -90,6 +90,9 @@ sources = files(
   'selectors/recording.rs',
   'selectors/selector.rs',
   'selectors/work.rs',
+  'widgets/editor.rs',
+  'widgets/entry_row.rs',
+  'widgets/upload_section.rs',
   'widgets/indexed_list_model.rs',
   'widgets/list.rs',
   'widgets/mod.rs',

src/widgets/editor.rs

@@ -0,0 +1,85 @@
+use gio::prelude::*;
+use glib::clone;
+use gtk::prelude::*;
+use gtk_macros::get_widget;
+
+/// Common UI elements for an editor.
+pub struct Editor {
+    /// The actual GTK widget.
+    pub widget: gtk::Stack,
+
+    /// The button to switch to the previous screen.
+    back_button: gtk::Button,
+
+    /// The title widget within the header bar.
+    window_title: libadwaita::WindowTitle,
+
+    /// The button to save the edited item.
+    save_button: gtk::Button,
+
+    /// The box containing the content.
+    content_box: gtk::Box,
+
+    /// The status page for the error screen.
+    status_page: libadwaita::StatusPage,
+}
+
+impl Editor {
+    /// Create a new screen.
+    pub fn new() -> Self {
+        let builder = gtk::Builder::from_resource("/de/johrpan/musicus/ui/editor.ui");
+
+        get_widget!(builder, gtk::Stack, widget);
+        get_widget!(builder, gtk::Button, back_button);
+        get_widget!(builder, libadwaita::WindowTitle, window_title);
+        get_widget!(builder, gtk::Button, save_button);
+        get_widget!(builder, gtk::Box, content_box);
+        get_widget!(builder, libadwaita::StatusPage, status_page);
+        get_widget!(builder, gtk::Button, try_again_button);
+
+        try_again_button.connect_clicked(clone!(@strong widget => move |_| {
+            widget.set_visible_child_name("content");
+        }));
+
+        Self {
+            widget,
+            back_button,
+            window_title,
+            save_button,
+            content_box,
+            status_page,
+        }
+    }
+
+    /// Set a closure to be called when the back button is pressed.
+    pub fn set_back_cb<F: Fn() + 'static>(&self, cb: F) {
+        self.back_button.connect_clicked(move |_| cb());
+    }
+
+    /// Show a title in the header bar.
+    pub fn set_title(&self, title: &str) {
+        self.window_title.set_title(Some(title));
+    }
+
+    pub fn set_save_cb<F: Fn() + 'static>(&self, cb: F) {
+        self.save_button.connect_clicked(move |_| cb());
+    }
+
+    /// Show a loading page.
+    pub fn loading(&self) {
+        self.widget.set_visible_child_name("loading");
+    }
+
+    /// Show an error page. The page contains a button to get back to the
+    /// actual editor.
+    pub fn error(&self, title: &str, description: &str) {
+        self.status_page.set_title(Some(title));
+        self.status_page.set_description(Some(description));
+        self.widget.set_visible_child_name("error");
+    }
+
+    /// Add content to the bottom of the content area.
+    pub fn add_content<W: IsA<gtk::Widget>>(&self, content: &W) {
+        self.content_box.append(content);
+    }
+}

src/widgets/entry_row.rs

@@ -0,0 +1,44 @@
+use gtk::prelude::*;
+use libadwaita::prelude::*;
+
+/// A list box row with an entry.
+pub struct EntryRow {
+    /// The actual GTK widget.
+    pub widget: libadwaita::ActionRow,
+
+    /// The managed entry.
+    entry: gtk::Entry,
+}
+
+impl EntryRow {
+    /// Create a new entry row.
+    pub fn new(title: &str) -> Self {
+        let entry = gtk::EntryBuilder::new()
+            .hexpand(true)
+            .valign(gtk::Align::Center)
+            .build();
+
+        let widget = libadwaita::ActionRowBuilder::new()
+            .activatable(true)
+            .activatable_widget(&entry)
+            .title(title)
+            .build();
+
+        widget.add_suffix(&entry);
+
+        Self {
+            widget,
+            entry,
+        }
+    }
+
+    /// Set the text of the entry.
+    pub fn set_text(&self, text: &str) {
+        self.entry.set_text(text);
+    }
+
+    /// Get the text that was entered by the user.
+    pub fn get_text(&self) -> String {
+        self.entry.get_text().unwrap().to_string()
+    }
+}

src/widgets/mod.rs

@@ -1,3 +1,9 @@
+pub mod editor;
+pub use editor::*;
+
+pub mod entry_row;
+pub use entry_row::*;
+
 pub mod list;
 pub use list::*;
 
@@ -19,4 +25,7 @@ pub use screen::*;
 pub mod section;
 pub use section::*;
 
+pub mod upload_section;
+pub use upload_section::*;
+
 mod indexed_list_model;

src/widgets/upload_section.rs

@@ -0,0 +1,53 @@
+use super::Section;
+
+use gettextrs::gettext;
+use gtk::prelude::*;
+use libadwaita::prelude::*;
+
+/// A section showing a switch to enable uploading an item.
+pub struct UploadSection {
+    /// The GTK widget of the wrapped section.
+    pub widget: gtk::Box,
+
+    /// The section itself.
+    section: Section,
+
+    /// The upload switch.
+    switch: gtk::Switch,
+}
+
+impl UploadSection {
+    /// Create a new upload section which will be initially switched on.
+    pub fn new() -> Self {
+        let list = gtk::ListBoxBuilder::new()
+            .selection_mode(gtk::SelectionMode::None)
+            .build();
+
+        let switch = gtk::SwitchBuilder::new()
+            .active(true)
+            .valign(gtk::Align::Center)
+            .build();
+
+        let row = libadwaita::ActionRowBuilder::new()
+            .title("Upload changes to the server")
+            .activatable(true)
+            .activatable_widget(&switch)
+            .build();
+
+        row.add_suffix(&switch);
+        list.append(&row);
+
+        let section = Section::new(&gettext("Upload"), &list);
+
+        Self {
+            widget: section.widget.clone(),
+            section,
+            switch,
+        }
+    }
+
+    /// Return whether the user has enabled the upload switch.
+    pub fn get_active(&self) -> bool {
+        self.switch.get_active()
+    }
+}