fix js roles and add back button on card header

app/Http/Controllers/Api/RolesController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Api;
 
 use App\Http\Controllers\Controller;
+use App\Http\Requests\RoleRequest;
 use App\Models\Role;
 use Illuminate\Http\Request;
 
@@ -13,7 +14,7 @@ class RolesController extends Controller
      */
     public function index(Request $request)
     {
-        $query = Role::query();
+        $query = Role::query()->orderBy('id', 'desc');
 
         if($request->has('search') && !empty($request->get('search'))){
             $query = $query->where('name', 'like', '%'. $request->get('search') . '%');
@@ -25,9 +26,14 @@ class RolesController extends Controller
     /**
      * Store a newly created resource in storage.
      */
-    public function store(Request $request)
+    public function store(RoleRequest $request)
     {
-        //
+        try{
+            $role = Role::create($request->validated());
+            return response()->json(['message' => 'Successfully created', 'data' => $role]);
+        }catch(\Exception $e){
+            return response()->json(['message' => 'Error when creating role', 'error' => $e->getMessage()], 500);
+        }
     }
 
     /**
@@ -35,15 +41,34 @@ class RolesController extends Controller
      */
     public function show(string $id)
     {
-        //
+        try{
+            $role = Role::find($id);
+            if($role){
+                return response()->json(['data' => $role]);
+            } else {
+                return response()->json(['message' => 'Role not found'], 404);
+            }
+        }catch(\Exception $e){
+            return response()->json(['message' => 'Error when getting role', 'error' => $e->getMessage()], 500);
+        }
     }
 
     /**
      * Update the specified resource in storage.
      */
-    public function update(Request $request, string $id)
+    public function update(RoleRequest $request, string $id)
     {
-        //
+        try{
+            $role = Role::find($id);
+            if($role){
+                $role->update($request->validated());
+                return response()->json(['message' => 'Successfully updated', 'data' => $role]);
+            } else {
+                return response()->json(['message' => 'Role not found'], 404);
+            }
+        }catch(\Exception $e){
+            return response()->json(['message' => 'Error when updating role', 'error' => $e->getMessage()], 500);
+        }
     }
 
     /**
@@ -51,6 +76,16 @@ class RolesController extends Controller
      */
     public function destroy(string $id)
     {
-        //
+        try{
+            $role = Role::find($id);
+            if($role){
+                $role->delete();
+                return response()->json(['message' => 'Successfully deleted']);
+            } else {
+                return response()->json(['message' => 'Role not found'], 404);
+            }
+        }catch(\Exception $e){
+            return response()->json(['message' => 'Error when deleting role', 'error' => $e->getMessage()], 500);
+        }
     }
 }

app/Http/Requests/RoleRequest.php

@@ -21,7 +21,7 @@ class RoleRequest extends FormRequest
      */
     public function rules(): array
     {
-        $roleId = $this->route('role');
+        $roleId = $this->route('role_id');
         return [
             'name' => 'required|string|max:255|unique:roles,name,' . ($roleId ?? 'NULL') . ',id',
             'description' => 'nullable|string',

resources/js/customers/edit.js

@@ -1,9 +1,9 @@
 class UpdateCustomer {
     constructor() {
-        this.initUpdateSpatial();
+        this.initUpdateCustomer();
     }
 
-    initUpdateSpatial() {
+    initUpdateCustomer() {
         const toastNotification = document.getElementById("toastNotification");
         const toast = new bootstrap.Toast(toastNotification);
         document

resources/js/roles/create.js

@@ -1,4 +1,9 @@
-document.addEventListener("DOMContentLoaded", function (e) {
+class CreateRoles {
+    constructor() {
+        this.initCreateRole();
+    }
+
+    initCreateRole() {
         const toastNotification = document.getElementById("toastNotification");
         const toast = new bootstrap.Toast(toastNotification);
         document
@@ -23,9 +28,9 @@ document.addEventListener("DOMContentLoaded", function (e) {
                     let response = await fetch(form.action, {
                         method: "POST",
                         headers: {
-                        "X-CSRF-TOKEN": document
+                            Authorization: `Bearer ${document
-                            .querySelector('meta[name="csrf-token"]')
+                                .querySelector('meta[name="api-token"]')
-                            .getAttribute("content"),
+                                .getAttribute("content")}`,
                         },
                         body: formData,
                     });
@@ -44,6 +49,8 @@ document.addEventListener("DOMContentLoaded", function (e) {
                             error.message;
                         toast.show();
                         console.error("Error:", error);
+                        submitButton.disabled = false;
+                        spinner.classList.add("d-none");
                     }
                 } catch (error) {
                     console.error("Request failed:", error);
@@ -52,4 +59,9 @@ document.addEventListener("DOMContentLoaded", function (e) {
                     toast.show();
                 }
             });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new CreateRoles();
 });

resources/js/roles/index.js

@@ -2,46 +2,31 @@ import { Grid } from "gridjs/dist/gridjs.umd.js";
 import gridjs from "gridjs/dist/gridjs.umd.js";
 import "gridjs/dist/gridjs.umd.js";
 import GlobalConfig from "../global-config";
+import Swal from "sweetalert2";
 
 class Roles {
     constructor() {
-        this.table = null; // Store Grid.js instance
+        this.toastMessage = document.getElementById("toast-message");
-    }
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
+        this.table = null;
 
-    init() {
+        // Initialize functions
         this.initTableRoles();
+        this.initEvents();
+    }
+    initEvents() {
+        document.body.addEventListener("click", async (event) => {
+            const deleteButton = event.target.closest(".btn-delete-role");
+            if (deleteButton) {
+                event.preventDefault();
+                await this.handleDelete(deleteButton);
+            }
+        });
     }
 
     initTableRoles() {
         let tableContainer = document.getElementById("table-roles");
-
-        // If table instance already exists, update it instead of re-creating
-        if (this.table) {
-            this.table
-                .updateConfig({
-                    server: {
-                        url: `${GlobalConfig.apiHost}/api/api-roles`,
-                        credentials: "include",
-                        headers: {
-                            Authorization: `Bearer ${document
-                                .querySelector('meta[name="api-token"]')
-                                .getAttribute("content")}`,
-                            "Content-Type": "application/json",
-                        },
-                        then: (data) =>
-                            data.data.map((item) => [
-                                item.id,
-                                item.name,
-                                item.description,
-                                item.id,
-                            ]),
-                        total: (data) => data.total,
-                    },
-                })
-                .forceRender();
-            return;
-        }
-
         // Create a new Grid.js instance only if it doesn't exist
         this.table = new gridjs.Grid({
             columns: [
@@ -82,7 +67,7 @@ class Roles {
                 },
             },
             server: {
-                url: `${GlobalConfig.apiHost}/api/api-roles`,
+                url: `${GlobalConfig.apiHost}/api/roles`,
                 credentials: "include",
                 headers: {
                     Authorization: `Bearer ${document
@@ -100,116 +85,63 @@ class Roles {
                 total: (data) => data.total,
             },
         }).render(tableContainer);
-
-        document.addEventListener("click", this.handleDelete.bind(this));
     }
 
-    handleDelete(event) {
+    async handleDelete(deleteButton) {
-        if (event.target.classList.contains("btn-delete-role")) {
+        const id = deleteButton.getAttribute("data-id");
-            event.preventDefault();
 
-            const id = event.target.getAttribute("data-id");
+        const result = await Swal.fire({
-            let modalElement = document.getElementById("modalConfirmation");
+            title: "Are you sure?",
-            let toastMessage = document.getElementById("toast-message");
+            text: "You won't be able to revert this!",
-
+            icon: "warning",
-            if (!modalElement) {
+            showCancelButton: true,
-                console.error("Modal element not found!");
+            confirmButtonColor: "#3085d6",
-                return;
+            cancelButtonColor: "#d33",
-            }
+            confirmButtonText: "Yes, delete it!",
-
+        });
-            let modal = new bootstrap.Modal(modalElement);
-            let btnSaveConfirmation = document.getElementById(
-                "btnSaveConfirmation"
-            );
-            let toastElement = document.getElementById("toastNotification");
-            let toast = new bootstrap.Toast(toastElement);
-
-            // Remove previous event listeners to avoid multiple bindings
-            btnSaveConfirmation.replaceWith(
-                btnSaveConfirmation.cloneNode(true)
-            );
-            btnSaveConfirmation = document.getElementById(
-                "btnSaveConfirmation"
-            );
-
-            // Set the role ID on the confirm button inside the modal
-            btnSaveConfirmation.setAttribute("data-role-id", id);
-
-            // Show the modal
-            modal.show();
-
-            btnSaveConfirmation.addEventListener("click", async () => {
-                let roleId = btnSaveConfirmation.getAttribute("data-role-id");
 
+        if (result.isConfirmed) {
             try {
-                    let response = await fetch(`/roles/${roleId}`, {
+                let response = await fetch(
+                    `${GlobalConfig.apiHost}/api/roles/${id}`,
+                    {
                         method: "DELETE",
                         credentials: "include",
-                        headers: {
-                            "X-CSRF-TOKEN": document
-                                .querySelector('meta[name="csrf-token"]')
-                                .getAttribute("content"),
-                            "Content-Type": "application/json",
-                        },
-                    });
-
-                    if (response.ok) {
-                        let result = await response.json();
-                        toastMessage.innerText =
-                            result.message || "Deleted successfully!";
-                        toast.show();
-
-                        // Hide modal
-                        modal.hide();
-
-                        // Refresh Grid.js table
-                        this.refreshRolesTable();
-                    } else {
-                        let error = await response.json();
-                        console.error("Delete failed:", error);
-                        toastMessage.innerText =
-                            error.message || "Delete failed!";
-                        toast.show();
-                    }
-                } catch (error) {
-                    console.error("Error deleting item:", error);
-                    toastMessage.innerText = "An error occurred!";
-                    toast.show();
-                }
-            });
-        }
-    }
-
-    refreshRolesTable() {
-        if (this.table) {
-            this.table
-                .updateConfig({
-                    server: {
-                        url: `${GlobalConfig.apiHost}/api/api-roles`,
-                        credentials: "include",
                         headers: {
                             Authorization: `Bearer ${document
                                 .querySelector('meta[name="api-token"]')
                                 .getAttribute("content")}`,
                             "Content-Type": "application/json",
                         },
-                        then: (data) =>
+                    }
-                            data.data.map((item) => [
+                );
-                                item.id,
+
-                                item.name,
+                if (response.ok) {
-                                item.description,
+                    let result = await response.json();
-                                item.id,
+                    this.toastMessage.innerText =
-                            ]),
+                        result.message || "Deleted successfully!";
-                        total: (data) => data.total,
+                    this.toast.show();
-                    },
+
-                })
+                    // Refresh Grid.js table
-                .forceRender();
+                    if (typeof this.table !== "undefined") {
+                        this.table.updateConfig({}).forceRender();
+                    }
                 } else {
-            this.initTableRoles(); // If the table is null, reinitialize
+                    let error = await response.json();
+                    console.error("Delete failed:", error);
+                    this.toastMessage.innerText =
+                        error.message || "Delete failed!";
+                    this.toast.show();
+                }
+            } catch (error) {
+                console.error("Error deleting item:", error);
+                this.toastMessage.innerText = "An error occurred!";
+                this.toast.show();
+            }
         }
     }
 }
 
 document.addEventListener("DOMContentLoaded", function (e) {
-    new Roles().init();
+    new Roles();
 });

resources/js/roles/update.js

@@ -1,13 +1,17 @@
-document.addEventListener("DOMContentLoaded", function (e) {
+class UpdateRoles {
-    let form = document.getElementById("formUpdateRole");
+    constructor() {
-    let submitButton = document.getElementById("btnUpdateRole");
+        this.initUpdateRole();
-    let spinner = document.getElementById("spinner");
+    }
-    let toastMessage = document.getElementById("toast-message");
+
-    let toast = new bootstrap.Toast(
+    initUpdateRole() {
-        document.getElementById("toastNotification")
+        const toastNotification = document.getElementById("toastNotification");
-    );
+        const toast = new bootstrap.Toast(toastNotification);
-    submitButton.addEventListener("click", async function () {
+        document
+            .getElementById("btnUpdateRole")
+            .addEventListener("click", async function () {
                 let submitButton = this;
+                let spinner = document.getElementById("spinner");
+                let form = document.getElementById("formUpdateRole");
 
                 if (!form) {
                     console.error("Form element not found!");
@@ -24,30 +28,40 @@ document.addEventListener("DOMContentLoaded", function (e) {
                     let response = await fetch(form.action, {
                         method: "POST",
                         headers: {
-                    "X-CSRF-TOKEN": document
+                            Authorization: `Bearer ${document
-                        .querySelector('meta[name="csrf-token"]')
+                                .querySelector('meta[name="api-token"]')
-                        .getAttribute("content"),
+                                .getAttribute("content")}`,
                         },
                         body: formData,
                     });
 
                     if (response.ok) {
                         let result = await response.json();
-                toastMessage.innerText = result.message;
+                        document.getElementById("toast-message").innerText =
+                            result.message;
                         toast.show();
                         setTimeout(() => {
                             window.location.href = "/roles";
                         }, 2000);
                     } else {
                         let error = await response.json();
-                toastMessage.innerText = error.message;
+                        document.getElementById("toast-message").innerText =
+                            error.message;
                         toast.show();
                         console.error("Error:", error);
+                        submitButton.disabled = false;
+                        spinner.classList.add("d-none");
                     }
                 } catch (error) {
                     console.error("Request failed:", error);
-            toastMessage.innerText = error.message;
+                    document.getElementById("toast-message").innerText =
+                        error.message;
                     toast.show();
                 }
             });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new UpdateRoles();
 });

resources/views/data-settings/create.blade.php

@@ -8,6 +8,9 @@
 <div class="row d-flex justify-content-center">
   <div class="col-lg-6">
     <div class="card">
+      <div class="card-header d-flex justify-content-end">
+        <a href="{{ route('data-settings.index') }}" class="btn btn-sm btn-secondary">Back</a>
+      </div>
       <div class="card-body">
         <form id="formDataSettings" action="{{ route('api.data-settings.store') }}" method="POST">
           @csrf

resources/views/data-settings/edit.blade.php

@@ -8,6 +8,9 @@
 <div class="row d-flex justify-content-center">
 	<div class="col-lg-6">
 		<div class="card">
+			<div class="card-header d-flex justify-content-end">
+        <a href="{{ route('data-settings.index') }}" class="btn btn-sm btn-secondary">Back</a>
+      </div>
 			<div class="card-body">
 				<form id="formUpdateDataSettings" action="{{ route('api.data-settings.update', $data->id) }}" method="POST">
 					@csrf

resources/views/menus/create.blade.php

@@ -12,6 +12,9 @@
 <div class="row d-flex justify-content-center">
     <div class="col-md-6">
         <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('menus.index') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
             <div class="card-body">
                 <form id="formCreateMenus" action="{{route("api.menus.store")}}" method="post">
                     @csrf

resources/views/menus/edit.blade.php

@@ -12,6 +12,9 @@
 <div class="row d-flex justify-content-center">
     <div class="col-md-6">
         <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('menus.index') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
             <div class="card-body">
                 <form id="formUpdateMenus" action="{{route("api.menus.update", $menu->id)}}" method="post">
                     @csrf

resources/views/roles/create.blade.php

@@ -8,8 +8,11 @@
 <div class="row d-flex justify-content-center">
     <div class="col-md-6">
         <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('roles.index') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
             <div class="card-body">
-                <form action="{{route("roles.store")}}" method="post" id="formCreateRole" data-redirect="{{route("roles.index")}}">
+                <form action="{{route("api.roles.store")}}" method="post" id="formCreateRole" data-redirect="{{route("roles.index")}}">
                     @csrf
                     <div class="mb-3">
                         <label class="form-label" for="name">Name</label>

resources/views/roles/edit.blade.php

@@ -8,8 +8,11 @@
 <div class="row d-flex justify-content-center">
     <div class="col-md-6">
         <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('roles.index') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
             <div class="card-body">
-                <form id="formUpdateRole" action="{{route("roles.update", $role->id)}}" method="post" >
+                <form id="formUpdateRole" action="{{route("api.roles.update", $role->id)}}" method="post" >
                     @csrf
                     @method("put")
                     <div class="mb-3">

resources/views/roles/role_menu.blade.php

@@ -7,6 +7,9 @@
 <div class="row d-flex justify-content-center">
     <div class="col-md-12">
         <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('roles.index') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
             <div class="card-body">
                 <h5>Manage Permissions for Role: {{ $role->name }}</h5>
                 <form action="{{route("role-menu.permission.update", $role->id)}}" method="post">

routes/api.php

@@ -108,7 +108,12 @@ Route::group(['middleware' => 'auth:sanctum'], function (){
     });
 
     // roles api
-    Route::apiResource('api-roles', RolesController::class);
+    Route::controller(RolesController::class)->group(function (){
+        Route::get('/roles', 'index')->name('api.roles');
+        Route::post('/roles', 'store')->name('api.roles.store');
+        Route::put('/roles/{role_id}', 'update')->name('api.roles.update');
+        Route::delete('/roles/{role_id}', 'destroy')->name('api.roles.destroy');
+    });
 
     //business industries api 
     Route::apiResource('api-business-industries', BusinessOrIndustriesController::class);