fix sidebar config page's design and behavior

diff --git a/src/newslash_web/public/js/user-sidebar.js b/src/newslash_web/public/js/user-sidebar.js
index 5632a08..ad5a7f2 100644 (file)
--- a/src/newslash_web/public/js/user-sidebar.js
+++ b/src/newslash_web/public/js/user-sidebar.js
@@ -16,31 +16,65 @@ userSidebar.run = function run (params) {
     },
     boxes: [],
     userBoxes: [],
-    selectedBox: "",
-    selectedUserBox: "",
+    selectedBoxes: [],
+    selectedUserBoxes: [],
   };
 
   if (params.user_id) {
     data.urls.user = data.urls.user + "&user_id=" + params.user_id;
   }
 
-  var computed = {};
+  var computed = {
+    isBoxMovable: function () {
+      return (this.selectedUserBoxes.length == 1);
+    },
+    isBoxDeletable: function () {
+      return (this.selectedUserBoxes.length > 0);
+    },
+    isBoxAddable: function () {
+      return (this.selectedBoxes.length > 0);
+    },
+  };
+
   var methods = {
     addBox: function () {
       for (var i = 0; i < this.boxes.length; i++) {
-        if (this.boxes[i].id == this.selectedBox) {
+        if (this.selectedBoxes.find(e => { return e == this.boxes[i].id; })) {
           this.userBoxes.push(this.boxes[i]);
           this.boxes[i].used = 1;
-          break;
         }
       }
     },
     deleteBox: function () {
       for (var i = 0; i < this.userBoxes.length; i++) {
-        if (this.userBoxes[i].id == this.selectedUserBox) {
+        if (this.selectedUserBoxes.find(e => { return e == this.userBoxes[i].id; })) {
           this.userBoxes[i].used = 0;
           this.userBoxes.splice(i, 1);
-          break;
+        }
+      }
+    },
+    moveBoxUp: function () {
+      var targetID = this.selectedUserBoxes[0];
+      for (var i = 0; i < this.userBoxes.length; i++) {
+        if (this.userBoxes[i].id == targetID) {
+          if (i == 0) {
+            return;
+          }
+          var target = this.userBoxes[i];
+          this.userBoxes.splice(i, 1);
+          this.userBoxes.splice(i-1, 0, target);
+          return;
+        }
+      }
+    },
+    moveBoxDown: function () {
+      var targetID = this.selectedUserBoxes[0];
+      for (var i = 0; i < this.userBoxes.length - 1; i++) {
+        if (this.userBoxes[i].id == targetID) {
+          var target = this.userBoxes[i];
+          this.userBoxes.splice(i, 1);
+          this.userBoxes.splice(i+1, 0, target);
+          return;
         }
       }
     },
@@ -65,43 +99,52 @@ userSidebar.run = function run (params) {
     },
   };
 
+  function getBoxes(vue) {
+    // get sidebar boxes
+    vue.$http.get(vue.urls.get).then(
+      (resp) => { // success
+        vue.boxes = resp.body.items || [];
+        vue.message = resp.body.message || '';
+        vue.boxes.forEach(box => {
+          Vue.set(box, "used", 0);
+        });
+        getUserBoxes(vue);
+      },
+      (resp) => { // fail
+        vue.boxes = [];
+        vue.message = resp.body.message || "failed to get items";
+      }
+    );
+  }
+
+  function getUserBoxes(vue) {
+    // get user sidebar settings
+    vue.$http.get(vue.urls.user).then(
+      (resp) => { // success
+        resp.body.items.forEach(id => {
+          for (var i = 0; i < vue.boxes.length; i++) {
+            if (vue.boxes[i].id == id) {
+              vue.userBoxes.push(vue.boxes[i]);
+              vue.boxes[i].used = 1;
+            }
+          }
+        });
+        vue.message = resp.body.message || '';
+      },
+      (resp) => { // fail
+        vue.message = resp.body.message || "failed to get user settings";
+      }
+    );
+  }
+
+  var created = function created() {
+    getBoxes(this);
+  };
+
   vm = new Vue({el: params.el,
                 data: data,
                 computed: computed,
                 methods: methods,
-                created: function () {
-                  // get sidebar boxes
-                  this.$http.get(this.urls.get).then(
-                    (resp) => { // success
-                      this.boxes = resp.body.items || [];
-                      this.message = resp.body.message || '';
-                      this.boxes.forEach(box => {
-                        Vue.set(box, "used", 0);
-                      });
-                    },
-                    (resp) => { // fail
-                      this.boxes = [];
-                      this.message = resp.body.message || "failed to get items";
-                    }
-                  );
-                  // get user sidebar settings
-                  this.$http.get(this.urls.user).then(
-                    (resp) => { // success
-                      resp.body.items.forEach(id => {
-                        for (var i = 0; i < this.boxes.length; i++) {
-                          if (this.boxes[i].id == id) {
-                            this.userBoxes.push(this.boxes[i]);
-                            this.boxes[i].used = 1;
-                            break;
-                          }
-                        }
-                      });
-                      this.message = resp.body.message || '';
-                    },
-                    (resp) => { // fail
-                      this.message = resp.body.message || "failed to get user settings";
-                    }
-                  );
-                },
+                created: created,
                });
 };

diff --git a/src/newslash_web/templates/common/components/sidebar_editor.html.tt2 b/src/newslash_web/templates/common/components/sidebar_editor.html.tt2
new file mode 100644 (file)
index 0000000..d087ea5
--- /dev/null
+++ b/src/newslash_web/templates/common/components/sidebar_editor.html.tt2
@@ -0,0 +1,33 @@
+<div class="panel panel-default" id="user-sidebar">
+  <div class="panel-heading">サイドバー設定</div>
+  <div class="panel-body">
+    <form id="profile" class="form-horizontal">
+
+      <div class="form-group">
+        <div class="col-sm-6">
+          <label for="sidebar-boxes">利用できるサイドバー：</label>
+          <select multiple size="20" id="sidebar-boxes" class="form-control" name="boxes" v-model="selectedBoxes" >
+            <option v-for="box in boxes" v-if="box.used != 1" v-text="box.title" :value="box.id"></option>
+          </select>
+          <button type="button" class="btn btn-default" v-on:click="addBox" :disabled="!isBoxAddable">追加</button>
+        </div>
+        
+        <div class="col-sm-6">
+          <label for="user-boxes">選択済みサイドバー：</label>
+          <select multiple size="20" id="user-boxes" class="form-control" name="user-boxes" v-model="selectedUserBoxes" >
+            <option v-for="box in userBoxes" v-text="box.title" :value="box.id"></option>
+          </select>
+          <button type="button" class="btn btn-default" v-on:click="moveBoxUp" :disabled="!isBoxMovable">上へ</button>
+          <button type="button" class="btn btn-default" v-on:click="moveBoxDown" :disabled="!isBoxMovable">下へ</button>
+          <button type="button" class="btn btn-default" v-on:click="deleteBox" :disabled="!isBoxDeletable">削除</button>
+        </div>
+
+      </div>
+
+      <div class="form-inline">
+        <button type="button" class="btn btn-default" v-on:click="saveConfig()">保存</button>
+        <span v-text="message"></span>
+      </div>
+    </form>
+  </div>
+</div><!-- class="panel panel-default" -->

diff --git a/src/newslash_web/templates/user/sidebar.html.tt2 b/src/newslash_web/templates/user/sidebar.html.tt2
index 566cd18..e46dd0b 100644 (file)
--- a/src/newslash_web/templates/user/sidebar.html.tt2
+++ b/src/newslash_web/templates/user/sidebar.html.tt2
@@ -1,36 +1,10 @@
 [% WRAPPER common/layout enable_sidebar=1 enable_vuejs=1 %]
 
 <div class="main-column">
-  <div class="main-contents" id="user-sidebar">
-    <h3>サイドバー設定</h3>
+  <div class="main-contents">
 
-    <div class="panel panel-default">
-      <div class="panel-heading">サイドバー設定</div>
-      <div class="panel-body">
-        <form id="profile">
-
-          <div class="form-inline">
-            <select size="10" id="sidebar-boxes" class="form-control" name="boxes" v-model="selectedBox" >
-              <option v-for="box in boxes" v-if="box.used != 1" v-text="box.comment" :value="box.id"></option>
-            </select>
-
-            <button type="button" class="btn btn-default" v-on:click="addBox">追加</button>
-
-            <select size="10" id="user-boxes" class="form-control" name="user-boxes" v-model="selectedUserBox" >
-              <option v-for="box in userBoxes" v-text="box.comment" :value="box.id"></option>
-            </select>
-
-            <button type="button" class="btn btn-default" v-on:click="deleteBox">削除</button>
-
-          </div>
-
-          <div class="form-inline">
-            <button type="button" class="btn btn-default" v-on:click="saveConfig()">保存</button>
-            <span v-text="message"></span>
-          </div>
-        </form>
-      </div>
-    </div><!-- class="panel panel-default" -->
+    [%- INCLUDE common/components/sidebar_editor -%]
+    
   </div><!-- main-contents -->
 </div><!-- main-column -->