resto-dhepot/resources/views/pages/admin/pengeluaran/modalsatuan.blade.php

337 lines
15 KiB
PHP

<!-- Modal Tambah Menu -->
<div class="modal fade" id="modal-default-data-satuan">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="col-lg-12 col-md-12 col-sm-12 mt-2">
<div class="container" style="display: contents">
<div class="card">
<div class="card bg-warning" style="min-height:5px; border-radius:1px;"></div>
<div class="card-header mt-0 pt-0">
<div class="d-flex">
<h4>Daftar Satuan</h4>
<!-- Button trigger modal -->
<div class="ml-auto">
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#modal-default-add-satuan">
Tambah Satuan
</button>
</div>
</div>
</div>
<div class="card-body">
{{-- <h5 class="card-title">Form List Data</h5> --}}
<div class="table-responsive mt-3">
<table id="tabelsatuan" class="table table-hover display" style="width: 100%">
<thead>
<tr>
<th class="text-center">No</th>
<th>Nama Satuan</th>
<th>Simbol</th>
<th class="text-center"><i class="fas fa-cog"></i></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Tambah Menu -->
<div class="modal fade" id="modal-default-add-satuan">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Tambah Satuan</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="form-tambah-satuan" method="post" enctype="multipart/form-data">
@csrf
<div class="form-group row">
<div class="col-md-6">
<label for="nama-satuan" class="col-form-label">Nama Satuan:</label>
<input type="text" class="form-control" id="nama-satuan" name="nama_satuan"
required>
</div>
<div class="col-md-6">
<label for="simbol" class="col-form-label">Simbol:</label>
<input type="text" class="form-control" id="simbol" name="simbol"
required>
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-primary"
id="simpan-form-tambah">Simpan</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-default-edit-satuan">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Satuan</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="form-edit-satuan" method="put" enctype="multipart/form-data">
@csrf
<div class="form-group row">
<input type="hidden" id="id-edit-satuan" name="id_edit">
<div class="col-md-6">
<label for="nama-satuan-edit" class="col-form-label">Nama Satuan:</label>
<input type="text" class="form-control" id="nama-satuan-edit"
name="nama_satuan_edit" required>
</div>
<div class="col-md-6">
<label for="simbol-edit" class="col-form-label">Simbol:</label>
<input type="text" class="form-control" id="nama-simbol-edit"
name="simbol_edit" required>
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-primary"
id="simpan-form-edit-satuan">Simpan</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-default-hapus-satuan">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Hapus Satuan</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p id="button-hapus-satuan">&hellip;</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
<button type="button" class="btn btn-danger button-hapus-satuan">Hapus</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@push('styles')
<!-- Toastr -->
<link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/datatables/datatables.min.css') }}">
<!-- Select2 -->
<link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
<style>
input.switch {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
appearance: none;
height: 1em;
width: 2em;
border-radius: 1em;
box-shadow: inset -1em 0px 0px 0px rgba(192, 192, 192, 1);
background-color: white;
border: 1px solid rgba(192, 192, 192, 1);
outline: none;
-webkit-transition: 0.2s;
transition: 0.2s;
}
input.switch:checked {
box-shadow: inset 1em 0px 0px 0px rgba(33, 150, 243, 0.5);
border: 1px solid rgba(33, 150, 243, 1);
}
</style>
@endpush
@push('scripts')
<!-- Toastr -->
<script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
<!-- Select2 -->
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
<!-- Bootstrap Switch -->
<script src="{{ asset('assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
});
//Initialize Select2 Elements
$('.select2').select2({
dropdownParent: $("#modal-default-add-satuan")
})
$('.edit_select2').select2({
dropdownParent: $("#modal-default-edit-satuan")
})
$(document).ready(function() {
$('#tabelsatuan').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('msatuan.getDataMSatuan') }}",
columns: [{
data: 'DT_RowIndex',
name: 'DT_RowIndex',
className: 'text-center'
},
{
data: 'nama_satuan',
name: 'nama_satuan'
},
{
data: 'simbol',
name: 'simbol'
},
{
data: 'action',
name: 'action',
className: 'text-center'
},
]
})
})
$(document).ready(function() {
// ajax tambah satuan
$('#form-tambah-satuan').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: "{{ route('msatuan.store') }}",
type: "POST",
dataType: "json",
data: $(this).serialize(),
cache: false,
async: false,
success: function(response) {
toastr.success(response.meta.message)
$('#modal-default-add-satuan').modal('hide')
$('#form-tambah-satuan')[0].reset()
$('#tabelsatuan').DataTable().ajax.reload()
location.reload()
},
error: function(response) {
toastr.error(response.responseJSON.meta.message)
}
})
})
// ajax edit satuan
$(document).on('click', '.btn-edit-satuan', function() {
idEdit = $(this).attr('data-idSatuan')
$.ajax({
url: "{{ url('satuan') }}" + '/' + idEdit + '/edit',
type: "GET",
success: function(response) {
data = response.data.satuan
console.log(data);
$('#id-edit-satuan').val(data.id)
$('#nama-satuan-edit').val(data.nama_satuan)
$('#nama-simbol-edit').val(data.simbol)
$('#modal-default-edit-satuan').modal('show')
},
error: function(response) {
toastr.error(response.responseJSON.meta.message)
}
})
})
$('#form-edit-satuan').on('submit', function(e) {
// id edit
var idEdit = $('#id-edit-satuan').val()
e.preventDefault();
$.ajax({
url: "{{ url('satuan/update') }}" + '/' + idEdit,
type: "PUT",
dataType: "json",
data: $(this).serialize(),
success: function(response) {
toastr.success(response.meta.message)
$('#modal-default-edit-satuan').modal('hide')
$('#form-edit-satuan')[0].reset()
idEdit = null
$('#tabelsatuan').DataTable().ajax.reload()
location.reload()
},
error: function(response) {
// enable button submit on interval 1 detik
setTimeout(function() {
$('#simpan-form-edit-satuan').attr('disabled', false)
}, 500);
idEdit = null
toastr.error(response.responseJSON.meta.message)
}
})
})
// ajax hapus satuan
$(document).on('click', '.btn-hapus-satuan', function() {
idEdit = $(this).attr('data-idSatuan')
$.ajax({
url: "{{ url('satuan') }}" + '/' + idEdit + '/edit',
type: "GET",
success: function(response) {
data = response.data.satuan
var dataAppend = '<p>Apakah anda yakin ingin menghapus satuan <b>' +
data.nama_satuan +
' ' + data.simbol + '</b> ?</p>';
$('#button-hapus-satuan').html(dataAppend);
$('.button-hapus-satuan').attr('data-id', data.id);
$('#modal-default-hapus-satuan').modal('show');
},
error: function(response) {
toastr.error(response.responseJSON.meta.message)
}
})
})
$(document).on('click', '.button-hapus-satuan', function() {
var id = $(this).attr('data-id');
$.ajax({
url: "{{ url('satuan/delete') }}" + '/' + id,
type: "DELETE",
dataType: "json",
cache: false,
async: false,
success: function(response) {
toastr.success(response.meta.message)
$('#modal-default-hapus-satuan').modal('hide')
$('#tabelsatuan').DataTable().ajax.reload()
location.reload()
},
error: function(response) {
toastr.error(response.responseJSON.meta.message)
}
})
})
})
</script>
@endpush