BigW Consortium Gitlab

commit.js.es6 3.94 KB
Newer Older
1
/* global Vue */
2 3 4

window.Vue = require('vue');

5 6 7
(() => {
  window.gl = window.gl || {};

Filipa Lacerda committed
8
  window.gl.CommitComponent = Vue.component('commit-component', {
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

    props: {
      /**
       * Indicates the existance of a tag.
       * Used to render the correct icon, if true will render `fa-tag` icon,
       * if false will render `fa-code-fork` icon.
       */
      tag: {
        type: Boolean,
        required: false,
        default: false,
      },

      /**
       * If provided is used to render the branch name and url.
       * Should contain the following properties:
       * name
       * ref_url
       */
28
      commitRef: {
29 30
        type: Object,
        required: false,
Filipa Lacerda committed
31
        default: () => ({}),
32 33 34 35 36
      },

      /**
       * Used to link to the commit sha.
       */
37
      commitUrl: {
38 39 40 41 42 43
        type: String,
        required: false,
        default: '',
      },

      /**
Filipa Lacerda committed
44
       * Used to show the commit short sha that links to the commit url.
45
       */
46
      shortSha: {
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
        type: String,
        required: false,
        default: '',
      },

      /**
       * If provided shows the commit tile.
       */
      title: {
        type: String,
        required: false,
        default: '',
      },

      /**
       * If provided renders information about the author of the commit.
       * When provided should include:
       * `avatar_url` to render the avatar icon
       * `web_url` to link to user profile
       * `username` to render alt and title tags
       */
      author: {
        type: Object,
        required: false,
Filipa Lacerda committed
71
        default: () => ({}),
72
      },
73 74 75 76 77

      commitIconSvg: {
        type: String,
        required: false,
      },
78 79 80 81 82 83 84 85 86 87 88
    },

    computed: {
      /**
       * Used to verify if all the properties needed to render the commit
       * ref section were provided.
       *
       * TODO: Improve this! Use lodash _.has when we have it.
       *
       * @returns {Boolean}
       */
89
      hasCommitRef() {
90
        return this.commitRef && this.commitRef.name && this.commitRef.ref_url;
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
      },

      /**
       * Used to verify if all the properties needed to render the commit
       * author section were provided.
       *
       * TODO: Improve this! Use lodash _.has when we have it.
       *
       * @returns {Boolean}
       */
      hasAuthor() {
        return this.author &&
          this.author.avatar_url &&
          this.author.web_url &&
          this.author.username;
      },

      /**
       * If information about the author is provided will return a string
       * to be rendered as the alt attribute of the img tag.
       *
       * @returns {String}
       */
      userImageAltDescription() {
        return this.author &&
          this.author.username ? `${this.author.username}'s avatar` : null;
      },
    },

    template: `
      <div class="branch-commit">

123
        <div v-if="hasCommitRef" class="icon-container">
124
          <i v-if="tag" class="fa fa-tag"></i>
125
          <i v-if="!tag" class="fa fa-code-fork"></i>
126 127
        </div>

128
        <a v-if="hasCommitRef"
Filipa Lacerda committed
129
          class="monospace branch-name"
130 131
          :href="commitRef.ref_url">
          {{commitRef.name}}
132 133
        </a>

Filipa Lacerda committed
134
        <div v-html="commitIconSvg" class="commit-icon js-commit-icon"></div>
135

Filipa Lacerda committed
136
        <a class="commit-id monospace"
137 138
          :href="commitUrl">
          {{shortSha}}
139 140 141 142
        </a>

        <p class="commit-title">
          <span v-if="title">
Filipa Lacerda committed
143 144 145
            <a v-if="hasAuthor"
              class="avatar-image-container"
              :href="author.web_url">
146
              <img
Filipa Lacerda committed
147
                class="avatar has-tooltip s20"
148 149 150 151 152
                :src="author.avatar_url"
                :alt="userImageAltDescription"
                :title="author.username" />
            </a>

Filipa Lacerda committed
153
            <a class="commit-row-message"
154
              :href="commitUrl">
Filipa Lacerda committed
155
              {{title}}
156 157 158 159 160 161 162 163 164 165
            </a>
          </span>
          <span v-else>
            Cant find HEAD commit for this branch
          </span>
        </p>
      </div>
    `,
  });
})();