Take over (#117)

Implement ability for staff to take over tickets

Author: MeshanKhosla

src/components/queue/TicketCard.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import Router from 'next/router';
-import { Box, Button, useColorModeValue, Text, Divider, Tag, Flex, Spinner } from '@chakra-ui/react';
+import { Box, Button, useColorModeValue, Text, Divider, Tag, Flex, Spinner, useToast } from '@chakra-ui/react';
 import { TicketStatus, UserRole } from '@prisma/client';
 import { TicketWithNames } from '../../server/trpc/router/ticket';
 import { trpc } from '../../utils/trpc';
@@ -24,6 +24,7 @@ const TicketCard = (props: TicketCardProps) => {
   const { ticket, userRole, userId, idx } = props;
 
   const context = trpc.useContext();
+  const toast = useToast();
   const [areButtonsLoading, setAreButtonsLoading] = useState(false);
   const [areButtonsDisabled, setAreButtonsDisabled] = useState(false);
 
@@ -77,8 +78,19 @@ const TicketCard = (props: TicketCardProps) => {
 
   const handleHelpTicket = async () => {
     onClickWrapper(async () => {
-      await assignTicketsMutation.mutateAsync({ ticketIds: [ticket.id] });
-      Router.push(getTicketUrl(ticket.id));
+      const res = await assignTicketsMutation.mutateAsync({ ticketIds: [ticket.id] });
+      if (res.length > 0) {
+        Router.push(getTicketUrl(ticket.id));
+      } else {
+        toast({
+          title: 'Ticket already assigned',
+          description: 'This ticket is already assigned to a staff member.',
+          status: 'error',
+          duration: 5000,
+          isClosable: true,
+          position: 'top-right',
+        });
+      }
     })();
   };
 
@@ -132,13 +144,11 @@ const TicketCard = (props: TicketCardProps) => {
         ticketId: ticket.id,
         isPriority: !isPriority,
       });
-      await requeueTicketsMutation.mutateAsync({ 
-        ticketIds: [ticket.id] 
+      await requeueTicketsMutation.mutateAsync({
+        ticketIds: [ticket.id],
       });
-    }
-    await onClickWrapper(() =>
-      prioritizeAndRequeue(),
-    )();
+    };
+    await onClickWrapper(() => prioritizeAndRequeue())();
   };
 
   const handleCloseTicket = async () => {

src/components/ticket-page/TicketButtons.tsx

@@ -36,6 +36,7 @@ const TicketButtons = (props: TicketCardProps) => {
   const markAsAbsentMutation = trpc.ticket.markAsAbsent.useMutation();
   const markAsPriorityMutation = trpc.ticket.markAsPriority.useMutation();
   const toggleIsPublicMutation = trpc.ticket.toggleIsPublic.useMutation();
+  const takeOverTicketMutation = trpc.ticket.takeOverTicket.useMutation();
   const isPending = ticket.status === TicketStatus.PENDING;
   const isOpen = ticket.status === TicketStatus.OPEN;
   const isClosed = ticket.status === TicketStatus.CLOSED;
@@ -78,6 +79,12 @@ const TicketButtons = (props: TicketCardProps) => {
     })();
   };
 
+  const handleTakeOverTicket = async () => {
+    onClickWrapper(async () => {
+      await takeOverTicketMutation.mutateAsync({ ticketId: ticket.id });
+    })();
+  };
+
   const handleReopenTicket = async () => {
     onClickWrapper(async () => {
       await reopenTicketsMutation.mutateAsync({ ticketIds: [ticket.id] });
@@ -132,13 +139,11 @@ const TicketButtons = (props: TicketCardProps) => {
         ticketId: ticket.id,
         isPriority: !isPriority,
       });
-      await requeueTicketsMutation.mutateAsync({ 
-        ticketIds: [ticket.id] 
+      await requeueTicketsMutation.mutateAsync({
+        ticketIds: [ticket.id],
       });
-    }
-    await onClickWrapper(() =>
-      prioritizeAndRequeue(),
-    )();
+    };
+    await onClickWrapper(() => prioritizeAndRequeue())();
   };
 
   const handleToggleIsPublic = async () => {
@@ -175,6 +180,18 @@ const TicketButtons = (props: TicketCardProps) => {
       >
         Help
       </Button>
+      <Button
+        title={areButtonsDisabled ? BUTTONS_DISABLED_WAIT_MSG : ''}
+        disabled={areButtonsDisabled}
+        isLoading={areButtonsLoading}
+        m={4}
+        mt={[1, 1, 1, 4]}
+        onClick={handleTakeOverTicket}
+        hidden={(!isStaff && !isIntern) || !isAssigned || ticket.helpedByUserId === userId}
+        colorScheme='twitter'
+      >
+        Take Over
+      </Button>
       <Button
         title={areButtonsDisabled ? BUTTONS_DISABLED_WAIT_MSG : ''}
         disabled={areButtonsDisabled}

src/server/trpc/router/ticket.ts

@@ -255,10 +255,42 @@ export const ticketRouter = router({
       await channel.publish('tickets-assigned', undefined);
 
       // Uses ticket inner page channel
-      for (const id of input.ticketIds) {
+      for (const id of ticketsToAssign) {
         const channel = ably.channels.get(`ticket-${id}`);
         await channel.publish('ticket-assigned', undefined);
       }
+
+      return ticketsToAssign;
+    }),
+
+  // Assigns a ticket to the current user
+  takeOverTicket: protectedNotStudentProcedure
+    .input(
+      z.object({
+        ticketId: z.number(),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      await ctx.prisma.ticket.update({
+        where: { id: input.ticketId },
+        data: {
+          status: TicketStatus.ASSIGNED,
+          helpedAt: new Date(),
+          helpedBy: {
+            connect: {
+              id: ctx.session?.user?.id,
+            },
+          },
+        },
+      });
+
+      const ably = new Ably.Rest(process.env.ABLY_SERVER_API_KEY!);
+      const channel = ably.channels.get('tickets');
+      channel.publish('tickets-assigned', undefined);
+
+      // Uses ticket inner page channel
+      const ticketChannel = ably.channels.get(`ticket-${input.ticketId}`);
+      ticketChannel.publish('ticket-assigned', undefined);
     }),
 
   resolveTickets: protectedNotStudentProcedure