Untitled
unknown
plain_text
a year ago
5.3 kB
6
Indexable
import React, { useState, useEffect } from 'react'; import Modal from 'react-modal'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import { getAllTickets } from '../../services/TicketService'; function AgentTicket() { const [modalIsOpen, setModalIsOpen] = useState(false); const [selectedTicket, setSelectedTicket] = useState(null); const [selectedAction, setSelectedAction] = useState(null); const [tickets, setTickets] = useState([]); const [message, setMessage] = useState(''); const [chatMessages, setChatMessages] = useState([]); const [selectedDate, setSelectedDate] = useState(new Date()); const [interactions, setInteractions] = useState([]); useEffect(() => { loadTickets(); }, []); const loadTickets = async () => { try { const ticketsData = await getAllTickets(); setTickets(ticketsData.data.$values); } catch (error) { console.error('Error Loading tickets', error); } }; const handleActionClick = (ticketId, action) => { setSelectedTicket(ticketId); setSelectedAction(action); setModalIsOpen(true); }; const handleChat = (chat) => { // Update interactions table with chat message const newInteraction = { interaction_type: 'Chat', ticketId: selectedTicket, interaction_id: chat, interaction_details: message, }; setInteractions([...interactions, newInteraction]); setChatMessages([...chatMessages, message]); setMessage(''); setSelectedAction(chat); }; const sendMessage = () => { if (message.trim() !== '') { handleChat('chat'); } }; const handleCall = (call) => { // Update interactions table with call const newInteraction = { interaction_type: 'Call', ticketId: selectedTicket, interaction_id: call, interaction_details: 'Call made', }; setInteractions([...interactions, newInteraction]); setSelectedAction(call); }; const handleScheduleMeeting = (meet) => { console.log('Selected Date:', selectedDate); setSelectedAction(meet); }; const closeModal = () => { setModalIsOpen(false); }; return ( <div> <table className="table"> <thead className="thead-dark"> <tr> <th scope="col">Customer Id</th> <th scope="col">Product Id</th> <th scope="col">Status</th> <th scope="col">Action</th> </tr> </thead> <tbody> {tickets.map((ticket) => ( <tr key={ticket.id}> <td scope="row">{ticket.customerId}</td> <td scope="row">{ticket.productId}</td> <td scope="row">{ticket.status}</td> <td scope="row"> <button className="btn btn-primary" data-toggle="button" aria-pressed="false" autoComplete="off" onClick={() => handleActionClick(ticket.id, 'Action')} > Action </button> </td> </tr> ))} </tbody> </table> <Modal isOpen={modalIsOpen} onRequestClose={closeModal}> <h2> {selectedAction} functionality for Ticket {selectedTicket} </h2> {selectedAction === 'chat' && ( <div> <div> {chatMessages.map((msg, index) => ( <div key={index}>{msg}</div> ))} </div> <input type="text" value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Type your message..." /> <button onClick={sendMessage}>Send</button> </div> )} <div style={{ marginTop: '30px' }}> <button style={{ marginLeft: '10px', marginRight: '10px' }} className="btn btn-lg btn-primary" onClick={() => handleChat('chat')} > Chat </button> <button style={{ marginLeft: '10px', marginRight: '10px' }} className="btn btn-lg btn-primary ml-2" onClick={() => handleCall('call')} > Call </button> <button style={{ marginLeft: '10px', marginRight: '10px' }} className="btn btn-lg btn-primary ml-2" onClick={() => handleScheduleMeeting('meet')} > Schedule Meeting </button> </div> {selectedAction === 'meet' && ( <div> <DatePicker selected={selectedDate} onChange={(date) => setSelectedDate(date)} showTimeSelect timeFormat="HH:mm" timeIntervals={15} dateFormat="MMMM d, yyyy h:mm aa" /> <button onClick={handleScheduleMeeting}>Schedule Meeting</button> </div> )} <button style={{ position: 'absolute', top: '20px', right: '20px' }} className="btn btn-secondary btn-lg" onClick={closeModal} > Close </button> </Modal> </div> ); } export default AgentTicket;
Editor is loading...
Leave a Comment