feat(fe): add component TaskLink

2024-11-23 20:35:24 +01:00 · 2021-10-23 18:33:36 +05:00 · 2021-10-23 18:33:36 +05:00 · 10b7d41285
commit 10b7d41285
parent 8cc08d7114
6 changed files with 211 additions and 151 deletions
--- a/web2/package-lock.json
+++ b/web2/package-lock.json
@ -1913,17 +1913,6 @@
            "unique-filename": "^1.1.1"
          }
        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
        "cliui": {
          "version": "6.0.0",
          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@ -1971,25 +1960,6 @@
            "path-exists": "^4.0.0"
          }
        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
        "locate-path": {
          "version": "5.0.0",
          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@ -2054,16 +2024,6 @@
            "minipass": "^3.1.1"
          }
        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
        "terser-webpack-plugin": {
          "version": "2.3.8",
          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@ -2081,18 +2041,6 @@
            "webpack-sources": "^1.4.3"
          }
        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.1",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.1.tgz",
-          "integrity": "sha512-V53TJbHmzjBhCG5OYI2JWy/aYDspz4oVHKxS43Iy212GjGIG1T3EsB3+GWXFm/1z5VwjdjLmdZUFYM70y77vtQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
-        },
        "wrap-ansi": {
          "version": "6.2.0",
          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@ -14420,6 +14368,87 @@
        }
      }
    },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.1",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.1.tgz",
+      "integrity": "sha512-V53TJbHmzjBhCG5OYI2JWy/aYDspz4oVHKxS43Iy212GjGIG1T3EsB3+GWXFm/1z5VwjdjLmdZUFYM70y77vtQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
    "vue-router": {
      "version": "3.4.4",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.4.tgz",
--- a/web2/src/App.vue
+++ b/web2/src/App.vue
@ -372,6 +372,7 @@
  <v-app v-else></v-app>
 </template>
 <style lang="scss">
+
 .v-data-table a {
  text-decoration-line: none;
  &:hover {
@ -379,13 +380,6 @@
  }
 }

-.breadcrumbs {
-
-}
-
-.breadcrumbs__item {
-}
-
 .breadcrumbs__item--link {
  text-decoration-line: none;
  &:hover {
--- a/web2/src/components/TaskLink.vue
+++ b/web2/src/components/TaskLink.vue
@ -0,0 +1,68 @@
+<template>
+  <span>
+    <v-icon
+        v-if="status != null"
+        small
+        class="mr-1"
+        :color="status === 'success' ? 'success' : 'red'"
+    >mdi-{{ status === 'success' ? 'check' : 'close' }}
+    </v-icon>
+    <span v-if="disabled">{{ label }}</span>
+    <v-tooltip
+        v-else
+        color="black"
+        right
+        max-width="350"
+        transition="fade-transition"
+        :disabled="!tooltip"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <a
+            v-bind="attrs"
+            v-on="on"
+            @click="showTaskLog()"
+            :class="{'task-link-with-tooltip': tooltip}"
+        >{{ label }}</a>
+      </template>
+      <span>{{ tooltip }}</span>
+    </v-tooltip>
+  </span>
+</template>
+<style lang="scss">
+
+@import '~vuetify/src/styles/settings/_colors.scss';
+
+.task-link-with-tooltip {
+  text-decoration: underline !important;
+  text-decoration-style: dashed !important;
+  text-decoration-color: gray !important;
+}
+
+a.task-link-with-tooltip {
+  &:hover {
+    text-decoration-style: solid !important;
+    text-decoration-color: map-deep-get($blue, 'darken-2') !important;
+  }
+}
+
+</style>
+<script>
+import EventBus from '@/event-bus';
+
+export default {
+  props: {
+    label: String,
+    tooltip: String,
+    taskId: Number,
+    disabled: Boolean,
+    status: String,
+  },
+  methods: {
+    showTaskLog() {
+      EventBus.$emit('i-show-task', {
+        taskId: this.taskId,
+      });
+    },
+  },
+};
+</script>
--- a/web2/src/views/project/History.vue
+++ b/web2/src/views/project/History.vue
@ -28,20 +28,29 @@
          '/templates/' + item.template_id"
          >{{ item.tpl_alias }}</a>
          <v-icon small class="ml-1 mr-1">mdi-arrow-right</v-icon>
-          <a @click="showTaskLog(item.id)">#{{ item.id }}</a>
-          <div class="ml-2" v-if="item.version != null">
-            <v-icon
-                v-if="item.status === 'success'"
-                small
-                color="success"
-            >mdi-check</v-icon>
-            <v-icon
-                v-else
-                small
-                color="red"
-            >mdi-close</v-icon>
-            <span class="ml-1">{{ item.version }}</span>
-          </div>
+          <TaskLink
+              :task-id="item.id"
+              :tooltip="item.message"
+              :label="'#' + item.id"
+          />
+          <TaskLink
+              :disabled="item.tpl_type === 'build'"
+              class="ml-2"
+              v-if="item.tpl_type !== ''"
+              :status="item.status"
+
+              :task-id="item.tpl_type === 'build'
+              ? item.id
+              : item.build_task.id"
+
+              :label="item.tpl_type === 'build'
+              ? item.version
+              : item.build_task.version"
+
+              :tooltip="item.tpl_type === 'build'
+              ? item.message
+              : item.build_task.message"
+          />
        </div>
      </template>

@ -64,6 +73,7 @@
 import ItemListPageBase from '@/components/ItemListPageBase';
 import EventBus from '@/event-bus';
 import TaskStatus from '@/components/TaskStatus.vue';
+import TaskLink from '@/components/TaskLink.vue';
 import socket from '@/socket';
 import { TEMPLATE_TYPE_ICONS } from '@/lib/constants';

@ -74,7 +84,7 @@ export default {
    return { TEMPLATE_TYPE_ICONS };
  },

-  components: { TaskStatus },
+  components: { TaskStatus, TaskLink },

  watch: {
    async projectId() {
--- a/web2/src/views/project/TemplateView.vue
+++ b/web2/src/views/project/TemplateView.vue
@ -214,54 +214,22 @@
        class="mt-0"
    >
      <template v-slot:item.id="{ item }">
-        <div style="display: flex; justify-content: left; align-items: center;">
-          <a @click="showTaskLog(item.id)">#{{ item.id }}</a>
-          <v-tooltip color="black" right max-width="350" transition="fade-transition">
-            <template v-slot:activator="{ on, attrs }">
-              <v-icon
-                  v-bind="attrs"
-                  v-on="on"
-                  v-if="item.message"
-                  class="ml-1"
-                  color="gray"
-                  small
-              >mdi-information
-              </v-icon>
-            </template>
-            <span>{{ item.message }}</span>
-          </v-tooltip>
-        </div>
+        <TaskLink
+            :task-id="item.id"
+            :tooltip="item.message"
+            :label="'#' + item.id"
+        />
      </template>

      <template v-slot:item.version="{ item }">
        <div v-if="item.version != null || item.build_task != null">
-          <v-icon
-              small
-              class="mr-2"
-              :color="item.status === 'success' ? 'success' : 'red'"
-          >mdi-{{ item.status === 'success' ? 'check' : 'close' }}
-          </v-icon>
-
-          <span v-if="item.version">{{ item.version }}</span>
-
-          <v-tooltip
-              v-else
-              color="black"
-              right
-              max-width="350"
-              transition="fade-transition"
-          >
-            <template v-slot:activator="{ on, attrs }">
-              <a
-                  @click="showTaskLog(item.build_task_id)"
-                  v-bind="attrs"
-                  v-on="on"
-                  style="border-bottom: 1px dashed gray; text-decoration: none !important;"
-              >{{ item.build_task.version }}</a>
-            </template>
-            <span>{{ item.build_task.message }}</span>
-          </v-tooltip>
-
+          <TaskLink
+              :disabled="item.tpl_type === 'build'"
+              :task-id="item.build_task_id"
+              :tooltip="item.build_task ? item.build_task.message : null"
+              :label="item.tpl_type === 'build' ? item.version : item.build_task.version"
+              :status="item.status"
+          />
        </div>
        <div v-else>&mdash;</div>
      </template>
@ -299,11 +267,12 @@ import EditDialog from '@/components/EditDialog.vue';
 import TemplateForm from '@/components/TemplateForm.vue';
 import TaskForm from '@/components/TaskForm.vue';
 import TaskStatus from '@/components/TaskStatus.vue';
-import { TEMPLATE_TYPE_ACTION_TITLES, TEMPLATE_TYPE_ICONS, TEMPLATE_TYPE_TITLES } from '../../lib/constants';
+import TaskLink from '@/components/TaskLink.vue';
+import { TEMPLATE_TYPE_ACTION_TITLES, TEMPLATE_TYPE_ICONS, TEMPLATE_TYPE_TITLES } from '@/lib/constants';

 export default {
  components: {
-    YesNoDialog, EditDialog, TemplateForm, TaskStatus, TaskForm,
+    YesNoDialog, EditDialog, TemplateForm, TaskStatus, TaskForm, TaskLink,
  },

  props: {
@ -419,12 +388,6 @@ export default {
      this.newTaskDialog = true;
    },

-    showTaskLog(taskId) {
-      EventBus.$emit('i-show-task', {
-        taskId,
-      });
-    },
-
    showDrawer() {
      EventBus.$emit('i-show-drawer');
    },
--- a/web2/src/views/project/Templates.vue
+++ b/web2/src/views/project/Templates.vue
@ -84,28 +84,22 @@
      </template>

      <template v-slot:item.version="{ item }">
-        <div
-            v-if="item.last_task != null &&
-              (item.last_task.version != null || item.last_task.build_task != null)"
-        >
-          <v-icon
-              v-if="item.last_task.status === 'success'"
-              small
-              color="success"
-          >mdi-check
-          </v-icon>
+        <TaskLink
+            v-if="item.last_task && item.last_task.tpl_type !== ''"
+            :status="item.last_task.status"

-          <v-icon
-              v-else
-              small
-              color="red"
-          >mdi-close
-          </v-icon>
+            :task-id="item.last_task.tpl_type === 'build'
+              ? item.last_task.id
+              : item.last_task.build_task.id"

-          <a class="ml-1" @click="showTaskLog(item.last_task.build_task.id)">
-            {{ item.last_task.version || item.last_task.build_task.version }}
-          </a>
-        </div>
+            :label="item.last_task.tpl_type === 'build'
+              ? item.last_task.version
+              : item.last_task.build_task.version"
+
+            :tooltip="item.last_task.tpl_type === 'build'
+              ? item.last_task.message
+              : item.last_task.build_task.message"
+        />
        <div v-else>&mdash;</div>
      </template>

@ -114,10 +108,11 @@
          <div style="display: flex; justify-content: left; align-items: center;">
            <TaskStatus :status="item.last_task.status"/>
            <div class="ml-3" style="line-height: 1">
-              <a
-                  style="display: block;"
-                  @click="showTaskLog(item.last_task.id)"
-              >#{{ item.last_task.id }}</a>
+              <TaskLink
+                  :task-id="item.last_task.id"
+                  :label="'#' + item.last_task.id"
+                  :tooltip="item.last_task.message"
+              />
              <div style="color: gray; font-size: 14px;">
                by {{ item.last_task.user_name }} {{ item.last_task.created|formatDate }}
              </div>
@ -165,6 +160,7 @@
 <script>
 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 TableSettingsSheet from '@/components/TableSettingsSheet.vue';
@ -174,7 +170,7 @@ import { TEMPLATE_TYPE_ACTION_TITLES, TEMPLATE_TYPE_ICONS } from '../../lib/cons

 export default {
  components: {
-    TemplateForm, TaskForm, TableSettingsSheet, TaskStatus,
+    TemplateForm, TaskForm, TableSettingsSheet, TaskStatus, TaskLink,
  },
  mixins: [ItemListPageBase],
  async created() {