fix(web2): task log view

.gitignore

@@ -4,6 +4,7 @@ web/public/js/bundle.js
 web/public/css/*.*
 web/public/html/**/*.*
 web/public/fonts/*.*
+web2/dist
 config.json
 .DS_Store
 node_modules/

web2/src/App.vue

@@ -22,11 +22,19 @@
     <ItemDialog
       v-model="taskLogDialog"
       save-button-text="Delete"
-      title="Task Log"
       :max-width="800"
     >
+      <template v-slot:title={}>
+        <router-link
+          class="breadcrumbs__item breadcrumbs__item--link"
+          :to="`/project/${projectId}/templates/${template ? template.id : null}`"
+          @click="taskLogDialog = false"
+        >{{ template ? template.alias : null }}</router-link>
+        <span class="breadcrumbs__separator">&gt;</span>
+        <span class="breadcrumbs__item">Task #{{ task ? task.id : null }}</span>
+      </template>
       <template v-slot:form="{}">
-        <TaskLogView :project-id="projectId" :item-id="taskId" />
+        <TaskLogView :project-id="projectId" :item-id="task ? task.id : null" />
       </template>
     </ItemDialog>
 
@@ -419,8 +427,10 @@ export default {
       projects: null,
       newProjectDialog: null,
       userDialog: null,
+
       taskLogDialog: null,
-      taskId: null,
+      task: null,
+      template: null,
     };
   },
 
@@ -495,7 +505,18 @@ export default {
     });
 
     EventBus.$on('i-show-task', async (e) => {
-      this.taskId = e.taskId;
+      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.taskLogDialog = true;
     });
 

web2/src/components/ItemDialog.vue

@@ -7,7 +7,11 @@
     :content-class="'item-dialog item-dialog--' + position"
   >
     <v-card>
-      <v-card-title class="headline">{{ title }}</v-card-title>
+      <v-card-title class="headline">
+        <slot
+          name="title"
+        >{{ title }}</slot>
+      </v-card-title>
 
       <v-card-text>
         <slot

web2/src/components/TaskLogDialog.vue

@@ -1,83 +0,0 @@
-<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
-  <v-dialog
-    v-model="dialog"
-    persistent
-    :transition="false"
-    v-if="item != null"
-  >
-    <v-toolbar flat color="white">
-      <v-btn
-        icon
-        class="mr-4"
-      >
-        <v-icon>mdi-arrow-left</v-icon>
-      </v-btn>
-      <v-toolbar-title class="breadcrumbs">
-        <router-link
-          class="breadcrumbs__item breadcrumbs__item--link"
-          :to="`/project/${projectId}/`"
-        >Task Templates</router-link>
-        <span class="breadcrumbs__separator">&gt;</span>
-        <router-link
-          class="breadcrumbs__item breadcrumbs__item--link"
-          :to="`/project/${projectId}/templates/${templateId}`"
-        >Task Templates</router-link>
-        <span class="breadcrumbs__separator">&gt;</span>
-        <span class="breadcrumbs__item">{{ item.id }}</span>
-      </v-toolbar-title>
-      <v-spacer></v-spacer>
-      <v-btn
-        icon
-        color="black"
-        @click="dialog = true"
-      >
-        <v-icon left>mdi-close</v-icon>
-      </v-btn>
-    </v-toolbar>
-  </v-dialog>
-</template>
-<script>
-
-import axios from 'axios';
-
-export default {
-  props: {
-    value: Boolean,
-    projectId: Number,
-    itemId: Number,
-  },
-
-  data() {
-    return {
-      dialog: false,
-      item: null,
-    };
-  },
-
-  watch: {
-    async dialog(val) {
-      this.$emit('input', val);
-      this.needReset = val;
-    },
-
-    async value(val) {
-      this.dialog = val;
-    },
-
-  },
-
-  async created() {
-    await this.loadData();
-  },
-
-  methods: {
-    async loadData() {
-      this.item = (await axios({
-        method: 'get',
-        url: `/api/project/${this.projectId}/tasks/${this.itemId}`,
-        responseType: 'json',
-      })).data;
-    },
-  },
-};
-</script>

web2/src/components/TaskLogView.vue

@@ -1,13 +1,13 @@
 <template>
-  <div>
-    <v-container class="pa-0" v-if="item != null && output != null">
+  <div v-if="item != null && output != null && user != null">
+    <v-container class="pa-0">
       <v-row no-gutters>
         <v-col>
           <v-list two-line subheader class="pa-0">
             <v-list-item class="pa-0">
               <v-list-item-content>
                 <v-list-item-title>Author</v-list-item-title>
-                <v-list-item-subtitle>{{ item.user_name }}</v-list-item-subtitle>
+                <v-list-item-subtitle>{{ user.name }}</v-list-item-subtitle>
               </v-list-item-content>
             </v-list-item>
 
@@ -31,14 +31,14 @@
             <v-list-item class="pa-0">
               <v-list-item-content>
                 <v-list-item-title>Started</v-list-item-title>
-                <v-list-item-subtitle>{{ item.start }}</v-list-item-subtitle>
+                <v-list-item-subtitle>{{ item.start || '&mdash;' }}</v-list-item-subtitle>
               </v-list-item-content>
             </v-list-item>
 
             <v-list-item class="pa-0">
               <v-list-item-content>
                 <v-list-item-title>Ended</v-list-item-title>
-                <v-list-item-subtitle>{{ item.end }}</v-list-item-subtitle>
+                <v-list-item-subtitle>{{ item.end || '&mdash;' }}</v-list-item-subtitle>
               </v-list-item-content>
             </v-list-item>
           </v-list>
@@ -46,12 +46,12 @@
       </v-row>
     </v-container>
 
-    <div class="text-view" style="height: 400px;" v-text="output">
+    <div class="task-log-view" style="height: 400px;" v-text="output">
     </div>
   </div>
 </template>
 <style lang="scss">
-  .text-view {
+  .task-log-view {
     overflow: auto;
     border: 1px solid gray;
     border-radius: 4px;
@@ -70,6 +70,7 @@ export default {
     return {
       item: null,
       output: null,
+      user: null,
     };
   },
   async created() {
@@ -82,11 +83,18 @@ export default {
         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((line) => line.output).join('\n');
+
+      this.user = (await axios({
+        method: 'get',
+        url: `/api/users/${this.item.user_id}`,
+        responseType: 'json',
+      })).data;
     },
   },
 };

web2/src/views/project/History.vue

@@ -1,16 +1,5 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <div v-if="items != null">
-    <ItemDialog
-      v-model="taskLogDialog"
-      save-button-text="Delete"
-      title="Task Log"
-      :max-width="800"
-    >
-      <template v-slot:form="{}">
-        <TaskLogView :project-id="projectId" :item-id="taskId" />
-      </template>
-    </ItemDialog>
-
     <v-toolbar flat color="white">
       <v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
       <v-toolbar-title>Dashboard</v-toolbar-title>
@@ -41,23 +30,11 @@
 </template>
 <script>
 import ItemListPageBase from '@/components/ItemListPageBase';
-import ItemDialog from '@/components/ItemDialog.vue';
-import TaskLogView from '@/components/TaskLogView.vue';
+import EventBus from '@/event-bus';
 
 export default {
-  components: {
-    ItemDialog, TaskLogView,
-  },
-
   mixins: [ItemListPageBase],
 
-  data() {
-    return {
-      taskLogDialog: null,
-      taskId: null,
-    };
-  },
-
   watch: {
     async projectId() {
       await this.loadItems();
@@ -66,8 +43,9 @@ export default {
 
   methods: {
     showTaskLog(taskId) {
-      this.taskId = taskId;
-      this.taskLogDialog = true;
+      EventBus.$emit('i-show-task', {
+        taskId,
+      });
     },
 
     getHeaders() {

web2/src/views/project/TemplateView.vue

@@ -1,7 +1,5 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <div v-if="item != null && tasks != null">
-    <TaskLogDialog v-model="editDialog" />
-
     <ItemDialog
       v-model="editDialog"
       save-button-text="Save"
@@ -154,11 +152,10 @@ import { getErrorMessage } from '@/lib/error';
 import YesNoDialog from '@/components/YesNoDialog.vue';
 import ItemDialog from '@/components/ItemDialog.vue';
 import TemplateForm from '@/components/TemplateForm.vue';
-import TaskLogDialog from '@/components/TaskLogDialog.vue';
 
 export default {
   components: {
-    YesNoDialog, ItemDialog, TemplateForm, TaskLogDialog,
+    YesNoDialog, ItemDialog, TemplateForm,
   },
   props: {
     projectId: Number,
@@ -206,13 +203,13 @@ export default {
     itemId() {
       return this.$route.params.templateId;
     },
-    IsNew() {
+    isNew() {
       return this.itemId === 'new';
     },
   },
 
   async created() {
-    if (this.IsNew) {
+    if (this.isNew) {
       await this.$router.replace({
         path: `/project/${this.projectId}/templates/new/edit`,
       });
@@ -223,8 +220,9 @@ export default {
 
   methods: {
     showTaskLog(taskId) {
-      this.taskId = taskId;
-      this.taskLogDialog = true;
+      EventBus.$emit('i-show-task', {
+        taskId,
+      });
     },
 
     showDrawer() {

web2/src/views/project/Templates.vue

@@ -37,18 +37,6 @@
       </template>
     </ItemDialog>
 
-    <ItemDialog
-      v-model="taskLogDialog"
-      save-button-text="Delete"
-      title="Task Log"
-      @save="onTaskAskDelete"
-      :max-width="800"
-    >
-      <template v-slot:form="{}">
-        <TaskLogView :project-id="projectId" :item-id="taskId" />
-      </template>
-    </ItemDialog>
-
     <v-toolbar flat color="white">
       <v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
       <v-toolbar-title>Task Templates</v-toolbar-title>
@@ -105,10 +93,10 @@ import ItemListPageBase from '@/components/ItemListPageBase';
 import TemplateForm from '@/components/TemplateForm.vue';
 import axios from 'axios';
 import TaskForm from '@/components/TaskForm.vue';
-import TaskLogView from '@/components/TaskLogView.vue';
+import EventBus from '@/event-bus';
 
 export default {
-  components: { TaskLogView, TemplateForm, TaskForm },
+  components: { TemplateForm, TaskForm },
   mixins: [ItemListPageBase],
   async created() {
     await this.loadData();
@@ -120,7 +108,6 @@ export default {
       environment: null,
       repositories: null,
       newTaskDialog: null,
-      taskLogDialog: null,
       taskId: null,
     };
   },
@@ -131,12 +118,9 @@ export default {
   },
   methods: {
     onTaskCreate(e) {
-      this.taskId = e.item.id;
-      this.taskLogDialog = true;
-    },
-
-    onTaskAskDelete() {
-      // TODO: stop task
+      EventBus.$emit('i-show-task', {
+        taskId: e.item.id,
+      });
     },
 
     createTask(itemId) {