Update

Areas/Inventory/Views/Item/ItemRegistration.cshtml

@@ -650,7 +650,7 @@
 
             async fetchCompanies() {
                 try {
-                    const response = await fetch('/InvMainAPI/CompanyDepartmentList', {
+                    const response = await fetch('/AdminAPI/GetDepartmentWithCompanyList', {
                         method: 'POST', // Specify the HTTP method
                         headers: {
                             'Content-Type': 'application/json'

Controllers/API/RoleAPI.cs

@@ -4,6 +4,7 @@ using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
 using PSTW_CentralSystem.DBContext;
 using PSTW_CentralSystem.Models;
+using System.ComponentModel.DataAnnotations;
 
 namespace PSTW_CentralSystem.Controllers.API
 {
@@ -31,12 +32,12 @@ namespace PSTW_CentralSystem.Controllers.API
         }
 
         [HttpPost("AddRole")]
-        public async Task<IActionResult> AddRole([FromBody] string roleName)
+        public async Task<IActionResult> AddRole([FromBody] RoleInput newRole)
         {
             try
             {
-                await _roleManager.CreateAsync(new RoleModel { Name = roleName });
+                await _roleManager.CreateAsync(new RoleModel { Name = newRole.newRoleName, Description = newRole.newRoleDescription ?? null });
-                return Ok(new { message = "Role added successfully" });
+                return Ok(new { message = "Role added successfully", newRole = newRole.newRoleName });
             }
             catch (Exception ex)
             {
@@ -57,4 +58,10 @@ namespace PSTW_CentralSystem.Controllers.API
             return Ok(new { message = "Role deleted successfully" });
         }
     }
+    public class RoleInput
+    {
+        [Required]
+        public string? newRoleName { get; set; }
+        public string? newRoleDescription { get; set; }
+    }
 }

Views/Admin/CompDeptAdmin.cshtml

@@ -172,7 +172,7 @@
                     })
                     .then(response => response.json())
                     .then(data => {
-                        console.log(data)
+                        // console.log(data)
                         this.compDeptList = data ? data : [];
                         if (this.compDeptDatatable != null) {
                             this.compDeptDatatable.clear().destroy();

Views/Admin/RoleAdmin.cshtml

@@ -15,6 +15,16 @@
             <div class="card">
                 <div class="card-body">
                     <h4 class="card-title">Role List</h4>
+                    <div class="row">
+                        <div class="col-md-6 col-lg-6">
+                            <form class="form-group" v-on:submit.prevent="addRole">
+                                <label class="form-label">Role Name</label>
+                                <input type="text" class="form-control" placeholder="Role Name" v-model="newRoleName" v-on:input="newRoleName=sentenceCapitalization($event)" required>
+                                <textarea class="form-control" placeholder="Role Description" v-model="newRoleDescription" v-on:input="newRoleDescription=sentenceCapitalization($event)"></textarea>
+                                <button type="submit" class="btn btn-primary m-1">Add</button>
+                            </form>
+                        </div>
+                    </div>
                     <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>
@@ -66,6 +76,8 @@
                     roleList: null,
                     selectedRole: null,
                     roleDatatable: null,
+                    newRoleName: null,
+                    newRoleDescription: null,
                 };
             },
             mounted() {
@@ -96,12 +108,14 @@
                     $('#confirm-dialog').modal('show'); // Show the modal
 
                 },
-                confirmDelete(selectedRole) {
+                async confirmDelete(selectedRole) {
                     try{
-                        var response = fetch('/RoleAPI/DeleteRole/' + selectedRole.id, {
+                        var response = await fetch('/RoleAPI/DeleteRole/' + selectedRole.id, {
-                            method: 'DELETE'
+                            method: 'DELETE',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
                         });
-
                         if (response.ok) {
                             this.roleList = this.roleList.filter(role => role.id !== selectedRole.id);
                             this.$nextTick(() => {
@@ -160,32 +174,36 @@
 
                     this.loading = false;
                 },
-                async updateRole(thisUserRole, thisUserId) {
+                async addRole() {
                     try
                     {
-                        const response = await fetch(`/AdminAPI/UpdateUserStatusAndRole/${thisUserId}`, {
+                        const response = await fetch(`/RoleAPI/AddRole`, {
-                            method: 'PATCH',
+                            method: 'POST',
                             headers: {
                                 'Content-Type': 'application/json'
                             },
-                            body: JSON.stringify(thisUserRole)
+                            body: JSON.stringify({
+                                newRoleName: this.newRoleName,
+                                newRoleDescription: this.newRoleDescription
+                            })
                         });
 
                         if (!response.ok) {
-                            throw new Error('Failed to update role');
+                            throw new Error('Failed to add role');
                         }
-
+                        const data = await response.json();
                         console.log('Role updated successfully');
                     }
                     catch (error) {
-                        console.error('Failed to update role:', error);
+                        const errorResponse = await response.json();
+                        console.error('Failed to add role:', errorResponse.message);
                     }
 
-                    // console.log("User ID:" + thisUserId + " Role:" + thisUserRole);
+                    this.fetchRoles();
-
+                },
-                    //How to reload the table with new data from this.userList
+                sentenceCapitalization(event) {
-
+                    const value = event.target.value.trimStart();
-                    this.fetchUsers();
+                    return value.charAt(0).toUpperCase() + value.slice(1);
                 },
             }
         })