Refactor projects.js

app/server/static/js/projects.js

@@ -1,53 +1,60 @@
 import Vue from 'vue';
+import axios from 'axios';
 
-var vm = new Vue({
-    el: '#projects_root',
-    delimiters: ['[[', ']]'],
-    data: {
-        items: [],
-        selectedType: 'All',
-        isActive: false
+const vm = new Vue({
+  el: '#projects_root',
+  delimiters: ['[[', ']]'],
+  data: {
+    items: [],
+    selectedType: 'All',
+    isActive: false,
+  },
+
+  methods: {
+    get_projects() {
+      const baseUrl = window.location.href.split('/').slice(0, 3).join('/');
+      axios.get(`${baseUrl}/api/projects`).then((response) => {
+        this.items = response.data;
+      });
     },
-    methods: {
-        get_projects: async function () {
-            var base_url = window.location.href.split('/').slice(0, 3).join('/');
-            await axios.get(`${base_url}/api/projects`).then(response => {
-                this.items = response.data;
-            })
-        },
-        updateSelectedType: function (type) {
-            this.selectedType = type;
-        }
+
+    updateSelectedType(type) {
+      this.selectedType = type;
     },
-    computed: {
-        uniqueProjectTypes: function () {
-            var types = [];
-            for (var item of this.items) {
-                types.push(item.project_type)
-            }
-            var uniqueTypes = Array.from(new Set(types));
+  },
 
-            return uniqueTypes
-        },
-        filteredProjects: function () {
-            // filter projects
-            var projects = [];
-            for (var item of this.items) {
-                if ((this.selectedType == 'All') || (item.project_type == this.selectedType)) {
-                    projects.push(item)
-                }
-            }
-            // create nested projects
-            var nested_projects = [];
-            for (var i = 0; i < Math.ceil(projects.length / 3); i++) {
-                var p = projects.slice(i * 3, (i + 1) * 3);
-                nested_projects.push(p);
-            }
+  computed: {
+    uniqueProjectTypes() {
+      const types = [];
+      for (let i = 0; i < this.items.length; i++) {
+        const item = this.items[i];
+        types.push(item.project_type);
+      }
+      const uniqueTypes = Array.from(new Set(types));
 
-            return nested_projects
+      return uniqueTypes;
+    },
+
+    filteredProjects() {
+      // filter projects
+      const projects = [];
+      for (let i = 0; i < this.items.length; i++) {
+        const item = this.items[i];
+        if ((this.selectedType === 'All') || (item.project_type === this.selectedType)) {
+          projects.push(item);
         }
+      }
+      // create nested projects
+      const nestedProjects = [];
+      for (let i = 0; i < Math.ceil(projects.length / 3); i++) {
+        const p = projects.slice(i * 3, (i + 1) * 3);
+        nestedProjects.push(p);
+      }
+      return nestedProjects;
     },
-    created: function () {
-        this.get_projects();
-    }
-});
+  },
+
+  created() {
+    this.get_projects();
+  },
+});