Browse Source

update select menggunakan select2

master
Gunawan19621 12 months ago
parent
commit
786f5476e6
  1. 30
      app/Http/Controllers/DisposalController.php
  2. 35
      app/Http/Controllers/PeminjamanController.php
  3. 29
      app/Http/Controllers/TransferController.php
  4. 58
      resources/views/dashboard/Disposal/create.blade.php
  5. 74
      resources/views/dashboard/Peminjaman/create.blade.php
  6. 56
      resources/views/dashboard/Transfer/create.blade.php
  7. 2
      routes/web.php

30
app/Http/Controllers/DisposalController.php

@ -6,7 +6,9 @@ use App\Models\Peti;
use App\Models\Customer; use App\Models\Customer;
use App\Models\Disposal; use App\Models\Disposal;
use App\Models\m_warehouse; use App\Models\m_warehouse;
use Illuminate\Http\Request;
use Symfony\Component\Uid\Uuid; use Symfony\Component\Uid\Uuid;
use Illuminate\Http\JsonResponse;
use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Auth;
use App\Http\Requests\Disposal\ValidasiCreateDisposal; use App\Http\Requests\Disposal\ValidasiCreateDisposal;
use App\Http\Requests\Disposal\ValidasiUpdateDisposal; use App\Http\Requests\Disposal\ValidasiUpdateDisposal;
@ -164,4 +166,32 @@ class DisposalController extends Controller
return redirect()->back()->with('error', 'Data disposal peti gagal dihapus'); return redirect()->back()->with('error', 'Data disposal peti gagal dihapus');
} }
} }
/**
* Search peti by fix_lot
*/
public function autoCompleteSearch(Request $request): JsonResponse
{
$petiData = [];
$customerData = [];
if ($request->filled('q')) {
$petiData = Peti::select("fix_lot", "id")
->where('fix_lot', 'LIKE', '%' . $request->get('q') . '%')
->where(function ($query) {
$query->whereHas('assetStatuses', function ($subquery) {
$subquery->where('status', '!=', 0)
->where('created_at', '=', function ($maxQuery) {
$maxQuery->selectRaw('MAX(created_at)')
->from('asset_statuses')
->whereColumn('peti_id', 'petis.id');
});
})->orWhereDoesntHave('assetStatuses');
})
->where('status', 'AKTIF')
->get();
}
return response()->json(['peti' => $petiData, 'customer' => $customerData]);
}
} }

35
app/Http/Controllers/PeminjamanController.php

@ -20,18 +20,6 @@ class PeminjamanController extends Controller
/** /**
* Display a listing of the resource. * Display a listing of the resource.
*/ */
// public function index()
// {
// $data = [
// // 'peminjaman' => asset_status::get(),
// 'peminjaman' => asset_status::orderBy('created_at', 'desc')->get(),
// 'warehouse' => m_warehouse::get(),
// 'active' => 'menu-peminjaman',
// ];
// return view('dashboard.Peminjaman.index', $data);
// }
public function index(Request $request) public function index(Request $request)
{ {
$perPage = $request->input('perPage', 5); $perPage = $request->input('perPage', 5);
@ -223,19 +211,26 @@ class PeminjamanController extends Controller
public function autoCompleteSearch(Request $request): JsonResponse public function autoCompleteSearch(Request $request): JsonResponse
{ {
$data = []; $petiData = [];
$customerData = [];
if ($request->filled('q')) { if ($request->filled('q')) {
$data = Peti::select("fix_lot", "id") $petiData = Peti::select("fix_lot", "id")
->where('fix_lot', 'LIKE', '%' . $request->get('q') . '%') ->where('fix_lot', 'LIKE', '%' . $request->get('q') . '%')
->where(function ($query) {
$query->whereHas('assetStatuses', function ($subquery) {
$subquery->where('status', '!=', 0)
->where('created_at', '=', function ($maxQuery) {
$maxQuery->selectRaw('MAX(created_at)')
->from('asset_statuses')
->whereColumn('peti_id', 'petis.id');
});
})->orWhereDoesntHave('assetStatuses');
})
->where('status', 'AKTIF')
->get(); ->get();
} }
// if ($request->filled('q')) {
// $data = Peti::select("fix_lot", "id", "warehouse_id as warehouseId", "customer_id as customerId")
// ->where('fix_lot', 'LIKE', '%' . $request->get('q') . '%')
// ->get();
// }
return response()->json($data); return response()->json(['peti' => $petiData, 'customer' => $customerData]);
} }
} }

29
app/Http/Controllers/TransferController.php

@ -3,11 +3,12 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use App\Models\Peti; use App\Models\Peti;
use Symfony\Component\Uid\Uuid;
use App\Models\Customer; use App\Models\Customer;
use App\Models\Transfer; use App\Models\Transfer;
use App\Models\m_warehouse; use App\Models\m_warehouse;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Symfony\Component\Uid\Uuid;
use Illuminate\Http\JsonResponse;
use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Auth;
use App\Http\Requests\Transfer\ValidasiCreateTransfer; use App\Http\Requests\Transfer\ValidasiCreateTransfer;
use App\Http\Requests\Transfer\ValidasiUpdateTransfer; use App\Http\Requests\Transfer\ValidasiUpdateTransfer;
@ -220,4 +221,30 @@ class TransferController extends Controller
return redirect()->back()->with('error', 'Data transfer peti gagal dihapus'); return redirect()->back()->with('error', 'Data transfer peti gagal dihapus');
} }
} }
// Proses select2 autocomplete
public function autoCompleteSearch(Request $request): JsonResponse
{
$petiData = [];
$customerData = [];
if ($request->filled('q')) {
$petiData = Peti::select("fix_lot", "id")
->where('fix_lot', 'LIKE', '%' . $request->get('q') . '%')
->where(function ($query) {
$query->whereHas('assetStatuses', function ($subquery) {
$subquery->where('status', '!=', 0)
->where('created_at', '=', function ($maxQuery) {
$maxQuery->selectRaw('MAX(created_at)')
->from('asset_statuses')
->whereColumn('peti_id', 'petis.id');
});
})->orWhereDoesntHave('assetStatuses');
})
->where('status', 'AKTIF')
->get();
}
return response()->json(['peti' => $petiData, 'customer' => $customerData]);
}
} }

58
resources/views/dashboard/Disposal/create.blade.php

@ -16,7 +16,8 @@
<div class="form-group"> <div class="form-group">
<label for="peti_id" class="col-form-label">Pilih Detail Peti: <span <label for="peti_id" class="col-form-label">Pilih Detail Peti: <span
class="text-danger">*</span></label> class="text-danger">*</span></label>
<select class="form-control" name="peti_id" type="text" id="peti_id" required> <select class="form-control" id="searchPeti" name="peti_id"></select>
{{-- <select class="form-control" name="peti_id" type="text" id="peti_id" required>
<option disabled selected>Pilih Detail Peti</option> <option disabled selected>Pilih Detail Peti</option>
@foreach ($peti as $data_peti) @foreach ($peti as $data_peti)
<option value="{{ $data_peti->id }}" data-warehouse-id="{{ $data_peti->warehouse_id }}" <option value="{{ $data_peti->id }}" data-warehouse-id="{{ $data_peti->warehouse_id }}"
@ -24,11 +25,11 @@
{{ $data_peti->fix_lot }} {{ $data_peti->fix_lot }}
</option> </option>
@endforeach @endforeach
</select> </select> --}}
<label for="customer_id" class="col-form-label">Customer: <span class="text-danger">*</span></label> <label for="customer_id" class="col-form-label">Customer: <span class="text-danger">*</span></label>
<select class="form-control" name="customer_id" type="text" id="customer_id" required> <select class="form-control" name="customer_id" type="text" id="customer_id" required>
<option disabled selected>Nama Customer akan otomatis terpilih ketika memilih detail peti.</option> <option disabled selected>Masukan Nama Customer</option>
@foreach ($customer as $data_customer) @foreach ($customer as $data_customer)
<option value="{{ $data_customer->id }}">{{ $data_customer->name }}</option> <option value="{{ $data_customer->id }}">{{ $data_customer->name }}</option>
@endforeach @endforeach
@ -41,7 +42,7 @@
<label for="warehouse_id" class="col-form-label">Asal Gudang: <span class="text-danger">*</span></label> <label for="warehouse_id" class="col-form-label">Asal Gudang: <span class="text-danger">*</span></label>
<select class="form-control" name="warehouse_id" type="text" id="warehouse_id" required> <select class="form-control" name="warehouse_id" type="text" id="warehouse_id" required>
<option disabled selected>Asal gudang akan otomatis terpilih ketika memilih detail peti.</option> <option disabled selected>Pilih Asal gudang</option>
@foreach ($warehouse as $data) @foreach ($warehouse as $data)
<option value="{{ $data->id }}">{{ $data->name }}</option> <option value="{{ $data->id }}">{{ $data->name }}</option>
@endforeach @endforeach
@ -67,6 +68,55 @@
</div> </div>
</div> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
{{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
<script type="text/javascript">
var path = "{{ route('dashboard.disposal.autoCompleteSearch') }}";
$('#searchPeti').select2({
placeholder: 'Pilih Detail Peti',
ajax: {
url: path,
dataType: 'json',
delay: 250,
processResults: function(data) {
return {
results: $.map(data.peti, function(item) {
return {
text: item.fix_lot,
id: item.id
}
})
};
},
cache: true
}
});
// Inisialisasi select2 untuk customer
// $('#searchCustomer').select2({
// placeholder: 'Pilih Detail Customer',
// ajax: {
// url: path,
// dataType: 'json',
// delay: 250,
// processResults: function(data) {
// return {
// results: $.map(data.customer, function(item) {
// return {
// text: item.name,
// id: item.id
// }
// })
// };
// },
// cache: true
// }
// });
</script>
<!-- auto disable form pada saat sudah di simpan--> <!-- auto disable form pada saat sudah di simpan-->
<script> <script>
document.getElementById('disposalForm').addEventListener('submit', function() { document.getElementById('disposalForm').addEventListener('submit', function() {

74
resources/views/dashboard/Peminjaman/create.blade.php

@ -88,15 +88,8 @@
<div class="form-group"> <div class="form-group">
<label for="peti_id" class="col-form-label">Pilih Detail Peti: <span <label for="peti_id" class="col-form-label">Pilih Detail Peti: <span
class="text-danger">*</span></label> class="text-danger">*</span></label>
<select class="form-control" id="search" name="peti_id"></select> <select class="form-control" id="searchPeti" name="peti_id"></select>
{{-- <label for="customer_id" class="col-form-label">Customer:<span class="text-danger">*</span></label>
<select class="form-control" name="customer_id" type="text" id="customer_id" required>
<option disabled selected>Pilih Nama Customer</option>
@foreach ($customer as $data)
<option value="{{ $data->id }}">{{ $data->name }}</option>
@endforeach
</select> --}}
<label for="customer_id" class="col-form-label">Customer:<span class="text-danger">*</span></label> <label for="customer_id" class="col-form-label">Customer:<span class="text-danger">*</span></label>
<select class="form-control" name="customer_id" type="text" id="customer_id" required> <select class="form-control" name="customer_id" type="text" id="customer_id" required>
<option disabled selected>Pilih Nama Customer</option> <option disabled selected>Pilih Nama Customer</option>
@ -104,6 +97,7 @@
<option value="{{ $data->id }}">{{ $data->name }}</option> <option value="{{ $data->id }}">{{ $data->name }}</option>
@endforeach @endforeach
</select> </select>
{{-- <select class="form-control" id="searchCustomer" name="customer_id"></select> --}}
<label for="exit_at" class="col-form-label">Tanggal Peminjaman: <span <label for="exit_at" class="col-form-label">Tanggal Peminjaman: <span
class="text-danger">*</span></label> class="text-danger">*</span></label>
@ -146,7 +140,7 @@
<script type="text/javascript"> <script type="text/javascript">
var path = "{{ route('dashboard.peminjaman.autoCompleteSearch') }}"; var path = "{{ route('dashboard.peminjaman.autoCompleteSearch') }}";
$('#search').select2({ $('#searchPeti').select2({
placeholder: 'Pilih Detail Peti', placeholder: 'Pilih Detail Peti',
ajax: { ajax: {
url: path, url: path,
@ -154,7 +148,7 @@
delay: 250, delay: 250,
processResults: function(data) { processResults: function(data) {
return { return {
results: $.map(data, function(item) { results: $.map(data.peti, function(item) {
return { return {
text: item.fix_lot, text: item.fix_lot,
id: item.id id: item.id
@ -165,6 +159,27 @@
cache: true cache: true
} }
}); });
// Inisialisasi select2 untuk customer
// $('#searchCustomer').select2({
// placeholder: 'Pilih Detail Customer',
// ajax: {
// url: path,
// dataType: 'json',
// delay: 250,
// processResults: function(data) {
// return {
// results: $.map(data.customer, function(item) {
// return {
// text: item.name,
// id: item.id
// }
// })
// };
// },
// cache: true
// }
// });
</script> </script>
<!-- auto disable form pada saat sudah di simpan--> <!-- auto disable form pada saat sudah di simpan-->
@ -222,29 +237,34 @@
customerSelect.value = customerId; customerSelect.value = customerId;
}); });
</script> --}} </script> --}}
<!-- Penambahan cara baru -->
{{-- <script> {{-- <script>
// Mendapatkan elemen select detail peti // Mendapatkan elemen select detail peti
const petiSelect = $('#search'); const petiSelect = $('#searchPeti');
// Mendapatkan elemen select customer // Mendapatkan elemen select warehouse
const customerSelect = $('#customer_id');
// Mendapatkan elemen select asal gudang
const warehouseSelect = $('#warehouse_id'); const warehouseSelect = $('#warehouse_id');
// Menambahkan event listener ke select detail peti // Menambahkan event listener ke select detail peti
petiSelect.on('select2:select', function(e) { petiSelect.on('change', function() {
// Mendapatkan data tambahan dari opsi yang dipilih // Mendapatkan nilai peti_id yang terpilih
const warehouseId = e.params.data.warehouseId; const selectedPetiId = $(this).val();
const customerId = e.params.data.customerId;
// Memilih warehouse berdasarkan peti_id yang terpilih
// Memilih asal gudang berdasarkan data-warehouse-id $.ajax({
warehouseSelect.val(warehouseId).trigger('change'); url: `/api/peti/${selectedPetiId}/warehouse`, // Gantilah dengan URL endpoint yang sesuai
method: 'GET',
// Memilih customer berdasarkan data-customer-id success: function(warehouseData) {
customerSelect.val(customerId).trigger('change'); // Mengisi opsi warehouse
const warehouseOption = new Option(warehouseData.name, warehouseData.id, true,
true);
warehouseSelect.html('').append(warehouseOption).trigger('change');
},
error: function(error) {
console.error(error);
}
});
}); });
</script> --}} </script> --}}
@endsection @endsection

56
resources/views/dashboard/Transfer/create.blade.php

@ -16,7 +16,8 @@
<div class="form-group"> <div class="form-group">
<label for="peti_id" class="col-form-label">Pilih Detail Peti: <span <label for="peti_id" class="col-form-label">Pilih Detail Peti: <span
class="text-danger">*</span></label> class="text-danger">*</span></label>
<select class="form-control" name="peti_id" type="text" id="peti_id" required> <select class="form-control" id="searchPeti" name="peti_id"></select>
{{-- <select class="form-control" name="peti_id" type="text" id="peti_id" required>
<option disabled selected>Pilih Detail Peti</option> <option disabled selected>Pilih Detail Peti</option>
@foreach ($peti as $data_peti) @foreach ($peti as $data_peti)
<option value="{{ $data_peti->id }}" data-warehouse-id="{{ $data_peti->warehouse_id }}" <option value="{{ $data_peti->id }}" data-warehouse-id="{{ $data_peti->warehouse_id }}"
@ -24,7 +25,7 @@
{{ $data_peti->fix_lot }} {{ $data_peti->fix_lot }}
</option> </option>
@endforeach @endforeach
</select> </select> --}}
<label for="date" class="col-form-label">Tanggal Transfer: <span <label for="date" class="col-form-label">Tanggal Transfer: <span
class="text-danger">*</span></label> class="text-danger">*</span></label>
@ -42,7 +43,7 @@
<label for="source_warehouse" class="col-form-label">Asal Gudang: <span <label for="source_warehouse" class="col-form-label">Asal Gudang: <span
class="text-danger">*</span></label> class="text-danger">*</span></label>
<select class="form-control" name="source_warehouse" type="text" id="source_warehouse" required> <select class="form-control" name="source_warehouse" type="text" id="source_warehouse" required>
<option disabled selected>Asal gudang akan otomatis terpilih ketika memilih detail peti.</option> <option disabled selected>Pilih Asal gudang</option>
@foreach ($warehouse as $data) @foreach ($warehouse as $data)
<option value="{{ $data->id }}">{{ $data->name }}</option> <option value="{{ $data->id }}">{{ $data->name }}</option>
@endforeach @endforeach
@ -65,6 +66,55 @@
</div> </div>
</div> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
{{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
<script type="text/javascript">
var path = "{{ route('dashboard.transfer.autoCompleteSearch') }}";
$('#searchPeti').select2({
placeholder: 'Pilih Detail Peti',
ajax: {
url: path,
dataType: 'json',
delay: 250,
processResults: function(data) {
return {
results: $.map(data.peti, function(item) {
return {
text: item.fix_lot,
id: item.id
}
})
};
},
cache: true
}
});
// Inisialisasi select2 untuk customer
// $('#searchCustomer').select2({
// placeholder: 'Pilih Detail Customer',
// ajax: {
// url: path,
// dataType: 'json',
// delay: 250,
// processResults: function(data) {
// return {
// results: $.map(data.customer, function(item) {
// return {
// text: item.name,
// id: item.id
// }
// })
// };
// },
// cache: true
// }
// });
</script>
<!-- auto disable form pada saat sudah di simpan--> <!-- auto disable form pada saat sudah di simpan-->
<script> <script>
document.getElementById('transferForm').addEventListener('submit', function() { document.getElementById('transferForm').addEventListener('submit', function() {

2
routes/web.php

@ -97,6 +97,7 @@ Route::prefix('dashboard')->name('dashboard.')->middleware(['auth'])->group(func
Route::get('transfer/{id}/edit', 'edit')->name('transfer.edit'); Route::get('transfer/{id}/edit', 'edit')->name('transfer.edit');
Route::put('transfer/{id}', 'update')->name('transfer.update'); Route::put('transfer/{id}', 'update')->name('transfer.update');
Route::delete('transfer/delete/{id}', 'destroy')->name('transfer.destroy'); Route::delete('transfer/delete/{id}', 'destroy')->name('transfer.destroy');
Route::get('transfer/Search', 'autoCompleteSearch')->name('transfer.autoCompleteSearch');
}); });
//Halaman Disposal //Halaman Disposal
@ -107,6 +108,7 @@ Route::prefix('dashboard')->name('dashboard.')->middleware(['auth'])->group(func
Route::get('disposal/{id}/edit', 'edit')->name('disposal.edit'); Route::get('disposal/{id}/edit', 'edit')->name('disposal.edit');
Route::put('disposal/{id}', 'update')->name('disposal.update'); Route::put('disposal/{id}', 'update')->name('disposal.update');
Route::delete('disposal/delete/{id}', 'destroy')->name('disposal.destroy'); Route::delete('disposal/delete/{id}', 'destroy')->name('disposal.destroy');
Route::get('disposal/Search', 'autoCompleteSearch')->name('disposal.autoCompleteSearch');
}); });
//Halaman History //Halaman History

Loading…
Cancel
Save