Added toolkit of useful components

jstests/helpers.js

@@ -0,0 +1,15 @@
+define([
+  "components/vue/dist/vue"
+], function(Vue) {
+  "use strict";
+
+  var getRenderedText = function(Component, propsData) {
+    var Ctor = Vue.extend(Component);
+    var vm = new Ctor({ propsData: propsData }).$mount();
+    return vm.$el.textContent;
+  };
+
+  return {
+    getRenderedText: getRenderedText
+  };
+});

jstests/tests/vue/components/test_ConfirmDialog.js

@@ -0,0 +1,14 @@
+define([
+  "components/vue/dist/vue",
+  "admin/vue-components/toolkit/ConfirmDialog",
+  "jstests/helpers"
+], function (Vue, ConfirmDialog, helpers) {
+    "use strict";
+
+    QUnit.module("ConfirmDialog");
+    QUnit.test("rendering", function (assert) {
+        assert.equal(helpers.getRenderedText(ConfirmDialog, {
+          title: "This is the title"
+        }), "This is the title  Cancel Ok");
+    });
+});

jstests/tests/vue/components/test_DataTable.js

@@ -0,0 +1,23 @@
+define([
+  "components/vue/dist/vue",
+  "admin/vue-components/toolkit/DataTable",
+  "jstests/helpers"
+], function (Vue, DataTable, helpers) {
+    "use strict";
+
+    QUnit.module("DataTable");
+    QUnit.test("rendering", function (assert) {
+        assert.equal(helpers.getRenderedText(DataTable, {
+          headers: ["foo", "bar"],
+          rows: [[1,2], [3,4]],
+          globalActions: [{
+            label: "New",
+            callback: function() {}
+          }],
+          rowActions: [{
+            label: "Remove",
+            callback: function() {}
+          }]
+        }), "New foobar Actions 12 Remove34 Remove");
+    });
+});

jstests/testsuite.js

@@ -2,6 +2,7 @@
     require.config({
         baseUrl: "../remoteappmanager/static/js/",
         paths: {
+          jstests: '../../../jstests/',
           components: '../components',
           jquery: '../components/jquery/jquery.min',
           bootstrap: '../components/bootstrap/js/bootstrap.min',
@@ -23,6 +24,8 @@
         "tests/home/test_configurables.js",
         "tests/home/test_models.js",
         "tests/home/test_views.js",
+        "tests/vue/components/test_DataTable.js",
+        "tests/vue/components/test_ConfirmDialog.js",
         "tests/test_utils.js",
         "tests/test_analytics.js"
         ], function(init) {

remoteappmanager/static/js/admin/main.js

@@ -4,6 +4,7 @@ require([
   "components/vue/dist/vue",
   "components/vue-router/dist/vue-router",
   "components/vue-form/dist/vue-form",
+  "admin/vue-components/toolkit/toolkit",
   "admin/vue-components/MainView",
   "admin/vue-components/ContainersView",
   "admin/vue-components/UsersView",
@@ -14,11 +15,13 @@ require([
   Vue, 
   VueRouter,
   VueForm,
+  toolkit,
   MainView,
   ContainersView,
   UsersView,
   ApplicationsView,
-  AccountingView) {
+  AccountingView
+  ) {
 
   "use strict";
 
@@ -46,21 +49,6 @@ require([
     ]
   });
 
-  Vue.component("modal-dialog",
-    {
-      template: 
-        '<transition name="modal">' +
-        '  <div class="modal-mask">' +
-        '    <div class="modal-wrapper">' +
-        '      <div class="modal-container">' +
-        '        <slot>' +
-        '        </slot>' +
-        '      </div>' +
-        '    </div>' +
-        '  </div>' +
-        '</transition>'
-    });
-
   var vm;
   vm = new Vue({
     el: "#app",

remoteappmanager/static/js/admin/vue-components/toolkit/AdminLTEBox.js

@@ -0,0 +1,23 @@
+define([
+], function() {
+  "use strict";
+
+  return {
+    props: {
+      title: {
+        type: String,
+        default: "Box"
+      }
+    },
+    template:
+    '  <div class="row">' +
+    '    <div class="col-md-12">' +
+    '      <div class="box">' +
+    '        <div class="box-header with-border"><slot name="header">{{title}}</slot></div>' +
+    '        <div class="box-body"><slot></slot></div>' +
+    '      </div>' +
+    '    </div>' +
+    '  </div>'
+  };
+
+});

remoteappmanager/static/js/admin/vue-components/toolkit/ConfirmDialog.js

@@ -0,0 +1,35 @@
+define([
+], function() {
+  "use strict";
+
+  return {
+    props: {
+      title: {
+        type: String,
+        default: "Confirm"
+      },
+      closeCallback: {
+        type: Function,
+        default: function() {}
+      },
+      okCallback: {
+        type: Function,
+        default: function() {}
+      }
+   },
+    template: '<transition name="modal">' +
+    '  <div class="modal-mask">' +
+    '    <div class="modal-wrapper">' +
+    '      <div class="modal-container">' +
+    '        <div class="modal-header"><slot name="header"><h4>{{ title }}</h4></slot></div>' +
+    '        <div class="modal-body"><slot></slot></div>' +
+    '        <div class="modal-footer text-right">' +
+    '          <button type="button" class="btn btn-default" @click="closeCallback">Cancel</button>' +
+    '          <button class="btn btn-primary primary" @click="okCallback">Ok</button>' +
+    '        </div>' +
+    '      </div>' +
+    '    </div>' +
+    '  </div>' +
+    '</transition>'
+  };
+});

remoteappmanager/static/js/admin/vue-components/toolkit/DataTable.js

@@ -0,0 +1,52 @@
+define([
+], function() {
+  "use strict";
+
+  return {
+    props: [
+      "headers", "rows", "globalActions", "rowActions"
+    ],
+    methods: {
+      isBoolean: function(value) {
+        return typeof(value) === "boolean";
+      },
+      buttonClassFromType: function(value) { 
+        var cls = {"btn": true};
+        if (value === undefined) {
+          value = "danger";
+        }
+        cls["btn-" + value] = true;
+        return cls;
+      }
+    },
+    template:
+    '<div>' +
+    '  <div class="pull-right">' +
+    '    <button v-for="action in globalActions" class="btn btn-primary" @click="action.callback">{{action.label}}</button>' +
+    '  </div>' +
+    '  <table id="datatable" class="display dataTable">' +
+    '    <thead>' +
+    '    <tr>' +
+    '        <th v-for="header in headers">{{header}}</th>' +
+    '        <th v-if="rowActions.length > 0">Actions</th>' +
+    '    </tr>' +
+    '    </thead>' +
+    '    <tbody>' +
+    '      <tr v-for="(row, row_index) in rows">' +
+    '        <template v-for="(value, col_index) in row">' +
+    '          <td v-if="isBoolean(value)"><i class="fa fa-check" v-if="value"></i></td>' +
+    '          <td v-else>{{value}}</td>' +
+    '        </template>' +
+    '        <td>' +
+    '          <button v-for="action in rowActions" ' +
+    '                   :class="buttonClassFromType(action.type)"' +
+    '                   style="margin-right: 10px"' +
+    '                   @click="action.callback(row)">{{action.label}}</button>' +
+    '        </td>' +
+    '      </tr>' +
+    '    </tbody>' +
+    '  </table>' +
+    '</div>'
+  };
+
+});

remoteappmanager/static/js/admin/vue-components/toolkit/ModalDialog.js

@@ -0,0 +1,17 @@
+define([
+], function() {
+  "use strict";
+
+  return {
+    template: '<transition name="modal">' +
+    '  <div class="modal-mask">' +
+    '    <div class="modal-wrapper">' +
+    '      <div class="modal-container">' +
+    '        <slot>' +
+    '        </slot>' +
+    '      </div>' +
+    '    </div>' +
+    '  </div>' +
+    '</transition>'
+  };
+});

remoteappmanager/static/js/admin/vue-components/toolkit/toolkit.js

@@ -0,0 +1,28 @@
+define([
+  "components/vue/dist/vue",
+  "admin/vue-components/toolkit/AdminLTEBox",
+  "admin/vue-components/toolkit/ConfirmDialog",
+  "admin/vue-components/toolkit/ModalDialog",
+  "admin/vue-components/toolkit/DataTable"
+], function(
+  Vue,
+  AdminLTEBox,
+  ConfirmDialog,
+  ModalDialog,
+  DataTable
+) {
+  "use strict";
+
+  Vue.component("confirm-dialog", ConfirmDialog);
+  Vue.component("modal-dialog", ModalDialog);
+  Vue.component("adminlte-box", AdminLTEBox);
+  Vue.component("data-table", DataTable);
+
+  return {
+    ConfirmDialog: ConfirmDialog,
+    AdminLTEBox: AdminLTEBox,
+    ModalDialog: ModalDialog,
+    DataTable: DataTable
+  };
+
+});