diff options
Diffstat (limited to 'app/assets/javascripts/issue_show/components/fields')
3 files changed, 82 insertions, 3 deletions
diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue index 14df87e486b..9bfdbb41e23 100644 --- a/app/assets/javascripts/issue_show/components/fields/description_template.vue +++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue @@ -54,14 +54,14 @@ export default { <template> <!-- eslint-disable @gitlab/vue-no-data-toggle --> - <div class="dropdown js-issuable-selector-wrap" data-issuable-type="issues"> + <div class="dropdown js-issuable-selector-wrap gl-mb-0" data-issuable-type="issues"> <button ref="toggle" :data-namespace-path="projectNamespace" :data-project-path="projectPath" :data-project-id="projectId" :data-data="issuableTemplatesJson" - class="dropdown-menu-toggle js-issuable-selector" + class="dropdown-menu-toggle js-issuable-selector gl-button" type="button" data-field-name="issuable_template" data-selected="null" diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue index d331fb47077..a73926575d0 100644 --- a/app/assets/javascripts/issue_show/components/fields/title.vue +++ b/app/assets/javascripts/issue_show/components/fields/title.vue @@ -20,7 +20,7 @@ export default { id="issuable-title" ref="input" v-model="formState.title" - class="form-control qa-title-input" + class="form-control qa-title-input gl-border-gray-200" dir="auto" type="text" :placeholder="__('Title')" diff --git a/app/assets/javascripts/issue_show/components/fields/type.vue b/app/assets/javascripts/issue_show/components/fields/type.vue new file mode 100644 index 00000000000..1ed222531f4 --- /dev/null +++ b/app/assets/javascripts/issue_show/components/fields/type.vue @@ -0,0 +1,79 @@ +<script> +import { GlFormGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { capitalize } from 'lodash'; +import { __ } from '~/locale'; +import { IssuableTypes } from '../../constants'; +import getIssueStateQuery from '../../queries/get_issue_state.query.graphql'; +import updateIssueStateMutation from '../../queries/update_issue_state.mutation.graphql'; + +export const i18n = { + label: __('Issue Type'), +}; + +export default { + i18n, + IssuableTypes, + components: { + GlFormGroup, + GlDropdown, + GlDropdownItem, + }, + data() { + return { + issueState: {}, + }; + }, + apollo: { + issueState: { + query: getIssueStateQuery, + }, + }, + computed: { + dropdownText() { + const { + issueState: { issueType }, + } = this; + return capitalize(issueType); + }, + }, + methods: { + updateIssueType(issueType) { + this.$apollo.mutate({ + mutation: updateIssueStateMutation, + variables: { + issueType, + isDirty: true, + }, + }); + }, + }, +}; +</script> + +<template> + <gl-form-group + :label="$options.i18n.label" + label-class="sr-only" + label-for="issuable-type" + class="mb-2 mb-md-0" + > + <gl-dropdown + id="issuable-type" + :aria-labelledby="$options.i18n.label" + :text="dropdownText" + :header-text="$options.i18n.label" + class="gl-w-full" + toggle-class="dropdown-menu-toggle" + > + <gl-dropdown-item + v-for="type in $options.IssuableTypes" + :key="type.value" + :is-checked="issueState.issueType === type.value" + is-check-item + @click="updateIssueType(type.value)" + > + {{ type.text }} + </gl-dropdown-item> + </gl-dropdown> + </gl-form-group> +</template> |