Mark read / unread within ticket card

Author: xaviqv

src/Controllers/TicketsController.php

@@ -2414,6 +2414,7 @@ public function changeRead(Request $request)
 		return response()->json([
 			'result' => $result,
 			'message' => $message,
+			'read_by_agent' => $ticket->read_by_agent,
 			'last_update' => $this->last_update_string()
 		]);
 	}

src/Views/tickets/show/body.blade.php

@@ -1,15 +1,21 @@
 <div class="card">
     <div id="ticket-body" class="card-body">
 		<div class="d-lg-flex mb-2">
-			<h2 class="mr-auto">
-			@if ($ticket->completed_at)
-				<span class="text-success"><span class="fa fa-check-circle" title="tiquet completat" style="cursor: help"></span> {{ $ticket->subject }}</span>
-			@else
-				<span class="text-warning"><span class="fa fa-file" title="tiquet obert" style="cursor: help"></span> {{ $ticket->subject }}</span>
-			@endif
+			<h2 class="mr-auto @if($ticket->agent->id == $u->id && $ticket->read_by_agent != "1") unread_ticket_text @endif">
+				@if ($ticket->completed_at)
+					<span class="text-success"><span class="fa fa-check-circle" title="tiquet completat" style="cursor: help"></span> {{ $ticket->subject }}</span>
+				@else
+					<span class="text-warning"><span class="fa fa-file" title="tiquet obert" style="cursor: help"></span> {{ $ticket->subject }}</span>
+				@endif
 			</h2>
 
 			<div class="text-right">
+				@if ($u->id == $ticket->agent_id)
+					{{-- For assigned agent: Mark ticket as read / unread --}} 
+					<button class="btn btn-light unread_toggle tooltip-info" style="color: #aaa" data-ticket_id="{{ $ticket->id }}" data-toggle="tooltip" title="{{ $ticket->read_by_agent == "2" ? trans('panichd::lang.mark-as-read') : trans('panichd::lang.mark-as-unread') }}">
+						<i class="fas {{ ($ticket->read_by_agent == "2" ? 'fa-user-lock' : ($ticket->read_by_agent == "1" ? 'fa-user' : 'fa-user-edit')) }}"></i>
+					</button>
+				@endif
 				@if ($u->currentLevel() > 1)
 					<a href="{{ route($setting->grab('main_route').'.hide', ['value' => $ticket->hidden ? 'false' : 'true', 'ticket'=>$ticket->id]) }}" class="btn btn-light tooltip-info" style="border: none; color: #aaa;" data-toggle="tooltip" data-placement="top" title="{{ trans('panichd::lang.ticket-hidden-button-title') }}">{!! $ticket->hidden ? '<span class="fa fa-eye-slash"></span> '.trans('panichd::lang.ticket-hidden') : '<span class="fa fa-eye"></span> '.trans('panichd::lang.ticket-visible') !!}</a>
 				@endif

src/Views/tickets/show/scripts.blade.php

@@ -19,6 +19,41 @@
 
 	var category_id=<?=$ticket->category_id;?>;
 	$(document).ready(function() {
+		// Mark ticket as read / unread
+		$(document).on('click', '.unread_toggle', function(e){
+			e.preventDefault();
+
+			$.ajax({
+				type: "POST",
+				url: '{{ route($setting->grab('main_route').'.ajax.read') }}',
+				data: {
+					_token: "{{ csrf_token() }}",
+					ticket_id: $(this).attr('data-ticket_id')
+				},
+
+				success: function( response ) {
+					if (response.result == "ok"){
+						if (response.read_by_agent == "1"){
+							// Mark ticket subject
+							$('#ticket-body h2').removeClass('unread_ticket_text');
+
+							// Change icon
+							$('.unread_toggle i.fas').removeClass().addClass('fas').addClass('fa-user');
+						}else{
+							$('#ticket-body h2').addClass('unread_ticket_text');
+							$('.unread_toggle i.fas').removeClass().addClass('fas').addClass('fa-user-lock');
+						}
+
+						// Update button title
+						$('.unread_toggle').blur().tooltip('dispose');
+						$('.unread_toggle').prop('title', response.read_by_agent == "2" ? '{{ trans('panichd::lang.mark-as-read') }}' : '{{ trans('panichd::lang.mark-as-unread') }}');
+						$('.unread_toggle').tooltip();
+					}
+				}
+			});
+		});
+		
+		// Delete ticket
 		$( ".deleteit" ).click(function( event ) {
 			event.preventDefault();
 			if (confirm("{!! trans('panichd::lang.show-ticket-js-delete') !!}" + $(this).attr("node") + " ?"))