Improved Feedback list page

lib/Pear/LocalLoop.pm

@@ -36,6 +36,7 @@ sub startup {
   $self->plugin('Pear::LocalLoop::Plugin::BootstrapPagination', { bootstrap4 => 1 } );
   $self->plugin('Pear::LocalLoop::Plugin::Validators');
   $self->plugin('Pear::LocalLoop::Plugin::Datetime');
+  $self->plugin('Pear::LocalLoop::Plugin::TemplateHelpers');
 
   $self->plugin('Authentication' => {
     'load_user' => sub {

lib/Pear/LocalLoop/Controller/Admin/Feedback.pm

@@ -9,8 +9,15 @@ has result_set => sub {
 sub index {
   my $c = shift;
 
-  my $feedback_rs = $c->result_set;
-  $c->stash( feedbacks => [ $feedback_rs->all ] );
+  my $feedback_rs = $c->result_set->search(
+    undef, 
+    {
+      page => $c->param('page') || 1,
+      rows => 12,
+      order_by => { -desc => 'submitted_at' },
+    },
+  );
+  $c->stash( feedback_rs => $feedback_rs );
 }
 
 sub read {

lib/Pear/LocalLoop/Plugin/Datetime.pm

@@ -6,6 +6,17 @@ use DateTime::Format::Strptime;
 sub register {
   my ( $plugin, $app, $conf ) = @_;
 
+  $app->helper( human_datetime_parser => sub {
+    return DateTime::Format::Strptime->new( pattern => '%x %X' );
+  });
+
+  $app->helper( format_human_datetime => sub {
+    my ( $c, $datetime_obj ) = @_;
+    return $c->human_datetime_parser->format_datetime(
+      $datetime_obj,
+    );
+  });
+
   $app->helper( iso_datetime_parser => sub {
     return DateTime::Format::Strptime->new( pattern => '%Y-%m-%dT%H:%M:%S.%3N%z' );
   });

lib/Pear/LocalLoop/Plugin/TemplateHelpers.pm

@@ -0,0 +1,18 @@
+package Pear::LocalLoop::Plugin::TemplateHelpers;
+use Mojo::Base 'Mojolicious::Plugin';
+
+sub register {
+  my ( $plugin, $app, $conf ) = @_;
+
+  $app->helper( truncate_text => sub {
+    my ( $c, $string, $length ) = @_;
+    if ( length $string < $length ) {
+      return $string;
+    } else {
+      return substr( $string, 0, $length - 3 ) . '...';
+    }
+  });
+
+}
+
+1;

templates/admin/feedback/index.html.ep

@@ -11,12 +11,28 @@
     <strong>Success!</strong> <%= $success %>
   </div>
 % }
-<div class="list-group">
-  % for my $feedback (@$feedbacks) {
-  <a href="<%= url_for . '/' . $feedback->id %>" class="list-group-item list-group-item-action">
-    <div>
-      <%= $feedback->user->email %> <%= $feedback->submitted_at %>
+<div class="row">
+  % for my $feedback ( $feedback_rs->all ) {
+  <div class="col col-md-4 mb-3">
+    <div class="card">
+      <div class="card-block">
+        <h6 class="card-title">
+          %= format_human_datetime $feedback->submitted_at;
+        </h6>
+        <h6 class="card-subtitle mb-2 text-muted">
+          %= $feedback->user->email;
+        </h6>
+        <pre class="card-text"><%= truncate_text $feedback->feedbacktext => 50; %></pre>
+        <a href="<%= url_for . '/' . $feedback->id %>" class="card-link">
+          More info
+        </a>
+      </div>
     </div>
-  </a>
+  </div>
   % }
 </div>
+<div class="row">
+  <div class="col">
+      %= bootstrap_pagination( $c->param('page') || 1, $feedback_rs->pager->last_page, { class => 'justify-content-center' } );
+  </div>
+</div>