[TikiWiki-commits] [Git][tikiwiki/tiki][master] [ENH][UX] Major UX and stability overhaul for Groups Emulation module

Adrien Mbuya Maloba pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
a5b766c9 by Aksanti Bahiga at 2026-06-08T14:26:11+03:00
[ENH][UX] Major UX and stability overhaul for Groups Emulation module
---
* Fix superfluous whitespace linter error

* Fix Groups Emulation module simulate button

Removed redundant JS that conflicted with hidden Select2 input

Used inline onsubmit and removed required attribute to avoid silent form failures without triggering browser console errors

* Fix late header mutation in groups emulation module

* Fix: remove superfluous blank lines before {/tikimodule}

* Enhancing UX

* Cleanup: Revert Issue 12 changes and remove debug files

* [ENH][UX] Major UX and stability overhaul for Groups Emulation module

See merge request tikiwiki/tiki!10182

- - - - -


3 changed files:

- modules/mod-func-groups_emulation.php
- templates/modules/mod-groups_emulation.tpl
- tiki-emulate_groups_switch.php


Changes:

=====================================
modules/mod-func-groups_emulation.php
=====================================
@@ -49,6 +49,7 @@ function module_groups_emulation_info()
 function module_groups_emulation($mod_reference, $module_params)
 {
     global $user, $tiki_p_admin;
+
     $userlib = TikiLib::lib('user');
     $smarty = TikiLib::lib('smarty');
 
@@ -60,6 +61,9 @@ function module_groups_emulation($mod_reference, $module_params)
     if (isset($_SESSION['groups_emulated'])) {
         $smarty->assign('groups_emulated', unserialize($_SESSION['groups_emulated']));
     }
+    if (isset($_SESSION['groups_emulated_requested'])) {
+        $smarty->assign('groups_emulated_requested', unserialize($_SESSION['groups_emulated_requested']));
+    }
 
     // Admins can see all existing groups
     $allGroups = [];
@@ -83,32 +87,8 @@ function module_groups_emulation($mod_reference, $module_params)
         $chooseGroups["Registered"] = "included";
     }
 
-    $headerlib = TikiLib::lib("header");
     $moduleId = $mod_reference['moduleId'];
-    if (isset($allGroups) && $showallgroups == 'y') {
-        $headerlib->add_js('$(function() {
-            $("#module_' . $moduleId . ' #mge-all").hide();
-            $("#module_' . $moduleId . ' #mge-all-legend").on("click", function(){
-                $("#module_' . $moduleId . ' #mge-all").fadeToggle();
-            });
-        });');
-    }
-    if ($showyourgroups == 'y') {
-        $headerlib->add_js('$(function() {
-            $("#module_' . $moduleId . ' #mge-mine").hide();
-            $("#module_' . $moduleId . ' #mge-mine-legend").on("click", function(){
-                $("#module_' . $moduleId . ' #mge-mine").fadeToggle();
-            });
-        });');
-    }
-    if ($groups_are_emulated == 'y') {
-        $headerlib->add_js('$(function() {
-            $("#module_' . $moduleId . ' #mge-emulated").hide();
-            $("#module_' . $moduleId . ' #mge-emulated-legend").on("click", function(){
-                $("#module_' . $moduleId . ' #mge-emulated").fadeToggle();
-            });
-        });');
-    }
+    $smarty->assign('moduleId', $moduleId);
 
     $smarty->assign_by_ref('userGroups', $userGroups);
     $smarty->assign_by_ref('chooseGroups', $chooseGroups);


=====================================
templates/modules/mod-groups_emulation.tpl
=====================================
@@ -1,55 +1,105 @@
 {strip}
 {tikimodule error=$module_params.error title=$tpl_module_title name="groups_emulation" flip=$module_params.flip decorations=$module_params.decorations nobox=$module_params.nobox notitle=$module_params.notitle}
 
+    <style>
+        .mge-collapse-icon {
+            display: inline-block;
+            transition: transform 0.35s ease;
+            transform: rotate(90deg);
+        }
+
+        .collapsed .mge-collapse-icon {
+            transform: rotate(0deg);
+        }
+    </style>
+
     {if isset($allGroups) && $showallgroups eq 'y'}
-        <fieldset>
-            <legend id='mge-all-legend'><strong>{tr}All Groups{/tr}</strong></legend>
-            <ul id='mge-all' >
-            {foreach from=$allGroups key=groupname item=inclusion name=ix}
-                <li>{$groupname|escape}</li>
-            {/foreach}
-            </ul >
-        </fieldset>
+        <div>
+            <button class="btn btn-link px-0 py-1 text-start text-decoration-none w-100 d-flex align-items-center gap-1 collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#mge-all-{$moduleId}"
+                    aria-expanded="false"
+                    aria-controls="mge-all-{$moduleId}">
+                {icon name='caret-right' iclass='mge-collapse-icon'}
+                <strong>{tr}All Groups{/tr}</strong>
+                &nbsp;<span class="badge rounded-pill bg-secondary fw-normal" style="font-size: 0.7em;">{$allGroups|@count}</span>
+            </button>
+            <div class="collapse" id="mge-all-{$moduleId}">
+                <ul class="mt-1">
+                {foreach from=$allGroups key=groupname item=inclusion name=ix}
+                    <li>{$groupname|escape}</li>
+                {/foreach}
+                </ul>
+            </div>
+        </div>
     {/if}
 
     {if $showyourgroups eq 'y'}
-        <fieldset>
-            <legend id='mge-mine-legend'><strong>{tr}Your Groups{/tr}</strong></legend>
-            <ul id='mge-mine' >
-            {foreach from=$userGroups key=groupname item=inclusion name=ix}
-                {if $inclusion eq 'included'}
-                    <li><i>{$groupname|escape}</i></li>
-                {else}
-                    <li>{$groupname|escape}</li>
-                {/if}
-            {/foreach}
-            </ul >
-        </fieldset>
+        <div>
+            <button class="btn btn-link px-0 py-1 text-start text-decoration-none w-100 d-flex align-items-center gap-1 collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#mge-mine-{$moduleId}"
+                    aria-expanded="false"
+                    aria-controls="mge-mine-{$moduleId}">
+                {icon name='caret-right' iclass='mge-collapse-icon'}
+                <strong>{tr}Your Groups{/tr}</strong>
+                &nbsp;<span class="badge rounded-pill bg-secondary fw-normal" style="font-size: 0.7em;">{$userGroups|@count}</span>
+            </button>
+            <div class="collapse" id="mge-mine-{$moduleId}">
+                <ul class="mt-1">
+                {foreach from=$userGroups key=groupname item=inclusion name=ix}
+                    {if $inclusion eq 'included'}
+                        <li><i>{$groupname|escape}</i></li>
+                    {else}
+                        <li>{$groupname|escape}</li>
+                    {/if}
+                {/foreach}
+                </ul>
+            </div>
+        </div>
     {/if}
 
     {if $groups_are_emulated eq 'y'}
-        <fieldset>
-            <legend id='mge-emulated-legend' ><strong>{tr}Emulated Groups{/tr}</strong></legend>
-            <ul id='mge-emulated' >
-            {section name=ix loop=$groups_emulated}
-                <li>{$groups_emulated[ix]}</li>
-            {/section}
-            </ul>
-            <form method="get" action="tiki-emulate_groups_switch.php" target="_self">
-                <div style="text-align: center"><button type="submit" class="btn btn-primary btn-sm" name="emulategroups" value="resetgroups">{tr}Reset{/tr}</button></div>
-            </form>
-        </fieldset>
+        <div>
+            <button class="btn btn-link px-0 py-1 text-start text-decoration-none w-100 d-flex align-items-center gap-1 collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#mge-emulated-{$moduleId}"
+                    aria-expanded="false"
+                    aria-controls="mge-emulated-{$moduleId}">
+                {icon name='caret-right' iclass='mge-collapse-icon'}
+                <strong>{tr}Emulating{/tr}</strong>
+            </button>
+            <div class="collapse" id="mge-emulated-{$moduleId}">
+                <ul class="mt-1">
+                {foreach from=$groups_emulated item=groupname}
+                    <li>
+                        {if $groups_emulated_requested and $groupname|in_array:$groups_emulated_requested}
+                            <strong>{$groupname|escape}</strong> <small class="text-muted">({tr}selected{/tr})</small>
+                        {else}
+                            <span class="text-muted"><i>{$groupname|escape}</i> <small>({tr}inherited{/tr})</small></span>
+                        {/if}
+                    </li>
+                {/foreach}
+                </ul>
+                <form method="get" action="tiki-emulate_groups_switch.php" target="_self">
+                    <div class="text-center mt-1"><button type="submit" class="btn btn-primary btn-sm" name="emulategroups" value="resetgroups">{tr}Reset{/tr}</button></div>
+                </form>
+            </div>
+        </div>
     {/if}
 
-    <form method="get" action="tiki-emulate_groups_switch.php" target="_self">
+    <form method="get" action="tiki-emulate_groups_switch.php" target="_self" onsubmit="return !!document.getElementById('mge-select-groups-{$moduleId}').value;">
         <fieldset>
             <legend><strong>{tr}Switch to Groups{/tr}</strong></legend>
-            <select name="switchgroups[]" size="{$module_rows}" multiple="multiple" class="form-select table">
+            <select name="switchgroups[]" size="{$module_rows}" multiple="multiple" class="form-select table" id="mge-select-groups-{$moduleId}">
                 {foreach from=$chooseGroups key=groupname item=inclusion name=ix}
-                    <option value="{$groupname|escape}" >{$groupname|escape}</option>
+                    <option value="{$groupname|escape}">{$groupname|escape}</option>
                 {/foreach}
             </select>
-            <div class="text-center"><button type="submit" class="btn btn-primary" name="emulategroups" value="setgroups" >{tr}Simulate{/tr}</button></div>
+            <div class="text-center mt-2"><button type="submit" class="btn btn-primary" name="emulategroups" value="setgroups" id="mge-simulate-btn-{$moduleId}">{tr}Simulate{/tr}</button></div>
         </fieldset>
     </form>
 


=====================================
tiki-emulate_groups_switch.php
=====================================
@@ -25,8 +25,9 @@ if (isset($_REQUEST["emulategroups"])) {
     if ($_REQUEST["emulategroups"] == "setgroups") {
         // User has selected a list of groups to emulate
         $_SESSION["groups_are_emulated"] = "y";
-        if (count($_REQUEST["switchgroups"])) {
+        if (! empty($_REQUEST["switchgroups"]) && is_array($_REQUEST["switchgroups"])) {
             $groups_emulated = [];
+            $groups_emulated_requested = $_REQUEST["switchgroups"];
             $dont_forget_registered = 0;
             foreach ($_REQUEST["switchgroups"] as $value) {
                 $groups_emulated[] = $value;
@@ -44,6 +45,7 @@ if (isset($_REQUEST["emulategroups"])) {
                 $groups_emulated = array_merge($groups_emulated, $included);
             }
             $groups_emulated = array_unique($groups_emulated);
+            $_SESSION['groups_emulated_requested'] = serialize($groups_emulated_requested);
         } else {
             // Let's say clicking with nothing selected is the same as reset
             // Saying it's the same as Anonymous would have the disadvantage of probably
@@ -51,6 +53,7 @@ if (isset($_REQUEST["emulategroups"])) {
             $_SESSION["groups_are_emulated"] = "n";
             $groups_emulated = [];
             $_SESSION['groups_emulated'] = serialize($groups_emulated);
+            $_SESSION['groups_emulated_requested'] = serialize([]);
         }
         $_SESSION['groups_emulated'] = serialize($groups_emulated);
     } elseif ($_REQUEST["emulategroups"] == "resetgroups") {
@@ -58,6 +61,7 @@ if (isset($_REQUEST["emulategroups"])) {
         $_SESSION["groups_are_emulated"] = "n";
         $groups_emulated = [];
         $_SESSION['groups_emulated'] = serialize($groups_emulated);
+        $_SESSION['groups_emulated_requested'] = serialize([]);
     }
     $tikilib->invalidate_usergroups_cache($user);
 }



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/a5b766c95d5c2e07e4abff554760402a6bb3531f

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/a5b766c95d5c2e07e4abff554760402a6bb3531f
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs