add text field to add comment to ticket

This commit is contained in:
j3d1 2024-01-13 01:40:37 +01:00
parent 5a1de437b6
commit d1626d1777
6 changed files with 102 additions and 18 deletions

View file

@ -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)

View file

@ -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",

View file

@ -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;

View file

@ -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);

View file

@ -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);

View file

@ -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&nbsp;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,