Merge pull request #2646 from Northeastern-Electric-Racing/2157-work-package-templates---createedit-form

#2157 work package templates createedit form

Author: walker-sean

src/backend/src/services/work-package-template.services.ts

@@ -43,7 +43,7 @@ export default class WorkPackageTemplatesService {
       throw new AccessDeniedGuestException('get a work package template');
     }
 
-    const template = await prisma.work_Package_Template.findFirst({
+    const template = await prisma.work_Package_Template.findUnique({
       where: {
         workPackageTemplateId
       },

src/frontend/src/apis/transformers/work-package-templates.transformer.ts

@@ -0,0 +1,22 @@
+/*
+ * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
+ * See the LICENSE file in the repository root folder for details.
+ */
+
+import { WorkPackageTemplate } from 'shared';
+import { descriptionBulletTransformer } from './projects.transformers';
+
+/**
+ * Transforms a work package template to ensure deep field transformation of date objects.
+ *
+ * @param workPackageTemplate Incoming work package object supplied by the HTTP response.
+ * @returns Properly transformed work package template object.
+ */
+export const workPackageTemplateTransformer = (workPackageTemplate: WorkPackageTemplate): WorkPackageTemplate => {
+  return {
+    ...workPackageTemplate,
+    dateCreated: new Date(workPackageTemplate.dateCreated),
+    dateDeleted: workPackageTemplate.dateDeleted ? new Date(workPackageTemplate.dateDeleted) : undefined,
+    descriptionBullets: workPackageTemplate.descriptionBullets.map(descriptionBulletTransformer)
+  };
+};

src/frontend/src/apis/work-packages.api.ts

@@ -8,6 +8,7 @@ import { DescriptionBulletPreview, WbsNumber, WorkPackage, WorkPackageStage, Wor
 import { wbsPipe } from '../utils/pipes';
 import { apiUrls } from '../utils/urls';
 import { workPackageTransformer } from './transformers/work-packages.transformers';
+import { workPackageTemplateTransformer } from './transformers/work-package-templates.transformer';
 
 export interface WorkPackageApiInputs {
   name: string;
@@ -132,7 +133,7 @@ export const slackUpcomingDeadlines = (deadline: Date) => {
  */
 export const getAllWorkPackageTemplates = () => {
   return axios.get<WorkPackageTemplate[]>(apiUrls.workPackageTemplates(), {
-    transformResponse: (data) => JSON.parse(data)
+    transformResponse: (data) => JSON.parse(data).map(workPackageTemplateTransformer)
   });
 };
 
@@ -151,7 +152,7 @@ export const deleteWorkPackageTemplate = (workPackageTemplateId: string) => {
  */
 export const getSingleWorkPackageTemplate = (workPackageTemplateId: string) => {
   return axios.get<WorkPackageTemplate>(apiUrls.workPackageTemplatesById(workPackageTemplateId), {
-    transformResponse: (data) => JSON.parse(data)
+    transformResponse: (data) => workPackageTemplateTransformer(JSON.parse(data))
   });
 };
 

src/frontend/src/hooks/work-packages.hooks.ts

@@ -184,7 +184,7 @@ export const useDeleteWorkPackageTemplate = () => {
  * Custom React Hook to get a single workpackage template
  */
 export const useSingleWorkPackageTemplate = (workPackageTemplateId: string) => {
-  return useQuery<WorkPackageTemplate, Error>(['work package templates'], async () => {
+  return useQuery<WorkPackageTemplate, Error>(['work package templates', workPackageTemplateId], async () => {
     const { data } = await getSingleWorkPackageTemplate(workPackageTemplateId);
     return data;
   });

src/frontend/src/pages/AdminToolsPage/AdminTools.tsx

@@ -4,6 +4,8 @@ import { useAuth } from '../../hooks/auth.hooks';
 import { routes } from '../../utils/routes';
 import AdminToolsPage from './AdminToolsPage';
 import { canAccessAdminTools } from '../../utils/users';
+import CreateWorkPackageTemplate from '../WorkPackageTemplateForm/CreateWorkPackageTemplate';
+import EditWorkPackageTemplate from '../WorkPackageTemplateForm/EditWorkPackageTemplate';
 
 const AdminTools: React.FC = () => {
   const auth = useAuth();
@@ -22,6 +24,8 @@ const AdminTools: React.FC = () => {
 
   return (
     <Switch>
+      <Route path={routes.WORK_PACKAGE_TEMPLATE_NEW} component={CreateWorkPackageTemplate} />
+      <Route path={routes.WORK_PACKAGE_TEMPLATE_EDIT} component={EditWorkPackageTemplate} />
       <Route path={routes.ADMIN_TOOLS} component={AdminToolsPage} />
     </Switch>
   );

src/frontend/src/pages/AdminToolsPage/ProjectsConfig/WorkPackageTemplateTable.tsx

@@ -5,14 +5,18 @@ import { isAdmin } from 'shared/src/permission-utils';
 import { useCurrentUser } from '../../../hooks/users.hooks';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ErrorPage from '../../ErrorPage';
-import { useAllWorkPackageTemplates, useDeleteWorkPackageTemplate } from '../../../hooks/work-packages.hooks';
+import { WorkPackageTemplate } from 'shared';
+import { routes } from '../../../utils/routes';
 import { Delete } from '@mui/icons-material';
+import { useAllWorkPackageTemplates, useDeleteWorkPackageTemplate } from '../../../hooks/work-packages.hooks';
+import { useHistory } from 'react-router-dom';
 import { useState } from 'react';
 import NERModal from '../../../components/NERModal';
-import { WorkPackageTemplate } from 'shared';
 
 const WorkPackageTemplateTable = () => {
   const currentUser = useCurrentUser();
+  const history = useHistory();
+
   const {
     data: workPackageTemplates,
     isLoading: workPackageTemplatesIsLoading,
@@ -28,26 +32,37 @@ const WorkPackageTemplateTable = () => {
   if (workPackageTemplatesIsError) return <ErrorPage message={workPackageTemplatesError.message} />;
 
   const workPackageTemplateRows = workPackageTemplates.map((workPackageTemplate) => (
-    <TableRow>
+    <TableRow
+      key={workPackageTemplate.workPackageTemplateId}
+      onClick={() => history.push(`${routes.WORK_PACKAGE_TEMPLATE_EDIT}?id=${workPackageTemplate.workPackageTemplateId}`)}
+      sx={{ cursor: 'pointer' }}
+    >
       <TableCell align="left" sx={{ border: '2px solid black' }}>
         {workPackageTemplate.templateName}
       </TableCell>
       <TableCell sx={{ border: '2px solid black', verticalAlign: 'middle' }}>{workPackageTemplate.templateNotes}</TableCell>
       <TableCell align="center" sx={{ border: '2px solid black', verticalAlign: 'middle' }}>
-        <IconButton onClick={() => setTemplateToDelete(workPackageTemplate)}>
+        <IconButton
+          onClick={(event) => {
+            event.stopPropagation();
+            setTemplateToDelete(workPackageTemplate);
+          }}
+        >
           <Delete />
         </IconButton>
       </TableCell>
     </TableRow>
   ));
 
   return (
-    <>
-      <Box>
-        <AdminToolTable columns={[{ name: 'Name' }, { name: 'Description' }, { name: '' }]} rows={workPackageTemplateRows} />
-        <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
-          {isAdmin(currentUser.role) && <NERButton variant="contained">New Work Package Template</NERButton>}
-        </Box>
+    <Box>
+      <AdminToolTable columns={[{ name: 'Name' }, { name: 'Description' }]} rows={workPackageTemplateRows} />
+      <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
+        {isAdmin(currentUser.role) && (
+          <NERButton variant="contained" size="small" onClick={() => history.push(routes.WORK_PACKAGE_TEMPLATE_NEW)}>
+            New Work Package Template
+          </NERButton>
+        )}
       </Box>
       <NERModal
         open={!!templateToDelete}
@@ -68,7 +83,7 @@ const WorkPackageTemplateTable = () => {
         </Typography>
         <Typography fontWeight="bold">This action cannot be undone!</Typography>
       </NERModal>
-    </>
+    </Box>
   );
 };
 

src/frontend/src/pages/WorkPackageTemplateForm/CreateWorkPackageTemplate.tsx

@@ -0,0 +1,10 @@
+import { useCreateSingleWorkPackageTemplate } from '../../hooks/work-packages.hooks';
+import WorkPackageTemplateForm from './WorkPackageTemplateForm';
+
+const CreateWorkPackageTemplate: React.FC = () => {
+  const { mutateAsync: createWorkPackageTemplateScopeCR } = useCreateSingleWorkPackageTemplate();
+
+  return <WorkPackageTemplateForm workPackageTemplateMutateAsync={createWorkPackageTemplateScopeCR} />;
+};
+
+export default CreateWorkPackageTemplate;

src/frontend/src/pages/WorkPackageTemplateForm/EditWorkPackageTemplate.tsx

@@ -0,0 +1,40 @@
+import { useEditWorkPackageTemplate, useSingleWorkPackageTemplate } from '../../hooks/work-packages.hooks';
+import WorkPackageTemplateForm from './WorkPackageTemplateForm';
+import { useQuery } from '../../hooks/utils.hooks';
+import { WorkPackageTemplateFormViewPayload as WorkPackageTemplateFormInputs } from './WorkPackageTemplateFormView';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import ErrorPage from '../ErrorPage';
+
+const EditWorkPackageTemplate: React.FC = () => {
+  const query = useQuery();
+
+  const workPackageTemplateId = query.get('id');
+
+  const { mutateAsync: editWorkPackageTemplate } = useEditWorkPackageTemplate(workPackageTemplateId!);
+
+  const { data: workPackageTemplate, isLoading, isError, error } = useSingleWorkPackageTemplate(workPackageTemplateId!);
+
+  if (!workPackageTemplate || isLoading) return <LoadingIndicator />;
+
+  if (isError) return <ErrorPage message={error.message} />;
+
+  const defaultValues: WorkPackageTemplateFormInputs = {
+    ...workPackageTemplate,
+    stage: workPackageTemplate?.stage ?? 'NONE',
+    blockedBy:
+      workPackageTemplate?.blockedBy.map((wp) => ({
+        id: wp.workPackageTemplateId,
+        label: `${wp.templateName}`
+      })) || []
+  };
+
+  return (
+    <WorkPackageTemplateForm
+      workPackageTemplateId={workPackageTemplateId!}
+      workPackageTemplateMutateAsync={editWorkPackageTemplate}
+      defaultValues={defaultValues}
+    />
+  );
+};
+
+export default EditWorkPackageTemplate;

src/frontend/src/pages/WorkPackageTemplateForm/WorkPackageTemplateForm.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import ErrorPage from '../ErrorPage';
+import { useAllWorkPackageTemplates } from '../../hooks/projects.hooks';
+import { WorkPackageTemplateApiInputs } from '../../apis/work-packages.api';
+import WorkPackageTemplateFormView, { WorkPackageTemplateFormViewPayload } from './WorkPackageTemplateFormView';
+import { useHistory } from 'react-router-dom';
+import * as yup from 'yup';
+
+interface WorkPackageTemplateFormProps {
+  workPackageTemplateId?: string;
+  workPackageTemplateMutateAsync: (data: WorkPackageTemplateApiInputs) => void;
+  defaultValues?: WorkPackageTemplateFormViewPayload;
+}
+
+const WorkPackageTemplateForm: React.FC<WorkPackageTemplateFormProps> = ({
+  workPackageTemplateId,
+  workPackageTemplateMutateAsync,
+  defaultValues
+}) => {
+  const { data: workPackageTemplates, isError: wpIsError, error: wpError } = useAllWorkPackageTemplates();
+
+  const history = useHistory();
+
+  const schema = yup.object().shape({
+    workPackageName: yup.string().optional(),
+    stage: yup.string().required('Stage is required'),
+    duration: yup.number().optional(),
+    templateName: yup.string().required('Template Name is required'),
+    templateNotes: yup.string(),
+    blockedBy: yup.array(),
+    descriptionBullets: yup.array()
+  });
+
+  if (wpIsError) return <ErrorPage message={wpError.message} />;
+
+  const blockedByOptions =
+    workPackageTemplates
+      ?.filter((wp) => wp.workPackageTemplateId !== workPackageTemplateId)
+      .map((wp) => ({
+        id: wp.workPackageTemplateId,
+        label: `${wp.templateName}`
+      })) || [];
+
+  return (
+    <WorkPackageTemplateFormView
+      exitActiveMode={() => history.goBack()}
+      workPackageTemplateMutateAsync={workPackageTemplateMutateAsync}
+      defaultValues={defaultValues}
+      blockedByOptions={blockedByOptions}
+      schema={schema}
+    />
+  );
+};
+
+export default WorkPackageTemplateForm;

src/frontend/src/pages/WorkPackageTemplateForm/WorkPackageTemplateFormDetails.tsx

@@ -0,0 +1,100 @@
+/*
+ * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
+ * See the LICENSE file in the repository root folder for details.
+ */
+
+import { WorkPackageStage } from 'shared';
+import { FormControl, FormLabel, Grid, MenuItem, TextField, Typography } from '@mui/material';
+import { Control, Controller, FieldErrorsImpl } from 'react-hook-form';
+import { Box } from '@mui/system';
+import ReactHookTextField from '../../components/ReactHookTextField';
+import { WorkPackageTemplateFormViewPayload } from './WorkPackageTemplateFormView';
+
+interface Props {
+  control: Control<WorkPackageTemplateFormViewPayload>;
+  errors: Partial<FieldErrorsImpl<WorkPackageTemplateFormViewPayload>>;
+}
+
+const WorkPackageTemplateFormDetails: React.FC<Props> = ({ control, errors }) => {
+  const StageSelect = () => (
+    <FormControl fullWidth>
+      <FormLabel>Work Package Stage</FormLabel>
+      <Controller
+        name="stage"
+        control={control}
+        render={({ field: { onChange, value } }) => (
+          <TextField select onChange={onChange} value={value} fullWidth>
+            <MenuItem value={'NONE'}>NONE</MenuItem>
+            {Object.values(WorkPackageStage).map((stage) => (
+              <MenuItem key={stage} value={stage}>
+                {stage}
+              </MenuItem>
+            ))}
+          </TextField>
+        )}
+      />
+    </FormControl>
+  );
+
+  return (
+    <Box>
+      <Typography variant="h5" sx={{ marginBottom: '10px', color: 'white' }}>
+        Work Package Details
+      </Typography>
+      <Grid container rowSpacing={2} spacing={1} xs={12}>
+        <Grid item xs={12} md={4}>
+          <FormControl fullWidth>
+            <FormLabel>Work Package Name</FormLabel>
+            <ReactHookTextField
+              name="workPackageName"
+              required={false}
+              control={control}
+              placeholder="Enter work package name..."
+              errorMessage={errors.workPackageName}
+            />
+          </FormControl>
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <StageSelect />
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <FormControl fullWidth>
+            <FormLabel>Duration</FormLabel>
+            <ReactHookTextField
+              name="duration"
+              required={false}
+              control={control}
+              type="number"
+              placeholder="Enter duration..."
+              errorMessage={errors.duration}
+            />
+          </FormControl>
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <FormControl fullWidth>
+            <FormLabel>Template Name</FormLabel>
+            <ReactHookTextField
+              name="templateName"
+              control={control}
+              placeholder="Enter template name..."
+              errorMessage={errors.templateName}
+            />
+          </FormControl>
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <FormControl fullWidth>
+            <FormLabel>Template Notes</FormLabel>
+            <ReactHookTextField
+              name="templateNotes"
+              control={control}
+              placeholder="Enter notes..."
+              errorMessage={errors.templateNotes}
+            />
+          </FormControl>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default WorkPackageTemplateFormDetails;