Feature: Mobile - Use GraphQL query for search

The-Autists · Aug 12, 2022 · 147c90a · 147c90a
1 parent 5ecce31
commit 147c90a
Show file tree

Hide file tree

Showing 43 changed files with 664 additions and 279 deletions.
diff --git a/.gitignore b/.gitignore
@@ -100,4 +100,7 @@ yarn-error.log
 # Cypress
 .cypress/screenshots/*
 .cypress/videos/*
-.cypress/**/__diff_output__/**
+.cypress/**/__diff_output__/**
+
+# Auto Generated
+schema.graphql
diff --git a/.graphqlrc.json b/.graphqlrc.json
@@ -0,0 +1,16 @@
+{
+  "name": "Zammad GraphQL Schema",
+  "schemaPath": "schema.graphql",
+  "documents": ["./app/frontend/**/fragments/*.graphql"],
+  "extensions": {
+    "endpoints": {
+      "Default GraphQL Endpoint": {
+        "url": "http://localhost:3000/graphql",
+        "headers": {
+          "SkipAuthenticityTokenCheck": "true"
+        },
+        "introspect": true
+      }
+    }
+  }
+}
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,2 @@
-**/graphql/**/*.ts
+**/graphql/**/*.ts
+!**/graphql/**/mocks/*.ts
diff --git a/app/frontend/apps/mobile/components/Organization/OrganizationItem.stories.ts b/app/frontend/apps/mobile/components/Organization/OrganizationItem.stories.ts
@@ -12,6 +12,7 @@ const Template = createTemplate<Props>(OrganizationItem)
 
 const organization = {
   id: '54321',
+  internalId: 2,
   ticketsCount: 2,
   name: 'Lorem Ipsum',
   active: false,
@@ -24,23 +25,19 @@ export const Default = Template.create({
     updatedAt: new Date(2022, 1, 2).toISOString(),
     updatedBy: {
       id: '456',
-      firstname: 'Jane',
-      lastname: 'Doe',
+      fullname: 'Jane Doe',
+    },
+    members: {
+      edges: [
+        {
+          node: { fullname: 'Erik Wise' },
+        },
+        {
+          node: { fullname: 'Peter Smith' },
+        },
+      ],
+      totalCount: 3,
     },
-    members: [
-      {
-        lastname: 'Wise',
-        firstname: 'Erik',
-      },
-      {
-        lastname: 'Smith',
-        firstname: 'Peter',
-      },
-      {
-        lastname: "O'Hara",
-        firstname: 'Nils',
-      },
-    ],
   },
 })
 

diff --git a/app/frontend/apps/mobile/components/Organization/OrganizationItem.vue b/app/frontend/apps/mobile/components/Organization/OrganizationItem.vue
@@ -18,14 +18,14 @@ const users = computed(() => {
   const { members } = props.entity
   if (!members) return ''
 
-  let usersString = members
+  const users = members.edges
+    .map((edge) => edge.node.fullname)
+    .filter((fullname) => fullname && fullname !== '-')
     .slice(0, 2)
-    .map((user) => {
-      return [user.firstname, user.lastname].filter(Boolean).join(' ')
-    })
-    .join(', ')
 
-  const length = members.length - 2
+  let usersString = users.join(', ')
+
+  const length = members.totalCount - users.length
 
   if (length > 0) {
     usersString += `, +${length}`
@@ -36,28 +36,34 @@ const users = computed(() => {
 </script>
 
 <template>
-  <div class="flex">
-    <div class="mt-4 w-12">
+  <div class="flex ltr:pr-3 rtl:pl-3">
+    <div class="mt-4 flex w-14 justify-center">
       <CommonOrganizationAvatar class="bg-gray" :entity="entity" />
     </div>
     <div
-      class="flex flex-1 flex-col border-b border-white/10 py-3 text-gray-100"
+      class="flex flex-1 flex-col overflow-hidden border-b border-white/10 py-3 text-gray-100"
     >
-      <div class="flex">
-        <div>
-          {{
-            entity.ticketsCount === 1
-              ? `1 ${$t('ticket')}`
-              : $t('%s tickets', entity.ticketsCount)
-          }}
-        </div>
-        <div v-if="users" class="px-1">·</div>
-        <div>{{ users }}</div>
-      </div>
-      <div class="mb-1 text-lg font-bold">
+      <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+        {{
+          entity.ticketsCount === 1
+            ? `1 ${$t('ticket')}`
+            : $t('%s tickets', entity.ticketsCount || 0)
+        }}
+        <template v-if="users">
+          ·
+          {{ users }}
+        </template>
+      </span>
+      <span
+        class="mb-1 whitespace-normal text-lg font-bold leading-5 line-clamp-3"
+      >
         <slot> {{ entity.name }} </slot>
-      </div>
-      <div v-if="stringUpdated" data-test-id="stringUpdated" class="text-gray">
+      </span>
+      <div
+        v-if="stringUpdated"
+        data-test-id="stringUpdated"
+        class="overflow-hidden text-ellipsis text-gray"
+      >
         {{ stringUpdated }}
       </div>
     </div>

diff --git a/app/frontend/apps/mobile/components/Organization/__tests__/OrganizationItem.spec.ts b/app/frontend/apps/mobile/components/Organization/__tests__/OrganizationItem.spec.ts
@@ -19,27 +19,24 @@ describe('ticket item display', () => {
     const organization: OrganizationItemData = {
       id: '54321',
       ticketsCount: 2,
+      internalId: 3,
       name: 'lorem ipsum',
       active: true,
-      members: [
-        {
-          lastname: 'Wise',
-          firstname: 'Erik',
-        },
-        {
-          lastname: 'Smith',
-          firstname: 'Peter',
-        },
-        {
-          lastname: "O'Hara",
-          firstname: 'Nils',
-        },
-      ],
+      members: {
+        edges: [
+          {
+            node: { fullname: 'Erik Wise' },
+          },
+          {
+            node: { fullname: 'Peter Smith' },
+          },
+        ],
+        totalCount: 3,
+      },
       updatedAt: new Date(2022, 1, 1, 10, 0, 0, 0).toISOString(),
       updatedBy: {
         id: '456',
-        firstname: 'Jane',
-        lastname: 'Doe',
+        fullname: 'Jane Doe',
       },
     }
 
@@ -51,9 +48,9 @@ describe('ticket item display', () => {
     })
 
     expect(view.getByText('lorem ipsum')).toBeInTheDocument()
-    expect(view.getByText('2 tickets')).toBeInTheDocument()
-    expect(view.getByText('·')).toBeInTheDocument()
-    expect(view.getByText('Erik Wise, Peter Smith, +1')).toBeInTheDocument()
+    expect(view.getByText(/2 tickets/)).toBeInTheDocument()
+    expect(view.getByText(/·/)).toBeInTheDocument()
+    expect(view.getByText(/Erik Wise, Peter Smith, \+1/)).toBeInTheDocument()
 
     expect(
       view.getByText('edited 10 hours ago by Jane Doe'),
@@ -63,6 +60,7 @@ describe('ticket item display', () => {
   it('renders when something is missing', () => {
     const organization: OrganizationItemData = {
       id: '54321',
+      internalId: 2,
       ticketsCount: 1,
       name: 'lorem ipsum',
       active: true,
@@ -76,8 +74,8 @@ describe('ticket item display', () => {
     })
 
     expect(view.getByText('lorem ipsum')).toBeInTheDocument()
-    expect(view.getByText('1 ticket')).toBeInTheDocument()
-    expect(view.queryByIconName('·')).not.toBeInTheDocument()
+    expect(view.getByText(/1 ticket/)).toBeInTheDocument()
+    expect(view.queryByIconName(/·/)).not.toBeInTheDocument()
 
     expect(view.queryByTestId('stringUpdated')).not.toBeInTheDocument()
   })

diff --git a/app/frontend/apps/mobile/components/Organization/types.ts b/app/frontend/apps/mobile/components/Organization/types.ts
@@ -2,17 +2,21 @@
 
 export interface OrganizationItemData {
   id: string
-  ticketsCount: number
+  internalId: number
+  ticketsCount?: number
   members?: {
-    lastname?: Maybe<string>
-    firstname?: Maybe<string>
-  }[]
+    edges: {
+      node: {
+        fullname: string
+      }
+    }[]
+    totalCount: number
+  }
   active: boolean
   name: string
   updatedAt?: string
   updatedBy?: {
     id: string
-    firstname?: Maybe<string>
-    lastname?: Maybe<string>
+    fullname?: Maybe<string>
   }
 }
diff --git a/app/frontend/apps/mobile/components/Ticket/TicketItem.stories.ts b/app/frontend/apps/mobile/components/Ticket/TicketItem.stories.ts
@@ -29,8 +29,7 @@ export const Default = Template.create({
     updatedAt: new Date(2022, 1, 2).toISOString(),
     updatedBy: {
       id: '456',
-      firstname: 'Jane',
-      lastname: 'Doe',
+      fullname: 'Jane Doe',
     },
     priority: {
       name: 'HIGH',

diff --git a/app/frontend/apps/mobile/components/Ticket/TicketItem.vue b/app/frontend/apps/mobile/components/Ticket/TicketItem.vue
@@ -25,10 +25,7 @@ const customer = computed(() => {
 </script>
 
 <template>
-  <CommonLink
-    :link="`/tickets/${entity.internalId}`"
-    class="flex cursor-pointer ltr:pr-3 rtl:pl-3"
-  >
+  <div class="flex cursor-pointer ltr:pr-3 rtl:pl-3">
     <div class="flex w-14 items-center justify-center">
       <!-- TODO label? -->
       <CommonTicketStateIndicator :status="entity.state.name" label="" />
@@ -54,12 +51,12 @@ const customer = computed(() => {
         <div
           v-if="stringUpdated"
           data-test-id="stringUpdated"
-          class="text-gray"
+          class="overflow-hidden text-ellipsis text-gray"
         >
           {{ stringUpdated }}
         </div>
       </div>
       <CommonTicketPriorityIndicator :priority="entity.priority" />
     </div>
-  </CommonLink>
+  </div>
 </template>
diff --git a/app/frontend/apps/mobile/components/Ticket/__tests__/TicketItem.spec.ts b/app/frontend/apps/mobile/components/Ticket/__tests__/TicketItem.spec.ts
@@ -21,15 +21,12 @@ describe('ticket item display', () => {
       state: { name: TicketState.Open },
       title: 'test ticket',
       customer: {
-        firstname: 'John',
-        lastname: 'Doe',
         fullname: 'John Doe',
       },
       updatedAt: new Date(2022, 1, 1, 10, 0, 0, 0).toISOString(),
       updatedBy: {
         id: '456',
-        firstname: 'Jane',
-        lastname: 'Doe',
+        fullname: 'Jane Doe',
       },
       priority: {
         name: 'high',
@@ -81,7 +78,7 @@ describe('ticket item display', () => {
     })
 
     expect(view.getByText('#12345')).toBeInTheDocument()
-    expect(view.queryByText('·')).not.toBeInTheDocument()
+    expect(view.queryByText(/·/)).not.toBeInTheDocument()
     expect(view.getByText('test ticket')).toBeInTheDocument()
 
     expect(view.queryByTestId('stringUpdated')).not.toBeInTheDocument()

diff --git a/app/frontend/apps/mobile/components/Ticket/types.ts b/app/frontend/apps/mobile/components/Ticket/types.ts
@@ -2,7 +2,6 @@
 
 import type { TicketState } from '@shared/entities/ticket/types'
 
-// TODO 2022-05-31 Sheremet V.A. base types on actual usage
 export interface TicketItemData {
   id: string
   internalId: number
@@ -16,19 +15,12 @@ export interface TicketItemData {
     defaultCreate: boolean
     uiColor?: Maybe<string>
   }
-  owner?: {
-    firstname?: Maybe<string>
-    lastname?: Maybe<string>
-  }
   customer?: {
-    firstname?: Maybe<string>
-    lastname?: Maybe<string>
     fullname?: Maybe<string>
   }
   updatedAt?: string
   updatedBy?: {
     id: string
-    firstname?: Maybe<string>
-    lastname?: Maybe<string>
+    fullname?: Maybe<string>
   }
 }
diff --git a/app/frontend/apps/mobile/components/User/UserItem.stories.ts b/app/frontend/apps/mobile/components/User/UserItem.stories.ts
@@ -26,8 +26,7 @@ export const Default = Template.create({
     updatedAt: new Date(2022, 1, 2).toISOString(),
     updatedBy: {
       id: '456',
-      firstname: 'Jane',
-      lastname: 'Doe',
+      fullname: 'Jane Doe',
     },
   },
 })