Skip to content

Commit

Permalink
Merge commit 'b9149c83abaacbc42cf56f91c96abc0baf7384cd' into v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@punkestu
punkestu committed Jan 27, 2025
2 parents 2a09559 + b9149c8 commit 74bb036
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 80 deletions.
7 changes: 5 additions & 2 deletions app/Http/Controllers/API/Rotasi/CabangController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,15 @@ public function editNode(Request $request)
'cabang_id' => 'required|exists:cabangs,id',
'root_id' => 'nullable|exists:cabang_nodes,id',
]);
$node = CabangNode::where('cabang_id', $request->cabang_id)->first();
if ($node && $node->id == $request->root_id) {
return response()->json(['message' => 'success']);
}
CabangNode::updateOrCreate(
['cabang_id' => $request->cabang_id],
['cabang_id' => $request->cabang_id, 'root_id' => $request->root_id]
);
$cabangNodes = CabangNode::with('cabang')->get();
return response()->json(['message' => 'success', 'cabangNodes' => $cabangNodes]);
return response()->json(['message' => 'success']);
}
public function deleteNode($cabang_id)
{
Expand Down
5 changes: 3 additions & 2 deletions app/Http/Controllers/Rotasi/CabangController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,8 +295,9 @@ public function struktur()

public function strukturEdit()
{
$nodes = CabangNode::with('cabang')->get();
$nodes = CabangNode::getTree();
$snodes = CabangNode::with('cabang')->get();
$cabangs = Cabang::all();
return view('rotasi.cabang.struktur-edit', ['nodes' => $nodes, 'cabangs' => $cabangs]);
return view('rotasi.cabang.struktur-edit', ['nodes' => $nodes, 'snodes' => $snodes, 'cabangs' => $cabangs]);
}
}
6 changes: 6 additions & 0 deletions app/Models/CabangNode.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@ public static function getTree($rootId = null)
return $roots->map(function ($root) {
return [
'id' => (string)$root->id,
'cabang_id' => $root->cabang_id,
'root_id' => $root->root_id,
'cabang' => $root->cabang,
'data' => [
'name' => $root->cabang->nama,
],
Expand All @@ -56,6 +59,9 @@ public static function getTree($rootId = null)

$result = [
'id' => (string)$root->id,
'cabang_id' => $root->cabang_id,
'root_id' => $root->root_id,
'cabang' => $root->cabang,
'data' => [
'name' => $root->cabang->nama,
],
Expand Down
35 changes: 35 additions & 0 deletions resources/views/components/strukturtree.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<div id="node-{{ $node['id'] }}" data-cabangid="{{ $node['cabang_id'] }}" class="border p-1 mb-2">
<div class="flex mb-2 gap-2">
<button class="node-cabang flex-grow border text-start"
data-idnode="{{ $node['id'] }}">{{ $node['cabang']->nama }}</button>
<div>
<select class="node-list">
<option value="">PUSAT</option>
@foreach ($snodes as $snode)
<option value="{{ $snode['id'] }}" @if ($node['root_id'] == $snode['id']) selected @endif>
{{ $snode['cabang']->nama }}
</option>
@endforeach
</select>
<button class="edit-node" data-idnode="{{ $node['id'] }}">Simpan</button>
<button class="hapus-node" data-idnode="{{ $node['id'] }}"="">Hapus</button>
</div>
</div>
<div id="child-of-{{ $node['id'] }}" class="ml-2 border p-1">
<div class="modifier">
<select class="cabang-list">
@foreach ($cabangs as $cabang)
<option value="{{ $cabang->id }}">
{{ $cabang->nama }}
</option>
@endforeach
</select>
<button class="tambah-node" data-idnode="{{ $node['id'] }}">Tambah</button>
</div>
@if (isset($node['children']))
@foreach ($node['children'] as $child)
@include('components.strukturtree', ['node' => $child])
@endforeach
@endif
</div>
</div>
142 changes: 66 additions & 76 deletions resources/views/rotasi/cabang/struktur-edit.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,56 +10,62 @@
@include('components/header', ['static' => true])
@include('components.modal-component')
<main class="px-8 py-16">
<div>
<select id="tambah-select-cabang">
<div id="node-pusat" class="mb-2">
<select class="cabang-list">
@foreach ($cabangs as $cabang)
<option value="{{ $cabang->id }}">{{ $cabang->nama }}</option>
@endforeach
</select>
<button onclick="tambah()">Tambah</button>
<button class="tambah-node" data-idnode="pusat">Tambah</button>
</div>
<div id="nodes">
@foreach ($nodes as $node)
<div class="flex items-center justify-between" id="node-{{ $node->cabang_id }}">
<p class="text-lg font-bold">{{ $node->cabang->nama }}</p>
<aside>
<select>
<option value="">PUSAT</option>
@foreach ($nodes as $snode)
<option value="{{ $snode->id }}" @if ($node->root_id == $snode->id) selected @endif>
{{ $snode->cabang->nama }}
</option>
@endforeach
</select>
<button onclick="edit({{ $node->cabang_id }})">Simpan</button>
<button onclick="hapus({{ $node->cabang_id }})">Hapus</button>
</aside>
</div>
@endforeach
@if ($nodes)
@foreach ($nodes as $node)
@include('components.strukturtree', ['node' => $node])
@endforeach
@endif
</div>
</main>
<template id="node-template">
<p class="text-lg font-bold" id="nama"></p>
<aside>
<select>
<option value="">PUSAT</option>
@foreach ($nodes as $snode)
<option value="{{ $snode->id }}">
{{ $snode->cabang->nama }}
</option>
@endforeach
</select>
<button id="simpan">Simpan</button>
<button id="hapus">Hapus</button>
</aside>
</template>
@include('components.footer')
<script src="/script/nav.js"></script>
<script src="/script/chatbot.js"></script>
<script>
function edit(id) {
const cabang_id = id;
const root_id = document.getElementById(`node-${id}`).querySelector('select').value;
document.querySelectorAll('.node-cabang').forEach((el) => {
el.addEventListener('click', (e) => {
const idnode = e.target.getAttribute('data-idnode');
const child = document.querySelector(`#child-of-${idnode}`);
child.classList.toggle('hidden');
});
});
document.querySelectorAll('.tambah-node').forEach((el) => {
el.addEventListener('click', (e) => {
const idnode = e.target.getAttribute('data-idnode');
const node = document.querySelector(`#node-${idnode}`);
const cabang_id = node.querySelector('.cabang-list').value;
const root_id = idnode === 'pusat' ? null : idnode;
tambah(cabang_id, root_id);
});
});
document.querySelectorAll('.edit-node').forEach((el) => {
el.addEventListener('click', (e) => {
const idnode = e.target.getAttribute('data-idnode');
const node = document.querySelector(`#node-${idnode}`);
const cabang_id = node.getAttribute('data-cabangid');
const root_id = node.querySelector('.node-list').value;
edit(cabang_id, root_id);
});
});
document.querySelectorAll('.hapus-node').forEach((el) => {
el.addEventListener('click', (e) => {
const idnode = e.target.getAttribute('data-idnode');
const node = document.querySelector(`#node-${idnode}`);
const cabang_id = node.getAttribute('data-cabangid');
hapus(cabang_id);
});
});
</script>
<script>
function edit(cabang_id, root_id) {
fetch("/api/struktur-cabang/edit", {
method: 'POST',
headers: {
Expand All @@ -72,29 +78,13 @@ function edit(id) {
})
}).then(response => response.json())
.then(data => {
console.log(data);
const newNodes = data.cabangNodes;
document.querySelectorAll('#nodes > div select').forEach(node => {
const selectedNode = node.value;
node.innerHTML = '';
node.innerHTML = '<option value="">PUSAT</option>';
newNodes.forEach(newNode => {
const option = document.createElement('option');
option.value = newNode.id;
option.textContent = newNode.cabang.nama;
if (newNode.id == selectedNode) {
option.selected = true;
}
node.appendChild(option);
});
});
alert('Berhasil disimpan');
window.location.reload();
})
.catch(error => console.error(error));
}
function hapus(id) {
const cabang_id = id;
function hapus(cabang_id) {
fetch("/api/struktur-cabang/delete/" + cabang_id, {
method: 'DELETE',
headers: {
Expand All @@ -103,34 +93,34 @@ function hapus(id) {
},
}).then(response => response.json())
.then(data => {
console.log(data);
alert('Berhasil dihapus');
window.location.reload();
})
.catch(error => console.error(error));
}
function tambah() {
const nodes = document.getElementById('nodes');
const selected_cabang = document.getElementById('tambah-select-cabang').value;
const is_exists = document.getElementById(`node-${selected_cabang}`);
if (is_exists) {
function tambah(cabang_id, root_id = null) {
const node_exists = document.querySelector(`[data-cabangid="${cabang_id}"]`);
if (node_exists) {
alert('Cabang sudah ada');
return;
}
const nodeTemplate = document.getElementById('node-template').content.cloneNode(true);
nodeTemplate.querySelector('#nama').textContent = document.querySelector(
'#tambah-select-cabang > option:checked').textContent;
nodeTemplate.querySelector("#simpan").onclick = () => edit(selected_cabang);
nodeTemplate.querySelector("#hapus").onclick = () => hapus(selected_cabang);
const item = document.createElement('div');
item.classList.add('flex', 'items-center', 'justify-between');
item.id = `node-${selected_cabang}`;
item.appendChild(nodeTemplate);
nodes.appendChild(item);
fetch("/api/struktur-cabang/edit", {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
cabang_id,
root_id,
})
}).then(response => response.json())
.then(data => {
alert('Berhasil disimpan');
window.location.reload();
})
.catch(error => console.error(error));
}
</script>
</body>

0 comments on commit 74bb036

Please sign in to comment.