From a110e564395ebe77be1216a64175a18603b8a7cb Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Mon, 27 Apr 2020 05:43:30 +0200
Subject: [PATCH] Save/restore collapse states when refreshing diagnosis view

---
 src/js/yunohost/controllers/diagnosis.js | 41 +++++++++++++++++++++---
 src/js/yunohost/helpers.js               |  6 ++--
 src/views/diagnosis/diagnosis_show.ms    |  6 ++--
 3 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/js/yunohost/controllers/diagnosis.js b/src/js/yunohost/controllers/diagnosis.js
index 7d8e996b..0f491e89 100644
--- a/src/js/yunohost/controllers/diagnosis.js
+++ b/src/js/yunohost/controllers/diagnosis.js
@@ -13,8 +13,8 @@
         });
     });
 
+    function updateDiagnosisView(state) {
 
-    function updateDiagnosisView() {
         c.api('GET', '/diagnosis/show?full', {}, function(data) {
 
             if (typeof(data.reports) === "undefined")
@@ -75,6 +75,8 @@
             // Render and display the view
             c.view('diagnosis/diagnosis_show', data, function() {
 
+                restoreDiagnosisViewState(state);
+
                 // Button for first diagnosis
                 $("button[data-action='run-full-diagnosis']").click(function() {
                     c.api('POST', '/diagnosis/run', {}, function(data) {
@@ -94,7 +96,7 @@
                 $("button[data-action='rerun-diagnosis']").click(function() {
                     var category = $(this).data("category");
                     c.api('POST', '/diagnosis/run?force', {"categories": [category]}, function(data) {
-                        updateDiagnosisView();
+                        updateDiagnosisView(saveDiagnosisViewState());
                     });
                 });
 
@@ -102,19 +104,50 @@
                 $("button[data-action='ignore']").click(function() {
                     var filter_args = $(this).data("filter-args");
                     c.api('POST', '/diagnosis/ignore', {'add_filter': filter_args.split(',') }, function(data) {
-                        updateDiagnosisView();
+                        updateDiagnosisView(saveDiagnosisViewState());
                     })
                 });
 
                 $("button[data-action='unignore']").click(function() {
                     var filter_args = $(this).data("filter-args");
                     c.api('POST', '/diagnosis/ignore', {'remove_filter': filter_args.split(',') }, function(data) {
-                        updateDiagnosisView();
+                        updateDiagnosisView(saveDiagnosisViewState());
                     })
                 });
             });
         });
     }
 
+    // Save current level of scroll + which panels are collapsed / not collapsed
+    function saveDiagnosisViewState() {
+        var collapse = {};
+        $(".panel-diagnosis").each(function(i, el) {
+            console.log($(el));
+            console.log($(el).data("category"));
+            collapse[$(el).data("category")] = $($(".panel-body", el)[0]).hasClass("in");
+        });
+        return { "scroll": document.documentElement.scrollTop, "collapse": collapse };
+    }
+
+    // Restore scroll + panel collapse state
+    function restoreDiagnosisViewState(state) {
+        if (typeof state === "undefined") { return; }
+
+        Object.keys(state.collapse).forEach(function(category)  {
+            console.log(category);
+            console.log(state.collapse[category]);
+            if (state.collapse[category]) {
+                $(".panel-diagnosis[data-category='"+category+"'] .panel-body").addClass("in");
+            }
+            else
+            {
+                $(".panel-diagnosis[data-category='"+category+"'] .panel-body").removeClass("in");
+            }
+        });
+
+        window.scroll(0,state.scroll);
+    }
+
+
 
 })();
diff --git a/src/js/yunohost/helpers.js b/src/js/yunohost/helpers.js
index d7c3dfc1..ba1d4ff1 100644
--- a/src/js/yunohost/helpers.js
+++ b/src/js/yunohost/helpers.js
@@ -336,11 +336,11 @@
                         }
                     });
 
-                    // Run callback
-                    callback();
-
                     // Force scrollTop on page load
                     $('html, body').scrollTop(0);
+
+                    // Run callback
+                    callback();
                 });
             };
 
diff --git a/src/views/diagnosis/diagnosis_show.ms b/src/views/diagnosis/diagnosis_show.ms
index ae043f8d..98ab7080 100644
--- a/src/views/diagnosis/diagnosis_show.ms
+++ b/src/views/diagnosis/diagnosis_show.ms
@@ -22,10 +22,10 @@
 <div class="alert alert-warning text-center">{{t 'diagnosis_experimental_disclaimer'}}</div>
 
 {{#reports}}
-<div class="panel panel-default">
+<div class="panel panel-default panel-diagnosis" data-category="{{id}}">
     <div class="panel-heading">
         <h2 class="panel-title" style="display: inline-block; margin-right: 10px;">
-        <a data-toggle="collapse" href="#category-{{id}}">{{ description }}</a>
+        <a data-toggle="collapse" href="#diagnosis-body-{{id}}">{{ description }}</a>
         </h2>
         {{#if noIssues}}{{#if items}}<span class="label label-success">{{t 'everything_good'}}</span>{{/if}}{{/if}}
         {{#if errors}}<span class="label label-danger">{{t 'issues' errors }}</span>{{/if}}
@@ -33,7 +33,7 @@
         {{#if ignored}}<span class="label label-default">{{t 'ignored' ignored }}</span>{{/if}}
         <button class="btn btn-sm {{#if items}}btn-info{{else}}btn-success{{/if}} pull-right" data-action="rerun-diagnosis" data-category="{{ id }}"><span class="fa-fw fa-refresh"></span> {{t 'rerun_diagnosis'}}</button>
     </div>
-    <div class="panel-body collapse {{#if errors}}in{{/if}}" id="category-{{id}}">
+    <div class="panel-body collapse {{#if errors}}in{{/if}}" id="diagnosis-body-{{id}}">
     <ul class="list-group" style="margin-bottom: 0px">
         <p>{{t 'last_ran' }} {{formatRelative time day="numeric" month="long" year="numeric" hour="numeric" minute="numeric" }}</p>
         {{#items}}