c3lf/c3lf-system-3
7
0
Fork 0
Code Issues 51 Pull requests Projects 2 Releases Wiki Activity Actions

state button has the state pre selected

Browse source
This commit is contained in:
bton 2024-11-02 01:13:21 +01:00 committed by jedi
parent dffd3531fa
commit e801c12601
1 changed files with 32 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
web/src/views/Ticket.vue
View file

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