populate posts table

4 files changed, 170 insertions, 21 deletions

diff --git a/data/assets/css/admin.css b/data/assets/css/admin.css
new file mode 100644
index 0000000..df2dda9
--- /dev/null
+++ b/data/assets/css/admin.css
@@ -0,0 +1,3 @@
+#posts tbody tr {
+  cursor: pointer;
+}
diff --git a/data/assets/js/admin/tabs/posts.js b/data/assets/js/admin/tabs/posts.js
index 5b27cf6..6bd4c4c 100644
--- a/data/assets/js/admin/tabs/posts.js
+++ b/data/assets/js/admin/tabs/posts.js
@@ -3,28 +3,104 @@ jQuery(function($) {
 
   var TEMPLATES = new LuigiTemplate.Cache({
     post: [
-      "<a ",
-        "href='#' ",
-        "class='list-group-item' ",
+      "<tr ",
         "data-post_id='%{post_id|h}' ",
         "data-post_type='%{post_type|h}' ",
-        "title='Edit %{post_type} %{post_id|h}.' ",
+        "class='%{css|h}' ",
+        "title='View item #%{post_id|h}.' ",
       ">",
-        "%{name|h}",
-        " ",
-        "(slug = %{slug|h}, state = %{state|h}, type = %{post_type|h})",
+        "<td>",
+          "<i ",
+            "class='fa fa-fw %{icon|h}' ",
+            "title='%{post_type|h}' ",
+          "></i>",
+        "</td>",
+
+        "<td>",
+          "%{name|h}",
+          " ",
+          "%{label}",
+        "</td>",
+
+        "<td>",
+          "<a href='#' ",
+            "class='edit-user' ",
+            "title='Edit user %{user_name|h}.' ",
+            "data-user_id='%{user_id|h}' ",
+          ">",
+            "%{user_name|h}",
+          "</a>",
+        "</td>",
+
+        "<td>",
+          // TODO: make editable
+          "%{site_name|h}",
+        "</td>",
+
+        "<td>",
+          "%{post_url}",
+        "</td>",
+
+        "<td title='%{created_at_text_full|h}'>",
+          "%{created_at_text|h}",
+        "</td>",
+
+        "<td title='%{posted_at_text_full|h}'>",
+          "%{posted_at_text|h}",
+        "</td>",
+      "</tr>",
+    ],
+
+    post_url: [
+      "<a ",
+        "href='%{post_url|h}' ",
+        "class='link' ",
+        "title='View link \"%{post_url|h}\".' ",
+        "target='_blank' ",
+      ">",
+        "%{post_url|h}",
       "</a>",
     ],
 
+    post_slug: [
+      "%{slug|h}",
+    ],
+
     error: [
-      "<span class='list-group-item list-group-item-danger disabled'>",
-        "<i class='fa fa-exclamation-triangle'></i>",
-        " ",
-        "Error: %{error|h}",
-      "</span>",
+      "<tr class='bg-danger disabled'>",
+        "<td>",
+          "<i class='fa fa-exclamation-triangle'></i>",
+          " ",
+          "Error: %{error|h}",
+      "</td>",
+    "</tr>",
     ],
   });
 
+  var POST_TYPE_ICONS = {
+    blog:     'fa-sticky-note-o',
+    page:     'fa-bookmark-o',
+    project:  'fa-cube',
+  };
+
+  var POST_STATES = {
+    draft: {
+      css: 'bg-warning',
+      label: [
+        " ",
+        "<i class='fa fa-wrench' title='draft'></i>",
+      ].join(''),
+    },
+
+    deleted: {
+      css: 'bg-danger',
+      label: [
+        " ",
+        "<i class='fa fa-trash' title='deleted'></i>",
+      ].join(''),
+    },
+  };
+
   function reload() {
     $('#posts-reload').addClass('disabled')
       .find('.loading').toggleClass('hidden');
@@ -46,14 +122,32 @@ jQuery(function($) {
           error = data.error;
       } catch (e) {}
 
-      $('#posts').html(TEMPLATES.run('error', {
+      $('#posts tbody').html(TEMPLATES.run('error', {
         error: error,
       }));
     }).done(function(r) {
-      console.log(r);
-
-      $('#posts').html($.map(r.rows, function(row) {
-        return TEMPLATES.run('post', row);
+      $('#posts tbody').html($.map(r.rows, function(row) {
+        var css = '',
+            label = '';
+
+        if (POST_STATES[row.state]) {
+          css = POST_STATES[row.state].css;
+          label = POST_STATES[row.state].label;
+        }
+
+        var post_url = 'n/a';
+        if (row.post_url) {
+          post_url = TEMPLATES.run('post_url', row);
+        } else {
+          post_url = TEMPLATES.run('post_slug', row);
+        }
+
+        return TEMPLATES.run('post', $.extend(row, {
+          css:      css,
+          label:    label,
+          icon:     POST_TYPE_ICONS[row.post_type],
+          post_url: post_url,
+        }));
       }).join(''));
     });
   }
@@ -103,12 +197,25 @@ jQuery(function($) {
   $('.posts-filter-menu').on('guff.choose', function() {
     // reload posts
     reload();
+  });
+
+  $('#posts').on('click', 'a.edit-user', function() {
+    var data = $(this).data();
+
+    $('#user-edit-dialog').data(data).modal('show');
+
+    // stop event
+    return false;
+  });
+
+  $('#posts').on('click', 'a.link', function() {
+    location.href = $(this).attr('href');
 
     // stop event
     return false;
   });
 
-  $('#posts').on('click', 'a', function() {
+  $('#posts').on('click', 'tbody tr[data-post_id]', function() {
     var data = $(this).data();
 
     $('#' + data.post_type + '-edit-dialog')
diff --git a/src/guff.cr b/src/guff.cr
index d3817d0..dc04fbe 100644
--- a/src/guff.cr
+++ b/src/guff.cr
@@ -276,6 +276,8 @@ module Guff
               ON (b.state_id = a.state_id)
             JOIN sites c
               ON (c.site_id = a.site_id)
+            JOIN users d
+              ON (d.user_id = a.created_by)
             LEFT JOIN blogs x
               ON (x.post_id = a.post_id)
             LEFT JOIN pages y
@@ -291,8 +293,22 @@ module Guff
                  a.site_id,
                  c.name AS site_name,
                  b.state,
+                 d.user_id,
+                 d.name AS user_name,
+                 d.email AS user_email,
+
+                 a.created_at,
+                 date(a.created_at) AS created_at_text,
+                 datetime(a.created_at) AS created_at_text_full,
+
                  a.posted_at,
+                 date(a.posted_at) AS posted_at_text,
+                 datetime(a.posted_at) AS posted_at_text_full,
+
                  a.expires_at,
+                 date(a.expires_at) AS expires_at_text,
+                 datetime(a.expires_at) AS expires_at_text_full,
+
                  a.slug,
                  a.slug_lock,
                  a.name,
@@ -310,7 +326,7 @@ module Guff
                      strftime('/%%Y/%%m/%%d/', a.posted_at) || a.slug || '.html'
                    WHEN y.post_id IS NOT NULL THEN
                      '/' || a.slug || '.html'
-                   WHEN x.post_id IS NOT NULL THEN
+                   WHEN z.post_id IS NOT NULL THEN
                      '/' || a.slug || '/'
                    END
                  ELSE
@@ -322,6 +338,8 @@ module Guff
               ON (b.state_id = a.state_id)
             JOIN sites c
               ON (c.site_id = a.site_id)
+            JOIN users d
+              ON (d.user_id = a.created_by)
 
             LEFT JOIN blogs x
               ON (x.post_id = a.post_id)
diff --git a/src/views/admin-page.ecr b/src/views/admin-page.ecr
index ad8d429..f2b44f0 100644
--- a/src/views/admin-page.ecr
+++ b/src/views/admin-page.ecr
@@ -9,6 +9,7 @@
         assets/font-awesome-4.5.0/css/font-awesome.min.css
         assets/bootstrap-3.3.6/css/bootstrap.min.css
         assets/bootstrap-3.3.6/css/bootstrap-theme.min.css
+        assets/css/admin.css
       }
     %>
   </head>
@@ -84,6 +85,9 @@
                     new_post_button
                   %></div><!-- btn-group -->
 
+                  <div class='btn-group btn-group-sm'>
+                  </div><!-- btn-group -->
+
                   <div class='btn-group btn-group-sm'><%=
                     dropdown(
                       id:       "posts-filter-type",
@@ -194,8 +198,25 @@
                 </div><!-- input-group -->
               </div><!-- panel-heading -->
 
-              <div id='posts' class='list-group'>
-              </div><!-- panel-body -->
+              <table
+                id='posts'
+                class='table table-hover'
+              >
+                <thead>
+                  <tr class='small'>
+                    <th>&nbsp;</th>
+                    <th>Name</th>
+                    <th>Author</th>
+                    <th>Site</th>
+                    <th>URL / Slug</th>
+                    <th>Created</th>
+                    <th>Posted</th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                </tbody>
+              </table><!-- table -->
             </div><!-- panel -->
           </div><!-- tab-pane -->