Pagination mostly works

This commit is contained in:
Denis Fedoseev 2017-08-04 09:57:17 +03:00
parent 5012d8f123
commit 1205e3539d
4 changed files with 64 additions and 19 deletions

View file

@ -9,6 +9,7 @@ use File::Basename 'basename';
use File::Path 'mkpath';
use File::Spec 'catfile';
use Cwd;
use POSIX;
use Imager;
use DBI;
@ -141,10 +142,21 @@ get '/' => sub {
get '/get_images' => ( authenticated => 1 ) => sub {
my $self = shift;
#Getting current user
my $current_user = $self->current_user;
my $user_id = $current_user->{'user_id'};
my $files_list = $db->get_files( $current_user->{'user_id'}, 20 );
#Getting images list with paging
my $page = $self->param('page') || 1;
my $items = $self->param('per-page') || 20;
if (($page !~ /^\d+$/) || ($page <= 1)) { $page = 1}
if (($items !~ /^\d+$/) || ($items <= 0)) { $items = 20}
# process images list
my $req_result = $db->get_files( $current_user->{'user_id'}, $items , $page);
my $files_list = $req_result->{'images_list'};
my $pages_count = ceil($req_result->{'total_rows'}/$items);
my $thumbs_dir =
File::Spec->catfile( $IMAGE_DIR, $current_user->{'user_id'},
@ -157,6 +169,7 @@ get '/get_images' => ( authenticated => 1 ) => sub {
for my $img_item (@$files_list) {
my $file = $img_item->{'file_name'};
my $img_hash = {};
$img_hash->{'id'} = $img_item->{'file_id'};
$img_hash->{'filename'} = $img_item->{'original_filename'};
$img_hash->{'original_url'} =
File::Spec->catfile( '/', $IMAGE_BASE, $current_user->{'user_id'},
@ -185,10 +198,14 @@ get '/get_images' => ( authenticated => 1 ) => sub {
$img_hash->{'scales'} = \@scaled;
push( @$images, $img_hash );
}
my $reply_data = { current_page => $page, items_per_page => $items, pages_count => $pages_count, images_list => $images };
# Render
return $self->render( json => $images );
return $self->render( json => $reply_data );
};
# Upload image file
@ -201,7 +218,7 @@ post '/upload' => ( authenticated => 1 ) => sub {
my $user = $self->current_user();
my $user_id = $user->{'user_id'};
$self->app->log->debug( "user:" . Dumper($user) );
# $self->app->log->debug( "user:" . Dumper($user) );
# Not upload
unless ($image) {

View file

@ -1,5 +1,6 @@
package FotoStore::DB;
use v5.20;
use strict;
use warnings;
@ -59,8 +60,17 @@ sub add_file($self, $user_id, $filename, $original_filename) {
return $rows;
}
sub get_files($self, $user_id, $count=20, $start_at=0) {
return $self->{'dbh'}->selectall_arrayref(q~select * from images where owner_id=? order by created_time desc~, { Slice => {} }, $user_id );
sub get_files($self, $user_id, $items_count=20, $page=1) {
# Calculate offset
# Pages in UI starts from 1, but here we need it to start from 0
$page = 1 if ($page < 1);
my $start_at = --$page * $items_count;
my ($rows_count) = $self->{'dbh'}->selectrow_array(q~select count(*) from images where owner_id=? ~, undef , $user_id);
my $images_list = $self->{'dbh'}->selectall_arrayref(q~select * from images where owner_id=? order by created_time desc LIMIT ? OFFSET ? ~, { Slice => {} }, $user_id, $items_count, $start_at );
return { total_rows => $rows_count, images_list => $images_list };
}
1;

View file

@ -39,7 +39,7 @@
<div class="foto-block row" v-for="image in imagesList">
<div class="image col-md-3">
<img v-bind:src="image.thumbnail_url">
<div class="image_title">{{ image.filename }}</div>
<div class="image_title">{{ image.id }} - {{ image.filename }}</div>
</div>
<div class="foto-notes col-md-3">
<ul>
@ -50,7 +50,20 @@
</ul>
</div>
</div>
<div class="container paginator">
<div class="btn-group">
<button type="button" class="btn btn-default">Prev</button>
<button type="button" class="btn btn-default" v-for="pageNumber in pagesCount" v-on:click="fetchData(pageNumber)">{{ pageNumber }}</button>
<button type="button" class="btn btn-default">Next</button>
</div>
<div class="container">
<div class="items-per-page-form">Fotos per page: <input v-model="imagesPerPage">
<button type="button" class="btn btn-default" v-on:click="fetchData()">Update</button>
</div>
</div>
</div>
</div>
</div>
<script>
@ -60,27 +73,31 @@
var demo = new Vue({
el: '#images_list',
data: {
imagesList: null
imagesList: null,
pageNumber: 1,
pagesCount: 5,
imagesPerPage: 20,
},
created: function () {
this.fetchData()
this.fetchData(1)
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', apiURL)
xhr.onload = function () {
self.imagesList = JSON.parse(xhr.responseText)
}
xhr.send()
fetchData: function (pageNumber) {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', apiURL+"?page="+pageNumber+"&per-page="+self.imagesPerPage)
xhr.onload = function () {
var result = JSON.parse(xhr.responseText);
self.imagesList = result.images_list;
self.pagesCount = result.pages_count;
}
xhr.send()
},
copyText(event) {
//TODO: rewrite it to vue/JS from jquery
//TODO: rewrite it to vue or pure JS from jQuery
var $temp = $("<input>");
$("body").append($temp);
$temp.val("<img src="+$(event.target).text()+">").select();
@ -89,5 +106,5 @@
},
}
})
});
</script>

View file

@ -15,6 +15,7 @@
<link rel="stylesheet" href="/css/main.css">
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vuejs-paginator/2.0.1/vuejs-paginator.min.js"></script>
<style>
.bar {