Controller::Admin::Sidebar: implement vue.js based sidebar editor

diff --git a/src/newslash_web/css/bootstrap.less b/src/newslash_web/css/bootstrap.less
index 9ac16c9..ed7e089 100644 (file)
--- a/src/newslash_web/css/bootstrap.less
+++ b/src/newslash_web/css/bootstrap.less
@@ -18,7 +18,7 @@
 // @import "bootstrap/type.less";
 // @import "bootstrap/code.less";
 // @import "bootstrap/grid.less";
-// @import "bootstrap/tables.less";
+@import "bootstrap/tables.less";
 @import "bootstrap/forms.less";
 // @import "bootstrap/buttons.less";
 

diff --git a/src/newslash_web/css/main.less b/src/newslash_web/css/main.less
index 2968481..0191663 100644 (file)
--- a/src/newslash_web/css/main.less
+++ b/src/newslash_web/css/main.less
@@ -7,4 +7,5 @@
 @import "main/comment_form.less";
 @import "main/story.less";
 @import "main/site-header.less";
-@import "admin/admin-bar.less";
\ No newline at end of file
+@import "admin/admin-bar.less";
+@import "main/app.less";
\ No newline at end of file

diff --git a/src/newslash_web/css/main/app.less b/src/newslash_web/css/main/app.less
new file mode 100644 (file)
index 0000000..58aa05e
--- /dev/null
+++ b/src/newslash_web/css/main/app.less
@@ -0,0 +1,5 @@
+// LESS for app
+
+.app-frame {
+    margin: 6px;
+}

diff --git a/src/newslash_web/lib/Newslash/Web.pm b/src/newslash_web/lib/Newslash/Web.pm
index c6704d4..f010a7c 100644 (file)
--- a/src/newslash_web/lib/Newslash/Web.pm
+++ b/src/newslash_web/lib/Newslash/Web.pm
@@ -80,9 +80,9 @@ sub startup {
     my $admin = $r->under('/admin');
     $admin->get('/css')->to('admin-css#edit');
     $admin->get('/story/edit')->to('admin-story#edit');
-    $admin->get('/sidebar')->to('admin-sidebar#list');
-    $admin->get('/sidebar/edit')->to('admin-sidebar#edit');
+    $admin->get('/sidebar')->to('admin-sidebar#index');
     $admin->post('/sidebar/update')->to('admin-sidebar#update');
+    $admin->get('/sidebar/list')->to('admin-sidebar#list');
 
     # API
     my $api = $r->under('/api/v1');

diff --git a/src/newslash_web/lib/Newslash/Web/Controller/Admin/Sidebar.pm b/src/newslash_web/lib/Newslash/Web/Controller/Admin/Sidebar.pm
index 2bb3169..510ce82 100644 (file)
--- a/src/newslash_web/lib/Newslash/Web/Controller/Admin/Sidebar.pm
+++ b/src/newslash_web/lib/Newslash/Web/Controller/Admin/Sidebar.pm
@@ -1,6 +1,11 @@
 package Newslash::Web::Controller::Admin::Sidebar;
 use Mojo::Base 'Mojolicious::Controller';
 
+sub index {
+    my $c = shift;
+    $c->render;
+}
+
 sub list {
     my $c = shift;
     my $sidebar = $c->app->model('sidebar');
@@ -13,13 +18,14 @@ sub list {
     else {
         my $rs = $sidebar->create_table;
         if (!$rs) {
-            $c->rendered(500);
+            $c->render(json => {message => "table creation failed", error => 1});
             return;
         }
         $message = "table not exists, so create table.";
     }
 
-    $c->render(sidebar_items => $sidebar_items, message => $message);
+    $c->render(json => {message => $message, items => $sidebar_items});
+    return;
 }
 
 sub update {

diff --git a/src/newslash_web/public/js/sidebar_editor.js b/src/newslash_web/public/js/sidebar_editor.js
new file mode 100644 (file)
index 0000000..04b6d05
--- /dev/null
+++ b/src/newslash_web/public/js/sidebar_editor.js
@@ -0,0 +1,30 @@
+/* sidebar_editor.js */
+const editor = {};
+var vm;
+
+editor.run = function run (params) {
+  const data = {
+    message: "",
+    sidebarItems: [],
+  };
+  const computed = {};
+  const methods = {};
+  const getUrl = "/admin/sidebar/list";
+  vm = new Vue({el: params.el,
+                data: data,
+                computed: computed,
+                methods: methods,
+                created: function () {
+                  this.$http.get(getUrl).then(
+                    (resp) => { // success
+                      this.sidebarItems = resp.body.items;
+                      this.message = resp.body.message;
+                    },
+                    (resp) => { // fail
+                      this.sidebarItems = [];
+                      this.message = resp.body.message || "failed to get items";
+                    }
+                  );
+                },
+               });
+};

diff --git a/src/newslash_web/t/admin_sidebar.t b/src/newslash_web/t/admin_sidebar.t
new file mode 100644 (file)
index 0000000..80153ba
--- /dev/null
+++ b/src/newslash_web/t/admin_sidebar.t
@@ -0,0 +1,53 @@
+# -*-Perl-*-
+# basic simple and non-destructive tests
+use Mojo::Base -strict;
+use Mojo::Date;
+use Mojo::Util qw(dumper);
+
+use Test::More;
+use Test::Mojo;
+
+my $t = Test::Mojo->new('Newslash::Web');
+
+$t->get_ok('/admin/sidebar')->status_is(200);
+$t->get_ok('/admin/sidebar/list')->status_is(200);
+
+SKIP: {
+    skip "mode is 'test'", 1 if ($t->app->mode ne 'test');
+
+    subtest 'sidebar post' => sub {
+        my $t_str = localtime;
+        my $test_data = {
+                         name => "test sidebar @ $t_str",
+                         model => 'stories',
+                         query_params => 'foo',
+                         template => 'foobar',
+                        };
+
+        $t->post_ok('/admin/sidebar/update' => {Accept => '*/*'} => json => $test_data)
+          ->status_is(200)
+          ->json_has('/id');
+
+        my $id = $t->tx->res->json->{id};
+        diag(dumper($t->tx->res->json)) if !$id;
+
+        $test_data = {
+                      id => $id, 
+                      name => 'new test sidebar @ t_str',
+                      model => 'stories',
+                      query_params => 'foo',
+                      template => 'foobar',
+                     };
+
+        if ($id) {
+            $t->post_ok('/admin/sidebar/update' => {Accept => '*/*'} => json => $test_data)
+              ->status_is(200)
+              ->json_has('/id');
+
+            $id = $t->tx->res->json->{id};
+            diag(dumper($t->tx->res->json)) if !$id;
+        }
+    };
+}
+
+done_testing();

diff --git a/src/newslash_web/t/basic.t b/src/newslash_web/t/basic.t
index d97d946..355bb36 100644 (file)
--- a/src/newslash_web/t/basic.t
+++ b/src/newslash_web/t/basic.t
@@ -21,42 +21,6 @@ $t->get_ok('/submission/new')->status_is(200)->element_exists('#post-submission'
 
 $t->get_ok('/admin/css')->status_is(200);
 
-$t->get_ok('/admin/sidebar')->status_is(200);
-
-subtest 'sidebar post' => sub {
-    my $t_str = localtime;
-    my $test_data = {
-                     name => "test sidebar @ $t_str",
-                     model => 'stories',
-                     query_params => 'foo',
-                     template => 'foobar',
-                    };
-
-    $t->post_ok('/admin/sidebar/update' => {Accept => '*/*'} => json => $test_data)
-      ->status_is(200)
-      ->json_has('/id');
-
-    my $id = $t->tx->res->json->{id};
-    diag(dumper($t->tx->res->json)) if !$id;
-
-    $test_data = {
-                  id => $id, 
-                  name => 'new test sidebar @ t_str',
-                  model => 'stories',
-                  query_params => 'foo',
-                  template => 'foobar',
-                 };
-
-    if ($id) {
-        $t->post_ok('/admin/sidebar/update' => {Accept => '*/*'} => json => $test_data)
-          ->status_is(200)
-          ->json_has('/id');
-
-        $id = $t->tx->res->json->{id};
-        diag(dumper($t->tx->res->json)) if !$id;
-    }
-};
-
 SKIP: {
     skip "mode is 'test'", 5 if ($t->app->mode eq 'test');
 

diff --git a/src/newslash_web/templates/admin/sidebar/index.html.tt2 b/src/newslash_web/templates/admin/sidebar/index.html.tt2
new file mode 100644 (file)
index 0000000..70f33c2
--- /dev/null
+++ b/src/newslash_web/templates/admin/sidebar/index.html.tt2
@@ -0,0 +1,41 @@
+[% WRAPPER common/layout vue=1 %]
+
+<script type="text/x-template" id="sidebar-item-editor">
+</script>
+
+<div class="app-frame" id="sidebar-manager">
+  <h3>Sidebar items</h3>
+  <div v-text="message">
+  </div>
+  <form class="items">
+    <table class="table table-hover">
+      <thead>
+        <tr>
+          <th></th><th>ID</th><th>name</th><th>model</th><th>query_param</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in sidebarItems">
+          <td><input type="checkbox" value="" /></td>
+          <td v-text="item.id"></td>
+          <td v-text="item.name"></td>
+          <td v-text="item.model"></td>
+          <td v-text="item.query_param"></td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="actions">
+      <button class="btn btn-default" type="button">New</button>
+      <button class="btn btn-default" type="button">Delete</button>
+    </div>
+  </form>
+</div>
+
+<script src="/js/sidebar_editor.js" ></script>
+<script>
+  $(document).ready(function () {
+    editor.run({ el: '#sidebar-manager' });
+  });
+</script>
+
+[% END %]