templates/business_contacts/index.html.twig line 1

  1. {# templates/business_contacts/index.html.twig #}
  2. {% extends 'base.html.twig' %}
  4. {% block title %}Business Contacts{% endblock %}
  6. {% block body %}
  7.     <div class="row">
  8.         {% include 'business_contacts/parts/business_type_selection_buttons.html.twig' %}
  9.     </div>
  10.     <br>
  12.     {% include 'business_contacts/parts/import_and_export.html.twig' %}
  14.     <div class="table-responsive">
  15.         <table class="table custom-table fixed-cols">
  16.             <thead>
  17.             <tr>
  18.                 <th class="desktop">Photo</th>
  19.                 <th style="width: 150px; text-align: left">Company</th>
  21.                 {% if list_or_map == 'map' %}
  22.                     <th></th>
  23.                 {% endif %}
  25.                 <th style="width: 70px; text-align: left">
  26.                     <i class="fa fa-user"></i>
  27.                 </th>
  28.                 <th title="Website" style="width: 10px; text-align: center">
  29.                     <i class="fa fa-link"></i>
  30.                 </th>
  31.                 <th title="Email" style="width: 10px; text-align: center">
  32.                     <i class="fa fa-envelope"></i>
  33.                 </th>
  34.                 <th title="Mobile" style="width: 10px; text-align: center; border-left: 1px dotted;">
  35.                     <i class="fab fa-whatsapp"></i>
  36.                 </th>
  38.                 {# Mobile analyser header columns (keep as-is) #}
  39.                 {% for type in ['mobile'] %}
  40.                     {% include 'business_contacts/parts/5 telephone_numbers_analyser_header.html.twig' %}
  41.                 {% endfor %}
  43.                 <th title="Phone" style="width: 10px; text-align: center">
  44.                     <i class="fa fa-phone"></i>
  45.                 </th>
  47.                 {# Landline analyser header columns (keep as-is) #}
  48.                 {% for type in ['landline'] %}
  49.                     {% include 'business_contacts/parts/5 telephone_numbers_analyser_header.html.twig' %}
  50.                 {% endfor %}
  52.                 <th title="Address" style="border-left: 1px dotted; width: 400px; text-align: left">
  53.                     <i class="fa fa-building"></i>
  54.                 </th>
  55.                 <th class="desktop" title="Notes" style="width: 100px; text-align: left">
  56.                     <i class="fa fa-pen"></i>
  57.                 </th>
  58.                 <th class="desktop" style="width: 10px; text-align: center" title="Business card">
  59.                     <i class="fa fa-address-card"></i>
  60.                 </th>
  61.                 <th class="desktop" title="Files" style="width: 10px; text-align: center">
  62.                     <i class="fa fa-file-pdf"></i>
  63.                 </th>
  64.                 <th>
  65.                     <i style="color: darkblue" class="fab fa-waze"></i>
  66.                 </th>
  68.                 {% include 'business_contacts/parts/7 access_count_headers.html.twig' %}
  69.             </tr>
  70.             </thead>
  72.             <tbody>
  73.             {# One pass over business types; render a group header row, then that group's contacts #}
  74.             {% for business_type in business_types %}
  75.                 {% set business_contacts_count = CountBusinessContactsService.count(business_type) %}
  76.                 {% set business_contacts_count_with_map_locations = CountBusinessContactsService.countWithMapLocations(business_type) %}
  78.                 {% if business_type.mapicon is not null %}
  79.                     {% set file = asset('administration/ATSSharedFiles/BusinessContactsMapIcons/' ~ business_type.mapIcon.iconFile) %}
  80.                 {% endif %}
  82.                 {% if business_contacts_count > 0 %}
  83.                     {# Group header row for this business type #}
  84.                     <tr class="group-header" data-type="{{ business_type.businessType }}">
  85.                         <td colspan="100">
  86.                             <h2 style="color: red; margin: 0;">
  87.                                 {% if business_contacts_count_with_map_locations > 0 %}
  88.                                     <a class="btn btn-danger btn-sm"
  89.                                        href="{{ path('business_contacts_map', {subset: business_type.businessType}) }}">
  90.                                         <i class="fa fa-map-marker"></i>
  91.                                     </a>
  92.                                 {% endif %}
  94.                                 {% if business_type.mapIcon is not empty %}
  95.                                     <img height="40" width="40" src="{{ file }}" alt="">
  96.                                 {% endif %}
  98.                                 {% if is_granted('ROLE_ADMIN') %}
  99.                                     <a target="_blank" href="{{ path('business_types_edit', {id: business_type.id}) }}">
  100.                                         {{ business_type.businessType }}
  101.                                     </a>
  102.                                 {% else %}
  103.                                     {{ business_type.businessType }}
  104.                                 {% endif %}
  106.                                 {% if app.user %}
  107.                                     <a href="{{ path('business_contacts_new', {business_type: business_type.id}) }}">+</a>
  108.                                 {% endif %}
  109.                             </h2>
  110.                         </td>
  111.                     </tr>
  113.                     {# Rows for contacts in this group — use the grouped array, not business_contacts #}
  114.                     {% set contacts = contacts_by_type[business_type.id] ?? [] %}
  115.                     {% for business_contact in contacts %}
  116.                         <tr class="contact-row" data-type="{{ business_type.businessType }}">
  117.                             {% include 'business_contacts/parts/1 photo.html.twig' %}
  118.                             {% include 'business_contacts/parts/2 company_and_user_body.html.twig' %}
  119.                             {% include 'business_contacts/parts/4 website_email_tels_body.html.twig' %}
  120.                             {% include 'business_contacts/parts/3 map marker_body.html.twig' %}
  121.                             {% include 'business_contacts/parts/6 notes_buttons_files_body.html.twig' %}
  123.                             {# Waze column construction #}
  124.                             {% set hasCoords = business_contact.locationLatitude is not null and business_contact.locationLongitude is not null %}
  125.                             {% set lat = hasCoords ? (business_contact.locationLatitude|number_format(6, '.', '')) : null %}
  126.                             {% set lng = hasCoords ? (business_contact.locationLongitude|number_format(6, '.', '')) : null %}
  127.                             {% set fullAddress = '35 Lillian Road, Barnes, SW13 9LH, UK' %}
  128.                             {% set wazeUrl = hasCoords
  129.                                 ? ('https://waze.com/ul?ll=' ~ lat ~ ',' ~ lng ~ '&navigate=yes')
  130.                                 : ('https://waze.com/ul?q=' ~ (fullAddress|url_encode) ~ '&navigate=yes') %}
  131.                             <td>
  132.                                 <a href="{{ wazeUrl }}" target="_blank" rel="noopener">
  133.                                     <i class="fab fa-waze"></i>
  134.                                 </a>
  135.                             </td>
  137.                             {% include 'business_contacts/parts/7 access_count_body.html.twig' %}
  138.                         </tr>
  139.                     {% endfor %}
  141.                 {% endif %}
  142.             {% endfor %}
  143.             </tbody>
  144.         </table>
  145.     </div>
  146. {% endblock %}
  148. {% block datatable %}
  149.     <style>
  150.         /* Keep columns aligned and content tidy */
  151.         .fixed-cols { table-layout: fixed; width: 100%; }
  152.         .fixed-cols th, .fixed-cols td {
  153.             white-space: nowrap;
  154.             overflow: hidden;
  155.             text-overflow: ellipsis;
  156.             vertical-align: middle;
  157.         }
  158.         .group-header td {
  159.             background: #f7f7f7;
  160.             font-weight: bold;
  161.             border-top: 2px solid #ddd;
  162.             border-bottom: 2px solid #eee;
  163.         }
  164.         .fixed-cols img { max-width: 100%; height: auto; }
  165.     </style>
  167.     <script>
  168.         $(document).ready(function () {
  169.             $('.table').DataTable({
  170.                 autoWidth: false,
  171.                 paging: false,
  172.                 searching: false,
  173.                 bInfo: false,
  174.                 ordering: false  // important: keep group headers in place
  175.             });
  176.         });
  177.     </script>
  178. {% endblock datatable %}
  180. {% block additionaljs %}
  182.     <script>
  183.         (function () {
  184.             function applyFilter(type) {
  185.                 const rows = document.querySelectorAll('tr.contact-row');
  186.                 const headers = document.querySelectorAll('tr.group-header');
  188.                 const wanted = (type || '').toString().trim();
  190.                 rows.forEach(tr => {
  191.                     const t = tr.getAttribute('data-type') || '';
  192.                     tr.style.display = (!wanted || t === wanted) ? '' : 'none';
  193.                 });
  195.                 // Show header if it has at least one visible contact beneath it
  196.                 headers.forEach(h => {
  197.                     const t = h.getAttribute('data-type') || '';
  198.                     if (!wanted) {
  199.                         h.style.display = ''; // All
  200.                     } else {
  201.                         // Find the next sibling contact rows until next header
  202.                         let hasVisible = false;
  203.                         let el = h.nextElementSibling;
  204.                         while (el && !el.classList.contains('group-header')) {
  205.                             if (el.classList.contains('contact-row') && el.style.display !== 'none') {
  206.                                 hasVisible = true; break;
  207.                             }
  208.                             el = el.nextElementSibling;
  209.                         }
  210.                         h.style.display = hasVisible ? '' : 'none';
  211.                     }
  212.                 });
  214.                 // Toggle active classes on buttons and dropdown items
  215.                 document.querySelectorAll('.js-type').forEach(a => {
  216.                     const f = (a.getAttribute('data-filter') || '').trim();
  217.                     if (f === wanted) a.classList.add('active'); else a.classList.remove('active');
  218.                 });
  220.                 // Update dropdown button label on mobile
  221.                 const ddBtn = document.getElementById('businessTypeDropdown');
  222.                 if (ddBtn) {
  223.                     ddBtn.textContent = wanted ? wanted : `All (${rows.length})`;
  224.                 }
  226.                 // Push state to the URL (no reload)
  227.                 const url = new URL(window.location.href);
  228.                 if (wanted) url.searchParams.set('business_type', wanted);
  229.                 else url.searchParams.delete('business_type');
  230.                 window.history.replaceState({}, '', url);
  231.             }
  233.             // Hook up clicks
  234.             document.addEventListener('click', function (e) {
  235.                 const a = e.target.closest('a.js-type');
  236.                 if (!a) return;
  237.                 e.preventDefault();
  238.                 applyFilter(a.getAttribute('data-filter') || '');
  239.             });
  241.             // Apply initial filter from query string on load (so reload/links keep state)
  242.             document.addEventListener('DOMContentLoaded', function () {
  243.                 const url = new URL(window.location.href);
  244.                 applyFilter(url.searchParams.get('business_type') || '');
  245.             });
  246.         })();
  247.     </script>
  251.     <script>
  252.         var businessContactId = '';
  254.         function getLocation(id) {
  255.             businessContactId = id;
  256.             if (navigator.geolocation) {
  257.                 navigator.geolocation.getCurrentPosition(showLocation);
  258.             } else {
  259.                 $('#location').html('Geolocation is not supported by this browser.');
  260.             }
  261.         }
  263.         function showLocation(position) {
  264.             var latitude = position.coords.latitude;
  265.             var longitude = position.coords.longitude;
  266.             $.ajax({
  267.                 type: 'POST',
  268.                 url: 'update/location',
  269.                 data: 'latitude=' + latitude + '&longitude=' + longitude + '&id=' + businessContactId,
  270.                 success: function () {
  271.                     location.reload();
  272.                 }
  273.             });
  274.         }
  276.         $('.action').click(function (e) {
  277.             e.preventDefault();
  278.             let elem = $(this);
  279.             let id = $(this).attr('data-id');
  280.             let action = $(this).attr('data-action');
  281.             let url = '/referrals/new_from_businesscontacts/' + id + '/' + action;
  282.             $.ajax({
  283.                 type: 'GET',
  284.                 url: url,
  285.                 success: function () {
  286.                     let goTo = elem.attr('href');
  287.                     window.open(goTo, '_blank');
  288.                 }
  289.             });
  290.         });
  291.     </script>
  292. {% endblock %}