const editor = {};
var vm;
+
+Vue.component('box-editor', {
+ template: '#box-editor',
+ props: {
+ box: Object,
+ message: "",
+ },
+ computed: {
+ nameNg: function () { return !this.box.name.length; },
+ },
+ methods: {
+ save: function save() {
+ // create/update box
+ this.message = "";
+ this.$http.post(vm.urls.update, this.box).then(
+ (response) => { // success
+ if (response.body.error) {
+ this.message = "error: " + response.body.message;
+ return;
+ }
+ if (!response.body.id) {
+ this.message = "error: " + response.body.message;
+ return;
+ }
+ this.message = "saved.";
+ if (this.box.id == 0) {
+ this.box.id = response.body.id;
+ }
+ },
+ (response) => { // fail
+ }
+ );
+ },
+ close: function close() {
+ this.box.editing = false;
+ this.message = "";
+ if (this.box.id == 0) {
+ vm.boxItems.pop();
+ }
+ },
+ },
+});
+
+
editor.run = function run (params) {
const data = {
- message: "",
- sidebarItems: [],
+ message: '',
+ boxItems: [],
+ urls: {
+ update: '/admin/sidebar/update',
+ get: '/admin/sidebar/get',
+ delete: '/admin/sidebar/delete',
+ list: '/admin/sidebar/list',
+ },
};
const computed = {};
- const methods = {};
- const getUrl = "/admin/sidebar/list";
+ const methods = {
+ editItem: function editItem(item) {
+ Vue.set(item, 'editing', true);
+ },
+ deleteItem: function deleteItem() {
+ const target = [];
+ for (var i = 0; i < this.boxItems.length; i++) {
+ if (this.boxItems[i].selected) {
+ target.push({id: this.boxItems[i].id, index: i});
+ }
+ }
+ if (target.length == 0) {
+ return;
+ }
+ const msg = "delete " + target.length + " item(s)?";
+ const result = window.confirm(msg);
+ if (result) {
+ // delete items
+ target.reverse();
+ target.forEach(item => {
+ this.$http.post(vm.urls.delete, {id: item.id}).then(
+ (response) => { // success
+ if (response.body.error) {
+ this.message = "error: " + response.body.message;
+ return;
+ }
+ this.boxItems.splice(item.index, 1);
+ },
+ (response) => { // fail
+ }
+ );
+ });
+ }
+ },
+ newItem: function newItem() {
+ const item = {
+ id: 0,
+ name: 'new item',
+ comment: '',
+ model: '',
+ query_param: '',
+ template: '',
+ selected: false,
+ editing: true,
+ };
+ const it = this.boxItems.push(item);
+ },
+ };
+
+ function initItems (items) {
+ items.forEach(item => {
+ Vue.set(item, 'selected', false);
+ Vue.set(item, 'editing', false);
+ });
+ };
+
vm = new Vue({el: params.el,
data: data,
computed: computed,
methods: methods,
created: function () {
- this.$http.get(getUrl).then(
+ this.$http.get(this.urls.list).then(
(resp) => { // success
- this.sidebarItems = resp.body.items;
- this.message = resp.body.message;
+ this.boxItems = resp.body.items || [];
+ this.message = resp.body.message || '';
+ initItems(this.boxItems);
},
(resp) => { // fail
- this.sidebarItems = [];
+ this.boxItems = [];
this.message = resp.body.message || "failed to get items";
}
);
[% WRAPPER common/layout vue=1 %]
-<script type="text/x-template" id="sidebar-item-editor">
-</script>
-
-<div class="app-frame" id="sidebar-manager">
+<div class="app-frame" id="boxes-manager">
<h3>Sidebar items</h3>
<div v-text="message">
</div>
<table class="table table-hover">
<thead>
<tr>
- <th></th><th>ID</th><th>name</th><th>model</th><th>query_param</th>
+ <th></th><th>ID</th><th>name</th><th>model</th><th>query_param</th><th>action</th>
</tr>
</thead>
<tbody>
- <tr v-for="item in sidebarItems">
- <td><input type="checkbox" value="" /></td>
- <td v-text="item.id"></td>
+ <tr v-for="item in boxItems" v-on:dblclick="editItem(item)">
+ <td><input type="checkbox" v-model="item.selected" /></td>
<td v-text="item.name"></td>
+ <td v-text="item.comment"></td>
<td v-text="item.model"></td>
<td v-text="item.query_param"></td>
+ <td><button class="btn btn-default" type="button" v-on:click="editItem(item)">edit</button></td>
</tr>
</tbody>
</table>
+
+ <box-editor :box="item" v-for="item in boxItems"></box-editor>
+
<div class="actions">
- <button class="btn btn-default" type="button">New</button>
- <button class="btn btn-default" type="button">Delete</button>
+ <button class="btn btn-default" type="button" v-on:click="newItem()">New</button>
+ <button class="btn btn-default" type="button" v-on:click="deleteItem()">Delete</button>
</div>
</form>
</div>
-<script src="/js/sidebar_editor.js" ></script>
+<script type="text/x-template" id="box-editor">
+ <div class="modal vue-modal" v-if="box.editing">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <form>
+ <div class="modal-header">
+ <span>box edit</span>
+ </div>
+ <div class="modal-body">
+ <p class="form-inline">
+ <label for="box-name">name: </label>
+ <input id="box-name" type="text" class="form-control" name="name" v-model="box.name" placeholder="name" />
+ <span class="glyphicon glyphicon-remove" aria-hidden="true" v-show="nameNg"></span>
+ </p>
+ <p class="form-inline">
+ <label for="box-comment">comment: </label>
+ <input id="box-comment" type="text" class="form-control" name="comment" v-model="box.comment" placeholder="comment" />
+ </p>
+ <p class="form-inline">
+ <label for="box-model">model: </label>
+ <input id="box-model" type="text" class="form-control" name="model" v-model="box.model" placeholder="model" />
+ </p>
+ <p class="form-inline">
+ <label for="box-query_param">query_param: </label>
+ <input id="box-query_param" type="text" class="form-control" name="query_param" v-model="box.query_param" placeholder="query_param" />
+ </p>
+ <p class="form-group">
+ <label for="box-template">template: </label>
+ <textarea id="box-template" name="template" class="form-control" v-model="box.template" placeholder="template" ></textarea>
+ </p>
+
+ </div>
+ <div class="modal-footer">
+ <span v-text="message"></span>
+ <button type="submit" class="btn btn-default" v-on:click.prevent="save()" :disabled="nameNg">save</button>
+ <button type="button" class="btn" v-on:click="close()">close</button>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+</script>
+
+<script src="/js/boxes-editor.js" ></script>
<script>
- $(document).ready(function () {
- editor.run({ el: '#sidebar-manager' });
- });
+ editor.run({ el: '#boxes-manager' });
</script>
[% END %]
OSDN Git Service
