summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue
blob: 7ed93c042f81cc08f5bdb1068ee2a8e1ceeccfc3 (plain)
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
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<script>
import IssuableSidebar from '~/vue_shared/issuable/sidebar/components/issuable_sidebar_root.vue';

import IssuableBody from './issuable_body.vue';
import IssuableDiscussion from './issuable_discussion.vue';
import IssuableHeader from './issuable_header.vue';

export default {
  components: {
    IssuableSidebar,
    IssuableHeader,
    IssuableBody,
    IssuableDiscussion,
  },
  props: {
    issuable: {
      type: Object,
      required: true,
    },
    statusIcon: {
      type: String,
      required: false,
      default: '',
    },
    statusIconClass: {
      type: String,
      required: false,
      default: '',
    },
    enableEdit: {
      type: Boolean,
      required: false,
      default: false,
    },
    enableAutocomplete: {
      type: Boolean,
      required: false,
      default: false,
    },
    enableAutosave: {
      type: Boolean,
      required: false,
      default: true,
    },
    enableZenMode: {
      type: Boolean,
      required: false,
      default: true,
    },
    enableTaskList: {
      type: Boolean,
      required: false,
      default: false,
    },
    editFormVisible: {
      type: Boolean,
      required: false,
      default: false,
    },
    showFieldTitle: {
      type: Boolean,
      required: false,
      default: false,
    },
    descriptionPreviewPath: {
      type: String,
      required: false,
      default: '',
    },
    descriptionHelpPath: {
      type: String,
      required: false,
      default: '',
    },
    taskCompletionStatus: {
      type: Object,
      required: false,
      default: null,
    },
    taskListUpdatePath: {
      type: String,
      required: false,
      default: '',
    },
    taskListLockVersion: {
      type: Number,
      required: false,
      default: 0,
    },
  },
  methods: {
    handleKeydownTitle(e, issuableMeta) {
      this.$emit('keydown-title', e, issuableMeta);
    },
    handleKeydownDescription(e, issuableMeta) {
      this.$emit('keydown-description', e, issuableMeta);
    },
  },
};
</script>

<template>
  <div class="issuable-show-container" data-qa-selector="issuable_show_container">
    <issuable-header
      :issuable-state="issuable.state"
      :status-icon="statusIcon"
      :status-icon-class="statusIconClass"
      :blocked="issuable.blocked"
      :confidential="issuable.confidential"
      :created-at="issuable.createdAt"
      :author="issuable.author"
      :task-completion-status="taskCompletionStatus"
    >
      <template #status-badge>
        <slot name="status-badge"></slot>
      </template>
      <template #header-actions>
        <slot name="header-actions"></slot>
      </template>
    </issuable-header>

    <issuable-body
      :issuable="issuable"
      :status-icon="statusIcon"
      :status-icon-class="statusIconClass"
      :enable-edit="enableEdit"
      :enable-autocomplete="enableAutocomplete"
      :enable-autosave="enableAutosave"
      :enable-zen-mode="enableZenMode"
      :enable-task-list="enableTaskList"
      :edit-form-visible="editFormVisible"
      :show-field-title="showFieldTitle"
      :description-preview-path="descriptionPreviewPath"
      :description-help-path="descriptionHelpPath"
      :task-list-update-path="taskListUpdatePath"
      :task-list-lock-version="taskListLockVersion"
      @edit-issuable="$emit('edit-issuable', $event)"
      @task-list-update-success="$emit('task-list-update-success', $event)"
      @task-list-update-failure="$emit('task-list-update-failure')"
      @keydown-title="handleKeydownTitle"
      @keydown-description="handleKeydownDescription"
    >
      <template #status-badge>
        <slot name="status-badge"></slot>
      </template>
      <template #edit-form-actions="actionsProps">
        <slot name="edit-form-actions" v-bind="actionsProps"></slot>
      </template>
    </issuable-body>

    <issuable-discussion>
      <template #discussion>
        <slot name="discussion"></slot>
      </template>
    </issuable-discussion>

    <issuable-sidebar>
      <template #right-sidebar-items="{ sidebarExpanded, toggleSidebar }">
        <slot name="right-sidebar-items" v-bind="{ sidebarExpanded, toggleSidebar }"></slot>
      </template>
    </issuable-sidebar>
  </div>
</template>