132 lines
3.8 KiB
Vue
132 lines
3.8 KiB
Vue
<script>
|
|
import { GlLink, GlTooltip, GlTooltipDirective, GlIcon } from '@gitlab/ui';
|
|
import { uniqueId } from 'lodash';
|
|
import { __ } from '~/locale';
|
|
import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
|
|
import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
|
|
import timeago from '~/vue_shared/mixins/timeago';
|
|
|
|
export default {
|
|
components: {
|
|
GlTooltip,
|
|
GlLink,
|
|
GlIcon,
|
|
UserAvatarImage,
|
|
TimeagoTooltip,
|
|
},
|
|
directives: {
|
|
GlTooltip: GlTooltipDirective,
|
|
},
|
|
mixins: [timeago],
|
|
props: {
|
|
suggestion: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
counts() {
|
|
return [
|
|
{
|
|
id: uniqueId(),
|
|
icon: 'thumb-up',
|
|
tooltipTitle: __('Upvotes'),
|
|
count: this.suggestion.upvotes,
|
|
},
|
|
{
|
|
id: uniqueId(),
|
|
icon: 'comment',
|
|
tooltipTitle: __('Comments'),
|
|
count: this.suggestion.userNotesCount,
|
|
},
|
|
].filter(({ count }) => count);
|
|
},
|
|
isClosed() {
|
|
return this.suggestion.state === 'closed';
|
|
},
|
|
stateIconClass() {
|
|
return this.isClosed ? 'gl-text-blue-500' : 'gl-text-green-500';
|
|
},
|
|
stateIconName() {
|
|
return this.isClosed ? 'issue-close' : 'issue-open-m';
|
|
},
|
|
stateTitle() {
|
|
return this.isClosed ? __('Closed') : __('Opened');
|
|
},
|
|
closedOrCreatedDate() {
|
|
return this.suggestion.closedAt || this.suggestion.createdAt;
|
|
},
|
|
hasUpdated() {
|
|
return this.suggestion.updatedAt !== this.suggestion.createdAt;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="suggestion-item">
|
|
<div class="d-flex align-items-center">
|
|
<gl-icon
|
|
v-if="suggestion.confidential"
|
|
v-gl-tooltip.bottom
|
|
:title="__('Confidential')"
|
|
name="eye-slash"
|
|
class="gl-cursor-help gl-mr-2 gl-text-orange-500"
|
|
/>
|
|
<gl-link
|
|
:href="suggestion.webUrl"
|
|
target="_blank"
|
|
class="suggestion bold str-truncated-100 gl-text-gray-900!"
|
|
>
|
|
{{ suggestion.title }}
|
|
</gl-link>
|
|
</div>
|
|
<div class="text-secondary suggestion-footer">
|
|
<gl-icon ref="state" :name="stateIconName" :class="stateIconClass" class="gl-cursor-help" />
|
|
<gl-tooltip :target="() => $refs.state" placement="bottom">
|
|
<span class="d-block">
|
|
<span class="bold"> {{ stateTitle }} </span> {{ timeFormatted(closedOrCreatedDate) }}
|
|
</span>
|
|
<span class="text-tertiary">{{ tooltipTitle(closedOrCreatedDate) }}</span>
|
|
</gl-tooltip>
|
|
#{{ suggestion.iid }} •
|
|
<timeago-tooltip
|
|
:time="suggestion.createdAt"
|
|
tooltip-placement="bottom"
|
|
class="gl-cursor-help"
|
|
/>
|
|
{{ __('by') }}
|
|
<gl-link :href="suggestion.author.webUrl">
|
|
<user-avatar-image
|
|
:img-src="suggestion.author.avatarUrl"
|
|
:size="16"
|
|
css-classes="mr-0 float-none"
|
|
tooltip-placement="bottom"
|
|
class="d-inline-block"
|
|
>
|
|
<span class="bold d-block">{{ __('Author') }}</span> {{ suggestion.author.name }}
|
|
<span class="text-tertiary">@{{ suggestion.author.username }}</span>
|
|
</user-avatar-image>
|
|
</gl-link>
|
|
<template v-if="hasUpdated">
|
|
• {{ __('updated') }}
|
|
<timeago-tooltip
|
|
:time="suggestion.updatedAt"
|
|
tooltip-placement="bottom"
|
|
class="gl-cursor-help"
|
|
/>
|
|
</template>
|
|
<span class="suggestion-counts">
|
|
<span
|
|
v-for="{ count, icon, tooltipTitle, id } in counts"
|
|
:key="id"
|
|
v-gl-tooltip.bottom
|
|
:title="tooltipTitle"
|
|
class="gl-cursor-help gl-ml-3 text-tertiary"
|
|
>
|
|
<gl-icon :name="icon" /> {{ count }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|