LIMS-2031: Add toggle to expand data collection groups

client/src/css/partials/_utility.scss

@@ -270,3 +270,44 @@ ul.ui-autocomplete {
         }
     }
 }
+
+.aic {
+    align-items: center;
+}
+
+.gap2 {
+    gap: 2px;
+}
+
+.toggle-input {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 40px;
+    height: 22px;
+    background: #ccc;
+    border-radius: 20px;
+    position: relative;
+    cursor: pointer;
+    transition: background 0.3s;
+    outline: none;
+}
+
+.toggle-input::before {
+    content: "";
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    top: 1px;
+    left: 1px;
+    background: white;
+    transition: transform 0.3s;
+}
+
+.toggle-input:checked {
+    background: #4CAF50;
+}
+
+.toggle-input:checked::before {
+    transform: translateX(18px);
+}

client/src/js/collections/datacollections.js

@@ -1,8 +1,15 @@
-define(['underscore', 'backbone', 'backbone.paginator', 'models/datacollection'], function(_, Backbone, PageableCollection, dc) {
+define(['underscore', 'backbone', 'backbone.paginator', 'utils', 'models/datacollection'],
+function(_, Backbone, PageableCollection, utils, dc) {
   return PageableCollection.extend({
     model: dc,
     mode: 'server',
     url: '/dc',
+
+    queryParams: {
+        expandgroups: function () {
+            return utils.getLocalStorage('expandgroups') === '1' ? 1 : null
+        }
+    },
 
     state: {
       pageSize: 15,
@@ -67,4 +74,4 @@ define(['underscore', 'backbone', 'backbone.paginator', 'models/datacollection']
 
   })
 
-})
+})

client/src/js/modules/dc/datacollections.js

@@ -1,5 +1,6 @@
 define(['marionette',
         'views/pages',
+        'utils',
 
         'modules/dc/dclist',
         'modules/dc/views/samplechanger',
@@ -16,7 +17,7 @@ define(['marionette',
 
         'templates/dc/dclist.html',
         ],
-function(Marionette, Pages, DCListView,
+function(Marionette, Pages, utils, DCListView,
          SampleChanger, StatusView, Search, Filter, DialogView, QueueBuilderView, UserView, DewarsView,
          ReprocessOverview,
          template) {
@@ -42,6 +43,7 @@ function(Marionette, Pages, DCListView,
 
     ui: {
         ar: 'input[name=autorefresh]',
+        expand: 'input[name=expand]',
     },
 
     events: {
@@ -52,6 +54,7 @@ function(Marionette, Pages, DCListView,
       'mouseout a.dewars': 'hideDewars',
       'click a.refresh': 'refreshDCs',
       'click @ui.ar': 'setAutoRefresh',
+      'click @ui.expand': 'setExpandGroups',
       'click a.rpo': 'showReprocess',
     },
 
@@ -60,6 +63,15 @@ function(Marionette, Pages, DCListView,
         else this.collection.stop()
     },
 
+    setExpandGroups: function(e) {
+        if (this.ui.expand.is(':checked')) {
+            utils.setLocalStorage('expandgroups', '1')
+        } else {
+            utils.setLocalStorage('expandgroups', '0')
+        }
+        this.collection.fetch({ reset: true })
+    },
+
     refreshDCs: function(e) {
         e.preventDefault()
         this.collection.fetch()
@@ -141,6 +153,8 @@ function(Marionette, Pages, DCListView,
     },
 
     onRender: function() {    
+        const expandgroups = utils.getLocalStorage('expandgroups') === '1'
+        this.ui.expand.prop('checked', expandgroups)
         this.data_collections.show(this.dclist)
         this.pages.show(this.paginator)
         this.pages2.show(this.paginator2)

client/src/js/templates/dc/dclist.html

@@ -49,6 +49,9 @@ <h1 class="message nou"><a class="button" href="/dc<% if (IS_VISIT) { %>/visit/<
 
     <div class="srch"></div>
     <div class="filter type"></div>
+    <% if (!IS_DCG && !IS_PJ && !IS_SINGLE) { %>
+    <label class="r flex aic gap2">Expand groups <input type="checkbox" name="expand" class="toggle-input"></label>
+    <% } %>
 
     <div class="page_wrap one"></div>    
     <div class="data_collections" data-testid="dc-data-collections"></div>

client/src/js/utils.js

@@ -221,6 +221,14 @@ define(['backbone',
         return array
     },
 
+    setLocalStorage: function(key, value) {
+        localStorage.setItem(key, value);
+    },
+
+    getLocalStorage: function(key) {
+        const value = localStorage.getItem(key);
+        return value ? value : "";
+    },
 
     jsonError: function(model, xhr, status) {
         var json = {}

client/src/js/views/cloudupload.js

@@ -1,10 +1,12 @@
 define([
     'backbone',
     'views/dialog',
+    'utils',
     'templates/dc/cloudupload.html'
 ], function(
     Backbone,
     DialogView,
+    utils,
     template
 ) {
 
@@ -23,32 +25,10 @@ define([
             remember: 'input[name=remember]',
         },
 
-        setCookie: function(cname, cvalue, exdays) {
-            const d = new Date();
-            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
-            let expires = "expires="+d.toUTCString();
-            document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
-        },
-
-        getCookie: function(cname) {
-            let name = cname + "=";
-            let ca = document.cookie.split(';');
-            for (let i = 0; i < ca.length; i++) {
-                let c = ca[i];
-                while (c.charAt(0) == ' ') {
-                    c = c.substring(1);
-                }
-                if (c.indexOf(name) == 0) {
-                    return c.substring(name.length, c.length);
-                }
-            }
-            return "";
-        },
-
         upload: function() {
             if (this.ui.remember.is(':checked')) {
-                this.setCookie('ccp4_username', this.ui.username.val(), 365)
-                this.setCookie('ccp4_cloudrunid', this.ui.cloudrunid.val(), 365)
+                utils.setLocalStorage('ccp4_username', this.ui.username.val())
+                utils.setLocalStorage('ccp4_cloudrunid', this.ui.cloudrunid.val())
             }
             let data = { cloudrunid: this.ui.cloudrunid.val(), username: this.ui.username.val() }
             if (this.model.get('AUTOPROCPROGRAMATTACHMENTID')) {
@@ -78,8 +58,8 @@ define([
         },
 
         onRender: function() {
-            let ccp4_username = this.getCookie('ccp4_username')
-            let ccp4_cloudrunid = this.getCookie('ccp4_cloudrunid')
+            let ccp4_username = utils.getLocalStorage('ccp4_username')
+            let ccp4_cloudrunid = utils.getLocalStorage('ccp4_cloudrunid')
             if (ccp4_username) this.ui.username.val(ccp4_username)
             if (ccp4_cloudrunid) this.ui.cloudrunid.val(ccp4_cloudrunid)    
             if (ccp4_username || ccp4_cloudrunid) this.ui.remember.prop('checked', true)