Mobile open panel & minor fixes (#2363)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

plugins/client-resources/src/connection.ts

@@ -153,7 +153,7 @@ class Connection implements ClientConnection {
         )
       }
       websocket.onerror = (event: any) => {
-        console.log('client websocket error', event)
+        console.log('client websocket error', JSON.stringify(event))
         reject(new Error('websocket error'))
       }
     })

plugins/recruit-resources/src/components/SkillsView.svelte

@@ -6,6 +6,7 @@
   function onTag (tag: TagElement): void {
     selectedTagElements.set([tag._id])
     const loc = getCurrentLocation()
+    loc.path[2] = 'recruit'
     loc.path[3] = 'candidates'
     loc.path.length = 4
     navigate(loc)

plugins/recruit-resources/src/components/VacancyCard.svelte

@@ -88,6 +88,7 @@
           closePopup()
           closePanel()
           const loc = getCurrentLocation()
+          loc.path[2] = 'recruit'
           loc.path[3] = vacancy._id
           loc.path.length = 4
           navigate(loc)

plugins/workbench-resources/src/components/Workbench.svelte

@@ -17,36 +17,36 @@
   import contact, { Employee, EmployeeAccount } from '@hcengineering/contact'
   import core, { Class, Client, Doc, getCurrentAccount, Ref, setCurrentAccount, Space } from '@hcengineering/core'
   import notification, { NotificationStatus } from '@hcengineering/notification'
-  import { NotificationClientImpl, BrowserNotificatator } from '@hcengineering/notification-resources'
+  import { BrowserNotificatator, NotificationClientImpl } from '@hcengineering/notification-resources'
   import { getMetadata, getResource, IntlString } from '@hcengineering/platform'
   import { Avatar, createQuery, setClient } from '@hcengineering/presentation'
   import {
     AnyComponent,
+    areLocationsEqual,
     closePopup,
     closeTooltip,
     Component,
     DatePickerPopup,
+    deviceOptionsStore as deviceInfo,
     getCurrentLocation,
     Label,
     location,
     Location,
-    areLocationsEqual,
     navigate,
     PanelInstance,
     Popup,
+    PopupPosAlignment,
     resizeObserver,
     showPopup,
-    TooltipInstance,
-    PopupPosAlignment,
-    checkMobile,
-    deviceOptionsStore as deviceInfo
+    TooltipInstance
   } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { ActionContext, ActionHandler } from '@hcengineering/view-resources'
   import type { Application, NavigatorModel, SpecialNavModel, ViewConfiguration } from '@hcengineering/workbench'
   import { getContext, onDestroy, onMount, tick } from 'svelte'
-  import { doNavigate } from '../utils'
+  import { subscribeMobile } from '../mobile'
   import workbench from '../plugin'
+  import { doNavigate } from '../utils'
   import AccountPopup from './AccountPopup.svelte'
   import AppItem from './AppItem.svelte'
   import Applications from './Applications.svelte'
@@ -58,6 +58,7 @@
   export let client: Client
   let contentPanel: HTMLElement
 
+  const { setTheme } = getContext('theme') as any
   setClient(client)
   NotificationClientImpl.createClient()
 
@@ -138,9 +139,6 @@
 
   onDestroy(
     location.subscribe(async (loc) => {
-      if (window.nsWebViewBridge !== undefined) {
-        window.nsWebViewBridge.emit('navigate', JSON.stringify(loc))
-      }
       closeTooltip()
       closePopup()
 
@@ -394,34 +392,7 @@
         ? 'account-mobile'
         : 'account'
 
-  onMount(() => {
-    if (checkMobile()) {
-      onmessage = (event: MessageEvent) => {
-        try {
-          const data = JSON.parse(event.data)
-          if (data.action === 'navigate') {
-            const location = getCurrentLocation()
-            location.path.length = 3
-            location.path[2] = data.value.path[0]
-            if (data.value.path[1] !== undefined) {
-              location.path[3] = data.value.path[1]
-            }
-            if (data.value.path[2] !== undefined) {
-              location.path[4] = data.value.path[2]
-            }
-            location.fragment = undefined
-            location.query = undefined
-            navigate(location)
-          } else if (data.action === 'theme') {
-            const { setTheme } = getContext('theme') as any
-            setTheme(`theme-${data.value}`)
-          }
-        } catch (err) {
-          console.log(`Couldn't recognize event ${JSON.stringify(event)}`)
-        }
-      }
-    }
-  })
+  onMount(() => subscribeMobile(setTheme))
 </script>
 
 {#if employee?.active === true}

plugins/workbench-resources/src/mobile.ts

@@ -0,0 +1,81 @@
+//
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import { getCurrentLocation, location, navigate } from '@hcengineering/ui'
+import { onDestroy } from 'svelte'
+
+interface Message {
+  action: 'navigate' | 'theme'
+  value: any
+}
+
+interface ThemeMessage extends Message {
+  action: 'theme'
+  value: string
+}
+
+interface NavigateMessage extends Message {
+  action: 'navigate'
+  value: NavigateMessageValue
+}
+
+interface NavigateMessageValue {
+  path: string[]
+  fragment?: string
+}
+
+interface Bridge {
+  on: (eventName: string, callback: (data: any) => void) => any
+  emit: (eventName: string, data: any) => void
+}
+
+type MobileNSWindow = Window &
+  typeof globalThis & {
+  nsWebViewBridge: Bridge
+}
+
+type SetTheme = (theme: string) => void
+
+export function subscribeMobile (setTheme: SetTheme): void {
+  const webView = window as MobileNSWindow
+  if (webView.nsWebViewBridge !== undefined) {
+    webView.nsWebViewBridge.on('message', (e) => handleMessage(e, setTheme))
+
+    onDestroy(
+      location.subscribe((loc) => {
+        webView.nsWebViewBridge.emit('navigate', JSON.stringify(loc))
+      })
+    )
+  }
+}
+
+function handleMessage (data: ThemeMessage | NavigateMessage, setTheme: SetTheme): void {
+  if (data.action === 'navigate') {
+    const location = getCurrentLocation()
+    location.path.length = 3
+    location.path[2] = data.value.path[0]
+    if (data.value.path[1] !== undefined) {
+      location.path[3] = data.value.path[1]
+    }
+    if (data.value.path[2] !== undefined) {
+      location.path[4] = data.value.path[2]
+    }
+    location.fragment = data.value.fragment
+    location.query = undefined
+    navigate(location)
+  } else if (data.action === 'theme') {
+    setTheme(`theme-${data.value}`)
+  }
+}