diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue b/app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue new file mode 100644 index 00000000000..12c58b582c5 --- /dev/null +++ b/app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue @@ -0,0 +1,81 @@ +<script> +import sidebarStatusQuery from '../graphql/queries/alert_sidebar_status.query.graphql'; +import SidebarHeader from './sidebar/sidebar_header.vue'; +import SidebarTodo from './sidebar/sidebar_todo.vue'; +import SidebarStatus from './sidebar/sidebar_status.vue'; +import SidebarAssignees from './sidebar/sidebar_assignees.vue'; + +export default { + components: { + SidebarAssignees, + SidebarHeader, + SidebarTodo, + SidebarStatus, + }, + inject: { + projectPath: { + default: '', + }, + projectId: { + default: '', + }, + }, + props: { + alert: { + type: Object, + required: true, + }, + }, + apollo: { + sidebarStatus: { + query: sidebarStatusQuery, + }, + }, + data() { + return { + sidebarStatus: false, + }; + }, + computed: { + sidebarCollapsedClass() { + return this.sidebarStatus ? 'right-sidebar-collapsed' : 'right-sidebar-expanded'; + }, + }, +}; +</script> + +<template> + <aside :class="sidebarCollapsedClass" class="right-sidebar alert-sidebar"> + <div class="issuable-sidebar js-issuable-update"> + <sidebar-header + :sidebar-collapsed="sidebarStatus" + :project-path="projectPath" + :alert="alert" + @toggle-sidebar="$emit('toggle-sidebar')" + @alert-error="$emit('alert-error', $event)" + /> + <sidebar-todo + v-if="sidebarStatus" + :project-path="projectPath" + :alert="alert" + :sidebar-collapsed="sidebarStatus" + @alert-error="$emit('alert-error', $event)" + /> + <sidebar-status + :project-path="projectPath" + :alert="alert" + @toggle-sidebar="$emit('toggle-sidebar')" + @alert-error="$emit('alert-error', $event)" + /> + <sidebar-assignees + :project-path="projectPath" + :project-id="projectId" + :alert="alert" + :sidebar-collapsed="sidebarStatus" + @toggle-sidebar="$emit('toggle-sidebar')" + @alert-error="$emit('alert-error', $event)" + /> + <div class="block"></div> + </div> + </aside> +</template> |