116 lines
2.8 KiB
Vue
116 lines
2.8 KiB
Vue
|
<script>
|
||
|
|
import { GlDropdownItem } from '@gitlab/ui';
|
||
|
|
import { TYPE_MILESTONE } from '~/graphql_shared/constants';
|
||
|
|
import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
|
||
|
|
import { IssuableType, WorkspaceType } from '~/issues/constants';
|
||
|
|
import { __ } from '~/locale';
|
||
|
|
import { IssuableAttributeType } from '../../constants';
|
||
|
|
import SidebarDropdown from '../sidebar_dropdown.vue';
|
||
|
|
|
||
|
|
const noMilestone = {
|
||
|
|
id: 0,
|
||
|
|
title: __('No milestone'),
|
||
|
|
};
|
||
|
|
|
||
|
|
const placeholderMilestone = {
|
||
|
|
id: -1,
|
||
|
|
title: __('Select milestone'),
|
||
|
|
};
|
||
|
|
|
||
|
|
export default {
|
||
|
|
issuableAttribute: IssuableAttributeType.Milestone,
|
||
|
|
components: {
|
||
|
|
GlDropdownItem,
|
||
|
|
SidebarDropdown,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
attrWorkspacePath: {
|
||
|
|
required: true,
|
||
|
|
type: String,
|
||
|
|
},
|
||
|
|
canAdminMilestone: {
|
||
|
|
type: Boolean,
|
||
|
|
required: false,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
issuableType: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
validator(value) {
|
||
|
|
return [IssuableType.Issue, IssuableType.MergeRequest].includes(value);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
inputName: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: 'update[milestone_id]',
|
||
|
|
},
|
||
|
|
milestoneId: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
milestoneTitle: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
projectMilestonesPath: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
workspaceType: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
validator(value) {
|
||
|
|
return [WorkspaceType.group, WorkspaceType.project].includes(value);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
milestone: this.milestoneId
|
||
|
|
? { id: convertToGraphQLId(TYPE_MILESTONE, this.milestoneId), title: this.milestoneTitle }
|
||
|
|
: placeholderMilestone,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
footerItemText() {
|
||
|
|
return this.canAdminMilestone ? __('Manage milestones') : __('View milestones');
|
||
|
|
},
|
||
|
|
value() {
|
||
|
|
return this.milestone.id === placeholderMilestone.id
|
||
|
|
? undefined
|
||
|
|
: getIdFromGraphQLId(this.milestone.id);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleChange(milestone) {
|
||
|
|
this.milestone = milestone.id === null ? noMilestone : milestone;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<input type="hidden" :name="inputName" :value="value" />
|
||
|
|
<sidebar-dropdown
|
||
|
|
:attr-workspace-path="attrWorkspacePath"
|
||
|
|
:current-attribute="milestone"
|
||
|
|
:issuable-attribute="$options.issuableAttribute"
|
||
|
|
:issuable-type="issuableType"
|
||
|
|
:workspace-type="workspaceType"
|
||
|
|
data-qa-selector="issuable_milestone_dropdown"
|
||
|
|
@change="handleChange"
|
||
|
|
>
|
||
|
|
<template #footer>
|
||
|
|
<gl-dropdown-item v-if="projectMilestonesPath" :href="projectMilestonesPath">
|
||
|
|
{{ footerItemText }}
|
||
|
|
</gl-dropdown-item>
|
||
|
|
</template>
|
||
|
|
</sidebar-dropdown>
|
||
|
|
</div>
|
||
|
|
</template>
|