Feature: Mobile - Added online notification functionality.

Co-authored-by: Dominik Klein <[email protected]>

app/frontend/apps/mobile/components/layout/LayoutBottomNavigation.vue

@@ -3,10 +3,12 @@
 import CommonUserAvatar from '@shared/components/CommonUserAvatar/CommonUserAvatar.vue'
 import { useSessionStore } from '@shared/stores/session'
 import { storeToRefs } from 'pinia'
+import { useOnlineNotificationCount } from '@shared/entities/online-notification/composables/useOnlineNotificationCount'
 import { useCustomLayout } from './useCustomLayout'
 
 const { user } = storeToRefs(useSessionStore())
 const { isCustomLayout } = useCustomLayout()
+const { unseenCount } = useOnlineNotificationCount()
 </script>
 
 <template>
@@ -23,10 +25,12 @@ const { isCustomLayout } = useCustomLayout()
       >
         <CommonIcon name="home" size="small" />
       </CommonLink>
+      <!-- TODO: instead of read icon, we need a number like in Figma -->
       <CommonLink
         link="/notifications"
         exact-active-class="text-blue"
         class="flex flex-1 justify-center"
+        :class="{ 'text-red': unseenCount > 0 }"
       >
         <CommonIcon name="bell" size="medium" />
       </CommonLink>

app/frontend/apps/mobile/components/layout/__tests__/LayoutBottomNavigation.spec.ts

@@ -1,11 +1,16 @@
 // Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
 
+import { OnlineNotificationsCountDocument } from '@shared/entities/online-notification/graphql/subscriptions/onlineNotificationsCount.api'
 import { useSessionStore } from '@shared/stores/session'
 import type { UserData } from '@shared/types/store'
 import { renderComponent } from '@tests/support/components'
+import { mockGraphQLSubscription } from '@tests/support/mock-graphql-api'
 import { flushPromises } from '@vue/test-utils'
 import LayoutBottomNavigation from '../LayoutBottomNavigation.vue'
 
+// TODO: Add correct notification count test case, when real count output exists.
+mockGraphQLSubscription(OnlineNotificationsCountDocument)
+
 describe('bottom navigation in layout', () => {
   it('renders navigation', async () => {
     const view = renderComponent(LayoutBottomNavigation, {

app/frontend/apps/mobile/composables/useEditedBy.ts

@@ -1,5 +1,6 @@
 // Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
 
+import { userDisplayName } from '@shared/entities/user/utils/getUserDisplayName'
 import { i18n } from '@shared/i18n'
 import { useSessionStore } from '@shared/stores/session'
 import type { Ref } from 'vue'
@@ -22,10 +23,8 @@ export const useEditedBy = (entity: Ref<Entity>) => {
   const author = computed(() => {
     const { updatedBy } = entity.value
     if (!updatedBy) return ''
-    return (
-      updatedBy.fullname ||
-      [updatedBy.firstname, updatedBy.lastname].filter(Boolean).join(' ')
-    )
+
+    return userDisplayName(updatedBy)
   })
 
   const date = computed(() => {

app/frontend/apps/mobile/entities/ticket/stores/ticketOverviews.ts

@@ -25,12 +25,9 @@ export const useTicketOverviewsStore = defineStore('ticketOverviews', () => {
   const overviews = computed(() => {
     if (!overviewsRaw.value?.ticketOverviews.edges) return []
 
-    return (
-      overviewsRaw.value.ticketOverviews.edges
-        .filter((overview) => overview?.node?.id)
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        .map((edge) => edge!.node!)
-    )
+    return overviewsRaw.value.ticketOverviews.edges
+      .filter((overview) => overview?.node?.id)
+      .map((edge) => edge.node)
   })
 
   const overviewsByKey = computed(() => keyBy(overviews.value, 'id'))