Created enums for category, impact and diff. Updated new Ticket post DTO

client/src/components/Modals/NewTicketModal.tsx

@@ -1,11 +1,21 @@
 import React, { FC, useState, FormEvent } from "react";
 import { useRouteMatch } from "react-router-dom";
-import { TextField, MenuItem } from "@material-ui/core";
+import {
+  TextField,
+  MenuItem,
+  Grid,
+  makeStyles,
+  Theme,
+  createStyles,
+} from "@material-ui/core";
 import { Modal } from "./Modal";
 import { Ticket } from "../../types/Ticket";
 import { Project } from "../../types/Project";
 import { post } from "../../utils/http";
 import { Constants } from "../../utils/Constants";
+import Category from "../../types/enums/category";
+import Impact from "../../types/enums/impact";
+import Difficulty from "../../types/enums/difficulty";
 
 interface IProps {
   show: boolean;
@@ -13,6 +23,12 @@ interface IProps {
   allProjects: Project[];
 }
 
+const useStyles = makeStyles((theme: Theme) => ({
+  select: {
+    width: 120,
+  },
+}));
+
 export const NewTicketModal: FC<IProps> = ({
   show,
   handleClose,
@@ -25,6 +41,9 @@ export const NewTicketModal: FC<IProps> = ({
   const { url } = useRouteMatch();
   const id = url.split("/")[2];
   const [projectId, setProjectId] = useState(id);
+  const [categoryID, setCategoryID] = useState(0);
+  const [impactID, setImpactID] = useState(0);
+  const [difficultyID, setDifficultyID] = useState(0);
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
@@ -32,8 +51,11 @@ export const NewTicketModal: FC<IProps> = ({
       title: title,
       description: description,
       endingDate: new Date(endingDate).toISOString(),
-      creatorId: "20bf4b2a-7209-4826-96cd-29c2bc937a94",
+      creatorId: "20bf4b2a-7209-4826-96cd-29c2bc937a94", // get current User id
       projectId: parseInt(projectId),
+      impact: impactID,
+      difficulty: difficultyID,
+      category: categoryID,
     };
 
     // const response: HttpResponse<Ticket> =
@@ -41,6 +63,7 @@ export const NewTicketModal: FC<IProps> = ({
     handleClose();
   };
 
+  const classes = useStyles();
   return (
     <Modal
       name="New Ticket"
@@ -49,80 +72,143 @@ export const NewTicketModal: FC<IProps> = ({
       action="New Ticket"
       handleAction={handleSubmit}
     >
-      <div className="row">
+      <TextField
-        <TextField
+        variant="outlined"
-          variant="outlined"
+        margin="normal"
-          margin="normal"
+        required
-          required
+        fullWidth
-          fullWidth
+        id="title"
-          id="title"
+        value={title}
-          value={title}
+        label="Title"
-          label="Title"
+        name="text"
-          name="text"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          setTitle(e.target.value)
-            setTitle(e.target.value)
+        }
-          }
+        autoFocus
-          autoFocus
+      />
-        />
 
-        <TextField
+      <TextField
-          variant="outlined"
+        variant="outlined"
-          margin="normal"
+        margin="normal"
-          required
+        required
-          fullWidth
+        fullWidth
-          id="description"
+        id="description"
-          value={description}
+        value={description}
-          label="Description"
+        label="Description"
-          name="text"
+        name="text"
-          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-            setDescription(e.target.value)
+          setDescription(e.target.value)
-          }
+        }
-          multiline
+        multiline
-        />
+      />
 
+      <TextField
+        id="project"
+        name="project"
+        select
+        fullWidth
+        required
+        label="Project"
+        value={projectId}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          e.preventDefault();
+          setProjectId(e.target.value);
+        }}
+        // helperText="Please select your currency"
+        variant="outlined"
+        margin="normal"
+      >
+        {allProjects.map((p) => (
+          <MenuItem key={p.id} value={p.id}>
+            {p.title}
+          </MenuItem>
+        ))}
+      </TextField>
+
+      <TextField
+        id="date"
+        name="date"
+        label="Due Date"
+        type="date"
+        margin="normal"
+        fullWidth
+        // defaultValue={new Date().toISOString()}
+        // className={classes.textField}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        variant="outlined"
+        required
+        value={endingDate}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          setEndingDate(e.target.value)
+        }
+      />
+
+      <Grid container justify="space-between">
         <TextField
-          id="project"
+          id="category"
-          name="project"
+          name="category"
           select
-          fullWidth
+          label="Category"
-          required
+          value={categoryID}
-          label="Project"
-          value={projectId}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             e.preventDefault();
-            setProjectId(e.target.value);
+            setCategoryID(parseInt(e.target.value));
           }}
-          // helperText="Please select your currency"
           variant="outlined"
           margin="normal"
+          className={classes.select}
         >
-          {allProjects.map((p) => (
+          {Category.map((c: string, i: number) => (
-            <MenuItem key={p.id} value={p.id}>
+            <MenuItem key={i} value={i}>
-              {p.title}
+              {c}
             </MenuItem>
           ))}
         </TextField>
 
         <TextField
-          id="date"
+          className={classes.select}
-          name="date"
+          id="impact"
-          label="Due Date"
+          name="impact"
-          type="date"
+          select
-          margin="normal"
+          label="Impact"
-          fullWidth
+          value={impactID}
-          // defaultValue={new Date().toISOString()}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-          // className={classes.textField}
+            e.preventDefault();
-          InputLabelProps={{
+            setImpactID(parseInt(e.target.value));
-            shrink: true,
           }}
           variant="outlined"
-          required
+          margin="normal"
-          value={endingDate}
+        >
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          {Impact.map((c: string, i: number) => (
-            setEndingDate(e.target.value)
+            <MenuItem key={i} value={i}>
-          }
+              {c}
-        />
+            </MenuItem>
-      </div>
+          ))}
+        </TextField>
+
+        <TextField
+          className={classes.select}
+          id="difficulty"
+          name="difficulty"
+          select
+          label="Difficulty"
+          value={difficultyID}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            e.preventDefault();
+            setDifficultyID(parseInt(e.target.value));
+          }}
+          variant="outlined"
+          margin="normal"
+        >
+          {Difficulty.map((c: string, i: number) => (
+            <MenuItem key={i} value={i}>
+              {c}
+            </MenuItem>
+          ))}
+        </TextField>
+      </Grid>
     </Modal>
   );
 };

client/src/types/enums/category.ts

@@ -0,0 +1,3 @@
+const Category: string[] = ["Product", "Tech", "Design", "Marketing", "Test"];
+
+export default Category;

client/src/types/enums/difficulty.ts

@@ -0,0 +1,3 @@
+const Difficulty: string[] = ["Easy", "Medium", "Hard"];
+
+export default Difficulty;

client/src/types/enums/impact.ts

@@ -0,0 +1,3 @@
+const Impact: string[] = ["High", "Medium", "Low"];
+
+export default Impact;