GoMFT/components/admin_roles.templ

package components

import (
	"context"
	"fmt"
)

type Role struct {
	ID          uint
	Name        string
	Description string
	Permissions []string
}

type RolesData struct {
	Roles []Role
	Error string
}

templ AdminRoles(ctx context.Context, data RolesData) {
	@LayoutWithContext("Role Management", ctx) {
		<!-- Roles Management Content -->
		<div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
			<h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center">
				<i class="fas fa-user-shield w-6 h-6 mr-2 text-blue-500 dark:text-blue-400"></i>
				Role Management
			</h1>
			<a href="/admin/roles/new" class="flex items-center justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
				<i class="fas fa-plus w-4 h-4 mr-2"></i>
				New Role
			</a>
		</div>

		<!-- Roles Table -->
		<div class="bg-white rounded-lg shadow-sm dark:bg-gray-800">
			<div class="overflow-x-auto">
				<table class="w-full">
					<thead class="bg-gray-50 dark:bg-gray-700">
						<tr>
							<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Role Name</th>
							<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Description</th>
							<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Permissions</th>
							<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Actions</th>
						</tr>
					</thead>
					<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
						if len(data.Roles) == 0 {
							<tr>
								<td colspan="4" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
									No roles found. Create your first role to get started.
								</td>
							</tr>
						} else {
							for _, role := range data.Roles {
								<tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
									<td class="px-6 py-4 text-sm text-gray-900 dark:text-white">{ role.Name }</td>
									<td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">{ role.Description }</td>
									<td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
										<div class="flex flex-wrap gap-1">
											for _, perm := range role.Permissions {
												<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">
													{ perm }
												</span>
											}
										</div>
									</td>
									<td class="px-6 py-4 text-sm text-right">
										<div class="flex items-center justify-end space-x-2">
											<a href={ templ.SafeURL("/admin/roles/" + fmt.Sprint(role.ID)) } class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
												<i class="fas fa-edit"></i>
											</a>
											<button 
												data-role-id={ fmt.Sprint(role.ID) }
												data-role-name={ role.Name }
												data-modal-target="confirm-delete-modal"
												data-modal-toggle="confirm-delete-modal"
												class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
												<i class="fas fa-trash"></i>
											</button>
										</div>
									</td>
								</tr>
							}
						}
					</tbody>
				</table>
			</div>
		</div>

		<!-- Delete Confirmation Modal -->
		<div id="confirm-delete-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
			<div class="relative p-4 w-full max-w-md max-h-full">
				<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
					<div class="p-4 md:p-5 text-center">
						<i class="fas fa-exclamation-triangle mx-auto mb-4 text-red-400 text-3xl"></i>
						<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to delete this role?</h3>
						<div>
							<button 
								id="confirm-delete-button"
								type="button" 
								class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
								Yes, delete it
							</button>
							<button 
								type="button" 
								data-modal-hide="confirm-delete-modal" 
								class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
								No, cancel
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script>
			document.addEventListener('DOMContentLoaded', function() {
				let currentRoleId = null;
				const modal = document.getElementById('confirm-delete-modal');
				
				// Handle delete modal
				const deleteButtons = document.querySelectorAll('[data-modal-target="confirm-delete-modal"]');
				deleteButtons.forEach(button => {
					button.addEventListener('click', function() {
						currentRoleId = this.getAttribute('data-role-id');
					});
				});
				
				// Handle confirm delete button
				const confirmDeleteButton = document.getElementById('confirm-delete-button');
				confirmDeleteButton.addEventListener('click', function() {
					if (currentRoleId) {
						// Use fetch to send DELETE request
						fetch(`/admin/roles/${currentRoleId}`, {
							method: 'DELETE',
							headers: {
								'Content-Type': 'application/json'
							}
						})
						.then(response => {
							if (response.ok) {
								// Reload page on success
								window.location.reload();
							} else {
								// Handle error
								response.json().then(data => {
									alert('Error: ' + (data.error || 'Failed to delete role'));
								}).catch(() => {
									alert('An error occurred while deleting the role');
								});
							}
						})
						.catch(error => {
							console.error('Error:', error);
							alert('An error occurred while deleting the role');
						})
						.finally(() => {
							// Hide modal
							const closeModalButton = document.querySelector('[data-modal-hide="confirm-delete-modal"]');
							if (closeModalButton) closeModalButton.click();
						});
					}
				});
			});
		</script>
	}
}