partial update crud customer data
This commit is contained in:
arifal
65
resources/js/customers/create.js
Normal file
65
resources/js/customers/create.js
Normal file
@@ -0,0 +1,65 @@
|
||||
class CreateCustomer {
|
||||
constructor() {
|
||||
this.initCreateCustomer();
|
||||
}
|
||||
|
||||
initCreateCustomer() {
|
||||
const toastNotification = document.getElementById("toastNotification");
|
||||
const toast = new bootstrap.Toast(toastNotification);
|
||||
document
|
||||
.getElementById("btnCreateCustomer")
|
||||
.addEventListener("click", async function () {
|
||||
let submitButton = this;
|
||||
let spinner = document.getElementById("spinner");
|
||||
let form = document.getElementById("formCreateCustomer");
|
||||
|
||||
if (!form) {
|
||||
console.error("Form element not found!");
|
||||
return;
|
||||
}
|
||||
// Get form data
|
||||
let formData = new FormData(form);
|
||||
|
||||
// Disable button and show spinner
|
||||
submitButton.disabled = true;
|
||||
spinner.classList.remove("d-none");
|
||||
|
||||
try {
|
||||
let response = await fetch(form.action, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
},
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
let result = await response.json();
|
||||
document.getElementById("toast-message").innerText =
|
||||
result.message;
|
||||
toast.show();
|
||||
setTimeout(() => {
|
||||
window.location.href = "/data/customers";
|
||||
}, 2000);
|
||||
} else {
|
||||
let error = await response.json();
|
||||
document.getElementById("toast-message").innerText =
|
||||
error.message;
|
||||
toast.show();
|
||||
console.error("Error:", error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Request failed:", error);
|
||||
document.getElementById("toast-message").innerText =
|
||||
error.message;
|
||||
toast.show();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new CreateCustomer();
|
||||
});
|
||||
65
resources/js/customers/edit.js
Normal file
65
resources/js/customers/edit.js
Normal file
@@ -0,0 +1,65 @@
|
||||
class UpdateCustomer {
|
||||
constructor() {
|
||||
this.initUpdateSpatial();
|
||||
}
|
||||
|
||||
initUpdateSpatial() {
|
||||
const toastNotification = document.getElementById("toastNotification");
|
||||
const toast = new bootstrap.Toast(toastNotification);
|
||||
document
|
||||
.getElementById("btnUpdateCustomer")
|
||||
.addEventListener("click", async function () {
|
||||
let submitButton = this;
|
||||
let spinner = document.getElementById("spinner");
|
||||
let form = document.getElementById("formUpdateCustomer");
|
||||
|
||||
if (!form) {
|
||||
console.error("Form element not found!");
|
||||
return;
|
||||
}
|
||||
// Get form data
|
||||
let formData = new FormData(form);
|
||||
|
||||
// Disable button and show spinner
|
||||
submitButton.disabled = true;
|
||||
spinner.classList.remove("d-none");
|
||||
|
||||
try {
|
||||
let response = await fetch(form.action, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
},
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
let result = await response.json();
|
||||
document.getElementById("toast-message").innerText =
|
||||
result.message;
|
||||
toast.show();
|
||||
setTimeout(() => {
|
||||
window.location.href = "/data/customers";
|
||||
}, 2000);
|
||||
} else {
|
||||
let error = await response.json();
|
||||
document.getElementById("toast-message").innerText =
|
||||
error.message;
|
||||
toast.show();
|
||||
console.error("Error:", error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Request failed:", error);
|
||||
document.getElementById("toast-message").innerText =
|
||||
error.message;
|
||||
toast.show();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new UpdateCustomer();
|
||||
});
|
||||
151
resources/js/customers/index.js
Normal file
151
resources/js/customers/index.js
Normal file
@@ -0,0 +1,151 @@
|
||||
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 Customers {
|
||||
constructor() {
|
||||
this.toastMessage = document.getElementById("toast-message");
|
||||
this.toastElement = document.getElementById("toastNotification");
|
||||
this.toast = new bootstrap.Toast(this.toastElement);
|
||||
this.table = null;
|
||||
|
||||
// Initialize functions
|
||||
this.initTableSpatialPlannings();
|
||||
this.initEvents();
|
||||
}
|
||||
initEvents() {
|
||||
document.body.addEventListener("click", async (event) => {
|
||||
const deleteButton = event.target.closest(".btn-delete-customers");
|
||||
if (deleteButton) {
|
||||
event.preventDefault();
|
||||
await this.handleDelete(deleteButton);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initTableSpatialPlannings() {
|
||||
let tableContainer = document.getElementById("table-customers");
|
||||
// Create a new Grid.js instance only if it doesn't exist
|
||||
this.table = new Grid({
|
||||
columns: [
|
||||
"ID",
|
||||
"Nomor Pelanggan",
|
||||
"Nama",
|
||||
"Kota Pelayanan",
|
||||
"Alamat",
|
||||
"Latitude",
|
||||
"Longitude",
|
||||
{
|
||||
name: "Action",
|
||||
formatter: (cell) =>
|
||||
gridjs.html(`
|
||||
<div class="d-flex justify-content-center gap-2">
|
||||
<a href="/data/customers/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
|
||||
<i class='bx bx-edit'></i>
|
||||
</a>
|
||||
<button data-id="${cell}" class="btn btn-sm btn-red btn-delete-customers d-inline-flex align-items-center justify-content-center">
|
||||
<i class='bx bxs-trash' ></i>
|
||||
</button>
|
||||
</div>
|
||||
`),
|
||||
},
|
||||
],
|
||||
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/customers`,
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
then: (data) =>
|
||||
data.data.map((item) => [
|
||||
item.id,
|
||||
item.nomor_pelanggan,
|
||||
item.nama,
|
||||
item.kota_pelayanan,
|
||||
item.alamat,
|
||||
item.latitude,
|
||||
item.longitude,
|
||||
item.id,
|
||||
]),
|
||||
total: (data) => data.meta.total,
|
||||
},
|
||||
}).render(tableContainer);
|
||||
}
|
||||
|
||||
async handleDelete(deleteButton) {
|
||||
const id = deleteButton.getAttribute("data-id");
|
||||
|
||||
const result = await Swal.fire({
|
||||
title: "Are you sure?",
|
||||
text: "You won't be able to revert this!",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#3085d6",
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
});
|
||||
|
||||
if (result.isConfirmed) {
|
||||
try {
|
||||
let response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/customers/${id}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
let result = await response.json();
|
||||
this.toastMessage.innerText =
|
||||
result.message || "Deleted successfully!";
|
||||
this.toast.show();
|
||||
|
||||
// Refresh Grid.js table
|
||||
if (typeof this.table !== "undefined") {
|
||||
this.table.updateConfig({}).forceRender();
|
||||
}
|
||||
} else {
|
||||
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 Customers();
|
||||
});
|
||||
78
resources/js/customers/upload.js
Normal file
78
resources/js/customers/upload.js
Normal file
@@ -0,0 +1,78 @@
|
||||
import { Dropzone } from "dropzone";
|
||||
Dropzone.autoDiscover = false;
|
||||
|
||||
class UploadCustomers {
|
||||
constructor() {
|
||||
this.spatialDropzone = null;
|
||||
this.formElement = document.getElementById("formUploadCustomers");
|
||||
this.uploadButton = document.getElementById("submit-upload");
|
||||
this.spinner = document.getElementById("spinner");
|
||||
if (!this.formElement) {
|
||||
console.error("Element formUploadCustomers tidak ditemukan!");
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
this.initDropzone();
|
||||
this.setupUploadButton();
|
||||
}
|
||||
|
||||
initDropzone() {
|
||||
const toastNotification = document.getElementById("toastNotification");
|
||||
const toast = new bootstrap.Toast(toastNotification);
|
||||
var previewTemplate,
|
||||
dropzonePreviewNode = document.querySelector(
|
||||
"#dropzone-preview-list"
|
||||
);
|
||||
(dropzonePreviewNode.id = ""),
|
||||
dropzonePreviewNode &&
|
||||
((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
|
||||
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
|
||||
(this.spatialDropzone = new Dropzone(".dropzone", {
|
||||
url: this.formElement.action,
|
||||
method: "post",
|
||||
acceptedFiles: ".xls,.xlsx",
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: "#dropzone-preview",
|
||||
autoProcessQueue: false,
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
},
|
||||
init: function () {
|
||||
this.on("success", function (file, response) {
|
||||
document.getElementById("toast-message").innerText =
|
||||
response.message;
|
||||
toast.show();
|
||||
setTimeout(() => {
|
||||
window.location.href = "/data/customers";
|
||||
}, 2000);
|
||||
});
|
||||
this.on("error", function (file, errorMessage) {
|
||||
document.getElementById("toast-message").innerText =
|
||||
errorMessage.message;
|
||||
toast.show();
|
||||
this.uploadButton.disabled = false;
|
||||
this.spinner.classList.add("d-none");
|
||||
});
|
||||
},
|
||||
})));
|
||||
}
|
||||
|
||||
setupUploadButton() {
|
||||
this.uploadButton.addEventListener("click", (e) => {
|
||||
if (this.spatialDropzone.files.length > 0) {
|
||||
this.spatialDropzone.processQueue();
|
||||
this.uploadButton.disabled = true;
|
||||
this.spinner.classList.remove("d-none");
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new UploadCustomers().init();
|
||||
});
|
||||
32
resources/views/customers/create.blade.php
Normal file
32
resources/views/customers/create.blade.php
Normal file
@@ -0,0 +1,32 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Data'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'PDAM'])
|
||||
|
||||
<x-toast-notification />
|
||||
<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('customers') }}" class="btn btn-sm btn-secondary">Back</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="formCreateCustomer" action="{{ route('api.customers.store') }}" method="post">
|
||||
@csrf
|
||||
@include('customers.form')
|
||||
<button type="button" class="btn btn-primary" id="btnCreateCustomer">
|
||||
<span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
|
||||
Create
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/customers/create.js'])
|
||||
@endsection
|
||||
33
resources/views/customers/edit.blade.php
Normal file
33
resources/views/customers/edit.blade.php
Normal file
@@ -0,0 +1,33 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Data'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'PDAM'])
|
||||
|
||||
<x-toast-notification />
|
||||
<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('customers') }}" class="btn btn-sm btn-secondary">Back</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="formUpdateCustomer" action="{{ route('api.customers.update', $data->id) }}" method="post">
|
||||
@csrf
|
||||
@method('put')
|
||||
@include('customers.form')
|
||||
<button type="button" class="btn btn-primary" id="btnUpdateCustomer">
|
||||
<span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
|
||||
Update
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/customers/edit.js'])
|
||||
@endsection
|
||||
24
resources/views/customers/form.blade.php
Normal file
24
resources/views/customers/form.blade.php
Normal file
@@ -0,0 +1,24 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="nomor_pelanggan">Nomor Pelanggan</label>
|
||||
<input type="text" id="nomor_pelanggan" name="nomor_pelanggan" class="form-control" placeholder="Enter nomor_pelanggan" value="{{ old('nomor_pelanggan', $data->nomor_pelanggan ?? '') }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="kota_pelayanan">Kota Pelayanan</label>
|
||||
<input type="text" id="kota_pelayanan" name="kota_pelayanan" class="form-control" placeholder="Enter kota_pelayanan" value="{{ old('kota_pelayanan', $data->kota_pelayanan ?? '') }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="nama">Nama</label>
|
||||
<input type="text" id="nama" name="nama" class="form-control" placeholder="Enter nama" value="{{ old('nama', $data->nama ?? '') }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="alamat">Alamat</label>
|
||||
<textarea class="form-control" id="alamat" name="alamat" rows="5" required>{{ old('alamat', $data->alamat ?? '') }}</textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="latitude">Latitude</label>
|
||||
<input type="text" id="latitude" name="latitude" class="form-control" placeholder="Enter latitude" value="{{ old('latitude', $data->latitude ?? '') }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="longitude">Longitude</label>
|
||||
<input type="text" id="longitude" name="longitude" class="form-control" placeholder="Enter longitude" value="{{ old('longitude', $data->longitude ?? '') }}" required>
|
||||
</div>
|
||||
31
resources/views/customers/index.blade.php
Normal file
31
resources/views/customers/index.blade.php
Normal file
@@ -0,0 +1,31 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Data'])
|
||||
|
||||
@section('css')
|
||||
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'PDAM'])
|
||||
|
||||
<x-toast-notification/>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card w-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap justify-content-end align-items-center mb-2">
|
||||
<a href="{{ route('customers.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto me-3">Create</a>
|
||||
<a href="{{ route('customers.upload')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Upload</a>
|
||||
</div>
|
||||
<div id="table-customers"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/customers/index.js'])
|
||||
@endsection
|
||||
80
resources/views/customers/upload.blade.php
Normal file
80
resources/views/customers/upload.blade.php
Normal file
@@ -0,0 +1,80 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Data'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'Tata Ruang'])
|
||||
|
||||
<x-toast-notification />
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Upload Data</h5>
|
||||
<p class="card-subtitle">
|
||||
Please upload a file with the extension <strong>.xls or .xlsx</strong> with a maximum size of <strong>10 MB</strong>.
|
||||
<br>
|
||||
For <strong>.xls</strong> and <strong>.xlsx</strong> files, ensure that the data is contained within a <strong>single sheet</strong> with the following columns:
|
||||
<strong>Nomor Pelanggan, Kota Pelayanan, Nama, Alamat, Latitude, Longitude</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<div class="dropzone">
|
||||
<form id="formUploadCustomers" action="{{ route('api.customers.upload') }}" method="post" enctype="multipart/form-data">
|
||||
<div class="fallback">
|
||||
<!-- <input id="file-dropzone" type="file" name="file" accept=".xlsx,.xls" multiple/> -->
|
||||
</div>
|
||||
</form>
|
||||
<div class="dz-message needsclick">
|
||||
<i class="h1 bx bx-cloud-upload"></i>
|
||||
<h3>Drop files here or click to upload.</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled mb-0" id="dropzone-preview">
|
||||
<li class="mt-2" id="dropzone-preview-list">
|
||||
<!-- This is used as the file preview template -->
|
||||
<div class="border rounded">
|
||||
<div class="d-flex align-items-center p-2">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-sm bg-light rounded">
|
||||
<img data-dz-thumbnail class="img-fluid rounded d-block" src="#"
|
||||
alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="pt-1">
|
||||
<h5 class="fs-14 mb-1" data-dz-name>
|
||||
</h5>
|
||||
<p class="fs-13 text-muted mb-0" data-dz-size></p>
|
||||
<strong class="error text-danger" data-dz-errormessage></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-3">
|
||||
<button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end dropzon-preview -->
|
||||
</div>
|
||||
<div class="d-flex justify-content-end">
|
||||
<button id="submit-upload" class="btn btn-primary">
|
||||
<span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
|
||||
Upload Files
|
||||
</button>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/customers/upload.js'])
|
||||
@endsection
|
||||
@@ -9,7 +9,6 @@
|
||||
@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'Tata Ruang'])
|
||||
|
||||
<x-toast-notification/>
|
||||
<x-modal-confirmation buttonText="Delete" confirmationMessage="Are you sure you want to delete this?" />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
|
||||
Reference in New Issue
Block a user