feat: Allow Trainers to add new Trainees

packages/backend/src/permissions.ts

@@ -87,8 +87,10 @@ export const permissions = shield<unknown, Context>(
       claimTrainee: and(authenticated, trainer),
       unclaimTrainee: and(authenticated, trainer),
 
+      // Trainer and Admin mutations
+      createTrainee: and(authenticated, or(admin, trainer)),
+
       //Admin mutations
-      createTrainee: and(authenticated, admin),
       updateTrainee: and(authenticated, admin),
       createTrainer: and(authenticated, admin),
       updateTrainer: and(authenticated, admin),

packages/frontend/src/graphql/index.tsx

@@ -1065,7 +1065,7 @@ export type SuggestionsDataQuery = { __typename?: 'Query', suggestions: Array<{
 export type TraineePageDataQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type TraineePageDataQuery = { __typename?: 'Query', trainees: Array<{ __typename?: 'Trainee', id: string, firstName: string, lastName: string, course?: string | undefined, startDate?: string | undefined, trainer?: { __typename?: 'Trainer', id: string, firstName: string, lastName: string } | undefined, company: { __typename?: 'Company', id: string, name: string } }>, currentUser?: { __typename?: 'Admin', id: string } | { __typename?: 'Trainee', id: string } | { __typename?: 'Trainer', id: string } | undefined };
+export type TraineePageDataQuery = { __typename?: 'Query', trainees: Array<{ __typename?: 'Trainee', id: string, firstName: string, lastName: string, course?: string | undefined, startDate?: string | undefined, trainer?: { __typename?: 'Trainer', id: string, firstName: string, lastName: string } | undefined, company: { __typename?: 'Company', id: string, name: string } }>, currentUser?: { __typename?: 'Admin', id: string } | { __typename?: 'Trainee', id: string } | { __typename?: 'Trainer', id: string } | undefined, companies?: Array<{ __typename?: 'Company', id: string, name: string }> | undefined };
 
 export type TraineeSettingsDataQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -2604,6 +2604,10 @@ export const TraineePageDataDocument = gql`
   currentUser {
     id
   }
+  companies {
+    id
+    name
+  }
 }
     `;
 export function useTraineePageDataQuery(baseOptions?: Apollo.QueryHookOptions<TraineePageDataQuery, TraineePageDataQueryVariables>) {

packages/frontend/src/graphql/queries/trainee-page-data.gql

@@ -18,4 +18,8 @@ query TraineePageData {
   currentUser {
     id
   }
+  companies {
+    id
+    name
+  }
 }

packages/frontend/src/pages/trainee-page.tsx

@@ -1,22 +1,63 @@
 import React from 'react'
 import { useParams } from 'react-router'
 
-import { H1 } from '@lara/components'
+import { AdminCreateUserLayout, H1, Paragraph } from '@lara/components'
 
 import Loader from '../components/loader'
 import TraineeRow from '../components/trainee-row'
-import { useTraineePageDataQuery } from '../graphql'
+import { useCreateTraineeMutation, useTraineePageDataQuery } from '../graphql'
 import strings from '../locales/localization'
 import { Template } from '../templates/template'
+import { Fab } from '../components/fab'
+import Modal from '../components/modal'
+import { EditTraineeFormData, TraineeForm } from '../components/trainee-form'
+import { useToastContext } from '../hooks/use-toast-context'
+import { GraphQLError } from 'graphql'
 
 const TraineePage: React.FunctionComponent = () => {
   const { trainee } = useParams()
   const { loading, data } = useTraineePageDataQuery()
+  const [mutate] = useCreateTraineeMutation()
+
+  const { addToast } = useToastContext()
+
+  const [showModal, setShowModal] = React.useState(false)
 
   const isActive = (id: string): boolean => {
     return id === trainee
   }
 
+  const createTrainee = async (data: EditTraineeFormData) => {
+    await mutate({
+      variables: { input: data },
+      updateQueries: {
+        TraineePageData: (prevData, { mutationResult }) => {
+          return {
+            ...prevData,
+            trainees: [...prevData.trainees, mutationResult.data?.createTrainee],
+          }
+        },
+      },
+    })
+      .then(() => {
+        addToast({
+          icon: 'PersonNew',
+          title: strings.createTrainee.title,
+          text: strings.formatString(strings.createTrainee.success, `${data?.firstName} ${data?.lastName}`).toString(),
+          type: 'success',
+        })
+
+        setShowModal(false)
+      })
+      .catch((exception: GraphQLError) => {
+        addToast({
+          title: strings.errors.error,
+          text: exception.message,
+          type: 'error',
+        })
+      })
+  }
+
   return (
     <Template type="Main">
       <H1>{strings.navigation.trainees}</H1>
@@ -26,6 +67,30 @@ const TraineePage: React.FunctionComponent = () => {
         data?.trainees.map((trainee, index) => (
           <TraineeRow trainee={trainee} trainerId={data.currentUser?.id} key={index} active={isActive(trainee.id)} />
         ))}
+
+      <Fab icon="Plus" large onClick={() => setShowModal(true)} />
+
+      <Modal large show={showModal} handleClose={() => setShowModal(false)} customClose>
+        <AdminCreateUserLayout
+          headline={<H1 noMargin>{strings.createTrainee.title}</H1>}
+          description={
+            <Paragraph fontSize="copy" color="darkFont">
+              {strings.createTrainee.description}
+            </Paragraph>
+          }
+        >
+          {!loading && data?.companies ? (
+            <TraineeForm
+              blurSubmit={false}
+              companies={data.companies}
+              submit={createTrainee}
+              cancel={() => setShowModal(false)}
+            />
+          ) : (
+            <Loader />
+          )}
+        </AdminCreateUserLayout>
+      </Modal>
     </Template>
   )
 }