authscape 1.0.456 → 1.0.460

package/src/components/tickets/Tickets.js

@@ -0,0 +1,247 @@
+import React, {useEffect, useState} from 'react';
+// import {apiService, authService} from 'authscape';
+import Button from '@mui/material/Button';
+import { Box } from '@mui/system';
+import {
+  DataGrid,
+  GridActionsCellItem,
+} from "@mui/x-data-grid";
+import DeleteRoundedIcon from "@mui/icons-material/DeleteRounded";
+import Typography from '@mui/material/Typography';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import YesNoDialog from '../../components/yesNoDialog';
+import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import Grid from '@mui/material/Grid';
+// import TicketDetail from './TicketDetail';
+import { useRouter } from 'next/router';
+
+export default function Tickets({loadedUser, setIsLoading, currentUser, customTabName = null, customTabElement = null }) {
+
+  const [tickets, setTickets] = useState([]);
+  
+  const [archiveTicketId, setArchiveTicketId] = useState(null);
+  const [totalTickets, setTotalTickets] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
+
+  const [ticketStatuses, setTicketStatuses] = useState([]);
+  const [ticketTypes, setTicketTypes] = useState([]);
+
+  const [ticketTypeId, setTicketTypeId] = useState(null);
+  const [statusId, setStatusId] = useState(null);
+
+  const [selectedTicketId, setSelectedTicketId] = useState(null);
+  
+  const router = useRouter();
+
+
+  useEffect(() => {
+
+    if (router.query.id != null)
+    {
+      setSelectedTicketId(router.query.id);
+    }
+
+  }, [router.isReady])
+  
+  const columns = [
+    { field: 'id', headerName: 'Id', width: 150 },
+    { field: 'title', flex: 1, headerName: 'Customer', width: 200 },
+    { field: 'ticketStatus', headerName: 'Status', width: 150 },
+    { field: 'ticketType', headerName: 'Ticket Type', width: 150 },
+    { field: 'created', headerName: 'Created', width: 150 },
+    { field: 'ticketParticipants', headerName: 'Participants', width: 150 },
+    { field: 'messages', headerName: 'Messages', width: 150 },
+    {
+      field: "actions",
+      type: "actions",
+      width: 200,
+      headerName: "Actions",
+      cellClassName: "actions",
+      getActions: ({ id, row }) => {
+        return [
+          <GridActionsCellItem key={id}
+            icon={<VisibilityRoundedIcon />}
+            label="View"
+            onClick={() => {
+              setSelectedTicketId(row.id);
+            }}
+          />,
+          <GridActionsCellItem key={id}
+            icon={<DeleteRoundedIcon />}
+            label="Delete"
+            className="textPrimary"
+            onClick={() => {
+              setArchiveTicketId(row.id);
+            }}
+          />,
+        ];
+      },
+    }
+  ];
+
+  const reloadTickets = async () => {  
+    let response = await apiService().get("/ticket/GetTickets?pageNumber=" + pageNumber + "&pageSize=20&ticketStatusId=" + (statusId != null ? statusId: "") + "&ticketTypeId=" + (ticketTypeId != null ? ticketTypeId : ""));
+    if (response != null && response.status == 200)
+    {
+        setTotalTickets(response.data.data.length);
+        setTickets(response.data.data);
+    }
+  }
+
+  useEffect(() => {
+
+    if (loadedUser)
+    {
+      let fetchStatusesAndTypes = async () => {
+        let responseStatus = await apiService().get("/Ticket/GetStatuses");
+        if (responseStatus != null && responseStatus.status == 200)
+        {
+          setTicketStatuses(responseStatus.data);
+        }
+
+        let responseType = await apiService().get("/Ticket/GetTicketTypes");
+        if (responseType != null && responseType.status == 200)
+        {
+          setTicketTypes(responseType.data);
+        }
+      }
+
+      fetchStatusesAndTypes();
+      setTicketStatuses();
+    }
+
+  }, [loadedUser]);
+
+
+  useEffect(() => {
+
+    if (loadedUser)
+    {
+      reloadTickets();
+    }
+
+  }, [loadedUser, ticketTypeId, statusId]);
+  
+  return (
+  <div>
+
+    {selectedTicketId != null &&
+      <TicketDetail ticketId={selectedTicketId} setIsLoading={setIsLoading} currentUser={currentUser} customTabName={customTabName} customTabElement={customTabElement} GoBackToViewTickets={() =>
+        {
+          setSelectedTicketId(null);
+        }} />
+    }
+    {selectedTicketId == null &&
+    <>
+      <Box sx={{ flexGrow: 1 }}>
+        <AppBar position="static" color='inherit' elevation={0}>
+          <Toolbar>
+            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+              Tickets
+            </Typography>
+            <Button color="primary" variant="contained" startIcon={<AddRoundedIcon/>} onClick={async () => {
+              
+              let response = await apiService().post("/Ticket/CreateTicket", {
+                ticketTypeId: 1,
+                ticketStatusId: 1,
+                description: "about this",
+                message: "More about this"
+              });
+
+              window.location.href = "/ticket/" + response.data;
+
+            }}>Create Ticket</Button>
+          </Toolbar>
+        </AppBar>
+      </Box>
+
+      <Grid container spacing={2} sx={{paddingTop:2, paddingBottom:2}}>
+        <Grid item xs={4}>
+
+          <Box>
+            <FormControl fullWidth>
+              <InputLabel id="demo-simple-select-label">Ticket Status</InputLabel>
+              <Select
+                labelId="demo-simple-select-label"
+                id="demo-simple-select"
+                value={statusId}
+                label="ticketStatus"
+                onChange={(event) => {
+                  setStatusId(event.target.value);
+                }}>
+
+                <MenuItem value={null}>Not Assigned</MenuItem>
+
+                {ticketStatuses != null && ticketStatuses.map((tStatus) => {
+                  return (
+                    <MenuItem value={tStatus.id}>{tStatus.name}</MenuItem>
+                  )                
+                })}
+
+              </Select>
+            </FormControl>
+          </Box>
+
+        </Grid>
+        <Grid item xs={4}>
+
+          <Box>
+            <FormControl fullWidth>
+              <InputLabel id="demo-simple-select-label">Ticket Type</InputLabel>
+              <Select
+                labelId="demo-simple-select-label"
+                id="demo-simple-select"
+                value={ticketTypeId}
+                label="TicketType"
+                onChange={(event) => {
+                  setTicketTypeId(event.target.value);
+                }}>
+
+                <MenuItem value={null}>Not Assigned</MenuItem>
+
+                {ticketTypes != null && ticketTypes.map((tTicketType) => {
+                  return (
+                    <MenuItem value={tTicketType.id}>{tTicketType.name}</MenuItem>
+                  )                
+                })}
+
+              </Select>
+            </FormControl>
+          </Box>
+
+        </Grid>
+      </Grid>
+
+      <Box sx={{height: 600, width: '100%' }}>
+        <DataGrid 
+          rows={tickets} 
+          columns={columns}
+          onPageChange={(newPage) => {
+            setPageNumber(newPage);
+          }}
+          pageSize={totalTickets} 
+          rowsPerPageOptions={[20]}
+          /> 
+      </Box>
+
+      <YesNoDialog open={archiveTicketId != null ? true : false} title={"Remove Ticket"} message={"Are you sure you want to archive this ticket?"} 
+        YesAction={async () => {
+          await apiService().delete("/Ticket/ArchiveTicket?id=" + archiveTicketId);
+          await reloadTickets();
+          setArchiveTicketId(null);
+        }} 
+        NoAction={() => {
+          setArchiveTicketId(null);
+        }} />
+      </>
+    }
+  </div>
+    
+  )
+}