N°3617 collapsible components state saving : use user pref instead of localStorage

No migration from existing localStorage keys (introduced in 2.5.0 with N°1030) as the console UI has dramatically change in 3.0.0 : will be useful to show all the collapsible sections content once again !

Note that an iTop instance identifier was used in the localStorage key, it is no longer needed as we're getting the user pref directly from the current instance.

Thanks @Molkobain for the help !

js/components/alert.js

@@ -43,10 +43,10 @@ $(function()
 			_create: function () {
 				this._bindEvents();
 
-				let bStoredSectionState = JSON.parse(localStorage.getItem(this.options.collapsibleStateStorageKey));
+				let bIsSectionOpenedInitially = GetUserPreferenceAsBoolean(
-				let bIsSectionOpenedInitially = (bStoredSectionState == null)
+					this.options.collapsibleStateStorageKey,
-					? this.options.bOpenedByDefault
+					this.options.bOpenedByDefault
-					: bStoredSectionState;
+				);
 				if (bIsSectionOpenedInitially) {
 					this.element.addClass(this.css_classes.opened);
 				} else {
@@ -75,9 +75,10 @@ $(function()
 				this.element.toggleClass(this.css_classes.opened);
 
 				if (this.options.collapsibleStateStorageKey) {
-					localStorage.setItem(
+					SetUserPreference(
 						this.options.collapsibleStateStorageKey,
-						this.element.hasClass(this.css_classes.opened)
+						this.element.hasClass(this.css_classes.opened),
+						true
 					);
 				}
 			}

js/components/collapsible-section.js

@@ -41,9 +41,10 @@ $(function () {
 			_create: function () {
 				this._bindEvents();
 
-				let bStoredSectionState = JSON.parse(localStorage.getItem(this.options.collapsibleStateStorageKey));
+				let bIsSectionOpenedInitially = GetUserPreferenceAsBoolean(
-				let bIsSectionOpenedInitially = (bStoredSectionState == null) ? this.options.bOpenedByDefault : bStoredSectionState;
+					this.options.collapsibleStateStorageKey,
-
+					this.options.bOpenedByDefault
+				);
 				if (bIsSectionOpenedInitially) {
 					this.element.addClass(this.css_classes.opened);
 				} else {
@@ -65,9 +66,10 @@ $(function () {
 				this.element.toggleClass(this.css_classes.opened);
 
 				if (this.options.collapsibleStateStorageKey) {
-					localStorage.setItem(
+					SetUserPreference(
 						this.options.collapsibleStateStorageKey,
-						this.element.hasClass(this.css_classes.opened)
+						this.element.hasClass(this.css_classes.opened),
+						true
 					);
 				}
 			}

js/utils.js

@@ -346,17 +346,41 @@ function SetUserPreference(sPreferenceCode, sPrefValue, bPersistent) {
 
 /**
  * Get user specific preferences
- * depends on a global variable oUserPreferences created/filled by the iTopWebPage
  * that acts as a local -write through- cache
+ * @borrows global variable oUserPreferences created/filled by the iTopWebPage if login method was called
  */
 function GetUserPreference(sPreferenceCode, sDefaultValue) {
 	var value = sDefaultValue;
-	if ((typeof(oUserPreferences) !== 'undefined') && (typeof(oUserPreferences[sPreferenceCode]) !== 'undefined')) {
+	if ((typeof (oUserPreferences) !== 'undefined') && (typeof (oUserPreferences[sPreferenceCode]) !== 'undefined')) {
 		value = oUserPreferences[sPreferenceCode];
 	}
 	return value;
 }
 
+/**
+ * @param {string} sPreferenceCode
+ * @param {boolean} bDefaultValue
+ * @returns {boolean}
+ * @since 3.0.0
+ */
+function GetUserPreferenceAsBoolean(sPreferenceCode, bDefaultValue) {
+	let sVal = GetUserPreference(sPreferenceCode, bDefaultValue);
+	try {
+		sVal = sVal.toLowerCase();
+	} catch (error) {
+		// nothing : this may be the boolean default value !
+	}
+
+	if (sVal === "true") {
+		return true;
+	}
+	if (sVal === "false") {
+		return false;
+	}
+
+	return bDefaultValue;
+}
+
 /**
  * Check/uncheck a whole list of checkboxes
  */

sources/application/UI/Base/Component/Alert/Alert.php

@@ -21,7 +21,6 @@ namespace Combodo\iTop\Application\UI\Base\Component\Alert;
 
 
 use Combodo\iTop\Application\UI\Base\UIBlock;
-use utils;
 
 /**
  * Class Alert
@@ -129,8 +128,7 @@ class Alert extends UIBlock
 	public function EnableSaveCollapsibleState($sSectionStateStorageKey)
 	{
 		$this->bIsSaveCollapsibleStateEnabled = true;
-		$sSectionStateStorageKeyPrefix = utils::GetConfig()->GetItopInstanceid();
+		$this->sSectionStateStorageKey = $sSectionStateStorageKey;
-		$this->sSectionStateStorageKey = $sSectionStateStorageKeyPrefix.'/'.$sSectionStateStorageKey;
 
 		return $this;
 	}

sources/application/UI/Base/Component/CollapsibleSection/CollapsibleSection.php

@@ -22,7 +22,6 @@ namespace Combodo\iTop\Application\UI\Base\Component\CollapsibleSection;
 
 use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
 use Combodo\iTop\Application\UI\Base\tUIContentAreas;
-use utils;
 
 /**
  * @package Combodo\iTop\Application\UI\Base\Component\CollapsibleSection
@@ -64,8 +63,7 @@ class CollapsibleSection extends UIContentBlock
 	public function EnableSaveCollapsibleState($sSectionStateStorageKey)
 	{
 		$this->bIsSaveCollapsibleStateEnabled = true;
-		$sSectionStateStorageKeyPrefix = utils::GetConfig()->GetItopInstanceid();
+		$this->sSectionStateStorageKey = $sSectionStateStorageKey;
-		$this->sSectionStateStorageKey = $sSectionStateStorageKeyPrefix.'/'.$sSectionStateStorageKey;
 
 		return $this;
 	}

sources/application/WebPage/iTopWebPage.php

@@ -461,28 +461,14 @@ JS
 		// TODO 3.0.0: To preserve
 		$this->add_ready_script(InlineImage::FixImagesWidth());
 
-		/*
+		// user pref for client side
-		 * Not used since the sorting of the tables is always performed server-side
+		// see GetUserPreference() in utils.js
-		AttributeDateTime::InitTableSorter($this, 'custom_date_time');
+		$sUserPrefs = appUserPreferences::GetAsJSON();
-		AttributeDate::InitTableSorter($this, 'custom_date');
+		$this->add_script("var oUserPreferences = $sUserPrefs;");
-		*/
 
 		// TODO 3.0.0: What is this for?
-		$sUserPrefs = appUserPreferences::GetAsJSON();
 		$this->add_script(
 			<<<JS
-//		// for JQuery history
-//		function history_callback(hash)
-//		{
-//			// do stuff that loads page content based on hash variable
-//			var aMatches = /^tab_(.*)$/.exec(hash);
-//			if (aMatches != null)
-//			{
-//				var tab = $('#'+hash);
-//				tab.parents('div[id^=tabbedContent]:first').tabs('select', aMatches[1]);
-//			}
-//		}
-
 		function goBack()
 		{
 			window.history.back();
@@ -518,10 +504,6 @@ JS
 				$('#rawOutput').dialog( {autoOpen: true, modal:false, width: '80%'});
 			}
 		}
-		
-		var oUserPreferences = $sUserPrefs;
-
-
 JS
 		);
 

test/VisualTest/Backoffice/RenderAllUiBlocks.php

@@ -29,11 +29,14 @@ use Combodo\iTop\Application\UI\Base\Component\Html\Html;
 use Combodo\iTop\Application\UI\Base\Component\Panel\PanelFactory;
 use Combodo\iTop\Application\UI\Base\Layout\PageContent\PageContentFactory;
 use iTopWebPage;
+use LoginWebPage;
 use utils;
 
 require_once '../../../approot.inc.php';
 require_once APPROOT.'application/startup.inc.php';
 
+LoginWebPage::DoLogin(); // Dependency for collapsible element with state saved, to get user pref
+
 $oPage = new iTopWebPage('Render all UI blocks');
 $oPageContentLayout = PageContentFactory::MakeStandardEmpty();
 $oPage->SetContentLayout($oPageContentLayout);