177 lines
4.2 KiB
Vue
177 lines
4.2 KiB
Vue
<script>
|
|
import commitIconSvg from 'icons/_icon_commit.svg';
|
|
import userAvatarLink from './user_avatar/user_avatar_link.vue';
|
|
import tooltip from '../directives/tooltip';
|
|
|
|
export default {
|
|
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
|
|
*/
|
|
commitRef: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({}),
|
|
},
|
|
/**
|
|
* Used to link to the commit sha.
|
|
*/
|
|
commitUrl: {
|
|
type: String,
|
|
required: false,
|
|
default: '',
|
|
},
|
|
|
|
/**
|
|
* Used to show the commit short sha that links to the commit url.
|
|
*/
|
|
shortSha: {
|
|
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,
|
|
default: () => ({}),
|
|
},
|
|
},
|
|
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}
|
|
*/
|
|
hasCommitRef() {
|
|
return this.commitRef && this.commitRef.name && this.commitRef.ref_url;
|
|
},
|
|
/**
|
|
* 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.path &&
|
|
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;
|
|
},
|
|
},
|
|
directives: {
|
|
tooltip,
|
|
},
|
|
components: {
|
|
userAvatarLink,
|
|
},
|
|
created() {
|
|
this.commitIconSvg = commitIconSvg;
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="branch-commit">
|
|
<div
|
|
v-if="hasCommitRef"
|
|
class="icon-container hidden-xs">
|
|
<i
|
|
v-if="tag"
|
|
class="fa fa-tag"
|
|
aria-hidden="true">
|
|
</i>
|
|
<i
|
|
v-if="!tag"
|
|
class="fa fa-code-fork"
|
|
aria-hidden="true">
|
|
</i>
|
|
</div>
|
|
|
|
<a
|
|
v-if="hasCommitRef"
|
|
class="ref-name hidden-xs"
|
|
:href="commitRef.ref_url"
|
|
v-tooltip
|
|
data-container="body"
|
|
:title="commitRef.name">
|
|
{{commitRef.name}}
|
|
</a>
|
|
|
|
<div
|
|
v-html="commitIconSvg"
|
|
class="commit-icon js-commit-icon">
|
|
</div>
|
|
|
|
<a
|
|
class="commit-sha"
|
|
:href="commitUrl">
|
|
{{shortSha}}
|
|
</a>
|
|
|
|
<div class="commit-title flex-truncate-parent">
|
|
<span
|
|
v-if="title"
|
|
class="flex-truncate-child">
|
|
<user-avatar-link
|
|
v-if="hasAuthor"
|
|
class="avatar-image-container"
|
|
:link-href="author.path"
|
|
:img-src="author.avatar_url"
|
|
:img-alt="userImageAltDescription"
|
|
:tooltip-text="author.username"
|
|
/>
|
|
<a
|
|
class="commit-row-message"
|
|
:href="commitUrl">
|
|
{{title}}
|
|
</a>
|
|
</span>
|
|
<span v-else>
|
|
Cant find HEAD commit for this branch
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|