BigW Consortium Gitlab

header_ci_component.vue 3.33 KB
Newer Older
1 2
<script>
import ciIconBadge from './ci_badge_link.vue';
3
import loadingIcon from './loading_icon.vue';
4
import timeagoTooltip from './time_ago_tooltip.vue';
5
import tooltip from '../directives/tooltip';
6
import userAvatarImage from './user_avatar/user_avatar_image.vue';
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

/**
 * Renders header component for job and pipeline page based on UI mockups
 *
 * Used in:
 * - job show page
 * - pipeline show page
 */
export default {
  props: {
    status: {
      type: Object,
      required: true,
    },
    itemName: {
      type: String,
      required: true,
    },
    itemId: {
      type: Number,
      required: true,
    },
    time: {
      type: String,
      required: true,
    },
    user: {
      type: Object,
35 36
      required: false,
      default: () => ({}),
37 38 39 40 41 42
    },
    actions: {
      type: Array,
      required: false,
      default: () => [],
    },
43 44 45 46 47
    hasSidebarButton: {
      type: Boolean,
      required: false,
      default: false,
    },
48 49
  },

50 51 52
  directives: {
    tooltip,
  },
53 54 55

  components: {
    ciIconBadge,
56
    loadingIcon,
57
    timeagoTooltip,
58
    userAvatarImage,
59 60 61 62 63 64 65 66 67 68
  },

  computed: {
    userAvatarAltText() {
      return `${this.user.name}'s avatar`;
    },
  },

  methods: {
    onClickAction(action) {
69
      this.$emit('actionClicked', action);
70 71 72 73
    },
  },
};
</script>
74

75
<template>
76
  <header class="page-content-header ci-header-container">
77 78 79 80 81 82 83 84 85 86 87 88 89 90
    <section class="header-main-content">

      <ci-icon-badge :status="status" />

      <strong>
        {{itemName}} #{{itemId}}
      </strong>

      triggered

      <timeago-tooltip :time="time" />

      by

91 92
      <template v-if="user">
        <a
93
          v-tooltip
94 95
          :href="user.path"
          :title="user.email"
96
          class="js-user-link commit-committer-link">
97 98 99 100 101 102 103 104 105 106 107

          <user-avatar-image
            :img-src="user.avatar_url"
            :img-alt="userAvatarAltText"
            :tooltip-text="user.name"
            :img-size="24"
            />

          {{user.name}}
        </a>
      </template>
108 109 110
    </section>

    <section
111
      class="header-action-buttons"
112 113 114 115 116 117 118 119 120 121
      v-if="actions.length">
      <template
        v-for="action in actions">
        <a
          v-if="action.type === 'link'"
          :href="action.path"
          :class="action.cssClass">
          {{action.label}}
        </a>

122
        <a
123
          v-else-if="action.type === 'ujs-link'"
124 125 126 127 128 129 130
          :href="action.path"
          data-method="post"
          rel="nofollow"
          :class="action.cssClass">
          {{action.label}}
        </a>

131
        <button
132
          v-else-if="action.type === 'button'"
133
          @click="onClickAction(action)"
134
          :disabled="action.isLoading"
135 136 137
          :class="action.cssClass"
          type="button">
          {{action.label}}
138 139 140 141 142 143
          <i
            v-show="action.isLoading"
            class="fa fa-spin fa-spinner"
            aria-hidden="true">
          </i>
        </button>
144
      </template>
145 146 147 148 149 150 151 152 153 154 155 156
      <button
        v-if="hasSidebarButton"
        type="button"
        class="btn btn-default visible-xs-block visible-sm-block sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
        aria-label="Toggle Sidebar"
        id="toggleSidebar">
        <i
          class="fa fa-angle-double-left"
          aria-hidden="true"
          aria-labelledby="toggleSidebar">
        </i>
      </button>
157 158 159
    </section>
  </header>
</template>