[TSC-127] add ticket_cancelled event, support it

backend/core/consumers.py

@@ -97,6 +97,17 @@ def receive_json(self, content, **kwargs):
             room.phase = "voting"
             room_fields.append("phase")
             publish_room = True
+
+        elif event_type == "ticket_cancelled":
+            # zero out any votes
+            for user in room.users.all():
+                user.vote = ""
+                user.save()
+            room.current_ticket.delete()
+            room.phase = "ticket_creation"
+            room_fields.append("phase")
+            publish_room = True
+
         elif event_type == "vote" and room.phase != "ticket_creation":
             username = message.get("user")
             vote = message.get("point")

backend/core/models.py

@@ -18,6 +18,10 @@ class PointyRoom(models.Model):
     def __str__(self):
         return f"{self.name} ({self.session_id})"
 
+    @property
+    def current_ticket(self):
+        return self.tickets.order_by("-last_update_dt").first()
+
     def update_message(self):
         ticket_qs = self.tickets.order_by("-last_update_dt")
         ticket = ticket_qs.first()

frontend/src/components/containers/CurrentTicket/CurrentTicket.js

@@ -3,36 +3,44 @@ import {
   CurrentTickerWrapper,
   TicketName, 
   PhaseName,
+  CancelTicketIcon,
   CurrentTicketStyled,
 } from "./CurrentTicket.styled";
-
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { AnimatePresence } from 'framer-motion';
 
 // Context
 import { RoomContext } from '../../pages/RoomPage/RoomPage';
+import { getUserFromLS } from "../../../util/localStorageUser";
 
 // Const
 import { LIST_VARIANTS } from "../../../styles/animations";
+import { EVENT_TYPES } from "../../../services/WebSocket";
 
 // Children
 import VoteValue from '../VoteValue/VoteValue';
-import { getUserFromLS } from '../../../util/localStorageUser';
 
 
 const CurrentTicket = () => {
-  const { room } = useContext(RoomContext);
+  const { room, publish } = useContext(RoomContext);
   const [selectedTicket, setSelectedTicket] = useState();
 
+  const _userIsAdmin = () => {
+    return getUserFromLS() === room.admin;
+  }
+
   const getSelectedState = value => {
-    const isAdmin = getUserFromLS() === room.admin;
-    return isAdmin
+    return _userIsAdmin()
       ? Object.values(room.votes).includes(value.toString())
       : value === selectedTicket;
   }
 
   const getHandleSelect = value => {
-    const isAdmin = getUserFromLS() === room.admin;
-    if (!isAdmin) return () => setSelectedTicket(value);
+    if (!_userIsAdmin()) return () => setSelectedTicket(value);
+  }
+
+  const handleCancelTicket = () => {
+    publish(EVENT_TYPES.ticket_cancelled);
   }
 
   return (
@@ -52,6 +60,7 @@ const CurrentTicket = () => {
           >
             [{room.phase}]
           </PhaseName>
+          {_userIsAdmin() && <CancelTicketIcon icon={faTimes} onClick={handleCancelTicket}/>}
         </TicketName>
       </AnimatePresence>
       <CurrentTicketStyled

frontend/src/components/containers/CurrentTicket/CurrentTicket.styled.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { colorGrey, colorGreyLight } from '../../../styles/colors';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { motion } from 'framer-motion';
 
 export const CurrentTickerWrapper = styled.div`
@@ -11,9 +12,22 @@ export const CurrentTickerWrapper = styled.div`
 
 export const TicketName = styled(motion.h2)`
     margin-top: 0;
-    text-align: center;
+    align-self: center;
     font-size: 4rem;
     color: ${colorGrey};
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+`;
+
+export const CancelTicketIcon = styled(FontAwesomeIcon)`
+    font-size: 16px;
+    margin-left: 4rem;
+    cursor: pointer;
+
+    &:hover {
+        color: ${colorGreyLight};
+    }
 `;
 
 export const PhaseName = styled(motion.span)`

frontend/src/services/WebSocket.js

@@ -9,6 +9,7 @@ export const EVENT_TYPES = {
   'room_update': 'room_update',
   'join_room': 'join_room',
   'ticket_created': 'ticket_created',
+  'ticket_cancelled': 'ticket_cancelled',
   'vote': 'vote',
 }