Vista principal de los usuarios

<x-layout.default>

    <script src="/assets/js/simple-datatables.js"></script>

    <link rel="stylesheet" href="{{ Vite::asset('resources/css/swiper-bundle.min.css') }}">

    <script src="/assets/js/swiper-bundle.min.js"></script>

    <div x-data="usuarios">

        <ul class="flex space-x-2 rtl:space-x-reverse">

            <li>

                <a href="javascript:;" class="text-primary hover:underline">Dashboard</a>

            </li>

            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">

                <span>Administración</span>

            </li>

            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">

                <span>Usuarios</span>

            </li>

        </ul>

        <div class="panel mt-6">

                <div class="flex items-center flex-wrap mb-5">

                    <button type="button" class="btn btn-primary btn-sm m-1 ">

                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

                        <circle cx="10" cy="6" r="4" stroke="#1C274C" stroke-width="1.5"/>

                        <path d="M21 10H19M19 10H17M19 10L19 8M19 10L19 12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>

                        <path d="M17.9975 18C18 17.8358 18 17.669 18 17.5C18 15.0147 14.4183 13 10 13C5.58172 13 2 15.0147 2 17.5C2 19.9853 2 22 10 22C12.231 22 13.8398 21.8433 15 21.5634" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>

                    </svg>

                        Crear nuevo usuario

                    </button>

            </div>

            <table id="myTable" class="whitespace-nowrap table-hover">

                <thead>

                    <tr>

                        <th>Id</th>

                        <th>Nombre</th>

                        <th>Acciones</th> <!-- Nueva columna para las acciones -->

                    </tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

    <link rel="stylesheet" href="{{ Vite::asset('resources/css/highlight.min.css') }}">

    <script src="/assets/js/highlight.min.js"></script>

    <script>

        const usuarios = @json($usuarios);

        const data = usuarios.map(user => [user.username, user.name, user.roles[0].name, user.dependencia.nombre, renderIsActive(user.active), renderActions(user.id, user.name)]);

        function renderActions(id, nombre) {

            return `

                <div class="flex space-x-2">

                    <form action="{{ route('catalogos.dependencias.destroy', '') }}/${id}" method="POST" class="inline-block">

                        @csrf

                        @method('DELETE')

                        <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>

                    </form>

                    <button class="btn btn-primary btn-sm">Editar</button>

                </div>`;

        }

        function renderIsActive(bool) {

            if(bool === 0){

                return `<span class="badge whitespace-nowrap bg-danger">No</span>`;

            }else{

                return `<span class="badge whitespace-nowrap bg-success">Si</span>`;

            }

        }

        document.addEventListener('DOMContentLoaded', () => {

            const datatable = new simpleDatatables.DataTable('#myTable', {

                data: {

                    headings: ['Usuario', 'Nombre', 'Tipo', 'Dependencia', 'Activo', 'Acciones'],

                    data: data

                },

                perPage: 10,

                perPageSelect: [10, 20, 30, 50, 100],

                columns: [{

                        select: 0,

                        sort: 'asc'

                    },

                ],

                firstLast: true,

                firstText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',

                lastText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',

                prevText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',

                nextText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',

                labels: {

                    placeholder: "Buscar...",

                    perPage: "{select}",

                    noRows: "No hay filas para mostrar",

                    info: "Mostrando {start} a {end} de {rows} filas",

                },

            });

            window.editItem = editItem;

        });

        showMessage = (msg = 'Example notification text.', position = 'top-end', showCloseButton = true, closeButtonHtml = '', duration = 3000, type = 'success') => {

            const toast = window.Swal.mixin({

                toast: true,

                position: position || 'top-end',

                showConfirmButton: false,

                timer: duration,

                showCloseButton: showCloseButton,

                customClass: {

                    container: 'custom-swal-container',

                    popup: 'custom-swal-popup',

                    title: 'custom-swal-title',

                }

            });

            // Define el color y el icono según el tipo de mensaje

            let color;

            let icon;

            if (type === 'success') {

                color = '#4caf50'; // Color verde para éxito

                icon = 'success'; // Icono de éxito

            } else if (type === 'error') {

                color = '#f44336'; // Color rojo para error

                icon = 'error'; // Icono de error

            }

            // Aplica el estilo al mensaje

            toast.fire({

                title: msg,

                icon: icon,

                showClass: {

                    popup: 'swal2-noanimation',

                },

                hideClass: {

                    popup: '',

                },

                customClass: {

                    title: 'swal2-title',

                    popup: 'swal2-popup',

                    icon: 'swal2-icon',

                },

                timerProgressBar: true,

                timerProgressBarColor: color,

                timerProgressBarHeight: 3,

                background: color,

                iconColor: 'white',

            });

        };

        document.addEventListener('DOMContentLoaded', function() {

            @if(session('success'))

            // Muestra el mensaje de éxito utilizando showMessage

                showMessage("{{ session('success') }}", 'top-end', true, '', 3000, 'success');

            @endif

            @if($errors -> any())

                @foreach($errors -> all() as $error)

                    showMessage("{{$error}}", 'top-end', true, '', 3000, 'error');

                @endforeach

            @endif

        });

    </script>

</x-layout.default>

 No newline at end of file