Skip to content

Instantly share code, notes, and snippets.

@gwhitcher
Last active January 4, 2017 20:21
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save gwhitcher/f234185ba2cafd982047195fcd3e180a to your computer and use it in GitHub Desktop.
CakePHP 3 Click and Drag Reorder and MoveUp/MoveDown
<?php
class GalleryController extends AppController {
public function index() {
$this->set('title_for_layout', 'Gallery');
$this->loadModel('Gallery');
$this->paginate = [
'limit' => 10,
'order' => [
'Gallery.position' => 'desc'
]
];
$gallery = $this->paginate($this->Gallery);
$this->set(compact('gallery'));
}
public function reorder() {
$this->loadModel('Gallery');
foreach ($_POST['item'] as $key => $value) {
$gallery = $this->Gallery->find('all')->where(['id' => $value])->first();
$gallery->position = $key + 1;
$this->Gallery->save($gallery);
}
exit();
}
public function moveUp($id) {
$this->loadModel('Gallery');
$gallery = $this->Gallery->find('all')->where(['id' => $id])->first();
$gallery->position = $gallery->position + 1;
$this->Gallery->save($gallery);
$this->redirect(['action' => 'index']);
}
public function moveDown($id) {
$this->loadModel('Gallery');
$gallery = $this->Gallery->find('all')->where(['id' => $id])->first();
$gallery->position = $gallery->position - 1;
$this->Gallery->save($gallery);
$this->redirect(['action' => 'index']);
}
}
<div class="row">
<div class="col-md-10">
<h1 class="page-header">Gallery</h1>
</div>
<div class="col-md-2 cog-list">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></a>
<ul class="dropdown-menu">
<li><a href="<?php echo BASE_URL; ?>/admin/gallery/add">Add Gallery Item</a></li>
</ul>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover" id="gallery">
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>View</th>
<th>Edit</th>
<th>Delete</th>
<th>Move</th>
</tr>
</thead>
<tbody>
<?php
$count = 1;
foreach($gallery as $gallery_item) {
echo '<tr id="item_'.$gallery_item['id'].'">';
echo '<td>'.$gallery_item['id'].'</td>';
echo '<td>'.$gallery_item['title'].'</td>';
echo '<td><button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal'.$count.'">Preview</button></td>';
echo '<td><a class="btn btn-warning" href="'.BASE_URL.'/admin/gallery/edit/'.$gallery_item['id'].'">Edit</a></td>';
echo '<td><a class="delete btn btn-danger" href="'.BASE_URL.'/admin/gallery/delete/'.$gallery_item['id'].'">Delete</a></td>';
echo '<td><a class="btn btn-primary" href="'.BASE_URL.'/admin/gallery/moveUp/'.$gallery_item['id'].'"><span class="glyphicon glyphicon-arrow-up"></span></a></td>';
echo '<td><a class="btn btn-primary" href="'.BASE_URL.'/admin/gallery/moveDown/'.$gallery_item['id'].'"><span class="glyphicon glyphicon-arrow-down"></span></a></td>';
echo '</tr>';
echo '<!-- Modal -->
<div id="myModal'.$count.'" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">'.$gallery_item['title'].'</h4>
</div>
<div class="modal-body">
<img class="img-responsive center-block" src="'.BASE_URL.'/img/gallery/lg/'.$gallery_item['image'].'"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>';
$count++;
}
?>
</tbody>
</table>
</div>
<ul class="pagination">
<?php
echo $this->Paginator->prev(__('prev'), array('tag' => 'li'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
echo $this->Paginator->numbers(array('separator' => '','currentTag' => 'a', 'currentClass' => 'active','tag' => 'li','first' => 1));
echo $this->Paginator->next(__('next'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
?>
</ul>
<script type="text/javascript">
$('#gallery tbody').sortable({
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
var success = alert("Order Saved");
// POST to server using $.post or $.ajax
$.ajax({
data: data,
type: 'POST',
success: success,
url: '<?php echo BASE_URL;?>/admin/gallery/reorder'
});
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment