MID-7976 request access ui, list group menu better jquery impl

Evolveum · Jul 14, 2022 · aa07b2c · aa07b2c
1 parent 96a76e2
commit aa07b2c
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 30 deletions.
diff --git a/gui/admin-gui/src/frontend/js/list-group-menu.js b/gui/admin-gui/src/frontend/js/list-group-menu.js
@@ -7,31 +7,94 @@
 import $ from 'jquery';
 
 const NAME = 'listGroupMenu'
-const VERSION = '0.1'
 const DATA_KEY = 'midpoint.listGroupMenu'
 const EVENT_KEY = `.${DATA_KEY}`
-const DATA_API_KEY = '.data-api'
 const JQUERY_NO_CONFLICT = $.fn[NAME]
 
+const EVENT_EXPANDED = `expanded${EVENT_KEY}`
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
+
+const SELECTOR_LINK = '.item-link'
+const SELECTOR_DATA_WIDGET = '[data-widget="list-group-menu"]'
+
+const Default = {
+    trigger: `${SELECTOR_DATA_WIDGET} ${SELECTOR_LINK}`,
+    animationSpeed: 300,
+    accordion: true
+}
+
 // todo implement properly
 class ListGroupMenu {
 
     constructor(element, config) {
+        this._config = config
+        this._element = element
     }
 
-    static get VERSION() {
-        return VERSION
+    init() {
+        const elementId = this._element.attr('id') !== undefined ? `#${this._element.attr('id')}` : ''
+        $(document).on('click', `${elementId}${this._config.trigger}`, event => {
+            this.toggle(event)
+        })
     }
 
-    static get Default() {
-        return Default
+    toggle(event) {
+        console.log('toggle');
+
+        const link = $(event.currentTarget);
+
+        const chevron = link.find('i.chevron');
+        if (chevron.length == 0) {
+            return;
+        }
+
+        event.preventDefault();
+
+        const item = link.parent();
+        const submenu = item.find('.list-group-submenu');
+
+        if (!submenu.is(':visible')) {
+            chevron.css('transform', 'rotate(270deg)');
+            $(submenu).slideDown();
+        } else {
+            chevron.css('transform', 'rotate(0deg)');
+            $(submenu).slideUp();
+        }
     }
 
     static _jQueryInterface(config) {
+        return this.each(function () {
+            let data = $(this).data(DATA_KEY)
+            const _options = $.extend({}, Default, $(this).data())
+
+            if (!data) {
+                data = new ListGroupMenu($(this), _options)
+                $(this).data(DATA_KEY, data)
+            }
 
+            if (config === 'init') {
+                data[config]()
+            }
+        })
     }
 }
 
+/**
+ * Data API
+ */
+
+$(window).on(EVENT_LOAD_DATA_API, () => {
+    $(SELECTOR_DATA_WIDGET).each(function () {
+        ListGroupMenu._jQueryInterface.call($(this), 'init')
+    })
+})
+
+
+/**
+ * jQuery API
+ */
+
 $.fn[NAME] = ListGroupMenu._jQueryInterface
 $.fn[NAME].Constructor = ListGroupMenu
 $.fn[NAME].noConflict = () => {

diff --git a/gui/admin-gui/src/frontend/js/midpoint-theme.js b/gui/admin-gui/src/frontend/js/midpoint-theme.js
@@ -149,29 +149,6 @@ export default class MidPointTheme {
                 }
             });
         });
-
-
-        // todo move to list-group-menu.js plugin
-        $(document).ready(function () {
-            $('.list-group-menu').find('.chevron').parent().attr("href", "#");
-
-            $('.list-group-menu').find('.chevron').parent().click(function (event) {
-                event.preventDefault();
-
-                var link = $(this);
-                var item = link.parent();
-                var chevron = link.find('.chevron');
-                var submenu = item.find('.list-group-submenu');
-
-                if (!submenu.is(':visible')) {
-                    chevron.css('transform', 'rotate(270deg)');
-                    $(submenu).slideDown();
-                } else {
-                    chevron.css('transform', 'rotate(0deg)');
-                    $(submenu).slideUp();
-                }
-            });
-        });
     }
 
     // I'm not sure why sidebar has 15px padding -> and why I had to use 10px constant here [lazyman]

diff --git a/.../main/java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/ListGroupMenuPanel.java b/.../main/java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/ListGroupMenuPanel.java
@@ -45,6 +45,7 @@ protected void onComponentTag(ComponentTag tag) {
 
     private void initLayout() {
         add(AttributeAppender.append("class", "list-group-menu"));
+        add(AttributeAppender.append("data-widget", "list-group-menu"));
         setOutputMarkupId(true);
 
         ListView<ListGroupMenuItem<T>> items = new ListView<>(ID_ITEMS, () -> getModelObject().getItems()) {
@@ -67,6 +68,6 @@ protected void onClickPerformed(AjaxRequestTarget target, ListGroupMenuItem item
     protected void onMenuClickPerformed(AjaxRequestTarget target, ListGroupMenuItem<T> item) {
         getModelObject().activateItem(item);
 
-        target.add(this);
+//        target.add(this);
     }
 }