feat(ui): improve task log view performance

Author: fiftin

web/src/App.vue

@@ -54,32 +54,12 @@
       </template>
     </EditDialog>
 
-    <EditDialog
+    <TaskLogDialog
       v-model="taskLogDialog"
-      :max-width="1000"
-      :hide-buttons="true"
-      :expandable="true"
-      name="TaskLogDialog"
       @close="onTaskLogDialogClosed()"
-      no-body-paddings
-      test-id="taskLogDialog"
-    >
-      <template v-slot:title={}>
-        <div class="text-truncate" style="max-width: calc(100% - 36px);">
-          <router-link
-            class="breadcrumbs__item breadcrumbs__item--link"
-            :to="`/project/${projectId}/templates/${template ? template.id : null}`"
-            @click="taskLogDialog = false"
-          >{{ template ? template.name : null }}
-          </router-link>
-          <v-icon>mdi-chevron-right</v-icon>
-          <span class="breadcrumbs__item">{{ $t('task', {expr: task ? task.id : null}) }}</span>
-        </div>
-      </template>
-      <template v-slot:form="{}">
-        <TaskLogView :project-id="projectId" :item="task" />
-      </template>
-    </EditDialog>
+      :project-id="projectId"
+      :item-id="taskId"
+    />
 
     <EditDialog
       v-model="newProjectDialog"
@@ -625,13 +605,16 @@
 .DarkModeSwitch {
   .v-input__prepend-outer {
     transform: translateY(1px);
+
     .v-icon {
       color: #cacaca !important;
     }
   }
+
   .v-input__append-outer {
     margin-left: 5px;
     transform: translateY(-1px);
+
     .v-icon {
       color: #2196f3 !important;
     }
@@ -649,7 +632,6 @@
 
 .v-data-table tbody tr.v-data-table__expanded__content {
   box-shadow: none !important;
-
 }
 
 .v-data-table a {
@@ -712,6 +694,7 @@
   td:first-child, th:first-child {
     padding-left: 2px !important;
   }
+
   td:last-child, th:last-child {
     padding-right: 2px !important;
   }
@@ -723,6 +706,7 @@
 
   .v-data-table__wrapper > table > tbody > tr {
     background: transparent !important;
+
     &:hover {
       background-color: rgba(143, 143, 143, 0.04) !important;
     }
@@ -783,13 +767,13 @@
 import axios from 'axios';
 import { getErrorMessage } from '@/lib/error';
 import EditDialog from '@/components/EditDialog.vue';
-import TaskLogView from '@/components/TaskLogView.vue';
 import ProjectForm from '@/components/ProjectForm.vue';
 import UserForm from '@/components/UserForm.vue';
 import EventBus from '@/event-bus';
 import socket from '@/socket';
 import RestoreProjectForm from '@/components/RestoreProjectForm.vue';
 import YesNoDialog from '@/components/YesNoDialog.vue';
+import TaskLogDialog from '@/components/TaskLogDialog.vue';
 
 const PROJECT_COLORS = [
   'red',
@@ -866,11 +850,11 @@ function getSystemLang() {
 export default {
   name: 'App',
   components: {
+    TaskLogDialog,
     YesNoDialog,
     RestoreProjectForm,
     UserForm,
     EditDialog,
-    TaskLogView,
     ProjectForm,
   },
   data() {
@@ -893,7 +877,7 @@ export default {
       restoreProjectResultDialog: null,
 
       taskLogDialog: null,
-      task: null,
+      taskId: null,
       template: null,
       darkMode: false,
       languages: [
@@ -1021,21 +1005,10 @@ 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.
+        return;
       }
 
-      this.task = (await axios({
-        method: 'get',
-        url: `/api/project/${this.projectId}/tasks/${e.taskId}`,
-        responseType: 'json',
-      })).data;
-
-      this.template = (await axios({
-        method: 'get',
-        url: `/api/project/${this.projectId}/templates/${this.task.template_id}`,
-        responseType: 'json',
-      })).data;
-
+      this.taskId = e.taskId;
       this.taskLogDialog = true;
     });
 

web/src/components/EditTemplateDialog.vue

@@ -22,6 +22,7 @@
           :source-item-id="sourceItemId"
           :app="itemApp"
           :premium-features="premiumFeatures"
+          :task-type="taskType"
       />
     </template>
   </EditDialog>
@@ -51,6 +52,7 @@ export default {
     itemId: [String, Number],
     sourceItemId: Number,
     premiumFeatures: Object,
+    taskType: String,
   },
 
   data() {

web/src/components/ItemFormBase.js

@@ -95,8 +95,6 @@ export default {
 
     afterLoadData() {},
 
-    onLoadData() {},
-
     getNewItem() {
       return {};
     },
@@ -110,14 +108,9 @@ export default {
       try {
         await this.beforeLoadData();
 
-        [
-          this.item,
-        ] = await Promise.all([
-          this.isNew
-            ? Promise.resolve(this.getNewItem())
-            : this.loadEndpoint(this.getSingleItemUrl()),
-          this.onLoadData(),
-        ]);
+        this.item = this.isNew
+          ? this.getNewItem()
+          : await this.loadEndpoint(this.getSingleItemUrl());
 
         await this.afterLoadData();
       } catch (err) {

web/src/components/TaskLogDialog.vue

@@ -0,0 +1,114 @@
+<template>
+  <EditDialog
+    v-model="dialog"
+    :max-width="1000"
+    :hide-buttons="true"
+    :expandable="true"
+    no-body-paddings
+    @close="onClose()"
+    test-id="taskLogDialog"
+  >
+    <template v-slot:title={}>
+      <div class="text-truncate" style="max-width: calc(100% - 36px);">
+        <v-skeleton-loader
+          v-if="template == null"
+          type="button"
+          style="display: inline-block; margin-right: 10px;"
+        ></v-skeleton-loader>
+        <router-link
+          v-else
+          class="breadcrumbs__item breadcrumbs__item--link"
+          :to="`/project/${projectId}/templates/${template ? template.id : null}`"
+          @click="close()"
+        >{{ template ? template.name : null }}</router-link>
+        <v-icon>mdi-chevron-right</v-icon>
+        <span class="breadcrumbs__item">{{ $t('task', {expr: item ? item.id : null}) }}</span>
+      </div>
+    </template>
+    <template v-slot:form="{}">
+      <TaskLogView v-if="item != null" :project-id="projectId" :item="item" />
+      <v-skeleton-loader
+        class="task-log-view__placeholder"
+        v-else
+        type="
+            table-heading,
+            image,
+            list-item-two-line,
+            list-item-two-line,
+            list-item-two-line,
+            list-item-two-line,
+            list-item-two-line,
+            list-item-two-line,
+            list-item-two-line,
+            list-item-two-line"
+      ></v-skeleton-loader>
+    </template>
+  </EditDialog>
+</template>
+<style lang="scss">
+.task-log-view__placeholder {
+  margin-left: 24px;
+  margin-right: 24px;
+  height: calc(100vh - 208px);
+}
+</style>
+<script>
+import TaskLogView from '@/components/TaskLogView.vue';
+import EditDialog from '@/components/EditDialog.vue';
+import ProjectMixin from '@/components/ProjectMixin';
+
+export default {
+  components: { EditDialog, TaskLogView },
+
+  mixins: [ProjectMixin],
+
+  props: {
+    value: Boolean,
+    projectId: Number,
+    itemId: Number,
+  },
+
+  watch: {
+    async dialog(val) {
+      this.$emit('input', val);
+    },
+
+    async value(val) {
+      this.item = null;
+      this.template = null;
+      this.dialog = val;
+      await this.loadData();
+    },
+
+    async itemId() {
+      await this.loadData();
+    },
+  },
+
+  data() {
+    return {
+      item: null,
+      dialog: null,
+      template: null,
+    };
+  },
+
+  methods: {
+    close() {
+      this.dialog = false;
+      this.item = null;
+      this.template = null;
+      this.onClose();
+    },
+
+    async loadData() {
+      this.item = await this.loadProjectResource('tasks', this.itemId);
+      this.template = await this.loadProjectResource('templates', this.item.template_id);
+    },
+
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>