Last active
October 10, 2025 19:39
-
-
Save pazteddy/2d6ea6e471eb60f4f49d626170ca0eb2 to your computer and use it in GitHub Desktop.
Componente razor para mostrar detalle de nota, pie de nota con el enlace de editar solo para Admin y Writer y consultas para asignar un usuario con el rol Admin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| -- 🔍 Consulta para obtener la lista de usuarios junto con los roles que tienen asignados | |
| -- Esta consulta realiza un JOIN entre las tablas de usuarios, roles y asignaciones (AspNetUserRoles) | |
| SELECT [UserId], -- ID del usuario | |
| [UserName], -- Nombre de usuario | |
| [RoleId], -- ID del rol asignado | |
| [Name] AS RoleName -- Nombre legible del rol | |
| FROM [TechNotesDb].[dbo].[AspNetUserRoles] ur | |
| JOIN [TechNotesDb].[dbo].[AspNetUsers] u ON ur.UserId = u.Id | |
| JOIN [TechNotesDb].[dbo].[AspNetRoles] r ON ur.RoleId = r.Id | |
| -- ✅ Asignar manualmente un usuario al rol "Admin" | |
| -- Esto permitirá que el usuario vea ciertas funcionalidades como el botón para editar notas. | |
| -- IMPORTANTE: reemplaza [USER-ID] por el valor real del Id del usuario que deseas modificar. | |
| UPDATE AspNetUserRoles | |
| SET RoleId = '2b53dcde-4ce5-43a5-9dca-5afe7b55d9bd' | |
| WHERE UserId = '[USER-ID]' | |
| -- 📋 Consulta para ver todos los usuarios registrados en la base de datos | |
| -- Muestra información general de cada usuario (correo, fecha de registro, etc.) | |
| SELECT * FROM AspNetUsers |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Pie de la nota --> | |
| <div class="px-4 py-3 bg-white border-t border-gray-200 flex items-center justify-between"> | |
| <div class="flex flex-col"> | |
| <p class="text-xs font-semibold text-gray-800">@note.CreatedAt.ToString("dd MMM yyyy")</p> | |
| <p class="text-xs text-gray-600">@note.UserName</p> | |
| </div> | |
| <!-- Botón editar --> | |
| <AuthorizeView Roles="Admin, Writer"> | |
| <Authorized> | |
| <a href="/note-editor/@note.Id" | |
| class="inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors duration-200" | |
| style="text-decoration: none;" onclick="event.stopPropagation()"> | |
| <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"> | |
| </path> | |
| </svg> | |
| <span class="text-sm font-medium">Editar</span> | |
| </a> | |
| </Authorized> | |
| </AuthorizeView> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @page "/note-detail/{NoteId:int}" | |
| @inject ISender Sender | |
| <div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8"> | |
| @if (!string.IsNullOrEmpty(errorMessage)) | |
| { | |
| <h2 class="text-3xl font-extrabold text-red-600">Error</h2> | |
| <p class="text-danger">@errorMessage</p> | |
| } | |
| else if (note is not null) | |
| { | |
| <div class="mb-8"> | |
| <h1 class="text-center text-2xl font-bold text-indigo-600 sm:text-3xl">@note?.Title</h1> | |
| <p class="mx-auto mt-4 max-w-md text-center text-gray-500"> | |
| Escrito por: @note?.UserName | |
| </p> | |
| <p class="text-xs dark:text-gray-600">@note?.PublishedAt</p> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-gray-700 leading-relaxed">@note?.Content</p> | |
| </div> | |
| <div class="flex justify-center"> | |
| <a href="/notes" | |
| class="inline-flex items-center gap-2 rounded border border-indigo-600 bg-indigo-600 px-8 py-3 text-white focus:outline-none focus:ring active:text-indigo-500 transition-colors"> | |
| <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path> | |
| </svg> | |
| Volver a notas | |
| </a> | |
| </div> | |
| } | |
| else | |
| { | |
| <p class="text-center text-gray-500">Cargando detalles de la nota...</p> | |
| } | |
| </div> | |
| @code { | |
| [Parameter] | |
| public int NoteId { get; set; } | |
| private NoteResponse? note; | |
| private string errorMessage = string.Empty; | |
| protected override async Task OnParametersSetAsync() | |
| { | |
| var result = await Sender.Send( | |
| new GetNoteByIdQuery { Id = NoteId }); | |
| if (result.IsSuccessful && result.Value is not null) | |
| { | |
| note = (NoteResponse)result.Value; | |
| } | |
| else | |
| { | |
| errorMessage = result.ErrorMessage ?? "Lo sentimos, algo salió mal."; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment