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
|
|
@ -88,6 +88,12 @@ class IssueViewSet(viewsets.ModelViewSet):
|
|||
|
||||
|
||||
class CommentSerializer(serializers.ModelSerializer):
|
||||
|
||||
def validate(self, attrs):
|
||||
if 'comment' not in attrs or attrs['comment'] == '':
|
||||
raise serializers.ValidationError('comment cannot be empty')
|
||||
return attrs
|
||||
|
||||
class Meta:
|
||||
model = Comment
|
||||
fields = ('id', 'comment', 'timestamp', 'issue_thread')
|
||||
|
|
@ -176,12 +182,33 @@ def get_available_states(request):
|
|||
return Response(get_state_choices())
|
||||
|
||||
|
||||
@api_view(['POST'])
|
||||
@permission_classes([IsAuthenticated])
|
||||
@permission_required('tickets.add_comment', raise_exception=True)
|
||||
def add_comment(request, pk):
|
||||
issue = IssueThread.objects.get(pk=pk)
|
||||
if 'comment' not in request.data or request.data['comment'] == '':
|
||||
return Response({'status': 'error', 'message': 'missing comment'}, status=status.HTTP_400_BAD_REQUEST)
|
||||
comment = Comment.objects.create(
|
||||
issue_thread=issue,
|
||||
comment=request.data['comment'],
|
||||
)
|
||||
systemevent = SystemEvent.objects.create(type='comment added', reference=comment.id)
|
||||
channel_layer = get_channel_layer()
|
||||
async_to_sync(channel_layer.group_send)(
|
||||
'general', {"type": "generic.event", "name": "send_message_to_frontend", "event_id": systemevent.id,
|
||||
"message": "comment added"}
|
||||
)
|
||||
return Response(CommentSerializer(comment).data, status=status.HTTP_201_CREATED)
|
||||
|
||||
|
||||
router = routers.SimpleRouter()
|
||||
router.register(r'tickets', IssueViewSet, basename='issues')
|
||||
router.register(r'comments', CommentViewSet, basename='comments')
|
||||
|
||||
urlpatterns = ([
|
||||
re_path(r'^tickets/(?P<pk>\d+)/reply/$', reply, name='reply'),
|
||||
re_path(r'^tickets/(?P<pk>\d+)/comment/$', add_comment, name='add_comment'),
|
||||
re_path(r'^tickets/manual/$', manual_ticket, name='manual_ticket'),
|
||||
re_path(r'^tickets/states/$', get_available_states, name='get_available_states'),
|
||||
] + router.urls)
|
||||
|
|
|
|||
|
|
@ -175,6 +175,23 @@ class IssueApiTest(TestCase):
|
|||
self.assertEqual(response.json()['issue_thread'], issue.id)
|
||||
self.assertEqual(response.json()['timestamp'], response.json()['timestamp'])
|
||||
|
||||
def test_post_comment_altenative(self):
|
||||
issue = IssueThread.objects.create(
|
||||
name="test issue",
|
||||
)
|
||||
response = self.client.post(f'/api/2/tickets/{issue.id}/comment/', {'comment': 'test'})
|
||||
self.assertEqual(response.status_code, 201)
|
||||
self.assertEqual(response.json()['comment'], 'test')
|
||||
self.assertEqual(response.json()['issue_thread'], issue.id)
|
||||
self.assertEqual(response.json()['timestamp'], response.json()['timestamp'])
|
||||
|
||||
def test_post_alt_comment_empty(self):
|
||||
issue = IssueThread.objects.create(
|
||||
name="test issue",
|
||||
)
|
||||
response = self.client.post(f'/api/2/tickets/{issue.id}/comment/', {'comment': ''})
|
||||
self.assertEqual(response.status_code, 400)
|
||||
|
||||
def test_state_change(self):
|
||||
issue = IssueThread.objects.create(
|
||||
name="test issue",
|
||||
|
|
|
|||
|
|
@ -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…
Reference in a new issue