Update

Controllers/API/AdminAPI.cs

@@ -166,13 +166,6 @@ namespace PSTW_CentralSystem.Controllers.API
             }
         }
 
-        [HttpPost("GetRoleList")]
-        public async Task<IActionResult> GetRoleList()
-        {
-            var roles = await _roleManager.Roles.Select(r => new { r.Id, r.Name }).Where(r => r.Name != "SuperAdmin" && r.Name != "SystemAdmin").ToListAsync();
-            return Json(roles);
-        }
-
         [HttpPost("GetDepartmentWithCompanyList")]
         public async Task<IActionResult> GetDepartmentWithCompanyList()
         {
@@ -241,6 +234,7 @@ namespace PSTW_CentralSystem.Controllers.API
                 return StatusCode(500, new { message = $"An error occurred: {ex.Message}" });
             }
         }
+
         public class UpdateDepartmentCompany
         {
             [Required]

Controllers/API/RoleAPI.cs

@@ -1,28 +1,60 @@
-using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
 using PSTW_CentralSystem.DBContext;
+using PSTW_CentralSystem.Models;
 
 namespace PSTW_CentralSystem.Controllers.API
 {
     [ApiController]
     [Route("[controller]")]
+    [Authorize]
     public class RoleAPI : Controller
     {
-
+        private readonly ILogger<RoleAPI> _logger;
-        private readonly ILogger<HomeController> _logger;
         private readonly IdentityDBContext _authDbContext;
+        private readonly RoleManager<RoleModel> _roleManager;
 
-        public RoleAPI(ILogger<HomeController> logger, IdentityDBContext authDbContext)
+        public RoleAPI(ILogger<RoleAPI> logger, IdentityDBContext authDbContext, RoleManager<RoleModel> roleManager)
         {
             _logger = logger; 
             _authDbContext = authDbContext;
+            _roleManager = roleManager;
         }
 
         [HttpPost("GetRoleList")]
         public async Task<IActionResult> GetRoleList()
         {
-            var roleList = await _authDbContext.Roles.Where(r => r.Id != 1 && r.Id != 2).ToListAsync();
+            var roles = await _roleManager.Roles.Select(r => new { r.Id, r.Name, r.Description }).Where(r => r.Name != "SuperAdmin" && r.Name != "SystemAdmin").ToListAsync();
-            return Json(roleList);
+            return Json(roles);
+        }
+
+        [HttpPost("AddRole")]
+        public async Task<IActionResult> AddRole([FromBody] string roleName)
+        {
+            try
+            {
+                await _roleManager.CreateAsync(new RoleModel { Name = roleName });
+                return Ok(new { message = "Role added successfully" });
+            }
+            catch (Exception ex)
+            {
+                return StatusCode(500, new { message = $"An error occurred: {ex.Message}" });
+            }
+        }
+
+        [HttpDelete("DeleteRole/{id}")]
+        public async Task<IActionResult> DeleteRole(string id)
+        {
+            var role = await _roleManager.FindByIdAsync(id);
+            if (role == null)
+            {
+                return NotFound(new { message = "Role not found" });
+            }
+
+            await _roleManager.DeleteAsync(role);
+            return Ok(new { message = "Role deleted successfully" });
         }
     }
 }

Views/Admin/Index.cshtml

@@ -11,21 +11,21 @@
             <div class="card card-hover">
                 <div class="box bg-cyan text-center">
                     <h1 class="font-light text-white">
-                        <i class="mdi mdi-view-dashboard"></i>
+                        <i class="mdi mdi-human"></i>
                     </h1>
-                    <h6 class="text-white">Dashboard</h6>
+                    <h6 class="text-white">User Administration</h6>
                 </div>
             </div>
         </a>
     </div>
     <div class="col-md-6 col-lg-3">
-        <a asp-controller="Admin" asp-action="UserAdmin">
+        <a asp-controller="Admin" asp-action="RoleAdmin">
             <div class="card card-hover">
                 <div class="box bg-cyan text-center">
                     <h1 class="font-light text-white">
-                        <i class="mdi mdi-human"></i>
+                        <i class="mdi mdi-account-settings-variant"></i>
                     </h1>
-                    <h6 class="text-white">User Administration</h6>
+                    <h6 class="text-white">Role Administration</h6>
                 </div>
             </div>
         </a>

Views/Admin/RoleAdmin.cshtml

@@ -0,0 +1,193 @@
+@*
+    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
+*@
+@{
+    ViewData["Title"] = "Role Administration";
+    Layout = "~/Views/Shared/_Layout.cshtml";
+}
+
+<p>
+    @* <a asp-action="UserCreate">Create New</a> *@
+</p>
+<div id="app">
+    <div class="row">
+        <div class="col-md-12 col-lg-12">
+            <div class="card">
+                <div class="card-body">
+                    <h4 class="card-title">Role List</h4>
+                    <div class="col-md-12 col-lg-12">
+                        <div>
+                            <table class="table table-bordered table-hover table-striped no-wrap align-middle" id="roleDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- MODAL -->
+    <div class="modal fade" id="confirm-dialog" tabindex="-1" role="dialog" aria-labelledby="confirm-dialog-title" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="confirm-dialog-title">Confirmation</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" v-on:click="hideModal">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div v-if="selectedRole">
+                    <div class="modal-body">
+                        <p>Are you sure you want to delete role {{ selectedRole.roleName }}?</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="hideModal">Cancel</button>
+                        <input type="hidden" id="delete-id">
+                        <a id="confirmButton" href="#" class="btn btn-danger" v-on:click="confirmDelete(selectedRole)">Confirm</a>
+                    </div>
+                </div>
+                <div v-else><p>Loading...</p></div>
+            </div>
+        </div>
+    </div>
+</div>
+@section Scripts {
+    @{
+        await Html.RenderPartialAsync("_ValidationScriptsPartial");
+    }
+    <script>
+
+        $(function () {
+            app.mount('#app');
+        });
+
+        const app = Vue.createApp({
+            data() {
+                return {
+                    userList: null,
+                    roleList: null,
+                    selectedRole: null,
+                    roleDatatable: null,
+                };
+            },
+            mounted() {
+                this.fetchRoles();
+            },
+            methods: {
+                async fetchRoles() {
+                    fetch('/RoleAPI/GetRoleList', {
+                        method: 'POST'
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        this.roleList = data.length ? data : [];
+                        this.$nextTick(() => {
+                                if (this.roleDatatable != null) {
+                                    this.roleDatatable.clear().destroy();
+                                }
+                            this.initiateTable();
+                        });
+                    })
+                    .catch(error => {
+                        console.error('There was a problem with the fetch operation:', error);
+                    });
+                },
+                deleteRole(roleId, roleName) {
+                    this.selectedRole = { id: roleId, roleName: roleName }; // Set selected user
+                    console.log(this.selectedRole);
+                    $('#confirm-dialog').modal('show'); // Show the modal
+
+                },
+                confirmDelete(selectedRole) {
+                    try{
+                        var response = fetch('/RoleAPI/DeleteRole/' + selectedRole.id, {
+                            method: 'DELETE'
+                        });
+
+                        if (response.ok) {
+                            this.roleList = this.roleList.filter(role => role.id !== selectedRole.id);
+                            this.$nextTick(() => {
+                                if (this.roleDatatable != null) {
+                                    this.roleDatatable.clear().destroy();
+                                }
+                                this.initiateTable();
+                            });
+                        }
+                        else {
+                            console.error('Failed to delete role');
+                        }
+
+                        this.hideModal();
+
+                    }
+                    catch (error) {
+                        console.error('There was a problem with the fetch operation:', error);
+                    }
+                },
+                hideModal() {
+                    $('#confirm-dialog').modal('hide');
+                },
+                async initiateTable() {
+                    self = this;
+                    this.roleDatatable = $('#roleDatatable').DataTable({
+                        "data": self.roleList,
+                        "columns": [
+                            {
+                                "title": "Role",
+                                "data": "name",
+                            },
+                            {
+                                "title": "Description",
+                                "data": "description",
+                            },
+                            {
+                                "title": "Delete",
+                                "data": "id",
+                                "render": function (data, type, row, meta) {
+                                    var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${data}" data-name="${row.name}">Delete</button>`;
+                                    return deleteButton;
+                                },
+                            }
+                        ],
+                        responsive: true,
+                        order: [[5, 'asc']],
+                    })
+
+                    // Attach click event listener to the delete button
+                    $('#roleDatatable tbody').on('click', '.delete-btn', function () {
+                        const roleId = $(this).data('id');
+                        const roleName = $(this).data('name');
+                        self.deleteRole(roleId, roleName);
+                    });
+
+                    this.loading = false;
+                },
+                async updateRole(thisUserRole, thisUserId) {
+                    try
+                    {
+                        const response = await fetch(`/AdminAPI/UpdateUserStatusAndRole/${thisUserId}`, {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(thisUserRole)
+                        });
+
+                        if (!response.ok) {
+                            throw new Error('Failed to update role');
+                        }
+
+                        console.log('Role updated successfully');
+                    }
+                    catch (error) {
+                        console.error('Failed to update role:', error);
+                    }
+
+                    // console.log("User ID:" + thisUserId + " Role:" + thisUserRole);
+
+                    //How to reload the table with new data from this.userList
+
+                    this.fetchUsers();
+                },
+            }
+        })
+    </script>
+}

Views/Admin/UserAdmin.cshtml

@@ -93,7 +93,7 @@
                     });
                 },
                 async fetchRoles() {
-                    fetch('/AdminAPI/GetRoleList', {
+                    fetch('/RoleAPI/GetRoleList', {
                         method: 'POST'
                     })
                     .then(response => response.json())