From 2543c9cd3e967c6535c1405c8532e129f28749fe Mon Sep 17 00:00:00 2001
From: Dmitry Romanov <romanovda@gmail.com>
Date: Tue, 28 May 2024 16:09:57 -0400
Subject: [PATCH] Fixed website directory tree logic

---
 python/ccdb/webgui/__init__.py                | 17 +++++---
 .../ccdb/webgui/templates/directory_tree.html | 43 +++++++++----------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/python/ccdb/webgui/__init__.py b/python/ccdb/webgui/__init__.py
index 2c932de..85acc1d 100644
--- a/python/ccdb/webgui/__init__.py
+++ b/python/ccdb/webgui/__init__.py
@@ -1,9 +1,10 @@
 import ccdb
-from ccdb.model import User
+from ccdb.model import User, TypeTable
 from ccdb.path_utils import parse_request, ParseRequestResult
 from flask import Flask, g, render_template, url_for, jsonify
 
-from python.ccdb.errors import ObjectIsNotFoundInDbError
+from ccdb.model import Directory
+from ccdb.errors import ObjectIsNotFoundInDbError
 
 
 def print_app_functions(app):
@@ -25,18 +26,24 @@ def dir_to_ul(directory, level=0):
     :rtype; str
     """
 
+    opened_class = 'bi-folder2-open'
+    closed_class = 'bi-folder'
+    file_class = 'bi-table'
+
     if not len(directory.sub_dirs) and not len(directory.type_tables):
         return "<ul></ul>"
 
     result = '<ul>\n'
     for sub_dir in directory.sub_dirs:
-        result += f'<li><span class="clickable">{sub_dir.name}</span> <button onclick="showDirInfo({sub_dir.id})">&#128712;</button>'
+        assert isinstance(sub_dir, Directory)
+        result += f'<li data="{sub_dir.path}" class="directory"><i class="indicator bi {closed_class}"></i><span class="clickable">{sub_dir.name}</span><button onclick="showDirInfo({sub_dir.id})">&#128712;</button>'
         result += dir_to_ul(sub_dir, level + 1)
         result += '</li>\n'
 
     for table in directory.type_tables:
+        assert isinstance(table, TypeTable)
         table_url = url_for('versions', table_path=table.path)
-        result += f'<li><a class="clickable" href="{table_url}">{table.name}</a> <button onclick="showTableInfo({table.id})">&#128712;</button></li>\n'
+        result += f'<li data="{table.path}"><i class="indicator bi {file_class}"></i><a class="clickable" href="{table_url}">{table.name}</a> <button onclick="showTableInfo({table.id})">&#128712;</button></li>\n'
 
     result += '</ul>\n'
     return result
@@ -47,7 +54,7 @@ def cerate_ccdb_flask_app(test_config=None):
     app = Flask(__name__, instance_relative_config=True)
     app.config.from_mapping(
         # a default secret that should be overridden by instance config
-        SQL_CONNECTION_STRING="mysql://ccdb_user@localhost/ccdb"
+        SQL_CONNECTION_STRING="mysql://ccdb_user@hallddb.jlab.org/ccdb2"
     )
 
     @app.before_request
diff --git a/python/ccdb/webgui/templates/directory_tree.html b/python/ccdb/webgui/templates/directory_tree.html
index a0bede4..3f5d364 100644
--- a/python/ccdb/webgui/templates/directory_tree.html
+++ b/python/ccdb/webgui/templates/directory_tree.html
@@ -168,50 +168,49 @@ <h1 class="text-center my-4">{% block title %}Tables{% endblock %}</h1>
 
     $('#infoModal').on('shown.bs.modal', adjustModal);
 
-    $('#tree2').treed({
-        openedClass: 'bi-folder2-open',
-        closedClass: 'bi-folder',
-        fileClass: 'bi-table'
-    });
+    $('#tree2').treed();
 
-    $('#tree2').find('.branch').each(function() {
-        var branch = $(this);
-        if (localStorage.getItem('branch-' + branch.index()) === 'open') {
-            branch.children('.indicator').click();
-        }
-    });
 });
 
 $.fn.extend({
     treed: function (o) {
-        var openedClass = o.openedClass;
-        var closedClass = o.closedClass;
-        var fileClass = o.fileClass;
+        const openedClass = 'bi-folder2-open';
+        const closedClass = 'bi-folder';
+        const fileClass ='bi-table';
 
-        var tree = $(this);
-        tree.addClass("tree");
-        tree.find('li').has("ul").each(function () {
+        let tree = $(this);
+
+        tree.find('.directory').each(function () {
             var branch = $(this);
-            branch.prepend("<i  class='indicator bi " + closedClass + "'></i>");
-            branch.addClass('branch');
+            let branchElement = this;
+            let fullPath = branchElement.getAttribute("data");
+            let localStorageKey = `branch-${fullPath}`;
+
             branch.on('click', function (e) {
                 if (!$(e.target).is('a') && !$(e.target).is('button') && !$(e.target).closest('button').length) {
                     var icon = $(this).children('i:first');
+
                     icon.toggleClass(openedClass + " " + closedClass);
                     $(this).children().children().toggle();
                     e.stopPropagation();
 
+
+
                     if (icon.hasClass(openedClass)) {
-                        localStorage.setItem('branch-' + $(this).index(), 'open');
+                        localStorage.setItem(localStorageKey , 'open');
                     } else {
-                        localStorage.removeItem('branch-' + $(this).index());
+                        localStorage.removeItem(localStorageKey);
                     }
                 }
             });
+
             branch.children().children().toggle();
+            if (localStorage.getItem(localStorageKey) === 'open') {
+                // console.log(directory);
+                branch.children('.indicator').click();
+            }
         });
 
-        tree.find('li:not(:has(ul))').prepend("<i class='indicator bi " + fileClass + "'></i>");
 
         tree.find('.indicator').on('click', function (e) {
             $(this).closest('li').click();