Maintenance: Mobile - Move app-specific code into shared context when…

… it makes sense

app/frontend/apps/mobile/components/CommonStepper/CommonStepper.story.vue

@@ -2,11 +2,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import type { FormStep } from '#shared/components/Form/types.ts'
 import CommonStepper from './CommonStepper.vue'
-import type { CommonStepperStep } from './types.ts'
 
 const modelValue = ref('step1')
-const steps: Record<string, CommonStepperStep> = {
+const steps: Record<string, FormStep> = {
   step1: {
     label: '1',
     order: 1,

app/frontend/apps/mobile/components/CommonStepper/CommonStepper.vue

@@ -2,12 +2,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { CommonStepperStep as Step } from './types.ts'
+import type { FormStep } from '#shared/components/Form/types.ts'
 import CommonStepperStep from './CommonStepperStep.vue'
 
 interface Props {
   modelValue: string
-  steps: Record<string, Step>
+  steps: Record<string, FormStep>
 }
 
 const props = defineProps<Props>()

app/frontend/apps/mobile/components/CommonStepper/__tests__/CommonStepper.spec.ts

@@ -1,14 +1,14 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
 import { renderComponent } from '#tests/support/components/index.ts'
+import type { FormStep } from '#shared/components/Form/types.ts'
 import { ref } from 'vue'
 import CommonStepper from '../CommonStepper.vue'
-import type { CommonStepperStep } from '../types.ts'
 
 describe('stepper component', () => {
   test('renders valid steps', async () => {
     const modelValue = ref('step1')
-    const steps: Record<string, CommonStepperStep> = {
+    const steps: Record<string, FormStep> = {
       step1: {
         label: '1',
         order: 1,

app/frontend/apps/mobile/pages/error/views/Error.vue

@@ -3,7 +3,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import CommonBackButton from '#mobile/components/CommonBackButton/CommonBackButton.vue'
-import { errorOptions } from '#mobile/router/error.ts'
+import { errorOptions } from '#shared/router/error.ts'
 import { ErrorStatusCodes } from '#shared/types/error.ts'
 
 const errorImage = computed(() => {

app/frontend/apps/mobile/pages/ticket/views/TicketCreate.vue

@@ -35,7 +35,7 @@ import { populateEditorNewLines } from '#shared/components/Form/fields/FieldEdit
 import CommonStepper from '#mobile/components/CommonStepper/CommonStepper.vue'
 import CommonButton from '#mobile/components/CommonButton/CommonButton.vue'
 import CommonBackButton from '#mobile/components/CommonBackButton/CommonBackButton.vue'
-import { errorOptions } from '#mobile/router/error.ts'
+import { errorOptions } from '#shared/router/error.ts'
 import { useConfirmationDialog } from '#mobile/components/CommonConfirmation/useConfirmationDialog.ts'
 import {
   useTicketDuplicateDetectionHandler,

app/frontend/apps/mobile/router/index.ts

@@ -4,8 +4,8 @@ import type { App } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import mainInitializeRouter from '#shared/router/index.ts'
 import type { InitializeAppRouter, RoutesModule } from '#shared/types/router.ts'
+import { errorAfterGuard } from '#shared/router/error.ts'
 import transitionViewGuard from './guards/before/viewTransition.ts'
-import { errorAfterGuard } from './error.ts'
 
 const routeModules: Record<string, RoutesModule> = import.meta.glob(
   ['../pages/*/routes.ts', '../pages/*/routes/*.ts'],

app/frontend/shared/components/Form/types.ts

@@ -234,3 +234,12 @@ export interface FormRef {
     groupNode?: FormKitNode,
   ): void
 }
+
+export interface FormStep {
+  label: string
+  order: number
+  errorCount: number
+  valid: boolean
+  disabled: boolean
+  completed: boolean
+}

app/frontend/shared/components/Form/useMultiStepForm.ts

@@ -4,7 +4,7 @@ import { createMessage, getNode } from '@formkit/core'
 import type { FormKitNode } from '@formkit/core'
 import { computed, toRef, ref, reactive, watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
-import type { CommonStepperStep } from '#mobile/components/CommonStepper/index.ts'
+import type { FormStep } from './types.ts'
 
 interface InternalMultiFormSteps {
   label: string
@@ -95,8 +95,8 @@ export const useMultiStepForm = (
     return false
   }
 
-  const allSteps = computed<Record<string, CommonStepperStep>>(() => {
-    const mappedSteps: Record<string, CommonStepperStep> = {}
+  const allSteps = computed<Record<string, FormStep>>(() => {
+    const mappedSteps: Record<string, FormStep> = {}
 
     stepNames.value.forEach((stepName) => {
       const alreadyVisisted = visitedSteps.value.includes(stepName)

app/frontend/shared/errors/useErrorHandler.ts

@@ -1,6 +1,6 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
-import { redirectToError } from '#mobile/router/error.ts'
+import { redirectToError } from '#shared/router/error.ts'
 import type { GraphQLHandlerError } from '#shared/types/error.ts'
 import { ErrorStatusCodes, GraphQLErrorTypes } from '#shared/types/error.ts'
 import { useRouter } from 'vue-router'

app/frontend/shared/i18n/__tests__/i18n.spec.ts

@@ -1,63 +1,85 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
-import { nextTick } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { renderComponent } from '#tests/support/components/index.ts'
 import { i18n } from '#shared/i18n.ts'
-import CommonSectionMenu from '#mobile/components/CommonSectionMenu/CommonSectionMenu.vue' // TODO: switch to shared component example
+
+const Example = defineComponent({
+  name: 'Example',
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => ({ i18n }),
+  template: '<div>{{ i18n.t(text) }}</div>',
+})
+
+const populateTranslationMap = () => {
+  const map = new Map([
+    ['yes', 'ja'],
+    ['Hello world!', 'Hallo Welt!'],
+    ['The second component.', 'Die zweite Komponente.'],
+    [
+      'String with 3 placeholders: %s %s %s',
+      'Zeichenkette mit 3 Platzhaltern: %s %s %s',
+    ],
+    ['FORMAT_DATE', 'dd/mm/yyyy'],
+    ['FORMAT_DATETIME', 'dd/mm/yyyy HH:MM:SS'],
+  ])
+
+  i18n.setTranslationMap(map)
+}
 
 describe('i18n', () => {
+  afterEach(() => {
+    i18n.setTranslationMap(new Map())
+  })
+
   it('starts with empty state', () => {
     expect(i18n.t('unknown string')).toBe('unknown string')
     expect(i18n.t('yes')).toBe('yes')
   })
 
-  it('translates known strings', () => {
-    const map = new Map([
-      ['yes', 'ja'],
-      ['Hello world!', 'Hallo Welt!'],
-      ['The second component.', 'Die zweite Komponente.'],
-      [
-        'String with 3 placeholders: %s %s %s',
-        'Zeichenkette mit 3 Platzhaltern: %s %s %s',
-      ],
-      ['FORMAT_DATE', 'dd/mm/yyyy'],
-      ['FORMAT_DATETIME', 'dd/mm/yyyy HH:MM:SS'],
-    ])
+  describe('i18n populated', () => {
+    beforeEach(() => {
+      populateTranslationMap()
+    })
 
-    i18n.setTranslationMap(map)
-    expect(i18n.t('yes')).toBe('ja')
-  })
-  it('handles placeholders correctly', () => {
-    // No arguments.
-    expect(i18n.t('String with 3 placeholders: %s %s %s')).toBe(
-      'Zeichenkette mit 3 Platzhaltern: %s %s %s',
-    )
-  })
+    it('translates known strings', () => {
+      expect(i18n.t('yes')).toBe('ja')
+    })
 
-  it('translates dates', () => {
-    expect(i18n.date('2021-04-09T10:11:12Z')).toBe('09/04/2021')
-    expect(i18n.dateTime('2021-04-09T10:11:12Z')).toBe('09/04/2021 10:11:12')
-    expect(i18n.relativeDateTime(new Date().toISOString())).toBe('just now')
-  })
+    it('handles placeholders correctly', () => {
+      // No arguments.
+      expect(i18n.t('String with 3 placeholders: %s %s %s')).toBe(
+        'Zeichenkette mit 3 Platzhaltern: %s %s %s',
+      )
+    })
 
-  it('updates (reactive) translations automatically', async () => {
-    const { container } = renderComponent(CommonSectionMenu, {
-      props: {
-        headerLabel: 'Hello world!',
-      },
-      slots: {
-        default: 'Example Content',
-      },
-      global: {
-        mocks: {
-          i18n,
-        },
-      },
+    it('translates dates', () => {
+      expect(i18n.date('2021-04-09T10:11:12Z')).toBe('09/04/2021')
+      expect(i18n.dateTime('2021-04-09T10:11:12Z')).toBe('09/04/2021 10:11:12')
+      expect(i18n.relativeDateTime(new Date().toISOString())).toBe('just now')
     })
 
-    expect(container).toHaveTextContent('Hallo Welt!')
-    i18n.setTranslationMap(new Map())
-    await nextTick()
-    expect(container).toHaveTextContent('Hello world!')
+    it('updates (reactive) translations automatically', async () => {
+      const { container } = renderComponent(Example, {
+        props: {
+          text: 'Hello world!',
+        },
+        global: {
+          mocks: {
+            i18n,
+          },
+        },
+      })
+
+      expect(container).toHaveTextContent('Hallo Welt!')
+      i18n.setTranslationMap(new Map())
+      await nextTick()
+      expect(container).toHaveTextContent('Hello world!')
+    })
   })
 })

app/frontend/shared/router/guards/before/__tests__/permission.spec.ts

@@ -1,7 +1,7 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
 import { createPinia, setActivePinia } from 'pinia'
-import { errorOptions } from '#mobile/router/error.ts'
+import { errorOptions } from '#shared/router/error.ts'
 import type { RouteLocationNormalized } from 'vue-router'
 import { useAuthenticationStore } from '#shared/stores/authentication.ts'
 import { useSessionStore } from '#shared/stores/session.ts'

app/frontend/shared/router/guards/before/permission.ts

@@ -9,7 +9,7 @@ import log from '#shared/utils/log.ts'
 import { useAuthenticationStore } from '#shared/stores/authentication.ts'
 import { useSessionStore } from '#shared/stores/session.ts'
 import { ErrorStatusCodes } from '#shared/types/error.ts'
-import { errorOptions } from '#mobile/router/error.ts'
+import { errorOptions } from '../../error.ts'
 
 const permissionGuard: NavigationGuard = (
   to: RouteLocationNormalized,

i18n/zammad.pot

@@ -7909,7 +7909,7 @@ msgstr ""
 #: app/assets/javascripts/app/controllers/_profile/out_of_office.coffee
 #: app/assets/javascripts/app/controllers/knowledge_base/agent_controller.coffee
 #: app/assets/javascripts/app/controllers/ticket_zoom.coffee
-#: app/frontend/apps/mobile/router/error.ts
+#: app/frontend/shared/router/error.ts
 #: app/helpers/knowledge_base_public_page_title_helper.rb
 msgid "Not Found"
 msgstr ""
@@ -13414,7 +13414,7 @@ msgstr ""
 msgid "We're sorry, but something went wrong. Received message: %s"
 msgstr ""
 
-#: app/frontend/apps/mobile/router/error.ts
+#: app/frontend/shared/router/error.ts
 msgid "We're sorry, but this page doesn't exist."
 msgstr ""