done project directory -> update ke bu panca
This commit is contained in:
parent
ed5695b791
commit
14216d5784
@ -62,7 +62,12 @@ class DashboardController extends Controller
|
|||||||
->when($subArray, fn($q) => $q->whereIn('id_sub_unit_kerja', $subArray))
|
->when($subArray, fn($q) => $q->whereIn('id_sub_unit_kerja', $subArray))
|
||||||
->when($katArray, fn($q) => $q->whereIn('master_kategori_directory_id', $katArray))
|
->when($katArray, fn($q) => $q->whereIn('master_kategori_directory_id', $katArray))
|
||||||
->when($klaArray, fn($q) => $q->whereIn('master_klasifikasi_directory_id', $klaArray))
|
->when($klaArray, fn($q) => $q->whereIn('master_klasifikasi_directory_id', $klaArray))
|
||||||
->when($keyword, fn($q) => $q->where('file', 'ilike', "%{$keyword}%")->orWhere('pegawai_nama_entry', 'ilike', "%{$keyword}%"))
|
->when($keyword, fn($q) =>
|
||||||
|
$q->where(function($query) use ($keyword) {
|
||||||
|
$query->where('file', 'ilike', "%{$keyword}%")
|
||||||
|
->orWhere('pegawai_nama_entry', 'ilike', "%{$keyword}%");
|
||||||
|
})
|
||||||
|
)
|
||||||
])
|
])
|
||||||
])
|
])
|
||||||
->select('id', 'name')
|
->select('id', 'name')
|
||||||
@ -87,8 +92,10 @@ class DashboardController extends Controller
|
|||||||
->with([ // muat relasi
|
->with([ // muat relasi
|
||||||
'subUnitKerja' => fn($q) => $q->with([ // sub-unit
|
'subUnitKerja' => fn($q) => $q->with([ // sub-unit
|
||||||
'fileDirectory' => fn($f) => $f->when($keyword, fn($q) =>
|
'fileDirectory' => fn($f) => $f->when($keyword, fn($q) =>
|
||||||
$q->where('file', 'ilike', "%{$keyword}%")
|
$q->where(function($query) use ($keyword) {
|
||||||
->orWhere('pegawai_nama_entry', 'ilike', "%{$keyword}%")
|
$query->where('file', 'ilike', "%{$keyword}%")
|
||||||
|
->orWhere('pegawai_nama_entry', 'ilike', "%{$keyword}%");
|
||||||
|
})
|
||||||
)
|
)
|
||||||
])
|
])
|
||||||
])
|
])
|
||||||
@ -106,7 +113,10 @@ class DashboardController extends Controller
|
|||||||
'subUnitKerja' => fn($q) => $q->where('id', $authSub)
|
'subUnitKerja' => fn($q) => $q->where('id', $authSub)
|
||||||
->with([ // 2. file-directory + filter keyword
|
->with([ // 2. file-directory + filter keyword
|
||||||
'fileDirectory' => fn($f) => $f->when($keyword, fn($q) =>
|
'fileDirectory' => fn($f) => $f->when($keyword, fn($q) =>
|
||||||
$q->where('file', 'like', "%{$keyword}%")->orWhere('pegawai_nama_entry', 'ilike', "%{$keyword}%")
|
$q->where(function($query) use ($keyword) {
|
||||||
|
$query->where('file', 'ilike', "%{$keyword}%")
|
||||||
|
->orWhere('pegawai_nama_entry', 'ilike', "%{$keyword}%");
|
||||||
|
})
|
||||||
)
|
)
|
||||||
])
|
])
|
||||||
])
|
])
|
||||||
@ -130,26 +140,30 @@ class DashboardController extends Controller
|
|||||||
$datas = request()->input('data');
|
$datas = request()->input('data');
|
||||||
$result = [];
|
$result = [];
|
||||||
foreach($datas as $index => $value){
|
foreach($datas as $index => $value){
|
||||||
$file = request()->file("data.$index.file");
|
$files = request()->file("data.fileUpload$index");
|
||||||
list($id_unit_kerja, $nama_unit_kerja) = explode('/', $value['id_unit_kerja'],2);
|
if(!empty($files)){
|
||||||
list($id_sub_unit_kerja, $nama_sub_unit_kerja) = explode('/', $value['id_sub_unit_kerja'],2);
|
foreach ($files['file'] as $file) {
|
||||||
list($master_kategori_directory_id, $nama_kategori) = explode('/', $value['master_kategori_directory_id'],2);
|
list($id_unit_kerja, $nama_unit_kerja) = explode('/', $value['id_unit_kerja'],2);
|
||||||
list($klasifikasi, $nama_klasifikasi) = explode('/', $value['klasifikasi'],2);
|
list($id_sub_unit_kerja, $nama_sub_unit_kerja) = explode('/', $value['id_sub_unit_kerja'],2);
|
||||||
$payload = [
|
list($master_kategori_directory_id, $nama_kategori) = explode('/', $value['master_kategori_directory_id'],2);
|
||||||
'master_klasifikasi_directory_id' => $klasifikasi,
|
list($klasifikasi, $nama_klasifikasi) = explode('/', $value['klasifikasi'],2);
|
||||||
'id_unit_kerja' => $id_unit_kerja,
|
$payload = [
|
||||||
'id_sub_unit_kerja' => $id_sub_unit_kerja,
|
'master_klasifikasi_directory_id' => $klasifikasi,
|
||||||
'master_kategori_directory_id' => $master_kategori_directory_id,
|
'id_unit_kerja' => $id_unit_kerja,
|
||||||
'pegawai_id_entry' => auth()->user()->id ?? 1,
|
'id_sub_unit_kerja' => $id_sub_unit_kerja,
|
||||||
'pegawai_nama_entry' => auth()->user()->namalengkap ?? 'tes',
|
'master_kategori_directory_id' => $master_kategori_directory_id,
|
||||||
];
|
'pegawai_id_entry' => auth()->user()->dataUser->id ?? 1,
|
||||||
if($file){
|
'pegawai_nama_entry' => auth()->user()->dataUser->namalengkap ?? 'tes',
|
||||||
$imageName = $file->getClientOriginalName();
|
];
|
||||||
$path = "{$nama_unit_kerja}/{$nama_sub_unit_kerja}/{$nama_kategori}/{$nama_klasifikasi}";
|
if($file){
|
||||||
$file->storeAs($path, $imageName, 'file_directory');
|
$imageName = $file->getClientOriginalName();
|
||||||
$payload['file'] =$path .'/' .$imageName;
|
$path = "{$nama_unit_kerja}/{$nama_sub_unit_kerja}/{$nama_kategori}/{$nama_klasifikasi}";
|
||||||
|
$file->storeAs($path, $imageName, 'file_directory');
|
||||||
|
$payload['file'] =$path .'/' .$imageName;
|
||||||
|
}
|
||||||
|
FileDirectory::create($payload);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
FileDirectory::create($payload);
|
|
||||||
}
|
}
|
||||||
DB::connection('dbDirectory')->commit();
|
DB::connection('dbDirectory')->commit();
|
||||||
return response()->json([
|
return response()->json([
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 129 KiB |
@ -1,57 +1,133 @@
|
|||||||
|
let allFiles = [];
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
document.querySelectorAll(".file-input").forEach(input => {
|
||||||
|
bindFileUpload(input);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
formCreate.on('submit', function(e){
|
function bindFileUpload(input) {
|
||||||
e.preventDefault();
|
const dropArea = input.closest(".file-drop-area");
|
||||||
|
const fileNameBox = dropArea.querySelector(".file-name");
|
||||||
|
const inputId = input?.id;
|
||||||
|
allFiles[inputId] = [];
|
||||||
|
input.addEventListener("change", function () {
|
||||||
|
for (let i = 0; i < this.files.length; i++) {
|
||||||
|
allFiles[inputId].push(this.files[i]);
|
||||||
|
}
|
||||||
|
renderFileList(inputId, fileNameBox);
|
||||||
|
this.value = ""; // reset agar bisa pilih file lagi
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const form = this;
|
function renderFileList(inputId, container) {
|
||||||
const formData = new FormData(form);
|
const files = allFiles[inputId];
|
||||||
|
if (!files || files.length === 0) {
|
||||||
fetch(`/upload`, {
|
container.classList.add("d-none");
|
||||||
method: 'POST',
|
container.innerHTML = "";
|
||||||
headers: {
|
return;
|
||||||
'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
|
|
||||||
},
|
|
||||||
body: formData
|
|
||||||
}).then(async(res) => {
|
|
||||||
const responseData = await res.json();
|
|
||||||
if (responseData.status) {
|
|
||||||
const handler = function () {
|
|
||||||
Toastify({
|
|
||||||
text: responseData.message || 'Berhasil melakukan aksi!',
|
|
||||||
duration: 3000,
|
|
||||||
gravity: "top", // bisa "bottom"
|
|
||||||
position: "right", // bisa "left"
|
|
||||||
style: {
|
|
||||||
background: "linear-gradient(to right, #00b09b, #96c93d)", // hijau gradasi
|
|
||||||
color: "#fff",
|
|
||||||
}
|
|
||||||
}).showToast();
|
|
||||||
$("#col_add_file").html('');
|
|
||||||
colCount = 1; // reset counter
|
|
||||||
formCreate.find('input[type="text"], input[type="file"]').val('');
|
|
||||||
formCreate.find('select').val(null).trigger('change');
|
|
||||||
|
|
||||||
if($("#klasifikasi_dok").val().length === 0 || $("#kategori_dok").val().length === 0 ){
|
|
||||||
index()
|
|
||||||
}else{
|
|
||||||
searchData()
|
|
||||||
}
|
|
||||||
modalCreate.removeEventListener('hidden.bs.modal', handler);
|
|
||||||
};
|
|
||||||
modalCreate.addEventListener('hidden.bs.modal', handler);
|
|
||||||
bootstrap.Modal.getInstance(modalCreate).hide();
|
|
||||||
} else {
|
|
||||||
throw new Error(responseData.message || 'Terjadi kesalahan saat menyimpan data.');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}).catch(err => {
|
let list = "<ul class='list-unstyled mb-0'>";
|
||||||
if (err.message) {
|
files.forEach((file, index) => {
|
||||||
|
list += `
|
||||||
|
<li class="d-flex justify-content-between align-items-center">
|
||||||
|
<span>✔ ${file.name}</span>
|
||||||
|
<button type="button" class="btn btn-sm btn-danger ms-2"
|
||||||
|
onclick="removeFile('${inputId}', ${index})">✖</button>
|
||||||
|
</li>`;
|
||||||
|
});
|
||||||
|
list += "</ul>";
|
||||||
|
|
||||||
|
container.innerHTML = list;
|
||||||
|
container.classList.remove("d-none");
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeFile(inputId, index) {
|
||||||
|
allFiles[inputId].splice(index, 1);
|
||||||
|
const container = document.querySelector(`#${inputId}`).closest(".file-drop-area").querySelector(".file-name");
|
||||||
|
renderFileList(inputId, container);
|
||||||
|
}
|
||||||
|
|
||||||
|
formCreate.on('submit', function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
let hasFile = false;
|
||||||
|
for (const inputId in allFiles) {
|
||||||
|
if(allFiles[inputId] && allFiles[inputId].length > 0){
|
||||||
|
hasFile = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!hasFile){
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
icon: 'error',
|
icon: 'warning',
|
||||||
title: 'Gagal',
|
title: 'Perhatian',
|
||||||
text: err.message
|
text: 'Silahkan upload minimal 1 file sebelum submit'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const formData = new FormData(this);
|
||||||
|
for (const inputId in allFiles) {
|
||||||
|
allFiles[inputId].forEach((file, index) => {
|
||||||
|
formData.append(`data[${inputId}][file][]`, file); // gunakan inputId = name input file di HTML, misal "files[]"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
fetch(`/upload`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
|
||||||
|
},
|
||||||
|
body: formData
|
||||||
|
}).then(async(res) => {
|
||||||
|
const responseData = await res.json();
|
||||||
|
if (responseData.status) {
|
||||||
|
const handler = function () {
|
||||||
|
Toastify({
|
||||||
|
text: responseData.message || 'Berhasil melakukan aksi!',
|
||||||
|
duration: 3000,
|
||||||
|
gravity: "top", // bisa "bottom"
|
||||||
|
position: "right", // bisa "left"
|
||||||
|
style: {
|
||||||
|
background: "linear-gradient(to right, #00b09b, #96c93d)", // hijau gradasi
|
||||||
|
color: "#fff",
|
||||||
|
}
|
||||||
|
}).showToast();
|
||||||
|
$("#col_add_file").html('');
|
||||||
|
colCount = 1; // reset counter
|
||||||
|
formCreate.find('input[type="file"]').each(function () {
|
||||||
|
const newInput = $(this).clone(); // clone dengan attribute multiple
|
||||||
|
$(this).replaceWith(newInput); // ganti input lama dengan baru
|
||||||
|
bindFileUpload(newInput[0])
|
||||||
|
});
|
||||||
|
|
||||||
|
formCreate.find('select').val(null).trigger('change');
|
||||||
|
document.querySelectorAll(".file-name").forEach(el => {
|
||||||
|
el.classList.add("d-none");
|
||||||
|
el.innerHTML = "";
|
||||||
|
});
|
||||||
|
if($("#klasifikasi_dok").val().length === 0 || $("#kategori_dok").val().length === 0 ){
|
||||||
|
index()
|
||||||
|
}else{
|
||||||
|
searchData()
|
||||||
|
}
|
||||||
|
modalCreate.removeEventListener('hidden.bs.modal', handler);
|
||||||
|
};
|
||||||
|
modalCreate.addEventListener('hidden.bs.modal', handler);
|
||||||
|
bootstrap.Modal.getInstance(modalCreate).hide();
|
||||||
|
} else {
|
||||||
|
throw new Error(responseData.message || 'Terjadi kesalahan saat menyimpan data.');
|
||||||
|
}
|
||||||
|
|
||||||
|
}).catch(err => {
|
||||||
|
if (err.message) {
|
||||||
|
Swal.fire({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Gagal',
|
||||||
|
text: err.message
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -90,8 +90,9 @@ function addForm(){
|
|||||||
|
|
||||||
let html = '';
|
let html = '';
|
||||||
|
|
||||||
html += `<div class="row mt-3" id="col-${colCount}">
|
html += `
|
||||||
<hr />
|
<div class="row mt-3" id="col-${colCount}">
|
||||||
|
<hr />
|
||||||
<div class="col-md-6 mb-2">
|
<div class="col-md-6 mb-2">
|
||||||
<label>Unit</label>
|
<label>Unit</label>
|
||||||
<select class="form-control" name="data[${colCount}][id_unit_kerja]" id="select_id_unit_kerja_${colCount}" required>
|
<select class="form-control" name="data[${colCount}][id_unit_kerja]" id="select_id_unit_kerja_${colCount}" required>
|
||||||
@ -104,7 +105,7 @@ function addForm(){
|
|||||||
<option value="" disable>Select Choose</option>
|
<option value="" disable>Select Choose</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-6 mb-2">
|
||||||
<label>Kategori Dokumen</label>
|
<label>Kategori Dokumen</label>
|
||||||
<select class="form-control" name="data[${colCount}][master_kategori_directory_id]" id="select_kategori_${colCount}" required>
|
<select class="form-control" name="data[${colCount}][master_kategori_directory_id]" id="select_kategori_${colCount}" required>
|
||||||
<option value="" disable>Select Choose</option>
|
<option value="" disable>Select Choose</option>
|
||||||
@ -113,11 +114,7 @@ function addForm(){
|
|||||||
`).join('')}
|
`).join('')}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-6 mb-2">
|
||||||
<label>File</label>
|
|
||||||
<input type="file" class="form-control" name="data[${colCount}][file]" placeholder="exp : Juknis" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-3">
|
|
||||||
<label>Klasifikasi Dokumen</label>
|
<label>Klasifikasi Dokumen</label>
|
||||||
<select class="form-select" name="data[${colCount}][klasifikasi]">
|
<select class="form-select" name="data[${colCount}][klasifikasi]">
|
||||||
<option value="" disable >Select Choose</option>
|
<option value="" disable >Select Choose</option>
|
||||||
@ -125,19 +122,30 @@ function addForm(){
|
|||||||
<option value="${kla?.master_klasifikasi_directory_id}/${kla?.nama_klasifikasi_directory}">${kla?.nama_klasifikasi_directory}</option>
|
<option value="${kla?.master_klasifikasi_directory_id}/${kla?.nama_klasifikasi_directory}">${kla?.nama_klasifikasi_directory}</option>
|
||||||
`).join('')}
|
`).join('')}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-md-11 mb-2">
|
||||||
|
<label for="fileUpload${colCount}" class="form-label fw-semibold">📂 Upload Dokumen</label>
|
||||||
|
<div class="file-drop-area border rounded-3 p-1 shadow-sm">
|
||||||
|
<input class="file-input" type="file" id="fileUpload${colCount}" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx" multiple>
|
||||||
|
<div class="mt-2 text-success fw-semibold d-none file-name"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-text text-muted fw-semibold">Format yang didukung: PDF, JPG, PNG, Excel dan Word</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-md-1">
|
<div class="col-md-1">
|
||||||
<button type="button" class="btn btn-danger mt-4 me-2" onclick="removeCol(${colCount})"><i class="fa-solid fa-trash"></i></button>
|
<button type="button" class="btn btn-danger mt-4 me-2" onclick="removeCol(${colCount})"><i class="fa-solid fa-trash"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
col.append(html)
|
col.append(html)
|
||||||
if(allAkses){
|
let newInput = document.querySelector(`#fileUpload${colCount}`);
|
||||||
selectOptionUnitKerjaV1(colCount)
|
bindFileUpload(newInput);
|
||||||
}else{
|
if(allAkses){
|
||||||
selectOptionUnitKerjaV2(colCount)
|
selectOptionUnitKerjaV1(colCount)
|
||||||
}
|
}else{
|
||||||
colCount++;
|
selectOptionUnitKerjaV2(colCount)
|
||||||
|
}
|
||||||
|
colCount++;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,10 +1,11 @@
|
|||||||
function renderTree(units, katDok) {
|
function renderTree(units, katDok, keyword) {
|
||||||
if (!Array.isArray(units)) return '';
|
if (!Array.isArray(units)) return '';
|
||||||
|
|
||||||
return `
|
return `
|
||||||
|
|
||||||
<ul class="file-tree-ul mt-3">
|
<ul class="file-tree-ul mt-3">
|
||||||
${units.map(el => `
|
${units.map(el => {
|
||||||
|
return `
|
||||||
<li class="file-tree-li folder">
|
<li class="file-tree-li folder">
|
||||||
<input class="form-check-input" type="checkbox" data-select="unit" data-unit_id="${el?.id}">
|
<input class="form-check-input" type="checkbox" data-select="unit" data-unit_id="${el?.id}">
|
||||||
<span class="fw-bolder">📂 ${el.name}</span>
|
<span class="fw-bolder">📂 ${el.name}</span>
|
||||||
@ -79,8 +80,8 @@ function renderTree(units, katDok) {
|
|||||||
`).join('')}
|
`).join('')}
|
||||||
</ul>
|
</ul>
|
||||||
` : ''}
|
` : ''}
|
||||||
</li>
|
</li>`
|
||||||
`).join('')}
|
}).join('')}
|
||||||
</ul>
|
</ul>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -101,7 +102,7 @@ function index(kategori_dok = [], unitKerja = null, subUnitKerja = [], klasifika
|
|||||||
file_tree.innerHTML = '';
|
file_tree.innerHTML = '';
|
||||||
|
|
||||||
if (Array.isArray(data?.data?.unitKerja)) {
|
if (Array.isArray(data?.data?.unitKerja)) {
|
||||||
file_tree.innerHTML = renderTree(data.data.unitKerja, data.data.katDok);
|
file_tree.innerHTML = renderTree(data.data.unitKerja, data.data.katDok, keyword);
|
||||||
|
|
||||||
// Toggle buka/tutup folder
|
// Toggle buka/tutup folder
|
||||||
file_tree.querySelectorAll(".folder > span").forEach(span => {
|
file_tree.querySelectorAll(".folder > span").forEach(span => {
|
||||||
@ -155,13 +156,21 @@ function searchData(){
|
|||||||
index(kategori_dok, unitKerja, subUnitKerja, klasifikasi_id);
|
index(kategori_dok, unitKerja, subUnitKerja, klasifikasi_id);
|
||||||
}
|
}
|
||||||
|
|
||||||
function searchFile(keyword){
|
let debounceTimer;
|
||||||
|
function debounceSearch(input) {
|
||||||
|
clearTimeout(debounceTimer);
|
||||||
|
debounceTimer = setTimeout(() => {
|
||||||
|
searchFile(input.value.trim());
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function searchFile(keyword){
|
||||||
let klasifikasi_id = $("#klasifikasi_dok").val()
|
let klasifikasi_id = $("#klasifikasi_dok").val()
|
||||||
let kategori_dok = $("#kategori_dok").val()
|
let kategori_dok = $("#kategori_dok").val()
|
||||||
let unitKerja = $("#unit_kerja").val()
|
let unitKerja = $("#unit_kerja").val()
|
||||||
let subUnitKerja = $("#sub_unit_kerja").val()
|
let subUnitKerja = $("#sub_unit_kerja").val()
|
||||||
index(kategori_dok, unitKerja, subUnitKerja, klasifikasi_id, keyword.value);
|
index(kategori_dok, unitKerja, subUnitKerja, klasifikasi_id, keyword);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -52,6 +52,7 @@
|
|||||||
color: blue;
|
color: blue;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@section('body_main')
|
@section('body_main')
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@ -120,48 +121,10 @@
|
|||||||
<button type="button" id="btn-download-multi" class="btn btn-sm btn-primary" onclick="downloadMultiple()" disabled>
|
<button type="button" id="btn-download-multi" class="btn btn-sm btn-primary" onclick="downloadMultiple()" disabled>
|
||||||
<i class="fas fa-download"></i> Download Multiple (<span id="multi-count">0</span>)
|
<i class="fas fa-download"></i> Download Multiple (<span id="multi-count">0</span>)
|
||||||
</button>
|
</button>
|
||||||
<input type="text" id="search_file" oninput="searchFile(this)" class="form-control form-control-sm" placeholder="Search" style="max-width:220px;">
|
<input type="text" id="search_file" oninput="debounceSearch(this)" class="form-control form-control-sm" placeholder="Search" style="max-width:220px;">
|
||||||
</div>
|
</div>
|
||||||
<div id="file_tree"></div>
|
<div id="file_tree"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="preview-wrapper" class="col-md-6 d-none">
|
|
||||||
<div class="card shadow-sm h-100">
|
|
||||||
|
|
||||||
<!-- Header -->
|
|
||||||
<div class="card-header d-flex justify-content-between align-items-center py-2">
|
|
||||||
<h6 class="mb-0">
|
|
||||||
📄 Preview <strong id="confirm_preview_file"></strong>
|
|
||||||
</h6>
|
|
||||||
<button class="btn btn-sm btn-outline-danger" id="close-preview" title="Tutup Preview">✕</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Body -->
|
|
||||||
<div class="card-body p-2" style="min-height:250px; max-height:70vh; overflow:auto;">
|
|
||||||
<div class="d-flex justify-content-end align-items-center" style="position: sticky; top: 0; background: #ffffff; z-index: 10;">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-primary" id="download-file">⬇ Download</button>
|
|
||||||
</div>
|
|
||||||
<div id="file-preview"
|
|
||||||
class="text-center text-muted d-flex justify-content-center align-items-center"
|
|
||||||
style="height:100%;">
|
|
||||||
<p>📂 Pilih file untuk melihat preview</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<div class="card-footer p-2 ">
|
|
||||||
<div class="text-black">Klasifikasi Dokumen <strong id="confirm-upload-klasifikasi"></strong></div>
|
|
||||||
<div class="mt-2 text-muted fst-italic small text-black">
|
|
||||||
Ditambahkan oleh <strong id="confirm-upload-dokumen"></strong> pada <span id="confirm-time-dokumen"></span>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex justify-content-end">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-danger" id="delete-file">
|
|
||||||
🗑 Hapus
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -171,6 +134,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@include('dashboard.modal.create')
|
@include('dashboard.modal.create')
|
||||||
|
@include('dashboard.modal.view')
|
||||||
<script>
|
<script>
|
||||||
const klasifikasiDok = @json($klasifikasiDok);
|
const klasifikasiDok = @json($klasifikasiDok);
|
||||||
const katDok = @json($katDok);
|
const katDok = @json($katDok);
|
||||||
@ -183,41 +147,39 @@
|
|||||||
document.addEventListener('click', function(e) {
|
document.addEventListener('click', function(e) {
|
||||||
if (e.target.matches('.file-link')) {
|
if (e.target.matches('.file-link')) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
let fileUrl = e.target.getAttribute('data-file');
|
let fileUrl = e.target.getAttribute('data-file');
|
||||||
let fileName = e.target.getAttribute('data-name_file');
|
let fileName = e.target.getAttribute('data-name_file');
|
||||||
let upload = e.target.getAttribute('data-upload');
|
let upload = e.target.getAttribute('data-upload');
|
||||||
let time = e.target.getAttribute('data-time');
|
let time = e.target.getAttribute('data-time');
|
||||||
let klasifikasiView = e.target.getAttribute('data-klasifikasi');
|
let klasifikasiView = e.target.getAttribute('data-klasifikasi');
|
||||||
$("#confirm-upload-dokumen").html(upload)
|
|
||||||
$("#confirm-time-dokumen").html(time)
|
$("#confirm-upload-dokumen").html(upload);
|
||||||
$("#confirm-upload-klasifikasi").html(klasifikasiView)
|
$("#confirm-time-dokumen").html(time);
|
||||||
currentFile = fileUrl
|
$("#confirm-upload-klasifikasi").html(klasifikasiView);
|
||||||
|
$("#confirm_preview_file").html(fileName);
|
||||||
|
|
||||||
|
currentFile = fileUrl;
|
||||||
idDirectory = e.target.getAttribute('data-id');
|
idDirectory = e.target.getAttribute('data-id');
|
||||||
|
|
||||||
let ext = fileUrl.split('.').pop().toLowerCase();
|
let ext = fileUrl.split('.').pop().toLowerCase();
|
||||||
$("#confirm_preview_file").html(fileName)
|
|
||||||
// ubah layout
|
|
||||||
document.getElementById('tree-wrapper').classList.remove('col-md-12');
|
|
||||||
document.getElementById('tree-wrapper').classList.add('col-md-6');
|
|
||||||
document.getElementById('preview-wrapper').classList.remove('d-none');
|
|
||||||
let previewBox = document.getElementById('file-preview');
|
let previewBox = document.getElementById('file-preview');
|
||||||
|
|
||||||
if (['jpg','jpeg','png','gif','webp'].includes(ext)) {
|
if (['jpg','jpeg','png','gif','webp'].includes(ext)) {
|
||||||
previewBox.innerHTML = `
|
previewBox.innerHTML = `<img src="/file/${fileUrl}" class="img-fluid rounded shadow-sm" width="100%" alt="preview">`;
|
||||||
<img src="/file/${fileUrl}" class="img-fluid rounded shadow-sm" width="100%" height="450px" alt="preview">
|
|
||||||
`;
|
|
||||||
} else if (ext === 'pdf') {
|
} else if (ext === 'pdf') {
|
||||||
previewBox.innerHTML = `
|
previewBox.innerHTML = `<iframe src="/file/${fileUrl}" width="100%" height="500px" style="border:none;"></iframe>`;
|
||||||
<iframe src="/file/${fileUrl}" width="100%" height="500px" style="border:none;"></iframe>
|
|
||||||
|
|
||||||
`;
|
|
||||||
} else {
|
} else {
|
||||||
previewBox.innerHTML = `
|
previewBox.innerHTML = `
|
||||||
<p class="text-muted">Tidak bisa preview file ini. Silakan download:</p>
|
<p class="text-muted">Tidak bisa preview file ini. Silakan download:</p>
|
||||||
<a href="/file/${fileUrl}" target="_blank" class="btn btn-sm btn-primary">⬇️ Download</a>
|
<a href="/file/${fileUrl}" target="_blank" class="btn btn-sm btn-primary">⬇️ Download</a>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
// 🔥 Tampilkan modal
|
||||||
|
$("#previewModal").modal("show");
|
||||||
|
|
||||||
|
}
|
||||||
if (e.target.id === 'delete-file') {
|
if (e.target.id === 'delete-file') {
|
||||||
if (!currentFile) {
|
if (!currentFile) {
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
@ -238,37 +200,48 @@
|
|||||||
confirmButtonText: 'Ya, hapus',
|
confirmButtonText: 'Ya, hapus',
|
||||||
cancelButtonText: 'Batal'
|
cancelButtonText: 'Batal'
|
||||||
}).then((result) => {
|
}).then((result) => {
|
||||||
if (result.isConfirmed) {
|
if (result.isConfirmed) {
|
||||||
fetch(`/delete-file/${idDirectory}`, {
|
fetch(`/delete-file/${idDirectory}`, {
|
||||||
method: 'DELETE',
|
method: 'DELETE',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
|
||||||
},
|
},
|
||||||
body: JSON.stringify({ file: currentFile })
|
body: JSON.stringify({ file: currentFile })
|
||||||
})
|
})
|
||||||
.then(res => res.json())
|
.then(res => res.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
text: 'File berhasil dihapus',
|
text: 'File berhasil dihapus',
|
||||||
icon: 'success',
|
icon: 'success',
|
||||||
timer: 2000,
|
timer: 2000,
|
||||||
showConfirmButton: false
|
showConfirmButton: false
|
||||||
});
|
});
|
||||||
const fileLink = document.querySelector(`a.file-link[data-id="${idDirectory}"]`);
|
|
||||||
if (fileLink) {
|
|
||||||
const li = fileLink.closest('li.file-tree-li');
|
|
||||||
li?.remove();
|
|
||||||
}
|
|
||||||
// reset preview
|
|
||||||
document.getElementById('file-preview').innerHTML =
|
|
||||||
`<p>📂 Pilih file untuk melihat preview</p>`;
|
|
||||||
|
|
||||||
document.getElementById('preview-wrapper').classList.add('d-none');
|
// Hapus link file dari tree
|
||||||
document.getElementById('tree-wrapper').classList.remove('col-md-6');
|
const fileLink = document.querySelector(`a.file-link[data-id="${idDirectory}"]`);
|
||||||
document.getElementById('tree-wrapper').classList.add('col-12');
|
if (fileLink) {
|
||||||
currentFile = null; // reset
|
const li = fileLink.closest('li.file-tree-li');
|
||||||
|
li?.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset modal preview
|
||||||
|
document.getElementById('file-preview').innerHTML =
|
||||||
|
`<p>📂 Pilih file untuk melihat preview</p>`;
|
||||||
|
document.getElementById('confirm_preview_file').innerHTML = "";
|
||||||
|
document.getElementById('confirm-upload-dokumen').innerHTML = "";
|
||||||
|
document.getElementById('confirm-time-dokumen').innerHTML = "";
|
||||||
|
document.getElementById('confirm-upload-klasifikasi').innerHTML = "";
|
||||||
|
|
||||||
|
// Tutup modal otomatis setelah hapus
|
||||||
|
let modalEl = document.getElementById('previewModal');
|
||||||
|
let modal = bootstrap.Modal.getInstance(modalEl);
|
||||||
|
modal.hide();
|
||||||
|
|
||||||
|
// Reset variabel
|
||||||
|
currentFile = null;
|
||||||
|
idDirectory = null;
|
||||||
} else {
|
} else {
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
text: 'Gagal menghapus file',
|
text: 'Gagal menghapus file',
|
||||||
@ -302,15 +275,12 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// tombol close
|
|
||||||
document.getElementById('close-preview').addEventListener('click', function() {
|
|
||||||
document.getElementById('tree-wrapper').classList.remove('col-md-6');
|
|
||||||
document.getElementById('tree-wrapper').classList.add('col-md-12');
|
|
||||||
document.getElementById('preview-wrapper').classList.add('d-none');
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script src="{{ ver('/js/dashboard/_init.js') }}"></script>
|
<script src="{{ ver('/js/dashboard/_init.js') }}"></script>
|
||||||
<script src="{{ ver('/js/dashboard/index.js') }}"></script>
|
<script src="{{ ver('/js/dashboard/index.js') }}"></script>
|
||||||
<script src="{{ ver('/js/dashboard/functions.js') }}"></script>
|
<script src="{{ ver('/js/dashboard/functions.js') }}"></script>
|
||||||
|
|||||||
@ -26,7 +26,7 @@
|
|||||||
<option value="" disable>Select Choose</option>
|
<option value="" disable>Select Choose</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-6 mb-2">
|
||||||
<label>Kategori Dokumen</label>
|
<label>Kategori Dokumen</label>
|
||||||
<select class="form-control" name="data[0][master_kategori_directory_id]" id="select_kategori_0" required>
|
<select class="form-control" name="data[0][master_kategori_directory_id]" id="select_kategori_0" required>
|
||||||
<option value="" disable>Select Choose</option>
|
<option value="" disable>Select Choose</option>
|
||||||
@ -35,22 +35,27 @@
|
|||||||
@endforeach
|
@endforeach
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-6 mb-2">
|
||||||
<label>File</label>
|
|
||||||
<input type="file" class="form-control" name="data[0][file]" placeholder="exp : Juknis" required>
|
|
||||||
{{-- <input type="hidden" class="form-control" name="id_unit_kerja" id="id_unit_kerja" value="{{ $authUnitKerja }}" placeholder="exp : Juknis">
|
|
||||||
<input type="hidden" class="form-control" name="id_sub_unit_kerja" id="id_sub_unit_kerja" placeholder="exp : Juknis" value="{{ $authSubUnitKerja }}"> --}}
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4">
|
|
||||||
<label>Klasifikasi File</label>
|
<label>Klasifikasi File</label>
|
||||||
<select class="form-select" name="data[0][klasifikasi]" required>
|
<select class="form-select" name="data[0][klasifikasi]" required>
|
||||||
<option value="" disable>Select Choose</option>
|
<option value="" disable>Select Choose</option>
|
||||||
@foreach ($klasifikasiDok as $klasifikasi)
|
@foreach ($klasifikasiDok as $klasifikasi)
|
||||||
<option value="{{ $klasifikasi->master_klasifikasi_directory_id }}/{{ $klasifikasi->nama_klasifikasi_directory }}">{{ $klasifikasi->nama_klasifikasi_directory }}</option>
|
<option value="{{ $klasifikasi->master_klasifikasi_directory_id }}/{{ $klasifikasi->nama_klasifikasi_directory }}">
|
||||||
|
{{ $klasifikasi->nama_klasifikasi_directory }}
|
||||||
|
</option>
|
||||||
@endforeach
|
@endforeach
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-md-12 mb-2">
|
||||||
|
<label for="fileUpload0" class="form-label fw-semibold">📂 Upload Dokumen</label>
|
||||||
|
<div class="file-drop-area border rounded-2 p-1 shadow-sm">
|
||||||
|
<input class="file-input" type="file" id="fileUpload0" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx" multiple>
|
||||||
|
<div class="mt-2 text-success fw-semibold d-none file-name"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-text text-muted fw-semibold">
|
||||||
|
Form bersifat multiple dan format yang didukung: JPG, JPEG, PDF, PNG, PPT Excel dan Word
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div id="col_add_file"></div>
|
<div id="col_add_file"></div>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-outline-primary btn-sm mt-3" onclick="addForm()">
|
<button type="button" class="btn btn-outline-primary btn-sm mt-3" onclick="addForm()">
|
||||||
|
|||||||
41
resources/views/dashboard/modal/view.blade.php
Normal file
41
resources/views/dashboard/modal/view.blade.php
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<!-- Modal Preview -->
|
||||||
|
<div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
|
||||||
|
<div class="modal-content">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="modal-header">
|
||||||
|
<h6 class="modal-title" id="previewModalLabel">
|
||||||
|
📄 Preview <strong id="confirm_preview_file"></strong>
|
||||||
|
</h6>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Body -->
|
||||||
|
<div class="modal-body p-2" style="min-height:250px; max-height:70vh; overflow:auto;">
|
||||||
|
<div class="d-flex justify-content-end align-items-center sticky-top bg-white z-10">
|
||||||
|
<button type="button" class="btn btn-sm btn-outline-danger mb-2 ms-2" id="delete-file">🗑 Hapus</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-outline-primary mb-2" id="download-file">⬇ Download</button>
|
||||||
|
</div>
|
||||||
|
<div id="file-preview"
|
||||||
|
class="text-center text-muted d-flex justify-content-center align-items-center"
|
||||||
|
style="height:100%;">
|
||||||
|
<p>📂 Pilih file untuk melihat preview</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="modal-footer d-flex justify-content-between">
|
||||||
|
<div>
|
||||||
|
<div class="text-black">Klasifikasi Dokumen <strong id="confirm-upload-klasifikasi"></strong></div>
|
||||||
|
<div class="mt-2 text-muted fst-italic small text-black">
|
||||||
|
Ditambahkan oleh <strong id="confirm-upload-dokumen"></strong> pada <span id="confirm-time-dokumen"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
x
Reference in New Issue
Block a user