From 233d68952a928f9395a4d02ac907df6a8ea84ca4 Mon Sep 17 00:00:00 2001
From: Alezia Kurdis <60075796+AleziaKurdis@users.noreply.github.com>
Date: Mon, 9 Nov 2020 00:35:13 -0500
Subject: [PATCH] Add the persistence of the columns setup

Add the persistence of the columns' visibility and ordering.
---
 .../create/entityList/html/js/entityList.js   | 62 +++++++++++++++++--
 1 file changed, 57 insertions(+), 5 deletions(-)

diff --git a/scripts/system/create/entityList/html/js/entityList.js b/scripts/system/create/entityList/html/js/entityList.js
index be79593511..3ff8328132 100644
--- a/scripts/system/create/entityList/html/js/entityList.js
+++ b/scripts/system/create/entityList/html/js/entityList.js
@@ -20,7 +20,7 @@ const EMPTY_ENTITY_ID = "0";
 const MAX_LENGTH_RADIUS = 9;
 const MINIMUM_COLUMN_WIDTH = 24;
 const SCROLLBAR_WIDTH = 20;
-const RESIZER_WIDTH = 10;
+const RESIZER_WIDTH = 13; //Must be the number of COLUMNS - 1.
 const DELTA_X_MOVE_COLUMNS_THRESHOLD = 2;
 const DELTA_X_COLUMN_SWAP_POSITION = 5;
 const CERTIFIED_PLACEHOLDER = "** Certified **";
@@ -283,6 +283,9 @@ const PROFILE = !ENABLE_PROFILING ? PROFILE_NOOP : function(name, fn, args) {
 
 function loaded() {    
     openEventBridge(function() {
+
+        var isColumnsSettingLoaded = false;
+        
         elEntityTable = document.getElementById("entity-table");
         elEntityTableHeader = document.getElementById("entity-table-header");
         elEntityTableBody = document.getElementById("entity-table-body");
@@ -331,7 +334,7 @@ function loaded() {
         elColumnsMultiselectBox = document.getElementById("entity-table-columns-multiselect-box");
         elColumnsOptions = document.getElementById("entity-table-columns-options");
         elToggleSpaceMode = document.getElementById('toggle-space-mode');
-        
+
         document.body.onclick = onBodyClick;
         elToggleLocked.onclick = function() {
             EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' }));
@@ -618,9 +621,9 @@ function loaded() {
             
             ++columnIndex;
         }
-        
+
         elEntityTableHeaderRow = document.querySelectorAll("#entity-table thead th");
-        
+
         entityList = new ListView(elEntityTableBody, elEntityTableScroll, elEntityTableHeaderRow, createRow, updateRow,
                                   clearRow, preRefresh, postRefresh, preRefresh, WINDOW_NONVARIABLE_HEIGHT);
 
@@ -1409,6 +1412,10 @@ function loaded() {
                 column.elResizer.style.visibility = columnVisible && visibleColumns > 0 ? "visible" : "hidden";
             }
             
+            if (isColumnsSettingLoaded) {
+                EventBridge.emitWebEvent(JSON.stringify({ type: 'saveColumnsConfigSetting', columnsData: columns }));
+            }
+            
             entityList.refresh();
         }
         
@@ -1660,14 +1667,59 @@ function loaded() {
                     } else {
                         document.getElementById("hmdmultiselect").style.display = "none";                      
                     }
+                } else if (data.type === "loadedColumnsSetup") {
+                    if (data.columnsData !== "NO_DATA" && typeof(data.columnsData) === "object") {
+                        var isValid = true;
+                        var originalColumnIDs = [];
+                        for (let originalColumnID in COLUMNS) {
+                            originalColumnIDs.push(originalColumnID);
+                        }                        
+                        for (let columnSetupIndex in data.columnsData) {
+                            var checkPresence = originalColumnIDs.indexOf(data.columnsData[columnSetupIndex].columnID);
+                            if (checkPresence === -1) {
+                                isValid = false;
+                                break;
+                            }
+                        }
+                        if (isValid) {
+                            for (var columnIndex = 0; columnIndex < data.columnsData.length; columnIndex++) {
+                                if (data.columnsData[columnIndex].data.alwaysShown !== true) {
+                                    var columnDropdownID = "entity-table-column-" + data.columnsData[columnIndex].columnID;
+                                    if (data.columnsData[columnIndex].width !== 0) {
+                                        document.getElementById(columnDropdownID).checked = false;
+                                        document.getElementById(columnDropdownID).click();
+                                    } else {
+                                        document.getElementById(columnDropdownID).checked = true;
+                                        document.getElementById(columnDropdownID).click();
+                                    }
+                                }
+                            }
+                            for (columnIndex = 0; columnIndex < data.columnsData.length; columnIndex++) {
+                                let currentColumnIndex = originalColumnIDs.indexOf(data.columnsData[columnIndex].columnID);
+                                if (currentColumnIndex !== -1 && columnIndex !== currentColumnIndex) {
+                                    for (var i = currentColumnIndex; i > columnIndex; i--) {
+                                        swapColumns(i-1, i);
+                                        var swappedContent = originalColumnIDs[i-1];  
+                                        originalColumnIDs[i-1] = originalColumnIDs[i];  
+                                        originalColumnIDs[i] = swappedContent;                                        
+                                    }
+                                }
+                            }
+                        } else {
+                            EventBridge.emitWebEvent(JSON.stringify({ type: 'saveColumnsConfigSetting', columnsData: "" }));
+                        }
+                    }
+                    isColumnsSettingLoaded = true;
                 }
             });
         }
-        
+
         refreshSortOrder();
         refreshEntities();
         
         window.addEventListener("resize", updateColumnWidths);
+        
+        EventBridge.emitWebEvent(JSON.stringify({ type: 'loadColumnsConfigSetting' }));
     });
     
     augmentSpinButtons();