Web: add Tabulator vue component

web/app/package.json

@@ -3,13 +3,16 @@
   "version": "3.0.0",
   "private": true,
   "author": {
-    "name": "Sybren Stüvel"
+    "name": "Sybren A. Stüvel"
   },
   "dependencies": {
     "bootstrap-vue": "^2.21.2",
     "core-js": "^3.6.5",
+    "sass": "^1.50.0",
+    "sass-loader": "^10",
     "socket.io-client": "2.4.0",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-tabulator": "^1.3.0"
   },
   "licenses": [
     {
@@ -43,10 +46,7 @@
     "parserOptions": {
       "parser": "babel-eslint"
     },
-    "rules": {},
-    "ignorePatterns": [
-      "../manager-api/src/**"
-    ]
+    "rules": {}
   },
   "browserslist": [
     "> 1%",

web/app/src/App.vue

@@ -1,7 +1,10 @@
 <template>
   <div id="app">
-    <chat-navbar></chat-navbar>
+    <flamenco-navbar></flamenco-navbar>
     <br />
+
+    <flamenco-jobs-table :apiClient="apiClient" />
+
     <chat-chatbox
       @sendMessage="sendMessage"
       :chatHistory="messages"
@@ -16,17 +19,20 @@
 </template>
 
 <script>
-import ChatNavbar from "./components/ChatNavbar.vue";
+import FlamencoNavbar from "./components/FlamencoNavbar.vue";
+import FlamencoJobsTable from "./components/FlamencoJobsTable.vue";
 import ChatChatbox from "./components/ChatChatbox.vue";
 import JobsListener from "./components/JobsListener.vue";
 
 export default {
   name: "FlamencoWebApp",
   components: {
-    ChatNavbar,
+    FlamencoNavbar,
+    FlamencoJobsTable,
     ChatChatbox,
     JobsListener,
   },
+  props: ["apiClient"],
   data: () => {
     return {
       websocketURL: "ws://localhost:8080",

web/app/src/components/ChatChatbox.vue

@@ -33,7 +33,7 @@ export default {
 
 <style scoped>
 .container {
-  height: calc(100% - 100px);
+  height: 25ex;
 }
 .chatbox {
   padding: 10px;

web/app/src/components/FlamencoJobsTable.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flamenco-jobs-table">
+    <JobsTabulator v-model="jobs" :options="options" />
+  </div>
+</template>
+
+<script>
+import { TabulatorComponent } from "vue-tabulator";
+
+export default {
+  props: ["apiClient"],
+  components: {
+    JobsTabulator: TabulatorComponent,
+  },
+  data: () => {
+    const options = {
+      columns: [
+        { title: 'Name', field: 'name', sorter: 'string', width: 200, editor: true },
+        { title: 'Age', field: 'age', sorter: 'int', width: 200, editor: true }
+      ]
+    };
+
+    return {
+      jobs: [
+        // To be loaded from an API call instead.
+        { name: 'Teste', age: 13 }
+      ],
+      options: options,
+    };
+  },
+};
+</script>
+
+<style lang='scss'>
+@import "~vue-tabulator/dist/scss/bootstrap/tabulator_bootstrap4";
+
+.flamenco-jobs-table {
+  min-height: 50%;
+  border: thick solid fuchsia;
+}
+</style>

web/app/src/components/FlamencoNavbar.vue

@@ -1,5 +1,5 @@
 <template>
   <b-navbar toggleable type="dark" variant="dark">
-    <b-navbar-brand href="#">Chat Application</b-navbar-brand>
+    <b-navbar-brand href="#">Flamenco</b-navbar-brand>
   </b-navbar>
 </template>

web/app/src/main.js

@@ -15,8 +15,8 @@ import URLs from './urls'
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-vue/dist/bootstrap-vue.css";
 
-// let flamencoManager = require('flamenco-manager');
-// let apiClient = new flamencoManager.ApiClient(URLs.api);
+let flamencoManager = require('flamenco-manager');
+let apiClient = new flamencoManager.ApiClient(URLs.api);
 
 // let query = new flamencoManager.JobsQuery();
 // // query.status_in = ["active"];
@@ -42,5 +42,6 @@ Vue.use(IconsPlugin);
 
 var vueApp = new Vue(App);
 vueApp.websocketURL = URLs.ws;
+vueApp.apiClient = apiClient;
 
 vueApp.$mount("#app");