TicketEdit updates

apps/link/components/TicketEdit.tsx

@@ -1,5 +1,5 @@
-import { FC, useEffect } from "react";
-import { Grid, Box, Typography, TextField } from "@mui/material";
+import { FC, useEffect, useState } from "react";
+import { Grid, Box, Typography, TextField, Stack, Chip, Select, MenuItem } from "@mui/material";
 import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
 
 interface TicketEditProps {
@@ -7,58 +7,67 @@ interface TicketEditProps {
 }
 
 export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
+  const [selectedGroup, setSelectedGroup] = useState("group1");
+  const [selectedOwner, setSelectedOwner] = useState("owner1");
+  const [selectedPriority, setSelectedPriority] = useState("priority1");
+  const [selectedState, setSelectedState] = useState("state2");
+  const handleDelete = () => {
+    console.info("You clicked the delete icon.");
+  };
+
   return (
     <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
       <Grid container direction="column" spacing={3}>
         <Grid item>
-          <TextField
-            label="Group"
-            size="small"
-            sx={{
+          <Box sx={{ m: 1 }}>Group</Box>
+          <Select defaultValue={selectedGroup} value={selectedGroup} onChange={(e: any) => setSelectedGroup(e.target.value)} size="small" sx={{
             width: "100%",
-              fieldset: { backgroundColor: "white" },
-            }}
-          />
+            backgroundColor: "white"
+          }} >
+            <MenuItem key="group1" value="group1">Default Group</MenuItem>
+          </Select>
         </Grid>
         <Grid item>
-          <TextField
-            label="Owner"
-            size="small"
-            sx={{
+          <Box sx={{ m: 1, mt: 0 }}>Owner</Box>
+          <Select value={selectedOwner} onChange={(e: any) => setSelectedOwner(e.target.value)} size="small" sx={{
             width: "100%",
-              fieldset: { backgroundColor: "white" },
-            }}
-          />
+            backgroundColor: "white",
+          }} >
+            <MenuItem value="owner1">Darren Clarke</MenuItem>
+            <MenuItem value="owner2">Darren Gpcmdln</MenuItem>
+          </Select>
         </Grid>
         <Grid item>
-          <TextField
-            label="State"
-            size="small"
-            sx={{
+          <Box sx={{ m: 1, mt: 0 }}>State</Box>
+          <Select value={selectedState} onChange={(e: any) => setSelectedState(e.target.value)} size="small" sx={{
             width: "100%",
-              fieldset: { backgroundColor: "white" },
-            }}
-          />
+            backgroundColor: "white"
+          }} >
+            <MenuItem value="state1">closed</MenuItem>
+            <MenuItem value="state2">new</MenuItem>
+            <MenuItem value="state3">open</MenuItem>
+            <MenuItem value="state4">pending close</MenuItem>
+            <MenuItem value="state4">pending reminder</MenuItem>
+          </Select>
         </Grid>
         <Grid item>
-          <TextField
-            label="Priority"
-            size="small"
-            sx={{
+          <Box sx={{ m: 1, mt: 0 }}>Priority</Box>
+          <Select value={selectedPriority} onChange={(e: any) => setSelectedPriority(e.target.value)} size="small" sx={{
             width: "100%",
-              fieldset: { backgroundColor: "white" },
-            }}
-          />
+            backgroundColor: "white"
+          }} >
+            <MenuItem value="priority1">1 low</MenuItem>
+            <MenuItem value="priority2">2 normal</MenuItem>
+            <MenuItem value="priority3">3 high</MenuItem>
+          </Select>
         </Grid>
+
         <Grid item>
-          <TextField
-            label="Tags"
-            size="small"
-            sx={{
-              width: "100%",
-              fieldset: { backgroundColor: "white" },
-            }}
-          />
+          <Box sx={{ mb: 1, }}>Tags</Box>
+          <Stack direction="row" spacing={1} sx={{ backgroundColor: "white", p: 1, borderRadius: "6px", border: "1px solid #bbb", minHeight: 120 }} flexWrap="wrap">
+            <Chip label="First" onDelete={handleDelete} />
+            <Chip label="Another" onDelete={handleDelete} />
+          </Stack>
         </Grid>
       </Grid>
     </Box >

apps/link/pages/tickets/[id].tsx

@@ -6,6 +6,7 @@ import { NextPage } from "next";
 import { Grid } from "@mui/material";
 import { Layout } from "components/Layout";
 import { TicketDetail } from "components/TicketDetail";
+import { TicketEdit } from "components/TicketEdit";
 
 type TicketProps = {
   id: string;
@@ -89,12 +90,12 @@ const Ticket: NextPage<TicketProps> = ({ id }) => {
       </Head>
       {shouldRender && (
         <Grid container spacing={0} sx={{ height: "100vh" }} direction="row">
-          <Grid item sx={{ height: "100vh" }} xs={12}>
+          <Grid item sx={{ height: "100vh" }} xs={9}>
             <TicketDetail ticket={ticketData.ticket} />
           </Grid>
-          {/*<Grid item xs={0} sx={{ height: "100vh" }}>
+          <Grid item xs={3} sx={{ height: "100vh" }}>
             <TicketEdit ticket={ticketData.ticket} />
-      </Grid>*/}
+          </Grid>
         </Grid>
       )}
       {ticketError && <div>{ticketError.toString()}</div>}