Edit Ticket (#128)

Allow for all aspects of a ticket to be edited via 1 endpoint

Author: MeshanKhosla

src/components/modals/EditTicketModal.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import {
+  ModalFooter,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { TicketWithNames } from '../../server/trpc/router/ticket';
+import { DARK_GRAY_COLOR } from '../../utils/constants';
+import CreateTicketForm from '../queue/CreateTicketForm';
+
+interface EditTicketModalProps {
+  isModalOpen: boolean;
+  setIsModalOpen: (isOpen: boolean) => void;
+  onSubmit: (_: TicketWithNames) => void;
+  ticket: TicketWithNames;
+}
+
+/** Allows users to modify their ticket description, location, and assignment */
+const EditTicketModal = (props: EditTicketModalProps) => {
+  const { isModalOpen, setIsModalOpen, onSubmit, ticket } = props;
+  const [existingTicket, setExistingTicket] = useState<TicketWithNames>(ticket);
+
+  return (
+    <Modal size='2xl' isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+      <ModalContent backgroundColor={useColorModeValue('', DARK_GRAY_COLOR)}>
+        <ModalHeader>Edit Ticket</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <CreateTicketForm
+            arePublicTicketsEnabled={true}
+            isEditingTicket={true}
+            existingTicket={existingTicket}
+            setExistingTicket={setExistingTicket}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button variant='ghost' mr={3} onClick={() => setIsModalOpen(false)}>
+            Cancel
+          </Button>
+          <Button colorScheme='blue' onClick={() => onSubmit(existingTicket)}>
+            Confirm
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default EditTicketModal;

src/components/queue/CreateTicketForm.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { trpc } from '../../utils/trpc';
 import { Select } from 'chakra-react-select';
 import Router from 'next/router';
@@ -22,6 +22,7 @@ import { PersonalQueue, TicketType } from '@prisma/client';
 import { STARTER_CONCEPTUAL_TICKET_DESCRIPTION, STARTER_DEBUGGING_TICKET_DESCRIPTION } from '../../utils/constants';
 import { getTicketUrl, uppercaseFirstLetter } from '../../utils/utils';
 import ConfirmPublicToggleModal from '../modals/ConfirmPublicToggleModal';
+import { TicketWithNames } from '../../server/trpc/router/ticket';
 
 interface Assignment {
   id: number;
@@ -38,22 +39,55 @@ interface Location {
 interface CreateTicketFormProps {
   arePublicTicketsEnabled: boolean;
   personalQueue?: PersonalQueue;
+  isEditingTicket?: boolean;
+  // Existing ticket is used to prepopulate the form when editing a ticket
+  existingTicket?: TicketWithNames;
+  setExistingTicket?: (ticket: TicketWithNames) => void;
 }
 
 const CreateTicketForm = (props: CreateTicketFormProps) => {
-  const { arePublicTicketsEnabled, personalQueue } = props;
-  const [ticketType, setTicketType] = useState<TicketType>();
-  const [description, setDescription] = useState<string>('');
-  const [locationDescription, setLocationDescription] = useState<string>('');
-  const [assignment, setAssignment] = useState<Assignment>();
+  const { arePublicTicketsEnabled, personalQueue, isEditingTicket, existingTicket, setExistingTicket } = props;
+  const [ticketType, setTicketType] = useState<TicketType | undefined>(existingTicket?.ticketType);
+  const [description, setDescription] = useState<string>(existingTicket?.description ?? '');
+  const [locationDescription, setLocationDescription] = useState<string>(existingTicket?.locationDescription ?? '');
   const [assignmentOptions, setAssignmentOptions] = useState<Assignment[]>([]);
   const [locationOptions, setLocationOptions] = useState<Location[]>([]);
   const [isPublicModalOpen, setIsPublicModalOpen] = useState<boolean>(false);
-  const [location, setLocation] = useState<Location>();
-  const [isPublic, setIsPublic] = useState<boolean>(false);
+  const [isPublic, setIsPublic] = useState<boolean>(existingTicket?.isPublic ?? false);
   const [isButtonLoading, setIsButtonLoading] = useState<boolean>(false);
+  const [assignment, setAssignment] = useState<Assignment | undefined>(
+    existingTicket
+      ? { id: existingTicket.assignmentId, label: existingTicket.assignmentName, value: existingTicket.assignmentName }
+      : undefined,
+  );
+  const [location, setLocation] = useState<Location | undefined>(
+    existingTicket
+      ? {
+          id: existingTicket.locationId,
+          label: existingTicket.locationName,
+          value: existingTicket.locationName,
+        }
+      : undefined,
+  );
   const toast = useToast();
 
+  // When a property of the ticket changes, update the existing ticket if it exists
+  useEffect(() => {
+    if (existingTicket && setExistingTicket) {
+      setExistingTicket({
+        ...existingTicket,
+        description,
+        locationDescription,
+        assignmentId: assignment?.id ?? existingTicket.assignmentId,
+        assignmentName: assignment?.label ?? existingTicket.assignmentName,
+        locationId: location?.id ?? existingTicket.locationId,
+        locationName: location?.label ?? existingTicket.locationName,
+        ticketType: ticketType ?? existingTicket.ticketType,
+        isPublic,
+      });
+    }
+  }, [description, locationDescription, assignment, location, ticketType, isPublic, existingTicket, setExistingTicket]);
+
   const createTicketMutation = trpc.ticket.createTicket.useMutation();
   trpc.admin.getActiveAssignments.useQuery(undefined, {
     refetchOnWindowFocus: false,
@@ -96,6 +130,11 @@ const CreateTicketForm = (props: CreateTicketFormProps) => {
 
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    if (isEditingTicket) {
+      // Edit ticket has it's own submit handler
+      return;
+    }
+
     if (!assignment || !location || !ticketType) {
       toast({
         title: 'Error',
@@ -232,7 +271,14 @@ const CreateTicketForm = (props: CreateTicketFormProps) => {
             </FormLabel>
             <Switch isChecked={isPublic} mt={1} onChange={handleTogglePublic} />
           </FormControl>
-          <Button type='submit' width='full' mt={4} colorScheme='whatsapp' isLoading={isButtonLoading}>
+          <Button
+            hidden={isEditingTicket}
+            type='submit'
+            width='full'
+            mt={4}
+            colorScheme='whatsapp'
+            isLoading={isButtonLoading}
+          >
             Request Help
           </Button>
         </form>

src/components/queue/TicketQueue.tsx

@@ -56,7 +56,7 @@ const TicketQueue = (props: TicketQueueProps) => {
       'tickets-marked-as-absent',
       'all-tickets-closed',
       'tickets-marked-as-priority',
-      'ticket-description-changed',
+      'ticket-edited',
       'ticket-toggle-public',
     ];
     const shouldInvalidateAssigned = [
@@ -66,7 +66,7 @@ const TicketQueue = (props: TicketQueueProps) => {
       'all-tickets-closed',
       'ticket-closed',
       'tickets-marked-as-priority',
-      'ticket-description-changed',
+      'ticket-edited',
       'ticket-toggle-public',
     ];
     const shouldInvalidatePending = [
@@ -75,10 +75,15 @@ const TicketQueue = (props: TicketQueueProps) => {
       'all-tickets-closed',
       'ticket-closed',
       'tickets-marked-as-priority',
-      'ticket-description-changed',
+      'ticket-edited',
       'ticket-toggle-public',
     ];
-    const shouldInvalidateAbsent = ['tickets-marked-as-absent', 'ticket-closed'];
+    const shouldInvalidateAbsent = [
+      'tickets-marked-as-absent',
+      'ticket-closed',
+      'ticket-location-changed',
+      'ticket-edited',
+    ];
 
     if (message === 'ticket-joined' || message === 'ticket-left') {
       context.ticket.getUsersInTicketGroup.invalidate({ ticketId: ticketData.data.id });