fix datatable using token api and paginate when searching, fix skrd_amount column to decimal 20

This commit is contained in:
arifal hidayat
2025-01-30 01:28:36 +07:00
parent 538cdb87ae
commit 8591fafd84
27 changed files with 1228 additions and 1012 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,60 @@
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";
class UsersTable {
init() {
this.initTableUsers();
}
initTableUsers() {
new Grid({
columns: [
"ID",
"Name",
"Email",
"Firstname",
"Lastname",
"Position",
],
pagination: {
limit: 15,
server: {
url: (prev, page) =>
`${prev}${prev.includes("?") ? "&" : "?"}page=${
page + 1
}`,
},
},
sort: true,
search: {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
},
server: {
url: `${GlobalConfig.apiHost}/api/users`,
credentials: "include",
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
"Content-Type": "application/json",
},
then: (data) =>
data.data.map((item) => [
item.id,
item.name,
item.email,
item.firstname,
item.lastname,
item.position,
]),
total: (data) => data.meta.total,
},
}).render(document.getElementById("table-users"));
}
}
document.addEventListener("DOMContentLoaded", function (e) {
new UsersTable().init();
});

View File

@@ -0,0 +1,67 @@
import { Grid } from "gridjs/dist/gridjs.umd.js";
import "gridjs/dist/gridjs.umd.js";
import GlobalConfig from "../global-config";
class RequestAssignment {
init() {
this.initTableRequestAssignment();
}
initTableRequestAssignment() {
new Grid({
columns: [
"ID",
"Name",
"Condition",
"Registration Number",
"Document Number",
"Address",
"Status",
"Function Type",
"Consultation Type",
"Due Date",
],
search: {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
},
pagination: {
limit: 15,
server: {
url: (prev, page) =>
`${prev}${prev.includes("?") ? "&" : "?"}page=${
page + 1
}`,
},
},
sort: true,
server: {
url: `${GlobalConfig.apiHost}/api/request-assignments`,
credentials: "include",
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
"Content-Type": "application/json",
},
then: (data) =>
data.data.map((item) => [
item.id,
item.name,
item.condition,
item.registration_number,
item.document_number,
item.address,
item.status_name,
item.function_type,
item.consultation_type,
item.due_date,
]),
total: (data) => data.meta.total,
},
}).render(document.getElementById("table-request-assignment"));
}
}
document.addEventListener("DOMContentLoaded", function (e) {
new RequestAssignment().init();
});

View File

@@ -29,24 +29,26 @@ class SyncronizeTask {
},
},
],
search: {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
},
pagination: {
limit: 15,
server: {
url: (prev, page, limit) => `${prev}?page=${page}`,
url: (prev, page) =>
`${prev}${prev.includes("?") ? "&" : "?"}page=${
page + 1
}`,
},
},
sort: true,
search: {
server: {
url: (prev, page, keyword) =>
`${prev}?page=${page}&search=${keyword}`,
},
},
server: {
url: `${GlobalConfig.apiHost}/api/global-settings`,
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="csrf-token"]')
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
"Content-Type": "application/json",
},
@@ -59,6 +61,7 @@ class SyncronizeTask {
item.created_at,
item.id,
]),
total: (data) => data.meta.total,
},
});
table.render(document.getElementById("general-setting-table"));
@@ -100,9 +103,6 @@ class SyncronizeTask {
}
}
}
document.addEventListener("click", function (e) {
handleDelete(e); // Call the function on click event
});
document.addEventListener("DOMContentLoaded", function (e) {
new SyncronizeTask().init();
});

View File

@@ -1,52 +1,67 @@
import { Grid } from "gridjs/dist/gridjs.umd.js";
import gridjs from 'gridjs/dist/gridjs.umd.js'
import 'gridjs/dist/gridjs.umd.js'
import gridjs from "gridjs/dist/gridjs.umd.js";
import "gridjs/dist/gridjs.umd.js";
import GlobalConfig from "../../global-config.js";
class SyncronizeTask {
init(){
this.initTableImportDatasources();
this.onSyncSubmit();
}
initTableImportDatasources(){
new Grid({
columns: [
"ID", "Message", "Response", "Status", "Created",
],
pagination: {
limit: 15,
server: {
url: (prev, page, limit) => `${prev}?page=${page}`
}
},
sort: true,
search: {
server: {
url: (prev, page, keyword) => `${prev}?page=${page}&search=${keyword}`
}
},
server: {
url: `${GlobalConfig.apiHost}/api/import-datasource`,
then: data => data.data.map((item) => [item.id, item.message, item.response_body, item.status, item.created_at])
}
}).render(document.getElementById("table-import-datasources"));
}
onSyncSubmit(){
const form = document.getElementById("sync-form");
if(form){
form.addEventListener("submit", function (event) {
event.preventDefault(); // Prevent the default form submission
const button = document.getElementById("btn-sync-submit");
if (button) {
button.disabled = true;
button.innerText = "Processing...";
}
form.submit();
});
init() {
this.initTableImportDatasources();
this.onSyncSubmit();
}
initTableImportDatasources() {
new Grid({
columns: ["ID", "Message", "Response", "Status", "Created"],
search: {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
},
pagination: {
limit: 15,
server: {
url: (prev, page) =>
`${prev}${prev.includes("?") ? "&" : "?"}page=${
page + 1
}`,
},
},
sort: true,
server: {
url: `${GlobalConfig.apiHost}/api/import-datasource`,
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
"Content-Type": "application/json",
},
then: (data) =>
data.data.map((item) => [
item.id,
item.message,
item.response_body,
item.status,
item.created_at,
]),
total: (data) => data.meta.total,
},
}).render(document.getElementById("table-import-datasources"));
}
onSyncSubmit() {
const form = document.getElementById("sync-form");
if (form) {
form.addEventListener("submit", function (event) {
event.preventDefault(); // Prevent the default form submission
const button = document.getElementById("btn-sync-submit");
if (button) {
button.disabled = true;
button.innerText = "Processing...";
}
form.submit();
});
}
}
}
}
document.addEventListener('DOMContentLoaded', function (e) {
new SyncronizeTask().init();
});
document.addEventListener("DOMContentLoaded", function (e) {
new SyncronizeTask().init();
});

View File

@@ -1,128 +1,70 @@
import { Grid } from "gridjs/dist/gridjs.umd.js";
import gridjs from 'gridjs/dist/gridjs.umd.js'
import 'gridjs/dist/gridjs.umd.js'
import gridjs from "gridjs/dist/gridjs.umd.js";
import "gridjs/dist/gridjs.umd.js";
import GlobalConfig from "../global-config";
class CommonTable {
init() {
// this.CommonTableInit();
this.CommonTableInitWithFetchApi();
}
init() {
// this.CommonTableInit();
this.CommonTableInitWithFetchApi();
}
CommonTableInit() {
new Grid({
columns: [
{
name: 'ID',
formatter: (function (cell) {
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
})
},
"Name",
{
name: 'Email',
formatter: (function (cell) {
return gridjs.html('<a href="">' + cell + '</a>');
})
},
"Position", "Company", "Country",
{
name: 'Actions',
width: '120px',
formatter: (function (cell) {
return gridjs.html(`
CommonTableInitWithFetchApi() {
fetch(`${GlobalConfig.apiHost}/api/users`)
.then((response) => response.json())
.then((data) => {
console.log("check log response");
console.log(data.data);
new Grid({
columns: [
{
name: "id",
formatter: function (cell) {
return gridjs.html(
'<span class="fw-semibold">' +
cell +
"</span>"
);
},
},
"name",
{
name: "email",
formatter: function (cell) {
return gridjs.html(
'<a href="">' + cell + "</a>"
);
},
},
"position",
"firstname",
"lastname",
{
name: "Actions",
width: "120px",
formatter: function (cell) {
return gridjs.html(`
<div class="d-flex justify-items-end gap-10">
<a href="#" class="text-primary text-decoration-underline me-2">Details</a>
<a href="#" class="text-warning text-decoration-underline me-2">Update</a>
<a href="#" class="text-danger text-decoration-underline">Delete</a>
</div>
`);
})
},
],
pagination: {
limit: 10
},
sort: true,
search: true,
data: [
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["16", "Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
["17", "Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
["18", "Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
["19", "Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
["20", "Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
]
}).render(document.getElementById("common-table"));
}
CommonTableInitWithFetchApi(){
fetch(`${GlobalConfig.apiHost}/api/users`)
.then((response) => response.json())
.then((data) => {
console.log("check log response");
console.log(data.data);
new Grid({
columns: [
{
name: 'id',
formatter: (function (cell) {
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
},
},
],
pagination: {
limit: 10,
},
sort: true,
search: true,
data: data,
}).render(document.getElementById("common-table"));
})
},
"name",
{
name: 'email',
formatter: (function (cell) {
return gridjs.html('<a href="">' + cell + '</a>');
})
},
"position", "firstname", "lastname",
{
name: 'Actions',
width: '120px',
formatter: (function (cell) {
return gridjs.html(`
<div class="d-flex justify-items-end gap-10">
<a href="#" class="text-primary text-decoration-underline me-2">Details</a>
<a href="#" class="text-warning text-decoration-underline me-2">Update</a>
<a href="#" class="text-danger text-decoration-underline">Delete</a>
</div>
`);
})
},
],
pagination: {
limit: 10
},
sort: true,
search: true,
data: data
}).render(document.getElementById("common-table"));
})
.catch((error) => console.error("Error fetching data: " + error));
}
.catch((error) => console.error("Error fetching data: " + error));
}
}
document.addEventListener('DOMContentLoaded', function (e) {
new CommonTable().init();
});
document.addEventListener("DOMContentLoaded", function (e) {
new CommonTable().init();
});

View File

@@ -39,25 +39,25 @@ class="authentication-bg"
<input type="email" class="form-control" id="email" name="email" value="user@demo.com" placeholder="Enter your email">
</div>
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
{{-- <div class="d-flex justify-content-between align-items-center">
<label for="password" class="form-label">Password</label>
<a href="{{ route ('password.request') }}" class="text-decoration-none small text-muted">Forgot password?</a>
</div>
</div> --}}
<input type="password" class="form-control" id="password" name="password" value="password" placeholder="Enter your password">
</div>
<div class="form-check mb-3">
{{-- <div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="remember-me">
<label class="form-check-label" for="remember-me">Remember me</label>
</div>
</div> --}}
<div class="d-grid">
<button class="btn btn-dark btn-lg fw-medium" type="submit">Sign In</button>
</div>
</form>
</div>
</div>
<p class="text-center mt-4 text-white text-opacity-50">Don't have an account?
{{-- <p class="text-center mt-4 text-white text-opacity-50">Don't have an account?
<a href="{{ route ('register') }}" class="text-decoration-none text-white fw-bold">Sign Up</a>
</p>
</p> --}}
</div>
</div>
</div>

View File

@@ -29,7 +29,7 @@
<div class="collapse" id="sidebarDashboard">
<ul class="nav sub-navbar-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="{{ route ('dashboards.bigdata' ) }}">SIBEDAS</a>
<a class="sub-nav-link" href="{{ route ('home' ) }}">SIBEDAS</a>
</li>
<li class="sub-nav-item">
<a class="sub-nav-link" href="{{ route ('home' ) }}">Dashboard 2</a>
@@ -52,7 +52,7 @@
<div class="collapse" id="sidebarDataMaster">
<ul class="nav sub-navbar-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="{{ route ('master.users' ) }}">Users</a>
<a class="sub-nav-link" href="{{ route ('users.index' ) }}">Users</a>
</li>
</ul>
</div>
@@ -79,14 +79,14 @@
</li>
<li class="nav-item">
<a class="nav-link menu-arrow" href="#sidebarSettings" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarSettings">
<a class="nav-link menu-arrow" href="#requestAssignment" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="requestAssignment">
<span class="nav-icon">
<iconify-icon icon="mingcute:task-line"></iconify-icon>
</span>
<span class="nav-text">Request Assignment</span>
</a>
<div class="collapse" id="sidebarSettings">
<div class="collapse" id="requestAssignment">
<ul class="nav sub-navbar-nav">
<li class="sub-nav-item">
<a class="sub-nav-link" href="{{ route ('request-assignments.index' ) }}">Task</a>

View File

@@ -9,6 +9,7 @@
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#ffffff">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="api-token" content="{{ session('api_token') }}">
<!-- App favicon -->
<link rel="shortcut icon" href="/images/dputr.ico">

View File

@@ -183,7 +183,7 @@
<form id="logout-form" action="{{route('logout')}}" method="POST" style="display: none;">
@csrf
</form>
<a class="dropdown-item text-danger" href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
<a class="dropdown-item text-danger" href="#" onclick="event.preventDefault(); logoutUser();">
<iconify-icon icon="solar:logout-3-outline"
class="align-middle me-2 fs-18"></iconify-icon><span
class="align-middle">Logout</span>
@@ -193,4 +193,13 @@
</div>
</div>
</div>
</header>
</header>
<script>
function logoutUser() {
// Hapus token dari localStorage
localStorage.removeItem('token');
// Submit form logout Laravel
document.getElementById('logout-form').submit();
}
</script>

View File

@@ -10,16 +10,16 @@
<div class="row">
<div class="d-flex justify-content-end pb-3">
<a href="{{ route('master.users.create')}}" class="btn btn-outline-success width-lg">Create</a>
<a href="{{ route('users.create')}}" class="btn btn-outline-success width-lg">Create</a>
</div>
{{$users}}
<div>
<div id="common-table"></div>
<div id="table-users"></div>
</div>
</div>
@endsection
@section('scripts')
@vite(['resources/js/tables/common-table.js'])
@vite(['resources/js/master/users/users.js'])
@endsection

View File

@@ -10,14 +10,12 @@
<div class="row">
<div>
<h1>Request Assignment Page</h1>
</div>
<div>
<div id="table-import-datasources"></div>
<div id="table-request-assignment"></div>
</div>
</div>
@endsection
@section('scripts')
@vite(['resources/js/request-assignment/request-assignment.js'])
@endsection

View File

@@ -1,4 +1,4 @@
@extends('layouts.vertical', ['subtitle' => 'Syncronize'])
@extends('layouts.vertical', ['subtitle' => 'General'])
@section('css')
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
@@ -6,7 +6,7 @@
@section('content')
@include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Syncronize'])
@include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'General'])
<div class="row">
<div class="d-flex justify-content-end pb-3">