Merge pull request #904 from nowcommunity/admin-can-add-new-person

Admin can add new person

Author: TatuLaras

backend/src/routes/person.ts

@@ -41,11 +41,9 @@ router.put(
   '/',
   async (req: Request<object, object, { person: EditDataType<PersonDetailsType> & EditMetaData }>, res) => {
     const { ...editedPerson } = req.body.person
-
     if (!editedPerson.initials) {
       return res.status(403).send({ error: 'Missing initials, creating new persons is not yet implemented' })
     }
-
     /* Access checking happens differently for this route, since we want to allow users to modify their own data */
     if (!req.user)
       return res.status(401).send({

backend/src/services/write/person.ts

@@ -1,19 +1,32 @@
 import { EditDataType, PersonDetailsType } from '../../../../frontend/src/shared/types'
 import Prisma from '../../../prisma/generated/now_test_client'
 import { nowDb, getFieldsOfTables } from '../../utils/db'
+import { getPersonDetails } from '../person'
 import { filterAllowedKeys } from './writeOperations/utils'
 
 export const writePerson = async (person: EditDataType<PersonDetailsType>) => {
   const allowedColumns = getFieldsOfTables(['com_people'])
   const filteredPerson = filterAllowedKeys(person, allowedColumns) as Prisma.com_people
   let personId: string
 
-  if (!filteredPerson.initials) {
-    throw new Error('Missing initials, creating new persons is not yet implemented')
+  const isPerson = await getPersonDetails(filteredPerson.initials)
+
+  if (!isPerson) {
+    const newPerson = await nowDb.com_people.create({
+      data: { ...filteredPerson, full_name: `${filteredPerson.first_name} ${filteredPerson.surname}` },
+    })
+    personId = newPerson.initials
   } else {
     await nowDb.com_people.update({
       where: { initials: person.initials },
-      data: { ...filteredPerson, full_name: `${filteredPerson.first_name} ${filteredPerson.surname}` },
+      data: {
+        first_name: filteredPerson.first_name,
+        surname: filteredPerson.surname,
+        email: filteredPerson.email,
+        organization: filteredPerson.organization,
+        country: filteredPerson.country,
+        full_name: `${filteredPerson.first_name} ${filteredPerson.surname}`,
+      },
     })
     personId = filteredPerson.initials
   }

frontend/src/components/DetailView/common/defaultValues.ts

@@ -5,7 +5,9 @@ import {
   SpeciesDetailsType,
   TimeBoundDetailsType,
   TimeUnitDetailsType,
+  PersonDetailsType,
 } from '@/shared/types'
+
 import { MRT_PaginationState } from 'material-react-table'
 
 export const emptyLocality = {
@@ -246,5 +248,14 @@ export const emptyRegion = {
   now_reg_coord_country: [],
 } as unknown as RegionDetails
 
+export const emptyPerson = {
+  initials: '',
+  first_name: '',
+  surname: '',
+  email: '',
+  organization: '',
+  country: '',
+} as unknown as PersonDetailsType
+
 export const defaultPagination: MRT_PaginationState = { pageIndex: 0, pageSize: 15 }
 export const defaultPaginationSmall: MRT_PaginationState = { pageIndex: 0, pageSize: 10 }

frontend/src/components/Person/PersonDetails.tsx

@@ -1,5 +1,9 @@
 import { useParams, useNavigate } from 'react-router-dom'
-import { useEditPersonMutation, useGetPersonDetailsQuery } from '../../redux/personReducer'
+import {
+  useEditPersonMutation,
+  useGetPersonDetailsIdMutation,
+  useGetPersonDetailsQuery,
+} from '../../redux/personReducer'
 import { CircularProgress } from '@mui/material'
 import { DetailView, TabType } from '../DetailView/DetailView'
 import { PersonTab } from './Tabs/PersonTab'
@@ -8,6 +12,7 @@ import { EditDataType, PersonDetailsType, Role, ValidationErrors } from '@/share
 import { validatePerson } from '@/shared/validators/person'
 import { useNotify } from '@/hooks/notification'
 import { useEffect } from 'react'
+import { emptyPerson } from '../DetailView/common/defaultValues'
 
 export const PersonDetails = () => {
   const { id: idFromUrl } = useParams()
@@ -21,8 +26,10 @@ export const PersonDetails = () => {
   // We designate special id 'user-page' instead of normal initials to mean current user's own page.
   const isUserPage = idFromUrl === 'user-page'
   const id = isUserPage ? user.initials : idFromUrl
+  const isNew = idFromUrl === 'new'
 
-  const { isLoading, isError, data } = useGetPersonDetailsQuery(id!)
+  const { isLoading, isError, data } = useGetPersonDetailsQuery(id!, { skip: isNew })
+  const [getPersonDetailsId] = useGetPersonDetailsIdMutation()
 
   useEffect(() => {
     if (!isUserPage && user.role !== Role.Admin) {
@@ -32,8 +39,23 @@ export const PersonDetails = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const personExists = async (initials: string) => {
+    try {
+      const isPerson = await getPersonDetailsId(initials).unwrap()
+      if (isPerson) return true
+      return false
+    } catch {
+      return false
+    }
+  }
+
   const onWrite = async (editData: EditDataType<PersonDetailsType>) => {
+    if (!editData.initials) return
     try {
+      if (isNew && (await personExists(editData.initials))) {
+        notify('Initials already exists. Select Edit.', 'error')
+        return
+      }
       const { initials } = await editPersonRequest(editData).unwrap()
       notify('Saved person successfully.')
       if (isUserPage) {
@@ -48,9 +70,9 @@ export const PersonDetails = () => {
   }
 
   if (isError) return <div>Error loading data</div>
-  if (isLoading || !data || mutationLoading) return <CircularProgress />
+  if (isLoading || (!data && !isNew) || mutationLoading) return <CircularProgress />
 
-  document.title = `User - ${data.user?.user_name}`
+  document.title = isNew ? 'New person' : `User - ${data!.user?.user_name}`
 
   const tabs: TabType[] = [
     {
@@ -62,10 +84,11 @@ export const PersonDetails = () => {
   return (
     <DetailView
       onWrite={onWrite}
+      isNew={isNew}
       isUserPage={isUserPage}
       isPersonPage={true}
       tabs={tabs}
-      data={data}
+      data={isNew ? emptyPerson : data!}
       validator={validatePerson}
     />
   )

frontend/src/components/Person/Tabs/PersonTab.tsx

@@ -8,13 +8,16 @@ import { Box, Button } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { useNotify } from '@/hooks/notification'
 import { validCountries } from '@/shared/validators/countryList'
+import { useParams } from 'react-router-dom'
 import PersonAddIcon from '@mui/icons-material/PersonAdd'
 import { AddUserModal } from './AddUserModal'
 
 export const PersonTab = () => {
-  const { textField, dropdownWithSearch, data } = useDetailContext<PersonDetailsType>()
+  const { textField, dropdownWithSearch, data, mode } = useDetailContext<PersonDetailsType>()
   const currentUser = useUser()
   const notify = useNotify()
+  const { id: idFromUrl } = useParams()
+  const isNew = idFromUrl === 'new'
   const isAdmin = currentUser.role == Role.Admin
   const [isAddUserModalOpen, setIsAddUserModalOpen] = useState(false)
   const [disableAddUserButton, setDisableAddUserButton] = useState(false)
@@ -29,7 +32,7 @@ export const PersonTab = () => {
   const countryOptions = ['', ...validCountries]
 
   const person = [
-    ['Initials', textField('initials', { type: 'text', disabled: true })],
+    ['Initials', textField('initials', { type: 'text', disabled: !isNew })],
     ['First Name', textField('first_name')],
     ['Surname', textField('surname')],
     ['Email', textField('email')],
@@ -57,7 +60,7 @@ export const PersonTab = () => {
       <ArrayFrame array={person} title="Person" />
       {data.user && <ArrayFrame array={user} title="User" />}
 
-      {isAdmin && !data.user && !disableAddUserButton && (
+      {isAdmin && !data.user && !disableAddUserButton && mode.option === 'read' && (
         <Button
           variant="contained"
           startIcon={<PersonAddIcon />}

frontend/src/redux/personReducer.ts

@@ -15,6 +15,11 @@ const personsApi = api.injectEndpoints({
       }),
       providesTags: result => (result ? [{ type: 'person', id: result.initials }] : []),
     }),
+    getPersonDetailsId: builder.mutation<PersonDetailsType, string>({
+      query: id => ({
+        url: `/person/${id}`,
+      }),
+    }),
     editPerson: builder.mutation<PersonDetailsType, EditDataType<PersonDetailsType>>({
       query: person => ({
         url: `/person`,
@@ -26,4 +31,5 @@ const personsApi = api.injectEndpoints({
   }),
 })
 
-export const { useGetAllPersonsQuery, useGetPersonDetailsQuery, useEditPersonMutation } = personsApi
+export const { useGetAllPersonsQuery, useGetPersonDetailsQuery, useEditPersonMutation, useGetPersonDetailsIdMutation } =
+  personsApi

frontend/src/shared/types/data.ts

@@ -337,6 +337,15 @@ export type RegionDetails = Prisma.now_reg_coord & { now_reg_coord_people: Array
   now_reg_coord_country: Array<RegionCountry>
 }
 
+export type PersonDetails = {
+  initials: string | null
+  first_name: string | null
+  surname: string | null
+  email: string | null
+  organization: string | null
+  country: string | null
+}
+
 // used in Region's CoordinatorTab to allow adding com_people field to the editData manually
 export type RegionDetailsWithComPeople = Prisma.now_reg_coord & {
   now_reg_coord_people: Array<RegionCoordinator & { com_people?: Prisma.com_people }>

frontend/src/shared/validators/person.ts

@@ -9,22 +9,37 @@ export const validatePerson = (
     initials: {
       name: 'initials',
       required: true,
+      asString: true,
+      minLength: 2,
+      maxLength: 8,
     },
     first_name: {
       name: 'First Name',
       required: true,
+      asString: true,
+      minLength: 2,
+      maxLength: 20,
     },
     surname: {
       name: 'Surname',
       required: true,
+      asString: true,
+      minLength: 2,
+      maxLength: 20,
     },
     email: {
       name: 'Email',
       required: true,
+      asString: true,
+      minLength: 5,
+      maxLength: 30,
     },
     organization: {
       name: 'Organization',
       required: true,
+      asString: true,
+      minLength: 2,
+      maxLength: 30,
     },
     country: {
       name: 'Country',