diff options
-rw-r--r-- | data/assets/css/admin.css | 3 | ||||
-rw-r--r-- | data/assets/js/admin/tabs/posts.js | 143 | ||||
-rw-r--r-- | src/guff.cr | 20 | ||||
-rw-r--r-- | src/views/admin-page.ecr | 25 |
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> </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 --> |