refactor(ui): add mixin ProjectMixin with project related methods

Author: fiftin

web/src/components/ItemListPageBase.js

@@ -7,6 +7,7 @@ import ObjectRefsDialog from '@/components/ObjectRefsDialog.vue';
 import { getErrorMessage } from '@/lib/error';
 import { USER_PERMISSIONS } from '@/lib/constants';
 import PermissionsCheck from '@/components/PermissionsCheck';
+import ProjectMixin from '@/components/ProjectMixin';
 
 export default {
   components: {
@@ -15,10 +16,9 @@ export default {
     ObjectRefsDialog,
   },
 
-  mixins: [PermissionsCheck],
+  mixins: [PermissionsCheck, ProjectMixin],
 
   props: {
-    projectId: Number,
     projectType: String,
     userId: Number,
     userRole: String,
@@ -141,13 +141,5 @@ export default {
         responseType: 'json',
       })).data;
     },
-
-    async loadProjectResources(name) {
-      return (await axios({
-        method: 'get',
-        url: `/api/project/${this.projectId}/${name}`,
-        responseType: 'json',
-      })).data;
-    },
   },
 };

web/src/components/ProjectMixin.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+export default {
+  props: {
+    projectId: Number,
+  },
+
+  methods: {
+    async loadProjectResources(name) {
+      return (await axios({
+        method: 'get',
+        url: `/api/project/${this.projectId}/${name}`,
+        responseType: 'json',
+      })).data;
+    },
+    async loadProjectResource(name, id) {
+      return (await axios({
+        method: 'get',
+        url: `/api/project/${this.projectId}/${name}/${id}`,
+        responseType: 'json',
+      })).data;
+    },
+  },
+};

web/src/lib/api.js

@@ -0,0 +1,13 @@
+import axios from 'axios';
+
+export async function loadProjectResources(name) {
+  return (await axios({
+    method: 'get',
+    url: `/api/project/${this.projectId}/${name}`,
+    responseType: 'json',
+  })).data;
+}
+
+export async function test() {
+  return null;
+}

web/src/views/project/TemplateView.vue

@@ -160,6 +160,7 @@ import NewTaskDialog from '@/components/NewTaskDialog.vue';
 import EditTemplateDialog from '@/components/EditTemplateDialog.vue';
 import PermissionsCheck from '@/components/PermissionsCheck';
 import SingleLineEditable from '@/components/SingleLineEditable.vue';
+import ProjectMixin from '@/components/ProjectMixin';
 
 export default {
   components: {
@@ -176,7 +177,7 @@ export default {
     premiumFeatures: Object,
   },
 
-  mixins: [PermissionsCheck],
+  mixins: [PermissionsCheck, ProjectMixin],
 
   data() {
     return {
@@ -294,37 +295,17 @@ export default {
     },
 
     async loadData() {
-      this.item = (
-        await axios({
-          method: 'get',
-          url: `/api/project/${this.projectId}/templates/${this.itemId}`,
-          responseType: 'json',
-        })
-      ).data;
-
-      this.inventory = (
-        await axios({
-          method: 'get',
-          url: `/api/project/${this.projectId}/inventory`,
-          responseType: 'json',
-        })
-      ).data;
-
-      this.environment = (
-        await axios({
-          method: 'get',
-          url: `/api/project/${this.projectId}/environment`,
-          responseType: 'json',
-        })
-      ).data;
-
-      this.repositories = (
-        await axios({
-          method: 'get',
-          url: `/api/project/${this.projectId}/repositories`,
-          responseType: 'json',
-        })
-      ).data;
+      [
+        this.item,
+        this.inventory,
+        this.environment,
+        this.repositories,
+      ] = await Promise.all([
+        this.loadProjectResource('templates', this.itemId),
+        this.loadProjectResources('inventory'),
+        this.loadProjectResources('environment'),
+        this.loadProjectResources('repositories'),
+      ]);
     },
 
     async updateDescription() {