add text field to add comment to ticket
This commit is contained in:
parent
5a1de437b6
commit
d1626d1777
6 changed files with 102 additions and 18 deletions
|
|
@ -148,6 +148,7 @@ export default {
|
|||
padding-bottom: 1rem !important;
|
||||
border: var(--gray) solid 1px !important;
|
||||
border-bottom: none !important;
|
||||
color: var(--blue) !important;
|
||||
|
||||
&.active {
|
||||
background: black !important;
|
||||
|
|
|
|||
|
|
@ -23,12 +23,31 @@
|
|||
<span class="timeline-item-icon | faded-icon">
|
||||
<font-awesome-icon icon="comment"/>
|
||||
</span>
|
||||
<div class="new-comment">
|
||||
<div class="input-group">
|
||||
<textarea placeholder="reply mail..." v-model="newMail">
|
||||
<div class="new-comment card bg-dark">
|
||||
<div class="">
|
||||
<textarea placeholder="add comment..." v-model="newComment" class="form-control">
|
||||
</textarea>
|
||||
<button class="btn btn-primary" @click="sendMailandClear">
|
||||
Send
|
||||
<button class="btn btn-primary float-right" @click="addCommentAndClear">
|
||||
<font-awesome-icon icon="comment"/>
|
||||
Save Comment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-item">
|
||||
<span class="timeline-item-icon | faded-icon">
|
||||
<font-awesome-icon icon="envelope"/>
|
||||
</span>
|
||||
<div class="new-mail card bg-dark">
|
||||
<div class="card-header">
|
||||
{{ newestMailSubject }}
|
||||
</div>
|
||||
<div>
|
||||
<textarea placeholder="reply mail..." v-model="newMail" class="form-control">
|
||||
</textarea>
|
||||
<button class="btn btn-primary float-right" @click="sendMailAndClear">
|
||||
<font-awesome-icon icon="envelope"/>
|
||||
Send Mail
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -52,18 +71,27 @@ export default {
|
|||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: ['sendMail'],
|
||||
emits: ['sendMail', 'addComment'],
|
||||
data: () => ({
|
||||
newMail: ""
|
||||
newMail: "",
|
||||
newComment: ""
|
||||
}),
|
||||
computed: {
|
||||
...mapGetters(['stateInfo']),
|
||||
newestMailSubject() {
|
||||
const mail = this.timeline.filter(item => item.type === 'mail').pop();
|
||||
return mail ? mail.subject : "";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
sendMailandClear: function () {
|
||||
sendMailAndClear: function () {
|
||||
this.$emit('sendMail', this.newMail);
|
||||
this.newMail = "";
|
||||
},
|
||||
addCommentAndClear: function () {
|
||||
this.$emit('addComment', this.newComment);
|
||||
this.newComment = "";
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -117,14 +145,14 @@ img {
|
|||
}
|
||||
}
|
||||
|
||||
.new-comment {
|
||||
.new-comment, .new-mail {
|
||||
width: 100%;
|
||||
|
||||
input {
|
||||
textarea, input {
|
||||
border: 1px solid var(--gray);
|
||||
border-radius: 6px;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
height: 5em;
|
||||
padding: 8px 16px;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--gray-dark);
|
||||
|
|
|
|||
|
|
@ -35,9 +35,7 @@ axios.interceptors.response.use(response => response, error => {
|
|||
store.commit('createToast', {title: 'Error: Access denied', message, color: 'danger'});
|
||||
return Promise.reject(error)
|
||||
} else {
|
||||
console.log('error interceptor fired');
|
||||
console.error(error); // todo: toast error
|
||||
console.log(Object.entries(error));
|
||||
console.error('error interceptor fired', error.message);
|
||||
|
||||
if (error.isAxiosError) {
|
||||
const message = `
|
||||
|
|
@ -272,6 +270,7 @@ const store = new Vuex.Store({
|
|||
//credentials failed, logout
|
||||
store.commit('logout');
|
||||
},
|
||||
//async verifyToken({commit, state}) {
|
||||
async afterLogin({dispatch}) {
|
||||
const boxes = dispatch('loadBoxes');
|
||||
const items = dispatch('loadEventItems');
|
||||
|
|
@ -375,6 +374,10 @@ const store = new Vuex.Store({
|
|||
});
|
||||
await dispatch('loadTickets');
|
||||
},
|
||||
async postComment({commit, dispatch}, {id, message}) {
|
||||
const {data} = await axios.post(`/2/tickets/${id}/comment/`, {comment: message});
|
||||
await dispatch('loadTickets');
|
||||
},
|
||||
async loadUsers({commit}) {
|
||||
const {data} = await axios.get('/2/users/');
|
||||
commit('replaceUsers', data);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="card-header">
|
||||
<h3>Ticket #{{ ticket.id }} - {{ ticket.name }}</h3>
|
||||
</div>
|
||||
<Timeline :timeline="ticket.timeline" @sendMail="handleMail"/>
|
||||
<Timeline :timeline="ticket.timeline" @sendMail="handleMail" @addComment="handleComment"/>
|
||||
<div class="card-footer d-flex justify-content-between">
|
||||
<router-link :to="{name: 'tickets'}" class="btn btn-secondary mr-2">Back</router-link>
|
||||
<!--button class="btn btn-danger" @click="deleteItem({type: 'tickets', id: ticket.id})">
|
||||
|
|
@ -24,7 +24,9 @@
|
|||
<select class="form-control" v-model="ticket.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)">Change Status</button>
|
||||
<button class="form-control btn btn-success" @click="changeTicketStatus(ticket)">
|
||||
Change Status
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -54,13 +56,19 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['deleteItem', 'markItemReturned', 'loadTickets', 'sendMail', 'updateTicketPartial', 'fetchTicketStates']),
|
||||
...mapActions(['deleteItem', 'markItemReturned', 'loadTickets', 'sendMail', 'updateTicketPartial', 'fetchTicketStates', 'postComment']),
|
||||
handleMail(mail) {
|
||||
this.sendMail({
|
||||
id: this.ticket.id,
|
||||
message: mail
|
||||
})
|
||||
},
|
||||
handleComment(comment) {
|
||||
this.postComment({
|
||||
id: this.ticket.id,
|
||||
message: comment
|
||||
})
|
||||
},
|
||||
changeTicketStatus(ticket) {
|
||||
this.updateTicketPartial({
|
||||
id: ticket.id,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue