Untitled
user_0464790
plain_text
a year ago
4.9 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'; // const tickets = [ // { id: 1, customerId: 'Cust123', agentId: 'Agent456', productId: 'Prod789', description: 'abc', status: 'Open', action: 'chat' }, // { id: 2, customerId: 'Cust234', agentId: 'Agent789', productId: 'Prod123', description: 'edf', status: 'Closed', action: 'call' }, // // Add more ticket data as needed // ]; 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()); 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) => { // Add chat functionality console.log('Chat functionality for Ticket', selectedTicket); setSelectedAction(chat); }; const sendMessage = () => { if (message.trim() !== '') { setChatMessages([...chatMessages, message]); setMessage(''); } }; const handleCall = (call) => { const contactNumber = '9812345678'; window.prompt('Contact Number:', contactNumber); setSelectedAction(call); }; const handleScheduleMeeting = (meet) => { console.log('Selected Date:', selectedDate); setSelectedAction(meet); }; const closeModal = () => { setModalIsOpen(false); }; return ( <div> <table class="table"> <thead class="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 class="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'}} class="btn btn-lg btn-primary" onClick={() => handleChat('chat')}>Chat</button> <button style={{'marginLeft' : '10px', 'marginRight': '10px'}} class="btn btn-lg btn-primary ml-2" onClick={() => handleCall('call')}>Call</button> <button style={{'marginLeft' : '10px', 'marginRight': '10px'}} class="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'}} class="btn btn-secondary btn-lg" onClick={closeModal}>Close</button> </Modal> </div> ); } export default AgentTicket;
Editor is loading...
Leave a Comment