1
2
3
4
5
6
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
<script>
import { GlBadge, GlIcon, GlAvatar, GlButton, GlLink } from '@gitlab/ui';
import { REPORT_HEADER_I18N, STATUS_OPEN, STATUS_CLOSED } from '../constants';
import ReportActions from './report_actions.vue';
export default {
name: 'ReportHeader',
components: {
GlBadge,
GlIcon,
GlAvatar,
GlButton,
GlLink,
ReportActions,
},
props: {
user: {
type: Object,
required: true,
},
report: {
type: Object,
required: true,
},
},
data() {
return {
state: this.report.status,
};
},
computed: {
isOpen() {
return this.state === STATUS_OPEN;
},
badgeClass() {
return this.isOpen ? 'issuable-status-badge-open' : 'issuable-status-badge-closed';
},
badgeVariant() {
return this.isOpen ? 'success' : 'info';
},
badgeText() {
return REPORT_HEADER_I18N[this.state];
},
badgeIcon() {
return this.isOpen ? 'issues' : 'issue-closed';
},
},
methods: {
closeReport() {
this.state = STATUS_CLOSED;
},
},
i18n: REPORT_HEADER_I18N,
};
</script>
<template>
<header
class="gl-py-4 gl-border-b gl-display-flex gl-justify-content-space-between gl-xs-flex-direction-column"
>
<div class="gl-display-flex gl-align-items-center">
<gl-badge
class="issuable-status-badge gl-mr-3"
:class="badgeClass"
:variant="badgeVariant"
:aria-label="badgeText"
>
<gl-icon :name="badgeIcon" class="gl-badge-icon" />
<span class="gl-display-none gl-sm-display-block gl-ml-2">{{ badgeText }}</span>
</gl-badge>
<gl-avatar :size="48" :src="user.avatarUrl" />
<h1 class="gl-font-size-h-display gl-my-0 gl-ml-3">
{{ user.name }}
</h1>
<gl-link :href="user.path" class="gl-ml-3"> @{{ user.username }} </gl-link>
</div>
<nav
class="gl-display-flex gl-sm-align-items-center gl-mt-4 gl-sm-mt-0 gl-xs-flex-direction-column"
>
<gl-button :href="user.adminPath">
{{ $options.i18n.adminProfile }}
</gl-button>
<report-actions
:user="user"
:report="report"
class="gl-sm-ml-3 gl-mt-3 gl-sm-mt-0"
@closeReport="closeReport"
v-on="$listeners"
/>
</nav>
</header>
</template>
|
