fix(ui): do not load tasks data twice

Author: fiftin

web/src/App.vue

@@ -77,7 +77,7 @@
         </div>
       </template>
       <template v-slot:form="{}">
-        <TaskLogView :project-id="projectId" :item-id="task ? task.id : null"/>
+        <TaskLogView :project-id="projectId" :item="task" />
       </template>
     </EditDialog>
 
@@ -1021,6 +1021,7 @@ export default {
       if (parseInt(this.$route.query.t || '', 10) !== e.taskId) {
         const query = { ...this.$route.query, t: e.taskId };
         await this.$router.replace({ query });
+        return; // router has watcher and emits `i-show-task` again after load.
       }
 
       this.task = (await axios({

web/src/components/TaskLogView.vue

@@ -207,17 +207,21 @@ import TaskStatus from '@/components/TaskStatus.vue';
 import socket from '@/socket';
 import VirtualList from 'vue-virtual-scroll-list';
 import TaskLogViewRecord from '@/components/TaskLogViewRecord.vue';
+import ProjectMixin from '@/components/ProjectMixin';
 
 export default {
   components: { TaskStatus, VirtualList },
+
+  mixins: [ProjectMixin],
+
   props: {
-    itemId: Number,
+    item: Object,
     projectId: Number,
   },
+
   data() {
     return {
       itemComponent: TaskLogViewRecord,
-      item: {},
       output: [],
       outputBuffer: [],
       user: {},
@@ -238,6 +242,10 @@ export default {
   },
 
   computed: {
+    itemId() {
+      return this.item?.id;
+    },
+
     isTaskStopped() {
       return [
         'stopped',
@@ -334,7 +342,6 @@ export default {
     },
 
     reset() {
-      this.item = {};
       this.output = [];
       this.outputBuffer = [];
       this.outputInterval = null;
@@ -358,40 +365,33 @@ export default {
             ...data,
             id: data.time + data.output,
           });
-
-          // this.$nextTick(() => {
-          //   if (this.$refs.records) {
-          //     this.$refs.records.scrollToBottom();
-          //   }
-          // });
-
           break;
         default:
           break;
       }
     },
 
     async loadData() {
-      this.item = (await axios({
-        method: 'get',
-        url: `/api/project/${this.projectId}/tasks/${this.itemId}`,
-        responseType: 'json',
-      })).data;
-
-      this.output = (await axios({
-        method: 'get',
-        url: `/api/project/${this.projectId}/tasks/${this.itemId}/output`,
-        responseType: 'json',
-      })).data.map((item) => ({
-        ...item,
-        id: item.time + item.output,
-      }));
-
-      this.user = this.item.user_id ? (await axios({
-        method: 'get',
-        url: `/api/users/${this.item.user_id}`,
-        responseType: 'json',
-      })).data : null;
+      [
+        this.output,
+        this.user,
+      ] = await Promise.all([
+
+        (await axios({
+          method: 'get',
+          url: `/api/project/${this.projectId}/tasks/${this.itemId}/output`,
+          responseType: 'json',
+        })).data.map((item) => ({
+          ...item,
+          id: item.time + item.output,
+        })),
+
+        this.item.user_id ? (await axios({
+          method: 'get',
+          url: `/api/users/${this.item.user_id}`,
+          responseType: 'json',
+        })).data : null,
+      ]);
     },
   },
 };