hrms-checkin/.claude/agent-memory/hrms-checkin-expert/issue_position_orientation_change.md

name	description	type
position_orientation_change_fix	Fix for position map not displaying on screen orientation changes	project

Issue: Position/Geolocation Not Displaying on Screen Orientation Changes

Problem: The ArcGIS map component (AscGISMap.vue) failed to display or update position when the screen orientation changed between portrait and landscape modes.

Root Cause:

1. The component uses v-if="$q.screen.gt.xs" for conditional rendering of different layouts
2. When orientation changes, the ArcGIS MapView doesn't automatically resize to fit the new container dimensions
3. ArcGIS MapView requires manual resize() call when its container's size changes

Solution Implemented: Added screen resize handling to src/components/AscGISMap.vue:

1. Added state tracking:

   • isMapInitialized ref to track when map is ready
   • isInitializing ref to prevent concurrent initializations

2. Added handleMapResize() function:

   • Checks if mapView exists and isn't destroyed
   • Uses nextTick() to ensure DOM updates complete before resizing
   • Calls mapView.value.resize() to update map dimensions

3. Added watcher on $q.screen.gt.xs:

   • Triggers when screen size crosses the xs breakpoint
   • Waits for DOM update via nextTick()
   • Calls handleMapResize() to adjust map

4. Added window resize event listener:

   • Falls back for orientation changes that might not trigger Quasar's screen watcher
   • Debounced with 300ms timeout to avoid excessive calls
   • Properly cleaned up on component unmount

Files Modified:

• src/components/AscGISMap.vue - Added resize handling logic

Best Practices Applied:

• Proper cleanup of event listeners in onBeforeUnmount
• Debouncing resize events for performance
• Using nextTick() to ensure DOM synchronization
• Checking for destroyed state before calling map methods

Note: The Google Maps component (MapCheckin.vue) was not affected as vue3-google-map handles resize automatically.