Commit 50b326a0 authored by Kushal Pandya's avatar Kushal Pandya Committed by Jarka Kadlecová

[ci skip] Add todo button in Epic sidebar

parent 9e41a571
<script>
import { __ } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip';
import Icon from '~/vue_shared/components/icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
const MARK_TEXT = __('Mark todo as done');
const TODO_TEXT = __('Add todo');
export default {
directives: {
tooltip,
},
components: {
Icon,
LoadingIcon,
},
props: {
issuableId: {
type: Number,
required: true,
},
issuableType: {
type: String,
required: true,
},
isAddTodo: {
type: Boolean,
required: false,
default: true,
},
collapsed: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
isButtonTypeAddTodo: this.isAddTodo,
isActionActive: false,
};
},
computed: {
buttonClasses() {
return this.collapsed ?
'btn-blank btn-todo sidebar-collapsed-icon dont-change-state' :
'btn btn-default btn-todo issuable-header-btn float-right';
},
buttonLabel() {
return this.isButtonTypeAddTodo ? MARK_TEXT : TODO_TEXT;
},
collapsedButtonIconClasses() {
return this.isButtonTypeAddTodo ? 'todo-undone' : '';
},
collapsedButtonIcon() {
return this.isButtonTypeAddTodo ? 'check-circle' : 'plus-square';
},
},
};
</script>
<template>
<button
v-tooltip
:class="buttonClasses"
:title="buttonLabel"
:aria-label="buttonLabel"
:data-issuable-id="issuableId"
:data-issuable-type="issuableType"
type="button"
data-container="body"
data-placement="left"
data-boundary="viewport"
>
<icon
v-if="collapsed"
:css-classes="collapsedButtonIconClasses"
:name="collapsedButtonIcon"
/>
<span
v-else
class="issuable-todo-inner"
>
{{ buttonLabel }}
</span>
<loading-icon
v-if="isActionActive"
:inline="true"
/>
</button>
</template>
......@@ -12,6 +12,11 @@ export default {
type: Boolean,
required: true,
},
cssClasses: {
type: String,
required: false,
default: '',
},
},
computed: {
tooltipLabel() {
......@@ -30,10 +35,12 @@ export default {
<button
v-tooltip
:title="tooltipLabel"
:class="cssClasses"
type="button"
class="btn btn-blank gutter-toggle btn-sidebar-action"
data-container="body"
data-placement="left"
data-boundary="viewport"
@click="toggle"
>
<i
......
......@@ -462,6 +462,7 @@
.todo-undone {
color: $gl-link-color;
fill: $gl-link-color;
}
.author {
......
......@@ -16,6 +16,10 @@
relatedIssuesRoot,
},
props: {
epicId: {
type: Number,
required: true,
},
endpoint: {
type: String,
required: true,
......@@ -170,6 +174,7 @@
/>
</div>
<epic-sidebar
:epic-id="epicId"
:endpoint="endpoint"
:editable="canUpdate"
:initial-start-date="startDate"
......
......@@ -9,6 +9,7 @@ export default () => {
const props = Object.assign({}, initialData, metaData, el.dataset);
// Convert backend casing to match frontend style guide
props.epicId = props.epic_id;
props.startDate = props.start_date;
props.endDate = props.end_date;
......
<script>
/* eslint-disable vue/require-default-prop */
import _ from 'underscore';
import Cookies from 'js-cookie';
import Flash from '~/flash';
import { __ } from '~/locale';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
import ListLabel from '~/vue_shared/models/label';
import SidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue';
import SidebarCollapsedGroupedDatePicker from '~/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue';
import ToggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
import SidebarLabelsSelect from '~/vue_shared/components/sidebar/labels_select/base.vue';
import SidebarParticipants from './sidebar_participants.vue';
import SidebarSubscriptions from './sidebar_subscriptions.vue';
import SidebarService from '../services/sidebar_service';
import Store from '../stores/sidebar_store';
/* eslint-disable vue/require-default-prop */
import _ from 'underscore';
import Cookies from 'js-cookie';
import Flash from '~/flash';
import { __ } from '~/locale';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
import ListLabel from '~/vue_shared/models/label';
import SidebarTodo from '~/sidebar/components/todo_toggle/todo.vue';
import SidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue';
import SidebarCollapsedGroupedDatePicker from '~/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue';
import ToggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
import SidebarLabelsSelect from '~/vue_shared/components/sidebar/labels_select/base.vue';
import SidebarParticipants from './sidebar_participants.vue';
import SidebarSubscriptions from './sidebar_subscriptions.vue';
import SidebarService from '../services/sidebar_service';
import Store from '../stores/sidebar_store';
export default {
export default {
name: 'EpicSidebar',
components: {
ToggleSidebar,
SidebarTodo,
SidebarDatePicker,
SidebarCollapsedGroupedDatePicker,
SidebarLabelsSelect,
......@@ -26,6 +28,10 @@
SidebarSubscriptions,
},
props: {
epicId: {
type: Number,
required: true,
},
endpoint: {
type: String,
required: true,
......@@ -92,6 +98,7 @@
store,
// Backend will pass the appropriate css class for the contentContainer
collapsed: Cookies.get('collapsed_gutter') === 'true',
isUserSignedIn: !!gon.current_user_id,
autoExpanded: false,
savingStartDate: false,
savingEndDate: false,
......@@ -178,7 +185,8 @@
}
},
handleToggleSubscribed() {
this.service.toggleSubscribed()
this.service
.toggleSubscribed()
.then(() => {
this.store.setSubscribed(!this.store.subscribed);
})
......@@ -191,20 +199,41 @@
});
},
},
};
};
</script>
<template>
<aside
:class="{ 'right-sidebar-expanded' : !collapsed, 'right-sidebar-collapsed': collapsed }"
v-bind="isUserSignedIn ? { 'data-signed-in': true } : {}"
class="right-sidebar"
>
<div class="issuable-sidebar js-issuable-update">
<div class="block issuable-sidebar-header">
<span class="issuable-header-text hide-collapsed float-left">
{{ __('Todo') }}
</span>
<toggle-sidebar
:collapsed="collapsed"
css-classes="float-right"
@toggle="toggleSidebar"
/>
<sidebar-todo
v-if="!collapsed"
:collapsed="collapsed"
:issuable-id="epicId"
issuable-type="epic"
/>
</div>
<div
v-if="collapsed"
class="block todo"
>
<sidebar-todo
:collapsed="collapsed"
:issuable-id="epicId"
issuable-type="epic"
/>
</div>
<sidebar-date-picker
v-if="!collapsed"
......@@ -213,7 +242,7 @@
:editable="editable"
:selected-date="store.startDateTime"
:max-date="store.endDateTime"
:show-toggle-sidebar="true"
:show-toggle-sidebar="!isUserSignedIn"
block-class="start-date"
label="Planned start date"
@saveDate="saveStartDate"
......
......@@ -4,6 +4,7 @@ module EpicsHelper
group = epic.group
epic_meta = {
epic_id: epic.id,
created: epic.created_at,
author: {
name: author.name,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment