diff --git a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md new file mode 100644 index 0000000..bb4f782 --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md @@ -0,0 +1,14 @@ +# HRMS Check-in Expert Memory + +## Features + +- [No Position Assignment Page](feature_no_position_page.md) - Implementation for users without organization position assignment + +## Project Issues & Fixes + +- [Position Orientation Change Fix](issue_position_orientation_change_fix.md) - Fix for position map not displaying on screen orientation changes +- [Active Camera Scope](project_active_camera_scope.md) - Current camera issue work should stay in HomeView.vue, not legacy MapView.vue +- [Front Camera Preview Alignment](issue_front_camera_preview_alignment.md) - Keep popup preview orientation aligned with normalized saved photos +- [iOS Native Photo Mirroring](issue_ios_native_photo_mirroring.md) - Do not flip iOS native-capture photos during normalization +- [iOS Native Camera Popup](issue_ios_native_camera_popup_control.md) - Inline-first on iOS; native activates only after inline fails (prior native-first seed was reverted) +- [iOS 16 Inline White Preview](issue_ios16_inline_camera_white_preview.md) - Safari iOS 16 white preview needs single mount plus explicit video readiness diff --git a/.claude/agent-memory/hrms-checkin-expert/feature_no_position_page.md b/.claude/agent-memory/hrms-checkin-expert/feature_no_position_page.md new file mode 100644 index 0000000..c72acc5 --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/feature_no_position_page.md @@ -0,0 +1,68 @@ +--- +name: No Position Assignment Page +description: Feature implementation for users without organization position assignment +type: reference +--- + +## No Position Assignment Page Feature + +When a user doesn't have a position assignment (สังกัด), they are redirected to a dedicated page explaining they are not part of the organization structure. + +### Files Created/Modified + +1. **Created:** `/Users/waruneeta/Desktop/ChamomindWorking/HRMSProject/hrms-checkin/src/views/NoPositionView.vue` + - Displays message in Thai: "ไม่พบข้อมูลสังกัด" + - Shows icon and explanation text + - "ตกลง" (OK) button that shows confirmation dialog + - After confirmation, performs logout and clears positionKeycloak store + +2. **Modified:** `/Users/waruneeta/Desktop/ChamomindWorking/HRMSProject/hrms-checkin/src/router/index.ts` + - Added new route `/no-position` with `Auth: false` + - Enhanced router guard to check for position data + - Redirects to `/no-position` if user has no organization assignment + +3. **Modified:** `/Users/waruneeta/Desktop/ChamomindWorking/HRMSProject/hrms-checkin/src/views/MainView.vue` + - Updated `fetchKeycloakPosition()` function + - Checks if `organization` object exists and has any data + - Redirects to `/no-position` if no organization data found + +### Logic Flow + +1. User logs in successfully +2. `MainView.vue` calls `fetchKeycloakPosition()` in `onMounted()` +3. API returns position data from `/org/profile/keycloak/position` +4. System checks if `organization` object has any non-null values (root, child1-4) +5. If no organization data exists: + - User is redirected to `/no-position` + - User sees message explaining they need to contact staff + - User clicks "ตกลง" to logout + - Staff adds them to organization structure + - User can login again + +### Position Data Structure + +```typescript +interface KeycloakPosition { + privacyCheckin: boolean + avatarName?: string + profileId: string + organization?: Organization +} + +interface Organization { + root?: string + child1?: string + child2?: string + child3?: string + child4?: string +} +``` + +A user is considered to have "no position" when all organization fields (root, child1, child2, child3, child4) are null or undefined. + +### Thai UI Messages + +- Page title: "ไม่พบข้อมูลสังกัด" +- Description: "ท่านยังไม่มีสังกัดในโครงสร้างองค์กร กรุณาติดต่อเจ้าหน้าที่เพื่อดำเนินการเพิ่มข้อมูล" +- Confirmation dialog: "ยืนยันการออกจากระบบ" - "ท่านจะถูกนำออกจากระบบเพื่อให้เจ้าหน้าที่ดำเนินการเพิ่มข้อมูลสังกัดในโครงสร้างองค์กร" +- Button: "ตกลง" diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md b/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md new file mode 100644 index 0000000..f78b23d --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md @@ -0,0 +1,11 @@ +--- +name: front_camera_preview_alignment +description: HomeView inline camera flow should show a non-mirrored preview and keep the saved/uploaded image in the same orientation the user saw while shooting +type: project +--- + +When fixing front-camera capture issues in `HomeView.vue`, keep the in-page preview and the final saved/uploaded image in the same non-mirrored orientation. + +**Why:** Users rejected flows where the live in-page preview looked mirrored or differed from the final image. The expected behavior is “what I see while shooting is what gets used.” + +**How to apply:** In the inline `simple-vue-camera` flow, avoid extra front-camera mirroring in either preview styling or snapshot normalization. Treat the in-page preview as the canonical orientation for `img`/`fileImg`. diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md new file mode 100644 index 0000000..791f98e --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md @@ -0,0 +1,11 @@ +--- +name: ios16-inline-camera-white-preview +description: Safari iOS 16 inline preview can stay white when multiple simple-vue-camera instances mount and playback readiness is assumed too early +type: project +--- + +In `HomeView.vue`, Safari on iOS 16.x can show a white in-page camera preview when more than one `simple-vue-camera` instance is mounted for responsive layouts and the app treats `camera.start()` as sufficient proof that the preview is rendering. + +**Why:** `simple-vue-camera` uses a hard-coded `id="video"` internally and does not explicitly call `video.play()` during `start()`. On mobile/xs, mounting both desktop and mobile camera components at once creates a fragile setup for Safari, where the active preview can remain white even though permission and stream startup succeeded. + +**How to apply:** Keep only the active responsive camera instance mounted in `HomeView.vue`, and after `camera.start()` explicitly prepare/check the underlying video element (`playsinline`, `muted`, `play()`, non-zero dimensions, ready state). If the preview still does not become render-ready, remount once and then fall back to native capture. diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md new file mode 100644 index 0000000..22792d0 --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md @@ -0,0 +1,11 @@ +--- +name: ios_native_camera_popup_control +description: iOS uses inline camera first (same as Android); native fallback triggers only after inline fails. The prior "native-first on iOS" approach was reverted per product requirement. +type: project +--- + +In `HomeView.vue`, the inline camera is **always attempted first** on iOS (and every other platform). The hidden `` is only activated by `switchToNativePhotoCapture()` / `enableNativePhotoCaptureFallback()` after inline capture is proven to fail. + +**Why:** The product requirement is "use inline camera whenever the device supports inline capture; use native device capture only when inline is not supported or fails." iOS Safari supports `getUserMedia` since iOS 14.3, so inline-first is viable. A prior session hard-coded `useNativePhotoCapture = computed(() => isIOSDevice || preferNativePhotoCapture.value)`, bypassing inline on iOS entirely — that line was reverted. + +**How to apply:** `preferNativePhotoCapture` must start `false` on all devices. Never seed it with `isIOSDevice`. All failure paths (`openCamera` permission denied, `camera.start()` throw, invalid snapshot blob, invalid image on submit) already call `switchToNativePhotoCapture()` which sets `preferNativePhotoCapture = true` so subsequent taps go directly to native — covering the first-tap fallback automatically. diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md new file mode 100644 index 0000000..77f33ef --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md @@ -0,0 +1,11 @@ +--- +name: ios_native_photo_mirroring +description: Native photo capture on iOS in HomeView should not be horizontally mirrored during normalization +type: project +--- + +For `HomeView.vue`, native photo capture on iOS should not apply horizontal mirroring during image normalization. + +**Why:** The iOS fallback uses the native still-photo picker, and the returned photo can already be in the correct orientation. Applying the same mirror correction used for other front-camera paths flips the image incorrectly on iOS. + +**How to apply:** Keep platform-specific normalization for native capture. Do not assume the iOS file-input photo path behaves the same as `simple-vue-camera` snapshots or Android fallback capture. diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_position_orientation_change.md b/.claude/agent-memory/hrms-checkin-expert/issue_position_orientation_change.md new file mode 100644 index 0000000..7abffd3 --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/issue_position_orientation_change.md @@ -0,0 +1,48 @@ +--- +name: position_orientation_change_fix +description: Fix for position map not displaying on screen orientation changes +type: 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. diff --git a/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md b/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md new file mode 100644 index 0000000..a10c142 --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md @@ -0,0 +1,11 @@ +--- +name: Active camera investigation scope +description: Current camera issue investigations should focus on HomeView.vue; the legacy Google Map MapView.vue flow is not in active use +type: project +--- + +Current camera issue work should focus on `HomeView.vue`; do not investigate or modify the legacy Google Map `MapView.vue` flow for this issue. + +**Why:** The user clarified that `MapView.vue` is an older Google Map implementation from earlier work and is not the path currently used in production for this check-in flow. + +**How to apply:** For follow-up debugging or fixes related to the current camera/upload issue, scope analysis and implementation to `HomeView.vue` unless the user explicitly re-opens `MapView.vue`. diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh index 17560f4..aacd544 100644 --- a/docker/entrypoint.sh +++ b/docker/entrypoint.sh @@ -12,8 +12,6 @@ do sed -i 's|VITE_URL_SSO|'${VITE_URL_SSO}'|g' $file sed -i 's|VITE_URL_LANDING|'${VITE_URL_LANDING}'|g' $file sed -i 's|VITE_URL_USER|'${VITE_URL_USER}'|g' $file - sed -i 's|VITE_GOOGLE_MAPS_API_KEY|'${VITE_GOOGLE_MAPS_API_KEY}'|g' $file - sed -i 's|VITE_ARCGIS_API_KEY|'${VITE_ARCGIS_API_KEY}'|g' $file done diff --git a/package.json b/package.json index c36ed30..503f2f9 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "quasar": "^2.11.1", "register-service-worker": "^1.7.2", "simple-vue-camera": "^1.1.3", + "socket.io-client": "^4.8.3", "vite-plugin-pwa": "^0.16.7", "vue": "^3.4.15", "vue-router": "^4.1.6", diff --git a/src/App.vue b/src/App.vue index ea76d33..ed177ca 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,64 @@ + + diff --git a/src/api/socket.ts b/src/api/socket.ts new file mode 100644 index 0000000..b018666 --- /dev/null +++ b/src/api/socket.ts @@ -0,0 +1,7 @@ +import env from "./index"; + +const socket = `${env.API_URI}/org-socket`; + +export default { + socket, +}; diff --git a/src/app.config.ts b/src/app.config.ts index c6dbe0c..085d287 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -4,6 +4,7 @@ import leave from '@/api/api.checkin' import history from '@/api/api.history' import message from '@/api/api.message' +import socket from '@/api/socket' const API = { /**leave */ @@ -12,6 +13,7 @@ const API = { ...history, /**message */ ...message, + ...socket, } export default { diff --git a/src/assets/markers/marker-blue.svg b/src/assets/markers/marker-blue.svg new file mode 100644 index 0000000..e617e4c --- /dev/null +++ b/src/assets/markers/marker-blue.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/markers/marker-red.svg b/src/assets/markers/marker-red.svg new file mode 100644 index 0000000..39353ad --- /dev/null +++ b/src/assets/markers/marker-red.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue index 828f81a..bfe0e9c 100644 --- a/src/components/AscGISMap.vue +++ b/src/components/AscGISMap.vue @@ -1,22 +1,44 @@ -
+
@@ -375,4 +711,8 @@ defineExpose({ .expanAS.q-item__section--avatar { min-width: 40px !important; } + +.map-hidden { + visibility: hidden; +} diff --git a/src/components/AscGISMapTime.vue b/src/components/AscGISMapTime.vue index 7360980..1264791 100644 --- a/src/components/AscGISMapTime.vue +++ b/src/components/AscGISMapTime.vue @@ -1,9 +1,8 @@