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 %}
  8.     <div class="row">
  9.         {% include 'business_contacts/parts/business_type_selection_buttons.html.twig' %}
  10.     </div>
  11.     <br>
  13.     {% include 'business_contacts/parts/import_and_export.html.twig' %}
  15.     <div class="table-responsive">
  16.         <table class="table custom-table fixed-cols">
  17.             <thead>
  18.             <tr>
  19.                 <th class="desktop">Photo</th>
  20.                 <th style="width: 150px; text-align: left">Company</th>
  22.                 {% if list_or_map == 'map' %}
  23.                     <th></th>
  24.                 {% endif %}
  26.                 <th style="width: 70px; text-align: left">
  27.                     <i class="fa fa-user"></i>
  28.                 </th>
  29.                 <th title="Website" style="width: 10px; text-align: center">
  30.                     <i class="fa fa-link"></i>
  31.                 </th>
  32.                 <th title="Email" style="width: 10px; text-align: center">
  33.                     <i class="fa fa-envelope"></i>
  34.                 </th>
  35.                 <th title="Mobile" style="width: 10px; text-align: center; border-left: 1px dotted;">
  36.                     <i class="fab fa-whatsapp"></i>
  37.                 </th>
  39.                 {# Mobile analyser header columns (keep as-is) #}
  40.                 {% for type in ['mobile'] %}
  41.                     {% include 'business_contacts/parts/5 telephone_numbers_analyser_header.html.twig' %}
  42.                 {% endfor %}
  44.                 <th title="Phone" style="width: 10px; text-align: center">
  45.                     <i class="fa fa-phone"></i>
  46.                 </th>
  48.                 {# Landline analyser header columns (keep as-is) #}
  49.                 {% for type in ['landline'] %}
  50.                     {% include 'business_contacts/parts/5 telephone_numbers_analyser_header.html.twig' %}
  51.                 {% endfor %}
  53.                 <th title="Address" style="border-left: 1px dotted; width: 400px; text-align: left">
  54.                     <i class="fa fa-building"></i>
  55.                 </th>
  56.                 <th class="desktop" title="Notes" style="width: 100px; text-align: left">
  57.                     <i class="fa fa-pen"></i>
  58.                 </th>
  59.                 <th class="desktop" style="width: 10px; text-align: center" title="Business card">
  60.                     <i class="fa fa-address-card"></i>
  61.                 </th>
  62.                 <th class="desktop" title="Files" style="width: 10px; text-align: center">
  63.                     <i class="fa fa-file-pdf"></i>
  64.                 </th>
  65.                 <th>
  66.                     <i style="color: darkblue" class="fab fa-waze"></i>
  67.                 </th>
  69.                 {% include 'business_contacts/parts/7 access_count_headers.html.twig' %}
  70.             </tr>
  71.             </thead>
  73.             <tbody>
  74.             {# One pass over business types; render a group header row, then that group's contacts #}
  75.             {% for business_type in business_types %}
  76.                 {% set business_contacts_count = CountBusinessContactsService.count(business_type) %}
  77.                 {% set business_contacts_count_with_map_locations = CountBusinessContactsService.countWithMapLocations(business_type) %}
  79.                 {% if business_type.mapicon is not null %}
  80.                     {% set file = asset('administration/ATSSharedFiles/BusinessContactsMapIcons/' ~ business_type.mapIcon.iconFile) %}
  81.                 {% endif %}
  83.                 {% if business_contacts_count > 0 %}
  84.                     {# Group header row for this business type #}
  85.                     <tr class="group-header" data-type="{{ business_type.businessType }}">
  86.                         <td colspan="100">
  87.                             <h2 style="color: red; margin: 0;">
  88.                                 {% if business_contacts_count_with_map_locations > 0 %}
  89.                                     <a class="btn btn-danger btn-sm"
  90.                                        href="{{ path('business_contacts_map', {subset: business_type.businessType}) }}">
  91.                                         <i class="fa fa-map-marker"></i>
  92.                                     </a>
  93.                                 {% endif %}
  95.                                 {% if business_type.mapIcon is not empty %}
  96.                                     <img height="40" width="40" src="{{ file }}" alt="">
  97.                                 {% endif %}
  99.                                 {% if is_granted('ROLE_ADMIN') %}
  100.                                     <a target="_blank" href="{{ path('business_types_edit', {id: business_type.id}) }}">
  101.                                         {{ business_type.businessType }}
  102.                                     </a>
  103.                                 {% else %}
  104.                                     {{ business_type.businessType }}
  105.                                 {% endif %}
  107.                                 {% if app.user %}
  108.                                     <a href="{{ path('business_contacts_new', {business_type: business_type.id}) }}">+</a>
  109.                                 {% endif %}
  110.                             </h2>
  111.                         </td>
  112.                     </tr>
  114.                     {% set contacts = contacts_by_type[business_type.id] ?? [] %}
  115.                     {% for business_contact in contacts %}
  116.                         {% set fullAddress = '' %}
  118.                         {% if business_contact.addressStreet %}
  119.                             {% set fullAddress = fullAddress ~ business_contact.addressStreet %}
  120.                         {% endif %}
  122.                         {% if business_contact.addressCity %}
  123.                             {% set fullAddress = fullAddress ~ (fullAddress ? ', ' : '') ~ business_contact.addressCity %}
  124.                         {% endif %}
  126.                         {% if business_contact.addressPostCode %}
  127.                             {% set fullAddress = fullAddress ~ (fullAddress ? ', ' : '') ~ business_contact.addressPostCode %}
  128.                         {% endif %}
  130.                         <tr class="contact-row" data-type="{{ business_type.businessType }}">
  131.                             {% include 'business_contacts/parts/1 photo.html.twig' %}
  132.                             {% include 'business_contacts/parts/2 company_and_user_body.html.twig' %}
  133.                             {% include 'business_contacts/parts/3 website_email_tels_body.html.twig' %}
  134.                             {% include 'business_contacts/parts/4 map marker_body.html.twig' %}
  135.                             {% include 'business_contacts/parts/6 notes_buttons_files_body.html.twig' %}
  137.                             {# Waze column construction #}
  138.                             {% set hasCoords  = business_contact.locationLatitude is not null and business_contact.locationLongitude is not null %}
  139.                             {% set hasAddress = fullAddress|trim != '' %}
  141.                             {% if hasCoords or hasAddress %}
  142.                                 {% set lat = hasCoords ? (business_contact.locationLatitude|number_format(6, '.', '')) : null %}
  143.                                 {% set lng = hasCoords ? (business_contact.locationLongitude|number_format(6, '.', '')) : null %}
  145.                                 {% set wazeUrl = hasCoords
  146.                                     ? ('https://waze.com/ul?ll=' ~ lat ~ ',' ~ lng ~ '&navigate=yes')
  147.                                     : ('https://waze.com/ul?q=' ~ (fullAddress|url_encode) ~ '&navigate=yes') %}
  149.                                 <td style="vertical-align: top">
  150.                                     <a href="{{ wazeUrl }}" target="_blank" rel="noopener">
  151.                                         <i class="fab fa-waze"></i>
  152.                                     </a>
  153.                                 </td>
  154.                             {% else %}
  155.                                 {# No coords and no address → no Waze link #}
  156.                                 <td></td>
  157.                             {% endif %}
  159.                             {% include 'business_contacts/parts/7 access_count_body.html.twig' %}
  160.                         </tr>
  161.                     {% endfor %}
  163.                 {% endif %}
  164.             {% endfor %}
  165.             </tbody>
  166.         </table>
  167.     </div>
  168. {% endblock %}
  170. {% block datatable %}
  171.     <style>
  172.         /* Keep columns aligned and tidy on desktop */
  173.         .fixed-cols {
  174.             table-layout: fixed;
  175.             width: 100%;
  176.         }
  178.         .fixed-cols th,
  179.         .fixed-cols td {
  180.             white-space: nowrap;
  181.             overflow: hidden;
  182.             text-overflow: ellipsis;
  183.             vertical-align: middle;
  184.         }
  186.         .group-header td {
  187.             background: #f7f7f7;
  188.             font-weight: bold;
  189.             border-top: 2px solid #ddd;
  190.             border-bottom: 2px solid #eee;
  191.         }
  193.         .fixed-cols img {
  194.             max-width: 100%;
  195.             height: auto;
  196.         }
  198.         /* Desktop widths – reduced slightly */
  199.         .company-col,
  200.         .person-col {
  201.             max-width: 180px;
  202.             white-space: nowrap;
  203.             overflow: hidden;
  204.             text-overflow: ellipsis;
  205.         }
  207.         /***************************
  208.          🔹 Mobile optimisation
  209.         ****************************/
  210.         @media (max-width: 768px) {
  212.             .custom-table { font-size: 0.80rem; }
  214.             .custom-table th,
  215.             .custom-table td {
  216.                 padding: 0.28rem 0.30rem;
  217.             }
  219.             /* Let cells wrap so table shrinks naturally */
  220.             .custom-table.fixed-cols td,
  221.             .custom-table.fixed-cols th {
  222.                 white-space: normal !important;
  223.                 overflow: visible !important;
  224.                 text-overflow: clip !important;
  225.             }
  227.             /* Hide desktop heavy columns */
  228.             .custom-table th.desktop,
  229.             .custom-table td.desktop {
  230.                 display: none !important;
  231.             }
  233.             /* Hide Address column entirely on mobile */
  234.             .custom-table th[title="Address"],
  235.             .custom-table td.address-col {
  236.                 display: none !important;
  237.             }
  239.             /* Company Column — slimmed down */
  240.             .custom-table th.company-header {
  241.                 max-width: 70px !important;
  242.                 white-space: nowrap;
  243.                 overflow: hidden;
  244.                 text-overflow: ellipsis;
  245.             }
  247.             /* Improve Waze tap target */
  248.             .custom-table .fa-waze {
  249.                 font-size: 1.1rem;
  250.             }
  251.         }
  252.     </style>
  254.     <script>
  255.         $(document).ready(function () {
  257.             const table = $('.table').DataTable({
  258.                 autoWidth: false,
  259.                 paging: false,
  260.                 searching: false,
  261.                 bInfo: false,
  262.                 ordering: false
  263.             });
  265.             /* Responsive width enforcement */
  266.             function applyMobileColumnWidths() {
  267.                 const isMobile = window.innerWidth <= 768;
  269.                 if (isMobile) {
  270.                     $('.company-col').css({
  271.                         'max-width': '65px',
  272.                         'white-space': 'nowrap',
  273.                         'overflow': 'hidden',
  274.                         'text-overflow': 'ellipsis'
  275.                     });
  277.                     $('.person-col').css({
  278.                         'max-width': '65px',
  279.                         'white-space': 'nowrap',
  280.                         'overflow': 'hidden',
  281.                         'text-overflow': 'ellipsis'
  282.                     });
  284.                 } else {
  285.                     $('.company-col, .person-col').css({
  286.                         'max-width': '180px',
  287.                         'white-space': 'nowrap',
  288.                         'overflow': 'hidden',
  289.                         'text-overflow': 'ellipsis'
  290.                     });
  291.                 }
  292.             }
  294.             applyMobileColumnWidths();
  295.             table.on('draw', applyMobileColumnWidths);
  296.             $(window).on('resize orientationchange', applyMobileColumnWidths);
  297.         });
  298.     </script>
  299. {% endblock datatable %}
  305. {% block additionaljs %}
  306.     <script>
  307.         (function () {
  308.             function applyFilter(type) {
  309.                 const rows = document.querySelectorAll('tr.contact-row');
  310.                 const headers = document.querySelectorAll('tr.group-header');
  312.                 const wanted = (type || '').toString().trim();
  314.                 rows.forEach(tr => {
  315.                     const t = tr.getAttribute('data-type') || '';
  316.                     tr.style.display = (!wanted || t === wanted) ? '' : 'none';
  317.                 });
  319.                 // Show header if it has at least one visible contact beneath it
  320.                 headers.forEach(h => {
  321.                     const t = h.getAttribute('data-type') || '';
  322.                     if (!wanted) {
  323.                         h.style.display = ''; // All
  324.                     } else {
  325.                         // Find the next sibling contact rows until next header
  326.                         let hasVisible = false;
  327.                         let el = h.nextElementSibling;
  328.                         while (el && !el.classList.contains('group-header')) {
  329.                             if (el.classList.contains('contact-row') && el.style.display !== 'none') {
  330.                                 hasVisible = true;
  331.                                 break;
  332.                             }
  333.                             el = el.nextElementSibling;
  334.                         }
  335.                         h.style.display = hasVisible ? '' : 'none';
  336.                     }
  337.                 });
  339.                 // Toggle active classes on buttons and dropdown items
  340.                 document.querySelectorAll('.js-type').forEach(a => {
  341.                     const f = (a.getAttribute('data-filter') || '').trim();
  342.                     if (f === wanted) a.classList.add('active'); else a.classList.remove('active');
  343.                 });
  345.                 // Update dropdown button label on mobile
  346.                 const ddBtn = document.getElementById('businessTypeDropdown');
  347.                 if (ddBtn) {
  348.                     ddBtn.textContent = wanted ? wanted : `All (${rows.length})`;
  349.                 }
  351.                 // Push state to the URL (no reload)
  352.                 const url = new URL(window.location.href);
  353.                 if (wanted) url.searchParams.set('business_type', wanted);
  354.                 else url.searchParams.delete('business_type');
  355.                 window.history.replaceState({}, '', url);
  356.             }
  358.             // Hook up clicks
  359.             document.addEventListener('click', function (e) {
  360.                 const a = e.target.closest('a.js-type');
  361.                 if (!a) return;
  362.                 e.preventDefault();
  363.                 applyFilter(a.getAttribute('data-filter') || '');
  364.             });
  366.             // Apply initial filter from query string on load (so reload/links keep state)
  367.             document.addEventListener('DOMContentLoaded', function () {
  368.                 const url = new URL(window.location.href);
  369.                 applyFilter(url.searchParams.get('business_type') || '');
  370.             });
  371.         })();
  372.     </script>
  376.     <script>
  377.         var businessContactId = '';
  379.         function getLocation(id) {
  380.             businessContactId = id;
  381.             if (navigator.geolocation) {
  382.                 navigator.geolocation.getCurrentPosition(showLocation);
  383.             } else {
  384.                 $('#location').html('Geolocation is not supported by this browser.');
  385.             }
  386.         }
  388.         function showLocation(position) {
  389.             var latitude = position.coords.latitude;
  390.             var longitude = position.coords.longitude;
  391.             $.ajax({
  392.                 type: 'POST',
  393.                 url: 'update/location',
  394.                 data: 'latitude=' + latitude + '&longitude=' + longitude + '&id=' + businessContactId,
  395.                 success: function () {
  396.                     location.reload();
  397.                 }
  398.             });
  399.         }
  401.         $('.action').click(function (e) {
  402.             e.preventDefault();
  403.             let elem = $(this);
  404.             let id = $(this).attr('data-id');
  405.             let action = $(this).attr('data-action');
  406.             let url = '/referrals/new_from_businesscontacts/' + id + '/' + action;
  407.             $.ajax({
  408.                 type: 'GET',
  409.                 url: url,
  410.                 success: function () {
  411.                     let goTo = elem.attr('href');
  412.                     window.open(goTo, '_blank');
  413.                 }
  414.             });
  415.         });
  416.     </script>
  417. {% endblock %}