Feature: crud reklame
This commit is contained in:
76
resources/js/data/advertisements/data-advertisements.js
Normal file
76
resources/js/data/advertisements/data-advertisements.js
Normal file
@@ -0,0 +1,76 @@
|
||||
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.js";
|
||||
import GeneralTable from "../../table-generator.js";
|
||||
|
||||
const dataAdvertisementsColumns = [
|
||||
"No",
|
||||
"Nama Wajib Pajak",
|
||||
"NPWPD",
|
||||
"Jenis Reklame",
|
||||
"Isi Reklame",
|
||||
"Alamat Wajib Pajak",
|
||||
"Lokasi Reklame",
|
||||
"Desa",
|
||||
"Kecamatan",
|
||||
"Panjang",
|
||||
"Lebar",
|
||||
"Sudut Pandang",
|
||||
"Muka",
|
||||
"Luas",
|
||||
"Sudut",
|
||||
"Kontak",
|
||||
{
|
||||
name: "Actions",
|
||||
widht: "120px",
|
||||
formatter: function(cell, row) {
|
||||
const id = row.cells[16].data;
|
||||
const model = "data/advertisements";
|
||||
return gridjs.html(`
|
||||
<div class="d-flex justify-items-end gap-10">
|
||||
<button class="btn btn-yellow me-2 btn-edit"
|
||||
data-id="${id}"
|
||||
data-model="${model}">Update</button>
|
||||
<button class="btn btn-red btn-delete"
|
||||
data-id="${id}">Delete</button>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const table = new GeneralTable(
|
||||
"reklame-data-table",
|
||||
`${GlobalConfig.apiHost}/api/advertisements`,
|
||||
`${GlobalConfig.apiHost}`,
|
||||
dataAdvertisementsColumns
|
||||
);
|
||||
|
||||
table.processData = function (data) {
|
||||
return data.data.map((item) => {
|
||||
return [
|
||||
item.no,
|
||||
item.business_name,
|
||||
item.npwpd,
|
||||
item.advertisement_type,
|
||||
item.advertisement_content,
|
||||
item.business_address,
|
||||
item.advertisement_location,
|
||||
item.village_name,
|
||||
item.district_name,
|
||||
item.length,
|
||||
item.width,
|
||||
item.viewing_angle,
|
||||
item.face,
|
||||
item.area,
|
||||
item.angle,
|
||||
item.contact,
|
||||
item.id,
|
||||
];
|
||||
});
|
||||
};
|
||||
|
||||
table.init();
|
||||
});
|
||||
93
resources/js/form-create-update.js
Normal file
93
resources/js/form-create-update.js
Normal file
@@ -0,0 +1,93 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const saveButton = document.querySelector(".modal-footer .btn-primary");
|
||||
const modalButton = document.querySelector(".btn-modal");
|
||||
const form = document.querySelector("form#create-update-form");
|
||||
|
||||
if (!saveButton || !form) return;
|
||||
|
||||
saveButton.addEventListener("click", function () {
|
||||
// Disable tombol dan tampilkan spinner
|
||||
modalButton.disabled = true;
|
||||
modalButton.innerHTML = `
|
||||
<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
`;
|
||||
const isEdit = saveButton.classList.contains("btn-edit");
|
||||
const formData = new FormData(form)
|
||||
const toast = document.getElementById('toastEditUpdate');
|
||||
const toastBody = toast.querySelector('.toast-body');
|
||||
const toastHeader = toast.querySelector('.toast-header small');
|
||||
|
||||
const data = {};
|
||||
|
||||
// Mengonversi FormData ke dalam JSON
|
||||
formData.forEach((value, key) => {
|
||||
data[key] = value;
|
||||
});
|
||||
|
||||
// Log semua data dalam FormData
|
||||
for (let pair of formData.entries()) {
|
||||
console.log(pair[0] + ": " + pair[1]);
|
||||
}
|
||||
const url = form.getAttribute("action");
|
||||
console.log("Ini adalah url dari form action", url);
|
||||
|
||||
const method = isEdit ? "PUT" : "POST";
|
||||
|
||||
fetch(url, {
|
||||
method: method,
|
||||
body: JSON.stringify(data),
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log("Response data:", data);
|
||||
if (!data.errors) {
|
||||
// Set success message for the toast
|
||||
toastBody.textContent = isEdit ? "Data updated successfully!" : "Data created successfully!";
|
||||
toastHeader.textContent = "Just now";
|
||||
toast.classList.add('show'); // Show the toast
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show'); // Hide the toast after 3 seconds
|
||||
}, 3000);
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 3000);
|
||||
} else {
|
||||
// Set error message for the toast
|
||||
toastBody.textContent = "Error: " + (responseData.message || "Something went wrong");
|
||||
toastHeader.textContent = "Error occurred";
|
||||
toast.classList.add('show'); // Show the toast
|
||||
|
||||
// Enable button and reset its text on error
|
||||
modalButton.disabled = false;
|
||||
modalButton.innerHTML = isEdit ? "Update" : "Create";
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show'); // Hide the toast after 3 seconds
|
||||
}, 3000);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error:", error);
|
||||
// Set error message for the toast
|
||||
toastBody.textContent = "An error occurred while processing your request.";
|
||||
toastHeader.textContent = "Error occurred";
|
||||
toast.classList.add('show'); // Show the toast
|
||||
|
||||
// Enable button and reset its text on error
|
||||
modalButton.disabled = false;
|
||||
modalButton.innerHTML = isEdit ? "Update" : "Create";
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show'); // Hide the toast after 3 seconds
|
||||
}, 3000);
|
||||
});
|
||||
});
|
||||
});
|
||||
124
resources/js/table-generator.js
Normal file
124
resources/js/table-generator.js
Normal file
@@ -0,0 +1,124 @@
|
||||
import { Grid } from "gridjs/dist/gridjs.umd.js";
|
||||
import "gridjs/dist/gridjs.umd.js";
|
||||
|
||||
class GeneralTable {
|
||||
constructor(tableId, apiUrl, baseUrl, columns, options = {}) {
|
||||
this.tableId = tableId;
|
||||
this.apiUrl = apiUrl;
|
||||
this.baseUrl = baseUrl; // Tambahkan base URL
|
||||
this.columns = columns;
|
||||
this.options = options;
|
||||
}
|
||||
|
||||
init() {
|
||||
const table = new Grid({
|
||||
columns: this.columns,
|
||||
search: this.options.search || {
|
||||
server: {
|
||||
url: (prev, keyword) => `${prev}?search=${keyword}`,
|
||||
},
|
||||
},
|
||||
pagination: this.options.pagination || {
|
||||
limit: 15,
|
||||
server: {
|
||||
url: (prev, page) =>
|
||||
`${prev}${prev.includes("?") ? "&" : "?"}page=${page + 1}`,
|
||||
},
|
||||
},
|
||||
sort: this.options.sort || true,
|
||||
server: {
|
||||
url: this.apiUrl,
|
||||
headers: this.options.headers || {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
then: (data) => this.processData(data),
|
||||
total: (data) => data.meta.total,
|
||||
},
|
||||
});
|
||||
|
||||
table.render(document.getElementById(this.tableId));
|
||||
this.handleActions();
|
||||
}
|
||||
|
||||
// Memproses data dari API
|
||||
processData(data) {
|
||||
return data.data.map((item) => {
|
||||
return this.columns.map((column) => {
|
||||
return item[column] || '';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
handleActions() {
|
||||
document.addEventListener("click", (event) => {
|
||||
if (event.target && event.target.classList.contains('btn-edit')) {
|
||||
this.handleEdit(event);
|
||||
}
|
||||
if (event.target && event.target.classList.contains('btn-delete')) {
|
||||
this.handleDelete(event);
|
||||
}
|
||||
if (event.target && event.target.classList.contains('btn-create')) {
|
||||
this.handleCreate(event);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fungsi untuk menangani create
|
||||
handleCreate(event) {
|
||||
// Menggunakan model dan ID untuk membangun URL dinamis
|
||||
const model = event.target.getAttribute('data-model'); // Mengambil model dari data-model
|
||||
window.location.href = `${this.baseUrl}/${model}/create`;
|
||||
}
|
||||
|
||||
// Fungsi untuk menangani edit
|
||||
handleEdit(event) {
|
||||
const id = event.target.getAttribute('data-id');
|
||||
const model = event.target.getAttribute('data-model'); // Mengambil model dari data-model
|
||||
console.log('Editing record with ID:', id);
|
||||
// Menggunakan model dan ID untuk membangun URL dinamis
|
||||
window.location.href = `${this.baseUrl}/${model}/${id}/edit`;
|
||||
}
|
||||
|
||||
// Fungsi untuk menangani delete
|
||||
handleDelete(event) {
|
||||
const id = event.target.getAttribute('data-id');
|
||||
console.log(id);
|
||||
if (confirm("Are you sure you want to delete this item?")) {
|
||||
this.deleteRecord(id);
|
||||
}
|
||||
}
|
||||
|
||||
async deleteRecord(id) {
|
||||
try {
|
||||
console.log(id);
|
||||
const response = await fetch(`${this.apiUrl}/${id}`, { // Menambahkan model dalam URL
|
||||
method: 'DELETE',
|
||||
headers: this.options.headers || {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
// headers: {
|
||||
// 'Authorization': `Bearer ${document.querySelector('meta[name="api-token"]').getAttribute("content")}`,
|
||||
// 'Content-Type': 'application/json',
|
||||
// },
|
||||
});
|
||||
if (response.status === 204) { // Jika status code 204, berarti berhasil
|
||||
alert('Data deleted successfully!');
|
||||
location.reload();
|
||||
} else {
|
||||
const data = await response.json(); // Jika ada data di response body
|
||||
alert('Failed to delete data: ' + (data.message || 'Unknown error.'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting data:', error);
|
||||
alert('Error deleting data.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default GeneralTable;
|
||||
25
resources/views/data/advertisements/index.blade.php
Normal file
25
resources/views/data/advertisements/index.blade.php
Normal file
@@ -0,0 +1,25 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Reklame'])
|
||||
|
||||
@section('css')
|
||||
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'Reklame'])
|
||||
|
||||
<div class="row">
|
||||
<div class="d-flex justify-content-end gap-10 pb-3">
|
||||
<button class="btn btn-success me-2 width-lg btn-create" data-model="data/advertisements">Create</button>
|
||||
<button class="btn btn-primary width-lg btn-bulk-create">Bulk Create</button>
|
||||
</div>
|
||||
<div>
|
||||
<div id="reklame-data-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/data/advertisements/data-advertisements.js'])
|
||||
@endsection
|
||||
117
resources/views/form-create-update/form.blade.php
Normal file
117
resources/views/form-create-update/form.blade.php
Normal file
@@ -0,0 +1,117 @@
|
||||
@extends('layouts.vertical', ['subtitle' => $subtitle]) <!-- Menggunakan subtitle dari controller -->
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => $title, 'subtitle' => $subtitle]) <!-- Menggunakan title dan subtitle dari controller -->
|
||||
|
||||
<div class="row d-flex justify-content-center">
|
||||
@if (session('error'))
|
||||
<div class="alert alert-danger">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger">
|
||||
<ul>
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form id="create-update-form" action="{{ isset($modelInstance) && $modelInstance->id ? $apiUrl . '/' . $modelInstance->id : $apiUrl }}" method="POST">
|
||||
@csrf
|
||||
@if(isset($modelInstance))
|
||||
@method('PUT')
|
||||
@endif
|
||||
|
||||
@foreach($fields as $field => $label)
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ $field }}">{{ $label }}</label>
|
||||
@php
|
||||
$fieldType = $fieldTypes[$field] ?? 'text'; // Default text jika tidak ditemukan tipe
|
||||
@endphp
|
||||
|
||||
@if($fieldType == 'textarea')
|
||||
<textarea id="{{ $field }}" name="{{ $field }}" class="form-control">{{ old($field, isset($modelInstance) ? $modelInstance->{$field} : '') }}</textarea>
|
||||
@elseif($fieldType == 'select' && isset($dropdownOptions[$field]))
|
||||
<select id="{{ $field }}" name="{{ $field }}" class="form-control">
|
||||
@foreach($dropdownOptions[$field] as $code => $name)
|
||||
<option value="{{ $code }}" {{ old($field, isset($modelInstance) ? $modelInstance->{$field} : '') == $code ? 'selected' : '' }}>{{ $name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@elseif($fieldType == 'combobox' && isset($dropdownOptions[$field]))
|
||||
<input class="form-control" list="{{ $field }}Options" id="{{ $field }}" name="{{ $field }}"
|
||||
value="{{ old($field, isset($modelInstance) ? $modelInstance->{$field} : '') }}" placeholder="Type to search...">
|
||||
<datalist id="{{ $field }}Options">
|
||||
@foreach($dropdownOptions[$field] as $code => $name)
|
||||
<option value="{{ $name }}" data-code="{{ $code }}">
|
||||
@endforeach
|
||||
</datalist>
|
||||
@else
|
||||
<input type="{{ $fieldType }}" id="{{ $field }}" name="{{ $field }}" class="form-control" value="{{ old($field, isset($modelInstance) ? $modelInstance->{$field} : '') }}">
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
<div class="d-flex justify-content-end">
|
||||
<button type="button" class="btn btn-primary width-lg btn-modal" data-bs-toggle="modal" data-bs-target="#confirmationModalCenter">
|
||||
{{ isset($modelInstance) ? 'Update' : 'Create' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="confirmationModalCenter" tabindex="-1"
|
||||
aria-labelledby="confirmationModalCenterTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="confirmationModalCenterTitle">
|
||||
{{ isset($modelInstance) ? 'Update Confirmation' : 'Create Confirmation' }}
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>{{ isset($modelInstance) ? 'Are you sure you want to save the data changes?' : 'Are you sure you want to create new data based on the form contents?' }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary {{ isset($modelInstance) ? 'btn-edit' : 'btn-create' }}" data-bs-dismiss="modal">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast-container position-fixed end-0 top-0 p-3">
|
||||
<div id="toastEditUpdate" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
<div class="auth-logo me-auto">
|
||||
<img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light"
|
||||
height="18" />
|
||||
</div>
|
||||
<small class="text-muted">2 seconds ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Heads up, toasts will stack automatically
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/form-create-update.js'])
|
||||
@endsection
|
||||
@@ -91,6 +91,9 @@
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('request-assignments.index' ) }}">PBG</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('advertisements.index') }}">Reklame</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user