add collectors to frontend

libs/api/domains/signature-collection/src/lib/signatureCollection.resolver.ts

@@ -195,8 +195,11 @@ export class SignatureCollectionResolver {
   @Audit()
   async signatureCollectionCollectors(
     @CurrentUser() user: User,
-    @Args('input') input: SignatureCollectionCandidateIdInput,
+    @CurrentSignee() signee: SignatureCollectionSignee,
   ): Promise<SignatureCollectionCollector[]> {
-    return this.signatureCollectionService.collectors(user, input)
+    return this.signatureCollectionService.collectors(
+      user,
+      signee.candidate?.id,
+    )
   }
 }

libs/api/domains/signature-collection/src/lib/signatureCollection.service.ts

@@ -166,11 +166,14 @@ export class SignatureCollectionService {
 
   async collectors(
     user: User,
-    input: SignatureCollectionCandidateIdInput,
+    candidateId: string | undefined,
   ): Promise<SignatureCollectionCollector[]> {
+    if (!candidateId) {
+      return []
+    }
     return await this.signatureCollectionClientService.getCollectors(
       user,
-      input,
+      candidateId,
     )
   }
 }

libs/clients/signature-collection/src/lib/signature-collection.service.ts

@@ -527,7 +527,7 @@ export class SignatureCollectionClientService {
 
   async getCollectors(
     auth: User,
-    { candidateId }: { candidateId: string },
+    candidateId: string,
   ): Promise<{ name: string; nationalId: string }[]> {
     const candidate = await this.getApiWithAuth(
       this.candidateApi,

libs/service-portal/signature-collection/src/hooks/graphql/queries.ts

@@ -163,3 +163,12 @@ export const GetCanSign = gql`
     signatureCollectionCanSignFromPaper(input: $input)
   }
 `
+
+export const GetCollectors = gql`
+  query SignatureCollectionCollectors {
+    signatureCollectionCollectors {
+      nationalId
+      name
+    }
+  }
+`

libs/service-portal/signature-collection/src/hooks/index.ts

@@ -8,6 +8,7 @@ import {
   GetListsForOwner,
   GetCurrentCollection,
   GetCanSign,
+  GetCollectors,
 } from './graphql/queries'
 import {
   SignatureCollectionListBase,
@@ -16,6 +17,7 @@ import {
   SignatureCollectionSuccess,
   SignatureCollection,
   SignatureCollectionSignedList,
+  SignatureCollectionCollector,
 } from '@island.is/api/schema'
 
 export const useGetSignatureList = (listId: string) => {
@@ -169,3 +171,12 @@ export const useGetCanSign = (
   const canSign = getCanSignData?.signatureCollectionCanSignFromPaper ?? false
   return { canSign, loadingCanSign }
 }
+
+export const useGetCollectors = () => {
+  const { data: getCollectorsData, loading: loadingCollectors } =
+    useQuery(GetCollectors)
+  const collectors =
+    (getCollectorsData?.signatureCollectionCollectors as SignatureCollectionCollector[]) ??
+    []
+  return { collectors, loadingCollectors }
+}

libs/service-portal/signature-collection/src/screens/Parliamentary/OwnerView/index.tsx

@@ -20,8 +20,11 @@ import {
   SignatureCollectionList,
   SignatureCollectionSuccess,
 } from '@island.is/api/schema'
-import { OwnerParliamentarySkeleton } from '../../../skeletons'
-import { useGetListsForOwner } from '../../../hooks'
+import {
+  CollectorSkeleton,
+  OwnerParliamentarySkeleton,
+} from '../../../skeletons'
+import { useGetCollectors, useGetListsForOwner } from '../../../hooks'
 import { SignatureCollection } from '@island.is/api/schema'
 import { useMutation } from '@apollo/client'
 import { cancelCollectionMutation } from '../../../hooks/graphql/mutations'
@@ -36,6 +39,7 @@ const OwnerView = ({
   const { formatMessage } = useLocale()
   const { listsForOwner, loadingOwnerLists, refetchListsForOwner } =
     useGetListsForOwner(currentCollection?.id || '')
+  const { collectors, loadingCollectors } = useGetCollectors()
 
   const [cancelCollection] = useMutation<SignatureCollectionSuccess>(
     cancelCollectionMutation,
@@ -180,8 +184,18 @@ const OwnerView = ({
           </T.Head>
           <T.Body>
             <T.Row>
-              <T.Data width={'40%'}>{'Nafni Nafnason'}</T.Data>
-              <T.Data>{'010130-3019'}</T.Data>
+              {loadingCollectors ? (
+                <T.Data colSpan={2}>
+                  <CollectorSkeleton></CollectorSkeleton>
+                </T.Data>
+              ) : (
+                collectors.map((collector) => (
+                  <>
+                    <T.Data width={'40%'}>{collector.name}</T.Data>
+                    <T.Data>{collector.nationalId}</T.Data>
+                  </>
+                ))
+              )}
             </T.Row>
           </T.Body>
         </T.Table>

libs/service-portal/signature-collection/src/skeletons.tsx

@@ -21,3 +21,9 @@ export const SkeletonTable = () => {
     </Box>
   )
 }
+
+export const CollectorSkeleton = () => {
+  return (
+    <SkeletonLoader height={50} borderRadius="large" repeat={2} space={1} />
+  )
+}