feat(all): permissions added, navlink problems solved delete button works, traineepage passes trainee in the vars to deleteaction

Author: thegreenmilecomposer

packages/backend/src/permissions.ts

@@ -86,8 +86,8 @@ export const permissions = shield<unknown, Context>(
       // Trainer mutations
       claimTrainee: and(authenticated, trainer),
       unclaimTrainee: and(authenticated, trainer),
-      trainerMarkUserForDeletion: and(authenticated, admin),
-      trainerUnMarkUserForDeletion: and(authenticated, admin),
+      trainerMarkUserForDeletion: and(authenticated, trainer),
+      trainerUnMarkUserForDeletion: and(authenticated, trainer),
 
       // Trainer and Admin mutations
       createTrainee: and(authenticated, or(admin, trainer)),

packages/backend/src/resolvers/trainer.resolver.ts

@@ -8,8 +8,8 @@ import { updateUser, userById } from '../repositories/user.repo'
 import { alexaSkillLinked } from '../services/alexa.service'
 import { createT } from '../i18n'
 import { addMonths } from 'date-fns'
-import { isTrainee } from 'src/permissions'
-import { sendDeletionMail } from 'src/services/email.service'
+import { isTrainee } from '../permissions'
+import { sendDeletionMail } from '../services/email.service'
 
 export const trainerResolver: GqlResolvers<TrainerContext> = {
   Trainer: {

packages/components/src/edit-user.tsx

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react'
+import React, { JSX, ReactNode } from 'react'
 import styled from 'styled-components'
 
 import { Container } from './container'
@@ -7,7 +7,7 @@ import { UnstyledLink } from './unstyled-link'
 
 type EditUserLayoutProps = {
   backButton: JSX.Element
-  content: JSX.Element
+  content?: ReactNode
   actions: JSX.Element
 }
 

packages/frontend/src/components/renderDeleteAction.tsx

@@ -10,7 +10,7 @@ import {
 interface UseDeleteActionsProps {
   //id = routesId
   id: string | undefined
-  currentUserId: string
+  currentUserId: string | undefined
 }
 
 interface MutationVariables {
@@ -41,7 +41,6 @@ export const useDeleteActions = ({ currentUserId, id }: UseDeleteActionsProps) =
   }
 
   const selectQueryForType = (vars: MutationVariables) => {
-    //Trainer
     if (isTrainer) {
       unmarkDeleteTrainer(vars)
     } else if (isAdmin) {

packages/frontend/src/components/trainee-row.tsx

@@ -16,24 +16,13 @@ import {
   StyledWrapper,
   Flex,
   Box,
-  EditUserLayout,
 } from '@lara/components'
 
-import {
-  Company,
-  Trainee,
-  Trainer,
-  useClaimTraineeMutation,
-  useUnclaimTraineeMutation,
-  useUserPageQuery,
-} from '../graphql'
+import { Company, Trainee, Trainer, useClaimTraineeMutation, useUnclaimTraineeMutation } from '../graphql'
 import strings from '../locales/localization'
 import Avatar from './avatar'
 import Badge from './badge'
 import Loader from './loader'
-import { useDeleteActions } from './renderDeleteAction'
-import { DeletionModal } from './DeletionModal'
-import NavigationButtonLink from './navigation-button-link'
 interface TraineeRowProps {
   active?: boolean
   trainee: Pick<Trainee, 'startDate' | 'id' | 'firstName' | 'lastName' | 'course'> & {
@@ -64,16 +53,6 @@ const TraineeRow: React.FunctionComponent<TraineeRowProps> = (props) => {
   const [unclaimTrainee] = useUnclaimTraineeMutation()
   const [loading, setLoading] = React.useState(false)
 
-  console.log(loading, 'loading')
-  const id = '1234'
-  const vars = { variables: { id: id ?? '' } }
-  const { data, loading: pagequeryloading } = useUserPageQuery(vars)
-  console.log(id, 'id', props.trainerId, 'trainerid prop')
-  const { renderDeleteAction, showDeletionModal, toggleDeletionModal, markForDeleteTrainer } = useDeleteActions({
-    currentUserId: props.trainerId ?? '',
-    id: id,
-  })
-
   const claim = async () => {
     setLoading(true)
 
@@ -98,8 +77,8 @@ const TraineeRow: React.FunctionComponent<TraineeRowProps> = (props) => {
     setLoading(false)
   }
 
-  console.log(data?.getUser?.deleteAt, 'deleteAt')
   const { active, trainee, trainerId } = props
+
   const headerDestination = active ? '/trainees/' : `/trainees/${trainee.id}`
   return (
     <StyledWrapper>
@@ -109,29 +88,6 @@ const TraineeRow: React.FunctionComponent<TraineeRowProps> = (props) => {
           <StyledName>
             {trainee.firstName} {trainee.lastName} TEST
           </StyledName>
-          {!pagequeryloading && data?.companies && data?.getUser?.__typename === 'Trainee' && (
-            <EditUserLayout
-              backButton={
-                <NavigationButtonLink
-                  label={strings.back}
-                  to="/trainees"
-                  icon="ChevronLeft"
-                  isLeft
-                  iconColor="iconLightGrey"
-                />
-              }
-              content={<div>Inhalt kommt hier</div>}
-              actions={renderDeleteAction(data?.getUser?.deleteAt)}
-            />
-          )}
-          {!loading && (
-            <DeletionModal
-              show={showDeletionModal}
-              onClose={toggleDeletionModal}
-              onConfirm={() => markForDeleteTrainer(vars)}
-              userName={`${trainee?.firstName} ${trainee?.lastName}`}
-            />
-          )}
           <StyledCourse>{trainee.course}</StyledCourse>
         </StyledHeader>
         <StyledControls>

packages/frontend/src/pages/admin-edit-user-page.tsx

@@ -26,23 +26,17 @@ export const AdminEditUserPage: React.FunctionComponent = () => {
   const vars = { variables: { id: id ?? '' } }
   const { data, loading } = useUserPageQuery(vars)
 
-  console.log(id, 'useparams', 'curuser', data?.currentUser?.id)
-
   const { renderDeleteAction, showDeletionModal, toggleDeletionModal, markForDeleteAdmin } = useDeleteActions({
     currentUserId: data?.currentUser?.id ?? '',
     id: id ?? '',
   })
-  //1234= Trainee aus url,  useparams curuser 789= admin
 
   const currentUser = data?.currentUser
   if (!currentUser) return null
 
-  console.log(data?.getUser?.deleteAt, 'deleteAt adminpage')
-
   return (
     <Template type="Main">
       {loading && <Loader />}
-
       {/* Edit Trainee page */}
       {!loading && data?.companies && data?.getUser?.__typename === 'Trainee' && (
         <EditUserLayout

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

@@ -1,22 +1,27 @@
 import React from 'react'
 import { useParams } from 'react-router'
 
-import { AdminCreateUserLayout, H1, Paragraph } from '@lara/components'
+import { AdminCreateUserLayout, EditUserLayout, H1, Paragraph } from '@lara/components'
 
 import Loader from '../components/loader'
 import TraineeRow from '../components/trainee-row'
-import { useCreateTraineeMutation, useTraineePageDataQuery } from '../graphql'
+import { useCreateTraineeMutation, useTraineePageDataQuery, useUserPageQuery } 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'
+import { DeletionModal } from '../components/DeletionModal'
+import NavigationButtonLink from '../components/navigation-button-link'
+import { useDeleteActions } from '../components/renderDeleteAction'
 
 const TraineePage: React.FunctionComponent = () => {
   const { trainee } = useParams()
   const { loading, data } = useTraineePageDataQuery()
+  const vars = { variables: { id: trainee ?? '' } }
+  const { data: dataPageQuery, loading: pagequeryloading } = useUserPageQuery(vars)
   const [mutate] = useCreateTraineeMutation()
   const { addToast } = useToastContext()
   const [showModal, setShowModal] = React.useState(false)
@@ -25,6 +30,11 @@ const TraineePage: React.FunctionComponent = () => {
     return id === trainee
   }
 
+  const { renderDeleteAction, showDeletionModal, toggleDeletionModal, markForDeleteTrainer } = useDeleteActions({
+    currentUserId: dataPageQuery?.currentUser?.id,
+    id: trainee,
+  })
+
   const createTrainee = async (data: EditTraineeFormData) => {
     await mutate({
       variables: { input: data },
@@ -55,16 +65,41 @@ const TraineePage: React.FunctionComponent = () => {
         })
       })
   }
-
+  const activeTrainee = data?.trainees.find((t) => isActive(t.id))
   return (
     <Template type="Main">
-      <H1>TEST</H1>
       {loading && <Loader />}
 
       {!loading &&
         data?.trainees.map((trainee, index) => (
           <TraineeRow trainee={trainee} trainerId={data.currentUser?.id} key={index} active={isActive(trainee.id)} />
         ))}
+      {activeTrainee && (
+        <div>
+          {!pagequeryloading && dataPageQuery?.companies && dataPageQuery?.getUser?.__typename === 'Trainee' && (
+            <EditUserLayout
+              backButton={
+                <NavigationButtonLink
+                  label={strings.back}
+                  to="/trainees"
+                  icon="ChevronLeft"
+                  isLeft
+                  iconColor="iconLightGrey"
+                />
+              }
+              actions={renderDeleteAction(dataPageQuery?.getUser?.deleteAt)}
+            />
+          )}
+          {!loading && (
+            <DeletionModal
+              show={showDeletionModal}
+              onClose={toggleDeletionModal}
+              onConfirm={() => markForDeleteTrainer(vars)}
+              userName={`${activeTrainee?.firstName} ${activeTrainee?.lastName}`}
+            />
+          )}
+        </div>
+      )}
 
       <Fab icon="Plus" large onClick={() => setShowModal(true)} />