From 93029a0949782711c03e315ebf4883591480968f Mon Sep 17 00:00:00 2001
From: Curtis Conard <cconard96@gmail.com>
Date: Fri, 27 Dec 2024 12:39:10 -0500
Subject: [PATCH] Fix actor tooltips

---
 .../itilobject/actors/field.html.twig         | 538 +++++++++---------
 1 file changed, 262 insertions(+), 276 deletions(-)

diff --git a/templates/components/itilobject/actors/field.html.twig b/templates/components/itilobject/actors/field.html.twig
index ba6197b978d..05333288178 100644
--- a/templates/components/itilobject/actors/field.html.twig
+++ b/templates/components/itilobject/actors/field.html.twig
@@ -73,325 +73,311 @@
       {{ include('components/itilobject/actors/assign_to_me.html.twig') }}
    {% endif %}
 
-   <script type="text/javascript">
-
-   // Do not use jquery ready wrapper here as it behave unexpectedly with ajax
-   // requests, adding an unnecessary delay
-   (function() {
-      var actorytype = '{{ actortype }}';
-
-      // function to display an option in the list or the selected input
-      var genericTemplate_{{ rand }} = function(option = {}, is_selection = false) {
-         var element   = $(option.element);
-         var itemtype  = element.data('itemtype') ?? option.itemtype;
-         var items_id  = element.data('items-id') ?? option.items_id;
-         var text      = escapeMarkupText(element.data('text') ?? option.text ?? '');
-         var title     = escapeMarkupText(element.data('title') ?? option.title ?? '');
-         var use_notif = element.data('use-notification') ?? option.use_notification ?? 1;
-         var alt_email = element.data('alternative-email') ?? option.alternative_email ?? '';
-
-         var icon = "";
-         var fk   = "";
-         switch (itemtype) {
-            case "User":
-               if (items_id == 0) {
-                  text = alt_email;
-                  icon = `<i class="ti  fa-fw ti-mail mx-1" title="{{ __('Direct email') }}"></i>`;
-               } else {
-                  icon = `<i class="ti  fa-fw ti-user mx-1" title="{{ 'User'|itemtype_name }}"></i>`;
-               }
-               if ("{{ actortype }}" == "assign") {
-                  fk = "users_id_assign";
-               } else if ("{{ actortype }}" == "requester") {
-                  fk = "users_id_requester";
-               } else if ("{{ actortype }}" == "observer") {
-                  fk = "users_id_observer";
-               }
-               break;
-            case "Group":
-               icon = `<i class="ti  fa-fw ti-users mx-1" title="{{ 'Group'|itemtype_name }}"></i>`;
-               if ("{{ actortype }}" == "assign") {
-                  fk = "groups_id_assign";
-               } else if ("{{ actortype }}" == "requester") {
-                  fk = "groups_id_requester";
-               } else if ("{{ actortype }}" == "observer") {
-                  fk = "groups_id_observer";
-               }
-               break;
-            case "Supplier":
-               icon = `<i class="ti fa-fw ti-package mx-1" title="{{ 'Supplier'|itemtype_name }}"></i>`;
-               fk   = "suppliers_id_assign";
-               break;
-         }
-
-         var actions = "";
-         {% if canupdate %}
-         if (['User', 'Supplier', 'Email'].includes(itemtype)
-            && is_selection) {
-            var fa_class = "far";
-            if (use_notif) {
-               fa_class = "fas";
+    <script type="module" defer>
+        const actorytype = '{{ actortype }}';
+
+        // function to display an option in the list or the selected input
+        function genericTemplate(option = {}, is_selection = false) {
+            const element   = $(option.element);
+            const itemtype  = element.data('itemtype') ?? option.itemtype;
+            const items_id  = element.data('items-id') ?? option.items_id;
+            let text        = escapeMarkupText(element.data('text') ?? option.text ?? '');
+            const title     = escapeMarkupText(element.data('title') ?? option.title ?? '');
+            const use_notif = element.data('use-notification') ?? option.use_notification ?? 1;
+            const alt_email = element.data('alternative-email') ?? option.alternative_email ?? '';
+
+            let icon = "";
+            let fk   = "";
+            switch (itemtype) {
+                case "User":
+                    if (items_id == 0) {
+                        text = alt_email;
+                        icon = `<i class="ti  fa-fw ti-mail mx-1" title="{{ __('Direct email') }}"></i>`;
+                    } else {
+                        icon = `<i class="ti  fa-fw ti-user mx-1" title="{{ 'User'|itemtype_name }}"></i>`;
+                    }
+                    if ("{{ actortype }}" == "assign") {
+                        fk = "users_id_assign";
+                    } else if ("{{ actortype }}" == "requester") {
+                        fk = "users_id_requester";
+                    } else if ("{{ actortype }}" == "observer") {
+                        fk = "users_id_observer";
+                    }
+                    break;
+                case "Group":
+                    icon = `<i class="ti  fa-fw ti-users mx-1" title="{{ 'Group'|itemtype_name }}"></i>`;
+                    if ("{{ actortype }}" == "assign") {
+                        fk = "groups_id_assign";
+                    } else if ("{{ actortype }}" == "requester") {
+                        fk = "groups_id_requester";
+                    } else if ("{{ actortype }}" == "observer") {
+                        fk = "groups_id_observer";
+                    }
+                    break;
+                case "Supplier":
+                    icon = `<i class="ti fa-fw ti-package mx-1" title="{{ 'Supplier'|itemtype_name }}"></i>`;
+                    fk   = "suppliers_id_assign";
+                    break;
             }
-            actions = `<button class="btn btn-sm btn-ghost-secondary edit-notify-user"
+
+            let actions = "";
+            {% if canupdate %}
+            if (['User', 'Supplier', 'Email'].includes(itemtype)
+                && is_selection) {
+                const fa_class = use_notif ? "fas" : "far";
+                actions = `
+                    <button class="btn btn-sm btn-ghost-secondary edit-notify-user"
                               data-bs-toggle="tooltip" data-bs-placement="top"
                               title="{{ __('Email followup') }}"
                               type="button">
-               <i class="${fa_class} fa-bell notify-icon"></i>
-            </button>`;
-         }
-         {% endif %}
-
-         // manage specific display for tree data (like groups)
-         var indent = "";
-         if (!is_selection && "level" in option && option.level > 1) {
-            for (let index = 1; index < option.level; index++) {
-               indent = "&nbsp;&nbsp;&nbsp;"+indent;
+                        <i class="${fa_class} fa-bell notify-icon"></i>
+                    </button>`;
             }
-            indent = indent+"&raquo;";
-         }
-
-         // prepare html for option element
-         var text = (is_selection && itemtype == "Group") ? title : text;
-         var option_text    = `<span class="actor_text">${text}</span>`;
-         var option_element = $(`<span class="actor_entry" data-itemtype="${itemtype}" data-items-id="${items_id}" data-actortype="${actorytype}">${indent}${icon}${option_text}${actions}</span>`);
-
-          if (is_selection && itemtype == "User") {
-              const unique_id = "user_opt_" + actor_select.attr('data-actor-type') + "User" + items_id;
-              $.ajax({
-                  url: '{{ path('/ajax/comments.php') }}',
-                  type: 'POST',
-                  data: {
-                      'itemtype': 'User',
-                      'value': items_id,
-                  }
-              }).then((result) => {
-                  if (result) {
-                      actor_select.parent().append('<' + `div id="content${unique_id}" style="display: none;">` + result + '<' + '/div>');
-                      option_element.attr('data-glpi-popover-source', `content${unique_id}`);
-                  }
-              });
-          }
-
-         if (is_selection && itemtype == "Group") {
-            const unique_id = "group_opt_" + actor_select.attr('data-actor-type') + "Group" + items_id;
-            $.ajax({
-               url: '{{ path('/ajax/comments.php') }}',
-               type: 'POST',
-               data: {
-                  'itemtype': 'Group',
-                  'value': items_id,
-               }
-            }).then((result) => {
-               if (result) {
-                  actor_select.parent().append('<' + `div id="content${unique_id}" style="display: none;">` + result + '<' + '/div>');
-                  option_element.attr('data-glpi-popover-source', `content${unique_id}`);
-               }
-            });
-         }
-
-         // manage ticket information (number of assigned ticket for an actor)
-         if (is_selection && itemtype != "Email") {
-            var label = '';
-            if ("{{ actortype }}" == "assign") {
-               label = "{{ __('Number of tickets already assigned') }}";
-            } else if ("{{ actortype }}" == "requester") {
-               label = "{{ __('Number of tickets as requester') }}";
+            {% endif %}
+
+            // manage specific display for tree data (like groups)
+            let indent = "";
+            if (!is_selection && "level" in option && option.level > 1) {
+                for (let index = 1; index < option.level; index++) {
+                    indent = "&nbsp;&nbsp;&nbsp;"+indent;
+                }
+                indent = indent+"&raquo;";
+            }
+
+            // prepare html for option element
+            text = (is_selection && itemtype == "Group") ? title : text;
+            const option_text    = `<span class="actor_text">${text}</span>`;
+            const option_element = $(`<span class="actor_entry" data-itemtype="${itemtype}" data-items-id="${items_id}" data-actortype="${actorytype}">${indent}${icon}${option_text}${actions}</span>`);
+
+            if (is_selection && itemtype == "User") {
+                const unique_id = "user_opt_" + actor_select.attr('data-actor-type') + "User" + items_id;
+                $.ajax({
+                    url: '{{ path('/ajax/comments.php') }}',
+                    type: 'POST',
+                    data: {
+                        'itemtype': 'User',
+                        'value': items_id,
+                    }
+                }).then((result) => {
+                    if (result) {
+                        actor_select.parent().append('<' + `div id="content${unique_id}" style="display: none;">` + result + '<' + '/div>');
+                        option_element.attr('data-glpi-popover-source', `content${unique_id}`);
+                    }
+                });
             }
-            var existing_element = $(
-               `<span class="assign_infos ms-1" title="${label}"
+
+            if (is_selection && itemtype == "Group") {
+                const unique_id = "group_opt_" + actor_select.attr('data-actor-type') + "Group" + items_id;
+                $.ajax({
+                    url: '{{ path('/ajax/comments.php') }}',
+                    type: 'POST',
+                    data: {
+                        'itemtype': 'Group',
+                        'value': items_id,
+                    }
+                }).then((result) => {
+                    if (result) {
+                        actor_select.parent().append('<' + `div id="content${unique_id}" style="display: none;">` + result + '<' + '/div>');
+                        option_element.attr('data-glpi-popover-source', `content${unique_id}`);
+                    }
+                });
+            }
+
+            // manage ticket information (number of assigned ticket for an actor)
+            if (is_selection && itemtype != "Email") {
+                let label = '';
+                if ("{{ actortype }}" == "assign") {
+                    label = "{{ __('Number of tickets already assigned') }}";
+                } else if ("{{ actortype }}" == "requester") {
+                    label = "{{ __('Number of tickets as requester') }}";
+                }
+                const existing_element = $(
+                    `<span class="assign_infos ms-1" title="${label}"
                      data-bs-toggle="tooltip" data-bs-placement="top"
                      data-id="${items_id}" data-fk="${fk}">
                   <i class="fas fa-spinner fa-spin"></i>
                </span>`
-            );
-            option_element.append(existing_element);
-
-            $.get("{{ path('/ajax/actorinformation.php') }}", {
-               [fk]: items_id,
-               only_number: true,
-            }).done(function (number) {
-               var badge = "";
-               if (number.length > 0) {
-                  badge = `<span class="badge bg-secondary-lt">
-                  ${number}
-               </span>`;
-               }
-               existing_element.html(badge);
-            });
-         }
-
-         return option_element;
-      };
-
-      var select2_width = "{{ canassigntome ? 'calc(100% - 30px)' : '100%' }}";
-
-      const actor_select = $("#actor_{{ rand }}");
-      actor_select.select2({
-         tags: true,
-         width: select2_width,
-         tokenSeparators: [',', ' '],
-         containerCssClass: 'actor-field',
-         templateSelection: function(option) { return genericTemplate_{{ rand }}(option, true); },
-         templateResult:    function(option) { return genericTemplate_{{ rand }}(option, false); },
-         disabled: {{ canupdate ? 'false' : 'true' }},
-         createTag: function (params) {
-            var term = $.trim(params.term);
-
-            if (term === '') {
-               return null;
+                );
+                option_element.append(existing_element);
+
+                $.get("{{ path('/ajax/actorinformation.php') }}", {
+                    [fk]: items_id,
+                    only_number: true,
+                }).done((number) => {
+                    const badge = number.length > 0 ? `<span class="badge bg-secondary-lt">${number}</span>` : '';
+                    existing_element.html(badge);
+                });
             }
 
-            // Don't offset to create a tag if it's not an email
-            if (!new RegExp(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,63}$/).test(term)) {
-               // Return null to disable tag creation
-               return null;
+            return option_element;
+        }
+
+        const select2_width = "{{ canassigntome ? 'calc(100% - 30px)' : '100%' }}";
+
+        const actor_select = $("#actor_{{ rand }}");
+        actor_select.select2({
+            tags: true,
+            width: select2_width,
+            tokenSeparators: [',', ' '],
+            containerCssClass: 'actor-field',
+            templateSelection: (option) => genericTemplate(option, true),
+            templateResult: (option) => genericTemplate(option, false),
+            disabled: {{ canupdate ? 'false' : 'true' }},
+            createTag: (params) => {
+                const term = $.trim(params.term);
+
+                if (term === '') {
+                    return null;
+                }
+
+                // Don't offset to create a tag if it's not an email
+                if (!new RegExp(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,63}$/).test(term)) {
+                    // Return null to disable tag creation
+                    return null;
+                }
+
+                return {
+                    id: term,
+                    text: term,
+                    itemtype: "User",
+                    items_id: 0,
+                    use_notification: 1,
+                    alternative_email: term,
+                }
+            },
+            ajax: {
+                url: '{{ path('/ajax/actors.php') }}',
+                datatype: 'json',
+                type: 'POST',
+                delay:250,
+                data: (params) => {
+                    const is_new_item = {{ item.isNewItem() ? "true" : "false" }};
+                    return {
+                        action: 'getActors',
+                        actortype: actorytype,
+                        users_right: '{{ users_right ?? 'all' }}',
+                        entity_restrict: (window.actors.requester.length === 0 && is_new_item) ? -1 : {{ entities_id }},
+                        searchText: params.term,
+                        _idor_token: '{{ idor_token(item.getType(), {'users_right': users_right ?? 'all'}) }}',
+                        itiltemplate_class: '{{ itiltemplate.getType() }}',
+                        itiltemplates_id: {{ itiltemplate.fields['id'] ?? 0 }},
+                        itemtype: '{{ item.getType() }}',
+                        items_id: {{ item.isNewItem() ? -1 : item.fields['id'] }},
+                        item: {{ item.fields|json_encode|raw }},
+                        returned_itemtypes: {{ (returned_itemtypes ?? ['User', 'Group', 'Supplier'])|json_encode()|raw }},
+                        page: params.page || 1
+                    };
+                },
             }
+        }).on('select2:open', () => {
+            // Close popovers
+            $('.popover').popover('hide');
+        });
 
-            return {
-               id: term,
-               text: term,
-               itemtype: "User",
-               items_id: 0,
-               use_notification: 1,
-               alternative_email: term,
-            }
-         },
-         ajax: {
-            url: '{{ path('/ajax/actors.php') }}',
-            datatype: 'json',
-            type: 'POST',
-            delay:250,
-            data: function (params) {
-               var is_new_item = {{ item.isNewItem() ? "true" : "false" }};
-               return {
-                  action: 'getActors',
-                  actortype: actorytype,
-                  users_right: '{{ users_right ?? 'all' }}',
-                  entity_restrict: (actors.requester.length == 0 && is_new_item) ? -1 : {{ entities_id }},
-                  searchText: params.term,
-                  _idor_token: '{{ idor_token(item.getType(), {'users_right': users_right ?? 'all'}) }}',
-                  itiltemplate_class: '{{ itiltemplate.getType() }}',
-                  itiltemplates_id: {{ itiltemplate.fields['id'] ?? 0 }},
-                  itemtype: '{{ item.getType() }}',
-                  items_id: {{ item.isNewItem() ? -1 : item.fields['id'] }},
-                  item: {{ item.fields|json_encode|raw }},
-                  returned_itemtypes: {{ (returned_itemtypes ?? ['User', 'Group', 'Supplier'])|json_encode()|raw }},
-                  page: params.page || 1
-               };
-            },
-         }
-      }).on('select2:open', () => {
-          // Close popovers
-          $('.popover').popover('hide');
-      });
-
-      $(function () {
-         actor_select.parent().popover({
+        actor_select.parent().popover({
             selector: '[data-glpi-popover-source]',
             container: actor_select.parent(),
             html: true,
             sanitize: false,
             trigger: 'hover',
             delay: {
-               hide: 300
+                hide: 300
             },
-            template: '<' + 'div class="popover shadow" role="tooltip"><' + 'div class="popover-arrow"><' + '/div><' + 'h3 class="popover-header"><' + '/h3><' + 'div class="popover-body"><' + '/div><' + '/div>',
-            content: function() {
-               // Close other popovers
-               $('.popover').popover('hide');
-               return $('#' + $(this).attr('data-glpi-popover-source')).html();
+            content: (el) => {
+                // Close other popovers
+                $('.popover').popover('hide');
+                return $('#' + $(el).attr('data-glpi-popover-source')).html();
             }
-         }).on('hide.bs.popover', function () {
+        }).on('hide.bs.popover', () => {
             // prevent closing popover when user card is hover
             if ($('.user-info-card:hover').length > 0) {
-               return false;
+                return false;
             }
             // prevent closing popover when group card is hover
             if ($('.group-info-card:hover').length > 0) {
-               return false;
+                return false;
             }
-         });
-      });
+        });
 
         // when the mouse leave the user card in the popover, close it
-        $(document).on('mouseleave', '.user-info-card', function() {
+        $(document).on('mouseleave', '.user-info-card', () => {
             setTimeout(() => {
                 $('.popover').popover('hide');
             }, 300);
         });
 
         // when the mouse leave the group card in the popover, close it
-        $(document).on('mouseleave', '.group-info-card', function() {
+        $(document).on('mouseleave', '.group-info-card', () => {
             setTimeout(() => {
                 $('.popover').popover('hide');
             }, 300);
         });
 
-      // manage actors change
-      var updateActors{{ rand }} = function() {
-         var data = $("#actor_{{ rand }}").select2('data');
+        // manage actors change
+        function updateActors() {
+            const data = $("#actor_{{ rand }}").select2('data');
+
+            const new_actors = [];
+            data.forEach((selection) => {
+                const element = $(selection.element);
+
+                let itemtype  = selection.itemtype ?? element.data('itemtype');
+                const items_id  = selection.items_id ?? element.data('items-id');
+                let use_notif = selection.use_notification  ?? element.data('use-notification')  ?? false;
+                const def_email = selection.default_email ?? element.data('default-email') ?? '';
+                let alt_email = selection.alternative_email ?? element.data('alternative-email') ?? '';
+
+                if (itemtype == "Email") {
+                    itemtype  = "User";
+                    use_notif = true;
+                    alt_email = selection.id;
+                }
+
+                new_actors.push({
+                    itemtype: itemtype,
+                    items_id: items_id,
+                    use_notification: use_notif,
+                    default_email: def_email,
+                    alternative_email: alt_email,
+                });
+            });
 
-         var new_actors = [];
-         data.forEach(function(selection) {
-            var element = $(selection.element);
+            window.actors[actorytype] = new_actors;
 
-            var itemtype  = selection.itemtype ?? element.data('itemtype');
-            var items_id  = selection.items_id ?? element.data('items-id');
-            var use_notif = selection.use_notification  ?? element.data('use-notification')  ?? false;
-            var def_email = selection.default_email ?? element.data('default-email') ?? '';
-            var alt_email = selection.alternative_email ?? element.data('alternative-email') ?? '';
+            saveActorsToDom();
+        }
 
-            if (itemtype == "Email") {
-               itemtype  = "User";
-               use_notif = true;
-               alt_email = selection.id;
-            }
+        $("#actor_{{ rand }}").on('select2:select', () => {
+            updateActors();
+            {{ onchange }}
+        });
+        $("#actor_{{ rand }}").on('select2:unselect', () => {
+            updateActors();
+            {{ onchange }}
+        });
 
-            new_actors.push({
-               itemtype: itemtype,
-               items_id: items_id,
-               use_notification: use_notif,
-               default_email: def_email,
-               alternative_email: alt_email,
-            });
-         });
-
-         actors[actorytype] = new_actors;
-
-         saveActorsToDom();
-      };
-      $("#actor_{{ rand }}").on('select2:select', function () {
-         updateActors{{ rand }}();
-         {{ onchange }}
-      });
-      $("#actor_{{ rand }}").on('select2:unselect', function () {
-         updateActors{{ rand }}();
-         {{ onchange }}
-      });
-
-      // intercept event for edit notification button
-      document.addEventListener('click', event => {
-         if (event.target.closest("#actor_{{ rand }} + .select2 .edit-notify-user")) {
-            return openNotifyModal(event);
-         }
-         // if a click on assign info is detected prevent opening of select2
-         if (event.target.closest("#actor_{{ rand }} + .select2 .assign_infos")) {
-            event.stopPropagation();
-         }
-      }, {capture: true})
-      document.addEventListener('keydown', event => {
-         if (event.target.closest("#actor_{{ rand }} + .select2 .edit-notify-user")
-            && event.key == "Enter") {
-            return openNotifyModal(event);
-         }
-      }, {capture: true})
-
-      {% if itiltemplate.isHiddenField('_users_id_' ~ actortype) %}
-         $(".actor_entry[data-itemtype=\"User\"][data-actortype=\"{{ actortype }}\"]").parent().css("display", "none");
-      {% endif %}
-      {% if itiltemplate.isHiddenField('_groups_id_' ~ actortype) %}
-         $(".actor_entry[data-itemtype=\"Group\"][data-actortype=\"{{ actortype }}\"]").parent().css("display", "none");
-      {% endif %}
-   })();
-   </script>
+        // intercept event for edit notification button
+        document.addEventListener('click', event => {
+            if (event.target.closest("#actor_{{ rand }} + .select2 .edit-notify-user")) {
+                return openNotifyModal(event);
+            }
+            // if a click on assign info is detected prevent opening of select2
+            if (event.target.closest("#actor_{{ rand }} + .select2 .assign_infos")) {
+                event.stopPropagation();
+            }
+        }, {capture: true})
+        document.addEventListener('keydown', event => {
+            if (event.target.closest("#actor_{{ rand }} + .select2 .edit-notify-user")
+                && event.key == "Enter") {
+                return openNotifyModal(event);
+            }
+        }, {capture: true})
+
+        {% if itiltemplate.isHiddenField('_users_id_' ~ actortype) %}
+        $(".actor_entry[data-itemtype=\"User\"][data-actortype=\"{{ actortype }}\"]").parent().css("display", "none");
+        {% endif %}
+        {% if itiltemplate.isHiddenField('_groups_id_' ~ actortype) %}
+        $(".actor_entry[data-itemtype=\"Group\"][data-actortype=\"{{ actortype }}\"]").parent().css("display", "none");
+        {% endif %}
+    </script>
 {% endif %}