Gcobani Mkontwana

Gcobani Mkontwana

  • 548
  • 2k
  • 415.2k

Mouse hover user details must display email address

Mar 4 2024 6:44 AM

Hi Team

I need some help, i have a form and its working fine. I only need some help, when i select user details after search. their details from form when i mouse hover i must be able to see user email detail. Kindly please assist and thank you.

<!--Modal form popup for user checks details-->
                        <div class="modal fade" id="checkDetailsModal" tabindex="-1" role="dialog" aria-labelledby="checkNamesModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-xl" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="checkDetailsModalLabel">Select People and Groups</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="container-fluid">
                                            <div class="row">
                                                <div class="col-md-6 border-right">
                                                    <!-- Left Border: Search -->
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <div class="input-group">
                                                            <input type="text" id="searchInput" class="form-control" placeholder="Search">
                                                            <div class="input-group-append">
                                                                <button class="btn btn-outline-secondary" id="searchButton" type="button">
                                                                    <i class="fas fa-search"></i> Search
                                                                </button>
                                                            </div>
                                                        </div>

                                                    </div>

                                                    <!-- Style background for the container -->
                                                    <style>
                                                        .light-grey-list li {
                                                            background-color: #808080; /* Dark Grey color */
                                                            padding: 5px;
                                                        }
                                                    </style>

                                                    <!-- List of available users shown -->
                                                    <div class="border p-3">
                                                        <!-- Ordered List Content Here -->
                                                        <ol class="light-grey-list">
                                                            <li>
                                                                <!-- Users list -->
                                                                <img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;">
                                                                All Users <span id="usersCount" style="display: none;">[<span id="totalUsersCount">0</span>]</span>
                                                            </li>
                                                            <li>
                                                                <!-- Active directory users -->
                                                                <img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;">
                                                                Active Directory <span id="activeCount" style="display: none;">[<span id="activeDirectoryCount">0</span>]</span>
                                                            </li>
                                                            <li>
                                                                <!-- Organisation users -->
                                                                <img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;">
                                                                Organization <span id="orgCount" style="display: none;">[<span id="organizationCount">0</span>]</span>
                                                            </li>
                                                        </ol>
                                                    </div>



                                                </div>
                                                <div class="col-md-6">
                                                    <!-- Right Border: Table -->
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h5 class="mb-0">Details</h5>
                                                    </div>
                                                    <div class="border p-3 table-container table-responsive">
                                                        <!-- Table with Display Name, E-mail Address, Title, Department, Presence, Work Phone, Location -->
                                                        <table class="table table-bordered" id="userTable">
                                                            <thead>
                                                                <tr>
                                                                    <th>Display Name</th>
                                                                    <th>E-mail Address</th>
                                                                    <th>Title</th>
                                                                    <th>Department</th>
                                                                    <th>Presence</th>
                                                                    <th>Work Phone</th>
                                                                    <th>Location</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <!-- Table Body Content Here -->
                                                                <tr>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                </tr>
                                                                <!-- Add more rows as needed -->
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!--search for active users at the organisation-->
                                    <script>
                                                       $(document).ready(function () {
    // Function to handle search button click event
    $('#searchButton').on('click', function () {
        var searchTerm = $('#searchInput').val().trim();
        if (searchTerm !== '') {
            // Send an AJAX request to the controller action to search for users
            $.ajax({
                url: '@Url.Action("SearchUsers", "Home")',
                type: 'POST',
                dataType: 'json',
                data: { searchTerm: searchTerm },
                success: function (data) {
                    // Clear previous search results
                    $('#userTable tbody').empty();
                    // Iterate through the retrieved user details and append them to the table
                    $.each(data, function (index, user) {
                        var row = '<tr>' +
                            '<td data-email="' + user.Email + '">' + user.DisplayName + '</td>' +
                            '<td>' + user.Email + '</td>' +
                            '<td>' + user.Title + '</td>' +
                            '<td>' + user.Department + '</td>' +
                            '<td>' + user.Presence + '</td>' +
                            '<td>' + user.WorkPhone + '</td>' +
                            '<td>' + user.Location + '</td>' +
                            '</tr>';
                        $('#userTable tbody').append(row);
                    });
                    // Show the modal with search results
                    $('#checkDetailsModal').modal('show');

                    // Update user counts
                    var totalUsers = data.length;
                    var activeDirectoryCount = data.filter(user => user.Location === 'Active Directory').length;
                    var organizationCount = data.filter(user => user.Location === 'Organization').length;

                    $('#totalUsersCount').text(totalUsers);
                    $('#activeDirectoryCount').text(activeDirectoryCount);
                    $('#organizationCount').text(organizationCount);

                    // Show the user counts with brackets
                    $('#usersCount').toggle(totalUsers > 0);
                    $('#activeCount').toggle(activeDirectoryCount > 0);
                    $('#orgCount').toggle(organizationCount > 0);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // Handle error if any
                    console.error('Error:', textStatus, errorThrown);
                }
            });
        }
    });

    // Function to handle selecting a user from the table
    $(document).on('click', '#userTable tbody tr', function () {
        // Remove the 'selected' class from all rows
        $('#userTable tbody tr').removeClass('selected');
        // Add the 'selected' class to the clicked row
        $(this).addClass('selected');
    });

    // Function to handle OK button click event
    $('#okButton').on('click', function () {
        // Get the selected user's display name and set it in the AuditType input field
        var selectedUserDisplayName = $('#userTable tbody tr.selected td:first').text();
        $('#auditor').val(selectedUserDisplayName);
        // Close the modal
        $('#checkDetailsModal').modal('hide');
    });

    // Function to handle modal close event when close button at the top is clicked
    $('#checkDetailsModal').on('hidden.bs.modal', function () {
        // Clear the search input field and remove the selected class from all rows when the modal is closed
        $('#searchInput').val('');
        $('#userTable tbody tr').removeClass('selected');
    });

    // Function to show user email address on mouse hover
    $(document).on('mouseenter', '#userTable tbody tr td', function () {
        var email = $(this).data('email');
        $(this).attr('title', email);
    });
});

                                    </script>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary" id="okButton">OK</button>
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancelButton">Cancel</button>
                                    </div>
                                </div>
                            </div>
                        </div>

 


Answers (2)