From e801c126012cef3b9ce519a8aae2a3c876775db6 Mon Sep 17 00:00:00 2001
From: bton <anton@postmitdermaus.de>
Date: Sat, 2 Nov 2024 01:13:21 +0100
Subject: [PATCH] state button has the state pre selected

---
 web/src/views/Ticket.vue | 44 +++++++++++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/web/src/views/Ticket.vue b/web/src/views/Ticket.vue
index e92fb8e..a5008af 100644
--- a/web/src/views/Ticket.vue
+++ b/web/src/views/Ticket.vue
@@ -14,18 +14,25 @@
                             Delete
                         </button-->
                         <div class="btn-group">
-                            <select class="form-control" v-model="ticket.assigned_to">
+                            <select class="form-control" v-model="selected_assignee">
                                 <option v-for="user in users" :value="user.username">{{ user.username }}</option>
                             </select>
-                            <button class="form-control btn btn-success" @click="assigTicket(ticket)">
+                            <button class="form-control btn btn-success"
+                                    @click="assignTicket(ticket)"
+                                    :disabled="!selected_assignee && (selected_assignee == ticket.assigned_to)">
                                 Assign&nbsp;Ticket
                             </button>
                         </div>
                         <div class="btn-group">
-                            <select class="form-control" v-model="ticket.state">
-                                <option v-for="status in state_options" :value="status.value">{{ status.text }}</option>
+                            <select class="form-control" v-model="selected_state">
+                                <option v-for="status in state_options" :value="status.value">{{
+                                        status.text
+                                    }}
+                                </option>
                             </select>
-                            <button class="form-control btn btn-success" @click="changeTicketStatus(ticket)">
+                            <button class="form-control btn btn-success"
+                                    @click="changeTicketStatus(ticket)"
+                                    :disabled="(selected_state == ticket.state)">
                                 Change&nbsp;Status
                             </button>
                         </div>
@@ -58,13 +65,23 @@
 import {mapActions, mapGetters, mapState} from 'vuex';
 import Timeline from "@/components/Timeline.vue";
 import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
+import AsyncLoader from "@/components/AsyncLoader.vue";
 
 export default {
     name: 'Ticket',
-    components: {ClipboardButton, Timeline},
+    components: {AsyncLoader, ClipboardButton, Timeline},
     data() {
         return {
-            shipping_voucher_type: null
+            selected_state: null,
+            Selected_assignee: null,
+            shipping_voucher_type: null,
+        }
+    },
+    watch: {
+        ticket(val) {
+            if (this.selected_state == null) {
+                this.selected_state = val.state;
+            }
         }
     },
     computed: {
@@ -83,7 +100,7 @@ export default {
     methods: {
         ...mapActions(['deleteItem', 'markItemReturned', 'sendMail', 'updateTicketPartial', 'postComment']),
         ...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit']),
-        ...mapActions(['claimShippingVoucher']),
+        ...mapActions(['claimShippingVoucher', 'fetchShippingVouchers']),
         handleMail(mail) {
             this.sendMail({
                 id: this.ticket.id,
@@ -97,20 +114,23 @@ export default {
             })
         },
         changeTicketStatus(ticket) {
+            ticket.state = this.selected_state;
             this.updateTicketPartial({
                 id: ticket.id,
-                state: ticket.state
+                state: this.selected_state,
             })
         },
-        assigTicket(ticket) {
+        assignTicket(ticket) {
+            ticket.assigned_to = this.selected_assignee;
             this.updateTicketPartial({
                 id: ticket.id,
-                assigned_to: ticket.assigned_to
+                assigned_to: this.selected_assignee
             })
         },
     },
     mounted() {
-        this.scheduleAfterInit(() => [this.fetchTicketStates(), this.loadTickets(), this.loadUsers()]);
+        this.scheduleAfterInit(() => [this.fetchTicketStates(), this.loadTickets(), this.loadUsers(),
+            this.fetchShippingVouchers()]);
     }
 };
 </script>