From a7a8913e1eb9c221728cf408a148068155973bf8 Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Thu, 3 Oct 2024 11:59:08 +0200
Subject: [PATCH] Bug 33484: Implement Vue KohaTable

Move up as beforeMount was called too late to init DT's options

Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 koha-tmpl/intranet-tmpl/prog/js/datatables.js |  4 +-
 .../prog/js/vue/components/KohaTable.vue      | 77 +++++++++++++------
 2 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/js/datatables.js
index 3e3acda8781..a249fa41cac 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/datatables.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/datatables.js
@@ -951,10 +951,8 @@ function _dt_get_saved_state( localstorage_config, columns_settings ){
                 columns_settings[ index ].is_hidden = stateSave_column_visibility[ index ];
             }
         });
-        return columns_settings;
-    } else {
-        return columns_settings;
     }
+    return columns_settings;
 }
 
 (function($) {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue
index 5734a819349..5e6e9d6d9e7 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue
@@ -31,6 +31,61 @@ export default {
             included_ids,
             table_settings: this.table_settings,
         })
+
+        if (this.add_filters) {
+            this.options.orderCellsTop = true
+        }
+
+        if (this.table_settings) {
+            let columns_settings = this.table_settings["columns"]
+            let table_key = "DataTables_%s_%s_%s".format(
+                this.table_settings.module,
+                this.table_settings.page,
+                this.table_settings.table
+            )
+
+            let default_save_state = this.table_settings.default_save_state
+            let default_save_state_search =
+                this.table_settings.default_save_state_search
+
+            if (default_save_state) {
+                this.options.stateSave = true
+                this.options.stateSaveCallback = function (settings, data) {
+                    if (!default_save_state_search) {
+                        delete data.search
+                        data.columns.forEach(c => delete c.search)
+                    }
+                    localStorage.setItem(table_key, JSON.stringify(data))
+                }
+                this.options.stateLoadCallback = function (settings) {
+                    return JSON.parse(localStorage.getItem(table_key))
+                }
+                let local_settings = localStorage.getItem(table_key)
+                columns_settings = _dt_get_saved_state(
+                    local_settings,
+                    columns_settings
+                )
+            } else {
+                localStorage.removeItem(table_key)
+            }
+
+            if (
+                this.table_settings.hasOwnProperty("default_display_length") &&
+                this.table_settings.default_display_length != null
+            ) {
+                this.options.pageLength =
+                    this.table_settings.default_display_length
+            }
+            if (
+                this.table_settings.hasOwnProperty("default_sort_order") &&
+                this.table_settings.default_sort_order != null
+            ) {
+                this.options.order = [
+                    [this.table_settings.default_sort_order, "asc"],
+                ]
+            }
+        }
+
         return {
             data: [],
             tableColumns: this.columns,
@@ -186,28 +241,6 @@ export default {
                 },
             ]
         }
-
-        if (this.add_filters) {
-            this.options.orderCellsTop = true
-        }
-
-        if (this.table_settings) {
-            if (
-                this.table_settings.hasOwnProperty("default_display_length") &&
-                this.table_settings.default_display_length != null
-            ) {
-                this.options.pageLength =
-                    this.table_settings.default_display_length
-            }
-            if (
-                this.table_settings.hasOwnProperty("default_sort_order") &&
-                this.table_settings.default_sort_order != null
-            ) {
-                this.options.order = [
-                    [this.table_settings.default_sort_order, "asc"],
-                ]
-            }
-        }
     },
     mounted() {
         let dt = this.$refs.table.dt()
-- 
2.34.1