| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html lang="en">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8">
|
|---|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|---|
| 6 | <title>Support Tickets</title>
|
|---|
| 7 | <link rel="stylesheet" href="/css/main.css">
|
|---|
| 8 | <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|---|
| 9 | </head>
|
|---|
| 10 | <body>
|
|---|
| 11 |
|
|---|
| 12 | <div id="app" class="support-ticket-container">
|
|---|
| 13 | <button @click="fetchResolved">Fetch Resolved Tickets</button>
|
|---|
| 14 | <button @click="fetchTickets">Fetch Unresolved Tickets</button>
|
|---|
| 15 | <h1>Support Tickets</h1>
|
|---|
| 16 | <div class="ticket-list">
|
|---|
| 17 | <div class="ticket-item" v-for="ticket in tickets" :key="ticket.ticketID">
|
|---|
| 18 | <div class="ticket-info">
|
|---|
| 19 | <p><strong>Subject:</strong> {{ ticket.subject }}</p>
|
|---|
| 20 | <p><strong>Description:</strong> {{ ticket.description }}</p>
|
|---|
| 21 | <p><strong>Date Resolved:</strong> {{ ticket.dateResolved }}</p>
|
|---|
| 22 | </div>
|
|---|
| 23 | <div class="ticket-actions">
|
|---|
| 24 | <button @click="resolveTicket(ticket.ticketID)">Resolve</button>
|
|---|
| 25 | </div>
|
|---|
| 26 | </div>
|
|---|
| 27 | </div>
|
|---|
| 28 | </div>
|
|---|
| 29 |
|
|---|
| 30 | <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|---|
| 31 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|---|
| 32 |
|
|---|
| 33 | <script>
|
|---|
| 34 | new Vue({
|
|---|
| 35 | el: '#app',
|
|---|
| 36 | data: {
|
|---|
| 37 | tickets: []
|
|---|
| 38 | },
|
|---|
| 39 | mounted() {
|
|---|
| 40 | this.fetchTickets();
|
|---|
| 41 | },
|
|---|
| 42 | methods: {
|
|---|
| 43 | fetchTickets() {
|
|---|
| 44 | axios.get('http://localhost:8080/api/support-tickets')
|
|---|
| 45 | .then(response => {
|
|---|
| 46 | this.tickets = response.data;
|
|---|
| 47 | console.log(response.data);
|
|---|
| 48 | })
|
|---|
| 49 | .catch(error => {
|
|---|
| 50 | console.error("Error fetching tickets:", error);
|
|---|
| 51 | });
|
|---|
| 52 | },
|
|---|
| 53 | fetchResolved() {
|
|---|
| 54 | axios.get('http://localhost:8080/api/support-tickets/resolved')
|
|---|
| 55 | .then(response => {
|
|---|
| 56 | this.tickets = response.data;
|
|---|
| 57 | console.log(response.data);
|
|---|
| 58 | })
|
|---|
| 59 | .catch(error => {
|
|---|
| 60 | console.error("Error fetching resolved tickets:", error);
|
|---|
| 61 | });
|
|---|
| 62 | },
|
|---|
| 63 | resolveTicket(ticketID) {
|
|---|
| 64 | console.log(ticketID);
|
|---|
| 65 | const status = 'RESOLVED';
|
|---|
| 66 | axios.put(`http://localhost:8080/api/support-tickets/${ticketID}/status`, status,
|
|---|
| 67 | {
|
|---|
| 68 | headers: {
|
|---|
| 69 | 'Content-Type': 'text/plain'
|
|---|
| 70 | }
|
|---|
| 71 | })
|
|---|
| 72 | .then(() => {
|
|---|
| 73 | alert(`Ticket ${ticketID} resolved.`);
|
|---|
| 74 | this.fetchTickets();
|
|---|
| 75 | })
|
|---|
| 76 | .catch(error => {
|
|---|
| 77 | console.error("Error resolving ticket:", error.response.data);
|
|---|
| 78 | });
|
|---|
| 79 | }
|
|---|
| 80 |
|
|---|
| 81 | }
|
|---|
| 82 | });
|
|---|
| 83 | </script>
|
|---|
| 84 |
|
|---|
| 85 |
|
|---|
| 86 | </body>
|
|---|
| 87 | </html>
|
|---|
