Add proper server models

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

@@ -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,7 +49,7 @@
 </template>
 
 <script>
-    import Server from '../../models/server';
+    import { ServerCollection } from '../../models/server';
     import _ from 'lodash';
 
     export default {
@@ -57,7 +57,7 @@
         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/models/server.js

@@ -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;
+export class Server extends Model {
+    /**
+     * Identifier the primary identifier for this model.
+     *
+     * @returns {{identifier: string}}
+     */
+    static options() {
+        return {
+            identifier: 'identifier',
+        };
+    }
 
-    return this;
-};
+    /**
+     * 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,
+            },
+        };
+    }
 
-export default Server;
+    /**
+     * 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;
+    }
+}