Create Vue files and use vue-loader plugin of Webpack

.babelrc

@@ -0,0 +1,3 @@
+{
+  presets: ['env', 'es2015']
+}

jstests/tests/user/test_application_list_view.js

@@ -1,14 +1,14 @@
 var Vue = require("vuejs");
-var models = require("user/models");
-var applicationListView = require("user/views/application_list_view");
+var ApplicationListModel = require("user/ApplicationListModel");
+var ApplicationListView = require("user/vue-components/ApplicationListView");
 require("filters");
 
 QUnit.module("user.app_list_view");
 QUnit.test("rendering list", function (assert) {
     var done = assert.async();
 
-    var model = new models.ApplicationListModel();
-    var appListView = new applicationListView.ApplicationListView({
+    var model = new ApplicationListModel();
+    var appListView = new ApplicationListView({
         data: function() { return { model: model }; }
     }).$mount();
 
@@ -39,8 +39,8 @@ QUnit.test("rendering list", function (assert) {
 QUnit.test("rendering nothing in the list", function (assert) {
     var done = assert.async();
 
-    var model = new models.ApplicationListModel();
-    var appListView = new applicationListView.ApplicationListView({
+    var model = new ApplicationListModel();
+    var appListView = new ApplicationListView({
         data: function() { return { model: model }; }
     }).$mount();
 
@@ -67,8 +67,8 @@ QUnit.test("rendering nothing in the list", function (assert) {
 QUnit.test("search form", function (assert) {
     var done = assert.async();
 
-    var model = new models.ApplicationListModel();
-    var appListView = new applicationListView.ApplicationListView({
+    var model = new ApplicationListModel();
+    var appListView = new ApplicationListView({
         data: function() { return { model: model }; }
     }).$mount();
 

jstests/tests/user/test_application_view.js

@@ -1,14 +1,14 @@
 var Vue = require("vuejs");
-var models = require("user/models");
-var applicationView = require("user/views/application_view");
+var ApplicationListModel = require("user/ApplicationListModel");
+var ApplicationView = require("user/vue-components/ApplicationView");
 require("filters");
 
 QUnit.module("user.app_view");
 QUnit.test("rendering form", function (assert) {
     var done = assert.async();
 
-    var model = new models.ApplicationListModel();
-    var appView = new applicationView.ApplicationView({
+    var model = new ApplicationListModel();
+    var appView = new ApplicationView({
         data: function() { return { model: model }; }
     }).$mount();
 
@@ -40,8 +40,8 @@ QUnit.test("rendering form", function (assert) {
 QUnit.test("rendering iframe", function (assert) {
     var done = assert.async();
 
-    var model = new models.ApplicationListModel();
-    var appView = new applicationView.ApplicationView({
+    var model = new ApplicationListModel();
+    var appView = new ApplicationView({
         data: function() { return { model: model }; }
     }).$mount();
 

jstests/tests/user/test_configurables.js

@@ -1,8 +1,9 @@
-var configurables = require("user/configurables");
+var configurables = require("user/configurables/configurables");
+var Resolution = require("user/configurables/Resolution");
 
 QUnit.module("user.configurables");
 QUnit.test("instantiation", function (assert) {
-    var resolutionConf = new configurables.resolution.model();
+    var resolutionConf = new configurables.resolution();
 
     assert.equal(resolutionConf.tag, "resolution");
     assert.deepEqual(resolutionConf.configDict, { resolution: "Window" });
@@ -14,7 +15,7 @@ QUnit.test("instantiation", function (assert) {
 
 QUnit.test("view", function (assert) {
     var propsData = { configDict: { resolution: "Window" } };
-    var component = new configurables.resolution.component({propsData: propsData}).$mount();
+    var component = new Resolution({propsData: propsData}).$mount();
 
     assert.notEqual(component.$el.querySelector("select"), null);
     assert.equal(component.$el.querySelector("select").children.length, 5);

jstests/tests/user/test_models.js

@@ -1,8 +1,8 @@
-var models = require("user/models");
+var ApplicationListModel = require("user/ApplicationListModel");
 
-QUnit.module("user.models");
+QUnit.module("user.ApplicationListModel");
 QUnit.test("instantiation", function (assert) {
-    var model = new models.ApplicationListModel();
+    var model = new ApplicationListModel();
 
     assert.equal(model.appList.length, 0);
     assert.equal(model.selectedIndex, null);

package.json

@@ -22,8 +22,12 @@
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
     "babel-preset-env": "^1.4.0",
+    "babel-preset-es2015": "^6.24.1",
+    "css-loader": "^0.28.1",
     "jshint": "*",
     "node-qunit-phantomjs": "*",
+    "vue-loader": "^12.0.4",
+    "vue-template-compiler": "^2.3.3",
     "webpack": "2.5.1"
   }
 }

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

@@ -0,0 +1,131 @@
+<template>
+  <adminlte-box>
+    <div slot="header">Accounting for user {{ $route.params.id }} </div>
+    <div>
+      <div class="alert alert-danger" v-if="communicationError">
+        <strong>Error:</strong> {{communicationError}}
+      </div>
+      <data-table
+      :headers.once="table.headers"
+      :rows="table.rows"
+      :globalActions="table.globalActions"
+      :rowActions="table.rowActions">
+      </data-table>
+
+      <new-accounting-dialog
+      v-if="newAccountingDialog.show"
+      :show="newAccountingDialog.show"
+      :userId="newAccountingDialog.userId"
+      @created="newAccountingCreated"
+      @closed="newAccountingDialog.show = false">
+      </new-accounting-dialog>
+
+      <confirm-dialog
+      v-if="removeAccountingDialog.show"
+      title="Remove Accounting"
+      :okCallback="removeAccounting"
+      :closeCallback="closeRemoveAccountingDialog">
+        <div>Do you want to remove accounting
+          {{ removeAccountingDialog.accountingToRemove }}?
+        </div>
+      </confirm-dialog>
+    </div>
+  </adminlte-box>
+</template>
+
+<script>
+  let resources = require("admin-resources");
+  let NewAccountingDialog = require("./accounting/NewAccountingDialog");
+
+  module.exports = {
+    components: {
+      'new-accounting-dialog': NewAccountingDialog
+    },
+
+    data: function () {
+      return {
+        table: {
+          headers: [
+            "ID", "Image", "Workspace", "Vol. source", "Vol. target", "Readonly"
+          ],
+          rows: [],
+          globalActions: [{
+            label: "Create New Entry",
+            callback: () => { this.newAccountingDialog.show = true; }
+          }],
+          rowActions: [{
+            label: "Remove",
+            callback: this.removeAction
+          }]
+        },
+
+        newAccountingDialog: {
+          show: false,
+          userId: this.$route.params.id
+        },
+
+        removeAccountingDialog: {
+          show: false,
+          accountingToRemove: null
+        },
+
+        communicationError: null
+      };
+    },
+
+    mounted: function () {
+      this.updateTable();
+    },
+
+    methods: {
+      updateTable: function() {
+        this.communicationError = null;
+        resources.Accounting.items({filter: JSON.stringify({user_id: this.$route.params.id })})
+        .done((identifiers, items) => {
+          this.table.rows = [];
+          identifiers.forEach((id) => {
+            let item = items[id];
+            this.table.rows.push([
+              id,
+              item.image_name,
+              item.allow_home,
+              item.volume_source,
+              item.volume_target,
+              item.volume_mode === "ro"
+            ]);
+          });
+        })
+        .fail(() => {
+          this.communicationError = "The request could not be executed successfully";
+        });
+      },
+
+      newAccountingCreated: function() {
+        this.newAccountingDialog.show = false;
+        this.updateTable();
+      },
+
+      removeAction: function(row) {
+        this.removeAccountingDialog.accountingToRemove = row[0];
+        this.removeAccountingDialog.show = true;
+      },
+
+      closeRemoveAccountingDialog: function() {
+        this.removeAccountingDialog.show = false;
+        this.removeAccountingDialog.accountingToRemove = null;
+      },
+
+      removeAccounting: function () {
+        resources.Accounting.delete(this.removeAccountingDialog.accountingToRemove)
+        .done(() => {
+          this.closeRemoveAccountingDialog();
+          this.updateTable();
+        })
+        .fail(() => {
+          this.closeRemoveAccountingDialog();
+          this.communicationError = "The request could not be executed successfully";
+        });
+      }
+    }
+  };
+</script>