feat(fe): run task from template page

Author: fiftin

web/src/components/NewTaskDialog.vue

@@ -0,0 +1,76 @@
+<template>
+  <EditDialog
+    v-model="dialog"
+    :save-button-text="TEMPLATE_TYPE_ACTION_TITLES[templateType]"
+    title="New Task"
+    @save="close"
+    @close="close"
+  >
+    <template v-slot:title={}>
+      <v-icon small class="mr-4">{{ TEMPLATE_TYPE_ICONS[templateType] }}</v-icon>
+      <span class="breadcrumbs__item">{{ templateAlias }}</span>
+      <v-icon>mdi-chevron-right</v-icon>
+      <span class="breadcrumbs__item">New Task</span>
+    </template>
+
+    <template v-slot:form="{ onSave, onError, needSave, needReset }">
+      <TaskForm
+        :project-id="projectId"
+        item-id="new"
+        :template-id="templateId"
+        @save="onSave"
+        @error="onError"
+        :need-save="needSave"
+        :need-reset="needReset"
+      />
+    </template>
+  </EditDialog>
+</template>
+<script>
+import TaskForm from './TaskForm.vue';
+import EditDialog from './EditDialog.vue';
+
+import { TEMPLATE_TYPE_ACTION_TITLES, TEMPLATE_TYPE_ICONS } from '../lib/constants';
+import EventBus from '../event-bus';
+
+export default {
+  components: {
+    TaskForm,
+    EditDialog,
+  },
+  props: {
+    value: Boolean,
+    projectId: Number,
+    templateId: Number,
+    templateType: String,
+    templateAlias: String,
+  },
+  data() {
+    return {
+      dialog: false,
+      TEMPLATE_TYPE_ACTION_TITLES,
+      TEMPLATE_TYPE_ICONS,
+    };
+  },
+  watch: {
+    async dialog(val) {
+      this.$emit('input', val);
+    },
+
+    async value(val) {
+      this.dialog = val;
+    },
+
+    close(e) {
+      this.dialog = false;
+      if (e) {
+        EventBus.$emit('i-show-task', {
+          taskId: e.item.id,
+        });
+        this.$emit('save', e);
+      }
+      this.$emit('close');
+    },
+  },
+};
+</script>

web/src/views/project/TemplateView.vue

@@ -7,6 +7,14 @@
   </div>
   <div v-else>
 
+    <NewTaskDialog
+      v-model="newTaskDialog"
+      :project-id="projectId"
+      :template-id="itemId"
+      :template-alias="item.name"
+      :template-type="item.type"
+    />
+
     <EditDialog
       :max-width="700"
       v-model="editDialog"
@@ -68,14 +76,19 @@
           :to="viewId
               ? `/project/${projectId}/views/${viewId}/templates/`
               : `/project/${projectId}/templates/`"
-        >Task Templates
+        >
+          Task Templates
         </router-link>
         <v-icon>mdi-chevron-right</v-icon>
         <span class="breadcrumbs__item">{{ item.name }}</span>
       </v-toolbar-title>
 
       <v-spacer></v-spacer>
 
+      <v-btn color="primary" depressed class="mr-3" @click="newTaskDialog = true">
+        {{ TEMPLATE_TYPE_ACTION_TITLES[item.type] }}
+      </v-btn>
+
       <v-btn
         icon
         color="error"
@@ -202,10 +215,11 @@ import TemplateForm from '@/components/TemplateForm.vue';
 import TaskList from '@/components/TaskList.vue';
 import { TEMPLATE_TYPE_ACTION_TITLES, TEMPLATE_TYPE_ICONS, TEMPLATE_TYPE_TITLES } from '@/lib/constants';
 import ObjectRefsDialog from '@/components/ObjectRefsDialog.vue';
+import NewTaskDialog from '@/components/NewTaskDialog.vue';
 
 export default {
   components: {
-    YesNoDialog, EditDialog, TemplateForm, TaskList, ObjectRefsDialog,
+    YesNoDialog, EditDialog, TemplateForm, TaskList, ObjectRefsDialog, NewTaskDialog,
   },
 
   props: {
@@ -226,6 +240,7 @@ export default {
       TEMPLATE_TYPE_ACTION_TITLES,
       itemRefs: null,
       itemRefsDialog: null,
+      newTaskDialog: null,
     };
   },
 

web/src/views/project/Templates.vue

@@ -45,32 +45,15 @@
       </template>
     </EditDialog>
 
-    <EditDialog
+    <NewTaskDialog
       v-model="newTaskDialog"
-      :save-button-text="TEMPLATE_TYPE_ACTION_TITLES[templateType]"
-      title="New Task"
-      @save="onTaskCreated"
+      @save="itemId = null"
       @close="itemId = null"
-    >
-      <template v-slot:title={}>
-        <v-icon small class="mr-4">{{ TEMPLATE_TYPE_ICONS[templateType] }}</v-icon>
-        <span class="breadcrumbs__item">{{ templateAlias }}</span>
-        <v-icon>mdi-chevron-right</v-icon>
-        <span class="breadcrumbs__item">New Task</span>
-      </template>
-
-      <template v-slot:form="{ onSave, onError, needSave, needReset }">
-        <TaskForm
-          :project-id="projectId"
-          item-id="new"
-          :template-id="itemId"
-          @save="onSave"
-          @error="onError"
-          :need-save="needSave"
-          :need-reset="needReset"
-        />
-      </template>
-    </EditDialog>
+      :project-id="projectId"
+      :template-id="itemId"
+      :template-alias="templateAlias"
+      :template-type="templateType"
+    />
 
     <v-toolbar flat>
       <v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
@@ -245,19 +228,25 @@ import ItemListPageBase from '@/components/ItemListPageBase';
 import TemplateForm from '@/components/TemplateForm.vue';
 import TaskLink from '@/components/TaskLink.vue';
 import axios from 'axios';
-import TaskForm from '@/components/TaskForm.vue';
 import EditViewsForm from '@/components/EditViewsForm.vue';
 import TableSettingsSheet from '@/components/TableSettingsSheet.vue';
 import TaskList from '@/components/TaskList.vue';
 import EventBus from '@/event-bus';
 import TaskStatus from '@/components/TaskStatus.vue';
 import socket from '@/socket';
+import NewTaskDialog from '@/components/NewTaskDialog.vue';
 
 import { TEMPLATE_TYPE_ACTION_TITLES, TEMPLATE_TYPE_ICONS } from '../../lib/constants';
 
 export default {
   components: {
-    TemplateForm, TaskForm, TableSettingsSheet, TaskStatus, TaskLink, TaskList, EditViewsForm,
+    TemplateForm,
+    TableSettingsSheet,
+    TaskStatus,
+    TaskLink,
+    TaskList,
+    EditViewsForm,
+    NewTaskDialog,
   },
   mixins: [ItemListPageBase],
   async created() {
@@ -383,13 +372,6 @@ export default {
       });
     },
 
-    onTaskCreated(e) {
-      EventBus.$emit('i-show-task', {
-        taskId: e.item.id,
-      });
-      this.itemId = null;
-    },
-
     showTaskLog(taskId) {
       EventBus.$emit('i-show-task', {
         taskId,