[PATCH yew-widget-toolkit 2/3] widget: navigation drawer: allow persisting the expanded state

[Dominik Csapak <d.csapak@proxmox.com>]

By exposing a `stateful_id` property that is used to save the
`MenuStates` state in the browser local storage.

This is loaded on component creation and when either the menu or the
stateful id changes.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/nav/navigation_drawer.rs | 60 +++++++++++++++++++++++------
 1 file changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/widget/nav/navigation_drawer.rs b/src/widget/nav/navigation_drawer.rs
index b2bcd1e..114e463 100644
--- a/src/widget/nav/navigation_drawer.rs
+++ b/src/widget/nav/navigation_drawer.rs
@@ -10,9 +10,9 @@ use pwt_macros::builder;
 use crate::css::{OverflowX, OverflowY};
 use crate::props::{
     AsClassesMut, AsCssStylesMut, ContainerBuilder, CssBorderBuilder, CssPaddingBuilder, CssStyles,
-    EventSubscriber, IntoOptionalKey, IntoVTag, WidgetBuilder, WidgetStyleBuilder,
+    EventSubscriber, IntoOptionalKey, IntoVTag, StorageLocation, WidgetBuilder, WidgetStyleBuilder,
 };
-use crate::state::{NavigationContext, NavigationContextExt, Selection};
+use crate::state::{NavigationContext, NavigationContextExt, PersistentState, Selection};
 use crate::{impl_class_prop_builder, impl_yew_std_props_builder};
 
 use crate::dom::focus::roving_tabindex_next_recursive;
@@ -82,6 +82,14 @@ pub struct NavigationDrawer {
     #[builder]
     #[prop_or(true)]
     animated: bool,
+
+    /// If set, saves the open/collapsed state in the browser local storage
+    ///
+    /// The value is used as the storage key, so it has to be unique within the application. Only
+    /// the menu items that deviate from their default state are stored.
+    #[builder(IntoPropValue, into_prop_value)]
+    #[prop_or_default]
+    stateful_id: Option<AttrValue>,
 }
 
 impl AsClassesMut for NavigationDrawer {
@@ -153,18 +161,25 @@ impl NavigationDrawer {
 struct MenuStates {
     default_collapsed: HashSet<String>, // contains all keys that are collapsed by default
     changed: HashSet<String>,           // contains all keys that deviate from their default
+    id: Option<AttrValue>,              // local storage key, if the state should be persisted
 }
 
 impl MenuStates {
     /// Initializes the state from the menu config (default_collapsed).
-    fn new(menu: &Menu) -> Self {
+    ///
+    /// If an `id` is given, the state will be loaded from, and subsequently saved to, the browser
+    /// local storage with that identifier.
+    fn new(menu: &Menu, id: Option<AttrValue>) -> Self {
         let mut default_collapsed = HashSet::new();
         Self::collect_default_collapse_states(&mut default_collapsed, menu);
 
-        Self {
+        let mut this = Self {
             default_collapsed,
             changed: HashSet::new(),
-        }
+            id,
+        };
+        this.load_state();
+        this
     }
 
     // iterates over a menu and saves all submenus that are collapsed by default
@@ -199,10 +214,33 @@ impl MenuStates {
         let key = key.to_string();
         let default_open = !self.default_collapsed.contains(&key);
         // only record the keys that deviate from their default, so the set stays minimal
-        if open == default_open {
-            self.changed.remove(&key);
+        let modified = if open == default_open {
+            self.changed.remove(&key)
         } else {
-            self.changed.insert(key);
+            self.changed.insert(key)
+        };
+        // do not rewrite the local storage if the state did not actually change
+        if modified {
+            self.save_state();
+        }
+    }
+
+    /// Loads the deviations from the default state from the local storage, if an `id` is set.
+    fn load_state(&mut self) {
+        if let Some(id) = self.id.clone() {
+            let state = PersistentState::<Option<HashSet<String>>>::new(StorageLocation::Local(id));
+            if let Some(state) = state.into_inner() {
+                self.changed = state;
+            }
+        }
+    }
+
+    /// Saves the deviations from the default state to the local storage, if an `id` is set.
+    fn save_state(&self) {
+        if let Some(id) = self.id.clone() {
+            let mut state =
+                PersistentState::<Option<HashSet<String>>>::new(StorageLocation::Local(id));
+            state.update(Some(self.changed.clone()));
         }
     }
 }
@@ -544,7 +582,7 @@ impl Component for PwtNavigationDrawer {
             node_ref: NodeRef::default(),
             active: active.clone(),
             selection,
-            menu_states: MenuStates::new(&props.menu),
+            menu_states: MenuStates::new(&props.menu, props.stateful_id.clone()),
             _nav_ctx_handle,
         };
 
@@ -663,8 +701,8 @@ impl Component for PwtNavigationDrawer {
         if props.selection != old_props.selection {
             self.selection = Self::init_selection(ctx, props.selection.clone(), &self.active);
         }
-        if props.menu != old_props.menu {
-            self.menu_states = MenuStates::new(&props.menu);
+        if props.menu != old_props.menu || props.stateful_id != old_props.stateful_id {
+            self.menu_states = MenuStates::new(&props.menu, props.stateful_id.clone());
         }
         true
     }
-- 
2.47.3