[UI] updated New Ticket Modal

client/src/components/Modals/Modal.tsx

@@ -47,7 +47,7 @@ export const Modal: FC<IProps> = ({
   const classes = useStyles();
 
   return (
-    <Dialog open={show} onClose={handleClose}>
+    <Dialog open={show} onClose={handleClose} maxWidth="md" fullWidth>
       <DialogTitle disableTypography className={classes.root}>
         <Typography variant="h6">{name}</Typography>
         {handleClose ? (

client/src/components/Modals/NewTicketModal.tsx

@@ -6,21 +6,7 @@ import { Ticket } from "../../types/Ticket";
 import { Project } from "../../types/Project";
 import { post } from "../../utils/http";
 import { Constants } from "../../utils/Constants";
-import {
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  TextField,
-  DialogActions,
-  Button,
-  Typography,
-  IconButton,
-  Theme,
-  createStyles,
-  makeStyles,
-} from "@material-ui/core";
-import MuiDialogTitle from "@material-ui/core/DialogTitle";
-import MuiDialogContent from "@material-ui/core/DialogContent";
+import { TextField, MenuItem } from "@material-ui/core";
 
 interface IProps {
   show: boolean;
@@ -64,44 +50,75 @@ export const NewTicketModal: FC<IProps> = ({
       action="New Ticket"
       handleAction={handleSubmit}
     >
-      <div className="row valign-wrapper indigo">
-        {/* <div className="col s10">
-          <h4 className="white-text">New Ticket</h4>
-        </div> */}
+      {/* <form onSubmit={handleSubmit}> */}
+      <div className="row">
+        <TextField
+          variant="outlined"
+          margin="normal"
+          required
+          fullWidth
+          id="title"
+          value={title}
+          label="Title"
+          name="text"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setTitle(e.target.value)
+          }
+          autoFocus
+        />
 
-        <div className="col s2">
-          <i
-            className="right material-icons indigo lighten-3 circle"
-            onClick={handleClose}
-          >
-            close
-          </i>
-        </div>
+        <TextField
+          variant="outlined"
+          margin="normal"
+          required
+          fullWidth
+          id="description"
+          value={description}
+          label="Description"
+          name="text"
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+            setDescription(e.target.value)
+          }
+          multiline
+        />
+
+        <TextField
+          id="date"
+          label="Due Date"
+          type="date"
+          // defaultValue={new Date().toISOString()}
+          // className={classes.textField}
+          InputLabelProps={{
+            shrink: true,
+          }}
+          variant="outlined"
+          required
+          value={endingDate}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setEndingDate(e.target.value)
+          }
+        />
+
+        <TextField
+          id="project"
+          select
+          label="Project"
+          value={projectId}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            e.preventDefault();
+            setProjectId(e.target.value);
+          }}
+          // helperText="Please select your currency"
+          variant="outlined"
+        >
+          {allProjects.map((p) => (
+            <MenuItem key={p.id} value={p.id}>
+              {p.title}
+            </MenuItem>
+          ))}
+        </TextField>
       </div>
-
-      <form onSubmit={handleSubmit}>
-        <div className="row">
-          <NewTicketForm
-            title={title}
-            setTitle={setTitle}
-            description={description}
-            setDescription={setDescription}
-            endingDate={endingDate}
-            setEndingDate={setEndingDate}
-            allProjects={allProjects}
-            projectId={projectId}
-            setProjectId={setProjectId}
-          />
-        </div>
-
-        <div className="modal-footer grey lighten-3">
-          <input
-            type="submit"
-            className="modal-close waves-effect waves-green btn indigo"
-            value="Create Task"
-          />
-        </div>
-      </form>
+      {/* </form> */}
     </Modal>
   );
 };

client/src/components/NewTicketForm.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+import { TextField, MenuItem } from "@material-ui/core";
 import { Project } from "../types/Project";
 
 interface IProps {
@@ -22,45 +23,17 @@ export const NewTicketForm: FC<IProps> = ({
   setEndingDate,
   allProjects,
   projectId,
-  setProjectId
+  setProjectId,
 }) => {
   return (
     <>
-      <div className="row">
-        <div className="input-field">
-          <i className="material-icons prefix">note_add</i>
-          <input
-            id="title"
-            type="text"
-            className="validate"
-            value={title}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setTitle(e.target.value)
-            }
-          />
-          <label htmlFor="title">Title</label>
-        </div>
-
-        <div className="input-field">
-          <i className="material-icons prefix">mode_edit</i>
-          <textarea
-            id="description"
-            className="materialize-textarea validate"
-            value={description}
-            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-              setDescription(e.target.value)
-            }
-          ></textarea>
-          <label htmlFor="description">Description</label>
-        </div>
-
+      {/* <div className="row">
         <div className="input-field">
           <i className="material-icons prefix">date_range</i>
           <input
             id="Due Date"
             type="text"
             className="datepicker"
-            value={endingDate}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               setEndingDate(e.target.value)
             }
@@ -81,14 +54,14 @@ export const NewTicketForm: FC<IProps> = ({
             <option value={0} disabled>
               Project
             </option>
-            {allProjects.map(p => (
+            {allProjects.map((p) => (
               <option key={p.id} value={p.id}>
                 {p.title}
               </option>
             ))}
           </select>
         </div>
-      </div>
+      </div> */}
     </>
   );
 };