Merge pull request #59 from devaslanphp/dev

Chat system

app/Http/Livewire/Chat.php

@@ -0,0 +1,63 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use App\Models\Chat as Model;
+use App\Models\Ticket;
+use Filament\Forms\Components\RichEditor;
+use Filament\Forms\Concerns\InteractsWithForms;
+use Filament\Forms\Contracts\HasForms;
+use Livewire\Component;
+
+class Chat extends Component implements HasForms
+{
+    use InteractsWithForms;
+
+    public Ticket $ticket;
+
+    public function mount(): void
+    {
+        $this->form->fill();
+    }
+
+    public function render()
+    {
+        $messages = Model::where('ticket_id', $this->ticket->id)->get();
+        return view('livewire.chat', compact('messages'));
+    }
+
+    /**
+     * Form schema definition
+     *
+     * @return array
+     */
+    protected function getFormSchema(): array
+    {
+        return [
+            RichEditor::make('message')
+                ->label(__('Type a message..'))
+                ->disableLabel()
+                ->placeholder(__('Type a message..'))
+                ->required()
+                ->fileAttachmentsDisk(config('filesystems.default'))
+                ->fileAttachmentsDirectory('chat')
+                ->fileAttachmentsVisibility('private'),
+        ];
+    }
+
+    /**
+     * Send a message
+     *
+     * @return void
+     */
+    public function send(): void
+    {
+        $data = $this->form->getState();
+        Model::create([
+            'message' => $data['message'],
+            'user_id' => auth()->user()->id,
+            'ticket_id' => $this->ticket->id
+        ]);
+        $this->form->fill();
+    }
+}

app/Http/Livewire/TicketDetails.php

@@ -18,7 +18,7 @@ public function mount(): void
     {
         $this->menu = [
             'Comments',
-            'Activities',
+            'Chat',
         ];
         $this->activeMenu = $this->menu[0];
     }
@@ -37,6 +37,7 @@ public function render()
     public function selectMenu($item)
     {
         $this->activeMenu = $item;
+        $this->dispatchBrowserEvent('initMagnificPopupOnTicketComments');
     }
 
     /**

app/Models/Chat.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Chat extends Model
+{
+    use HasFactory, SoftDeletes;
+
+    protected $fillable = [
+        'message',
+        'ticket_id',
+        'user_id'
+    ];
+
+    protected static function boot()
+    {
+        parent::boot();
+        static::addGlobalScope('order', function (Builder $builder) {
+            $builder->orderBy('created_at', 'desc');
+        });
+    }
+
+    public function ticket(): BelongsTo
+    {
+        return $this->belongsTo(Ticket::class);
+    }
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+}

app/Models/Ticket.php

@@ -10,6 +10,7 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Relations\HasOne;
 use Illuminate\Database\Eloquent\SoftDeletes;
 
 class Ticket extends Model implements HasLogsActivity
@@ -79,4 +80,10 @@ public function activityLogLink(): string
     {
         return route('tickets.number', $this->ticket_number);
     }
+
+    public function chat(): HasOne
+    {
+        return $this->hasOne(Chat::class);
+    }
+
 }

database/migrations/2022_09_19_212320_create_chats_table.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('chats', function (Blueprint $table) {
+            $table->id();
+            $table->longText('message');
+            $table->foreignId('ticket_id')->constrained('tickets');
+            $table->foreignId('user_id')->constrained('users');
+            $table->softDeletes();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('chats');
+    }
+};

lang/fr.json

@@ -277,5 +277,11 @@
     "Activity logs": "Journaux d'activité",
     "Here you can see all activity logs of :app": "Ici vous pouvez voir tous les journaux d'activité de :app",
     "Below is the list of activity logs of :app": "Ci-dessous les journaux d'activité de :app",
-    "Search for activity logs": "Rechercher les journaux d'activité"
+    "Search for activity logs": "Rechercher les journaux d'activité",
+    "Chat": "Chat",
+    "Chat section": "Section de chat",
+    "Use the section below to chat with the speakers of this ticket": "Utilisez la section ci-dessous pour échanger avec les intervenants de ce ticket",
+    "Type a message..": "Tapez un message..",
+    "Send": "Envoyer",
+    "No messages yet!": "Aucun message pour le moment !"
 }

public/docs/index.html

@@ -54,7 +54,7 @@
           <!-- Logo -->
           <a class="logo ml-md-3" href="index.html" title="Help Desk">
             <img src="/docs/assets/images/logo.png" alt="Help Desk" width="120" /> </a>
-          <span class="text-2 ml-2">v1.2.4</span>
+          <span class="text-2 ml-2">v1.3.0</span>
           <!-- Logo End -->
 
           <!-- Navbar Toggler -->
@@ -91,6 +91,7 @@
           <li class="nav-item"><a class="nav-link" href="#idocs_faq">FAQ</a></li>
           <li class="nav-item"><a class="nav-link" href="#idocs_changelog">Changelog</a>
             <ul class="nav flex-column">
+                <li class="nav-item"><a class="nav-link" href="#v1-3-0">v1.3.0</a></li>
                 <li class="nav-item"><a class="nav-link" href="#v1-2-4">v1.2.4</a></li>
                 <li class="nav-item"><a class="nav-link" href="#v1-2-3">v1.2.3</a></li>
                 <li class="nav-item"><a class="nav-link" href="#v1-2-2">v1.2.2</a></li>
@@ -124,7 +125,7 @@ <h2>Help Desk</h2>
             <div class="row">
               <div class="col-sm-6 col-lg-4">
                 <ul class="list-unstyled">
-                  <li><strong>Version:</strong> 1.2.4</li>
+                  <li><strong>Version:</strong> 1.3.0</li>
                   <li><strong>Author:</strong> <a href="mailto:[email protected]"
                       target="_blank">heloufir</a>
                   </li>
@@ -321,6 +322,10 @@ <h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-targ
           <section id="idocs_changelog">
             <h2>Changelog</h2>
             <p class="text-4">See what's new added, changed, fixed, improved or updated in the latest versions. </p>
+            <h3 id="v1-3-0">Version 1.3.0 <small class="text-muted">(19 September, 2022)</small></h3>
+            <ul>
+              <li>Chat system: Integrate a simple chat system into ticket details</li>
+            </ul>
             <h3 id="v1-2-4">Version 1.2.4 <small class="text-muted">(19 September, 2022)</small></h3>
             <ul>
               <li>Activity logs: integration of <code>spatie/laravel-activitylog</code></li>

resources/css/app.scss

@@ -75,3 +75,13 @@ table {
         }
     }
 }
+
+#chat {
+    height: 500px;
+
+    #chat-container {
+        img {
+            max-width: 50%;
+        }
+    }
+}

resources/js/app.js

@@ -25,29 +25,33 @@ window.Alpine = Alpine
 
 Alpine.start()
 
-// Open image as magnific popup
-if ($('.magnificpopup-container').length) {
-    $('.magnificpopup-container').magnificPopup({
-        type: 'image',
-        delegate: 'img',
-        gallery: {
-            enabled: true
-        },
-        callbacks: {
-            elementParse: function (qw) {
-                qw.src = qw.el.attr('src');
+// Open image as magnific popup (Ticket comments)
+window.initMagnificPopupOnTicketComments = function () {
+    if ($('.magnificpopup-container').length) {
+        $('.magnificpopup-container').magnificPopup({
+            type: 'image',
+            delegate: 'img',
+            gallery: {
+                enabled: true
+            },
+            callbacks: {
+                elementParse: function (qw) {
+                    qw.src = qw.el.attr('src');
+                }
+            },
+            image: {
+                titleSrc: function (item) {
+                    let title = '';
+                    if (item.el.closest('figure').children('figcaption'))
+                        title = item.el.closest('figure').children('figcaption').text();
+                    return title;
+                }
             }
-        },
-        image: {
-            titleSrc: function (item) {
-                let title = '';
-                if (item.el.closest('figure').children('figcaption'))
-                    title = item.el.closest('figure').children('figcaption').text();
-                return title;
-            }
-        }
-    });
-}
+        });
+    }
+};
+
+(() => window.initMagnificPopupOnTicketComments())();
 
 // Copy text to clipboard
 window.unsecuredCopyToClipboard = function (text) {

resources/views/livewire/chat.blade.php

@@ -0,0 +1,50 @@
+<div class="w-full flex flex-col justify-start items-start gap-5">
+    <div class="w-full flex md:flex-row flex-col justify-between items-start gap-2">
+        <div class="flex flex-col justify-center items-start gap-0">
+            <span class="lg:text-xl md:text-lg text-lg font-medium text-gray-700">
+                @lang('Chat section')
+            </span>
+            <span class="lg:text-lg md:text-sm text-xs font-light text-gray-500">
+                @lang('Use the section below to chat with the speakers of this ticket')
+            </span>
+        </div>
+    </div>
+    <div class="w-full flex flex-col gap-5">
+        <div id="chat" class="relative w-full flex flex-col justify-end items-end gap-3 rounded-lg border border-gray-300 bg-gray-50" wire:poll>
+            @if($messages->count())
+                <div id="chat-container" class="absolute top-0 right-0 left-0 bottom-0 w-full h-full flex flex-col-reverse justify-start items-start gap-8 p-5 overflow-y-auto">
+                    @foreach($messages as $message)
+                        <div class="w-full flex flex-col justify-center gap-1 {{ $message->user_id === auth()->user()->id ? 'items-end' : 'items-start' }}">
+                            <span class="text-xs text-gray-500 font-medium px-2">{{ $message->user->name }}</span>
+                            <div class="w-auto max-w-3xl prose text-left rounded-2xl p-4 shadow {{ $message->user_id === auth()->user()->id ? 'bg-white' : 'bg-primary-100' }}">
+                                {!! $message->message !!}
+                            </div>
+                            <span class="text-xs text-gray-500 font-light px-2">{{ $message->created_at->diffForHumans() }}</span>
+                        </div>
+                    @endforeach
+                </div>
+            @else
+                <div class="absolute top-0 right-0 left-0 bottom-0 w-full h-full flex flex-col justify-center items-center">
+                    <img src="{{ asset('images/comments-empty.jpeg') }}" alt="No comments" class="w-14 opacity-50"/>
+                    <span class="text-lg text-neutral-400 font-light">
+                        @lang('No messages yet!')
+                    </span>
+                </div>
+            @endif
+        </div>
+        <form wire:submit.prevent="send" class="w-full relative flex flex-col justify-start items-start gap-2">
+            <div class="w-full">
+                {{ $this->form }}
+            </div>
+            <div class="flex flex-row items-center gap-1">
+                <button type="submit"
+                        class="py-2 px-3 rounded-lg shadow hover:shadow-lg bg-primary-700 hover:bg-primary-800 text-white text-base">
+                    <div class="flex items-center gap-2">
+                        <i class="fa fa-send-o"></i>
+                        @lang('Send')
+                    </div>
+                </button>
+            </div>
+        </form>
+    </div>
+</div>

resources/views/livewire/ticket-details-comments.blade.php

@@ -5,7 +5,8 @@
                 {{ $this->form }}
             </div>
             <div class="w-full flex flex-row gap-2 justify-between items-center px-5">
-                <button type="submit" wire:loading.attr="disabled" class="rounded-lg flex flex-row justify-center items-center text-center gap-2 text-white bg-primary-700 bg-opacity-90 hover:bg-opacity-100 shadow hover:shadow-lg px-10 py-3 text-sm">
+                <button type="submit" wire:loading.attr="disabled"
+                        class="rounded-lg flex flex-row justify-center items-center text-center gap-2 text-white bg-primary-700 bg-opacity-90 hover:bg-opacity-100 shadow hover:shadow-lg px-10 py-3 text-sm">
                     @lang('Add comment')
                     <div wire:loading>
                         <i class="fa fa-spin fa-spinner"></i>
@@ -18,7 +19,7 @@
         @livewire('ticket-details-comments-content', ['ticket' => $ticket])
     @else
         <div class="w-full flex flex-col justify-center items-center gap-2 text-center">
-            <img src="{{ asset('images/comments-empty.jpeg') }}" alt="No comments" class="w-14 opacity-50" />
+            <img src="{{ asset('images/comments-empty.jpeg') }}" alt="No comments" class="w-14 opacity-50"/>
             <span class="text-lg text-neutral-400 font-light">
                 @lang('No comments yet!')
             </span>

resources/views/livewire/ticket-details.blade.php

@@ -36,8 +36,8 @@
                     @case($activeMenu === 'Comments')
                         @livewire('ticket-details-comments', ['ticket' => $ticket])
                         @break
-                    @case($activeMenu === 'Activities')
-
+                    @case($activeMenu === 'Chat')
+                        @livewire('chat', ['ticket' => $ticket])
                         @break
                 @endswitch
             </div>
@@ -85,6 +85,9 @@
             window.addEventListener('ticketUrlCopied', (event) => {
                 window.unsecuredCopyToClipboard(event.detail.url);
             });
+            window.addEventListener('initMagnificPopupOnTicketComments', (e) => {
+                window.initMagnificPopupOnTicketComments();
+            });
         </script>
     @endpush
 </div>