populate posts table

2 files changed, 128 insertions, 18 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')