debian-mirror-gitlab/app/assets/javascripts/issuable_suggestions/components/item.vue

142 lines
3.9 KiB
Vue
Raw Normal View History

2019-02-15 15:39:39 +05:30
<script>
2020-04-22 19:07:51 +05:30
/* eslint-disable @gitlab/vue-require-i18n-strings */
2020-11-24 15:15:51 +05:30
import { GlLink, GlTooltip, GlTooltipDirective, GlIcon } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { uniqueId } from 'lodash';
2019-02-15 15:39:39 +05:30
import { __ } from '~/locale';
import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
2021-03-11 19:13:27 +05:30
import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
2019-02-15 15:39:39 +05:30
import timeago from '~/vue_shared/mixins/timeago';
export default {
components: {
GlTooltip,
GlLink,
2020-11-24 15:15:51 +05:30
GlIcon,
2019-02-15 15:39:39 +05:30
UserAvatarImage,
TimeagoTooltip,
},
directives: {
GlTooltip: GlTooltipDirective,
},
mixins: [timeago],
props: {
suggestion: {
type: Object,
required: true,
},
},
computed: {
isOpen() {
return this.suggestion.state === 'opened';
},
isClosed() {
return this.suggestion.state === 'closed';
},
counts() {
return [
{
2020-04-08 14:13:33 +05:30
id: uniqueId(),
2019-02-15 15:39:39 +05:30
icon: 'thumb-up',
tooltipTitle: __('Upvotes'),
count: this.suggestion.upvotes,
},
{
2020-04-08 14:13:33 +05:30
id: uniqueId(),
2019-02-15 15:39:39 +05:30
icon: 'comment',
tooltipTitle: __('Comments'),
count: this.suggestion.userNotesCount,
},
].filter(({ count }) => count);
},
stateIcon() {
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">
2020-11-24 15:15:51 +05:30
<gl-icon
2019-02-15 15:39:39 +05:30
v-if="suggestion.confidential"
v-gl-tooltip.bottom
:title="__('Confidential')"
name="eye-slash"
class="suggestion-help-hover mr-1 suggestion-confidential"
/>
2020-07-28 23:09:34 +05:30
<gl-link
:href="suggestion.webUrl"
target="_blank"
class="suggestion bold str-truncated-100 gl-text-gray-900!"
>
2019-02-15 15:39:39 +05:30
{{ suggestion.title }}
</gl-link>
</div>
<div class="text-secondary suggestion-footer">
2020-11-24 15:15:51 +05:30
<gl-icon
2019-02-15 15:39:39 +05:30
ref="state"
:name="stateIcon"
:class="{
'suggestion-state-open': isOpen,
'suggestion-state-closed': isClosed,
}"
class="suggestion-help-hover"
/>
<gl-tooltip :target="() => $refs.state" placement="bottom">
<span class="d-block">
2020-01-01 13:55:28 +05:30
<span class="bold"> {{ stateTitle }} </span> {{ timeFormatted(closedOrCreatedDate) }}
2019-02-15 15:39:39 +05:30
</span>
<span class="text-tertiary">{{ tooltipTitle(closedOrCreatedDate) }}</span>
</gl-tooltip>
#{{ suggestion.iid }} &bull;
<timeago-tooltip
:time="suggestion.createdAt"
tooltip-placement="bottom"
class="suggestion-help-hover"
/>
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">
&bull; {{ __('updated') }}
<timeago-tooltip
:time="suggestion.updatedAt"
tooltip-placement="bottom"
class="suggestion-help-hover"
/>
</template>
<span class="suggestion-counts">
<span
v-for="{ count, icon, tooltipTitle, id } in counts"
:key="id"
v-gl-tooltip.bottom
:title="tooltipTitle"
2020-06-23 00:09:42 +05:30
class="suggestion-help-hover gl-ml-3 text-tertiary"
2019-02-15 15:39:39 +05:30
>
2020-11-24 15:15:51 +05:30
<gl-icon :name="icon" /> {{ count }}
2019-02-15 15:39:39 +05:30
</span>
</span>
</div>
</div>
</template>