Add proper server models

Author: DaneEveritt

app/Transformers/Api/Client/ServerTransformer.php

@@ -28,6 +28,7 @@ public function transform(Server $server): array
             'identifier' => $server->uuidShort,
             'uuid' => $server->uuid,
             'name' => $server->name,
+            'node' => $server->node->name,
             'description' => $server->description,
             'allocation' => [
                 'ip' => $server->allocation->alias,

composer.json

@@ -26,6 +26,7 @@
         "laracasts/utilities": "^3.0",
         "laravel/framework": "5.6.*",
         "laravel/tinker": "^1.0",
+        "lcobucci/jwt": "^3.2",
         "lord/laroute": "^2.4",
         "matriphe/iso-639": "^1.2",
         "nesbot/carbon": "^1.22",

composer.lock

@@ -24,16 +24,19 @@
         "gulp-rev": "^8.1.1",
         "gulp-uglify-es": "^1.0.1",
         "jquery": "^3.3.1",
+        "jwt-decode": "^2.2.0",
         "lodash": "^4.17.5",
         "postcss": "^6.0.21",
         "postcss-import": "^11.1.0",
         "postcss-preset-env": "^3.4.0",
         "postcss-scss": "^1.0.4",
         "tailwindcss": "^0.5.1",
+        "vee-validate": "^2.0.9",
         "vue": "^2.5.7",
         "vue-axios": "^2.1.1",
         "vue-devtools": "^3.1.9",
         "vue-loader": "^14.2.2",
+        "vue-mc": "^0.2.4",
         "vue-router": "^3.0.1",
         "vue-template-compiler": "^2.5.16",
         "vueify-insert-css": "^1.0.0",

package.json

@@ -8,7 +8,7 @@
             />
         </div>
         <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start">
-            <div class="server-box" :key="index" v-for="(server, index) in servers">
+            <div class="server-box" :key="index" v-for="(server, index) in servers.models">
                 <router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
                     <div class="float-right">
                         <div class="indicator"></div>
@@ -38,7 +38,7 @@
                     </div>
                     <div class="flex items-center">
                         <div class="text-sm">
-                            <p class="text-grey">{{ server.node_name }}</p>
+                            <p class="text-grey">{{ server.node }}</p>
                             <p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
                         </div>
                     </div>
@@ -49,15 +49,15 @@
 </template>
 
 <script>
-    import Server from '../../models/server';
+    import { ServerCollection } from '../../models/server';
     import _ from 'lodash';
 
     export default {
         name: 'dashboard',
         data: function () {
             return {
                 search: '',
-                servers: [],
+                servers: new ServerCollection,
             }
         },
 
@@ -72,18 +72,16 @@
              * @param {string} query
              */
             loadServers: function (query = '') {
-                const self = this;
-
                 window.axios.get(this.route('api.client.index'), {
                     params: { query },
                 })
-                    .then(function (response) {
-                        self.servers = [];
-                        response.data.data.forEach(function (obj) {
-                           self.servers.push(new Server().fill(obj.attributes))
+                    .then(response => {
+                        this.servers = new ServerCollection;
+                        response.data.data.forEach(obj => {
+                            this.servers.add(obj.attributes);
                         });
                     })
-                    .catch(function (error) {
+                    .catch(error => {
                         console.error(error);
                     });
             },

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -1,40 +1,114 @@
-import Allocation from './allocation';
-
-const Server = function () {
-    this.identifier = null;
-    this.uuid = null;
-    this.name = '';
-    this.description = '';
-    this.allocation = null;
-    this.limits = {
-        memory: 0,
-        swap: 0,
-        disk: 0,
-        io: 0,
-        cpu: 0,
-    };
-    this.feature_limits = {
-        databases: 0,
-        allocations: 0,
-    };
-};
+import { Collection, Model } from 'vue-mc';
 
 /**
- * Return a new server model filled with data from the provided object.
- *
- * @param {object} obj
- * @returns {Server}
+ * A generic server model used throughout the code base.
  */
-Server.prototype.fill = function (obj) {
-    this.identifier = obj.identifier;
-    this.uuid = obj.uuid;
-    this.name = obj.name;
-    this.description = obj.description;
-    this.allocation = new Allocation().fill(obj.allocation || {});
-    this.limits = obj.limits;
-    this.feature_limits = obj.feature_limits;
-
-    return this;
-};
-
-export default Server;
+export class Server extends Model {
+    /**
+     * Identifier the primary identifier for this model.
+     *
+     * @returns {{identifier: string}}
+     */
+    static options() {
+        return {
+            identifier: 'identifier',
+        };
+    }
+
+    /**
+     * Return the defaults for this model.
+     *
+     * @returns {object}
+     */
+    static defaults() {
+        return {
+            uuid: null,
+            identifier: null,
+            name: '',
+            description: '',
+            node: '',
+            limits: {
+                memory: 0,
+                swap: 0,
+                disk: 0,
+                io: 0,
+                cpu: 0,
+            },
+            allocation: {
+                ip: null,
+                port: null,
+            },
+            feature_limits: {
+                databases: 0,
+                allocations: 0,
+            },
+        };
+    }
+
+    /**
+     * Mutations to apply to items in this model.
+     *
+     * @returns {{name: StringConstructor, description: StringConstructor}}
+     */
+    static mutations() {
+        return {
+            uuid: String,
+            identifier: String,
+            name: String,
+            description: String,
+            node: String,
+            limits: {
+                memory: Number,
+                swap: Number,
+                disk: Number,
+                io: Number,
+                cpu: Number,
+            },
+            allocation: {
+                ip: String,
+                port: Number,
+            },
+            feature_limits: {
+                databases: Number,
+                allocations: Number,
+            }
+        };
+    }
+
+    /**
+     * Routes to use when building models.
+     *
+     * @returns {{fetch: string}}
+     */
+    static routes() {
+        return {
+            fetch: '/api/client/servers/{identifier}',
+        };
+    }
+}
+
+export class ServerCollection extends Collection {
+    static model() {
+        return Server;
+    }
+
+    static defaults() {
+        return {
+            orderBy: identifier,
+        };
+    }
+
+    static routes() {
+        return {
+            fetch: '/api/client',
+        };
+    }
+
+    get todo() {
+        return this.sum('done');
+    }
+
+    get done() {
+        return this.todo === 0;
+    }
+}