Last active
January 4, 2017 20:21
Star
You must be signed in to star a gist
CakePHP 3 Click and Drag Reorder and MoveUp/MoveDown
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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']); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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">×</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