crm-summit/app/Views/kb_view.php

<?= $this->extend('layouts/main.php') ?>

<?= $this->section('content') ?>
<?php
$boardname = $boards[0]['boardname'];
$boardid = $boards[0]['boardid'];
// sorting card by list
?>
<link href='<?=base_url();?>/assets/dragula.min.css' rel='stylesheet' type='text/css' />
<style>
	.kanban_cards { margin: 5px 0;padding:5px; color:black; background-color:rgba(0,0,0,10%); }
	.kanban { min-height:250px; }
	hr{ margin:0;}
	.btn-xs { font-size:75%; padding:3px; pointer-events: none;	 }
	.kanban_header,.kanban_footer { font-size:80%; }
	h4 select {font-size:80%;}
</style>
<div class='page-wrapper'>
	<div class="container-fluid">
		<div class="row page-titles mb-2">
			<div class="col align-self-center">
				<h4 class="text-themecolor">
					Kanban Board - <?=$boardname;?>
				</h4>				
			</div>
			<div class="col text-end">
				<div class="dropdown">
					<button class="btn btn-dark text-white btn-sm dropdown-toggle mb-2" type="button" data-bs-toggle="dropdown"> <i class="fa-solid fa-gear"></i> </button>
					<ul class="dropdown-menu">
						<li><button class="dropdown-item" onclick="window.open('<?=base_url();?>/kanban/card/create/<?=$lists[0]['listid'];?>','_blank','width=800,height=500')" >New Card</button></li>
						<li><button class="dropdown-item" onclick="window.open('<?=base_url();?>/kanban/board/edit/<?=$boardid;?>','_blank','width=800,height=500')" >Edit Board</button></li>
					</ul>
				</div>		
			</div>
		</div>
		
		<div class='row'>
			<?php
			$qdragula = '';
			foreach($lists as $list) {
				$qlistid = $list['listid'];
				$qlistname = $list['listname'];
				$qnlistname = str_replace(' ','',$qlistname);
				$qdragula .= "document.getElementById('kanban_$qnlistname'),";
			?>
			<div class='col'>
				<div class='card'>
					<div class='card-body'>
						<div class='row'>
							<div class='col'> <h5 class='card-title'><?=$qlistname;?></h5> </div>
							<div class='col text-end'>
								<div class="dropdown">
									<button class="btn btn-info btn-sm dropdown-toggle mb-2" type="button" data-bs-toggle="dropdown"> <i class="fa-solid fa-gear"></i> </button>
									<ul class="dropdown-menu">
										<li><button class="dropdown-item" onclick="window.open('<?=base_url();?>/kanban/card/create/<?=$qlistid;?>','_blank','width=800, height=500')">New Card</button></li>
										<li><button class="dropdown-item" onclick="window.open('<?=base_url();?>/kanban/list/edit/<?=$qlistid;?>','_blank','width=800, height=500')">Edit List</button></li>
									</ul>
								</div>
							</div>
						</div>
						<hr/>
						<div id='kanban_<?=$qnlistname;?>' class='col kanban' data-listid='<?=$qlistid;?>'>
						<!--
							<div class='kanban_cards'>
								<div class='row kanban_header'>
									<div class='col text-start'><span class='btn btn-xs btn-primary'>Low</span></div>
									<div class='col text-end'><i class='fas fa-pencil text-end'></i></div>
								</div>
								<pre>TOS mengambil data dari alat user</pre>
								<hr>
								<div class='row kanban_footer'>
									<div class='col text-start'>2024-05-10</div>
									<div class='col text-end'>ADH / APP</div>
								</div>
							</div>
						-->
							<?php
							foreach($cards as $card) {
								$qcardid = $card['cardid'];
								$qcardtext = $card['cardtext'];
								$qpriority = $card_priorities[$card['priority']];
								$quser = $card['firstname'].' '.$card['lastname'];
								$qcreatedate = $card['createdate'];
								$qcard_listid = $card['listid'];
								if($qlistid == $qcard_listid) {
							?>
							<div class='kanban_cards' data-cardid='<?=$qcardid;?>'>
								<div class='row kanban_header'>
									<div class='col text-start'><span class='btn btn-xs btn-primary'><?=$qpriority;?></span></div>
									<div class='col text-end'>
										<div class="dropdown">
											<i class="fa-solid fa-gear" data-bs-toggle="dropdown"></i>
											<ul class="dropdown-menu">
												<li><button class="dropdown-item" onclick="window.open('<?=base_url();?>/kanban/card/edit/<?=$qlistid;?>/<?=$qcardid;?>','_blank','width=800, height=500')">Edit Card</button></li>
												<li><button class="dropdown-item">Archive Card</button></li>
											</ul>
										</div>
									</div>
								</div>
								<pre><?=$qcardtext;?></pre>
								<hr>
								<div class='row kanban_footer'>
									<div class='col text-start'><?=$qcreatedate;?></div>
									<div class='col text-end'><?=$quser?></div>
								</div>
							</div>
							<?php
								}
							}
							?>
						</div>
					</div>
				</div>
			</div>
			<?php
			}
			$qdragula = rtrim($qdragula, ',');
			?>
		</div>
	</div>
</div>
<?= $this->endSection() ?>

<?= $this->section('script') ?>
<script src='<?=base_url();?>/assets/dragula.min.js'></script>
<script>
	const xhttp = new XMLHttpRequest();
	//dragula([document.getElementById('kanban_todo'), document.getElementById('kanban_inprogress'), document.getElementById('kanban_done')]);
	dragula([<?=$qdragula;?>])
		.on('drop', function(el, target) {
			cardid = el.getAttribute('data-cardid');
			listid = target.getAttribute('data-listid');
			xhttp.open("GET", "<?=base_url();?>/kanban/card/move/"+listid+"/"+cardid);
			xhttp.send(); 
		});
</script>
<?= $this->endSection() ?>