Merge pull request #237 from gtt-project/fix/unstable-expand-location-for-next

Fix unstable expand location in issues index view for next

Author: dkastl

app/views/issues/index/_map.html.erb

@@ -1,7 +1,7 @@
 <% if @project and @project.module_enabled?(:gtt) %>
   <% collapsed = Setting.plugin_redmine_gtt['default_collapsed_issues_page_map'] == 'true' %>
   <fieldset id="location" class="<%= "collapsible" + (collapsed ? " collapsed" : "") %>">
-    <legend class="<%= "icon " + (collapsed ? "icon-collapsed" : "icon-expended") %>"><%= l(:field_location) %></legend>
+    <legend onclick="toggleFieldset(this);" class="<%= "icon " + (collapsed ? "icon-collapsed" : "icon-expended") %>"><%= l(:field_location) %></legend>
 
     <%= map_tag map: @project.map, geom: (Issue.array_to_geojson(@issues, include_properties: { only: %i(id subject tracker_id status_id) }) if @issues),
       popup: { href: '/issues/[id]' }, collapsed: collapsed, rotation: @project.map_rotation %>

src/components/gtt-client/init/events.ts

@@ -1,7 +1,7 @@
 import { ResizeObserver } from '@juggle/resize-observer';
 
 import { updateFilter } from "../helpers";
-import { zoomToExtent, toggleAndLoadMap } from "../openlayers";
+import { zoomToExtent } from "../openlayers";
 
 /**
  * Initialize event listeners for the GttClient instance.
@@ -36,7 +36,7 @@ function handleCollapsed(this: any): void {
           return;
         }
         const mapDiv = mutation.target as HTMLDivElement;
-        if (mapDiv && mapDiv.style.display === 'block') {
+        if (mapDiv && (mapDiv.style.display === 'block' || mapDiv.style.display === '')) {
           zoomToExtent.call(this, true);
           collapsedObserver.disconnect();
         }
@@ -124,14 +124,6 @@ function handleFilters(this: any): void {
     if (document.querySelectorAll('tr#tr_distance').length > 0) {
       this.filters.distance = true;
     }
-    // Set up click event listener for location filter legend
-    const legend = document.querySelector('fieldset#location legend') as HTMLLegendElement;
-    if (legend) {
-      legend.addEventListener('click', (evt) => {
-        const element = evt.currentTarget as HTMLLegendElement;
-        toggleAndLoadMap(element);
-      });
-    }
     // Call zoomToExtent and updateFilter functions
     zoomToExtent.call(this);
     this.map.on('moveend', updateFilter.bind(this));

src/components/gtt-client/openlayers/index.ts

@@ -476,22 +476,6 @@ export function setGeolocation(currentMap: Map) {
   this.toolbar.addControl(geolocationCtrl)
 }
 
-export function toggleAndLoadMap(el: HTMLLegendElement) {
-  const fieldset = el.parentElement
-  fieldset.classList.toggle('collapsed')
-  el.classList.toggle('icon-expended')
-  el.classList.toggle('icon-collapsed')
-  const div = fieldset.querySelector('div')
-  if (div.style.display === 'none') {
-    div.style.display = 'block'
-  } else {
-    div.style.display = 'none'
-  }
-  this.maps.forEach(function (m: any) {
-    m.updateSize()
-  })
-}
-
 export function setView() {
   const center = fromLonLat([parseFloat(this.defaults.lon), parseFloat(this.defaults.lat)])
   const view = new View({