Att: atualização system messages, separando as mensagens de sistema por fila

app/Http/Controllers/Admin/SystemMessageController.php

@@ -5,13 +5,22 @@ namespace App\Http\Controllers\Admin;
 use App\Helpers\Helper;
 use App\Http\Controllers\Controller;
 use App\Models\SystemMessage;
+use App\Models\Filas;
+use App\Models\NumberChannel;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Gate;
 use Illuminate\Support\Facades\Validator;
 
 class SystemMessageController extends Controller
 {
-    public function index()
+    public function __construct(
+        protected Filas $queueRepository,
+        protected NumberChannel $numberChannelRepository,
+        protected SystemMessage $systemMessageRepository,
+    ) {
+    }
+
+    public function index(Request $request)
     {
         $user = auth()->user();
         if(Gate::forUser($user)->denies('show_system_message')){
@@ -19,9 +28,17 @@ class SystemMessageController extends Controller
         }
 
         $id_empresa = Helper::getIdEmpresa();
-        $systemMessages = SystemMessage::where('id_empresa', $id_empresa)->orderBy('id', 'asc')->get();
+        $channels = $this->numberChannelRepository->list(['id_empresa' => $id_empresa]);
+        $queues = $this->queueRepository->list(['id_empresa' => $id_empresa]);
+
+        $selected = (object) $request->all();
+        
+        $id_number = $request->channel;
+        $id_queue = $request->queue;
+
+        $systemMessages = $this->systemMessageRepository->list(['id_empresa' => $id_empresa, 'id_number' => $id_number, 'id_queue' => $id_queue]);
 
-        return view('admin.cadastros.systemMessage', compact('systemMessages'));
+        return view('admin.cadastros.systemMessage', compact('systemMessages', 'channels', 'queues', 'selected'));
     }
 
     public function create(Request $request)
@@ -45,7 +62,8 @@ class SystemMessageController extends Controller
                 },
             ],
             'momento' => 'required',
-            'ordem' => 'required'
+            'ordem' => 'required',
+            'queue' => 'required'
         ], [
             'required' => 'É preciso informar o campo :attribute.'
         ]);
@@ -59,6 +77,7 @@ class SystemMessageController extends Controller
             'momento' => $request->momento,
             'ordem' => $request->ordem,
             'id_empresa' => $id_empresa,
+            'id_queue' => $request->queue
         ]);
 
         return redirect('systemMessage');
@@ -104,7 +123,8 @@ class SystemMessageController extends Controller
                 },
             ],
             'momento' => 'required',
-            'ordem' => 'required'
+            'ordem' => 'required',
+            'queue' => 'required'
         ], [
             'required' => 'É preciso informar o campo :attribute.'
         ]);
@@ -117,7 +137,8 @@ class SystemMessageController extends Controller
             ->update([
                 'texto' => $request->texto,
                 'ordem' => $request->ordem,
-                'momento' => $request->momento
+                'momento' => $request->momento,
+                'id_queue' => $request->queue
             ]);
 
         return redirect('systemMessage')->with('status', 'atualizado com sucesso');

app/Models/SystemMessage.php

@@ -4,6 +4,7 @@ namespace App\Models;
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\DB;
 
 class SystemMessage extends Model
 {
@@ -19,4 +20,26 @@ class SystemMessage extends Model
         'momento',
         'id_queue',
     ];
+
+    public function list(array $params)
+    {
+        $messages = DB::table('system_message as m')
+        ->join('queues as q', 'q.id', '=', 'm.id_queue')
+        ->join('number_channel as nc', 'nc.id', '=', 'q.id_number')
+        ->select('m.*', 'q.nome as name_queue', 'nc.title as name_channel');
+        
+        if(isset($params['id_empresa'])){
+            $messages->where('m.id_empresa', $params['id_empresa']);
+        }
+
+        if(isset($params['id_queue'])){
+            $messages->where('m.id_queue', $params['id_queue']);
+        }
+
+        if(isset($params['id_number'])){
+            $messages->where('q.id_number', $params['id_number']);
+        }
+
+        return $messages->get();
+    }
 }

public/js/views/systemMessages/cadastroSystemMessage.js

@@ -19,6 +19,44 @@ const listItemFormatValue = 3;
 const valueEspacamento = 50;
 const inputs = document.querySelectorAll('.autoCompleteInput');
 
+document.addEventListener('DOMContentLoaded', function() {
+    const channelSelect = document.getElementById('channelSelect');
+    const queueDiv = document.getElementById('queueDiv');
+    const queueSelect = document.getElementById('queueSelect');
+
+    function updateQueues(selectedChannelId) {
+        const filteredQueues = queues.filter(queue => queue.id_number === selectedChannelId);
+
+        // Limpa as opções anteriores
+        queueSelect.innerHTML = '';
+
+        // Adiciona as novas opções
+        filteredQueues.forEach(queue => {
+            const option = document.createElement('option');
+            option.value = queue.id;
+            option.textContent = queue.nome;
+            queueSelect.appendChild(option);
+        });
+
+        // Mostra a div de fila se houver filas correspondentes
+        if (filteredQueues.length > 0) {
+            queueDiv.style.display = 'block';
+        } else {
+            queueDiv.style.display = 'none';
+        }
+    }
+
+    const firstChannelId = parseInt(channelSelect.options[0].value);
+    channelSelect.value = firstChannelId;
+    updateQueues(firstChannelId);
+
+    // Adiciona o evento de mudança no select de canal
+    channelSelect.addEventListener('change', function() {
+        const selectedChannelId = parseInt(channelSelect.value);
+        updateQueues(selectedChannelId);
+    });
+});
+
 inputs.forEach(input => {
     input.addEventListener('input', (e) => {
         let cont = 0;

resources/views/admin/cadastros/systemMessage.blade.php

@@ -11,25 +11,47 @@
             {{session('error')}}
         </div>
         @endif
-        <div class="header flex flex-col items-center gap-4 mt-2 mb-8">
-            <div class="flex justify-between items-center w-full mb-5">
+        <div class="header flex flex-col">
+            <div class="flex items-center gap-3 w-full mb-5 " style="justify-content: space-between;">
                 <h1 class=" text-gray-900 dark:text-gray-100 text-3xl font-bold text-center">
                     Mensagens de Sistema
                 </h1>
                 @can('store_system_message')
-                <button class="bg-blue-500 hover:bg-opacity-90 transition-all text-white py-2 px-6 rounded text-base overflow-hidden" @click="modal = !modal" type="button">Cadastrar Mensagens</button>
+                    <button class="bg-blue-500 hover:bg-opacity-90 transition-all text-white py-2 px-6 rounded text-base overflow-hidden" @click="modal = !modal" type="button">Cadastrar Mensagens</button>
                 @endcan
             </div>
+            <form class="filtros flex items-center gap-3 " method="get" action="{{route('systemMessage')}}">
+                <div class="flex-1 flex flex-col gap-1" style="max-width: 300px;">
+                    <label class="text-gray-900 dark:text-gray-100">Canal: </label>
+                    <select id="filtroCanal" class="w-full dark:bg-gray-800 placeholder:text-gray-800 dark:placeholder:text-gray-100 dark:text-gray-100" name="channel">
+                        <option value="" {{ empty($selected->channel) ? 'selected disabled' : '' }}>--------------------</option>
+                        @foreach($channels as $channel)
+                            <option value="{{ $channel->id}}" {{ !empty($selected->channel) && ($channel->id == $selected->channel) ? 'selected' : '' }}>
+                                {{ $channel->title }}
+                            </option>
+                        @endforeach
+                    </select>
+                </div>
+                <div class="flex-1 flex flex-col gap-1" style="max-width: 300px;">
+                    <label class="text-gray-900 dark:text-gray-100">Fila: </label>
+                    <select id="filtroFila" class="w-full dark:bg-gray-800 placeholder:text-gray-800 dark:placeholder:text-gray-100 dark:text-gray-100" name="queue"></select>
+                </div>
+                <div class="flex-1 flex flex-col gap-1" style="background-color: transparent; margin-top: 25px;"> 
+                    <button class="lg:ml-auto ml-0 bg-blue-900 hover:bg-opacity-90 transition-all  text-white py-2 px-6 rounded text-lg overflow-hidden">Pesquisar</button>
+                </div>
+            </form>
         </div>
 
         <div class="body mt-4 overflow-auto rounded-lg shadow">
             <table class="w-full">
                 <thead class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
                     <tr>
-                        <th class="p-3 text-sm font-semibold tracking-wide text-left ">ID</th>
+                        <th class="p-3 text-sm font-semibold tracking-wide text-left">ID</th>
                         <th class="p-3 text-sm font-semibold tracking-wide text-left">Texto</th>
                         <th class="p-3 text-sm font-semibold tracking-wide text-left">Ordem</th>
                         <th class="p-3 text-sm font-semibold tracking-wide text-left">Momento</th>
+                        <th class="p-3 text-sm font-semibold tracking-wide text-left">Fila</th>
+                        <th class="p-3 text-sm font-semibold tracking-wide text-left">Canal</th>
                         <th class="p-3 text-sm font-semibold tracking-wide text-left">Ações</th>
                     </tr>
                 </thead>
@@ -41,6 +63,8 @@
                         <td class="p-3 text-sm text-gray-700 dark:text-gray-100 sequence sequence-{{$systemMessage->id}}">{{$systemMessage->ordem}}</td>
 
                         <td class="p-3 text-sm text-gray-700 dark:text-gray-100">{{$systemMessage->momento}}</td>
+                        <td class="p-3 text-sm text-gray-700 dark:text-gray-100">{{$systemMessage->name_queue}}</td>
+                        <td class="p-3 text-sm text-gray-700 dark:text-gray-100">{{$systemMessage->name_channel}}</td>
                         <td class="p-3 text-sm font-bold flex items-center gap-2 flex-wrap">
                             @can('edit_system_message')
                             <button class="bg-blue-600 text-white p-2 rounded w-full text-lg" title="editar mensagem" onclick="atualizasystemMessage(<?= $systemMessage->id ?>)"><i class="fas fa-edit"></i></button>
@@ -63,9 +87,72 @@
         </div>
     </div>
 
-    <x-modal.insert.modalSystemMessage></x-modalSystemMessage>
-    <x-modal.edit.modalEditSystemMessage></x-modalEditSystemMessage>
+    <x-modal.insert.modalSystemMessage :channels="$channels" :queues="$queues"></x-modalSystemMessage>
+    <x-modal.edit.modalEditSystemMessage :channels="$channels" :queues="$queues"></x-modalEditSystemMessage>
+    
+    <script> let queues = []; </script>
+    @foreach($queues as $queue)
+        <script>
+            queues.push({id:{{$queue->id}}, id_number: {{$queue->id_number}}, nome: "{{$queue->name}}"});
+        </script>
+    @endforeach
 
-    <script src="{{ asset('js/views/systemMessages/cadastroSystemMessage.js') }}"></script>
+        <script>
+            const selectedChannel = "<?php isset($selected->channel) ? print($selected->channel) : print("") ?>";
+            const selectedQueue =  "<?php  isset($selected->queue) ? print($selected->queue) : print("") ?>";
 
+            document.addEventListener('DOMContentLoaded', function() {
+                const channelSelect = document.getElementById('filtroCanal');
+                const queueSelect = document.getElementById('filtroFila');
+
+                function updateFiltroQueues(selectedChannelId) {
+                    const filteredQueues = queues.filter(queue => queue.id_number === selectedChannelId);
+
+                    // Limpa as opções anteriores
+                    queueSelect.innerHTML = '';
+
+                    const option = document.createElement('option');
+                    option.value = "";
+                    option.textContent = "--------------------";
+                    
+                    if (selectedQueue != null ) {
+                        option.selected = true;
+                    }
+
+                    queueSelect.appendChild(option);
+
+                    // Adiciona as novas opções
+                    filteredQueues.forEach(queue => {
+                        const option = document.createElement('option');
+                        option.value = queue.id;
+                        option.textContent = queue.nome;
+
+                        if (selectedQueue == queue.id ) {
+                            option.selected = true;
+                        }
+
+                        queueSelect.appendChild(option);
+                    });
+
+                    // Mostra a div de fila se houver filas correspondentes
+                    if (filteredQueues.length > 0) {
+                        queueDiv.style.display = 'block';
+                    } else {
+                        queueDiv.style.display = 'none';
+                    }
+                }
+
+                if (selectedChannel != null) {
+                    updateFiltroQueues(+selectedChannel);
+                }
+                
+                // Adiciona o evento de mudança no select de canal
+                channelSelect.addEventListener('change', function() {
+                    const selectedChannelId = parseInt(channelSelect.value);
+                    updateFiltroQueues(selectedChannelId);
+                });
+            });
+        </script>
+    
+    <script src="{{ asset('js/views/systemMessages/cadastroSystemMessage.js') }}" channels="{{$channels}}"; queues="{{$queues}}";></script>
 </x-app-layout>

resources/views/components/modal/edit/modalEditSystemMessage.blade.php

@@ -41,6 +41,20 @@
 
                         </select>
                     </div>
+
+                    <div class="flex flex-col gap-2 mt-2">
+                        <label class="dark:text-gray-100">Canal:</label>
+                        <select name="channel" id="editChannelSelect" class="w-full dark:bg-gray-800 placeholder:text-gray-800 dark:placeholder:text-gray-100 dark:text-gray-100">
+                            @foreach($channels as $channel)
+                            <option value="{{$channel->id}}">{{$channel->title}}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <div class="flex flex-col gap-2 mt-2" id="editQueueDiv" style="display: none;">
+                        <label class="dark:text-gray-100">Fila:</label>
+                        <select name="queue" id="editQueueSelect" class="w-full dark:bg-gray-800 placeholder:text-gray-800 dark:placeholder:text-gray-100 dark:text-gray-100"></select>
+                    </div>
                 </div>
             </div>
             <!-- Modal footer -->
@@ -86,9 +100,58 @@
                         } else {
                             containerSelect.innerHTML += `<option value="${value}" >${value}</option>`
                         }
-                    })
+                    });
+
+                    const editChannelSelect = document.getElementById('editChannelSelect');
+                    const editQueueSelect = document.getElementById('editQueueSelect');
+                    const editQueueDiv = document.getElementById('editQueueDiv');
+
+                    const selectedQueue = queues.find(queue => queue.id === systemMessageData.id_queue);
+
+                    if (selectedQueue) {
+                        editChannelSelect.value = selectedQueue.id_number;
+
+                        editUpdateQueues(selectedQueue.id_number, systemMessageData.id_queue);
+                    }
                 }
             });
+        }
+
+        function editUpdateQueues(channelId, selectedQueueId = null) {
+            const editQueueSelect = document.getElementById('editQueueSelect');
+            const editQueueDiv = document.getElementById('editQueueDiv');
+
+            // Filter queues based on channelId
+            const filteredQueues = queues.filter(queue => queue.id_number === channelId);
+
+            // Clear previous options
+            editQueueSelect.innerHTML = '';
+
+            // Add new options
+            filteredQueues.forEach(queue => {
+                const option = document.createElement('option');
+                option.value = queue.id;
+                option.textContent = queue.nome;
+                if (queue.id === selectedQueueId) {
+                    option.selected = true;
+                }
+                editQueueSelect.appendChild(option);
+            });
 
+            // Show the queue div if there are queues available
+            if (filteredQueues.length > 0) {
+                editQueueDiv.style.display = 'block';
+            } else {
+                editQueueDiv.style.display = 'none';
+            }
         }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const editChannelSelect = document.getElementById('editChannelSelect');
+
+            editChannelSelect.addEventListener('change', function() {
+                const selectedChannelId = parseInt(editChannelSelect.value);
+                editUpdateQueues(selectedChannelId);
+            });
+        });
     </script>

resources/views/components/modal/insert/modalSystemMessage.blade.php

@@ -46,6 +46,20 @@
                             <option value="FINALIZAR_PESQUISA">FINALIZAR_PESQUISA</option>
                         </select>
                     </div>
+
+                    <div class="flex flex-col gap-2 mt-2">
+                        <label class="dark:text-gray-100">Canal:</label>
+                        <select name="channel" id="channelSelect" class="w-full dark:bg-gray-800 placeholder:text-gray-800 dark:placeholder:text-gray-100 dark:text-gray-100">
+                            @foreach($channels as $channel)
+                            <option value="{{$channel->id}}">{{$channel->title}}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <div class="flex flex-col gap-2 mt-2" id="queueDiv" style="display: none;">
+                        <label class="dark:text-gray-100">Fila:</label>
+                        <select name="queue" id="queueSelect" class="w-full dark:bg-gray-800 placeholder:text-gray-800 dark:placeholder:text-gray-100 dark:text-gray-100"></select>
+                    </div>
                 </div>
             </div>
             <!-- Modal footer -->